Building AnimaApp.com with Sketch
Open sourcing our homepage, built with Launchpad for Sketch

On our mission to empower designers, we are continuously pushing the envelope on what designers can achieve without writing code.
This time, a request arrived from our awesome community to share our homepage design. So here are the files and some tricks we’ve used there.

Let’s get started with the links:
Breakpoints
This is one of Launchpad’s most easy & powerful features. Breakpoints allows you to make multiple layouts for a single page.
How? Select an artboard, click the breakpoint button & connect it to others.

Auto-Layout Pins
Auto-Layout & Launchpad works well together. The first allows you to make your design responsive, while the second allows you to bring it to life.
We’re using pins extensively all over the design, here are some samples:



Floating Header Effect
Using fixed position and playing with layers order we created the effect of a static background with scrolling content. Plus, a transparent top bar above all content. Here’s how:


If you take a look in the file, you can see some of the backgrounds very wide and centered. The reason is making it look good on wider screens without stretching images. Our thumb rule was 2560px wide — Fitting to iMac 5k.
What else?
Amongst other features, we’ve used hover effects, forms, video players & links. Widgets allowed us to add some analytics snippets and such. Stacks made it easy for us to keep the top & bottom link lists in order.
Also, we’re adding more and more features to Launchpad, and we’d love to hear your thoughts. Join the discussion on our Facebook group or follow us on Twitter.
Until the next time ✌️
Anima Team


