5 Essential Elements of a UI Designer

What I have learnt during my first year in a software house as a UI Designer…

by Brett Mazoch, published in A Designer’s Thoughts | read in Czech

A few months ago I was asked to share my design experience with a graphic design student. It was an opportunity for her to get to know what it takes to be a UI Designer in a software company. So I started thinking about the most useful advices which I would share with a UI designer at the beginning of the path. In my mind immediately raised thoughts about design consistency, design workflow, team communication and several others. Moreover, I have realised that these topics are basically the most valuable things which I have learnt or sharpen during my first year in the company.

After a while of deeper thinking, I got an idea of 5 elements which in my opinion should be essential for every UI Designer. Especially a designer who is working in-house and very closely with developers and a product manager (in our company the development team consists of 9 developers, the product owner and me). Let me introduce you those 5 elements:

1. DESIGN WORKFLOW

Develop your own design workflow supported by a set of design tools

2. DESIGN CONSISTENCY

Keep UI consistent by creating, managing and using a style guide

3. SOURCES MANAGEMENT

Challenge yourself for well-organised files and graphics assets

4. TEAM COMMUNICATION

Communicate and describe design outputs clearly and precisely

5. SOFT & OTHER SKILLS

Keep developing and improving your non-design skill set

So Let’s have a look at them little bit more…

1. DESIGN WORKFLOW

“Develop your own design workflow supported by a set of design tools”

Design is a process. It is the process of solving problems. And such a process involves thinking and decisions. As designers we are here to support that thinking and decisions by our design workflow and tools we use. The goal is to get solutions designed smoothly, quickly enough and based on a research and requirements.

For example, my design workflow in the company includes sketching ideas on a blank paper and asking questions, creating digital wireframes, transforming them into hi-fidelity designs in Sketch and preparing outputs with annotated specifications for developers.

2. DESIGN CONSISTENCY

“Keep UI consistent by creating, managing and using a style guide”

The consistency is in my opinion one of the key elements of very usable and successful products. And the main tools for keeping the consistency across the user interface is the style guide for UI elements, design patterns and interactions.

In our company the style guide is my (the designer’s) and developers’ checkpoint. The great thing about the style guide is also that I can use it as a support for a communication with stakeholders. Thanks to that I can link my design decisions to already defined rules and principles.

I am writing about UI Style Guides and their fundamental building blocks in my special article called ► A Must for All Complex User-facing Digital Products — UI Style Guide.

3. SOURCES MANAGEMENT

“Challenge yourself for well-organised files and graphics assets”

During a design work UI designers end up with a lot of design variations in different stage of punctuality (lo-fidelity vs hi-fidelity vs specification). All of this for every new feature or functionality to develop. You can imagine that it is necessary to manage well a big amount of source folders, files and graphics assets. And the same applies for individual graphic source files in which I have to handle artboards, layers and all UI elements.

The best solution for me, to keep all that stuff manageable and quickly searchable, was defining an organisation structure and naming rules for all designs related sources and assets.

4. TEAM COMMUNICATION

“Communicate and describe design outputs clearly and precisely”

The work is not finished with an export of the final outputs. Not yet. These outputs need to be communicated to developers and afterwards the implementation needs to be continuously supervised in terms of design. And the precision of that communication influences the implemented result.

For example, rather than sending to developers just a static images with designs, I always create specifications and annotated flow diagrams (UI storyboards) for the main user path and, if needed, also for special use cases. These flow diagrams are very good for a higher view of the design and can be complemented with clickable prototypes. On top of that I am always open to discuss designs in person if something needs to be clarified more — it’s easy because I share the same office with the developers.

5. SOFT & OTHER SKILLS

“Keep developing and improving your non-design skill set”

I feel like for a UI Designer is very important to have more than only graphic design skills. The challenge is for us for example to communicate, to present and defend our ideas and to develop a good sense of empathy with users, business stakeholders and developers. In short — soft skills and psychology.

Another plus point in our software industry is always experience with programming and technology. I studied computer science and was involved in programming tasks during my whole career (using HTML, CSS, JavaScript, PHP, C#). Even though I am now focused just on design, learning programming and coding in the past was definitely not a waste of my time. I have a broader view of software development and I can use it to my advantage.


Final thoughts

Back in my home country (Czech Republic) I used to work as a Visual Designer & Front-end Developer on several digital projects which included websites and 2D/3D graphics. After I moved to England, I got a role in a software company which is focused just on developing a software product — web-based information system for clinics and hospitals called Epro. Obviously, I needed to learn a bunch of new skills and get used to a development flow and an agile environment. The 5 essential tips you have just read are truly the most valuable things I’ve learnt or sharpen so far there.

So as you can see, being a good designer is not only about drawing nice images. Being a good designer involves learning various skills as a complement to the craft of design itself.

In next articles we will look at those points in more detail and I will share my other tips and experience.

For more stories see ► A Designer’s Thoughts.

Thank you for reading!

Worth reading? 💚

If you enjoyed the article, please clap below to help others find it.

Do you have any question or just an idea for sharing? Feel free to leave a comment below or share it on Twitter.

Brett

The article was written by Břetislav “Brett” Mazoch while working as a designer in England. He moved there from the Czech Republic to follow his traveller’s dreams and work passion — UI/UX Design and Front-end Development.

Visit his Portfolio •• LinkedIn •• Twitter •• Instagram.

Like what you read? Give Bretislav Mazoch a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.