Website Wireframes

Website Wireframes

What are wireframes and what are they used for?

Wireframes are blueprints for websites pages or apps.

Wireframes are done at a predesign stage.

Wireframes help Website design Agencies work out where content and website componenets should go within a page and where pages should go within a site.

Wireframes are a low fidelity way to communicate the structure and content of a webpage.

As wireframes are quick and easy to build, this is the stage of website project where you want to do all of your planning, tweaking and heavy thinking in regards to content hierarchy and userflow.

Wireframes help Website Agencies strategically decide where content should go.

Wireframes are created in conjunction with or after the text content.

Wireframing is more effective with the actual content, rather then dummy content. However, Wireframes that contain dummy content can be given to content writers as a loose guide and starting point.

Its important to note that wireframes do not involve visual design or branding. The design phase is still yet to come. This is why Wireframes are done in greyscale to separate the branding concerns.

flowchart LR
    content --> wireframes --> design --> QA --> Analysis

Once Wireframes have been looked at and approved by all shareholders, then the User interface designer can then apply the company branding and create the final look of the website. At this stage the designer will be working in Figma or Sketch to produce the visuals.

Wireframes give the designer an idea of what sort of content is on the page when they are designing the final look.

In my opinion, the advantage of wireframes is that the designer can design around the final content and can simply implement the company branding over the top of the wirerfame.

The designer is aware of the content amount, what the message of the content is. The designer can spend more time on the typography and image selection when they know what the intention of the block or page is.

a structured approach like this ensures the design does not overpower the content.

Wireframe component checklist

As usual I’ve created a list of many of the popular website components that may or may not be incorporated into website wireframes.

• Header
  • Main navigation
  • Utility navigation
• main page title / banner title
• testimonials
• All website blocks (text with image and call to action block for example)
• Hero banner
• Video
• Image gallery
• Resource downloads
• News collection page
• News single item page
• Featured products or services block
• footer
• breadcrumbs
• Contact form or quoting form

Stay tuned for I’ll create some downloadable assets for these.