10 tips for upcoming UI (/UX) designers
Meet the team: Sandra is our Director of Design. Also a sourdough bread aficionado :D
Being a recruiter for UX designers and engineers for about 10 years, I see very common and repeating mistakes that could be easily avoided both in the portfolios and during the interviews. So, I put together a twitter thread that I decided to elaborate a bit in more details:
1. Graphic design is (just) the foundation
But it’s very different from software UI design. Colours, typography and spacing are the basics, but you have to learn how to apply them within the constraints that digital UIs bring. So, if you did branding or packaging graphic designs so far, you will be considered a beginner in UI and if you don’t redo your portfolio to show some UI work, you will probably get rejected for senior UX design roles.
2. Learn the UI components
There are UI components that are pretty common in web and app designs. A lot of design systems are available online so you can go ahead and research them in more details and learn about all variations. The native HTML and custom components are tweak-able but the basic functionality and usage are common patterns you have to follow.
3. Cover the UI stack
The biggest difference with graphic design is that your UI is alive and not set in stone. Think about all possible states of a component or a screen you’re designing — ideal, empty, error, partial, loading.. the user should be always informed what is happening, what they did, was the state saved, etc. As a designer you should think through all of them and plan your designs accordingly.
4. Accessibility shouldn’t be an afterthought
Minimum contrast standards and keyboard navigation through a user flow are a must. Covering screen reader user flows is a big challenge, but don’t leave it out if you work on publicly available websites and apps where you’re not sure who your users are. Design for everyone.
5. Sync with developers early on
If there has been a decision by the software engineers to use a frontend framework, adapt the designs to it instead of the other way around — it will save everyone a lot of time. That is if you don’t compete for the Awwwards :) You can kick-start your designs with an existing UI library and build up your designs from there. There are also common patterns per platform (web, iOS, Android…), especially the navigation patterns, that should be followed — don’t re-invent the wheel.
6. Know the difference between UX and UI
They come interchangeably, but if you put “UI/UX” in your title, then have it clear in your mind and know how to explain what do you do from the design process. Care about users; learn the personas & user flows (and/or create them); and talk to those that will actually use your UI and test it early on. Know that UX is more about understanding the problems and iteration on possible solutions, while UI is more about the craft. Business decisions and product design is something that comes with experience, but know the basics of your area of work.
7. Atomic design
You don’t need to know the book by heart, but you have to understand the concept and build your components to scale up. It doesn’t matter if they are called an organism or any other name, but the way you design them should be appropriate to how they will be built in code. Hence, understanding basic coding like semantic HTML and nesting is a very high advantage. That leads us to the tools of building the components…
8. Follow the design tools and their updates
Use styles for colours, typography, effects, etc (still bothering Figma to add spacing/sizing tokens but one can dream :D). Those are analog to variables that will be used throughout the codebase as well and translate well into the design tokens concept.
For example, auto layout in Figma was not invented to have something more to study about, but to make your life easier when you need to update and tweak your designs (and you will definitely have to do it). These tools are mostly analog to how the developers will code the layout (see: Flexbox).
Learn how to use the grid and how to layout the components to add responsiveness to your designs so you can easily create responsive designs with the same components. Use libraries. Explore prototyping possibilities. Ease up your life.
Don’t get attached to a tool, though. I have designed in code, used Flash, Dreamweaver, Illustrator, Sketch, InVision, Adobe XD and Figma. At the moment Figma is winning with features that are very consistent to coding approaches, but who knows, some new cool tool could come up tomorrow :)
9. Have a good file organisation
File structure, organisation and documentation of your components and processes are key and you should follow them in the portfolio. At some point you will have to work with other designers or developers, or someone will have to take over. Everything should be clear and everyone should be able to find what they need at first glance.
10. Portfolio & CV
Don’t apply without a portfolio. Besides your designs, show your process and thoughts. Sometimes the design looks crappy, but it would still be great if you display you have researched alternatives or you had constraints to follow. Sometimes your past work might be under NDA contract, but you can mock the problem and redesign the UI with different colours and data, or go low-fidelity so you can showcase the concept.
Make sure you pay attention to details, spelling and wording — sloppy work in your CV and portfolio will imply you’ll also be sloppy at your daily job. If you’re not sure, send them over to someone and ask them to double check the wording and if everything is clear to them, otherwise, change your narrative. And you really don’t have to use progress bars about your skills or the tools you know — to be precise about your knowledge in percentage, you also have to know what you don’t know, and you probably don’t 😅
Never stop learning!
There’s much more to learn about and explore, mostly around the UX research area and building the right things for the specific users. But for building complex UIs for web applications you have to have the systemic approach of Design Systems into designing & building the UI that common graphic and (marketing) website design principles don’t cover.
We’re in a field where something new comes up every day. Stay up to date by reading books and blog posts, follow other designers on Twitter and Medium (even LinkedIn) and the tools’ updates that usually come with tutorials and explanations. It can be overwhelming at times, so make sure you really have the basics covered.