In my previous articles I explained the UX first step – UX Research and UX second step – UX Plan . In this article I discussed how to Explore UX in real. I explained how a UX designer starts the project brainstorming, Low / High Fidelity wire framing and Prototyping for product demo. This step is like UX breath – without it, you cannot imagine a perfect product. So lets have a quick look.
All these steps are part of the UX process and I categorized these steps into 9 steps, i hope you will enjoy this Third step. Join our newsletter and we will keep you updated with next steps.
3.1 Brainstorm & Sketch : Get The Ideas Rolling
After you get the idea of the project, it is time to jot down all the creative ideas and let the brainstorming start. Instead of running behind that perfect concept, gather all the ideas together for a start. So brainstorming involves harnessing your creativity to as to lay the stepping stone to success. Usually the winning idea gives the call for brainstorming. But having said that, do not restrict your ideas and throw them all together in the project as eventually one or many will pave the path ahead. The ideas may seem risky, unrealistic and vague, but may turn up equally potent later. These ideas can revolve around concepts and styles, layouts, color schemes, images, project goals and likewise many.
Brainstorming can be done alone or with someone who is willing to contribute such as the other designers, co-workers, client, contemporaries, family and friends. Let them have their say; you never know what can trigger towards the final idea. Brainstorming is not cut- and – dried, but requires exploring and going beyond the boundaries. You need to have a pad and a pencil and start with jotting down all the ideas that come to your mind. You can even doodle and sketch to give it a better formation herein. After that, think over the relative ideas to take you nearer to the goal of the project. Further, start elaborating and looking for connections amongst all these ideas. Thereafter, combine the ideas that fall in the same line.
Brainstorming is basically to storm with ideas. It gives the green light to move forward after the ideas are approved. When it comes to ideas, sky is the limit, so keep thinking; you never know what strikes next!
3.2 Wireframe : Into The Basics
Wireframing is a significant step in the design process. It basically consists of formulating the information hierarchy of the design so that the layout can be easily planned and the info can be easily accessed by the user. In other words, wireframe is kind of a blueprint required to get the final version of the design. It is also pivotal in determining the user’s interaction with the interface. It sets the right foundation before you start building the structure.
For any wireframing process, it is important to get the inspiration that will give you a thorough visual understanding of the design process. Select the process that brings out the best in your designs. Choose the tools that will fit in, for example, some of the popular tools are Balsamiq, Omnigraffle, Axure,Framer Studio, UXPin, Proto.io etc. Further, it is important to set the grid and determine the layout with boxes also following the order of info display you will prefer. Wireframing also includes defining the typography for the information hierarchy so as to have clarity and the important points are highlighted. In order to determine the visual strength of your elements, use the full spectrum of the grayscale and fine tune with it; this will be beneficial in the process of visual design in the later stages. Refining has always been a preference with the designers, so you can even try your hand at using hi-definition wireframe that is to simply add minute details to a great extent, be it for the font or the colors. After going through a proper flow it is important to translate the wireframe into a visual, keeping the backbone intact.
Want to have extraordinary designs? Set the nuts and bolts through wireframing and you are designing mechanisms are good to go!
3.3 Prototype : The Demo That Gives Promo
A prototype is kind of a demo or the mock version of the final outcome of the website. It can either be a paper sketch or HTML clickable prototype. But prototype broadly represents an interactive structure that takes the users from page to page and allows using the functionalities. Prototypes can be created with simple tools like PowerPoint, PDF documents and even MS Word, but the high-fidelity types can be made through specialized tools like Axure, Mockingbird, etc. Prototypes provide an insight of the final version which is very beneficial for the stakeholders interested in the web project. The mock up will generate a response that can help to determine the aspects within and out of the scope, the investment needed, testing procedures and the ideas on the structure of the website. It also provides a good feedback on usability testing that form an important basis to proceed to the development stage.
Prototyping goes a great way in saving time and money and work on the actual aspects rather than the assumptions. It serves as a specification document for the designers and developers that they can use aptly for reference as well as to strengthen their visualizations. However, there are a few negative sides as well. Prototyping takes a lot of time in planning before the actual development can happen. This can lead to crossing over the deadlines which is not favored much by the stakeholders. The choice for the suitable tools and elements can also be tricky as there are varied options to choose from. It is better to stick with one of the proficient tools to set the direction clear.
Prototypes play an important part in the project lifecycle. After setting the scales of usability high, it sets the development process into motion. So, make your prototypes and let the vision take over.
In this article I discussed about Exploring UX important part of UX. I’m writing following UX steps also read previous steps, so stay tuned and join our newsletter for more updates.
Latest posts by Prince Pal (see all)
- 6 Beautiful India Flag Wallpapers – Happy Independence Day 2017! - July 31, 2017
- Why GIFs Are Important For UI Interaction? And Best Apps For Making GIFs! - July 21, 2017
- How To Make An Animated GIF In Photoshop In Few Minutes - July 20, 2017