Process & Design
It looks at who might be visiting your site and how to ensure the pages feature the information those visitors need. It also covers some key aspects of design theory to help you create professional looking sites. In this chapter, we will look at:
- process to use when you are creating a new website.
- How to organize information so that visitors can find what they are looking for.
- Design theory for presenting information in a way that helps visitors achieve their goals.
- Design tips to help you create more attractive and professional sites.
Gather and organize information
- Audience : Who is the Site For?
- Every website should be designed for the target audience not just for yourself or the site owner. It is therefore very important to understand who your target audience is.
- Ask questions about the people you expect to be interested in the subject of your site.
- If you ask a client who a site is for, it is not uncommon to answer “the entire world”.
- Realistically, it is unlikely to be relevant to everyone.
- People use light bulbs, they are not likely to order them from different country.
- target audience might be a company or individual.
- for questinair process go to Book HTML & CSS chapter 18, page (455).
- Invent some fictional visitors from your typical target audience. They will become your friends. They can influence design decisions from color palettes to level of detail in descriptions.
- Process go to Book HTML & CSS chapter 18, page (456). 2. Why People Visit YOUR Website?
- Some people will simply chance across your website, most will visit for a specific reason.
- Your content and design should be influenced by the goals of your users.
- To help determine why people are coming to your website, there are two basic categories of questions you can ask:
- 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.
- To make this step go to Book HTML & CSS chapter 18, page (457). 3. What Your Visitors are Trying to Achieve?
- First you want to create a list of reasons why people would be coming to your site. You can then assign the list of tasks to the fictional visitors you created in the step described on the previous page.
- To make this step go to Book HTML & CSS chapter 18, page (458). 4. What Information Your Visitors Need?
- You know who is coming to your site and why they are coming, so now you need to work out what information they need in order to achieve their goals quickly and effectively.
- To make this step go to Book HTML & CSS chapter 18, page (459). 5. 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.
- Working out how often people are likely to revisit your site gives you an indication for how often you should update the site.
- To make this step go to Book HTML & CSS chapter 18, page (460).
Site Maps : organize the information
Now that you know what needs to appear on your site, you can start to organize the information into sections or pages.
- The aim is to create a diagram of the pages that will be used to structure the site. This is known as a site map and it will show how those pages can be grouped.
- To help you decide what information should go on each page, you can use a technique called card sorting.
- This involves placing each piece of information that a visitor might need to know on a separate piece of paper and then organizing the related information into groups.
- Each group relates to a page and, on larger sites the, pages can in turn can be grouped together to create different sections of the website.
- The groups of information are then turned into the diagram that is known as the site map.
- A site map will usually begin with the homepage. Additionally, if the site is large and is compartmentalized into sections, each section might require its own section homepage to link to all of the information within it SITEMAP EXAMPLE
- You may need to duplicate some information if it needs to appear on more than one page.
- The pages will inform how users navigate through the site.
- Remember to focus on the goals that your visitors want to achieve.
- It is important to reflect the public’s understanding of the subject on how to organize information.
wireframes
- low presentations of the website and how it will look to the user and give me insight on how to organize the website.
- By creating a wireframe you can ensure that all of the information that needs to be on a page is included.
- wireframes should not have colors and design because the website owner might start thinking about design and ignore the functionality of the website.
- wireframes make design easier because you know what information needs to appear on which page before considering how the the page should look.
- It can be very helpful to show the wireframes of a site to a client before showing them a design, It enables the client to ensure the site has all the functions and information it needs to offer.
- You can sketch wireframes on paper or use a graphics application on your computer.
Getting your message across using design
The primary aim of any kind of visual design is to communicate. Organizing and prioritizing information on a page helps users understand its importance and what order to read it in.
- CONTENT, Web pages often have a lot of information to communicate.
- Prioritizing. * If everything on a page appeared in the same style, it would be much harder to understand.(Key messages would not stand out.). * By making parts of the page look distinct from surrounding content, designers draw attention to those items. * Designers create something known as a visual hierarchy to help users focus on the key messages that will draw people’s attention, and then guide them to subsequent messages.
- Organizing
* Grouping together related content into blocks or chunks makes the page look easier to understand.
* Users should be able to identify the purpose of each block without processing each individual item.
* By presenting certain types of information in a similar visual style (such as using the same style for all buttons or all links), users will learn to associate that style with a particular type of content.
* To understand design step go to Book HTML & CSS chapter 18, page (465 - 472).
Web Pages:
- pages are like book or newspaper structured in a way make it easier to understand.
- also an commerce store has catgories and sub catgories.
- web pages are e-versions of newspaper and e-commerce etc…
strucutre a webpage.
- Structure is very important in helping readers to understand the messages you are trying to convey and to navigate around the document.
- to learn how to write web pages, it is very important to understand how to structure documents.
- HTML describes the structure of a web page.
How Pages Use Structure
- for example newspaper:
- for each story, there will be a headline, some text, and possibly some images.
- If the article is a long piece, there may be subheadings that split the story into separate sections or quotes from those involved.
- Structure helps readers understand the stories in the newspaper.
- Web newspaper example :
- The use of headings and subheadings in any document often reflects a hierarchy of information improtance.
- A document might start with a large heading, followed by an introduction or the most important information.
- Each topic might have a new paragraph, and each section can have a heading to describe what it covers.
HTML Describes the Structure of Pages
- browser window view web page that features exactly the same content as the newspaper.
- To describe the structure of a web page, we add code to the words we want to appear on the page, for example check this link HTML code.
HTML
- HTML stands for HyperText Markup Language.
- HyperText refers to the fact that HTML allows you to create links that allow visitors to move from one page to another.
- markup language allows you to annotate text, annotations provide additional meaning to the contents of a document.
- html file extention is .html or .htm
Understand html elements
- Tags act like containers, each tag tell information about what is inside tag.
- Each tags have opening and closing tag, some of them self-closed tags.
<html> this tag tell browser everything inside is html code </html>.<head> contain information about the page and will be hidden to the user </head>.<body>contain html code will appear to user</body>.<h1>browser will understand this is header</h1>.<p>this is paragraph</p>.
Attributes Tell Us More About Elements
- Attributes provide additional information about the contents of an element.
- They appear insde the opening tag of the element.
- Attributes made up of two parts: a name and a value, separated by an equals sign.
<p lang="en-us">Paragraph in English</p>tell us this paragraph writting in english.- in general usually attributes used for specefic tags and few attributes are general like lang attribute.
HTML 5 Layout
- HTML5 is introducing a new set of elements that help define the structure of a page.
- they offer helpful alternatives to the
<div>and<span>elements.- Example of div layout and HTML 5 ELements layout
- developers used to add each section in div and give it ID selector to indicate what is this container all about.
SEMANTIC HTML5 ELEMENTS
- HTML5 introduces a new set of elements that allow you to divide up the parts of a page.
- Semantic HTML introduces meaning to a page through specific elements that provide context as to what is in between the tags.
- Semantic HTML is a modern standard and makes a website accessible for people who use screen readers to translate the webpage and improves your website’s SEO.
*
<header>, <nav> , <main>, <footer>create the basic structure of the webpage. - <
section>defines elements in a document, such as chapters, headings, or any other area of the document with the same theme. <article>holds content that makes sense on its own such as articles, blogs, comments, etc.<aside>contains information that is related to the main content, but not required in order to understand the dominant information.<figure>encapsulates all types of media.<figcaption>is used to describe the media in<figure>.<video>, <embed>, and <audio>elements are used for media files.
