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.
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.
10. Web-safe Typography
To save trouble later on, start with web-safe fonts right at the mockup stage. Not validating whether a font is usable online only causes extra work down the road.
But don’t limit yourself. If a project requires a unique or personalized font, it’s worth the extra resources. Just make sure it’s web-safe before using it.
11. Color Tools Save Time
Like choosing the right fonts, choosing the right colors can also be a huge time commitment. Using free, online color tools just makes sense.
Unless you’re a color virtuoso or artistic natural, stylizing a color scheme from scratch can be painfully tedious and full of dead ends. Color selection tools expedite the process.
For example, Cohesive Colors, a free GitHub project, finds color schemes based on input colors and distinct variable patterns. Another option is Paletton, a color wheel selector, also free. But those aren’t the only two: check out Creativebloq’s list of 28 color tools to find one that can help you.
12. Duplicate Layers
While this may seem like an obvious tip, it’s worth mentioning in case you aren’t already doing it. Develop a habit of duplicating layers for recreating similar styles in no time.
For example, if you use the same button sheet on different pages, if you have repeating text, if you have a graphic that’s only slightly modified, etc. Duplicating the original is an easy shortcut.
13. Use Layer Comps (Photoshop)
Those familiar with Photoshop may already know about the layer comp panel, and how useful it is. Basically, it saves “snapshots” of a PSD file, with certain groups and layers hidden. The advantage is being able to create multiple screens or pages in a same document, using select layers for all.
This feature makes organization a breeze. However, it’s only available for Photoshop, Sketch can’t compete in this department yet, though rumors say it has something in the works.
14. Proper Naming of Files and Layers
Layers and files can quickly become a mess, especially if you’re saving individual layer files.
For the sake of organization, properly name files and layers with some kind of convention. Not only does this make mockup building easier for you as you’ll find the elements faster, it’s also helpful to the entire team, who may not know your personal naming system. Remember that developers will need to access your mockups at some point.
What this means, essentially, is abandoning the confusing number-only format. A single descriptive word, though vague, is still better than a nondescript number. Additionally, you want to group layers together by common UI features.
Consider how you name your files to “good hygiene” for working with others. Josh Sears offers further advice on organization in Photoshop.
15. Version Control
While developers already know all about version control management, all designers have not quite caught on to Git yet. It may be tough to get the hang out, but luckily tools like Pixelapsecan help.
What you gain from version control is the ability to access/revert back to previous save states, (hence the name, “version control”). This is a lot smoother than amassing a collection of files named v1, v2, v3, etc.
16. Store Files in a Smart Location
With all the elements properly named and organized, you’ll need to store them all some place where team-members can access them easily. The two basic options are:
- Cloud-based service (i.e., Dropbox)
Even for freelancers, universal file-syncing is important. It makes retrieving files easier not just for colleagues, but you as well.
17. Be Independent
In other words, don’t rely on asking others if you come across a problem. That is, of course, unless the person you’re asking is the Internet.
This mentality of “I need to hear back from X before I start” will only slow down the entire process for everyone. A little online sleuthing can answer your questions 95% of the time, so think carefully if Google can save both you and your team time.
As a starting point, try this list of design blogs. Chances are other designers have come across your problem before, and published the solutions in one of those sites.
18. Preview on Live Devices
It’s one thing to stare at a mockup in a Photoshop or Sketch window, but it’s another altogether to see it live in the intended screen. Live previews give you a glimpse of what your mockup will amount to after coding.
The smartest ways to do this are to export the full images, or else use a tool like Skala Preview, which allows you to test on a vast range of devices.
19. Elicit the Right Feedback
Feedback can be brutal, but it can also be useful if gathered in the right way.
All too often designers get too deep into their projects after weeks or months, and can’t see the forest for the trees. A little outside perspective can reveal the obvious fixes that designers are blind to.
It doesn’t hurt to get a fresh set of eyes on your project before finalizing it. Try to find someone whose opinion you trust, but even calling over the closest person in the room might have surprising results. The important part is that more people than just you have seen it.
And, of course, this extends to user testing. Adding interactivity to your mockup (see tip #3) is the most effective way to test how successful your mockup is in real-world scenarios.
Really, it’s the ultimate form of feedback.
Further UI & UX Advice
If you found these techniques helpful, you can learn more practical UI and UX advice in the following e-books:
- Web UI Design for the Human Eye (Vol. 1)