Theory and Basics

Hello and welcome to an Introduction to Web Design and Rhetoric! By using this guide, you will be able to create your own basic layout for a website. In order to do this, you will understand the techniques behind HTML (Hyper Text Markup Language) and CSS (Style Sheet Language). When you are making your own coding documents, they will contain this markup language through a series of tags. We'll talk more about that later on. To begin, we will first discuss the theories behind good web design.

Where there is a website, there will be users. Your job is to then ensure that your site is not just functional, but appealing to your audience. Navigation should be as easy as possible for them. By carefully planning out the needs of your users beforehand, they will remember your site as a pleasant experience they would consider visiting again and again.

An Overview

User Experience

User centered design is the practice of creating an engaging user experience, so make sure to think of your users first when making conscious design decisions! User experiences make sure aesthetic and functional aspects of a menu or button work in context with the rest of the final product. This correct form is dictated by psychology and behavior of the user. Keep in mind that the more complex a product is, the harder it is to identify how to deliver a successful user experience.

You can think of the visits on your website based on ROI; return on investment. For every dollar that you spend, how much are you getting back? Conversion rate can be one way to measure ROI, or by measuring the effectiveness of user experience through the percentage of users you can convert to the next level of a relationship. This can mean the difference between casual users and loyal costumers.

Remember; a system-centered design expects users to accomodate while a good user-centered design puts users first. This means you need to identify with your audience. You might be wondering how to better get to know them. There are a few ways: usability tests, surveys, or creating your own persona. This requires imagining yourself as a fictional character who will have similar needs to your expected demographic. Either way, feedback is vital.

The 5 Planes

The Five Planes

Making a website requires some detailed planning. Before you dive straight into the code, there are 5 planes you need to consider. These are Surface, Skeleton, Structure, Scope, and Strategy. As seen by the image on the right, these planes build upon one another. However, don't think that you need to keep these planes separate. They rely on each other, each plane influencing the other.

The strategy plane is a good place to start because this is where you will decide on the main purpose of your website. It is at this point where goals and objectives are laid out. What do you want to get out of this site? Scope is where you determine the site's functional specifications and what the content will consist of.

The structure plane then takes the abstract notion of scope and makes it more concrete. This is where information becomes organized and grouped together. You should also think about how all your interface elements will interact with one another. The skeleton plane takes you closer to visualizing your final product. Now is your chance to chose where everything is placed, from navigation to buttons. Your choices in color schemes, typography, and images will then be made in the surface plane.