These terms sound similar, but UI means how it looks, and UX means how it works or feels to the user. As a designer, it’s your duty to ensure that whatever you create pleases the user.
To create a good design, follow this step-by-step process.
Process
1. Project Brief
Start by clearly defining the project’s purpose and scope. Understand your client’s vision, mission, and budget. Ask for their brand kit.
Target Audience
Consider the final product’s users’ needs, pain points, and preferences. This approach will guide your design decisions and ensure the end product considers the users’ needs.
For example, Suppose you are designing a management app for airports. The staff using your app don’t want animations; they mainly want the app to work fast.
2. User Flow
Every website or app has one main goal, although (it can have multiple things), how does the user achieve that?
For example, people go to Amazon to buy products. The user flow will look like
Entry -> Search Products -> View products -> Buy now -> Payment -> Sucess
Of course, users can take multiple steps, such as adding to a cart, browsing more products, adding to a wishlist, and more.
3. Sitemap
Now, to achieve the goal, what pages and sections does your website or app have? Create a website structure.
4. Wireframe
These are like the skeletons of your website, with no colours, text or anything beautiful, just boring boxes and lines.
This step focuses on where headings, texts, buttons, and forms will go, meaning User experience.
5. Create Mood Board
A mood board is like a collage showing your project’s look and feel. It includes inspiration colours, typography, UI elements, imagery, textures, and even motion references — anything that conveys the emotional and visual direction.
Divergent Thinking (Explore)
Randomly search keywords related to your project on platforms where you find inspiration, such as Dribble, Pinterest, Unsplash, etc. and save whatever you like, save.
Convergent Thinking (Decide)
Remove whatever does not align with the project brief or the brand. Your final mood board should answer
- What colours and fonts will drive the UI?
- What kind of images and visuals match the brand?
6. Brand Kit
It is the core identity of a business in visual form.
Colour Palette
If your client has provided you with a logo, pick a colour from that or ask your client what primary colour they want.
Use the 60, 30, 10 rule: 60% primary, 30% secondary, and 10% accent. You can swap section-wise or page-wise, but ensure the colour remains the same. Pick the primary colour according to brand identity.
How
- https://www.empower-yourself-with-color-psychology.com/meaning-of-colors.html
- https://careerfoundry.com/en/blog/ui-design/introduction-to-color-theory-and-color-palettes/
- https://www.toptal.com/designers/ux/color-in-ux
- https://londonimageinstitute.com/how-to-empower-yourself-with-color-psychology/
Where
- https://palettemaker.com/
- https://coolors.co/
- https://www.rapidtables.com/web/css/css-color.html
- https://www.happyhues.co/palettes/4
- https://colorhunt.co/
- https://mycolor.space/
- https://color.adobe.com/create/color-wheel
- https://colors.muz.li/
- https://webgradients.com/
Typography
Choose only two typefaces(fonts): Serif for modern and sans serif for traditional. Choosing a font is a little confusing because there are so many options. So, create a bucket of 6-10 fonts and choose from them. If you cannot find it, look outside of the bucket.
How
- https://www.canva.com/learn/typography-design/
- https://uxplanet.org/7-things-to-remember-when-selecting-fonts-for-your-design-ec1e592266c5
Where
- https://fontshub.pro/
- https://textfonts.net/
- https://www.fontmirror.com/
- https://www.fontbrief.com/fontbrief
- https://fontforge.org/en-US/
- https://typescale.com/
- https://www.fontsquirrel.com/
- https://www.dafont.com/
- https://www.fontspace.com/
- https://www.myfonts.com/WhatTheFont/
- https://www.fontspring.com/
Logo
If your client didn’t have a logo and asked you to create one, then make one.
How
Where
Tagline
The tagline appears in key places, such as the home hero section, app onboarding, or splash screen. It must convey your brand promise in one line.
For example, Growigh’s tagline – “Your business, our priority.”
UI design
Start arranging the elements you have gathered in previous steps. Most people use mobile phones, so focus on mobile phones first, then other screens.
Images
Illustrations
- https://undraw.co/
- https://www.drawkit.io/
- https://www.humaaans.com/
- https://openpeeps.com/
- https://onfire.craftwork.design
- https://www.reshot.com/
- https://blush.design/
- https://haikei.app/
- http://getwaves.io (Waves images)
- https://manypixels.co/ (Free illustration)
- https://patternkid.com/ (Pattern)
- https://www.patterned.ai/ (Pattern)
Icons
- https://www.svgrepo.com/
- https://tablericons.com/
- https://iconmonstr.com/
- https://www.iconshock.com/
- https://www.iconsdb.com/
- https://www.iconspedia.com/
- https://www.iconarchive.com/
- https://www.iconscout.com/
- https://www.icons8.com/
- https://www.flaticon.com/
- https://thenounproject.com/
- https://heroicons.com/
- https://ionic.io/ionicons
- https://icons.theforgesmith.com
7. Responsive UI Design
Make your design responsive, create multiple designs for different screens, and read Tailwind or Bootstrap documentation for the breakpoints. Do not overuse the grid.
8. Handover
UI Design Insipirations
- https://minimal.gallery/
- https://www.darkmodedesign.com/
- https://www.awwwards.com/
- https://refero.design/
- https://www.brandingwebsite.com/
- https://httpster.net/
Tip: Bookmark this page
