Post Image

19 Best Practices for Faster UI Mockups

by
Steven Snell

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.

Let’s begin.

1. Sketch Your Ideas First

Sketching is quick, easy, and risk-free.

image10

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.

Dragging a button UI element in UXPin

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.

image11

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.

image03

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.

image06

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.
image02

Using default fonts or 3rd party options — like Google Fonts or these 653 free typography resources — cuts out a lot of time in designing mockups.

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.

image01

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.

image08

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.

image12

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 Pixelapse can help.

image05

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:

  • Intranet
  • 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.

image09

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.

image07

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-practices-book-2

This post was originally published on CreativeBloq.

by Steven Snell

Steven Snell is a web designer, blogger, and founder of Vandelay Design. In addition to maintaining his own blog and writing for a number of other top design blogs like Smashing Magazine, he also manages an online shop offering graphic design resources.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you