You are probably getting tired of me talking about problems, research, and so forth… Sorry about that. I find all this problem thinking so important to finding a great design solution. That is why I talk about it again and again.

Let’s shift gears for a bit and actually talk about designing!

So you have a problem in mind, and you feel ready to open up Sketch, XD, or Photoshop and get to drawing a slick UI that will wow and inspire… Well, maybe not that, but I am sure you’d like to get to create something tangible, something that looks like design, something you can actually show.

I get that. But before you do that, I’d like to plant another idea in you.

You see, an app is largely a collection of screens. Each screen contains certain elements and functionality. A lot of those elements and pieces of functionality are common across the wide range of apps. Things like: menus, tables, input forms, selecting multiple items, editing something, etc. All this boring stuff…

It might seem boring and trivial, yet it is largely what makes up a UI of any application or website out there. And it is these details that make and break the user experience. These are things that users expect to know how to use, so the more familiar they are to the user, the better off your design will be.

Wait, does that mean that my UI has to confirm to all the other ones out there, you might be thinking. Well, yes… unless you really just want to confuse the users, and possibly lose a client.

It might sound like there is no room for creativity, and that is partially true. Design is not art where different is better. Design is much more like engineering where creativity is about finding a novel, and elegant solution by using what you have on your hands.

So you might see where I am going with this. And yes, there are pattern libraries that collect and catalog different UI elements from all around the web (and app stores). But I am not going to send you there.

What I’d like you to do instead is to start paying attention to the UIs of the apps you are using and create your own catalog. Here are some things to look for:

Menus

• What does the menu look like?
• How does it work?

Search

• Where is the search, and how does it work?
• Does search have an auto-suggest feature? Is it helpful?
• What do search results look like?

Content

• How is the main content presented? Is it in tiles, lists, tables?
• Are there ways to change or customize the view?

Forms

• How is the form laid out?
• Are the fields grouped in any meaningful way?
• Where are the field labels in relation to the input field?
• What types of fields are there (input, multi-select, etc)

There are other things like login, user management, payment collection, but I wouldn’t worry too much about those just yet. Typically those are the last things I would design.

What I want you to do is to start looking at the UI critically. Figure out what options exist, and why some apps might do it this way, and other apps some other way.

I’d advise you to create your own catalog and inventory elements that you like, and can use as inspiration for your own designs. Probably “inform” is more accurate here than “inspire”.

When you come across a catalog-worthy solution, take a screenshot and save it somewhere . Perhaps add some notes to it so you can remember what exactly inspired you to save it when you look at it again later. Evernote is great for that. You can also have a folder on your computer dedicated to screenshots. 

Sure, you can check out the pattern libraries as well, just make sure you are looking at patterns taken from real apps and not dribbble and behance concept art.

← Previous – TOC – Next →