How to Create a Responsive Landing Page with Sketch

Anima Toolkit 101

Anima App
Anima App
Jun 27, 2017 · 4 min read
Image for post
Image for post
Create Responsive and Interactive High-Fidelity Prototypes, and Export HTML. All Inside Sketch

On this post

  • 🙋‍ Create a hero image
  • 📱 Design artboards for Mobile, Tablet & Desktop with Breakpoints
  • 📩 Add a form for clients to reach out
  • 🚀 Publish our design as a website
  • ⬇️ Download the files

Let’s Begin!

First, download Anima plugin for Sketch, or Anima plugin for Adobe XD (Figma coming soon).

Need a Hero?

A beautiful end-to-end image at the top of your page sets the atmosphere. The easiest way to achieve that is to put a very wide image, overflowing the artboard and centered.

Image for post
Image for post

Design Responsively 🍻

In Anima each artboard is a web page. In order to create responsive design that fits both mobile and desktop we’ll use the Breakpoints feature.

Image for post
Image for post
Connecting two artboards as the same web page (different sizes)
  • 320–767 will show the artboard with 320px width.
  • 768–1023 will show the artboard with 768px width.
  • 1024+ will show the artboard with 1024 width.
Image for post
Image for post
The displayed artboard will change at browser width 1023px

Forms — Talk to your Users

Mostly, landing pages have a contact or a signup form. It’s super easy to make one with Anima.

  • Use the Prototype tab > Smart Layers > Forms button to make them an input and a submit button.
Image for post
Image for post
Creating a Form — Select text layers to be the input, then a layer to be a submit button
  • Also, you can set a ‘Thank you’ and a ‘Failure’ pages.
Image for post
Image for post

Important — Set your Home

When using multiple artboards (multiple websites pages) let Anima know your home-page expanding the panel, selecting home artboard & Prototype Tab > Flow > Set as Home.

Image for post
Image for post
Select Artboard, Prototype Tab > Flow > Set as Home

Preview!

Ready for the fun part? Click Preview in Browser to watch it comes to life 🎉

Image for post
Image for post
Watch your design becomes a web page
Image for post
Image for post
Click to see the live result

Ready for sharing?

In browser, click Sync to add it to your project — Drafts are private to allow you polishing your website without sharing it half baked.

Image for post
Image for post
Click Sync to sync your draft into the Project
Image for post
Image for post
Click Share to get to the share panel
Image for post
Image for post
Invite stakeholders, share with the team, or get a public link

Tips

  • Make your hero stretch instead of overflow using Layout > Pins:
Image for post
Image for post
Optional: Pin hero to make it stretch
Image for post
Image for post
For example, the hero image is a large photo, best practice would be to use JPG format with 1x.

Downloads


Learn more

Image for post
Image for post
Create Responsive and Interactive High-Fidelity Prototypes, and Export HTML. All Inside Sketch

Design + Sketch

The best collection of articles, tips, tutorials, and…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight.

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox.

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store