Beginner’s guide to wireframe
Every mission, every construction needs planning to get a positive result. No matter how small or big house you want to build. First, you need some clarification. Otherwise, you ask people to work for you but nobody knows what will be the result.
What is wireFrame?
WireFrame is nothing but a blueprint of your application which helps the client as well as the UI/UX designer to get basic clarity on ‘how an application will look like’.
It is a plain design representation where we are more concern about content rather than its colour, font etc.,
- Low fidelity wireframes
Take a pencil and start drawing your ideas regarding applications based on client requirements. Draw at least 3–5 sketches of the same page. 1st sketch will be your instant idea but later you have to focus on making your sketches more creative and up to the mark. Now go through all your sketches, pick best features and then draw a final sketch of the web page.
Show your work to the team for feedback
Things to remember
- Don’t worry about your drawing skills
- Use standard symbols for representation and maintain consistency throughout the process
- Make sure you meet client requirements
- It should not have too many or too less features on one page
- It is okay to be messy but it should be understandable to you at least so you can explain it to others
- For every feature ask Why? to yourself
eg. on the home page you recommend image slider over the normal image because for e-commerce site it will be better to have image slider so we can show the user about our latest collections, offers, brand promotions etc.,
Once you take feedback from the team, make necessary changes and now you are done with this low fidelity.
2. High fidelity wireframes
In this phase, take your low fidelity wireframe into a good design computer representation. Balsamiq, Photoshop, Adobe are the tools one can get started with but you can use any other freeware tool as well. Now convert your sketches into presentable slides using these apps.
Thing to remember
- All shapes should be of the same size
- Avoid using colours and fancy fonts while designing. The client should not get distracted because of these mistakes. Keep them focused on the content so they will provide valuable feedback
- Space should be well occupied
- Try to write meaningful content for the paragraph, title tags.
eg. for jewellery website you can write slogans from an advertisement which will make the client realise the purpose of that particular tag. This is optional, if you are good at writing only you should continue writing otherwise it is not UI/UX developer job to write content - Slides should be in sequence. After ‘Add to cart’ the next slide should be ‘Order confirmation’. This makes the client understand the exact flow of the website
Now we can share this with the client to take feedback.
The client may get confused because of your plain design presentation. He may ask many questions like ‘Is it final design?’, ‘Where are the colours?’, ‘Where is the logo?, ‘Where are all images?’ and so on. You need to answer them properly and explain it to them about this process so they can give their feedback.
why we need wireframe?
By doing this UI/UX developer as well as the client will get an idea about what will be delivered in the upcoming days. Changes may come but fundamentals remain the same. This assures the developer about what exactly the client wants and now they can actually start coding to make it possible.
Difference
If you like this article then don’t forget to clap and share your response in the comment section. Thank you!😊
Other articles
