Build Your Visual Library: Design Tips and Challenges

One of the big differences between a seasoned designer and a junior one is the visual library he/she builds.

What Is a Visual Library?

This is the stuff in your head when it comes to UI elements and UX practices. What you have built and have an understanding of how it works. The richer your library, the faster you can come up with solutions on the spot.

Let’s give an example: As a designer, you are tasked with building a new website.

What website? You might ask. Well, that’s all the requirements you have. A challenge from a fellow coworker. Oh, also, you have one hour to do it. This is a challenge we did at DevriX and here is one of the results after 3600 seconds:

There wasn’t much time to consider the topic, so it was right into the header. What components does a header have?

• A title for sure
• Navigation
• Search bar
• Some social links
• Some call to action buttons, mainly to register and/or create an account
• Some navigation to make it interesting

Where did all of this come from? It was a blank page prior. There wasn’t even a topic, to begin with. It all happened due to the visual library that had been created in the mind of the designer throughout the years of building websites, applications, and everything around them.

Just how many ways can you design a header? Hundreds of ways. There are so many various types of elements, topographies, colors, overlays, buttons, elements and so much more. It’s an interesting experiment to do.

How to Build a Visual Library

While the simplest answer is “to make more designs”, it’s not a very satisfying one simply because there is much more to it. What is more important is diversity. Building different designs. One direct way in which you can approach this would be to do redesigns of big sites.

Here are a few examples:

Facebook:

Gmail:

Twitter:

There are just so many examples. The more complex the design is, the faster you will progress. But, how does it work exactly?

Let’s take a look at a list as an example. A list can have a header that names it, it can have icons that can be colored, similar in design or different in design. It can also have a larger title and subtitle, maybe a label with a number. Then you can add hover states, items that can be selected or, disabled, and so on. With all these variations, you can make a wide variety of list designs.

To be able to come up with so many configurations and layouts is to have a good visual library. To know that you can make it that way. It’s like having someone next to you that says “Draw me a box”, then “Add a title” and you do it without thinking. All these decisions are made because you’ve done it before. Indeed, it also follows design fundamentals, but you can’t reach down to your notes or books all the time. It’s like training an AI – you need to build patterns using a  “successful order of elements”.

All Visual Artists Need to Build Libraries

A stark example of this is Kim Jung Gi – a genius that can make life-like artwork using any perspective.

In an interview he says how throughout his whole life he has been looking at all the objects around him, trying to understand their shape and draw them from a different perspective. With this skill, he is now capable of drawing everything you see in the image above by simply starting from a white piece of paper without any references.

Or better said – without references that he can reach for because his references are in his mind – his visual library. This is an example of a master’s work, which is a great goal to strive for a designer.

In the same way that web designers learn about buttons, lists, cards, input fields, popups and so much more, digital artists learn about materials, lighting, silhouettes, how muscles work, how gravity pulls you down, and puts a strain on your body and so on.

This is an example of how digital artists learn about various materials by trying to apply them to a sphere. Magma, wood, fur, wine, egg, cheese, anything is valid. Learning about it, doing it using your hands, imprints it little by little in your brain. And when the time comes to apply that material to a real painting, you now have a better understanding of how it really works and how the final result should realistically look.

Here is an example where skin, leather, metal, and hair are all used to produce a very good looking final product. The lack of fundamental understanding of these materials could make the metal look like plastic, leather-like paper, and so on.

Web Design Components Challenges

Now, let’s take a look again at some common components that you will be using often in web design and some practices to do:

1 – Buttons

One of the most fundamental components on a website. Buttons come in all shapes and sizes. You can set gradients, change colors, add text-shadow, add borders (more than one), add gloss style, outline them, change their shape (square, rounded corners, circle), some come with icons, others have icons separated in sub-clickable area.

Task: Design a button in 20 different styles. The bigger the difference between them the better. For each one, keep following best design practices in terms of contrast, balance and so on.

2 – Cards

Cards or boxes are another super common component. It can hold any type of content, though some common elements could be a header/footer + main content.

Task: Using the content, form the cards above, design 10 variations, ideally as different as possible. Change style, add new elements, rotate them, use gradients, shadows, icons, and illustrations. Try to go wild with it.

3 – Comments

Almost all blogs have some form of commenting system. But did you consider that the comment component might not really hold an actual comment but more like a “status” change?

Task: The example above showcases just that. Now, try to come up with anything related to a comment component – comments from users, task update statuses (which are in the comments area), chat-like commenting, anything. Anything between 7-10 variations would be a good number. Again – try to keep them all different. Research more, find ideas, browse sites.

The goal of these exercises is to find ways to do common elements in new ways that you didn’t know about before.

4 – Sliders

Sliders are one of the components that many front-end developers hate because of the huge amount of problems they create as well as the heavy JavaScript that might be running in the background. But that doesn’t mean that you won’t need to make one.

Task: Browse the web and various designs to learn more about the different layouts and approaches. Maybe take a look at JS libraries where they do slides to see what they have. From there, design 10-15 different designs for sliders. Again – try to make every design as different as possible from the previous, do not just use slight enhancements.

5 – Input forms

Input forms are another core part of almost any website. Interesting with them is that they receive information instead of output one.

Task: Your job here is to come up with the weirdest type of information that someone might need on a website. Upload a PDF or PSD (pick one), credit card information, add a recipe for cookies, calculate paint mixing ratios, create a car dealership configurator. Anything that comes to mind, the more unique the better. Again keep browsing websites to see real solutions. Design at least 10 different unique forms with unique designs.

Summary

Building a design library as a designer is one of the major stepping stones to improving your workflow, producing designs quickly, solving problems for your clients, and coming up with unique and genius ways to improve the user experience. When you start browsing and looking closely at each element on the web, you begin to consider the user’s actions, what they see, and how that could be improved.

Using the above tasks as homework swill help you fill up your portfolio. Don’t limit yourself to just the 5 tasks mentioned, go out there, browse websites, do redesigns, study them, and continue developing your design senses and building your own visual library!