Sketches help you generating and exploring ideas and concepts bottom line being creative. When this first phase is completed, some ideas need to be shaped. We have to develop a more detailed visual representation of the page structure and its content and also suggesting the navigation and interactions.
These visuals will be used to communicate. They must be readable and easily understandale and revisable. It’s true inside a team where the different parties speak their own language but further more with third parties that are not as familiar in reading and understanding of drawings as professionals are.
Sketches do not fit all these requirements and are efficiently replaced with digital wireframe.
What is a wireframe
A wireframe is a low-fidelity visual representation of a website sometimes referred to as a skeleton, outline or blueprint. They represent the basic page layout structure and navigational scheme of the website’s page sand major site components.
Some important points to recall:
- a wireframe is all about function not form so do not try to make it pretty. Avoid any visual enhancements that could distract the audience unless it helps to the comprehension of a specific point,
- it’s a communication tool,
- they are used to exchange approaches between designers, developers, stakeholders and clients,
- think to annotate them to communicate your rationale for your design decisions. they must be concise and focus on user experience.
- do not hand-draw your wireframes
- a change in an element shared between many pages force you to redraw all your pages. If your preparing wireframes digitally, you can easily reuse components to significantly speed up the process,
- it will require a big amount of work if you want to convert the drawing into an interactive format,
- if the designer and the client are not in the same location, and thus cannot sit down together with physical sketches, it can be simpler for the designer to send the client a link that he can regularly check rather than scanning sketches (face issue like resolution/orientation, colors…) to email them,
- a wireframe is a deliverable, it should be presentable, maintainable and easily revisable.
- no need to create a wireframe for every single page. You can use multiple wireframes to describe differents layouts, interactions and states,
- prefer sketchy style to polished lines
- it better communicates that it’s a discussion, not a decision which invites more the clients to make feedback. It doesn’t give the false impression of completion,
- switch to a polished style on elements that have been adopted is a good way to show the progress. For that reason, give the priority to software that allow you to easily switch between the two styles,
- you can combined them with a moodboard that gives an idea of how the color scheme, textures, typography, and other visual elements will look.
Sketchy wireframes can’t replace traditional sketching during the ideation phase and do not be used too early because they can limit your creativity.
- wireframing to scale is a good idea.
What a wireframe is not
Do not think a wireframe as:
- a visual design specification nor an aesthetic approximation of a website
- a technical requirements document
- a user research document
- an interaction design document
- a content specification
What are its benefits ?
Well, plenty. It helps:
- to focus on functionalities and user experiences,
- to picture the final website architecture and composition by clarifying layouts, states, interactions and navigation,
- to visualize and refine navigation,
- to evaluate the overall effectiveness of the page layout against usability best practices,
- by increasing the productivity and efficiency of the project process by being a great starting point for developpers, designers and copywriters,
- to determine development requirements,
- to identify many of the issues in a way that is time and cost effective before the design is completed. Every parts can easily be revised or discarded,
- to adopt a formatting scheme that will maximize readability,
- clients to visualize your ideas more easily than when you just describe them verbally,
- must give a clear understanding of what is going to be developed,
- show what the site will roughly look like: layout, navigation, content in context,
- help to peruse the different use cases.
Wireframing is not a cure-all, but a valuable tool. It’s something that isn’t lock down and should be adjusted according to the attendee you are speaking to.
Mots-clefs : wireframing
