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. 

Things to Keep in Mind

  • The designer will walk every client through the design layout which will help the process go smoothly.
  • Remember the concept of information architecture--while looking over the design, make sure the most important elements of the page are towards the top.
  • Don’t get distracted by colors on the first draft! Color schemes are important, but they can easily be changed, so don’t get hung up on the colors if they are not the ones desired.

Themes to look at on each page:

  • Font Consistency // Make sure the font is consistent throughout. It is okay to have different fonts for headers and content.
  • Font and Image Alignments // When looking at images and the font on or around them, it is important to understand the purpose of why they were placed where they were in relation to other elements of the page. This is a strong aspect of design, and the positioning of different images and content affect the flow, attractiveness, and overall understanding of the website.

 

  • Navigation Functionality // This aligns with usability. Navigation needs to be clean, clear, concise, and consistent. The user shouldn’t have to spend five minutes trying to figure out where to go to find what they are looking for. Make sure the header has everything it needs without being redundant. Also make sure the header and any other type of navigation is clearly seen on the page and not hidden or blended in with anything else.
  • Content Breaks // Actual true content may not be on the design layout yet, so determining if content breaks make sense contextually may not happen at this stage. However, looking at it from a design perspective, observe if the breaks make sense visually. So if a user was reading the content, would it make sense for them to come to the end of a paragraph right there?
  • Typography // Typography is important in any type of design. Different elements of typography include: Size, Type, Style, and Spacing.

 

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 uniformed but uniquely appealing interior pages. Remember to have the mind of the user, 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 as sort of 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 are 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 for each section since it usually has catchy blurbs for each one.
  • 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 usually 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. 

 

Interior Pages

  • Interior Pages should also follow the philosophy of the most important information towards the top of the page.
  • Interior page layouts will vary depending on the purpose of the page; however, they should stay consistent to the overall design.
  • Many elements, including the header and footer, will be the same.
  • Function is the primary element to look at when reviewing internal pages
  • The goal of the interior page design is to arrange information that can be easily duplicated while trying to accomplish a certain function.