A Guide to Viewing Design Layouts

What is a Design Layout?

A design layout is an approach to define structure for a certain page layout with given assets such as imagery, content, and design elements. When designing the layout of a website, the more information about the website and company, the easier it is for the designer. Giving the designer real assets allows the client to get the best experience when viewing the design layout of their website. 

Once again, remember that most of the real content for the page will not be shown in the design. This depends on how much information is given to the designer at the time by the client or the content specialist. Since design layouts are templates, they can be used for multiple pages on a site. There are not as many design layouts as there are pages, since the key to the website is to have uniform but uniquely appealing interior pages. Remember to keep the user in mind, continuously be thinking about the purpose and mission of the company, and to speak up on anything in question or of concern.

Where to Begin // Header

• Before observing the navigation at the top, look at the very top of the page.
• This is the header where very little information lies; however, it has important information including phone numbers, social links, or maybe a search bar.
• When looking at this, make sure it is not crowded but it has everything needed for the user.
• Next, look at the Navigation Header at the top of the page. (Sometimes it may be on the left side of the page.) It should mirror the first tier navigation shown on the sitemap.
• This will (should) be seen on every design layout since the user should have access to the navigation wherever they are on the website (homepage and interior pages).
• The order of navigation should be correct at this stage.
• One of the first tier elements should be “highlighted” in some way to show how it would look if it were clicked on.
• This “highlight” will probably not change on each layout because it is just showing an example, so don’t get confused if, for example, the design layout is on a “Blog” page but the highlight is still on “Contact.”
• **One of the most important things to remember is that since this header navigation is consistent throughout all pages, it is much harder to change. So a change request after approval on this has more significant ramifications than something else.

Footer

The footer is another section that should be consistent throughout the website and it is usually arranged in columns. Content in the footer usually includes:

• Site links (basically the elements of the header navigation)
• Contact information
• Social links
• The logo and tagline
• Copyright
• Any other type of appropriate widget such as:
  • Ask a question
  • Book an appointment
  • A map of the location
  • Make sure this is concise, informative and visually appealing without taking the focus away from the rest of the page.

Homepage Layout

Banner Image:

• Most design layouts include a banner on the homepage. This usually consists of one image, multiple images, or a video.
• While looking at this area, observe the size.
• Also look at any “call to action” buttons found on, beside or under the banner area and make sure they make sense where they are and are aesthetically pleasing.
• If there are arrows or anything of the sort on the sides of the banner, that means the pictures will change on the banner, functioning as a slideshow that may be manual or automatic.

There are a few different styles of homepage layouts that a website can be modeled after:

• Long-scroll Homepage // This is a homepage that has a lot of content. Usually this features a little bit of each section from the main navigation. This is a long homepage that scrolls down for a while and a user is usually able to get a good idea of what the site is about by just staying on the homepage. This type of homepage is also very inviting; each section usually has catchy blurbs to capture attention.
• Banner Homepage // This type of homepage usually just consists of a banner image, and more than likely does not allow the user to scroll down since there is no other content. This banner can sometimes change on its own, scroll side to side changing images and content, or stay the same. This type of homepage puts emphasis on what is shown in the banner and usually guides the reader to step right into the main navigation.
• Portal Homepage // A portal homepage has a different type of navigation. It usually has very large and obvious buttons that bring the user to different subsections of the site. This is a good way of really highlighting different categories of the site.
• One-page Site // A one-page site is when the homepage is the entire site. This could have a long scroll to hold all the content or it could be more concise. This can be strategic for certain types of websites.
• Splash Page // A splash page is a temporary page that usually has the purpose of saying “Coming Soon.” This may be on a website that is under construction or that wants to be published to show that it is out there but may not be one hundred percent ready.

Whichever layout the homepage is, be sure to pay attention to information architecture. Specifically, with the long scroll layout, make sure the information towards the top is the most important. Also keep in mind that the type of homepage usually complements the purpose of the website so make sure it is fitting to the overall aim of the company’s website.