Skip to navigation Skip to main content

Website Wireframes : Jargon Buster

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.

Wireframing website layout ideas

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).

Website wireframe to design example

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.

Nick Barron

Written by

Nick Barron

In his role as UX Director Nick ensures that everything we do reflects a clear understanding of our clients’ aims as well the expectations of their audiences.