A web page can be broken down roughly into four zones:
1. The header,at the top of the page – used to identify the site and provide basic tools
• Logo or identifying mark (possibly including the brand’s tagline)
• Main navigation
• Login feature
• Search bar
2. The central content area– used to present the main content
• The actual content specific to the page – text, images, videos and more (this can be broken into several columns)
• CTAs of various kinds
3. The sidebar,either on the left or the right, or sometimes on both sides – used to present secondary content and tools
• Secondary navigation bar, or other navigation features (for example, blog article archive by date)
• CTAs, including buttons and signup forms
• Additional content, like links or snippets
4. The footer,at the bottom of the page – used for important but non-prominent content and resources
• Legal information, privacy policy and disclaimers
• Additional navigation elements.
The most important consideration for any page layout is the content – what needs to be included, what is the most important action or piece of information, and how can this be structured to meet the user’s needs? After all, web pages are created to support a user’s journey.
Another important consideration here is the different types of pages that make up your website. Not all page types can, or should be, structured in the same way. For example, your home page is a unique location where you want to showcase the most prominent news, offers, features or tools. The pages you use for, say, blog articles or product listings will be laid out quite differently from the home page, but will have the same structure as each other. Then you might have other page types for the login page, and an entirely different approach for your eCommerce checkout.
Wireframes are the skeletal outlines of the layout of a web page. Their purpose is to map out the placement of various elements on the page as a guide for the designer to create the visual design, and the web developer to create the code and interactivity required. Wireframes can be low fidelity(very rough and basic sketches, barely resembling the final output) or high fidelity(very detailed, complex layouts including creative elements). Any website project will have several wireframes – at least one for each template page. Capture your first ideas on paper – it’s the fastest and best way to capture good ideas.
Prototypes are a step up from wireframes, in that they are interactive. Prototypes are essentially sets of wireframes that have been linked together like a website, so that they can be navigated through by clicking and scrolling.
Prototypes are excellent tools for testing the flow and function of a proposed website before diving into the costly and lengthy design and development phases – they can save a lot of time, money and effort by identifying problems and improvements upfront. Again, paper prototyping is the best method for fast, iterative UX design.
