Design for Developers: Part 4

You now understand the importance of paying attention to design. You are familiar with design principles. You have set up tools that help you design or perhaps you even played with them a bit already. Now the question is how do you get better and what things to avoid, especially in the beginning?

This is the fourth and last article out of a series called Design for Developers. It shows how you can practice and develop your design skills. It should also give you practical tips, beneficial especially when you are just starting.

Simple is often better

Simplicity often adds value in many areas. It is a key factor to achieve code legibility and it has the same effect on design. By keeping the design simple, you make it easier to consume for the users. Additionally, this might be especially important if this is your first attempt at design. The fewer elements there are, the lower the probability of making a mistake.

“The ability to simplify means to eliminate the unnecessary so that the necessary may speak.” - Hans Hofmann

In practice, whenever you are designing something, ask yourself, “Is there anything I could remove without having the whole design lose its function?”. If the answer is yes, consider removing it and ask the same question again.

This principle also applies even if you are not designing yourself. Simplicity, in this case, means adhering to what is prepared by the designer. Any custom touches that you might add may interfere with the whole picture or introduce inconsistencies into the system. Stick with simple as long as it serves a purpose.

Do not reinvent the wheel

As previously stated, most if not every problem that you might have, someone has already solved. Let's take icons as an example. Do you want to have icons on your website? Instead of trying to create your own set, you can use an existing one. Material Design Icons is probably the most commonly used set of icons. That way you get a quality set of a wide variety of icons, consistent with one another, optimized and available in different formats.

Material Design Icons

An icon is an example of a low-level design element. What if you have a high-level problem, such as creating an overall aesthetic of the website? Or you need to organize information in the hero section? How about designing a registration flow? You might have heard this quote.

“Good artists copy. Great artists steal.” - Pablo Picasso

Don't be afraid to examine other peoples' work. Look into how great designers approached problems similar to the ones that you might have. Search for well-established solutions and common patterns, that users might already be familiar with. Read case studies if available. Try to understand why and how a particular solution works. Then apply it in your context.

Iterate

Your first attempts at design might not be very successful. That's totally expected. What might be surprising, even for a very experienced designer, the very first attempt at a new design or solving a particular user experience problem might not be the best either. That is why we need iteration.

Whenever you finish a significant portion of work, take a pause and review what you have done. Now, what's a significant portion of work, how long should the pause be or how many rounds should you do will depend on various factors. In general, the larger the portion is, the longer the brake should be. You would be also better of having a few more rounds in this case. Remember to focus not only on the element or section that you have just designed. Cross-reference it with the rest of the screen or even the entire system. Look holistically at a feature you are creating.

Ask questions

Failure is the most information-rich data stream there is. And to fully use it, you need to know what is wrong and why. Let me tell you something - there is no perfect solution. That's why iteration is so important and so are questions.

Ask as many questions as you can. This way you can learn fast, also when you are not doing the design itself. So when you are presented with a design, ask as many questions as possible. This way you either learn the right reasoning or help pinpoint an area that could be improved.

“Question everything. Every stripe, every star, every word spoken. Everything.” – Ernest Gaines

Why these two elements are grouped? What makes this element consistent with the rest of the system? Why this element is smaller than the rest? You can ask designers these questions, but you can also ask yourself, whenever you iterate.

Practice and get feedback

Finally, the most important thing is to take action. Even if you don't have clients, you can always practice. Here are a few simple ideas that you might try.

Copy a design of an existing website or an application that you particularly like. If you feel confident, let yourself redesign 3 elements, making sure they are consistent with the rest.
Redesign an existing website using an overall aesthetic of another website. Keep the content intact, but apply fonts, colours and other style primitives from another project.
Add another page to an existing website. Keep this page relatively straightforward, so you don't focus more on copywriting rather than on the actual practice. Contact or product pricing pages are good examples to consider.

Since it's hard to see everything yourself, find someone who will challenge your work and get feedback from them. It can be a friend or a coworker, someone how is more experienced in design. Unfortunately, there's no shortcut here so be patient and keep practising. You will get better results with time, I promise.

Conclusion

This concludes the last article of the series called Design for Developers. Design is an integral part of your work, regardless of whether you are creating it yourself or just implementing existing designs. Understand the principles, know the tools, keep practising and get feedback. The last part never truly ends. You can always get better and learn more, so let this series serve you as a starting point for further research and learning.

I hope you found this useful. What are you doing to improve your design skills?

Design for Developers: Part 4 - Keep Practicing