SlideShare a Scribd company logo
1 of 15
The Elements
of Design
Texture and Typography
Lesson Overview
ο‚› In   this lesson, you will:
  ο‚›    Explore the use of texture in Web design
  ο‚›    Explore the use of typography in Web
       design
Guiding Question
ο‚› Does
     the style of text used in a publication
 convey emotion?
Texture
ο‚› Texture is the use of certain design
  techniques to create the illusion of depth
  or three dimensions on a flat surface
ο‚› Can be achieved through the use of:
  ο‚›   Lines
  ο‚›   Shadows
  ο‚›   Color to highlight
Using Lines for Texture
ο‚› Lines
      can be used to create texture by
  showing details in objects.
ο‚› Examples:
  ο‚›   Detail lines in hand-drawn images
  ο‚›   Veins on leaves
  ο‚›   Grain lines on a piece of wood
  ο‚›   Hair or fur on an animal
  ο‚›   Illusion that object is not flat
Using Shadows to Create
Texture
ο‚› Make    an object appear to be raised off
  the surface
ο‚› By adding a shadow to text or other
  object, the designer is trying to create an
  illusion.
ο‚› Can be added to:
  ο‚›   Text
  ο‚›   Buttons
  ο‚›   Image outlines
Using Texture as a Background
ο‚› Texture
       can also be added to the
 background of a Web site
  ο‚›   Can add visual appeal
  ο‚›   Can be distracting if used incorrectly
ο‚› When  using a textured background,
 designers should place elements, such as
 text and objects, inside a solid colored
 shape
Typography
ο‚› Refers   to the design of the fonts used on a
  page
ο‚› Involves choices of:
  ο‚›   Style
  ο‚›   Emphasis
  ο‚›   Size
  ο‚›   Color
Style
ο‚› Font  style is a description of how the
  letters in the font are shaped
ο‚› The commonly used styles are:
  ο‚›   Serif, and
  ο‚›   Sans-Serif
Style
ο‚› Serif   font
  ο‚›   Small strokes at the end of letters
  ο‚›   Useful in printed material
  ο‚›   Example: Times    New Roman
ο‚› Sans-serif     font
  ο‚›   Drops the strokes at the end of letters
  ο‚›   Useful in electronic material
  ο‚›   Example: Arial
Style
ο‚› Decorative
 ο‚›   Script Font: Apple Chancery
     ο‚› Historic or elegant look
     ο‚› Difficult to read in longer portions of text

 ο‚›   Symbol Font: Webdings (Webdings)
     ο‚› Symbols for letters or words
     ο‚› Secret codes
      ο‚›   Mr. Hahn is cool!
Emphasis
ο‚›A  way to call attention to a word or a
  portion of your text is by using emphasis
ο‚› You need to be consistent in your use
  within the site.
ο‚› Examples:
  ο‚›   Bold
  ο‚›   Italics
  ο‚›   Color
Size
    Measured by points
                                    8 pt
ο‚›                                  12 pt

    ο‚›   Point = 1/72 inch         20 pt
    Sizes for Web design
ο‚›
    ο‚›   12 points or 14 points
                                 36 pt
        10 points or lower:
                                 48 pt
    ο‚›
        hard to read
    ο‚›   16 points or higher:

                                 60pt
        used for headings
Typography Sends a Message
ο‚› Some  styles communicate an emotion or
 a feeling
 ο‚›   Decorative – historic or elegant
 ο‚›   Capital Letters – ANGER OR SHOUTING
Lesson Review
ο‚› Howdoes the use of texture and
 typography apply to Web design?

More Related Content

What's hot

1.01 Typography Usability and Readability
1.01 Typography Usability and Readability1.01 Typography Usability and Readability
1.01 Typography Usability and ReadabilityMsGilbert
Β 
1.01 Typography
1.01 Typography1.01 Typography
1.01 TypographyMsGilbert
Β 
The Power of Typography
The Power of TypographyThe Power of Typography
The Power of Typography[x]cube LABS
Β 
Typography 101: The Basics
Typography 101: The BasicsTypography 101: The Basics
Typography 101: The BasicsMainstreethost
Β 
Practical Typography or Typography vs Design
Practical Typography or Typography vs DesignPractical Typography or Typography vs Design
Practical Typography or Typography vs DesignRavi Bhadauria
Β 
Presentation 1 asgardia
Presentation 1 asgardiaPresentation 1 asgardia
Presentation 1 asgardiaAlix Fraser
Β 
Typography class 3
Typography class 3Typography class 3
Typography class 3Pedro Aguirre
Β 
Typography class 1
Typography class 1Typography class 1
Typography class 1Pedro Aguirre
Β 
Typography class 2
Typography class 2Typography class 2
Typography class 2Pedro Aguirre
Β 
Multimedia: Making it Happen - Text
Multimedia: Making it Happen - TextMultimedia: Making it Happen - Text
Multimedia: Making it Happen - Textjoelk
Β 
Day01 design final
Day01 design finalDay01 design final
Day01 design finalBrooke Nelson
Β 
what is Font in multimedia
 what is Font in multimedia what is Font in multimedia
what is Font in multimediamaliksiddique1
Β 
Topography
TopographyTopography
TopographyAbiyaShah
Β 
Fonts for classroom displays
Fonts for classroom displaysFonts for classroom displays
Fonts for classroom displaysLinda Hartley
Β 

What's hot (20)

1.01 Typography Usability and Readability
1.01 Typography Usability and Readability1.01 Typography Usability and Readability
1.01 Typography Usability and Readability
Β 
1.01 Typography
1.01 Typography1.01 Typography
1.01 Typography
Β 
The Power of Typography
The Power of TypographyThe Power of Typography
The Power of Typography
Β 
Typography
TypographyTypography
Typography
Β 
Typography 101: The Basics
Typography 101: The BasicsTypography 101: The Basics
Typography 101: The Basics
Β 
Practical Typography or Typography vs Design
Practical Typography or Typography vs DesignPractical Typography or Typography vs Design
Practical Typography or Typography vs Design
Β 
Presentation 1 asgardia
Presentation 1 asgardiaPresentation 1 asgardia
Presentation 1 asgardia
Β 
Midterm review
Midterm reviewMidterm review
Midterm review
Β 
Chap7
Chap7Chap7
Chap7
Β 
Typography class 3
Typography class 3Typography class 3
Typography class 3
Β 
Typography class 1
Typography class 1Typography class 1
Typography class 1
Β 
Typography class 2
Typography class 2Typography class 2
Typography class 2
Β 
Multimedia: Making it Happen - Text
Multimedia: Making it Happen - TextMultimedia: Making it Happen - Text
Multimedia: Making it Happen - Text
Β 
Day01 design final
Day01 design finalDay01 design final
Day01 design final
Β 
what is Font in multimedia
 what is Font in multimedia what is Font in multimedia
what is Font in multimedia
Β 
Topography
TopographyTopography
Topography
Β 
Text
TextText
Text
Β 
Unit 2 graphics
Unit 2 graphicsUnit 2 graphics
Unit 2 graphics
Β 
Fonts for classroom displays
Fonts for classroom displaysFonts for classroom displays
Fonts for classroom displays
Β 
Fonts and colours
Fonts and coloursFonts and colours
Fonts and colours
Β 

Similar to The Elements of Design - Texture and Typography

ICT Web Design Lesson 1.pptx
ICT Web Design Lesson 1.pptxICT Web Design Lesson 1.pptx
ICT Web Design Lesson 1.pptxEithanGonzalez2
Β 
Chapter 3 - Text.pptsdg
Chapter 3 - Text.pptsdgChapter 3 - Text.pptsdg
Chapter 3 - Text.pptsdgFarisZainudin1
Β 
ENGL 2950 Peer Review for BrochureFlyer Assignment Brochure.docx
ENGL 2950 Peer Review for BrochureFlyer Assignment Brochure.docxENGL 2950 Peer Review for BrochureFlyer Assignment Brochure.docx
ENGL 2950 Peer Review for BrochureFlyer Assignment Brochure.docxYASHU40
Β 
Graphic Design Tips for Board Game Desigenrs
Graphic Design Tips for Board Game DesigenrsGraphic Design Tips for Board Game Desigenrs
Graphic Design Tips for Board Game DesigenrsPatrick McNeil
Β 
Cyberworx Brand identity
Cyberworx Brand identityCyberworx Brand identity
Cyberworx Brand identityJAVIERβ„’
Β 
Elements of Graphic design.pptx
Elements of Graphic design.pptxElements of Graphic design.pptx
Elements of Graphic design.pptxSaadIqbal302965
Β 
How to use Canva to effectively promote your brand?
How to use Canva to effectively promote your brand?How to use Canva to effectively promote your brand?
How to use Canva to effectively promote your brand?Evelyn Jara
Β 
Power point 2003 design principles v2009
Power point 2003 design principles v2009Power point 2003 design principles v2009
Power point 2003 design principles v2009914646279
Β 
Fonts!
Fonts!Fonts!
Fonts!rakeling
Β 
Design Getting Your Message Across
Design Getting Your Message AcrossDesign Getting Your Message Across
Design Getting Your Message Acrosseohart
Β 
Graphic design intro2
Graphic design intro2Graphic design intro2
Graphic design intro2Sarah Sutter
Β 
how to make Presentation Part 2
how to make Presentation Part 2how to make Presentation Part 2
how to make Presentation Part 2santoshingalkar
Β 
Design Intro
Design IntroDesign Intro
Design IntroSarah Sutter
Β 
Teacher Feedback
Teacher FeedbackTeacher Feedback
Teacher Feedbackbeckychapman
Β 
Overview 20150928
 Overview 20150928 Overview 20150928
Overview 20150928AJ Tivol
Β 

Similar to The Elements of Design - Texture and Typography (20)

multimedia (2nd)
 multimedia (2nd) multimedia (2nd)
multimedia (2nd)
Β 
ICT Web Design Lesson 1.pptx
ICT Web Design Lesson 1.pptxICT Web Design Lesson 1.pptx
ICT Web Design Lesson 1.pptx
Β 
Chapter 3 - Text.pptsdg
Chapter 3 - Text.pptsdgChapter 3 - Text.pptsdg
Chapter 3 - Text.pptsdg
Β 
Text
TextText
Text
Β 
ENGL 2950 Peer Review for BrochureFlyer Assignment Brochure.docx
ENGL 2950 Peer Review for BrochureFlyer Assignment Brochure.docxENGL 2950 Peer Review for BrochureFlyer Assignment Brochure.docx
ENGL 2950 Peer Review for BrochureFlyer Assignment Brochure.docx
Β 
Graphic Design Tips for Board Game Desigenrs
Graphic Design Tips for Board Game DesigenrsGraphic Design Tips for Board Game Desigenrs
Graphic Design Tips for Board Game Desigenrs
Β 
Cyberworx Brand identity
Cyberworx Brand identityCyberworx Brand identity
Cyberworx Brand identity
Β 
Elements of Graphic design.pptx
Elements of Graphic design.pptxElements of Graphic design.pptx
Elements of Graphic design.pptx
Β 
How to use Canva to effectively promote your brand?
How to use Canva to effectively promote your brand?How to use Canva to effectively promote your brand?
How to use Canva to effectively promote your brand?
Β 
Power point 2003 design principles v2009
Power point 2003 design principles v2009Power point 2003 design principles v2009
Power point 2003 design principles v2009
Β 
Type
TypeType
Type
Β 
Fonts!
Fonts!Fonts!
Fonts!
Β 
Design Getting Your Message Across
Design Getting Your Message AcrossDesign Getting Your Message Across
Design Getting Your Message Across
Β 
Graphic design intro2
Graphic design intro2Graphic design intro2
Graphic design intro2
Β 
how to make Presentation Part 2
how to make Presentation Part 2how to make Presentation Part 2
how to make Presentation Part 2
Β 
Design Intro
Design IntroDesign Intro
Design Intro
Β 
8 Typography Notes
8 Typography Notes8 Typography Notes
8 Typography Notes
Β 
Teacher Feedback
Teacher FeedbackTeacher Feedback
Teacher Feedback
Β 
Overview 20150928
 Overview 20150928 Overview 20150928
Overview 20150928
Β 
Writewithppt
WritewithpptWritewithppt
Writewithppt
Β 

More from coachhahn

THe Evolution of Web Design
THe Evolution of Web DesignTHe Evolution of Web Design
THe Evolution of Web Designcoachhahn
Β 
Illustrations
IllustrationsIllustrations
Illustrationscoachhahn
Β 
Formatting Charts
Formatting ChartsFormatting Charts
Formatting Chartscoachhahn
Β 
Creating and Modifying Charts
Creating and Modifying ChartsCreating and Modifying Charts
Creating and Modifying Chartscoachhahn
Β 
Communications & Networks
Communications & NetworksCommunications & Networks
Communications & Networkscoachhahn
Β 
Communications & Networks
Communications & NetworksCommunications & Networks
Communications & Networkscoachhahn
Β 
Communications and Networks
Communications and NetworksCommunications and Networks
Communications and Networkscoachhahn
Β 
Format and Modify Text and Display and Print Formulas
Format and Modify Text and Display and Print FormulasFormat and Modify Text and Display and Print Formulas
Format and Modify Text and Display and Print Formulascoachhahn
Β 
Banners
BannersBanners
Bannerscoachhahn
Β 
Summarize Data Using a Formula
Summarize Data Using a FormulaSummarize Data Using a Formula
Summarize Data Using a Formulacoachhahn
Β 
Reference Data in Formulas
Reference Data in FormulasReference Data in Formulas
Reference Data in Formulascoachhahn
Β 
Impact of Images
Impact of ImagesImpact of Images
Impact of Imagescoachhahn
Β 
Format as a Table
Format as a TableFormat as a Table
Format as a Tablecoachhahn
Β 
Repetition and Unity
Repetition and UnityRepetition and Unity
Repetition and Unitycoachhahn
Β 
Formatting Cells
Formatting CellsFormatting Cells
Formatting Cellscoachhahn
Β 
Balance & Proximity
Balance & ProximityBalance & Proximity
Balance & Proximitycoachhahn
Β 
Rows and Columns
Rows and ColumnsRows and Columns
Rows and Columnscoachhahn
Β 
Movement
MovementMovement
Movementcoachhahn
Β 
Formatting Worksheets
Formatting WorksheetsFormatting Worksheets
Formatting Worksheetscoachhahn
Β 

More from coachhahn (20)

THe Evolution of Web Design
THe Evolution of Web DesignTHe Evolution of Web Design
THe Evolution of Web Design
Β 
Illustrations
IllustrationsIllustrations
Illustrations
Β 
Formatting Charts
Formatting ChartsFormatting Charts
Formatting Charts
Β 
Creating and Modifying Charts
Creating and Modifying ChartsCreating and Modifying Charts
Creating and Modifying Charts
Β 
Communications & Networks
Communications & NetworksCommunications & Networks
Communications & Networks
Β 
Communications & Networks
Communications & NetworksCommunications & Networks
Communications & Networks
Β 
Communications and Networks
Communications and NetworksCommunications and Networks
Communications and Networks
Β 
Format and Modify Text and Display and Print Formulas
Format and Modify Text and Display and Print FormulasFormat and Modify Text and Display and Print Formulas
Format and Modify Text and Display and Print Formulas
Β 
Banners
BannersBanners
Banners
Β 
Logos
LogosLogos
Logos
Β 
Summarize Data Using a Formula
Summarize Data Using a FormulaSummarize Data Using a Formula
Summarize Data Using a Formula
Β 
Reference Data in Formulas
Reference Data in FormulasReference Data in Formulas
Reference Data in Formulas
Β 
Impact of Images
Impact of ImagesImpact of Images
Impact of Images
Β 
Format as a Table
Format as a TableFormat as a Table
Format as a Table
Β 
Repetition and Unity
Repetition and UnityRepetition and Unity
Repetition and Unity
Β 
Formatting Cells
Formatting CellsFormatting Cells
Formatting Cells
Β 
Balance & Proximity
Balance & ProximityBalance & Proximity
Balance & Proximity
Β 
Rows and Columns
Rows and ColumnsRows and Columns
Rows and Columns
Β 
Movement
MovementMovement
Movement
Β 
Formatting Worksheets
Formatting WorksheetsFormatting Worksheets
Formatting Worksheets
Β 

Recently uploaded

Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxKarra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxAshokKarra1
Β 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatYousafMalik24
Β 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4MiaBumagat1
Β 
Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Celine George
Β 
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxAnupkumar Sharma
Β 
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...JhezDiaz1
Β 
Q4 English4 Week3 PPT Melcnmg-based.pptx
Q4 English4 Week3 PPT Melcnmg-based.pptxQ4 English4 Week3 PPT Melcnmg-based.pptx
Q4 English4 Week3 PPT Melcnmg-based.pptxnelietumpap1
Β 
Science 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxScience 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxMaryGraceBautista27
Β 
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfLike-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfMr Bounab Samir
Β 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersSabitha Banu
Β 
Full Stack Web Development Course for Beginners
Full Stack Web Development Course  for BeginnersFull Stack Web Development Course  for Beginners
Full Stack Web Development Course for BeginnersSabitha Banu
Β 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSJoshuaGantuangco2
Β 
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfSpandanaRallapalli
Β 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Celine George
Β 
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfInclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfTechSoup
Β 
Judging the Relevance and worth of ideas part 2.pptx
Judging the Relevance  and worth of ideas part 2.pptxJudging the Relevance  and worth of ideas part 2.pptx
Judging the Relevance and worth of ideas part 2.pptxSherlyMaeNeri
Β 
Keynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designKeynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designMIPLM
Β 
Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Celine George
Β 
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxGas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxDr.Ibrahim Hassaan
Β 

Recently uploaded (20)

Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxKarra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptx
Β 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice great
Β 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4
Β 
Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17
Β 
Model Call Girl in Tilak Nagar Delhi reach out to us at πŸ”9953056974πŸ”
Model Call Girl in Tilak Nagar Delhi reach out to us at πŸ”9953056974πŸ”Model Call Girl in Tilak Nagar Delhi reach out to us at πŸ”9953056974πŸ”
Model Call Girl in Tilak Nagar Delhi reach out to us at πŸ”9953056974πŸ”
Β 
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
Β 
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
Β 
Q4 English4 Week3 PPT Melcnmg-based.pptx
Q4 English4 Week3 PPT Melcnmg-based.pptxQ4 English4 Week3 PPT Melcnmg-based.pptx
Q4 English4 Week3 PPT Melcnmg-based.pptx
Β 
Science 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxScience 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptx
Β 
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfLike-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Β 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginners
Β 
Full Stack Web Development Course for Beginners
Full Stack Web Development Course  for BeginnersFull Stack Web Development Course  for Beginners
Full Stack Web Development Course for Beginners
Β 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
Β 
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdf
Β 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17
Β 
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfInclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Β 
Judging the Relevance and worth of ideas part 2.pptx
Judging the Relevance  and worth of ideas part 2.pptxJudging the Relevance  and worth of ideas part 2.pptx
Judging the Relevance and worth of ideas part 2.pptx
Β 
Keynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designKeynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-design
Β 
Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17
Β 
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxGas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptx
Β 

The Elements of Design - Texture and Typography

  • 2. Lesson Overview ο‚› In this lesson, you will: ο‚› Explore the use of texture in Web design ο‚› Explore the use of typography in Web design
  • 3. Guiding Question ο‚› Does the style of text used in a publication convey emotion?
  • 4. Texture ο‚› Texture is the use of certain design techniques to create the illusion of depth or three dimensions on a flat surface ο‚› Can be achieved through the use of: ο‚› Lines ο‚› Shadows ο‚› Color to highlight
  • 5. Using Lines for Texture ο‚› Lines can be used to create texture by showing details in objects. ο‚› Examples: ο‚› Detail lines in hand-drawn images ο‚› Veins on leaves ο‚› Grain lines on a piece of wood ο‚› Hair or fur on an animal ο‚› Illusion that object is not flat
  • 6. Using Shadows to Create Texture ο‚› Make an object appear to be raised off the surface ο‚› By adding a shadow to text or other object, the designer is trying to create an illusion. ο‚› Can be added to: ο‚› Text ο‚› Buttons ο‚› Image outlines
  • 7. Using Texture as a Background ο‚› Texture can also be added to the background of a Web site ο‚› Can add visual appeal ο‚› Can be distracting if used incorrectly ο‚› When using a textured background, designers should place elements, such as text and objects, inside a solid colored shape
  • 8. Typography ο‚› Refers to the design of the fonts used on a page ο‚› Involves choices of: ο‚› Style ο‚› Emphasis ο‚› Size ο‚› Color
  • 9. Style ο‚› Font style is a description of how the letters in the font are shaped ο‚› The commonly used styles are: ο‚› Serif, and ο‚› Sans-Serif
  • 10. Style ο‚› Serif font ο‚› Small strokes at the end of letters ο‚› Useful in printed material ο‚› Example: Times New Roman ο‚› Sans-serif font ο‚› Drops the strokes at the end of letters ο‚› Useful in electronic material ο‚› Example: Arial
  • 11. Style ο‚› Decorative ο‚› Script Font: Apple Chancery ο‚› Historic or elegant look ο‚› Difficult to read in longer portions of text ο‚› Symbol Font: Webdings (Webdings) ο‚› Symbols for letters or words ο‚› Secret codes ο‚› Mr. Hahn is cool!
  • 12. Emphasis ο‚›A way to call attention to a word or a portion of your text is by using emphasis ο‚› You need to be consistent in your use within the site. ο‚› Examples: ο‚› Bold ο‚› Italics ο‚› Color
  • 13. Size Measured by points 8 pt ο‚› 12 pt ο‚› Point = 1/72 inch 20 pt Sizes for Web design ο‚› ο‚› 12 points or 14 points 36 pt 10 points or lower: 48 pt ο‚› hard to read ο‚› 16 points or higher: 60pt used for headings
  • 14. Typography Sends a Message ο‚› Some styles communicate an emotion or a feeling ο‚› Decorative – historic or elegant ο‚› Capital Letters – ANGER OR SHOUTING
  • 15. Lesson Review ο‚› Howdoes the use of texture and typography apply to Web design?

Editor's Notes

  1. Typography refers to the design of the fonts. Typography involves choices concerning font style, emphasis, size, and color.
  2. Size is another dimension of typography. In typography, size is measured by a method called a point. A point is 1/72 of an inch. In Web design, it is customary to use font sizes of 12 pt or 14 pt. Font sizes below 10 pt are difficult to read and font sizes above 14 pt should be reserved for headings. The use of larger font sizes for headings is another way a Web designer can organize the site. When looking at a Web site, the viewer is sometimes looking for a specific piece of information. By using headings to organize a site, the designer makes this method of quickly finding information much easier.
  3. This is the last slide of the presentation.