UI mockups help answer the big visual questions.
The below tips are based on my experience as a web designer and blogger. My goal is to help you create faster UI mockups without sacrificing the quality of your work.
1. Sketch Your Ideas First
Sketching is quick, easy, and risk-free.
Before diving head-first into pixels and grid dimensions, sketching out your thoughts can be a helpful first draft to organize your ideas and experiment a little.
After all, it’s easier to test a concept in a sketch than in a digital format. You can even sketch out a few different compositions and decide on the best after seeing them all laid out together — it only costs a little time and some paper.
2. Start with Mobile Screens
It doesn’t matter whether you’re designing mockups, wireframes, or prototypes — always design the smallest screen first. While the mobile-first approach is a general responsive design best practice, it’s no less relevant when designing mockups.
Starting with the smallest version and then scaling up forces designs to consider only the essential first, then add the secondary content in later versions.
The alternative is designing with too much freedom and then removing elements as you scale down, which often leads to complications and backtracking. Mobile-first design solidifies the most troublesome composition first, making it easier to maintain a consistent experience on the larger screen afterwards.
3. Use Compatible Wireframing & Prototyping Tools
Mockups are just one link in the greater design process chain. Their effectiveness depends on both the wireframe beforehand and the prototype afterwards. And all three work best when digitized.
Designers tend to prefer software made for visuals rather than design, software like Photoshop or Sketch. These allow them more options for graphic design, but can cause complications when transferring into prototyping software.
Likewise, wireframes and prototypes have their software with more options for interactivity, UI patterns, customizable libraries, and smart elements.
Some wireframing and prototyping tools allow users to directly integrate Photoshop and Sketch documents, helping designers add interactive elements to these once static documents as simply as dragging and dropping.
This time-saving methods allows designers to create mockups in whichever software they prefer, and reintegrate the documents into the design process without missing a beat.
That means almost instantly turning their impressive visual documents into high-fidelity prototypes.
4. Commit to Your Chosen UI Design Software
In the debate between Sketch and Photoshop, both sides remain deeply entrenched in their own opinions. The thing is, one is not inherently better than the other — it depends on the tastes of the designer.
That’s not to say that Sketch and Photoshop are the same. Sketch offers a lot of design features different from Photoshop, while Photoshop has more advanced visual capabilities.
If you don’t already have a preference, give them both a spin and see which works for you. Chances are you’ll naturally feel more comfortable with one or the other.
5. Review Other Visual Successes
Sometimes the best way to learn is to simply observe.
You can almost intuitively tell which sites and products have “it,” the X factor, but can you tell why? Study other examples of visual successes and see if you can determine what they did right, and how you can use the tactics for your site.
If you need help finding inspiration, check out these galleries, most of which update daily:
6. Remove Unnecessary Elements
Visually speaking, cluttered interfaces aren’t effective. They are distracting, not to mention they negatively affect comprehension, searchability, and legibility. For these reasons, keep the number of elements down to a minimum.
Fewer elements means the ones you chose to keep are stronger. Even if you’re not using a minimalist style, unnecessary elements still dilute the main content, thus undermine your most important goals. If it’s not necessary to the UX, get rid of it.
In The Guide to Interactive Wireframing, design professor Tom Green outlines a user-focused procedure for deciding what stays and what goes:
- Build a content inventory of all prospective elements on a page
- Prioritize these elements and remove the ones that aren’t necessary
- Fit the remaining elements into a visual hierarchy based on importance
- Create content blocks based on element categories
- Add and subtract blocks into layouts according to priority
- “Sculpt” designs at each iteration until they start resembling interface objects
7. Implement a Grid System
Like any other work instrument, grid systems evolved to facilitate the everyday tasks of digital designers. While some still refuse to use them, they are nonetheless beneficial, or else they wouldn’t exist.
An organized grid system lets designs precisely measure out alignments, white space, and content hierarchy to the pixel.
While horizontal grids are the most used, a vertical grid (baseline) can still be useful, especially with typography.
8. Take Advantage of Free UI Elements and Icons
Individually styling each button, icon, and graphic can take as much time, if not more, as the mockup itself. Take advantage of free UI kits and collections, like a free social media icon kit, to save time.
Companies offer free kits for publicity, to build community, or even out of the kindness of their heart. These kits are often layered for easy color or thematic customization, so you can personalize them to your project.
There are plenty such kits for Photoshop and Sketch, and you can also find additional resources for mobile apps — like this Android Lollipop kit — with pre-built foundations.
9. Use Vectors
Raster graphics display images with a fixed set of pixels (such as photos and videos), whereas vectors alter the amount of pixels based on resolution and screen size — they can be scaled without loss of quality. Whenever possible, use vector graphics.
Vector graphics scale quickly, adapting to high-definition, retina screens at two or three times the size. Photoshop and Sketch were designed with this in mind. Photoshop shapes and custom paths are automatically vectors, and Sketch offers vector support by default.
Take a look at these free vector elements to help get you started.
For app developers, read this discussion about working with retina screens.