mwe lecture2

2440: 212 Multimedia & Interactive Web Elements: 

2440: 212 Multimedia & Interactive Web Elements Planning & Designing a Web Site

Phases of Web Site Development Project: 

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

Phases of Web Site Development Project…: 

Phases of Web Site Development Project…

Phases of Web Site Development Project…: 

Phases of Web Site Development Project…

Planning the site: 

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

Setting Up the Basic Structure: 

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

Example of a Storyboard: 

Example of a Storyboard

Creating the Pages: 

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)

Selecting Colors: 

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

RGB Color System: 

RGB Color System Green

Selecting Colors…: 

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

Selecting Fonts: 

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

Selecting Fonts…: 

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

Selecting Fonts…: 

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

Choosing a Graphic Style and Graphics: 

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

Sketching the Layout: 

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

Testing the Pages: 

Testing the Pages Browsers and browser versions Screen sizes Speed on different connections Testing is a continuous process

Modifying the Pages: 

Modifying the Pages Changes are constantly needed Test page after each change Modifying and testing is an ongoing process

Publishing the Site: 

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