SlideShare a Scribd company logo
Fonts, color, Web design
Some design concepts related
to the use of HTML and CSS
{CSS} background-color, color, a:link, a:hover, etc.

COLOR
Color
• Choose 2 to 5 key colors for your palette
• Specify colors for page background, wrapper
background, and main text
• Specify all pseudo classes
(a:link, a:visited, a:hover, a:active, a:focus)
– Look up a:focus if you don’t know about it

• Test all colors for text legibility with a
Photoshop graphic (is your text easy to read?)
This example shows
very minimal
specifications for color
in a CSS style sheet.
http://kuler.adobe.com/
http://kuler.adobe.com/

Always find and USE the hexadecimal codes for colors!
Photoshop’s Color Picker

Always find and USE the hexadecimal codes for colors!
{CSS} font-family, font-size, line-height

TYPOGRAPHY
sans-serif

All shown at 48px
serif

All shown at 48px
monospace

All shown at 48px
Match the generic
• The generic comes at the end of the declaration
• There are three acceptable generics:
– serif
– sans-serif
– monospace

• The fonts specified must be the same
classification as the generic; e.g., Verdana and
Arial are sans-serif fonts, and Georgia and Times
are serif fonts
Consider the context
• When creating a CSS “font stack”—is it a
declaration for body or caption text (small) or
heading text (large)?
• The order of the fonts in the stack should reflect
this difference
• Certain fonts work well for paragraphs (small text
size), while others work better at larger sizes.
• Example: Verdana and Arial read slightly better
than Helvetica at smaller sizes on the screen.
Source: Nathan Ford, “Better CSS Font Stacks”
There are not many fonts
that you can expect
most online users to have
installed on their devices.
http://www.jtoolkit.com/wp/2012/11/typography-for-the-web/
Make sure you have seen it
• Many typography Web sites that seem to be
showing you typefaces are only showing you
the faces that are already on your computer.
• To be certain you have really seen a typeface
(before specifying a font family)—Google it!
• The major type foundries (Adobe, Bitstream,
Linotype, etc.) show online samples in PDF
format so you can get an accurate view of the
typefaces. Go to their sites.
Use of quotation marks
• Use quotation marks around any font-family name
that includes a space.
• Make certain the quotation marks in CSS are
“straight,” not “curly” (this is necessary for ALL code).
"Book Antigua" (yes) “Book Antigua” (no)

• Make sure the comma comes after the closing
quote:
Baskerville, "Times New Roman", Times, serif;
Limit use of different fonts
• A good rule of thumb is to never use more than
three typefaces on any page, and preferably to stick
to only one or two.
• For CSS, this would mean only two different fontfamily “stacks.” (You can have more than two
declarations in the style sheet.)

Source: Susan G. Miller, “Selecting and Combining Typefaces”
Limit use of different fonts
• In selecting two fonts to use, it’s a good practice to
select one serif and the other from the sans-serif
group.
– Allows for a nice contrast
– Ensures that the page is attractive and easy to
read

Source: Susan G. Miller, “Selecting and Combining Typefaces”
Online design is more than code

DESIGN THINKING
“Design in its most effective form
is a process, an action,
a verb not a noun.
A protocol for solving problems and
discovering new opportunities.
Techniques and tools differ and
their effectiveness [is] arguable,
but the core of the process stays the same.”
—“Design Thinking ... What Is That?” Fast Company, March 2006
Design thinking
1: Define the problem
2: Create and consider many options
3: Refine selected directions
3.5: Repeat (optional)
4: Pick the winner, execute

—quoted from “Design Thinking ... What Is That?”
Fast Company, March 2006
A five-page student website
has little in common
with a news organization’s
10,000-page site.
{CSS} div and other selectors

MORE CSS
Linked on our syllabus:
Checklist for your HTML5
and CSS knowledge
http://bit.ly/html_css_checklist
Fonts, color, Web design
Presentation by Mindy McAdams
University of Florida
[2014]

More Related Content

What's hot

Getting Started With WordPress Themes for Beginners
Getting Started With WordPress Themes for BeginnersGetting Started With WordPress Themes for Beginners
Getting Started With WordPress Themes for Beginners
New Tricks
 
700 posts – 1 menu, organizing a large info site with taxonomies and facets
700 posts – 1 menu, organizing a large info site with taxonomies and facets700 posts – 1 menu, organizing a large info site with taxonomies and facets
700 posts – 1 menu, organizing a large info site with taxonomies and facets
Becky Davis
 
Successful Website Design
Successful Website DesignSuccessful Website Design
Successful Website Design
Becky Davis
 
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPressWhat Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
East Bay WordPress Meetup
 
Slides bootstrap-4
Slides bootstrap-4Slides bootstrap-4
Slides bootstrap-4
Michael Posso
 
Introduction to web sites design
Introduction to  web sites designIntroduction to  web sites design
Introduction to web sites design
Marwa Abdelgawad
 
Tech Thursdays: Building Products
Tech Thursdays: Building ProductsTech Thursdays: Building Products
Tech Thursdays: Building Products
Hayden Bleasel
 
Wordpress Page Load Speed - Kenneth sytian
Wordpress Page Load Speed - Kenneth sytianWordpress Page Load Speed - Kenneth sytian
Wordpress Page Load Speed - Kenneth sytian
Grant Merriel
 
Developing branding solutions
Developing branding solutionsDeveloping branding solutions
Developing branding solutionsThomas Daly
 
The Future of HTML5 Motion Design
The Future of HTML5 Motion DesignThe Future of HTML5 Motion Design
The Future of HTML5 Motion Design
Terry Ryan
 
Blogging 101 - Zemanta NYC Meetup
Blogging 101 - Zemanta NYC MeetupBlogging 101 - Zemanta NYC Meetup
Blogging 101 - Zemanta NYC Meetup
Zemanta
 
Elegant Web Typography
Elegant Web TypographyElegant Web Typography
Elegant Web Typography
jeff_croft
 
Blogging 201: From Blank Slate to Blog in Under an Hour
Blogging 201: From Blank Slate to Blog in Under an HourBlogging 201: From Blank Slate to Blog in Under an Hour
Blogging 201: From Blank Slate to Blog in Under an Hour
Adam Gartenberg
 
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's AmpersandwichSuccessful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Jenn Lukas
 
Open Standards in the Walled Garden
Open Standards in the Walled GardenOpen Standards in the Walled Garden
Open Standards in the Walled Garden
digitalbindery
 
Epub in the wild
Epub in the wildEpub in the wild
Epub in the wild
liz_castro
 
Designing for Growth, Academy Xi
Designing for Growth, Academy XiDesigning for Growth, Academy Xi
Designing for Growth, Academy Xi
Hayden Bleasel
 
Digital Marketing Tools
Digital Marketing ToolsDigital Marketing Tools
Digital Marketing Tools
Sal Frosceno
 

What's hot (19)

Getting Started With WordPress Themes for Beginners
Getting Started With WordPress Themes for BeginnersGetting Started With WordPress Themes for Beginners
Getting Started With WordPress Themes for Beginners
 
700 posts – 1 menu, organizing a large info site with taxonomies and facets
700 posts – 1 menu, organizing a large info site with taxonomies and facets700 posts – 1 menu, organizing a large info site with taxonomies and facets
700 posts – 1 menu, organizing a large info site with taxonomies and facets
 
Successful Website Design
Successful Website DesignSuccessful Website Design
Successful Website Design
 
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPressWhat Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
 
Slides bootstrap-4
Slides bootstrap-4Slides bootstrap-4
Slides bootstrap-4
 
Introduction to web sites design
Introduction to  web sites designIntroduction to  web sites design
Introduction to web sites design
 
Tech Thursdays: Building Products
Tech Thursdays: Building ProductsTech Thursdays: Building Products
Tech Thursdays: Building Products
 
Wordpress Page Load Speed - Kenneth sytian
Wordpress Page Load Speed - Kenneth sytianWordpress Page Load Speed - Kenneth sytian
Wordpress Page Load Speed - Kenneth sytian
 
Developing branding solutions
Developing branding solutionsDeveloping branding solutions
Developing branding solutions
 
The Future of HTML5 Motion Design
The Future of HTML5 Motion DesignThe Future of HTML5 Motion Design
The Future of HTML5 Motion Design
 
WebDU Keynote
WebDU KeynoteWebDU Keynote
WebDU Keynote
 
Blogging 101 - Zemanta NYC Meetup
Blogging 101 - Zemanta NYC MeetupBlogging 101 - Zemanta NYC Meetup
Blogging 101 - Zemanta NYC Meetup
 
Elegant Web Typography
Elegant Web TypographyElegant Web Typography
Elegant Web Typography
 
Blogging 201: From Blank Slate to Blog in Under an Hour
Blogging 201: From Blank Slate to Blog in Under an HourBlogging 201: From Blank Slate to Blog in Under an Hour
Blogging 201: From Blank Slate to Blog in Under an Hour
 
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's AmpersandwichSuccessful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
 
Open Standards in the Walled Garden
Open Standards in the Walled GardenOpen Standards in the Walled Garden
Open Standards in the Walled Garden
 
Epub in the wild
Epub in the wildEpub in the wild
Epub in the wild
 
Designing for Growth, Academy Xi
Designing for Growth, Academy XiDesigning for Growth, Academy Xi
Designing for Growth, Academy Xi
 
Digital Marketing Tools
Digital Marketing ToolsDigital Marketing Tools
Digital Marketing Tools
 

Viewers also liked

Fundamentals of Web building
Fundamentals of Web buildingFundamentals of Web building
Fundamentals of Web buildingRC Morales
 
Computers in banking
Computers in bankingComputers in banking
Computers in bankingVerronBriscoe
 
Use of Computers In Hospitals
Use of Computers In HospitalsUse of Computers In Hospitals
Use of Computers In Hospitals
InfoFlavour
 
Individual and team goals
Individual and team goalsIndividual and team goals
Individual and team goals
Yuval Yeret
 
Site analysis-example
Site analysis-exampleSite analysis-example
Site analysis-exampleAnu PA
 

Viewers also liked (6)

Fundamentals of Web building
Fundamentals of Web buildingFundamentals of Web building
Fundamentals of Web building
 
Computers in banking
Computers in bankingComputers in banking
Computers in banking
 
Web page concept final ppt
Web page concept  final pptWeb page concept  final ppt
Web page concept final ppt
 
Use of Computers In Hospitals
Use of Computers In HospitalsUse of Computers In Hospitals
Use of Computers In Hospitals
 
Individual and team goals
Individual and team goalsIndividual and team goals
Individual and team goals
 
Site analysis-example
Site analysis-exampleSite analysis-example
Site analysis-example
 

Similar to Design Concepts and Web Design

Font-families in CSS
Font-families in CSSFont-families in CSS
Font-families in CSS
Mindy McAdams
 
Web font services: March 2011
Web font services: March 2011Web font services: March 2011
Web font services: March 2011
RZasadzinski
 
Better css font stacks unit verse
Better css font stacks   unit verseBetter css font stacks   unit verse
Better css font stacks unit verse
Xuan Le
 
Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
Melvin John
 
Week11 Lecture: CSS
Week11 Lecture: CSSWeek11 Lecture: CSS
Design for developers (april 25, 2017)
Design for developers (april 25, 2017)Design for developers (april 25, 2017)
Design for developers (april 25, 2017)
Thinkful
 
Typography for WordPress
Typography for WordPressTypography for WordPress
Typography for WordPress
Nile Flores
 
What is-sass-by-lucas-castro
What is-sass-by-lucas-castroWhat is-sass-by-lucas-castro
What is-sass-by-lucas-castro
Lucas Castro
 
11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdf
ssusercc3ff71
 
Making Your Site Printable: Booster Conference
Making Your Site Printable: Booster ConferenceMaking Your Site Printable: Booster Conference
Making Your Site Printable: Booster Conference
Adrian Roselli
 
Bootstrap UI Library Introduction
Bootstrap UI Library IntroductionBootstrap UI Library Introduction
Bootstrap UI Library Introduction
Vardot
 
Introduction to PrintCSS.live
Introduction to PrintCSS.liveIntroduction to PrintCSS.live
Introduction to PrintCSS.live
Andreas Zettl
 
Engage 2019: Building a design system to modernize Connections
Engage 2019: Building a design system to modernize ConnectionsEngage 2019: Building a design system to modernize Connections
Engage 2019: Building a design system to modernize Connections
Tiny
 
Revamp Your Stylesheet
Revamp Your StylesheetRevamp Your Stylesheet
Revamp Your Stylesheet
Gary Homidas
 
Rh10 css presentation
Rh10 css presentationRh10 css presentation
Rh10 css presentation
Neil Perlin
 
Rh10 css presentation
Rh10 css presentationRh10 css presentation
Rh10 css presentationNeil Perlin
 
SmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers AmpersandwichSmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers Ampersandwich
Jenn Lukas
 
Single sourcing to the max
Single sourcing to the maxSingle sourcing to the max
Single sourcing to the max
Neil Perlin
 
Omeka css
Omeka cssOmeka css
Typography & WordPress - WordCamp Hamilton 2015
Typography & WordPress - WordCamp Hamilton 2015Typography & WordPress - WordCamp Hamilton 2015
Typography & WordPress - WordCamp Hamilton 2015
AndyStaple
 

Similar to Design Concepts and Web Design (20)

Font-families in CSS
Font-families in CSSFont-families in CSS
Font-families in CSS
 
Web font services: March 2011
Web font services: March 2011Web font services: March 2011
Web font services: March 2011
 
Better css font stacks unit verse
Better css font stacks   unit verseBetter css font stacks   unit verse
Better css font stacks unit verse
 
Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
 
Week11 Lecture: CSS
Week11 Lecture: CSSWeek11 Lecture: CSS
Week11 Lecture: CSS
 
Design for developers (april 25, 2017)
Design for developers (april 25, 2017)Design for developers (april 25, 2017)
Design for developers (april 25, 2017)
 
Typography for WordPress
Typography for WordPressTypography for WordPress
Typography for WordPress
 
What is-sass-by-lucas-castro
What is-sass-by-lucas-castroWhat is-sass-by-lucas-castro
What is-sass-by-lucas-castro
 
11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdf
 
Making Your Site Printable: Booster Conference
Making Your Site Printable: Booster ConferenceMaking Your Site Printable: Booster Conference
Making Your Site Printable: Booster Conference
 
Bootstrap UI Library Introduction
Bootstrap UI Library IntroductionBootstrap UI Library Introduction
Bootstrap UI Library Introduction
 
Introduction to PrintCSS.live
Introduction to PrintCSS.liveIntroduction to PrintCSS.live
Introduction to PrintCSS.live
 
Engage 2019: Building a design system to modernize Connections
Engage 2019: Building a design system to modernize ConnectionsEngage 2019: Building a design system to modernize Connections
Engage 2019: Building a design system to modernize Connections
 
Revamp Your Stylesheet
Revamp Your StylesheetRevamp Your Stylesheet
Revamp Your Stylesheet
 
Rh10 css presentation
Rh10 css presentationRh10 css presentation
Rh10 css presentation
 
Rh10 css presentation
Rh10 css presentationRh10 css presentation
Rh10 css presentation
 
SmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers AmpersandwichSmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers Ampersandwich
 
Single sourcing to the max
Single sourcing to the maxSingle sourcing to the max
Single sourcing to the max
 
Omeka css
Omeka cssOmeka css
Omeka css
 
Typography & WordPress - WordCamp Hamilton 2015
Typography & WordPress - WordCamp Hamilton 2015Typography & WordPress - WordCamp Hamilton 2015
Typography & WordPress - WordCamp Hamilton 2015
 

More from Mindy McAdams

Just Enough Code
Just Enough CodeJust Enough Code
Just Enough Code
Mindy McAdams
 
Multimedia Journalism Innovations in the Classroom
Multimedia Journalism Innovations in the ClassroomMultimedia Journalism Innovations in the Classroom
Multimedia Journalism Innovations in the Classroom
Mindy McAdams
 
Summary of journalism faculty curriculum workshop
Summary of journalism faculty curriculum workshopSummary of journalism faculty curriculum workshop
Summary of journalism faculty curriculum workshop
Mindy McAdams
 
Crowdsourcing
CrowdsourcingCrowdsourcing
Crowdsourcing
Mindy McAdams
 
U.S. j-schools and digital skills
U.S. j-schools and digital skills U.S. j-schools and digital skills
U.S. j-schools and digital skills
Mindy McAdams
 
New skill sets for journalism
New skill sets for journalismNew skill sets for journalism
New skill sets for journalism
Mindy McAdams
 
Journalism blogs: An introduction
Journalism blogs: An introduction Journalism blogs: An introduction
Journalism blogs: An introduction
Mindy McAdams
 
Why Your Newsroom Should Be Using WordPress - ONA13
Why Your Newsroom Should Be Using WordPress - ONA13Why Your Newsroom Should Be Using WordPress - ONA13
Why Your Newsroom Should Be Using WordPress - ONA13
Mindy McAdams
 
Journalism's Future: Journalism, Not Newspapers
Journalism's Future: Journalism, Not NewspapersJournalism's Future: Journalism, Not Newspapers
Journalism's Future: Journalism, Not Newspapers
Mindy McAdams
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
Mindy McAdams
 
Beginning jQuery
Beginning jQueryBeginning jQuery
Beginning jQuery
Mindy McAdams
 
An Introduction to the DOM
An Introduction to the DOMAn Introduction to the DOM
An Introduction to the DOM
Mindy McAdams
 
JavaScript 101
JavaScript 101JavaScript 101
JavaScript 101
Mindy McAdams
 
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design
Mindy McAdams
 
Learning Python - Week 4
Learning Python - Week 4 Learning Python - Week 4
Learning Python - Week 4
Mindy McAdams
 
Learning Python - Week 2
Learning Python - Week 2Learning Python - Week 2
Learning Python - Week 2
Mindy McAdams
 
Learning Python - Week 1
Learning Python - Week 1Learning Python - Week 1
Learning Python - Week 1
Mindy McAdams
 
Learning Python
Learning PythonLearning Python
Learning Python
Mindy McAdams
 
Freedom of Speech - Louis Brandeis
Freedom of Speech - Louis BrandeisFreedom of Speech - Louis Brandeis
Freedom of Speech - Louis Brandeis
Mindy McAdams
 
Networked Information Economy / Benkler
Networked Information Economy / BenklerNetworked Information Economy / Benkler
Networked Information Economy / Benkler
Mindy McAdams
 

More from Mindy McAdams (20)

Just Enough Code
Just Enough CodeJust Enough Code
Just Enough Code
 
Multimedia Journalism Innovations in the Classroom
Multimedia Journalism Innovations in the ClassroomMultimedia Journalism Innovations in the Classroom
Multimedia Journalism Innovations in the Classroom
 
Summary of journalism faculty curriculum workshop
Summary of journalism faculty curriculum workshopSummary of journalism faculty curriculum workshop
Summary of journalism faculty curriculum workshop
 
Crowdsourcing
CrowdsourcingCrowdsourcing
Crowdsourcing
 
U.S. j-schools and digital skills
U.S. j-schools and digital skills U.S. j-schools and digital skills
U.S. j-schools and digital skills
 
New skill sets for journalism
New skill sets for journalismNew skill sets for journalism
New skill sets for journalism
 
Journalism blogs: An introduction
Journalism blogs: An introduction Journalism blogs: An introduction
Journalism blogs: An introduction
 
Why Your Newsroom Should Be Using WordPress - ONA13
Why Your Newsroom Should Be Using WordPress - ONA13Why Your Newsroom Should Be Using WordPress - ONA13
Why Your Newsroom Should Be Using WordPress - ONA13
 
Journalism's Future: Journalism, Not Newspapers
Journalism's Future: Journalism, Not NewspapersJournalism's Future: Journalism, Not Newspapers
Journalism's Future: Journalism, Not Newspapers
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
 
Beginning jQuery
Beginning jQueryBeginning jQuery
Beginning jQuery
 
An Introduction to the DOM
An Introduction to the DOMAn Introduction to the DOM
An Introduction to the DOM
 
JavaScript 101
JavaScript 101JavaScript 101
JavaScript 101
 
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design
 
Learning Python - Week 4
Learning Python - Week 4 Learning Python - Week 4
Learning Python - Week 4
 
Learning Python - Week 2
Learning Python - Week 2Learning Python - Week 2
Learning Python - Week 2
 
Learning Python - Week 1
Learning Python - Week 1Learning Python - Week 1
Learning Python - Week 1
 
Learning Python
Learning PythonLearning Python
Learning Python
 
Freedom of Speech - Louis Brandeis
Freedom of Speech - Louis BrandeisFreedom of Speech - Louis Brandeis
Freedom of Speech - Louis Brandeis
 
Networked Information Economy / Benkler
Networked Information Economy / BenklerNetworked Information Economy / Benkler
Networked Information Economy / Benkler
 

Recently uploaded

Model Attribute Check Company Auto Property
Model Attribute  Check Company Auto PropertyModel Attribute  Check Company Auto Property
Model Attribute Check Company Auto Property
Celine George
 
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
MysoreMuleSoftMeetup
 
Group Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana BuscigliopptxGroup Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana Buscigliopptx
ArianaBusciglio
 
The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
DhatriParmar
 
2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...
Sandy Millin
 
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
 
Digital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and ResearchDigital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and Research
Vikramjit Singh
 
1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx
JosvitaDsouza2
 
Lapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdfLapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdf
Jean Carlos Nunes Paixão
 
Honest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptxHonest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptx
timhan337
 
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
 
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
 
STRAND 3 HYGIENIC PRACTICES.pptx GRADE 7 CBC
STRAND 3 HYGIENIC PRACTICES.pptx GRADE 7 CBCSTRAND 3 HYGIENIC PRACTICES.pptx GRADE 7 CBC
STRAND 3 HYGIENIC PRACTICES.pptx GRADE 7 CBC
kimdan468
 
Multithreading_in_C++ - std::thread, race condition
Multithreading_in_C++ - std::thread, race conditionMultithreading_in_C++ - std::thread, race condition
Multithreading_in_C++ - std::thread, race condition
Mohammed Sikander
 
Digital Artifact 2 - Investigating Pavilion Designs
Digital Artifact 2 - Investigating Pavilion DesignsDigital Artifact 2 - Investigating Pavilion Designs
Digital Artifact 2 - Investigating Pavilion Designs
chanes7
 
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)
 
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
 
The French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free downloadThe French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free download
Vivekanand Anglo Vedic Academy
 
A Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptxA Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptx
thanhdowork
 
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
 

Recently uploaded (20)

Model Attribute Check Company Auto Property
Model Attribute  Check Company Auto PropertyModel Attribute  Check Company Auto Property
Model Attribute Check Company Auto Property
 
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
 
Group Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana BuscigliopptxGroup Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana Buscigliopptx
 
The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
 
2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...
 
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
 
Digital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and ResearchDigital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and Research
 
1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx
 
Lapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdfLapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdf
 
Honest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptxHonest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptx
 
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
 
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
 
STRAND 3 HYGIENIC PRACTICES.pptx GRADE 7 CBC
STRAND 3 HYGIENIC PRACTICES.pptx GRADE 7 CBCSTRAND 3 HYGIENIC PRACTICES.pptx GRADE 7 CBC
STRAND 3 HYGIENIC PRACTICES.pptx GRADE 7 CBC
 
Multithreading_in_C++ - std::thread, race condition
Multithreading_in_C++ - std::thread, race conditionMultithreading_in_C++ - std::thread, race condition
Multithreading_in_C++ - std::thread, race condition
 
Digital Artifact 2 - Investigating Pavilion Designs
Digital Artifact 2 - Investigating Pavilion DesignsDigital Artifact 2 - Investigating Pavilion Designs
Digital Artifact 2 - Investigating Pavilion Designs
 
Synthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptxSynthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptx
 
Operation Blue Star - Saka Neela Tara
Operation Blue Star   -  Saka Neela TaraOperation Blue Star   -  Saka Neela Tara
Operation Blue Star - Saka Neela Tara
 
The French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free downloadThe French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free download
 
A Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptxA Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptx
 
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
 

Design Concepts and Web Design

  • 1. Fonts, color, Web design Some design concepts related to the use of HTML and CSS
  • 2. {CSS} background-color, color, a:link, a:hover, etc. COLOR
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9. Color • Choose 2 to 5 key colors for your palette • Specify colors for page background, wrapper background, and main text • Specify all pseudo classes (a:link, a:visited, a:hover, a:active, a:focus) – Look up a:focus if you don’t know about it • Test all colors for text legibility with a Photoshop graphic (is your text easy to read?)
  • 10. This example shows very minimal specifications for color in a CSS style sheet.
  • 12. http://kuler.adobe.com/ Always find and USE the hexadecimal codes for colors!
  • 13. Photoshop’s Color Picker Always find and USE the hexadecimal codes for colors!
  • 14. {CSS} font-family, font-size, line-height TYPOGRAPHY
  • 18. Match the generic • The generic comes at the end of the declaration • There are three acceptable generics: – serif – sans-serif – monospace • The fonts specified must be the same classification as the generic; e.g., Verdana and Arial are sans-serif fonts, and Georgia and Times are serif fonts
  • 19. Consider the context • When creating a CSS “font stack”—is it a declaration for body or caption text (small) or heading text (large)? • The order of the fonts in the stack should reflect this difference • Certain fonts work well for paragraphs (small text size), while others work better at larger sizes. • Example: Verdana and Arial read slightly better than Helvetica at smaller sizes on the screen. Source: Nathan Ford, “Better CSS Font Stacks”
  • 20. There are not many fonts that you can expect most online users to have installed on their devices.
  • 22. Make sure you have seen it • Many typography Web sites that seem to be showing you typefaces are only showing you the faces that are already on your computer. • To be certain you have really seen a typeface (before specifying a font family)—Google it! • The major type foundries (Adobe, Bitstream, Linotype, etc.) show online samples in PDF format so you can get an accurate view of the typefaces. Go to their sites.
  • 23. Use of quotation marks • Use quotation marks around any font-family name that includes a space. • Make certain the quotation marks in CSS are “straight,” not “curly” (this is necessary for ALL code). "Book Antigua" (yes) “Book Antigua” (no) • Make sure the comma comes after the closing quote: Baskerville, "Times New Roman", Times, serif;
  • 24. Limit use of different fonts • A good rule of thumb is to never use more than three typefaces on any page, and preferably to stick to only one or two. • For CSS, this would mean only two different fontfamily “stacks.” (You can have more than two declarations in the style sheet.) Source: Susan G. Miller, “Selecting and Combining Typefaces”
  • 25. Limit use of different fonts • In selecting two fonts to use, it’s a good practice to select one serif and the other from the sans-serif group. – Allows for a nice contrast – Ensures that the page is attractive and easy to read Source: Susan G. Miller, “Selecting and Combining Typefaces”
  • 26. Online design is more than code DESIGN THINKING
  • 27. “Design in its most effective form is a process, an action, a verb not a noun. A protocol for solving problems and discovering new opportunities. Techniques and tools differ and their effectiveness [is] arguable, but the core of the process stays the same.” —“Design Thinking ... What Is That?” Fast Company, March 2006
  • 28. Design thinking 1: Define the problem 2: Create and consider many options 3: Refine selected directions 3.5: Repeat (optional) 4: Pick the winner, execute —quoted from “Design Thinking ... What Is That?” Fast Company, March 2006
  • 29. A five-page student website has little in common with a news organization’s 10,000-page site.
  • 30. {CSS} div and other selectors MORE CSS
  • 31. Linked on our syllabus: Checklist for your HTML5 and CSS knowledge http://bit.ly/html_css_checklist
  • 32. Fonts, color, Web design Presentation by Mindy McAdams University of Florida [2014]

Editor's Notes

  1. MMC 4341 - February 2014 – many of the linked resources are no longer available, but some are.
  2. You will ALWAYS need to specify background-color, (text) color, and 4 pseudo classes for the links.
  3. http://americandesignawards.com/
  4. If you analyze award-winning design websites, you will discover that the palettes are usually simple. The number of colors used is limited.
  5. http://www.sasquatchfestival.com/
  6. If you identify more than 2 or 3 colors, it is likely that most of those colors are shades or hues of 1 or 2 base colors.
  7. http://www.androidanalyse.com/category/editorial/
  8. if you do find a “rainbow” palette, you will notice that the “rainbow” is usually used in a limited and restrained way – like this example.
  9. More about the pseudo classes: http://css-tricks.com/pseudo-class-selectors/ … One mistake that inexperienced CSS coders make – they fail to test link colors against different backgrounds.
  10. This example shows minimal specifications for color in a CSS style sheet.
  11. This is a great tool (free, online) for experimenting with color. http://kuler.adobe.com/
  12. Always find and USE the hexadecimal codes for colors! http://kuler.adobe.com/
  13. Always find and USE the hexadecimal codes for colors! http://kuler.adobe.com/ DO NOT use words, e.g. “red,” “black.”
  14. Web designers have published hundreds of articles about the best ways to use fonts with HTML and CSS. Don’t take this for granted.
  15. All shown at 48px – NOTE that the sizes of two different font-families can be EXTREMELY different. This could really mess up your page design.
  16. All shown at 48px – go back one slide and compare. Make sure you KNOW the difference between serif and sans-serif.
  17. Compare this slide with the previous 2 slides. MONOSPACE is very different. These can also be called fixed-width fonts.
  18. Standard best practice is to ALWAYS include one generic at the end of the font-family declaration.
  19. http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
  20. THIS IS A BIG DEAL. Your Web pages can look HORRIBLE if you do not construct your font stacks (in CSS) carefully. You have very LIMITED options.
  21. Google Web Fonts to the rescue! ALTHOUGH – you do not need to DEPEND on these – you can still use “safe” fonts – and you still need to spec a generic!
  22. Different people have different fonts installed (or not installed) – what you see on your computer might be VERY DIFFERENT from what I see, or what others see, when you view YOUR Web page.
  23. If you type these incorrectly, the fonts will not work on the Web page.
  24. http://www.stc.org/confproceed/2002/PDFs/STC49-00068.pdf
  25. http://www.stc.org/confproceed/2002/PDFs/STC49-00068.pdf
  26. Design is a process that addresses a problem, or a set of problems. This is not “problem” in a negative sense – more like a puzzle that has more than one way to solve it. Which way is the best way? That is the problem to be solved.
  27. http://www.fastcompany.com/919258/design-thinking-what
  28. We’ll talk more next week about agile development and how that contributes to the design process.
  29. What is the problem you are trying to solve? Think it over.
  30. Like Web typography, CSS is a topic about which skilled designers have written many, many articles. Don’t just stick things in. PLAY. Experiment. And Google about what is considered correct, incorrect, and optimal.
  31. MMC 4341 - February 2014