+ Chapter 2 Web Site Design Principles
+ Objectives Web design Enviroment Design for the computer medium Create a unified site design Design for the user Design for accessibility Design for the screen 2-2
+ Web Design Environment 2-3
+ Web Design Environment - browser Browser Compatibility issue – ต่าง browser สามารถแสดงผลออกมาต่างกัน follow W3C standards – HTML CSS ต้อง ใช้ให้ถูกต้องตามมาตรฐานที่กำหนดไว้ validate your code - ตรวจสอบความถูก ต้องและข้อผิดพลาดของโค้ด Know your audience – กลุ่มเป้าหมายหลัก ส่วนใหญ่นิยมใช้ browser ชนิดใด Test your work in multiple browser and device - ทดลองใช้ browser หลายๆชนิดใน การแสดงผล 2-4
2-5
2-6
+ Web Design Environment - medium Device and Operating System issue Monitor and display software - สี รูป screen resolution size video แสดงผล บนอุปกรณ์ต่างชนิด ต่างระบบ Browser version – browser ชนิด เดียวกัน แต่ต่างระบบก็อาจมีคุณสมบัติ ต่างกัน เช่น IE ออกแบบให้ใช้ใน window ขณะที่ apple safari ออกแบบ browser ที่ ใช้ได้ทั้ง window และ apple Font choice - ใช้ตัวอักษรที่ออกแบบบน เว็บที่มีใช่้ทั่วไป 2-7
+ Web Design Environment - speed Connection Speed Difference ความเร็วของการเชื่อมต่อ internet มีผล ต่อการออกแบบเว็บไซต์ worldwide audience – some countries may still use low speed internet – ( 02) 02 If your pages download slowly because they contain large, detailed graphics or complicated animations, your users will leave before they ever see your content 2-8
+ Craft the Look and Feel The interface that the user must navigate is called the look and feel of a Web site – look and feel ให้ผู้ใช้สัมผัสถึงการทำงานต่างๆบน เว็บไซต์ การหาตำแหน่งข้อมูล ลิงค์ และลักษณะ ต่างๆที่ให้ผู้ใช้ทราบการทำงานของเว็บไซต์ Users look and feel when they explore the information design of your site - ออกแบบให้ เรียบง่ายในการนำเสนอข้อมูล หลีกเลี่ยงความ ยุ่งยากหรือใช้รูป graphic ที่เยอะเกินไป Plan for a deliberate look and feel – clear presentation of information 2-9
+ Plan for Easy Access to Information Your information design is the single most important factor in determining the success of your site The goal is to organize your content and present it as a meaningful, navigable set of information Your navigation options should present a variety of choices to users without detracting from their quests for information Design your information so it is easier to read Break text into reasonable segments that make for easier on-screen reading 2-10
2-11
+ Create a Unified Site Design 2-12
+ Create a Unified Site Design Plan the unifying themes and structures Create smooth transitions Use a grid to provide visual structure Use active white space 2-13
2-14
2-15
+ Plan Smooth Transitions Plan to create a unified look Reinforce the identifying elements Avoid random, jarring changes in format ออกแบบให้มีความสอดคล้องกัน และสัมพันธ์กัน ในระหว่างเปลี่ยนหน้าเพจ 2-16
2-17
2-18
2-19
+ Use a Grid to Provide Visual Structure The grid is a conceptual layout device that organizes content into columns and rows A grid provides visual consistency HTML authors use the table elements to build the grid for their pages CSS will eventually replace tables for layout ใช้คอลัมในการจัดรูปแบบเว็บไซต์ 2-20
2-21
2-22
2-23
+ Use Active White Space Use white space deliberately in your design Good use of white space guides the reader and defines the areas of your page Active white space is an integral part of your design that structures and separates content 2-24
2-25
2-26
+ Design for the User 2-27
+ Design for the User Keep your design efforts centered solely around your user Design for interaction Design for location Guide the user’s eye Decide whether the user will read or scan 2-28
2-29
2-30
2-31
+ Design for Interaction Think about how the user wants to interact with your information Design for your content type Decide whether the user is likely to read or scan your pages 2-32
2-33
2-34
+ Design for Location Rank the information you want to display Assign location based on the relative areas of screen importance 2-35
2-36
2-37
+ Guide the User’s Eye Plan the design to guide the user’s eye Focus the user’s attention by object placement, text weight, and color use 2-38
2-39
2-40
2-41
2-42
+ Keep a Flat Hierarchy Provide plenty of linking options Provide location information Use plenty of textual links Don’t overload the user with too much content Design for accessibility 2-43
2-44
+ Use the Power of Hypertext Linking Add clickable text and images where necessary to guide users through your information Provide plenty of links to let the user get around quickly 2-45
2-46
2-47
Principles of Web Design, 4th Edition 2-48
+ How Much Content is Enough? Be conscious of the cognitive load of the user Separate content into smaller portions Use hypertext linking to divide content between pages 2-49
2-50
+ Design for Accessibility 2-51
+ Design for Accessibility Develop Web pages that remain accessible despite any physical, sensory, and cognitive disabilities Developing accessible content naturally leads to creating good design Follow W3 Accessibility Initiative guidelines at
+ WCAG Guidelines Perceivable — Information and user interface components must be perceivable by users Operable — User interface components must be operable by users Understandable — Information about the user interface and its operation must be understandable by users Robust — Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies 2-53
2-54
+ Design for the Screen 2-55
+ Design for the Screen The computer display is very different from print-based media The display is landscape-oriented Colors and contrasts are different Computer displays are low-resolution devices Reformat paper documents for online display 2-56
2-57
+ Reformat Content for Online Presentation It is a poor choice to take documents that are formatted for print and post them online A document that is perfectly legible on paper is hard to negotiate online 2-58
2-59
2-60
+ WORKSHOP chap2 เลือกเว็บไซต์ 3 เว็บไซต์ ศึกษา รูปแบบการใช้ Grid System ของแต่ละ เว็บ โดย screen capture หน้า เว็บไซต์และใช้ photoshop ในการ กำหนด grid จากเว็บไซต์ที่เลือกจงระบุมีการใช้ หลักการใดบ้างในการสร้างเว็บไซต์ 2-61