From wireframe to prototype: main steps in UI/UX

Actually the design cycle doesn’t start from wireframe and ends with prototype, it has a lot more stages and steps in its process.

We used to say UI/UX design, but everything starts from the UX part – user experience. You can’t just start selecting colors and types if you don’t know anything about your beneficiaries.

One more important point is developing. To bring the app to life you need to develop it and design a carcass and skeleton which developers will fill with the code to bring it to life. All parts should be nodded clearly and easy for use.

The first step is to indicate your target audience: professionals, skills of your consumers, age, gender, country and more and more. You should make some kind of customer portrait to understand it better. It can include different details depending on the specificity of your product, but mandatory one is mentioned below.

Your second stage is analysis, but now for your competitors. First of all search for the comparable decisions on market, this will be your main competitors. Then make a SWOT-analysis for them.

With the help of it you can check their weaknesses and convert them into strengths of your app and use your opponent`s threats as an opportunity for you.

*SWOT – strength, weakness, opportunity, threats.

When these two steps are done you have full conception about your customers and a comfortable outcome for them disparate from competitors. The research is mostly finished and now you can start the more practical part of UX, so it’s time for user flow.

User flow it’s a basis of user interaction with the digital product, it should be precise, clear and intelligible. While creating this part remember about task flows – little steps that show for users their further way after some tasks are done.

The user flow is ready and you can go over to simple sketching of your screens – it will be the beginning of wireframes. Growing wireframes for different screens you’ll reach the wireflow. At this point the UX part is mostly ready.

Now we are moving to UI – user interface. It’s a stage for choosing colors for your color palette, types, creating logos and exclusive elements. Choosing colors you need to think not only about how they are matching, but also do they support the functionality of the app?

Usually there are maximum 2 or 3 primary colors and can be more secondary, for minimalistic design it could be used only two colors at all and the set of their shades.

Time for mockups!

Mockups are motionless pictures of screens, the final representation of the product.

For some cases it could be the final stage in the design, but you can do more and create a prototype. Sometimes it is called clicky-dummy. With the help of a prototype client can try their app and click different buttons, switch pages, etc.

Frequently prototypes demonstrate only major functionality of the app, because it does not consist of code.

And finally all steps are done. Sometimes the design needs to be fixed a little even after launching the app. And of course you can make a portfolio of your job for the future.

Here you can find a checklist for UX.

And our booklist recommendation: