Thread
I've been designing websites, apps, and interfaces professionally since 2005 and I've boiled my design process down into 8 rough steps. Sometimes I use all of them, sometimes only a few.
First I'll list them all, then explain them all...
First I'll list them all, then explain them all...
1. Understand the problem
2. Determine the complexity
3. Use lists, content maps, and user flows to help guide the project
4. Wireframe or not based on project complexity
5. Set design direction
6. Present early and often
7. Explore, iterate, and exploit
8. Systematize
2. Determine the complexity
3. Use lists, content maps, and user flows to help guide the project
4. Wireframe or not based on project complexity
5. Set design direction
6. Present early and often
7. Explore, iterate, and exploit
8. Systematize
1. Understand the problem
Know what you're doing before you try to do it. This is research. This is experiencing the pain first hand. This is knowing the goal.
If you still have unanswered questions in your mind about the project, you're likely not ready to start designing.
Know what you're doing before you try to do it. This is research. This is experiencing the pain first hand. This is knowing the goal.
If you still have unanswered questions in your mind about the project, you're likely not ready to start designing.
2. Determine complexity
Working on a complicated project in terms of feature set OR team size will be waaaay more complex than a very simplified feature set or a very small team.
Plan accordingly.
Working on a complicated project in terms of feature set OR team size will be waaaay more complex than a very simplified feature set or a very small team.
Plan accordingly.
Complicated projects will need more meetings, more presentations, more documentation, etc.
VS
Simpler projects might only need a few emails, a slack channel, and one Figma file.
VS
Simpler projects might only need a few emails, a slack channel, and one Figma file.
3. Use lists, content maps, and user flows to help guide the project
This might be a quick list on a white board, a full blown spreadsheet, and might even include user flows and content maps based on users/features.
It also might not need any of this.
This might be a quick list on a white board, a full blown spreadsheet, and might even include user flows and content maps based on users/features.
It also might not need any of this.
4. Wireframe or not based on complexity
You might (GASP!) be better off designing wireframes and focusing on functionality first to really nail complex problems OR to sell your ideas to the development team and/or stakeholders.
There's been few times I've regretted doing this.
You might (GASP!) be better off designing wireframes and focusing on functionality first to really nail complex problems OR to sell your ideas to the development team and/or stakeholders.
There's been few times I've regretted doing this.
You definitely don't want to mix user flows and API call conversations into typography and color conversations.
You'll make much progress as a designer if you diplomatically get everyone agreeing and on the same page BEFORE you start tweaking corner radii and button colors.
You'll make much progress as a designer if you diplomatically get everyone agreeing and on the same page BEFORE you start tweaking corner radii and button colors.
5. Set design direction
This is where a lot of design fails. Sure the type is OK, the layout is decent, and your colors work. But is the concept AMAZING? Does it feel magical? Does it POP? 😅
This is one of the hardest things to accomplish, but once you do, you know it.
This is where a lot of design fails. Sure the type is OK, the layout is decent, and your colors work. But is the concept AMAZING? Does it feel magical? Does it POP? 😅
This is one of the hardest things to accomplish, but once you do, you know it.
I truly believe this where "jazz it up" and "make it pop" comes from. The client sees a design and knows it doesn't feel right, but can't quite put their finger on why.
The best thing to do is keep iterating and experimenting until some magic happens. (easier said than done)
The best thing to do is keep iterating and experimenting until some magic happens. (easier said than done)
6. Present early and often
It's tempting to hide away in a cave and emerge with a big magnificent unveiling, but...
If you can get small pieces of buy-in along the way—concepts, color schemes, ideas, it'll be easier to "sell" your designs as they get closer to final form.
It's tempting to hide away in a cave and emerge with a big magnificent unveiling, but...
If you can get small pieces of buy-in along the way—concepts, color schemes, ideas, it'll be easier to "sell" your designs as they get closer to final form.
7. Explore, iterate, exploit
As you're experimenting and iterating, you'll come across little hints of magic. Eg. "Something about THIS color with THAT typeface and THAT background feels great."
As you're experimenting and iterating, you'll come across little hints of magic. Eg. "Something about THIS color with THAT typeface and THAT background feels great."
The quicker you can spot the magical pieces of design, the quicker you can exploit those combinations for the rest of the project.
8. Systematize
It's not THAT important to start making components for every single little thing and worry about Figma organization and auto-layout and prototypes, etc. when you don't even have a good design yet.
It's not THAT important to start making components for every single little thing and worry about Figma organization and auto-layout and prototypes, etc. when you don't even have a good design yet.
It's 10X more satisfying to create a solid system out of phenomenal designs that have gone through the ringer of experimentation and actually FEEL magical...
...rather than stressing out over whether or not you're using the correct component properties in Figma.
...rather than stressing out over whether or not you're using the correct component properties in Figma.
As you become more comfortable with components, auto-layout, naming conventions, etc. you can use them earlier in the process, but if they're causing you problems during the creative experimentation phase...
STOP
and just focus on making it look good first.
STOP
and just focus on making it look good first.
You didn't think you were gonna read all that and not get the first tweet embedded at the end right?
✌️❤️
✌️❤️
Mentions
See All
Nick Huber @sweatystartup
·
Oct 25, 2022
Great thread. Do more of this please.