ΦWebsite Design for Newbs: A Primer - Pt. II
Following on our previous entry, we now examine the visible part of a basic website.
As an example, I’m using a site that I am still developing for my school and clinic at: SwimmingDragon.com
The image of this site is a sample of a basic website template consisting of at least 3 main components: a header, body (for content) and a footer.
Granted, you do not have to have any of these. But generally speaking, these three sections are common in almost all sites you’ll visit on the web.
Header
Usually this section holds the site’s logo, site tag, or maybe a search bar, a date, a login form or link, and a number of other possible items helping the visitor get a feel of what may be bellow or inside the site. The header is the “first impression” item of your site. Design it carefully.
Navigation
Unless you site is a one page site and does not take the visitor anywhere, links that lead the visitor inside your site is the second component in most sites. Usually these are found early on the page’s hierarchy such as above the header, right below it, such as on the sample site, on the left or right sidebar. Sometimes it is repeated at the bottom of the page.
Content
Here’s where the meat and potatoes of your site is displayed. Perhaps a mission statement, a welcome message or, as in this site, the blog.
This middle section of the site can be further divided into segments containing sidebars. Often the sidebars accommodate links, ads, social media, latest comments or a number of other options. While sidebars are not necessary, they do provide a way to use real state wisely and prevents from having long strings of text.
Footer
The footer usually contains some contact information, copyright, address, who design the website, Terms of use links and other information that is most likely to remain the same. An emerging trend, which I like, is the “Fat Footer” design.. The site in question as well as PhiCreations makes use of the “Fat Footer” idea to present more content without drawing attention away from the body of the site..
And that’s basically what most sites you’ll ever visit will consist of. A header, content, and a footer..
On our next post we’ll take a look at the code or HTML that is responsible for the site’s display on the browser.
