Web Design Introduction DIGITAL DESIGN The Web Environment

Web Design Introduction DIGITAL DESIGN

The Web Environment

Internet vs WWW Is there a difference between the Internet and the World Wide Web? YES

What is the Internet? Worldwide collection of computer networks that links millions of computers used by businesses, the government, educational institutions, organizations, and individuals

What is the World Wide Web? Collection of linked documents Linked documents or pages of information are known as Web pages Web site is a collection of Web pages Maintained by a business, institution, organization, etc.

Internet Access Internet Service Provider (ISP) World Wide Web browser – program that interprets and displays Web pages, enables the viewer to see and interact with a Web page. URL – uniform resource locator Address of a document or file on the Web

Web Design Tools Markup Languages Cascading Style Sheets Standardize the appearance of Web page content Text and HTML Editors HTML, DHTML XHTML Notepad or Wordpad WYSIWIG Editors What you see is what you get Dreamweaver, Microsoft Expression

Web Publishing Fundamentals

Design Principles Balance & Proximity Contrast & Focus Unity & Visual Identity

Balance & Proximity Harmonious arrangement of elements Placement of elements that have a relationship close to each other Symmetric - http: //www. artic. edu/ Asymmetrically - http: //kids. discovery. com/ White space – empty space surround graphics

Contrast & Focus Mix of elements to grab your visitor’s attention Create by using text styles, color choices, element size, etc. Focal point – dominating segment of page to which attention is drawn University of Chicago

Unity & Visual Identity Create a sense of belonging to maintain site’s visual identity Combination of design elements identified with the site and its publisher Examples – colors used, logo, placement of elements Arby's - http: //www. arbys. com/

Web site Development Process

Planning Process Six steps Define the site’s purpose Identify the site’s target audience Determine the site’s general content Select the site’s structure Design the look and feel of the site Specify the site’s navigation system

1. Define Purpose Goals Objectives Results you want your Web site to accomplish How you will accomplish the goals Purpose Statement – summarizes your site’s goals and objectives

2. Identify Target Audience Visitors to which your site is targeted – who do you want to view your site

3. Determine Site’s Content Home page – answer who, what, where Underlying pages Splash pages Value added content – text, images, audio, video, animation Activity – Exploring Web Page Animation & Multimedia (p 86)

4. Select Site’s Structure Arrangement of the home page to the site’s other pages To do this use Text outline Storyboard Flowchart

Types of Structures Linear/tutorial Pages organized and presented in a specific order Example – a how to web site (steps performed in a sequence) Random or webbed No specific order Hierarchical Organized into categories & subcategories Example – a KSU Web site

5. Design Look & Feel of Site Visual Consistency – repeat design features Helps to strengthen site’s visual identity and brand Color & Visual Contrast Consistent use of same colors Choose background & text colors to provide contrast and enhance readability Page Layout – standardized arrangement of content elements creates a sense of balance and order

6. Specify Navigation System Should be easy for visitors to understand follow Consists of Different types of links – text, image, related links presented as menus, bars, site maps, search bar, frames, etc. Should be user based and user controlled

Typography and images

Typography Font Sizes & Styles • Serif – • Sans Serif – • Replicates handwriting Fantasy – • No feet, Arial Cursive – • Feet, Times New Roman Use for decoration Monospace – equal spacing between characters

Font Selection – choose based on Readability TNR, 16 pixels is default for both IE and Firefox Availability Mood Fonts can set a mood or specific state of mind Key – you want to promote not detract from site’s message • Activity – Exploring Fonts (p 136)

Images Add value to site Want them to match or complement color scheme Accurately represent content if they are linked Contribute to overall mood of site and support site’s message Activity – Exploring the Effective Use of Web Page Images (p 138)

Image Formats Bitmaps JPEG GIF PNG

Bitmaps Created pixel by pixel Can be edited in software such as Paint Resolution dependent –cannot resize without losing some image quality

JPEG Joint Photographic Experts Group – group that published image compression format standard Used for digital photos, photo-like paintings, watercolors, and illustrations more than 256 colors Less loss quality when compressed

GIF Graphics Interchange Format Original image format used on the Web Maximum of 256 colors Suitable for basic solid color images - cartoons, diagrams and navigation buttons

PNG Portable Network Graphics Developed as a free open source image format to replace GIF format Greater range of colors (16 million) Not widely used due to lack of browser support

Multimedia & interactivity elements

Multimedia Some combination of text, images, animation, audio and video Goal is to produce stimulating, engaging Web pages Drawbacks – download time, need for browser plugins, uses large amt of bandwidth, may not be accessible to visitors with hearing or visual impairments

Animation Used to catch visitor’s attention, demonstrate a process or illustrate a change over time Forms – animated GIFs, Flash movies, avatars, gadgets

Animated GIFs Frames (images) are shown in a sequence Usually states as frames-per-second or fps Gives the illusion of movement or animation Many available on the Internet Gif Animations Do a search – keywords: animated GIFS

Adobe Flash Visitors must have the Flash media player plug-in Frame-by-frame animation Designer changes image manually Animation with tweening Designer identifies original and final appearance and/or location of image Software automatically creates frames with image changes

Avatars Alternative personas or virtual identities Used for gaming or 3 D virtual worlds Virtual models used by some retailers

Gadgets or Widgets Small code objects Provide dynamic Web content – clocks, weather reports, breaking news headlines, etc. Google Gadgets

Audio & Video Elements Downloadable or streaming Downloadable – media must be downloaded in its entirety before it can be played on your computer Streaming – media begins to play as soon as the data starts to stream or transfer from server to browser

Downloadable Media Advantages Once downloaded can be accessed over and over Utilizes HTTP protocol to transfer data – does not require a specific media server Disadvantages Can take a long time to download – dependent on speed of connection and size of file Usually large file – uses considerable storage space on your computer

Streaming Media Advantages Random access to data – you have control to choose file portion Consumes RAM only while being played Disadvantages High bandwidth requirements Frequently requires a specific media server to transfer data

Interactive Elements Web-based forms Javascript Scripting language used to create rollover buttons, banners, pop-up windows Applets – small program – execute within a browser Game simulations Does not require a plug-in

Interactive Elements Servlets Similar to an Applet Executes from a server versus from within the visitor’s browser Blogs Live Chat

CAREERS

Web Design Roles – Creative Focus on how site looks and feels Content writer/editor Create and revise text that visitors read Liberal arts background, print and Internet writing experience Web page designer Convert text, images, and links into Web pages Requires solid understanding of how web pages and browsers interact

Web Design Roles - Creative Web artist/graphic designer Create original art such as logos, stylized typefaces, avatars Experience with editing software such as Photoshop, scanners, and digital cameras Multimedia producer Design and produce animation, digital video and audio, 2 D and 3 D models Knowledge of hardware and software, art theory, and graphic design principles

Web Design Roles – High Tech Focus on Web site’s functionality and security Web programmer Knowledge of scripting languages (Java) Database developer Plan, create, and maintain databases Network/security administrator Ensure functionality of network and protect it from internal/external threats

Web Design Roles Oversight Focus on managerial and administrative issues Content managers Determine overall content of site, accuracy, timeliness of material Webmaster Can vary from company to company May assume all responsibility or roles (wears all the hats) or May assume responsibility for a specific role – i. e. creative or security