How to train your designer eye & develop your design skills

In this course intro lecture, I talk about these:

• Who the course is for

• My goal with the course

• UI design is 95% learnable (and it is enough)

• What I mean by a "designer eye"

• My framework for training your designer eye

Before diving in, this short lecture explains how to apply the course Figma file:

• This is where I set up all the practice activities for you

• I also add a playground where you can collect inspirational design and experiment (e.g. with creating shadows, gradients etc.)

In this section we’ll focus on the world around us, the offline experiences.

To summarize my advice, you should also get inspired by the world around you.

Using your designer eye should become your natural way of being. Something you don’t have to think about or you don’t have to turn on.

I'll give you the example of noticing the great package design of Oatly.

It is a good exercise to look around and find examples for good and bad design. In this lecture, I explain how you should do this, and I also give you examples.

You can learn a lot by observing how controls of a physical object work.

Natural mapping means that you use spatial correspondence when you connect the control and the resulting function.

Digital products and services are places, too.

Where am I and what can I do here? This is what the user asks when she first uses a digital product.

In this lecture, I’m going to show you various inspiration sources

For instance, I love playing games, and I always pay attention to design decisions when I play a board game.

I’ll present Aeropark as an example for getting inspired by visiting a physical space. Aeropark is an open air aviation museum located next to the Budapest International Airport.

To sum up, look around, observe the world around you to get inspired, and document your process, you’ll never know when you’ll need that specific piece of inspiration.

In the following sections (starting with this one), we are going to zoom in to digital products and services, and in this section I'm going to talk about collecting design inspiration, like what you should collect, what are the main cases of collecting inspiration, what my advice is in terms of the workflow and how to add sketching to the mix.

So what should you collect and how should you collect it?

You should learn about existing design solutions and develop a design pattern knowledge. Btw. to put it simply, design pattern is a common solution to a problem in product design.

In this lecture, I tell you whaat you should collect more specifically (e.g. user flows, animations)

There are at least 3 cases of collecting design inspiration and training your designer eye.

• one is a regular training, e.g. 30 minutes at the beginning of each day, so we can say it is a habit

• it can happen spontaneously, too, e.g. you capture some interesting steps of a registration flow

• it can be a research for specific needs, e.g. during a UI design or graphic design project or for an article.

This lecture is about the 2nd and 3rd case of collecting inspiration: the spontaneous and the specific need case.

In this lecture, I talk a bit about the different tools and also about the importance of findability.

In this lecture I would like to show you some more inspiration sources from the digital world around us.

One great way of collecting design inspiration is sketching out the part you like. I explain the benefits of this approach in this lecture.

To close this section about collecting design inspiration, I would like to remind you that doing research is very important.

In this third section we are going to move on to the next level: how to analyze the UI designs you find interesting?

Switching from your user mindset to your designer mindset is key.

In this lecture, I talk about asking why, and I illustrate it by a lot of real life examples.

Up until this point we looked at some UIs and observed some things, but of course you can do this in a systematic way, too.

I’d like to show you some techniques for analyzing layouts and content structures.

Blockframing is like lightweight wireframeing, you draw blocks and other basic shapes to indicate the main parts of a page or screen, like the main content areas, elements of the navigation system and the main user actions.

A good training for your designer eye: analyze something that’s language you don’t understand.

One great practice for training your designer eye is to do a little design crit session on your own.

Before analyzing some Wise screens, here are some of my favorite resources in the topic of analyzing UIs.

Let’s take a look at a real-life example of analyzing UI design.

It’s a great practice to analyze a well-documented design, since after your own analysis and thinking about the design intentions on your own, you can check out the actual design intent.

Let’s say our job is to design an empty state for the Transactions screen of our neobank mobile app. How would you go about it?

Naturally, I won’t show you the whole design process, only the collecting and analyzing design inspiration aspect.

In this first lecture of the section I give you a short intro and a little advice.

One great way of practicing UI design and paying attention to every little detail is doing some copywork, meaning that you take a design you like, and you recreate it.

To continue using Wise as an example from the previous section, I’ll show you how you can do some copywork easily, and then how can you tweak it an experiment with it.

Here are some more examples for experimenting and making some tweaks on a UI.

My next topic in this section is about using deliberate constraints while you experiment and practice.

In this lecture I show you some more techniques for experimenting.

In this final lesson of this section, I’ll talk about the importance of practicing and I’ll give you one more hands-on practice activity.

This lecture is about the intended topics of the UX audit section of the How to train your designer eye course.