Wireframing is a way to design a web product at a structural level.
A wireframe is used to lay out content and functionality on a page, focusing on user needs and user journeys. Wireframing occurs early in the development process. It establishes the basic skeletal structure of a page before visual design starts. Wireframing is purely structural and is done without a design focus.
During the website design process, decision making can be temperamental. Templates get tweaked, user interfaces get upended by clients and designs go wrong.
One constant across most industries though, is preparation. Get the prep right and the hard work will be manageable and even, enjoyable!
Remember: Wireframing is key when it comes to the layout and design foundations of a website – do not be tempted to skip it!
Wireframing on Paper
A designer should always start with a pencil and paper. Whether it’s thoughts, doodles or structural layouts – drawing is quick, efficient and honest. It often captures vital instinctive first thoughts and ideas – ones that may prove to be the catalyst for a unique or innovative concept. Using these basic tools can help the decision making process.
We print out physical browser, tablet and mobile paper wireframes to start our web projects. We begin with mobile wireframes, arranging elements to best accomplish a particular purpose. Users who view websites on mobile devices want information provided quickly and efficiently. Due to the high percentage of mobile browsing we design mobile first when starting web projects.
Once these mobile blueprints are drawn, we move on to tablet layouts and finally, desktop. Each step allows us to elaborate and expand the layout and design. We allow the content to respond to each device, putting the user first to be sure that UI’s are effective.
A Helping Hand
We are an organised bunch here at Odes and Ink and like our workflows to … flow!
We create reusable templates that get accessed by our whole team. This divergence helps to refine our approach and means we iterate with every project.
The User at the Centre
For any screen design process, wireframes help to quickly and effectively define an information hierarchy. As I mentioned earlier, a wireframe is devoid of design – it focuses on structure and the user. We use wireframes to ensure that the architecture of a website puts the user first.
This clarification can enhance features, improve functionality and streamline the design and build.
Wireframing and Clients
A wireframe descends from a sitemap which are often conceptual documents. Clients can sometimes struggle to visualise and understand a list of website pages. A wireframe’s job is to show clients how each page will be constructed.
From a client’s perspective, wireframes can help to clarify the sometimes intimidating lingo used by web designers and agencies. The swift creation of wireframes mean clients are able to follow along the early iterations of their site’s structure. Ulitmately, clients want to understand the process and wireframes provide clear instructions on the blueprint of their businesses new online presence.
Next, Web Design
Designing a website from wireframes helps productivity. When wireframes are drawn up, signed of and then used as the basis of the design everything flows. Wireframes help to map out user journeys, they contribute towards concise pattern libraries and help communicate design concepts to clients.
Enjoy the free wireframe templates we’ve made available for download.