6 Stages of UI Design

 

 

starting from nothing and ending up with a final high fidelity design takes a lot of different skills and knowledge but in terms of ui design i've broken it down into a simple process.

 so let's look at the six stages of ui design

 
we  helping you become a more skillful and mindful designer
so this post is meant to be a high level overview of the entire ui design process it's important
to keep in mind that in order to make your user interfaces usable and beautiful you'll need to have
a strong understanding of visual design principles like visual hierarchy usability heuristics color and
typography and you'll need to start with good insightful user research and data to back up your design decisions

and decide what needs to be in your user interface designs and how it should all work and flow
together but i'll leave that part for another video so once you've successfully defined your
user's problem your constraints requirements and features then you're ready to start looking at
how you can visually represent the components state changes and interactions at different levels
in order to make your product a reality

stage 1

sketching this is the quickest lowest cost and lowest commitment way to kick off your designs
it gets the high level top of mind ideas out of your head and onto your paper or screen generally
these are really rough and if they look pretty bad then you're probably on the right track
it's something you should be able to do in a fairly short amount of time on paper a whiteboard
or using a wireframe or design app there is no right or wrong way to do this but
here are some common things that they could include outlined boxes to represent the general
containers and areas that need to be placed on the page placeholder boxes to represent images
text and graphics and these can be done in low mid or high fidelity depending on the
project needs at this stage the purpose is to start off the conversation it helps to clarify and
define layout features and allows you to change ideas quickly and iterate it also helps you visualize how
screens might look on different device sizes and in different contexts some tools that
you can use in the sketching process are paper and pen board sketch pad figma jam or various apps
for your ipad or tablet.

stage 2

wireframes or gray boxing this is what things look like before visual design principles have been
applied it's where you can start to see the general layout and elements taking shape what's on it
this is things like filler content allurum ipsum or actual text which i highly recommend
placeholder images or stock images and this can usually be done in your design software using an
existing ui kit to kick things off or done from scratch the purpose of this stage is to
visualize the general layout it's to build trust with stakeholders and help them see those
initial ideas a little bit more fleshed out before moving on it's a fast and cheap way to create
initial ideas in a little bit more depth or to show low or mid-fidelity screen designs
some great tools for this are things like just in mind's free wireframing tool existing wireframe
kits that you can use in your design apps or something like balsamiq.

stage 3

component design dynamic user interfaces unlike static website landing pages or marketing sites
require you to think through states and conditionals component design deals with things like
symbols such as buttons and badges element states like button hover states or clicked
states components like tables lists cards and forms and shows actual texts and images the purpose
is to plan the usability uncover accessibility and responsive problems translate ideas into
consistent elements that can be shared with engineers and more easily and accurately discussed
and shared across teams great tools for stage 3 are design apps like sketch figma and
adobe xd.

stage 4

user flows and task flows now it's time to decide how users will get from one screen to another
what happens when they click this or if they forget to add in some information this is about
understanding users mental models and your systems model and the orchestration of all the pathways
and responses that your interface will provide this might take the wireframes and put them together
with arrows into wire flows you may have flow charts and conditional statements the purpose
is to show navigation routes to check for missing states and information and to visualize entry exit
and decision points for the user or customer journey some examples of helpful tools at this
stage are flow map or wire flow or just in mind's wire framing tool.

stage 5

mock-up or high fidelity designs this stage should show things exactly as they will appear in
the final product now that you have all of the under the hood stuff worked out it's time to
put your best graphic copy and visual design skills to the test this is where you make every pixel as
perfect and measured as you can and where you can add your own unique brand aesthetic and thematic
elements the purpose is to create pixel perfection to create consistency across your typography and
components to add a sense of your brand by selecting final images or creating final graphics it's time to
add in that good real copy in order to get final approval from stakeholders some of the tools you'll
be using here are sketch or figma or adobe xd maybe dropbox for sharing files or some other cloud
sharing platform stock photography sites and maybe illustrative programs for custom graphics.

stage 6

prototyping this ties everything together and shows exactly how the app is expected to look
and behave what's on it all of the important screens in a high fidelity this should show
target points to mimic what it will be like when the user interacts with the real thing
the purpose is to link together all of the screens and flows in a simulated environment
it's to ensure that everything looks works well and flows as intended before it goes to production
this can be considered the pre-code or no code version of your product some of the best tools
include design apps like envision or the baked in prototyping solutions from your design app like
sketch figma or adobe xd.

so keep in mind that these 6 stages are not necessarily a linear process you may be asked to take the wireframes from stage two and jump into stage six and create a prototype from them it all depends on
the unique requirements the time and the budget of the project you're working on so it's best to
get familiar with all of these stages and get comfortable jumping back and forth between them if
you want to get better at doing this sort of thing and mastering ui and design principles come

check out our UX design course in bangalore at designingcourses.in