Submit Search
Upload
Felke-Morris_bowd5e_ppt_03_web_design_basics
•
Download as PPTX, PDF
•
0 likes
•
1 view
Y
YasharGhs
Follow
Basics of the web design chapter 3
Read less
Read more
Internet
Report
Share
Report
Share
1 of 42
Download now
Recommended
bgjgjgj
CCS PPT 10.pptx
CCS PPT 10.pptx
DrRavneetSingh
The good, the bad and the ugly. Not Kentucky or Louisville find similar for Kentucky and study for web design business: United States District Court Northern District Of Illinois (1) fees and related nontaxable expenses. (2) "Respondent" means a party from whom the movant seeks payment lawyer, paralegal, or other person. (4) The supreme movant shall provide the respondent with the above information within 21 days of the judgment or settlement agreement upon which the motion is based, unless the court sets a different schedule.(2) the total amount of fees and/or related nontaxable expenses that the respondent deems should be awarded (If the fees are contested, the respondent shall include a similar table giving district respondent’s position as to the name, compensable hours, appropriate rates, and totals for each biller listed by movant.);(A) whether the motion for ireland fees and expenses will be based on a judgment or on a settlement of the underlying merits dispute, and Chicago illinois (B) if the motion will be based on a judgment, whether respondent has appealed or intends to appeal that judgment. The parties shall cooperate to irish complete preparation of the joint statement no later than 70 days after the entry of the judgment or settlement agreement on which the motion for fees will be based, unless the court orders otherwise. (g) Motion for Instructions. A motion may be filed seeking director instructions from the court where it appears that the procedures set forth in this rule cannot be linkedin followed within the time limits established by the rule or by order of court because of— prohibition (2) the temporary failure of one or more of the parties to provide information required by the court rule, or northbrook (3) director motion shall state the court’s order.. "Pfingsten, das liebliche Fest", speaks of Pentecost as a time of greening and blooming in fields, woods, hills,
Principles of Web Design
Principles of Web Design
Charles Nyangiti
Etec 632 web design
Etec 632 web design
ahalemano
4087 chapter 08 8ed part2
4087 chapter 08 8ed part2
winegron
empowerment technologies online platfomrs
empowerment tech week 7 online platforms.pptx
empowerment tech week 7 online platforms.pptx
ninosulit
Fundamentals of Design. Improve the visual competency of any website or application by keeping design in mind. Learn the fundamental design principles of typography, color, and layout.
Fundamentals of Web Design | Chandan Chakraborty
Fundamentals of Web Design | Chandan Chakraborty
Chandan Chakraborty
-
-
niruttisai
Ppt ch02
Ppt ch02
1geassking
Recommended
bgjgjgj
CCS PPT 10.pptx
CCS PPT 10.pptx
DrRavneetSingh
The good, the bad and the ugly. Not Kentucky or Louisville find similar for Kentucky and study for web design business: United States District Court Northern District Of Illinois (1) fees and related nontaxable expenses. (2) "Respondent" means a party from whom the movant seeks payment lawyer, paralegal, or other person. (4) The supreme movant shall provide the respondent with the above information within 21 days of the judgment or settlement agreement upon which the motion is based, unless the court sets a different schedule.(2) the total amount of fees and/or related nontaxable expenses that the respondent deems should be awarded (If the fees are contested, the respondent shall include a similar table giving district respondent’s position as to the name, compensable hours, appropriate rates, and totals for each biller listed by movant.);(A) whether the motion for ireland fees and expenses will be based on a judgment or on a settlement of the underlying merits dispute, and Chicago illinois (B) if the motion will be based on a judgment, whether respondent has appealed or intends to appeal that judgment. The parties shall cooperate to irish complete preparation of the joint statement no later than 70 days after the entry of the judgment or settlement agreement on which the motion for fees will be based, unless the court orders otherwise. (g) Motion for Instructions. A motion may be filed seeking director instructions from the court where it appears that the procedures set forth in this rule cannot be linkedin followed within the time limits established by the rule or by order of court because of— prohibition (2) the temporary failure of one or more of the parties to provide information required by the court rule, or northbrook (3) director motion shall state the court’s order.. "Pfingsten, das liebliche Fest", speaks of Pentecost as a time of greening and blooming in fields, woods, hills,
Principles of Web Design
Principles of Web Design
Charles Nyangiti
Etec 632 web design
Etec 632 web design
ahalemano
4087 chapter 08 8ed part2
4087 chapter 08 8ed part2
winegron
empowerment technologies online platfomrs
empowerment tech week 7 online platforms.pptx
empowerment tech week 7 online platforms.pptx
ninosulit
Fundamentals of Design. Improve the visual competency of any website or application by keeping design in mind. Learn the fundamental design principles of typography, color, and layout.
Fundamentals of Web Design | Chandan Chakraborty
Fundamentals of Web Design | Chandan Chakraborty
Chandan Chakraborty
-
-
niruttisai
Ppt ch02
Ppt ch02
1geassking
Ppt ch02
Ppt ch02
1geassking
Ppt ch02
Ppt ch02
1geassking
Web Development
Web Development
Web Development
WishaZehra1
Webdesign
Webdesign
Webdesign
Dhamotharan Paramasivam
This presentation is about scope of future design in India and its implications for upcoming years
Future Scope of Website Designing in India
Future Scope of Website Designing in India
Gagandeep Singh Rawat
Mobuz Solutions provide the guidelines like things to remember when designing your website. These creative information helps you to design your website easily.
Mobuz Solutions | Things to remember when designing your website
Mobuz Solutions | Things to remember when designing your website
Mobuz Solutions Pvt Ltd
Webdesign http://mariastellasolon.com
Webdesign
Webdesign
Maria Stella Solon
Samyak IT Solutions is a leading Software and Website Development Company in Jaipur, which provide all type of IT Solutions including Software Testing
Software and Website Development Company
Software and Website Development Company
samyakmahendra
for ICT Content Development
ONLINE PLATFORMS AS TOOLS
ONLINE PLATFORMS AS TOOLS
LeahAmor1
what is web designing Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization. Web design is the art of planning and arranging content on a website so that it can be shared and accessed online with the world.
webdesign.ppt
webdesign.ppt
PragyaJaiswal25
introduction to Html
webdesign.ppt
webdesign.ppt
Ernest Appiah
Ppt on your work
webdesign.ppt
webdesign.ppt
anil635053
This is about web design and development
webdesign.ppt
webdesign.ppt
SharaafNazeer
About web design
webdesign.ppt
webdesign.ppt
PonnathotaSujana
Basic Web Design Principles and Elements
Basic Web Design Principles and Elements
Basic Web Design Principles and Elements
EromRamos
Good web design
Good web design
missstevenson01
Websites
Websites
Ramakrishna Kongalla
Part Two of Web Design Principles - Written by the faculty at Sharjah Women's College - Supported by previous faculty efforts
CIS1203 Web Design Principles - Part 2
CIS1203 Web Design Principles - Part 2
Ross University School of Medicine
Intro to web design for J105 at Drake University, Fall 2010.
J105 Web Design
J105 Web Design
Chris Snider
Make your website design beautiful
Web design
Web design
Kazi Nazmul
Talk presented at Kubernetes Community Day, New York, May 2024. Technical summary of Multi-Cluster Kubernetes Networking architectures with focus on 4 key topics. 1) Key patterns for Multi-cluster architectures 2) Architectural comparison of several OSS/ CNCF projects to address these patterns 3) Evolution trends for the APIs of these projects 4) Some design recommendations & guidelines for adopting/ deploying these solutions.
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Sanjeev Rampal
Bug Bounty Blueprint : A Beginner's Guide
Bug Bounty Blueprint : A Beginner's Guide
Bug Bounty Blueprint : A Beginner's Guide
Varun Mithran
More Related Content
Similar to Felke-Morris_bowd5e_ppt_03_web_design_basics
Ppt ch02
Ppt ch02
1geassking
Ppt ch02
Ppt ch02
1geassking
Web Development
Web Development
Web Development
WishaZehra1
Webdesign
Webdesign
Webdesign
Dhamotharan Paramasivam
This presentation is about scope of future design in India and its implications for upcoming years
Future Scope of Website Designing in India
Future Scope of Website Designing in India
Gagandeep Singh Rawat
Mobuz Solutions provide the guidelines like things to remember when designing your website. These creative information helps you to design your website easily.
Mobuz Solutions | Things to remember when designing your website
Mobuz Solutions | Things to remember when designing your website
Mobuz Solutions Pvt Ltd
Webdesign http://mariastellasolon.com
Webdesign
Webdesign
Maria Stella Solon
Samyak IT Solutions is a leading Software and Website Development Company in Jaipur, which provide all type of IT Solutions including Software Testing
Software and Website Development Company
Software and Website Development Company
samyakmahendra
for ICT Content Development
ONLINE PLATFORMS AS TOOLS
ONLINE PLATFORMS AS TOOLS
LeahAmor1
what is web designing Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization. Web design is the art of planning and arranging content on a website so that it can be shared and accessed online with the world.
webdesign.ppt
webdesign.ppt
PragyaJaiswal25
introduction to Html
webdesign.ppt
webdesign.ppt
Ernest Appiah
Ppt on your work
webdesign.ppt
webdesign.ppt
anil635053
This is about web design and development
webdesign.ppt
webdesign.ppt
SharaafNazeer
About web design
webdesign.ppt
webdesign.ppt
PonnathotaSujana
Basic Web Design Principles and Elements
Basic Web Design Principles and Elements
Basic Web Design Principles and Elements
EromRamos
Good web design
Good web design
missstevenson01
Websites
Websites
Ramakrishna Kongalla
Part Two of Web Design Principles - Written by the faculty at Sharjah Women's College - Supported by previous faculty efforts
CIS1203 Web Design Principles - Part 2
CIS1203 Web Design Principles - Part 2
Ross University School of Medicine
Intro to web design for J105 at Drake University, Fall 2010.
J105 Web Design
J105 Web Design
Chris Snider
Make your website design beautiful
Web design
Web design
Kazi Nazmul
Similar to Felke-Morris_bowd5e_ppt_03_web_design_basics
(20)
Ppt ch02
Ppt ch02
Ppt ch02
Ppt ch02
Web Development
Web Development
Webdesign
Webdesign
Future 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 website
Webdesign
Webdesign
Software and Website Development Company
Software and Website Development Company
ONLINE PLATFORMS AS TOOLS
ONLINE PLATFORMS AS TOOLS
webdesign.ppt
webdesign.ppt
webdesign.ppt
webdesign.ppt
webdesign.ppt
webdesign.ppt
webdesign.ppt
webdesign.ppt
webdesign.ppt
webdesign.ppt
Basic Web Design Principles and Elements
Basic Web Design Principles and Elements
Good web design
Good web design
Websites
Websites
CIS1203 Web Design Principles - Part 2
CIS1203 Web Design Principles - Part 2
J105 Web Design
J105 Web Design
Web design
Web design
Recently uploaded
Talk presented at Kubernetes Community Day, New York, May 2024. Technical summary of Multi-Cluster Kubernetes Networking architectures with focus on 4 key topics. 1) Key patterns for Multi-cluster architectures 2) Architectural comparison of several OSS/ CNCF projects to address these patterns 3) Evolution trends for the APIs of these projects 4) Some design recommendations & guidelines for adopting/ deploying these solutions.
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Sanjeev Rampal
Bug Bounty Blueprint : A Beginner's Guide
Bug Bounty Blueprint : A Beginner's Guide
Bug Bounty Blueprint : A Beginner's Guide
Varun Mithran
To proceed with the Linksys velop setup, access the velop account first, by using your admin credentials. After logging in, you reach the setup home dashboard. Here, visit the Basic or Advanced settings to configure the device accordingly. To know the configuration procedure in detail, do drop us a line! https://veloploginsystem.com/linksys-velop-setup/
How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?
Linksys Velop Login
excess use ]
Article writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptx
abhinandnam9997
In today's interconnected digital landscape, safeguarding your online assets has become paramount. With cyber threats evolving rapidly, businesses and individuals alike must adopt robust security measures to protect sensitive information and maintain trust with their stakeholders. This article delves into the realm of cyber security services, unveiling effective strategies to fortify your digital presence and mitigate risks effectively.
Cyber Security Services Unveiled: Strategies to Secure Your Digital Presence
Cyber Security Services Unveiled: Strategies to Secure Your Digital Presence
PC Doctors NET
l
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
lolsDocherty
Appinfoedge is a leading mobile app development agency in the USA, renowned for its expertise, innovation, and commitment to delivering top-notch mobile solutions tailored to your unique needs.
Premier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdf
appinfoedgeca
For the first time in Indonesia, Generative AI was employed and used at-scale in the Indonesia political sphere.
The Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case Study
Damar Juniarto
btfrb
Production 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptx
ChloeMeadows1
https://bit.ly/3KACoyV The ER diagram for the project is the foundation for the building of the database of the project. The properties, datatypes, and attributes are defined by the ER diagram.
ER(Entity Relationship) Diagram for online shopping - TAE
ER(Entity Relationship) Diagram for online shopping - TAE
Himani415946
This is Pvtaan Social Media Marketing Proposal. Download For free
Pvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdf
Pvtaan
Short lightning talk on measuring and comparing DNS latency.
Statistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdf
OndejSur
This presentation focuses on the merger of two telecommunication Companies in India. The Vodafone and Idea (an Indian Telecom company) decided to merge due to tough competition and continued decreasing market share in Indian Telecom sector.
Case study on merger of Vodafone and Idea (VI).pptx
Case study on merger of Vodafone and Idea (VI).pptx
Ankitscribd
UTS毕业证原版定制【微信:176555708】【悉尼科技大学毕业证成绩单-学位证】【微信:176555708】(留信学历认证永久存档查询)采用学校原版纸张、特殊工艺完全按照原版一比一制作(包括:隐形水印,阴影底纹,钢印LOGO烫金烫银,LOGO烫金烫银复合重叠,文字图案浮雕,激光镭射,紫外荧光,温感,复印防伪)行业标杆!精益求精,诚心合作,真诚制作!多年品质 ,按需精细制作,24小时接单,全套进口原装设备,十五年致力于帮助留学生解决难题,业务范围有加拿大、英国、澳洲、韩国、美国、新加坡,新西兰等学历材料,包您满意。 ◆◆◆◆◆ — — — — — — — — 【留学教育】留学归国服务中心 — — — — — -◆◆◆◆◆ 【主营项目】 一.毕业证【微信:176555708】成绩单、使馆认证、教育部认证、雅思托福成绩单、学生卡等! 二.真实使馆公证(即留学回国人员证明,不成功不收费) 三.真实教育部学历学位认证(教育部存档!教育部留服网站永久可查) 四.办理各国各大学文凭(一对一专业服务,可全程监控跟踪进度) 如果您处于以下几种情况: ◇在校期间,因各种原因未能顺利毕业……拿不到官方毕业证【微信:176555708】 ◇面对父母的压力,希望尽快拿到; ◇不清楚认证流程以及材料该如何准备; ◇回国时间很长,忘记办理; ◇回国马上就要找工作,办给用人单位看; ◇企事业单位必须要求办理的 ◇需要报考公务员、购买免税车、落转户口 ◇申请留学生创业基金 留信网认证的作用: 1:该专业认证可证明留学生真实身份 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内,将在公安局网内查询个人身份证信息后,同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分→ 【关于价格问题(保证一手价格) 我们所定的价格是非常合理的,而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子 我给客户的都是第一手的代理价格,因为我想坦诚对待大家 不想跟大家在价格方面浪费时间 对于老客户或者被老客户介绍过来的朋友,我们都会适当给一些优惠。 8:在国家人才网主办的国家网络招聘大会中纳入资料,供国家高端企业选择人才 选择实体注册公司办理,更放心,更安全!我们的承诺:可来公司面谈,可签订合同,会陪同客户一起到教育部认证窗口递交认证材料,客户在教育部官方认证查询网站查询到认证通过结果后付款,不成功不收费! 学历顾问:微信:176555708
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
aagad
Recently uploaded
(14)
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Bug Bounty Blueprint : A Beginner's Guide
Bug Bounty Blueprint : A Beginner's Guide
How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?
Article writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptx
Cyber Security Services Unveiled: Strategies to Secure Your Digital Presence
Cyber Security Services Unveiled: Strategies to Secure Your Digital Presence
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
Premier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdf
The Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case Study
Production 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptx
ER(Entity Relationship) Diagram for online shopping - TAE
ER(Entity Relationship) Diagram for online shopping - TAE
Pvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdf
Statistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdf
Case study on merger of Vodafone and Idea (VI).pptx
Case study on merger of Vodafone and Idea (VI).pptx
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
Felke-Morris_bowd5e_ppt_03_web_design_basics
1.
1 Basics of Web
Design Fifth Edition Chapter 3 Web Design Basics Key Concepts Copyright © 2019 Pearson Education, Inc. All Rights Reserved Slide in this Presentation Contain Hyperlinks. JAWS users should be able to get a list of links by using INSERT+F7
2.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 2 Learning Outcomes • Describe the most common types of website organization • Describe principles of visual design • Design for your target audience • Create clear, easy-to-use navigation • Improve the readability of the text on your web pages • Use graphics appropriately on web pages • Apply the concept of Universal Design to web pages • Describe web page layout design techniques • Describe the concept of responsive web design • Apply best practices of web design
3.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 3 Design for Your Target Audience Consider the target audience of these sites.
4.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 4 Web Page Design Browser Compatibility • Web pages do NOT look the same in all the major browsers • Test with current and recent versions of: – Microsoft Edge, Firefox, Chrome, Opera, Safari – Mobile devices • Progressive Enhancement: – Website functions well in browsers commonly used by your target audience – Add enhancements with CSS and/or HTML5 for display in modern browsers
5.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 5 Web Page Design Screen Resolution • Test at various screen resolutions • Design to look good at various screen resolutions – Centered page content – Set to either a fixed or percentage width
6.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 6 Website Organization • Hierarchical • Linear • Random (sometimes called Web Organization)
7.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 7 Hierarchical Organization • A clearly defined home page • Navigation links to major site sections • Often used for commercial and corporate websites
8.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 8 Hierarchical: Too Shallow • Be careful that the organization is not too shallow. • Too many immediate choices → a confusing and less usable website. • Group, or “chunk”, related areas
9.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 9 Hierarchical: Too Deep • Be careful that the organization is not too deep. – This results in many “clicks” needed to drill down to the needed page. – User Interface “Three Click Rule” A web page visitor should be able to get from any page on your site to any other page on your site with a maximum of three hyperlinks.
10.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 10 Linear Organization • A series of pages that provide a tutorial, tour, or presentation. • Sequential viewing
11.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 11 Random Organization • Sometimes called “Web” Organization • Usually there is no clear path through the site • May be used with artistic or concept sites • Not typically used for commercial sites
12.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 12 Visual Design Principles • Repetition – Repeat visual elements throughout design • Contrast – Add visual excitement and draw attention • Proximity – Group related items • Alignment – Align elements to create visual unity
13.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 13 Design to Provide for Accessibility “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-Lee • Who benefits from increased accessibility? – A person with a physical disability – A person using a slow Internet connection – A person using an old, out-dated computer – A person using a mobile phone • Legal Requirement: Section 508 • Standards: WCAG 2.0, WCAG 2.1
14.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 14 Design for Accessibility Web Content Accessibility Guidelines 2.0 (WCAG 2.0) http://www.w3.org/TR/WCAG20/Overview http://www.w3.org/WAI/WCAG20/quickref • Based on Four Principles (POUR) 1. Perceivable Content must be easy to see or hear 2. Operable Interface components in the content must be operable by both mouse and keyboard 3. Understandable Content and controls must be easy to read and well-organized 4. Robust. Content use correct syntax and function on popular operating systems, browsers, and assistive technologies.
15.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 15 Writing for the Web • Avoid long blocks of text • Use bullet points • Use headings and subheadings • Use short paragraphs
16.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 16 Design “Easy to Read” Text • Use common fonts: – Arial, Helvetica, Verdana, Times New Roman • Use appropriate text size: – medium, 1em, 100% • Use appropriate line length – Between 50-60 characters is recommended • Use strong contrast between text & background • Use columns instead of wide areas of horizontal text
17.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 17 More Text Design Considerations • Carefully choose text in hyperlinks – Avoid “click here” – Hyperlink key words or phrases – Do not hyperlink not entire sentences • Chek yur spellin (Check your spelling)
18.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 18 Using Color on Web Pages • Computer monitors display color as intensities of red, green, and blue light • RGB Color • The values of red, green, and blue vary from 0 to 255. • Hexadecimal numbers (base 16) represent these color values.
19.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 19 Hexadecimal Color Values • # indicates a hexadecimal value • Hex value pairs range from 00 to FF • Three hex value pairs describe an RGB color
20.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 20 Web Color Palette • A collection of 216 colors • Display the most similar on the Mac and PC platforms • Hex values: 00, 33, 66, 99, CC, FF • Color Chart : http://webdevbasics.net/color
21.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 21 Color Theory • Color Theory: – the study of color and its use in design • Color Wheel – Primary Colors – Secondary Colors – Tertiary Colors
22.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 22 Color Schemes Based on The Color Wheel (1 of 2) • Monochromatic – shades, tints, or tones of the same color http://meyerweb.com/eric/tools/color-blend • Analogous – a main color and two colors adjacent to it on the color wheel • Complementary – two colors that are opposite each other on the color wheel
23.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 23 Color Schemes Based on The Color Wheel (2 of 2) • Split Complementary – a main color, the color opposite it on the color wheel (the complement) and two colors adjacent to the complement • Triadic- three colors that are equidistant on the color wheel • Tetradic – two complementary color pairs
24.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 24 Implementing a Color Scheme • Choose one color to be dominant • Use other colors in the color scheme as accent colors – headings, – subheadings – borders, – list markers, etc. • Use neutrals such as white, off-white, gray, black, or brown • Do not restrict yourself to web-safe colors • Feel free to use tints, shades, or tones of colors
25.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 25 Verify Sufficient Contrast • When you choose colors for text and background, sufficient contrast is needed so that the text is easy to read. • Use one of the following online tools to verify contrast: – http://webaim.org/resources/contrastchecker – http://snook.ca/technical/colour_contrast/colour.html – http://juicystudio.com/services/luminositycontrastratio. php
26.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 26 Making Color Choices • How to choose a color scheme? • Monochromatic – http://meyerweb.com/eric/tools/color-blend – http://www.0to255.com • Choose from a photograph or other image – http://www.colr.org • Begin with a favorite color Use one of the sites below to choose other colors – http://paletton.com – http://www.colorsontheweb.com/Color-Tools/Color- Wizard
27.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 27 Use of Color Appealing to Kids & Preteens Appealing to Young Adults Appealing to Everyone Appealing to Older Adults
28.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 28 Use of Graphics & Multimedia • File size and dimension matter • Provide for robust navigation • Antialiased/aliased text considerations • Provide alternate text • Use only necessary multimedia
29.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 29 Flat Web Design Trend • Minimalistic design style • Features blocks of color • Often requires vertical scrolling
30.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 30 Navigation Design • Make your site easy to navigate – Provide clearly labeled navigation in the same location on each page – Most common – across top or down left side • Consider: – Navigation Bars – Breadcrumb Navigation – Using Graphics for Navigation – Dynamic Navigation – Site Map – Site Search Feature
31.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 31 Wireframe • A sketch or blueprint of a web page • Shows the structure of the basic page elements, including: – Logo – Navigation – Content – Footer
32.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 32 Web Page Design Page Layout (1 of 3) • Place the most important information "above the fold" • Use adequate "white" or blank space • Use an interesting page layout This is usable, but a little boring. See the next slide for improvements in page layout.
33.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 33 Web Page Design Page Layout (2 of 3) Better Columns make the page more interesting and it’s easier to read this way.
34.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 34 Web Page Design Page Layout (3 of 3) Best Columns of different widths interspersed with graphics and headings create the most interesting, easy to read page.
35.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 35 Page Layout Design Techniques (1 of 2) Fixed Layout • AKA rigid or “ice” design • Fixed-width often at left margin • More appealing if fixed with content is centered
36.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 36 Page Layout Design Techniques (2 of 2) Fluid Layout • AKA “liquid” design • Expands to fill the browser at all resolutions. • Adaptation: – Page content typically centered and often configured with a percentage width such as 80%
37.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 37 Design for the Mobile Web • PEW Research Center 77% of American adults own a smartphone http://www.pewinternet.org/fact- sheets/mobile-technology-fact-sheet • Coding techniques to configure responsive web page layouts that display differently on desktop browsers and mobile devices will be introduced in Chapter 8.
38.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 38 Mobile Design Quick Checklist • Small screen size • Bandwidth issues • Single-column layout • Maximize contrast • Optimize images for mobile display • Descriptive alternate text for images • Avoid display of non-essential content
39.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 39 Responsive Web Design • Ethan Marcotte, noted web developer http://alistapart.com/article/responsive-web-design • Progressively enhancing a web page for different viewing contexts (such as smartphones and tablets) through the use of coding techniques, including flexible layouts and media queries. • Examples: http://www.mediaqurie.es
40.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 40 Web Design Best Practices Checklist http://terrymorris.net/bestpractices • Page Layout • Browser Compatibility • Navigation • Color and Graphics • Multimedia • Content Presentation • Functionality • Accessibility
41.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 41 Summary • This chapter introduced you to best practices of web design. • The choices you make in the use of color, graphics, and text should be based on your particular target audience.
42.
Copyright © 2019
Pearson Education, Inc. All Rights Reserved 42 Copyright This work is protected by United States copyright laws and is provided solely for the use of instructors in teaching their courses and assessing student learning. Dissemination or sale of any part of this work (including on the World Wide Web) will destroy the integrity of the work and is not permitted. The work and materials from it should never be made available to students except by instructors using the accompanying text in their classes. All recipients of this work are expected to abide by these restrictions and to honor the intended pedagogical purposes and the needs of other instructors who rely on these materials.
Editor's Notes
If this PowerPoint presentation contains mathematical equations, you may need to check that your computer has the following installed: 1) Math Type Plugin 2) Math Player (free versions available) 3) NVDA Reader (free versions available)
Download now