How exactly does one design a UI?

I recently wrote about this topic as part of a retrospective about building and launching Typehut in 30 days.

The gist of it is that I always start by building a design system, then the navigation pattern, and then I design the final screens.

If you're interested check out the entire post here: https://blog.typehut.com/474/how-to-build-and-launch-a-saas-in-30-days

Let me know what you think!

"Currently staring at a blank Adobe XD document." -- You're definitely not alone here. Plenty of professional designers face the same issues too.

I want to try and help as much as possible here. So here are some guiding principles you can easily follow:
1. Start with the basics and keep it simple.
Examples:

• Pick your shades of greys - then stick to them as much as possible, add only when absolutely necessary:

  • Dark/Emphasis (#333): Titles, Headings
  • Neutral/Content (#666): Paragraph text, content
  • Light/Sub-text/Description (#999): Dates, Timestamp, Caption

• Pick one highlight colour, preferably not red or green - make your life simple, reserve them for error and success messages.

2. Good design is 90% consistency. Aim to be consistent. Forget fancy animations, make sure your padding and margins are always equal and consistent. Use the same font sizes consistently.

Plenty of other tips but as I'm writing, I realise it's really difficult to illustrate without pictures (which I can't seem to figure out how to add in the IH comments.) So, drop me DM (http://bit.ly/37U3viu) if you want to discuss more.

Also, a great guide for quickly kickstarting your journey in designing your UI is definitely https://refactoringui.com It gives plenty of highly practical tips on UI design, cleaning up mistakes, and also building a UI more representative of your brand. That's completely free.

I send this newsletter if you are interested.
Https://www.colorsandfonts.com/newsletter.html

Enjoy

https://developer.apple.com/design/tips/

"Perfection is Achieved Not When There Is Nothing More to Add, But When There Is Nothing Left to Take Away".

• Antoine de Saint-Exupery

How about start with the question: what is the bare minimum your app needs to function? Creativity is born when you are being limited, not when you have unlimited possibility.

Here's a fun exercise:

• Don't start with colors. Use black and white only (or one color and white), until you feel limited.
• Don't create 4 different types and sizes of everything, force yourself to use just one. You will be surprised how far you can actually go.

I'm not a designer, but this type of exercise helps me sometimes.

Hey, David you are suffering of the blank sheet syndrom - like any great artist ;)

Okay, but seriously. This is totally normal. If I got you right you have started with your customers (needs, tasks etc.) and created basic wireframes (very high level) and connected them to user flows.

The good thing is people are attracted to beauty (and ease of use). And you can make use of it, too. Defining the UI design (typography, colors, icons) of your project can make a big difference. Think of Klarna. It is just payments. But so nice you want to immediately use it.

I would approach a new design from 3 sides:

First side: Start with yourself (this is hard, I know)
What are your values? What does your project make stand out from the rest? What is unique about it? What are you doing better than anyone else?

Second side: What are your customers currently using?
I would call it a "museum". Pin the top 5 competitors to a board and related apps in your branch. The question is: What kind of design are your customers used to? What is good about it? What is bad? Dot vote on things that the competition is doing good.

Third side: What kind of apps really kick ass design-wise right now?
Make a again a board and dot vote on any detail that is a benchmark for you. Think of dribbble, instagram worthy, you would tell a friend worthy designs.

So these 3 dimensions should give you a good feeling how your design should be. Pro-Tip: Aim for a UX and UI design which is 10x times "better" perceived by your customers then what they currently use.

Let me know, if it helps you.

Recreating existing sites and apps in Figma helped me cultivate UI skills. You could also grab a few free UI kits or design system resources and recreate them in the tool of your choice. You'll get better/faster as you put in the reps.

I recently came across bootstrap studio https://bootstrapstudio.io/
Didn't use it but it looks like it can assist design cycles