The reason for using hand-drawn sketches is to find a better way to quickly lay out multiple possibilities. In this phase, we can try radically different ideas and unusual concepts as well. Most commonly, these sketches are intended to bring focus to the introduction of an idea and hence they are made up from lines and contain only rough text.
What’s in it:
What’s not in it:
Examples
Sketches on paper for the Buzzdrive highway radar mobile interface
Sketches for the Utinform route planner mobile interface
This kind of sketching technique is digital, made with a wireframing tool. Its primary purpose is to make the concept testable, even functioning as a clickable prototype. On this level, it is useful to come up with some alternative sketches: by testing, we can decide how viable our ideas are.
The use of this tool needs better planning regarding processes: a navigation structure has to be worked out, and the functioning of the screens needs better forethought. The concepts only need elaboration to an extent where they can be tested, no more. This means we only need to think in lines and a few shades of grey. There is no point in using colors yet, only if it is absolutely necessary for conveying meaning. Texts, i.e. labels of buttons and tags on the page are useful, because they can influence the tester during testing.
What’s in it:
What’s not in it:
Examples
Low-fidelity wireframe
Low-fidelity wireframe for the of Utinform route planner
A more elaborated version of the previous technique, both in function and layout. This is usually a clickable prototype, in which most of the screens are fully developed. It aims at showing closer resemblance to the final design, yet still not showing complete resemblance. Measurements are accurate, and more shades of grey are allowed. We should only use other colors if it is really necessary (e.g. provided they have considerable significance), because unfounded use of extra colors can mislead the testers during testing. Greater refinement leads to a more vivid imagination regarding future layout; besides, we can receive a more reliable feedback.
What’s in it:
What’s not in it:
High-fidelity wireframe
High-fidelity wireframe for the interface of Utinform route planner
Detailed design is not a sketching technique, yet it is an important phase for clarifying the difference between a high-fidelity wireframe and a detailed design.
In this phase, functioning is worked out and tested as well, and layout is thoroughly elaborated; i.e. measurements, colors, fonts, icons and every other detail.
Examples
Detailed design for the main page of Utinform
Detailed design for one of the pages of Hibridlevel virtual printer
Ideally, in each and every case we go through all techniques from the beginning to the end, constantly testing and cross-checking with the participants of the project. We only proceed if all the critical issues of the preceding phase have been resolved. The more we proceed forward the less possibility we have for radical changes, as a result of more accurate interfaces. In the beginning it is easy to change the plans, whereas in later phases it takes a lot of time to change something.
You can find more about design techniques on our Facebook page.
Imagine a future where lesson planning takes minutes, not hours—this is the promise of AI-driven…
In UX, most of the attention is on the surface: people are interested in wireframes,…
Slowly but surely, 2024 comes to an end, but the significance of investing in user…
Don’t judge a book by its cover. In the case of e-commerce websites from the…
You are standing in front of the participants, wondering where it went wrong. Why aren't…
The FinTech industry is rapidly growing and it can’t be stopped. As everything becomes more…
