Udemy Figma Course: Complete Web & Mobile Designer in 2023: UI/UX, Figma, + more by Andrei Neagoie & Daniel Schifano.

Episode 14: Design Patterns

What are Design Patterns?

Design Patterns are the recurring solutions that solve common design problems. These are standard reference points for a designer. For Example, that could mean an infinite scroll that just keeps loading, breadcrumbs and much more,

If you are designing a new product, you will want to figure out the easiest way that users can interact with it.

So, let's think of something that we always do, like Login & Registration. We always ask people to Sign up, Sign in and we know that constantly asking users to enter the same info repeatedly is tiresome. That's why there are design patterns in place to solve that.

We can use a pattern where we have like a social login or like remember me. These are design patterns.

Steps to Creating a Good Design Pattern

Step 1: Analyze the Problem.

Finding the problem; we understand that most users are short on time and patience from having to complete small tasks repeatedly to access their information or get their work accomplished.

so in this case, if the problem is that users want to sign in quickly.

Step 2: Then we can find ways to eliminate that pain point.

Categories of Design Patterns

1. Data Input

   

2. Content Structuring

   

3. Navigation

   

4. Incentivisation

   

5. Hierarchy

   

6. Social Media

   

Why are Design Patterns Valuable?

Well, they resolve a lot of problems that we have the solution for.

People will naturally look for patterns. That's why when we arrive on a web or mobile site, we often think we already know where to click. This is based on all our prior experiences dealing with other applications and the solutions they have used.

So, we don't necessarily need to go out there and create an entirely new design pattern for something that is kind of mainstream.

When sites incorporate known patterns, users often have an easier time getting to where they are going.

As designers, patterns save us from having to constantly reinvent the wheel.

Engineers have kind of known this for a long time, that's why they have this large repository or open source that contains large components. Because, re-writing similar code from scratch is going to take them away longer than necessarily copying, pasting and tweaking.

So, Designers who use design patterns can free up time for creating and tweaking which is a fun part.

How to Apply Design Patterns

There are so many Design Pattern Libraries out there, but that doesn't necessarily mean that we have to go through every single library and start picking out all these different types of design patterns and then applying them all. Don't do that.

There are solutions to usability problems and if you don't have a usability problem, then you shouldn't necessarily apply some sort of solution.

Below is the proper way to access if you need a certain design pattern or not;

Step 1: Figure Out the Problems that Require Solutions.

Step 2: Analyze other Products that have Found a Solution.

Step 3: Examine how other Products Implement these Solutions.

Step 4: Analyze Each Pattern and Decide Which One is Right for Your Problem.

So overall, this means that you should detect usability issues within your interface with real data.

For Example:

Let's say we have a high bounce rate in our checkout process.

Now we've checked our mix-panel or amplitude and we found out that people are dropping off right at checkout.

The checkout is where the big bounce rate is from and based on some feedback from users, we have a long Sign Up Form at the end of the Checkout Process and we think that is where the problem is.

So, step 1 is pretty much done here, cause we have a problem and it is pretty clear.

Then we can proceed to the next stage (Step 2) by Analyzing similar websites. For instance, we analyzed three websites and we saw their approach to solving the problem we have.

Now to Step 3, we don't need to apply all the approaches we checked out from other websites to our website, we can only properly examine the efficiencies of each approach to sieve out the right approach for us.

Then finally step 4, we can now decide on the right approach to solving the problem we have.

There is a lot of knowledge I learned in this Episode of Design Patterns, but I have only summarized it in this article.

The journey gets better...

#Figma #ProductDesign #UIUXDesign #UIUX #UIUXCourse #Branding #BrandStrategy #UIElement #Patterns #DesignPatterns #Udemy #UdemyCourses #ZTM #ZeroToMastery #DocumentingMyTechJourney #BuildingMySkillset #TechSkill #SkillSets #ProductDesigner #EngrShege #ES