2440: 140 Internet Tools

1. 2440: 140 Internet Tools Planning & Designing a Web Site

2. Phases of Web Site Development Project • The phases of a successful Web site development project includes: • Planning the site • Setting up the basic structure • Creating the pages • Testing the pages • Modifying the pages • Publishing the site Planning & Designing a Web Site

3. Phases of Web Site Development Project… Planning & Designing a Web Site

4. Phases of Web Site Development Project… Planning & Designing a Web Site

5. Planning the site • The most important part of a successful website • Steps include: • Determining the site goals • Identifying the target audience • Conducting market research • Gathering content • Budget • Schedule • Creating end-user scenarios • Updates Planning & Designing a Web Site

6. Setting Up the Basic Structure • Creating a storyboard or a flowchart to represent the pages in a Web site and the relationships of the pages • Steps include: • Creating categories of information • Creating a flowchart (storyboard) • Gathering and organizing information Planning & Designing a Web Site

7. Example of a Storyboard Planning & Designing a Web Site

8. Creating the Pages • Steps include: • Creating a site concept • Site concept – general theme that unifies the various elements of a site and contributes to the site’s look and feel • Considering accessibility issues • Accessibility – the quality and ease of use of a Web site • Selecting colors • Selecting fonts • Choosing graphics and graphic styles • Sketching the layout • Checking the design for logic (easy navigation) Planning & Designing a Web Site

9. Selecting Colors • There are two major systems of color: • Subtractive color system – uses cyan, magenta, and yellow as its primary colors • Other colors are created by mixing these primary colors • Additive color system (RGB system) – uses red, green, and blue as its primary colors • Other colors are created by combining these primary colors Planning & Designing a Web Site

10. Magenta Red Blue Yellow Cyan White RGB Color System Green Planning & Designing a Web Site

11. Selecting Colors… • Keep in mind the following basic color concepts and strategies: • Keep it simple – less is better • Include three to six colors per site – use these same colors for all the site’s elements • E.g. text, background, links, logo, buttons, navigation bar, and graphics • Consider the mood to create – colors create a mood • Colors have a psychological effect on people • E.g. blue for calming, red for hot or intense, etc • Keep the target audience in mind – different cultures do not always have the same psychological associations with colors Planning & Designing a Web Site

12. Selecting Fonts • There are three categories of typefaces (generic font families) • Serif – a delicate line (called a serif) finishes off the main strokes of each character • E.g. Times New Roman • Sans-serif – the delicate lines are absent • E.g. Courier, Arial, Helvetica • Monospace – each letter takes exactly the same width in the line • Monospaced fonts are serif fonts • E.g. Courier • Proportional - fonts that are not monospaced • Each letter takes up a different width on the line proportional to the width of the letter Planning & Designing a Web Site

13. Selecting Fonts… • Selecting fonts also involve choosing a font color, font size, and sometimes a font style • Font color – color applied to the font • Font size – size of the font • The two types of font sizes are: relative and specific sizes • Relative font sizes – range from xx small to xx large • Specific font sizes – fixed sizes using pixels, etc • Font style – stylistic attributes applied to the font • E.g. bold, italic, underline Planning & Designing a Web Site

14. Selecting Fonts… • Keep in mind the following strategies when selecting fonts: • Less is more – use no more than two fonts in a Web site • Convert headings to images – some fonts may not be found on every computer • Consider what you are trying to convey – choose fonts that support the concept for the site • Fonts create an impression about the site • E.g. horror movies sometimes use gothic fonts • Consider accessibility – visually impaired users of the Web site may have a hard time reading certain fonts Planning & Designing a Web Site

15. Choosing a Graphic Style and Graphics • Some strategies for choosing graphic styles include the following: • Be consistent – consistency in choosing graphics gives your site a cohesive look • Design with purpose – find a reason for adding each graphic to the site • Consider size – reduce all graphics to the smallest possible file sizes without sacrificing the quality of the image • Consider the target audience – choose graphics that will not keep users from enjoying the site by making the pages load too slowly • Support your concept and metaphor – visual symbols are very powerful tools for conveying information Planning & Designing a Web Site

16. Sketching the Layout • Layout – the position of elements on the screen • The layout must support the site goals • It should be easy for users to follow and appeal to the target audience • The main Webpage must be as compact as possible and most appealing to the target audience Planning & Designing a Web Site

17. Testing the Pages • Browsers and browser versions • Screen sizes • Speed on different connections • Testing is a continuous process Planning & Designing a Web Site

18. Modifying the Pages • Changes are constantly needed • Test page after each change • Modifying and testing is an ongoing process Planning & Designing a Web Site

19. Publishing the Site • Transfer all the files to a Web server • Web server: a computer that is connected to the Internet with an IP address • A Web site must be published to the Web server before it can be viewed by others • IP: Internet Protocol • IP address • Example: 207.456.123.2 • ISP: Internet Service Provider • Hosts Web site • FTP: File Transfer Protocol • Host, host directory, login, password Planning & Designing a Web Site