4 Steps In My Design Process
There are a lot of ways people come up with the things they want to build. I go by a fairly easy work flow that I am sure not just designers follow by. May it be CNC’ing, development work or even building a house, these are the steps you as a right-brainer might use.
I am sure you guys can argue over the things below, but for the sake of an example, these are what I do in every project.
Step 1: Sketch
Yes, I am talking about the Staedtler Triplus Fineliner you have laying around and the napkin you just wiped your mouth with from the juicy steak. This is actually where most ideas happen. I remember at Cascal, a restaurant with Jean-Marc and we came up with our idea of Citywise by drawing it up on a red napkin. I am not sure where the napkin is now, but that’s what we used. Of course, down the line, our concept changed a little and things shifted. It all started from the napkin and a Bic pen from the waitress.
Step 2: Wireframe
A lot of people skip this stage and go to the final stages of coloring their interactions. Please do not! I believe in architecting the whole she-bang before you style it. This is to make sure the interactions are legit and if you have people to show it to they can understand what you are talking about, especially clients who keeps emailing you asking for something to play with. My favorite go-to tool to use after my trusty Staedtler Triplus Fineliner is Omnigraffle. I am sure a lot of you guys use many other tools, but Omnigraffle never fails me. You can save a lot of time using the templates that are available to make your life easier. Don’t work hard. Work smart! No one wants to waste time. Time is money.
Step 3: Prototype
I mainly use Invision App. I use it quite frequently. After they rolled out the features to test it on mobile devices I used it more and more. It’s free for one project and it works quite well. Having the interactions down to a solid-T is very important. Notice there isn’t any code written to have this out to the clients hands. This is where you shower them with what they will possibly see when the product is done. Even though it won’t have a lot of actions besides linking from screen to screen it is something for them to play by before we add in the syling part. Some of you might also take it to the next level and code this up in HTML/CSS/Javascript. There are a lot of frameworks out there that you can use to make the interactions pop. If you know how to code (I am not that good), then I suggest challenging yourself to prototype it in HTML/CSS/Javascript.
Step 4: Style
This is where you pick the colors that fit the client’s business. You probably do have a sense of the colors already when you are in Step 3, but in this step it is more defined. You start to look at the fonts, the type of color palettes you might choose. One of the main tools I use for my UI designs is Sketch. I believe Sketch is the number 1 player in today’s design industry. It really changed the perspective of design. Now everyone’s mama’s mama can be a designer. All you need to do is play with it for a couple of days and you will get a hang of it. Did I mention it doesn’t hog a lot of resources? With the Sketch community blowing up and everyone supporting each other I don’t think there is any other software that can take them out.
That’s it! Those are my easy 4 steps. You can take it by a grain of salt or if you think it’s good to share, please do! Follow me on Twitter to learn more about myself and my journey job hunting!
What is your design process?
