Duckett: HTML & CSS, Chapter 18 - Process & Design
Target Audience: individuals
- What is the age range of your target audience?
- Will your site appeal to more women or men? What is the mix?
- Which country do your visitors live in?
- Do they live in urban or rural areas?
- What is the average income of visitors?
- What level of education do they have?
- What is their marital or family status?
- What is their occupation?
- How many hours do they work per week?
- How often do they use the web?
-
What kind of device do they use to access the web?
- Your content and design should be influenced by the goals of your users.
- The first attempts to discover the underlying motivations for why visitors come to the site.
- The second examines the specific goals of the visitors. These are the triggers making them come to the site now
How Often People Will
Visit Your Site
- Some sites benefit from being updated more frequently than others. Some information (such as news) may be constantly changing, while other content remains relatively static.
Site Maps
- Now that you know what needs to appear on your site, you can start to organize the information into sections or pages
WireFrames
- A wireframe is a simple sketch of the key information that needs to go on each page of a site. It shows the hierarchy of the information and how much space it might require.
Example Wireframe
-
Visual hierarchy refers to the order in which your eyes perceive what they see. It is created by adding visual contrast between the items being displayed. Items with higher contrast are recognized and processed first.
- Designing Navigation
- Concise
- Clear
- Selective
- Context
- Interactive
Summary
PROCESS & Design
- It’s important to understand who your target audience is, why they would come to your site, what information they want to find and when they are likely to return.
- Site maps allow you to plan the structure of a site.
- Wireframes allow you to organize the information that will need to go on each page.
- Design is about communication. Visual hierarchy helps visitors understand what you are trying to tell them.
- You can differentiate between pieces of information using size, color, and style.
-
You can use grouping and similarity to help simplify the information you present.
-
Tags act like containers. They tell you something about the information that lies between their opening and closing tags.
-
Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.
-
Body, Head & Title
- HTML pages are text documents.
- HTML uses tags (characters that sit inside angled brackets) to give the information they surround special meaning.
- Tags are often referred to as elements.
- Tags usually come in pairs. The opening tag denotes the start of a piece of content; the closing tag denotes the end.
- Opening tags can carry attributes, which tell us more about the content of that element.
- Attributes require a name and a value.
-
To learn HTML you need to know what tags are available for you to use, what they do, and where they can go.
- The <header> and <footer> elements can be used for:
- The main header or footer that appears at the top or bottom of every page on the site.
- A header or footer for an individual <article> or