A Life of Fight Against the Ugliness — 5 Crucial Skills of a Pro UI Designer
Some time ago I talked with my colleague Mateusz Jankowski, who is a Senior UI designer. I was telling him that I’m going to write a post about the truth of working as UI designer. The deeper you dig, the darker it gets, but maybe there’s one specific term that describes your daily duties? — I asked. His answer made me cry with laughter — sure, it’s like a visual OCD (obsessive-compulsive disorder). Well, it’s hard to disagree. But it’s just the tip of an iceberg.
Massimo Vignelli, one of my favorite designers of all time, once said:
‘The life of a designer is a life of fight against the ugliness’.
And personally — I love this quote. Making this world a more beautiful place to live in has been always my life’s goal and the reason why I became a designer. It’s always been the reason why I wanted to learn new things and explore undiscovered territories, and it’s also been the reason why I wanted to join Netguru — a place where you can fully understand what it means to design interfaces like a true pro and to fight… with ugliness.
Designers who have never specialized in any narrow field of business usually picture UI designers as people who take care of the color palette, button styling or creating style guide documentation for developers. In the minds of thousands, it’s just an easy piece of work for aesthetics-focused golden children of the Dribbble era who have no idea about solving real problems. Is there any grain of truth in it? In this post I’m going to tell you what I’ve learned designing interfaces in one of the fastest growing companies in Europe.
Information first
It’s no longer a theory — it’s a fact. Attractive things work more efficiently. By creating nice-looking and attractive interfaces we make our users more willing to experiment and think out-of-the-box. So theoretically, even if the product itself wouldn’t be top-notch in terms of UX structure, by delivering conscious visual solutions we can reach our client’s objectives with ease. In many situations taking care of a product’s aesthetics seems to be even more challenging than building a clear hierarchy and content patterns in the beginning of the process. Examples? It’s really good to understand the theory of colors as well as possess testing methods that will tell you if the hues you chose for a given component or state are adequate to the information they represent. That’s very important, especially given that color perception and attention span may depend on many different factors like age, culture, emotional arousal or the type of device used by the end-user. Possessing rich analytic data and aiming at a specific target group, a UI designer is able to acquire better results by taking very subtle decisions.
What else? I mentioned that conscious design decisions may make the product more useful. Let’s say that I’m working with UX wireframes that are totally crammed up with dozens of pieces of information of the same level of importance. My role then is to find a way of distributing them wisely, using colors, icons, letters or even backgrounds. And believe me, it’s not an obvious thing. Especially if the product has to be fully responsive, accessible on native browsers, and is going to be translated into Arabic within the next couple o months. Sounds ridiculous? Welcome to our world.
Vision
It may sound quite goofy, but a good UI designer has to be a visionary. And hold on, I’m not talking about pretending to be the next Paul Rand. By vision I mean the ability to predict the course the project may take in the future, beyond our control. One of the main assumptions in the projects I lead is to design in a way that keeps a high level of aesthetics regardless of the content that may appear along with the product’s further development. Every modern IT product should be handed over together with a strong background documentation that explains all the do’s and don’ts in terms of the content’s quality, including such technical aspects as pixel per inch ratio for retina-based devices like the iPhone X.
Another thing that we should also be able to predict is the scalability of components. An average landing page is usually responsive and, depending on the end user’s financial status, a mobile version of the product may be displayed on several types of devices, including different platforms and, as mentioned before, various screen resolutions.
That’s why every component I place into my design is a result of weighing up countless pros and cons, which may positively or negatively affect the time of development, legibility of code or performance of the product. What should be the tile’s size and the heading typeface inside to avoid scaling down the component on lower resolutions? That’s one of the questions I ask myself when designing an interface.
So the vision is mostly about staying practical. No high-spirit moods.
Design systems
If I had to choose two terms that are the closest to the heart of every great UI designer, they would be consistency and optimisation. Many of the projects that we work on on a daily basis are complex and long-terms systems, which evolve a couple times a year after the official launch. And there’s nothing weird about it — post-launch changes often allow companies to very quickly answer to users’ needs and expectations based on analytic data, surveys or other forms of feedback. That’s why every professionally planned product should be enriched with an advanced design system, especially if the client also plans to scale up his company and outsource some of the minor duties to external design teams. Creating a thought-out design system isn’t easy and obvious, but providing a consistent set of reusable components helps to avoid cross-teams misunderstandings and delays that may arise from such trivial things as half-baked task descriptions or a newly hired designer missing the basic style guide rules. Every delay has its price. Design systems aim to optimise these costs.
As a UI designer you have to know how to meet your client’s needs by building a library of repetitive components based on logical rules, rhythm, and consequence. You also have to be aware of the fact that the further steps of the product’s development may be taken by people who are not as fluent as you in terms of designing digital platforms, so the library itself should also be well-organised and handed over in a way that doesn’t leave any room for doubt.
Accessibility
According to the World Health Organisation report on disability from 2011, around 15% of the population are people who struggle with some kind of disability, of whom 2–4% experience significant difficulties in daily functioning. The topic itself isn’t easy and obvious, especially that disabled people usually stay in the shadows, feeling ignored or excluded. Luckily, thanks to the courage of people like Sinead Burke, this perception is changing, allowing designers from all lines of business to think about their users in a much wider context. But what does it actually mean in terms of IT products?
There are dozens of improvements that we can suggest to create more accessible products, but the key factor that should be always considered (regardless of whether accessibility facets are in the scope or not) is contrast. A good UI designer knows about the optimal typeface-background contrast ratio, uses professional plugins that help him adjust his projects to WCAG standards, as well as understands the role of complementary icons and text used in informative parts of the product.
In this particular case our role is also to convince the client that every single user matters, even though he may come from a group that doesn’t generate meaningful income. Does it actually make sense to put effort into refinements that don’t change anything at first glance? It turns out that it does.
Facts, figures and case studies — our UI craft is also ingrained in expanding practical knowledge that is necessary to design inclusively.
Team playing
As a UI designer, you’re usually responsible for exporting a multitude of types of assets for front-end or mobile developers. Well-prepared handover documentation and JSON exports of animations made with some professional add-on plugins may significantly decrease the time of development, thereby saving your client’s budget. In 90% of cases, the product creation process looks similarly — after the 5 step design process it’s time for handover and project termination. But what about the remaining 10% of cases? What if the UI designer has to do his normal job and simultaneously work with developers, delivering additional assets based on their current needs? I’ve been asked to modify and regenerate f.e. SVG backgrounds, because the ones exported directly from SKETCH had some visual flaws and needed to be fixed immediately — putting them on hold would block the development and negatively affect the deadline. So, from time to time, you have to be able to prioritize things, while at the same time communicating efficiently with your tech-colleagues who come from a different universe, where shapes and colors are represented by numbers and commands.
A simple visual change in design may cost half of a day of development — and that’s an amount of time which in some cases is at a premium.
Being one team and having the same goal doesn’t mean things will be easy — having different backgrounds also means having different perspectives. Basic knowledge about front-end tips and tricks increases our value and allows the whole team to stay productive.
Summing up
Staying up-to-date with trends shows that as UI designers we’re really passionate about our internet design community, but that we’re also not afraid of experimenting and shifting our visual preferences to ones that are currently taking over the market. Understanding that, our clients are sure that we’re professional design problem-solvers rather than a group of independent artists whose main job is knowing better what’s pretty or not.
Besides that, there’s another super meaningful thing — for one of the fastest growing companies in Europe, following and creating new trends and attracting huge attention in social media are proofs that our technology and skill set also keeps moving forward, while at the same being noticed by both the community and our competition. Every good UI designer understands this aspect. International hype itself is just the tip of the iceberg, the result of a long-term, thought-out tactic, and a temporary side effect, all at the same time.
Summing up, let’s go back to Massimo Vignelli and his famous quotes. Another time, he said:
‘Good design is a matter of discipline. It starts by looking at the problem and collecting all the available information about it. If you understand the problem, you have the solution. It’s really more about logic than imagination.’
In every fight, you have to understand your opponent and get the right set of tools. Especially if you’re a UI designer fighting with ugliness.
This post originally appeared on Netguru blog
Follow me on: Facebook • Twitter • Instagram | WojciechWasilewski.com
