SlideShare ist ein Scribd-Unternehmen logo
1 von 10
After discussing what we’ll be talking about today, on 2 screens, show examples of
both good design and bad design.
Bad design=show webpagesthatsuck.com,
http://www.webpagesthatsuck.com/wpts1/, http://www.ty.com,
http://www.cuttingedgebankcard.com/, http://www.daltonmailingservice.com/
Good design = show coolhomepages.com, kinkos, gap, disney,
https://itss.stanford.edu/organization/clientsupport/dtl/training/who.html
http://coursework.stanford.edu
Biggest mistake in web design is to build a site for the designer, not the user.
Users expect sites to be flawless.
Looks matter. Site should be pleasing to the eye. Site should evoke trust and value.
Biggest mistake in web design is to build a site for the designer, not the user.
Users expect sites to be flawless.
Looks matter. Site should be pleasing to the eye. Site should evoke trust and value.
Start by looking at the big picture, then work down to the specifics.
1) define the problem/goal for the site
2) analyze the requirements
3) design a prototype; implement and test the site
4) show to clients; get feedback
5) develop new prototype
6) release and maintain the site
Forces developers to plan everything up front
Site plan:
1) Goal statement
2) Audience assessment
3) Content requirements
4) Technical requirements
5) Visual requirements
6) Delivery requirements
7) Site structure diagram
8) Staffing requirements
Make sketches on paper or screen to begin with
- allows for creativity without limitations of HTML
- think about how it’ll look in a web browser
Create template web pages instead of real content during design phase
- reduce mockup time
- easier to make changes quickly
Remember, most users will not have really fast machines with lots of memory and
disk space. Most users will not have as good a machine as a developer! Don’t
develop web pages for you – develop them for your users!
Upwards of 20% of all men are color blind. Always use something other than color
to distinguish elements on a web page.
activities and resources located in physical spaces are now becoming more online.
accessible webpages are more compatible with emerging technologies (PDAs, etc.)
physically accessible - user can get info
functionally accessible - user can make use of the info for intended purpose
good design: coursework.stanford.edu
use opera to show various views (emulate text browser)
Best practices:
1) navigation is clear and consistent
2) clean visual layout & use of white space
3) CSS for visual formatting
4) Alt attributes for images
5) Header tags in their proper hierarchy (not for visual formatting)
6) flexible screen & font sizes
7) descriptive link text (not click here)
8) structural, not visual markup (strong not bold; em not i)
9) summary sentence at the top of each page
10) "skip to" links to main navigation and page content
11) PDFs - provide alternate formats

Weitere ähnliche Inhalte

Was ist angesagt?

Admshs emp tech_q1_m1_l1-ict
Admshs emp tech_q1_m1_l1-ictAdmshs emp tech_q1_m1_l1-ict
Admshs emp tech_q1_m1_l1-ictDexter Dizon
 
LESSON 1, 2 & 3-ETECH 1S
LESSON 1, 2 & 3-ETECH 1SLESSON 1, 2 & 3-ETECH 1S
LESSON 1, 2 & 3-ETECH 1SJuvywen
 
Lesson 1 2 Edited
Lesson 1 2 EditedLesson 1 2 Edited
Lesson 1 2 EditedJuvywen
 
Empowerment Technologies
Empowerment TechnologiesEmpowerment Technologies
Empowerment TechnologiesMichelle Faina
 
Empowerment Technologies - Module 1
Empowerment Technologies - Module 1Empowerment Technologies - Module 1
Empowerment Technologies - Module 1Jesus Rances
 
Empowerment technologies
Empowerment technologiesEmpowerment technologies
Empowerment technologiesRufa Laguit
 
Em tech reader-v6-111816
Em tech reader-v6-111816Em tech reader-v6-111816
Em tech reader-v6-111816Live Angga
 
Empowerment technologies
Empowerment technologiesEmpowerment technologies
Empowerment technologiesDeped
 
Lesson 2 Online Safety, Security, Ethics and Etiquette
Lesson 2   Online Safety, Security, Ethics and EtiquetteLesson 2   Online Safety, Security, Ethics and Etiquette
Lesson 2 Online Safety, Security, Ethics and EtiquetteLea Rodriguez
 
Difference between web 1.0 and 2.0
Difference between web 1.0 and 2.0Difference between web 1.0 and 2.0
Difference between web 1.0 and 2.0mseabarbosa
 
Social Media - Empowerment Tech: ICT for Professional Tracks
Social Media - Empowerment Tech: ICT for Professional TracksSocial Media - Empowerment Tech: ICT for Professional Tracks
Social Media - Empowerment Tech: ICT for Professional Tracksglairerabida
 
Introduction to ICT (Web 1.0 and Web 2.0)
Introduction to ICT (Web 1.0 and Web 2.0)Introduction to ICT (Web 1.0 and Web 2.0)
Introduction to ICT (Web 1.0 and Web 2.0)Leelet1121
 
Empowerment Technologies Lecture 12 (Philippines SHS)
Empowerment Technologies Lecture 12 (Philippines SHS)Empowerment Technologies Lecture 12 (Philippines SHS)
Empowerment Technologies Lecture 12 (Philippines SHS)John Bosco Javellana, MAEd.
 
empowerment technology speech "The Higher Technology for Human Being"
empowerment technology speech "The Higher Technology for Human Being"empowerment technology speech "The Higher Technology for Human Being"
empowerment technology speech "The Higher Technology for Human Being"Yokimura Dimaunahan
 
Empowerment Technology
Empowerment TechnologyEmpowerment Technology
Empowerment TechnologyReygie Fabro
 

Was ist angesagt? (20)

Admshs emp tech_q1_m1_l1-ict
Admshs emp tech_q1_m1_l1-ictAdmshs emp tech_q1_m1_l1-ict
Admshs emp tech_q1_m1_l1-ict
 
LESSON 1, 2 & 3-ETECH 1S
LESSON 1, 2 & 3-ETECH 1SLESSON 1, 2 & 3-ETECH 1S
LESSON 1, 2 & 3-ETECH 1S
 
Lesson 1 2 Edited
Lesson 1 2 EditedLesson 1 2 Edited
Lesson 1 2 Edited
 
Empowerment Technologies
Empowerment TechnologiesEmpowerment Technologies
Empowerment Technologies
 
Empowerment Technologies - Module 1
Empowerment Technologies - Module 1Empowerment Technologies - Module 1
Empowerment Technologies - Module 1
 
Empowerment technologies
Empowerment technologiesEmpowerment technologies
Empowerment technologies
 
Em tech reader-v6-111816
Em tech reader-v6-111816Em tech reader-v6-111816
Em tech reader-v6-111816
 
Empowerment Technology - Learning Content
Empowerment Technology -  Learning ContentEmpowerment Technology -  Learning Content
Empowerment Technology - Learning Content
 
Empowerment technologies
Empowerment technologiesEmpowerment technologies
Empowerment technologies
 
Lesson 2 Online Safety, Security, Ethics and Etiquette
Lesson 2   Online Safety, Security, Ethics and EtiquetteLesson 2   Online Safety, Security, Ethics and Etiquette
Lesson 2 Online Safety, Security, Ethics and Etiquette
 
Difference between web 1.0 and 2.0
Difference between web 1.0 and 2.0Difference between web 1.0 and 2.0
Difference between web 1.0 and 2.0
 
Social Media - Empowerment Tech: ICT for Professional Tracks
Social Media - Empowerment Tech: ICT for Professional TracksSocial Media - Empowerment Tech: ICT for Professional Tracks
Social Media - Empowerment Tech: ICT for Professional Tracks
 
Etech activity
Etech activityEtech activity
Etech activity
 
Ict day4 quiz
Ict day4 quizIct day4 quiz
Ict day4 quiz
 
Introduction to ICT (Web 1.0 and Web 2.0)
Introduction to ICT (Web 1.0 and Web 2.0)Introduction to ICT (Web 1.0 and Web 2.0)
Introduction to ICT (Web 1.0 and Web 2.0)
 
Mobile Media
Mobile MediaMobile Media
Mobile Media
 
Empowerment Technologies Lecture 12 (Philippines SHS)
Empowerment Technologies Lecture 12 (Philippines SHS)Empowerment Technologies Lecture 12 (Philippines SHS)
Empowerment Technologies Lecture 12 (Philippines SHS)
 
empowerment technology speech "The Higher Technology for Human Being"
empowerment technology speech "The Higher Technology for Human Being"empowerment technology speech "The Higher Technology for Human Being"
empowerment technology speech "The Higher Technology for Human Being"
 
Empowerment Technology
Empowerment TechnologyEmpowerment Technology
Empowerment Technology
 
Web 3.0 semantics
Web 3.0 semanticsWeb 3.0 semantics
Web 3.0 semantics
 

Andere mochten auch

An Overview Of Tweet Meme
An Overview Of Tweet MemeAn Overview Of Tweet Meme
An Overview Of Tweet Memegirlygeekdom
 
Resume Katie Jones
Resume Katie JonesResume Katie Jones
Resume Katie JonesKatie Jones
 
Letter to My Son O.D. Razile Pelicano Corpez
Letter to My Son O.D. Razile Pelicano CorpezLetter to My Son O.D. Razile Pelicano Corpez
Letter to My Son O.D. Razile Pelicano CorpezPerla Pelicano Corpez
 
Traduccion biología
Traduccion biologíaTraduccion biología
Traduccion biologíawendy mendoza
 
Design Portfolio - Comm 125
Design Portfolio - Comm 125Design Portfolio - Comm 125
Design Portfolio - Comm 125Kaia Joos
 
SEO WORKSHOP for Agile Team at SingTel March 2015
SEO WORKSHOP for Agile Team at SingTel March 2015SEO WORKSHOP for Agile Team at SingTel March 2015
SEO WORKSHOP for Agile Team at SingTel March 2015Clare Hoang
 
Intro to Sketchup
Intro to SketchupIntro to Sketchup
Intro to SketchupLynn Langit
 
Troubleshoot beeping computers
Troubleshoot beeping computersTroubleshoot beeping computers
Troubleshoot beeping computersFrya Lora
 
COMPUTER ERROR BEEPS SOUND
COMPUTER ERROR BEEPS SOUNDCOMPUTER ERROR BEEPS SOUND
COMPUTER ERROR BEEPS SOUNDMan Mat
 
Lo1.2 types of computer system error
Lo1.2 types of computer system errorLo1.2 types of computer system error
Lo1.2 types of computer system errorFrya Lora
 
TLE-IA Consumer Electronics Servicing Curriculum Guide
TLE-IA Consumer Electronics Servicing Curriculum GuideTLE-IA Consumer Electronics Servicing Curriculum Guide
TLE-IA Consumer Electronics Servicing Curriculum GuideDr. Joy Kenneth Sala Biasong
 
Google SketchUp: A Crash Course
Google SketchUp: A Crash CourseGoogle SketchUp: A Crash Course
Google SketchUp: A Crash CourseMisterPeters
 

Andere mochten auch (20)

resume
resumeresume
resume
 
Final slide
Final slideFinal slide
Final slide
 
An Overview Of Tweet Meme
An Overview Of Tweet MemeAn Overview Of Tweet Meme
An Overview Of Tweet Meme
 
Feedback
FeedbackFeedback
Feedback
 
Resume Katie Jones
Resume Katie JonesResume Katie Jones
Resume Katie Jones
 
PLNU ACC
PLNU ACCPLNU ACC
PLNU ACC
 
Letter to My Son O.D. Razile Pelicano Corpez
Letter to My Son O.D. Razile Pelicano CorpezLetter to My Son O.D. Razile Pelicano Corpez
Letter to My Son O.D. Razile Pelicano Corpez
 
Traduccion biología
Traduccion biologíaTraduccion biología
Traduccion biología
 
Feedback
FeedbackFeedback
Feedback
 
Sketch up
Sketch upSketch up
Sketch up
 
Design Portfolio - Comm 125
Design Portfolio - Comm 125Design Portfolio - Comm 125
Design Portfolio - Comm 125
 
Ergonomics
ErgonomicsErgonomics
Ergonomics
 
SEO WORKSHOP for Agile Team at SingTel March 2015
SEO WORKSHOP for Agile Team at SingTel March 2015SEO WORKSHOP for Agile Team at SingTel March 2015
SEO WORKSHOP for Agile Team at SingTel March 2015
 
Intro to Sketchup
Intro to SketchupIntro to Sketchup
Intro to Sketchup
 
Troubleshoot beeping computers
Troubleshoot beeping computersTroubleshoot beeping computers
Troubleshoot beeping computers
 
COMPUTER ERROR BEEPS SOUND
COMPUTER ERROR BEEPS SOUNDCOMPUTER ERROR BEEPS SOUND
COMPUTER ERROR BEEPS SOUND
 
Lo1.2 types of computer system error
Lo1.2 types of computer system errorLo1.2 types of computer system error
Lo1.2 types of computer system error
 
Google Sketch Up Presentation
Google Sketch Up PresentationGoogle Sketch Up Presentation
Google Sketch Up Presentation
 
TLE-IA Consumer Electronics Servicing Curriculum Guide
TLE-IA Consumer Electronics Servicing Curriculum GuideTLE-IA Consumer Electronics Servicing Curriculum Guide
TLE-IA Consumer Electronics Servicing Curriculum Guide
 
Google SketchUp: A Crash Course
Google SketchUp: A Crash CourseGoogle SketchUp: A Crash Course
Google SketchUp: A Crash Course
 

Ähnlich wie Webdesign

1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docxjeremylockett77
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions
 
Webdesign website development_company_surat
Webdesign website development_company_suratWebdesign website development_company_surat
Webdesign website development_company_suratCss Founder
 
Top Three Modern Product Trends
Top Three Modern Product TrendsTop Three Modern Product Trends
Top Three Modern Product TrendsJeremy Johnson
 
Future Scope of Website Designing in India
Future Scope of Website Designing in IndiaFuture Scope of Website Designing in India
Future Scope of Website Designing in IndiaGagandeep Singh Rawat
 
Mobuz Solutions | Things to remember when designing your website
Mobuz Solutions | Things to remember when designing your websiteMobuz Solutions | Things to remember when designing your website
Mobuz Solutions | Things to remember when designing your websiteMobuz Solutions Pvt Ltd
 
Software and Website Development Company
Software and Website Development CompanySoftware and Website Development Company
Software and Website Development Companysamyakmahendra
 
The Professional Design Process
The Professional Design ProcessThe Professional Design Process
The Professional Design Processugencarelle
 
Leverage Your Online Web Presence
Leverage Your Online Web PresenceLeverage Your Online Web Presence
Leverage Your Online Web PresenceSusan Boone
 
Web Usability Page Design
Web Usability   Page DesignWeb Usability   Page Design
Web Usability Page DesignOvidiu Von M
 

Ähnlich wie Webdesign (20)

1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workflow
 
Webdesign website development_company_surat
Webdesign website development_company_suratWebdesign website development_company_surat
Webdesign website development_company_surat
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
IA workshop
IA workshopIA workshop
IA workshop
 
Top Three Modern Product Trends
Top Three Modern Product TrendsTop Three Modern Product Trends
Top Three Modern Product Trends
 
Webdesign
WebdesignWebdesign
Webdesign
 
Future Scope of Website Designing in India
Future Scope of Website Designing in IndiaFuture Scope of Website Designing in India
Future Scope of Website Designing in India
 
Mobuz Solutions | Things to remember when designing your website
Mobuz Solutions | Things to remember when designing your websiteMobuz Solutions | Things to remember when designing your website
Mobuz Solutions | Things to remember when designing your website
 
Webdesign
WebdesignWebdesign
Webdesign
 
Software and Website Development Company
Software and Website Development CompanySoftware and Website Development Company
Software and Website Development Company
 
The Professional Design Process
The Professional Design ProcessThe Professional Design Process
The Professional Design Process
 
Java Unit 5(part 1)
Java Unit 5(part 1)Java Unit 5(part 1)
Java Unit 5(part 1)
 
Leverage Your Online Web Presence
Leverage Your Online Web PresenceLeverage Your Online Web Presence
Leverage Your Online Web Presence
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Web Usability Page Design
Web Usability   Page DesignWeb Usability   Page Design
Web Usability Page Design
 

Mehr von Live Angga

Presentations second quarter 2 first draft
Presentations second quarter 2 first draftPresentations second quarter 2 first draft
Presentations second quarter 2 first draftLive Angga
 
Shs applied research 2 cg
Shs applied research 2 cgShs applied research 2 cg
Shs applied research 2 cgLive Angga
 
2. practical research ii nature of inquiry & research
2. practical research ii nature of inquiry & research2. practical research ii nature of inquiry & research
2. practical research ii nature of inquiry & researchLive Angga
 
Em tech tg-acad-v5-112316
Em tech tg-acad-v5-112316Em tech tg-acad-v5-112316
Em tech tg-acad-v5-112316Live Angga
 
Stem basic calculus cg 1
Stem basic calculus cg 1Stem basic calculus cg 1
Stem basic calculus cg 1Live Angga
 
August 8 reporting day1
August 8  reporting day1August 8  reporting day1
August 8 reporting day1Live Angga
 
August 3, 2016 et
August 3, 2016 etAugust 3, 2016 et
August 3, 2016 etLive Angga
 
Pledge of comitment
Pledge of comitmentPledge of comitment
Pledge of comitmentLive Angga
 
Online research and research skills
Online research and research skillsOnline research and research skills
Online research and research skillsLive Angga
 
Quadrilaterals
QuadrilateralsQuadrilaterals
QuadrilateralsLive Angga
 
Module 1( final 2) quadtraic equations and inequalities jq
Module 1( final 2) quadtraic equations and inequalities jqModule 1( final 2) quadtraic equations and inequalities jq
Module 1( final 2) quadtraic equations and inequalities jqLive Angga
 

Mehr von Live Angga (15)

Presentations second quarter 2 first draft
Presentations second quarter 2 first draftPresentations second quarter 2 first draft
Presentations second quarter 2 first draft
 
Shs applied research 2 cg
Shs applied research 2 cgShs applied research 2 cg
Shs applied research 2 cg
 
2. practical research ii nature of inquiry & research
2. practical research ii nature of inquiry & research2. practical research ii nature of inquiry & research
2. practical research ii nature of inquiry & research
 
Em tech tg-acad-v5-112316
Em tech tg-acad-v5-112316Em tech tg-acad-v5-112316
Em tech tg-acad-v5-112316
 
Stem basic calculus cg 1
Stem basic calculus cg 1Stem basic calculus cg 1
Stem basic calculus cg 1
 
August 8 reporting day1
August 8  reporting day1August 8  reporting day1
August 8 reporting day1
 
August 9 et
August 9  etAugust 9  et
August 9 et
 
August 3, 2016 et
August 3, 2016 etAugust 3, 2016 et
August 3, 2016 et
 
Pledge of comitment
Pledge of comitmentPledge of comitment
Pledge of comitment
 
Hyperlinking
HyperlinkingHyperlinking
Hyperlinking
 
Infographics
InfographicsInfographics
Infographics
 
Online research and research skills
Online research and research skillsOnline research and research skills
Online research and research skills
 
DRAMA
DRAMADRAMA
DRAMA
 
Quadrilaterals
QuadrilateralsQuadrilaterals
Quadrilaterals
 
Module 1( final 2) quadtraic equations and inequalities jq
Module 1( final 2) quadtraic equations and inequalities jqModule 1( final 2) quadtraic equations and inequalities jq
Module 1( final 2) quadtraic equations and inequalities jq
 

Kürzlich hochgeladen

IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...PsychoTech Services
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajanpragatimahajan3
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room servicediscovermytutordmt
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfchloefrazer622
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...Sapna Thakur
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpinRaunakKeshri1
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Krashi Coaching
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...fonyou31
 

Kürzlich hochgeladen (20)

IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room service
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
 

Webdesign

  • 1. After discussing what we’ll be talking about today, on 2 screens, show examples of both good design and bad design. Bad design=show webpagesthatsuck.com, http://www.webpagesthatsuck.com/wpts1/, http://www.ty.com, http://www.cuttingedgebankcard.com/, http://www.daltonmailingservice.com/ Good design = show coolhomepages.com, kinkos, gap, disney, https://itss.stanford.edu/organization/clientsupport/dtl/training/who.html http://coursework.stanford.edu
  • 2. Biggest mistake in web design is to build a site for the designer, not the user. Users expect sites to be flawless. Looks matter. Site should be pleasing to the eye. Site should evoke trust and value.
  • 3. Biggest mistake in web design is to build a site for the designer, not the user. Users expect sites to be flawless. Looks matter. Site should be pleasing to the eye. Site should evoke trust and value.
  • 4. Start by looking at the big picture, then work down to the specifics. 1) define the problem/goal for the site 2) analyze the requirements 3) design a prototype; implement and test the site 4) show to clients; get feedback 5) develop new prototype 6) release and maintain the site Forces developers to plan everything up front
  • 5. Site plan: 1) Goal statement 2) Audience assessment 3) Content requirements 4) Technical requirements 5) Visual requirements 6) Delivery requirements 7) Site structure diagram 8) Staffing requirements
  • 6. Make sketches on paper or screen to begin with - allows for creativity without limitations of HTML - think about how it’ll look in a web browser Create template web pages instead of real content during design phase - reduce mockup time - easier to make changes quickly
  • 7. Remember, most users will not have really fast machines with lots of memory and disk space. Most users will not have as good a machine as a developer! Don’t develop web pages for you – develop them for your users!
  • 8. Upwards of 20% of all men are color blind. Always use something other than color to distinguish elements on a web page.
  • 9. activities and resources located in physical spaces are now becoming more online. accessible webpages are more compatible with emerging technologies (PDAs, etc.) physically accessible - user can get info functionally accessible - user can make use of the info for intended purpose good design: coursework.stanford.edu use opera to show various views (emulate text browser)
  • 10. Best practices: 1) navigation is clear and consistent 2) clean visual layout & use of white space 3) CSS for visual formatting 4) Alt attributes for images 5) Header tags in their proper hierarchy (not for visual formatting) 6) flexible screen & font sizes 7) descriptive link text (not click here) 8) structural, not visual markup (strong not bold; em not i) 9) summary sentence at the top of each page 10) "skip to" links to main navigation and page content 11) PDFs - provide alternate formats