Category: Prototypes & Mockups

How to Publish Responsive Websites with Sketch and Launchpad

150572646701-responsive-design-with-auto-layout

Anima have built two super-useful Sketch Plugins. Auto Layout helps designers create responsive layouts in Sketch, and Launchpad exports the responsive design as a near-finished HTML/CSS website with decent code quality. TL;DR — watch the video… “Wait…another site builder? Really?” Well, Launchpad is more of an HTML/CSS exporter with some impressive features. It’s not your […]

5 Fast Tools For Generating Polished Product Mockups

1502794231I7ZiGJA-e1502794370760

When you hear the word ‘mockup’, it usually refers to a lo-fi website/app layouts. Today I want to talk about another type of mockup, product mockups. These are the mockups you might make to ‘show the product in action’. Typically they take your site, template, theme or mobile app and show it off by setting […]

Why Prototyping with Adobe XD is the Most-Complete Design Solution

1496071437featured

Even though Adobe XD is still relatively new, the reception has been terrific. So I thought we’d do a quick-but-fun tutorial that illustrates how designing and prototyping with Adobe XD is wonderfully rolled into a single tool, without making the app feel too bulky. In fact, Adobe XD is pretty minimal and it’s really easy […]

6 Tools to Stop Your Devs and Designers Strangling Each Other

14931876156WYqKyg-004

If you’ve been working in product development, web development, web design or most other areas where designers and developer work together, you’ve probably seen or heard at least one of the following (or something similar to it): From the designers: “We came up with a really beautiful design, but the developers really mucked things up. […]

Finch.io: A Visual Tool for Finding and Fixing Design Bugs

1493812191OsiADpX-001

When you’re beginning a brand-new design project, you probably start at the same place every time. On blank paper and pencil… Or maybe a wireframing/mock-up tool Sketches turn into wireframes. Wireframes turn into prototypes. Prototypes turn into fleshed out designs. But what happens during that final 10% of the project? The site is working but […]