Design for Developers (for True Epub) by Stephanie Stimac

Author:Stephanie Stimac [Stimac, Stephanie]
Language: eng
Format: epub
Publisher: Manning Publications Co.
Published: 0101-01-01T00:00:00+00:00

6.1 Establishing your website structure

When you move into the design phase to plan your website structure for wireframing, you should already have your website’s goals and purpose in mind and an outline of the types of content on each page from your site-mapping phase. Now, we want to start translating this visually, so let’s figure out what we need to put on the page.

First, we need to establish the most basic sections of our website—how we will split up our page. If we think of our finished website as a main dish of food—for example, pasta carbonara—we first must know what each ingredient is before we can begin cooking. We must also follow a particular order of adding ingredients to make the final dish. The sections of our site are our ingredients, and we need to know what those ingredients are before putting them together.

All websites generally have three sections: a header, the main content, and a footer. The header contains the website navigation and a logo or the website name; it can also include other items, like a search bar and social media links. The header tells the user where they are on the web. The main content is the largest part of the page and should provide value to the user by including what they are looking for. The footer at the bottom of the page contains copyright and contact information; it can also include a high-level sitemap or other information that may be relevant or important to link to, such as privacy policies and terms of use. A footer isn’t always necessary, depending on the type of page. Twitter, for example, doesn’t have a footer.

A sidebar can be used as another section of content, depending on the website’s or page’s requirements. If you’re designing a website whose primary function is as a blog or daily news, it may make sense to include a sidebar on the homepage. The sidebar includes any less important information not displayed in the main content section; it contains secondary content. It can also be used for a secondary set of navigation. For example, on websites with many pages and subpages that go a few layers deep, it’s helpful to include all those links in a sidebar rather than in the main site navigation. Once a user clicks into a certain section of the site, those additional subpages may surface through a table of contents in the sidebar, keeping the main site navigation clutter-free and easy to scan.

Once we have our basic high-level sections, we’ll want to break down exactly what the main content section should contain. This decision will again depend on your website’s goals, but you can continue to chunk out the main section into subsections based on the content, which could look like the following:

Image of product at the top of the page with a call to action

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.