wireframes and mockups
Articles
Wireframing – The Perfectionist's Guide
If you’re starting fresh on a wireframing project, I recommend going through each section’s guidelines like a checklist.
How to build wireframes and mockups to validate your business idea
While you are validating your idea and start experimenting, for many business models the best experiment to perform is to quickly create wireframes and/or mockups and use them to pitch customers.
Why Wireframes?
nderstanding that reason might help you understand what your process should look like. And in my opinion, your process is the difference between a website design taking 3 weeks or 3 months.
How to get value from wireframes
Hopefully by following this technique you’ll be able to quickly generate multiple ideas, support the ones you chose by comparing them to other options, and avoid committing to your first idea early in the project.
Narrative Wireframes: The story-telling approach to UX design
We are accustomed to perceiving design and especially wireframes as purely visual/aesthetic entity. The desired impact of design though is way bigger than just that. The design has to provoke action and help the product live up to its full potential. This signifies the meaningful aspect of interface and experience design that might lead us to the point where a meaningful aspect becomes the priority.
The Messy Art Of UX Sketching
When you need to ideate website layouts or mobile applications or to storyboard workflows and context scenarios, sketching is much more efficient. It keeps you from getting caught up in the technology, and instead focuses you on the best possible solution, freeing you to take risks that you might not otherwise take.
Everything You Need to Know about UX Sketching
UX sketching is a crucial, yet often overlooked, aspect of user-experience design. Sketching is a very efficient way of communicating design while allowing designers to try out a multitude of ideas and iterate them before settling on one.
5 Tips from 5 Designers to Improve Your UX Sketches
We’ve collected the advice of 5 different UX designers for 5 different techniques guaranteed to improve your UX sketching.
A Step-by-Step Guide for Starting a New App Design Project in Sketch
This is not about showing you how to make the whole meal…just how to chop the ingredients and turn the stove on.
Quality Wireframes Inspiration
Get inspired by these 20 well made wireframes.
The 8pt Grid: Consistent Spacing in UI Design with Sketch
Spacing is everything in UI design.
Wireflows: A UX Deliverable for Workflows and Apps
Wireflows are a combination of wireframes and flowcharts. They can document workflow and screen designs when there are few pages that change dynamically.
Responsive Design in Sketch: Group Resizing vs. Auto Layout Plugin
Taking a mobile-first approach to low-fidelity prototyping before you even begin accepting feedback, is probably the best (and safest) way of validating your ideas and delivering a responsive solution to a design.
Videos
Wireframing for UX: What it is and how to get better at it
The different types of wireframes you can create, and some practical advice about how to improve your wireframes.
Wireframing with Sketch
Let's take a look at how to use Sketch to build wireframes, using a custom tweaked basic template.
Sketch Plugins
Learn how to best use plugins to improve our Sketch workflow and unlock new functionalities.
Quickly Design a Website with Sketch
An episode targeted at beginners, where we quickly design a website page in Sketch.
Sketch Tricks
From mastering long shadows, to creating SVG animations to cool tricks like creating colour palettes and exporting assets to Xcode.
Designing iPhone X mockup screens with Sketch
Let's get more familiar with iPhone X and quickly create a mockup using Apple’s resources as a library.
Podcast
Tools
Sketch
Sketch is a design toolkit built to help you create your best work — from your earliest ideas, through to final artwork.
Magic Mirror
Magic Mirror is a Sketch extension (or called plugin) that adds Perspective Transformation to Sketch, so users can create perspective mockups and other distorted effect to their UI design.
Sketch Runner
Runner helps you to get around Sketch quicker by giving you an intuitive interface to supercharge your daily workflow. Stop searching through your menu & start running commands directly from your keyboard.
Sketch for Designrs
A growing collection of the best Sketch resources.
Auto-Layout plugin
Auto-Layout is a plugin for Sketch that enables designers to design fully responsive artboards.
Elements
A free iOS UI kit, brought to you by Sketch
Resource Cards - Selected free resources for designers
Resource Cards is a growing list of free resources aimed to help creatives with their next project.
Sketch App Sources
The largest collection of free and premium Sketch resources for mobile, web, UI, and UX designers working with Sketch by Bohemian Coding. All .sketch files and .svg files are editable and easy to use.
Flowchart kit for Sketch
Fully customizable and scalable vector elements with 3 pre-defined color themes for creating fast sitemaps and wireframes.
Mockuuups Studio: Product mockups in a second
Drag-and-drop tool for creating beautiful app previews or any marketing materials. Easily insert your screenshot into digital mockups for free.
