Wireframes are a great option for quickly exploring layout or content ideas for a page without getting caught up in design detail. A wireframe can be as simple as a pen and paper sketch or a pixel-perfect interactive mockup. However you approach it wireframing is a great way to visually communicate website ideas, turning them into something more tangible and even testable.
The key to getting the most out of wireframimg is not to be afraid to tear up what you’ve produced and start again.
To this end it usually makes sense to keep wireframes grey-scale and use lorem ipsum if actual copy isn’t available.
At The Pixel Parlour we use wireframes early in the development of a design to illustrate ideas to a client and experiment with / establish what the content hierarchy and key user interface elements of page might be. Our wireframes often start as quick pen and paper sketches before moving into Adobe XD to create more precise digital versions.
The image below shows how a very basic initial wireframe (on the left) might translate to a final page design (on the right).
Wireframes don’t have to just be static images, applications like Flairbuilder allow you to link multiple wireframes together and even add interactive elements such as drop-downs menus so that you can explore a site’s user experience still further. Some designers even create their wireframes as true HTML allowing interactive aspects such as the reflowing of page content in a Responsive Design to be previewed in the browser.
Whether you use wireframes to quickly capture ideas or to explore a page in-depth they are undoubtedly an indispensable part of many website designers’ toolkit.
Receive Updates by Email
Sign up for our latest knowledge base articles delivered direct to your inbox.
Sign-Up Free