Perhaps no other medium places such high importance on the design theory of repetition as web design. The theory of repetition states that you repeat design elements throughout an entire piece. These repeating elements create continuity and also make it easier to understand the content. When designing a website there are two main areas in which repetition needs to be applied: with the inclusion of common elements and also through visual consistency.
The use of common elements in webpages is the most important factor in how easy a webpage is to use. Website visitors expect certain things to be present on a page and when they don’t find those things it becomes much more difficult to navigate the page quickly and efficiently. Does this mean that you must have the same sections that always look the same? Absolutely not! The styling and look of these areas is completely up to you.
In the broadest scope of a webpage, there are four main sections that nearly all websites contain: a header, navigation, an area for content, and a footer.
The header is the first identifier of a website. Typically it includes a logo (usually in the top left-hand corner) and some explanation of what the site is for. This may be explain with a tagline that encompasses a company’s purpose, or imagery that visualizes what they do. Take a look at these examples from arts organizations across the country. Each one is visually unique, but they all share commonality. They each include a logo on the left, the organizations name, imagery reflective of the arts, and two have text descriptors that describe their purpose.
Every website should have navigation that is consistent on each page. This is called global navigation, meaning that no matter where you are on the site the navigation will direct you to anywhere else on the entire site. Navigation can be arranged either horizontally or vertically as these examples show.
There is some common terminology used in navigation that website visitors are accustomed to. Using different terminology may make it more difficult for your visitors to quickly and easily find what they are looking for. A general rule is that your navigation labels should clearly define the content that will be found on that page.
- Home – A link to the homepage is generally included in the navigation, and labeled home. If you notice, two of the examples don’t use Home. One substitutes “Welcome”, which is easy enough to guess that it will take you to the homepage. The other example, however, uses “Who We are”, which isn’t entirely clear. Typically a site will include a page that explains about the organization, but that isn’t usually the homepage.
- Contact Us – All websites should have clear information that explains how to contact them for more information, and this section is almost always labeled as “contact” or “contact us”.
- About Us – As I briefly mentioned, a site should include a page that explains more about their purpose and mission. This is usually labeled as an “about us” page.
The third area of any website is the content area where the bulk of the text and media is included. The arrangement and layout in this area can really vary. Ss you can see in the examples below, these four sites have one column, two column, and three column content areas.
The final area is the site footer. Footers are almost always located at the bottom of a site and are consistent on every page. They generally include a statement of copyright and some type of contact information. This can be an email address, phone number, or link to a page with contact information. Sometimes footers also contain the site navigation as very small text links, as the last two examples show.
Now that you have the common elements of your website in place, it is equally important that those elements retain visual consistency throughout the entire site. Image if you visited a site that had the navigation in a horizontal bar on the homepage, but the about us page had it as a vertical section on the side of the page. A visual shift like that would be jarring and you would have to regain your bearings on the second page and figure out a second time how to navigate the site. If the homepage has the navigation styled in a particular manner, every other page should have similar styling. This may seem obvious with sections of the site, but it also applies with the styling of content within the content area.
To make this much easier, CSS comes into play here. Styles are set in the CSS that then apply to every instance of an element throughout the site. For example, a style would be set for all of the paragraphs throughout the entire site. Every time you added a paragraph of text it would automatically be formatted the same way. The same is true for different sized headings. The key to making sure content remains consistent is to use the built in text styling. These styles are preset and will be the same every time you apply them.
When applying headings, the approximate size relationship is shown in the drop-down style box. Heading 1 is the largest, Heading 2, slightly smaller, Heading 3 is even smaller, etc.
Other type of visual elements are also predetermined in your WordPress theme. Links will always be formatted the same, tags and categories are formatted the same, and comment forms are formatted the same. In many ways WordPress does a lot of the work for you to make sure that visual consistency is maintained.