Basic UI/UX Design Process

Welcome to my article, this will be my first ever, so forgive me if it doesn’t go very well. Lets begin…

If you’re reading this article you’re either a) A UI / UX Designer who is experienced and just curious b) New to UI / UX Design and looking for some direction or c) Neither, and just here to have a look.

Whichever of the 3 you are, it doesn’t matter. The good thing about design, be it Logo Design, Branding, Typography, Web, Print etc is that there is no right way or wrong way. You can take inspirations and ideas from other individuals in the field and learn from it, then dissect that information into your own way of doing things.

So, in a nutshell, what is the purpose of UI / UX. Ill keep it extremely short and sweet, but we all must be clear on the two before we begin.

UI Design

UI Design stands for User Interface design, you know how the menus on your phone look ? How a website looks ? How the menu for PS4 looks ?Colors, layout, fonts, images etc. These are all components of the UI Design

UX Design

UX Design stands for User Experience design. This is the experience you give to the user in order for them to be able to complete a task with your website or app, in the shortest amount of steps. i.e Reaching the contact page by having to click twice rather then navigate through 6 menus and 3 dropdowns. Its also the dropdowns, the smooth transitions, and the overall experience someone gets when interacting with your product.

This UI / UX Design process is quite commonly used across the board, and allows you to refine both of your skills. By doing it this way not only are you forced to think of the UX but also the UI.


The Process…

Tell a story ( Storyboard )…

Get a pen and paper, literally, and start scribbling. Write down what the app or website is about, and ultimately what you want your user to be able to achieve. “So if I click on this button, what screen will popup next” etc. Its quite tedious but very necessary.

Image from http://blog. nerdery.com/

Make sure you have each screen and step accounted for, also take into consideration the amount of clicks it takes for the user to get to from A to B. Its important to keep it neat, and to the point. Always be thinking how can I achieve this in the shortest amount of clicks and time.

Another important thing is where the different buttons are. Will you have a set menu, a dropdown menu ? Will you have full width gallery, a grid gallery ? Only include stuff that is completely needed to get from one place to the next. Don’t bloat up your applications with 50 variations of how to achieve one step, it will piss off your audience and be really bad for your website or apps success.

Sitemap…

When you have all of your screen ideas you want complete, you then have to compile them into a map of sorts that helps the user navigate. This is where you think of the the pages you want in the main menu, and the info you want in the sub menus.

Image from Digest Web Design.com

I dont need to go into huge detail about this, because the diagram above does a pretty good job at explaining it. However this is a very important step that should not be skipped.

Wireframe…

Okay we’ve gotten this far, great. Reached a point where everything in the app or website is accounted for. Now we can begin to wireframe. If you are not familiar with wireframing, its basically making an empty skeleton of each screen, to give the basic idea of size & layout. The reason for wireframing is on the fly prototyping. Notice I said On the fly, meaning, you shouldn’t be spending 2 hours on each wireframe for a screen.

Image from support.balsamiq.com

I want to point something out. Sitemapping and wire framing look very similar, however, Sitemapping is to determine the structure of the buttons, and wireframing is determine the structure of the page when a certain button is clicked. Easy Peasy !

Prototype…

Your story is finished, you’ve made your sitemap and completed all your wireframes, great. Now you can put these wireframes into a prototype development software and get a semi working version of your project. This is an optional step, but a step which I highly suggest.

The reason for prototyping is so you can validate your product with family and peers, or even stakeholders at the company you work for. If you show someone who isn't as design savy as you, 25 different static screens in the app on an A4 page, you will fry their brain. Okay, maybe not fry it.. but there is a good chance you will confuse & lose them.

Instead go to https://marvelapp.com or https://proto.io and develop a neat little prototype. This way you can piece your wireframes together and not only will this be a great way to let people test it, but this is also a good time to see if there are any holes in your ship. Have you forget to include a certain button ? Is one page inaccessible ? How does everything piece together ?

Mockup…

So your plans are in place, everything is laid out and good to go. Think of this entire process so far like building a house. You visualize in your head what you want it to look like, you put it down on paper and go to meet an architect. When you meet the architect you talk, layout your plans and he will develop blue prints. These are specific guidelines and layout to be followed in order for you to have your desired house. You then have an exact plan of action and development for any construction company to follow.

So far we’ve developed our “blueprints” so to speak, and we’ve tested it with our peers and family. Everything checks out and we’re good to go. The mockup stage is when you start to put flesh on these wireframes we were talking about. This is where you chose color schemes, font sizes, typography, images etc etc. Once you have finished your mockup, you can then remake the app using the prototype sites and re-test it with the same individuals.

Final development…

If everyone is happy and all is well, then congratulations you have now almost completed the design process. This is the time for you to recheck all of your screens and make sure everything is perfect, put in the actual imagery you want used, dot all of the I’s and cross all of the T’s. Once everything is perfect, you can now confidently pass off all of your project to the UX developer. Not only have you designed the app, but you can tell him or her that is has been tried and tested, and makes there life x100 easier, you also have the storyboard and wireframes to prove it.


We have now reached the end of the Design process. Obviously, this process is open to change, but this is the one I use and it has always made my life alot easier. Thankyou for taking the time to read it and I shall leave you with a quote.

Benjamin Franklin: “By failing to prepare, you are preparing to fail.”

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.