Prototypes & Mockups
![15 Top Prototyping Tools Go Head-to-Head](https://uploads.sitepoint.com/wp-content/uploads/2015/06/15062700562016-04-02-adobe-xd-from-a-digital-ui-ux-designer-perspective-8.png)
Dave Kearney compares the top 15 prototyping tools disrupting the design tool market today, with video overviews of each one.
![Reliable UX & UI Tools for Your Projects in 2018](https://uploads.sitepoint.com/wp-content/uploads/2018/04/15240149577.png)
Need to improve your project's UX? One or more of the top UI/UX tools described in this post will serve you admirably.
![How to Take Your Idea from Concept to Creation with Moqups](https://uploads.sitepoint.com/wp-content/uploads/2018/02/1517890677damian-zaleski-843.jpg)
Learn how Moqups can help designers with the product development pipeline, from early-stage brainstorming through to hi-fi prototyping.
![ProtoPie, the Hi-Fi Prototyping Tool That Will Improve Your Workflow](https://uploads.sitepoint.com/wp-content/uploads/2017/11/1510791809Feature-Image.jpg)
An introduction to the prototyping tool ProtoPie, and how it can help you improve your design workflow.
![How to Make Paper Prototypes](https://uploads.sitepoint.com/wp-content/uploads/2017/10/1509075429mounzer-awad-348688.jpg)
There are no rules for making paper prototypes––that is what's great about it. You just need materials that are commonly found in any home or office.
![How to Prototype Interactions with Adobe XD](https://uploads.sitepoint.com/wp-content/uploads/2017/10/1509075294ana-bernardo-185037.jpg)
The following is a short extract from our book, Jump Start Adobe XD, written by Daniel Schwarz, a highly practical tutorial.
![How to Use Adobe XD’s Smart Guides](https://uploads.sitepoint.com/wp-content/uploads/2017/10/1508481460dimitry-anikin-383628.jpg)
Smart guides illustrate how objects align to one another — they can display the distance between layers, or whether a layer has snapped to another.
![How to Publish Responsive Websites with Sketch and Launchpad](https://uploads.sitepoint.com/wp-content/uploads/2017/09/1505675553Bitmap.jpg)
Daniel Schwarz shows us how to design and publish static HTML/CSS websites using Sketch and two Sketch Plugins (Auto Layout and Launchpad).
![5 Fast Tools For Generating Polished Product Mockups](https://uploads.sitepoint.com/wp-content/uploads/2017/08/1502794251zOGX57g-e1502802665731.jpg)
Product mockups are used to showcase web/app designs in a device frame, but can we accomplish this without Photoshop? Yes, and today, Alex shows us how!
![Why Prototyping with Adobe XD is the Most-Complete Design Solution](https://uploads.sitepoint.com/wp-content/uploads/2017/05/1496071437featured.jpg)
In this tutorial, Daniel teaches us about designing and prototyping with Adobe XD, and explains why it might be the most complete design tool yet.
![Finch.io: A Visual Tool for Finding and Fixing Design Bugs](https://uploads.sitepoint.com/wp-content/uploads/2017/05/1493812191OsiADpX-001.png)
Finch.io is a new visual approach to finding and fixing bugs in your web projects. We take a test-drive of the beta to see what the fuss is about.
![6 Tools to Stop Your Devs and Designers Strangling Each Other](https://uploads.sitepoint.com/wp-content/uploads/2017/04/14931876156WYqKyg-004.jpg)
Having the best developers and designers on the planet is no good if they aren't on the same page. David has the tools to help you fit them together.
![How to Handoff Designs with Sketch and InVision](https://uploads.sitepoint.com/wp-content/uploads/2017/03/149009219650036.jpg)
Development teams are getting larger and collaboration never more challenging. Can Sketch and Invision help?
![How to Turn Your Sketch Files into Working Prototypes with Origami](https://uploads.sitepoint.com/wp-content/uploads/2017/03/1489118015rest_prototype_ptxdtl.png)
Sketch is a great for UI Design, but it stops at flat designs. Mateo shows you how to do sophisticated prototyping with Sketch files in Facebook Origami.
![How Writing Our Book Taught Us About Killer Prototyping](https://uploads.sitepoint.com/wp-content/uploads/2017/03/1488936180UxprotoBC-01.png)
What’s changed is that we’re aiming to use prototyping to explore design problems in all projects that we work on by default.
![Catching Frontend UI Design Tricks with SnappySnippet](https://uploads.sitepoint.com/wp-content/uploads/2017/02/1486546358et.jpg)
Often the key to understanding complex things is to understand their simpler parts first. SnappySnippet is a tool that can help you with that.
![Web Design 2016: Attack of the Chromes!](https://uploads.sitepoint.com/wp-content/uploads/2017/01/1483402819Frame.png)
Every year your workflow changes. For me, 2016 was the year when the Chrome App arrived as a serious web/UI design option.
![What is Adaptive and Responsive Design?](https://uploads.sitepoint.com/wp-content/uploads/2016/12/14810898681480981940responsive.png)
We all have an understanding of responsive design, but how does it relate to 'Adaptive design'? Turns out the answer depends on who you ask.
![26 Steps of Product & Dashboard Design](https://uploads.sitepoint.com/wp-content/uploads/2016/10/1477897013Featured-e1477907094974.png)
Jan Losert has spent 4 years refining his refining his design product dashboard design – now he's ready to share his insights and secrets. Read on.
![Type Nugget: Good Typography is About Finding the Right Playground](https://uploads.sitepoint.com/wp-content/uploads/2016/10/1476243093play.jpg)
While web designers have more typography choice than ever before, arguably our tools haven't caught up.Type Nugget hopes to fill the gap.
![The Great Prototyping Debate: Software vs Hand-coding](https://uploads.sitepoint.com/wp-content/uploads/2016/09/1474007969pingendo-1.png)
Visual prototyping tools are fast but lack the flexibility of hand-coded HTML prototypes. Why not both? Pingendo is a visual tool based on Bootstrap 4.
![5 Most Common Wireframing Mistakes (And How to Avoid Them)](https://uploads.sitepoint.com/wp-content/uploads/2016/09/1473309653wireframe2.jpg)
Wireframing is a key component of modern frontend design but often overlooked in design and development courses. Saad can help.
![Is Sketch App with Atomic.io the Perfect UI Design Duo?](https://uploads.sitepoint.com/wp-content/uploads/2016/08/147210296640865.jpg)
Sketch is great for UI design. Atomic is great for prototyping. But can they combine seamlessly as a Sketch and Atomic.io UI tag team?
![How to Create Responsive Layouts in Sketch (with a Drop of Fluid)](https://uploads.sitepoint.com/wp-content/uploads/2016/05/1469286692fluid.jpg)
Sketch app is primarily an Interface Design tool so it makes sense for it to be responsive. Daniel show
Every successful product has them… does yours? Below we boil down the practice of product design into its 3 essential components.
Fireworks is fizzling out, but Adobe has returned with a mystery new UI tool. What is Adobe XD? Will this fiery comet become a star? Dan investigates.
Failure is a wonderful teacher – as long as it doesn't kill you. CyberCity lets hackers and security experts practice without anyone getting hurt.
Sometimes the most wonderful creations die for want of a tiny bit of design love. Maybe you can make the difference?
Animation is as important to our modern UIs as buttons and menus. Daniel shows us how to prototype complex animations with Atomic.io
Sketch App has become a viable graphics option for many designers, but it has its... quirks. Daniel looks at some big improvements in the latest update.