1 / 47

Web Design Introduction

Web Design Introduction. Intro to Digital Technology. The Web Environment. Internet vs WWW. Is there a difference between the Internet and the World Wide Web? YES. What is the Internet?.

baakir
Download Presentation

Web Design Introduction

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design Introduction Intro to Digital Technology

  2. The Web Environment

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

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

  5. 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.

  6. How Access? • Internet • Internet Service Provider (ISP) • World Wide Web • 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

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

  8. CAREERS

  9. 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

  10. 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, 2D and 3D models • Knowledge of hardware and software, art theory, and graphic design principles

  11. 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

  12. 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

  13. Web Publishing Fundamentals

  14. Design Principles • Balance & Proximity • Contrast & Focus • Unity & Visual Identity

  15. Balance & Proximity • Harmonious arrangement of elements • Placement of elements that are related • Symmetric - http://www.artic.edu/ • Asymmetrically - http://kids.discovery.com/ • White space – empty space surround graphics

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

  17. 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/

  18. Web site Development Process

  19. 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

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

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

  22. 3. Determine Site’s Content • Home page • Underlying pages • Splash pages • Value added content – text, images, audio, video, animation • Activity – Exploring Web Page Animation & Multimedia (p86)

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

  24. 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

  25. 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

  26. 6. Specify Navigation System • Should be easy for visitors to understand and 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

  27. Typography and images

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

  29. Font Selection • 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 (p136)

  30. Images • Add value to site • Want them to match or complement color scheme • Contribute to overall mood of site and support site’s message • Activity – Exploring the Effective Use of Web Page Images (p138)

  31. Image Formats • Bitmaps • JPEG • GIF • PNG

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

  33. 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

  34. 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

  35. 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

  36. Multimedia & interactivity elements

  37. Multimedia • Some combination of text, images, animation, audio and video • Drawbacks – download time, need for browser plug-ins, uses large amt of bandwidth, may not be accessible to visitors with hearing or visual impairments

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

  39. 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

  40. Adobe Flash • Visitors must have the Flash media player plug-in • Frame-by-frame animation

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

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

  43. 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

  44. Downloadable Media Advantages 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 • Once downloaded can be accessed over and over • Utilizes HTTP protocol to transfer data – does not require a specific media server

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

  46. 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

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

More Related