SlideShare a Scribd company logo
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

More Related Content

What's hot

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
Dexter Dizon
 
LESSON 1, 2 & 3-ETECH 1S
LESSON 1, 2 & 3-ETECH 1SLESSON 1, 2 & 3-ETECH 1S
LESSON 1, 2 & 3-ETECH 1S
Juvywen
 
Lesson 1 2 Edited
Lesson 1 2 EditedLesson 1 2 Edited
Lesson 1 2 Edited
Juvywen
 
Empowerment Technologies
Empowerment TechnologiesEmpowerment Technologies
Empowerment Technologies
Michelle Faina
 
Empowerment Technologies - Module 1
Empowerment Technologies - Module 1Empowerment Technologies - Module 1
Empowerment Technologies - Module 1
Jesus Rances
 
Empowerment technologies
Empowerment technologiesEmpowerment technologies
Empowerment technologies
Rufa Laguit
 
Em tech reader-v6-111816
Em tech reader-v6-111816Em tech reader-v6-111816
Em tech reader-v6-111816
Live Angga
 
Empowerment technologies
Empowerment technologiesEmpowerment technologies
Empowerment technologies
Deped
 
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
Lea 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 Tracks
glairerabida
 
Etech activity
Etech activityEtech activity
Etech activity
AppleCristobal1
 
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 Technology
Reygie Fabro
 
Web 3.0 semantics
Web 3.0 semanticsWeb 3.0 semantics
Web 3.0 semantics
Maricrs Alfarö
 

What's hot (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
 

Viewers also liked

Final slide
Final slideFinal slide
Final slide
Chad Gray
 
An Overview Of Tweet Meme
An Overview Of Tweet MemeAn Overview Of Tweet Meme
An Overview Of Tweet Meme
girlygeekdom
 
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 Corpez
Perla Pelicano Corpez
 
Traduccion biología
Traduccion biologíaTraduccion biología
Traduccion biología
wendy mendoza
 
Sketch up
Sketch upSketch up
Sketch up
Live Angga
 
Design Portfolio - Comm 125
Design Portfolio - Comm 125Design Portfolio - Comm 125
Design Portfolio - Comm 125
Kaia Joos
 
Ergonomics
ErgonomicsErgonomics
Ergonomics
Frya Lora
 
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 Sketchup
Lynn Langit
 
Troubleshoot beeping computers
Troubleshoot beeping computersTroubleshoot beeping computers
Troubleshoot beeping computers
Frya 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 error
Frya 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 Guide
Dr. Joy Kenneth Sala Biasong
 
Google SketchUp: A Crash Course
Google SketchUp: A Crash CourseGoogle SketchUp: A Crash Course
Google SketchUp: A Crash Course
MisterPeters
 

Viewers also liked (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
 

Similar to 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.docx
jeremylockett77
 
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
easelsolutions
 
Webdesign website development_company_surat
Webdesign website development_company_suratWebdesign website development_company_surat
Webdesign website development_company_surat
Css Founder
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
PragyaJaiswal25
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
Ernest Appiah
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
PonnathotaSujana
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
anil635053
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
SharaafNazeer
 
IA workshop
IA workshopIA workshop
IA workshop
Peter van Lanschot
 
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 India
Gagandeep 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 website
Mobuz Solutions Pvt Ltd
 
Webdesign
WebdesignWebdesign
Software and Website Development Company
Software and Website Development CompanySoftware and Website Development Company
Software and Website Development Company
samyakmahendra
 
The Professional Design Process
The Professional Design ProcessThe Professional Design Process
The Professional Design Process
ugencarelle
 
Java Unit 5(part 1)
Java Unit 5(part 1)Java Unit 5(part 1)
Java Unit 5(part 1)
SURBHI SAROHA
 
Leverage Your Online Web Presence
Leverage Your Online Web PresenceLeverage Your Online Web Presence
Leverage Your Online Web Presence
Susan Boone
 
Web Development
Web DevelopmentWeb Development
Web Development
WishaZehra1
 
Web Usability Page Design
Web Usability   Page DesignWeb Usability   Page Design
Web Usability Page Design
Ovidiu Von M
 

Similar to 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
 

More from Live Angga

Presentations second quarter 2 first draft
Presentations second quarter 2 first draftPresentations second quarter 2 first draft
Presentations second quarter 2 first draft
Live Angga
 
Shs applied research 2 cg
Shs applied research 2 cgShs applied research 2 cg
Shs applied research 2 cg
Live 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 & research
Live Angga
 
Em tech tg-acad-v5-112316
Em tech tg-acad-v5-112316Em tech tg-acad-v5-112316
Em tech tg-acad-v5-112316
Live Angga
 
Stem basic calculus cg 1
Stem basic calculus cg 1Stem basic calculus cg 1
Stem basic calculus cg 1
Live Angga
 
August 8 reporting day1
August 8  reporting day1August 8  reporting day1
August 8 reporting day1
Live Angga
 
August 9 et
August 9  etAugust 9  et
August 9 et
Live Angga
 
August 3, 2016 et
August 3, 2016 etAugust 3, 2016 et
August 3, 2016 et
Live Angga
 
Pledge of comitment
Pledge of comitmentPledge of comitment
Pledge of comitment
Live Angga
 
Hyperlinking
HyperlinkingHyperlinking
Hyperlinking
Live Angga
 
Infographics
InfographicsInfographics
Infographics
Live Angga
 
Online research and research skills
Online research and research skillsOnline research and research skills
Online research and research skills
Live Angga
 
Quadrilaterals
QuadrilateralsQuadrilaterals
Quadrilaterals
Live 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 jq
Live Angga
 

More from 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
 

Recently uploaded

BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
Nguyen Thanh Tu Collection
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
Tamralipta Mahavidyalaya
 
Synthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptxSynthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptx
Pavel ( NSTU)
 
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup   New Member Orientation and Q&A (May 2024).pdfWelcome to TechSoup   New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
TechSoup
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
camakaiclarkmusic
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
Jheel Barad
 
Chapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptxChapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptx
Mohd Adib Abd Muin, Senior Lecturer at Universiti Utara Malaysia
 
Overview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with MechanismOverview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with Mechanism
DeeptiGupta154
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
Jisc
 
Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
joachimlavalley1
 
How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17
Celine George
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
Atul Kumar Singh
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
TechSoup
 
678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf
CarlosHernanMontoyab2
 
Operation Blue Star - Saka Neela Tara
Operation Blue Star   -  Saka Neela TaraOperation Blue Star   -  Saka Neela Tara
Operation Blue Star - Saka Neela Tara
Balvir Singh
 
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdfAdversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Po-Chuan Chen
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
EverAndrsGuerraGuerr
 
special B.ed 2nd year old paper_20240531.pdf
special B.ed 2nd year old paper_20240531.pdfspecial B.ed 2nd year old paper_20240531.pdf
special B.ed 2nd year old paper_20240531.pdf
Special education needs
 
The geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideasThe geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideas
GeoBlogs
 
The Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official PublicationThe Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official Publication
Delapenabediema
 

Recently uploaded (20)

BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
 
Synthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptxSynthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptx
 
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup   New Member Orientation and Q&A (May 2024).pdfWelcome to TechSoup   New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
 
Chapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptxChapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptx
 
Overview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with MechanismOverview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with Mechanism
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
 
Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
 
How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
 
678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf
 
Operation Blue Star - Saka Neela Tara
Operation Blue Star   -  Saka Neela TaraOperation Blue Star   -  Saka Neela Tara
Operation Blue Star - Saka Neela Tara
 
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdfAdversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
 
special B.ed 2nd year old paper_20240531.pdf
special B.ed 2nd year old paper_20240531.pdfspecial B.ed 2nd year old paper_20240531.pdf
special B.ed 2nd year old paper_20240531.pdf
 
The geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideasThe geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideas
 
The Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official PublicationThe Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official Publication
 

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