Introduction to Web Design


When a designer conceives a chair, the designer needs to think about the technical requirements, the products aesthetic appearance and the ease of use for the user:

  • If the final object is superb but no one can sit on it, the designer didn’t conceive a chair but just a piece of art.
  • If the chair is the most comfortable in the world but it looks like a torture device to sit on it, who would even try it? The chair that is designed must have a coherent look and feel: it should offer a positive experience to its users.

For a chair like for the Web, Designing is conceiving a product for its users. It is a process where technical constraints, aesthetic and usability meet in order to serve a purpose for its targets. Design must focus on existing and future users. Designing for the WEB is not just about graphics/aesthetics, rather it applies to all the overarching work going towards ensuring that the Web project meets its purpose for its target audience.
Creative Commons licensed content from, “An Introduction to Web Design”

As you consider your first multi-page website a few moments considering the elements of web design are in order. This page is not a definitive review of web design – just a few pointers to help at the scale you are approaching now. Web design is typically treated as part of a course of study in web development, so you would find fuller instruction in web design as part of a web development course or program.

To delineate web design from the other tasks you have undertaken. At the largest scale ‘web development’ includes all the tasks included in the design, creation and maintenance of a web site. Web development would include the needs analysis that guides the initial planning and design, the technical construction of the site, and the maintenance requirements of the site throughout its lifecycle. This page will not address the larger picture, which is beyond the scope of this course, or the technical aspects which we will address through the limited HTML resources presented and the website tools afforded by the likes of WordPress, Google Sites etc.

Page Layout

The most important initial decision affecting your web site is how the components of most pages will be laid out. Where will navigation be set and how will it work? How and where will content be displayed, will pages stretch to accomodate content or will content be broken up to fit within pages. The general layout of your pages should not change from one to the next. Some pages, like the home page, may have slight differences due to function, but users should continue to find page elements where they are expected regardless of page type.

Webpage Head

A typical page layout consists of three elements.

  • A ‘head’ that includes branding, titles and perhaps a ‘breadcrumb‘ type of navigation.
  • A navigation element, typically on the left margin, but sometimes on the right or across the top.
  • A content area appropriate to the purpose of the website.

There are many daring and creative advances in web page layout, you should avoid all of them. A website for distance learning should first reassure its users by following the conventions found on websites used every day. This means a logical navigation on the left, content on the right, with a relatively small head above both.

Content Display

Content on your website should be displayed in a consistent manner that allows for the most effective comprehension by the widest number of users. Sticking to HTML for content (as opposed to using Adobe Flash or just embedding YouTube Videos) means that your content will likely be machine readable and could be manipulated by users who need the text larger.

Establishing and maintaining a system of headers will keeps users organized while viewing your content and the appropriate use of paragraphs, lists and decorative text (bold and italics) will enhance the comprehension of your content.

Images, charts and tables should likewise follow a standard system of display, setting them apart from text. These items should also be captioned and cited as appropriate


An important component of your site design (and in a complex site perhaps the most important) is the navigation. A consistent and understandable set of links to move between the pages on your website is vital to make it effective. Traditional navigation panels are found on the left side of each web page. In complex sites the content of the navigation panel may change depending on your location. On others the navigation panel may be static. If your site consists of a home page plus a dozen or fewer pages that are subordinate to the home page, a simple static navigation page will be effective. If your website has layers and layers of pages, you will want a navigation panel that communicates the user’s position within the website. This can be done by showing layers as indentations in the list of links, and by changing the appearance of the text representing the page currently viewed.

A navigation method particularly suited to web sites with multiple layers is the ‘breadcrumb‘. This form typcially stretches across the top of the page, describing and linking to each of the steps from the home page to the page currently viewed.

Navigation is not typically included at the bottom of a web page. The general exception to this is when you have long pages of content (with lots of scrolling), and at the bottom of the page the likely next destination is the next page of content. In this case navigation is often provided to move to ‘Previous’ or ‘Next’ pages.


An important tool in the development of online learning sites is the use of wireframe models to consider the best way to present material to students and allow them to interact with your site. There are many specialized wireframing tools, but many are created with Microsoft Word or PowerPoint. At a simple level, the choices you are exploring are those set out on this page, plus content you may include for your students to interact with. I you will display text, how much of the page should carry the text? If you will include images and text, how big should the images be? How should they reside in the flow of text? If you will include links or media, how will they be displayed? How will students interact with it?

When you are using tools like WordPress or Google Sites many of your decisions around navigation or head elements are constrained by your tools. You still have options, including different themes in WordPress. When it comes to your content you typically have more freedom, depending on how much you are will to customize yourself.

Leave a Reply