A few tips I found useful during my first year as a UI/ UX Designer.

John Kim John Kim
21 - 09 - 2020

Since I started my UI/UX career at El Niño in 2019, I’ve read through lots of articles and books to help me to grow in this field.

I have summarised the content & materials that I found useful during this period, made into small bite-size digestives, starting with some general tips, UX tips and ending with UI tips. I hope it may come in handy to those who wish to follow the same UI/UX path.

General tips

  • Growth is a never-ending process
  • Know what you don’t know, and have the insatiable curiosity to learn
  • Be humble, and accept that you don’t know some things
  • People don’t get fired because they don’t have skills. It’s because they have no urge to learn or collaborate
  • Failure = Opportunity
  • Ego kills design. Ego stops learning. Be mindful. Be honest.
  • Great user experience helps users to find what they need faster, by reducing the time between comprehension and action

The Pareto Principle (80/20 rule)

80% of effects come from 20% of the causes.

This means that if there is an issue, prioritise on fixing the 20% that is contributing to 80% of the problem. Work efficiently!

General tips continued...

  • If you can’t explain what you know to a 5 year old, then you don’t know it. In other words, simplify your knowledge. Know your basics.
  • When you understand the people you are trying to reach, -and then design from their perspective- not only will you arrive at unexpected answers, but you’ll come up with ideas they’ll embrace (Human Centered Design).
  • Don’t assume that you know everything. We act based on what we think we know. Don’t act on completely flawed assumptions (Simon Sinek, Start with Why).

UX tips

1. UX design overview

The 8 steps to follow when designing a great user experience.

  1. Brand attributes (Culture, Customer, Voice, Benefit, Value)
  2. User profiles (Story, Demographic, Needs, Solutions) — based on user personas, choose the main demands and make them into web features.
  3. Goal
  4. Site Audit
  5. Review user needs
  6. Create user stories — (By this point, you will have enough information to have a feature prioritisation strategy and a content strategy)
  7. Site map
  8. Wireframes

2. MoSCoW Analysis

Divide specific website features into the following criteria to know how to prioritise them.

This particularly came in very useful when talking to clients, who have a fixed amount of budget but cannot stop stating what they want. Having them (and you) go through each of the features they want and ranking them in hierarchy creates a realistic expectation to both the customer and the developers.

3. The trunk test

The trunk test is an effective way to test your website design legibility and navigation-ability. Passing the trunk test means that your clients will be comfortable using the website.

Scenario: You’re blindfolded and dropped at a random page of a website. Can you, as a client, answer these questions?

  1. What site is this? (Site ID)
  2. What page am I on? (Page name)
  3. What are the major sections of this site? (Sections)
  4. What are my options at this level? (Local Navigation)
  5. Where am I in the scheme of things? (“You are here” indicators, e.g. breadcrumbs)
  6. How can I search?

4. Keep titles consistent when navigating from one page to another

When designing pages that navigate through different web pages, the name needs to match what you clicked on (from previous page to current page).

Example: You are on Amazon and on the homepage you see a gift products page, under the header "Gift for him". You click on it and you are taken to another page, under the header "Gifts for men". Wait... I thought I clicked on Gifts for him and not Gifts for men?

5. Six Essential elements of a brand style guide

There are countless diagrams, articles and books on how to create brand guides. This is only one of many.

An example of where this guide came in handy was during the Meat Boutique co-design session. Determining these core elements with the client helped to shape the current Meat Boutique online store.

Bottom image: An example of a mood-board that covers the 6 essential elements of a brand style guide.

6. The e-commerce experience funnel for web-shops

Just like the brand guide diagram, there are multiple diagrams out there that explain the e-commerce funnel.

This is a simple one of many that covers the basics, and is brilliantly discussed further in this article.

UI tips

1. Improving text legibility

Pay attention to these text properties to improve legibility.

  1. Line length
  2. Font size
  3. Line height (important because this is what prevents users from skipping lines when reading. Ever had moments where you re-read the same line thinking it’s a new line? Or even skip a line? Proper line height can help fix these issues.)

2. Improving legibility of quotes

Use serif- fonts + italicise when styling quotes. This helps differentiate the quote from the main body text, and also improves credibility of the quote by appearing more formal.

Compare the top--> Serif + Italics vs the bottom--> Sans-Serif + Regular format

3. Improving colour contrast

Avoid using 100% saturated black. It’s generally more pleasant to read text on a dark grey background as compared to a saturated black background (Doesn’t need to be grey, this is just an example).

Compare the top--> Dark grey background vs the bottom--> Black background

4. Avoid Messy Texts

It is always a good idea to stick to one font family that has a variety of different font weights, instead of using different fonts. If you have no knowledge of typography and you mix different fonts, your designs can end up looking very messy.

Compare the top--> One font family vs the bottom--> Three font families.

5. Consistency is key, but it isn't everything

Sometimes, it is necessary to sway away from following strict grids and guidelines and position elements by eye. You will run into these scenarios when you have to design a logo, or even position certain icons with text.

A very good example is the Google logo not being perfectly circular, and yet, it appears so. If the logo was to follow the circular guideline, it would appear to have an overbite.

Consistency continued...

Here’s another example. The Nintendo Switch logo is also not perfectly symmetrical. Sometimes, your eye determines what suits the design best, better.

While we are on the topic, here are some fun web-based games for you to test yourself on your alignment skills. A ruler wont help you here…

Type kerning game

Do you think you have the designer’s eye?

In Conclusion

I hope these tips find their way to those aspiring to follow the same path I took. They are, by far, not the best tips compared to thousands of educational material out there, but they are definitely ones that helped me the most.

Take each tip as a grain of salt, you can read up each theory mentioned to fully grasp the concept in detail.

Always remember to have the insatiable curiosity to learn, and make lots of mistakes.

Good luck!

John Kim. John is a South Korean who grew up in Kenya, and completed his university studies in the Netherlands. He is currently working as a UI/UX Designer at El Niño. John Kim. John is a South Korean who grew up in Kenya, and completed his university studies in the Netherlands. He is currently working as a UI/UX Designer at El Niño.

Deel deze blog

Jouw partner voor digitalisering  en  automatisering

Bedankt voor je bericht! We nemen z.s.m. contact met je op. :)
We willen graag je naam en e-mailadres weten om contact op te kunnen nemen.

Laten we samen een keer brainstormen of vertel ons wat over jouw uitdaging. Laat je gegevens achter en we nemen z.s.m. contact met je op.