SlideShare a Scribd company logo
The Elements of Design
Doug Yuen and Mary Ann Aschenbrenner
Slides: https://efficientwp.com/elements-design
What We’ll Cover
● Style
● Examples
● Color
● Typography
● Fonts
● Paragraph styling
● Spacing
● Contrast and consistency
● Calls to action
● Plugins
Slides: https://efficientwp.com/elements-design
Style
Be consistent in your style throughout the site.
Example: Flat design is characterized as two-dimensional, minimalist, and using
simple elements and strong colors.
● https://www.webdesignerdepot.com/2013/09/the-ultimate-guide-to-flat-design/
● https://designmodo.com/flat-design-principles/
Slides: https://efficientwp.com/elements-design
Examples
● https://stripe.com
● https://www.studiopress.com
● https://planscope.io
● https://carthook.com
● https://www.never5.com
● https://warfareplugins.com
● https://uptimerobot.com
Slides: https://efficientwp.com/elements-design
Color
● There should be high contrast between text and background colors.
● Consider using very dark gray (i.e. #222) instead of black (#000).
● Consider using off-white (i.e. #EEE) instead of white (#FFF).
Slides: https://efficientwp.com/elements-design
Color Reference and Tools
● Adobe Color Wheel: https://color.adobe.com/create/color-wheel/
● Great article on color theory:
https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1
-the-meaning-of-color/
● Flat UI color palette: http://flatuicolors.com/
● Hex Color Tool: https://hexcolortool.com/
● Paletton: http://paletton.com
Slides: https://efficientwp.com/elements-design
Typography
● Font size. The text should be easy to read at a distance.
● Font weight. There's more than just normal and bold.
● Letter spacing. Can make a big difference, sometimes used for headings.
● Line height. Recommended ratio: 1.6. (Golden Ratio: 1.618)
● Paragraph spacing. Recommended: at least one line of text.
Slides: https://efficientwp.com/elements-design
Fonts
● Readability. Check how the font looks for all characters, in bold, all caps, etc.
Some have strange styling for certain letters. Some fonts have limited ranges of
font weight.
● Contrast. Headings and body text should be distinct from each other, either
with size or font (serif and sans-serif pairings are common).
● Contrast between font color and background color. Another factor in
readability.
● Contrast Ratio Tool: http://leaverou.github.io/contrast-ratio/ A contrast of 80%
is great (8.6 on tool = 86%).
Slides: https://efficientwp.com/elements-design
Paragraph Styling
● Avoid centering paragraphs (and sometimes multi-line headlines too).
● Avoid using justified text alignment.
● Add variation to long form text with headings, bulleted lists, bold, links, images,
highlighted boxes, etc.
● Don’t have too many words per line, which can be hard to read across the
screen. This depends on font size and width of content area.
○ Limit line length — 45 to 75 characters (about 10 words per line)
○ Type Set With Me: https://typesetwith.me/
Slides: https://efficientwp.com/elements-design
Spacing
● Use white space and padding around elements for breathing room.
● The old “above the fold” rule is dead. Don’t stuff too much content in the header
area.
● Consider stacking order of columns:
Laptop example above / cell phone example to the right.
Column gutters should be at least 20 pixels wide.
2 1 3
1
2
3
Slides: https://efficientwp.com/elements-design
Contrast and Consistency
● Use contrast in shape, size, and color for distinct elements.
● Use consistency in shape, size, and color for related elements.
● Group and align related elements.
● Don't use too many different colors, fonts, and font sizes.
● Good article on UI: http://goodui.org
Slides: https://efficientwp.com/elements-design
Calls to Action
● These are the buttons and links that are most important for visitors to click on.
● They need to stand out from the rest of the content.
● Use high contrast color(s).
● Buttons should be large enough to easily touch on a cell phone and
surrounded with enough white space.
Slides: https://efficientwp.com/elements-design
Plugins
Beaver Builder
● Page builder with columns, buttons, background sections, spacers, etc.
● Free: https://wordpress.org/plugins/beaver-builder-lite-version/
● Premium: https://www.wpbeaverbuilder.com
Shortcodes Ultimate
● Shortcode generator for similar kinds of elements.
● Free: https://wordpress.org/plugins/shortcodes-ultimate/
Slides: https://efficientwp.com/elements-design
Thanks!
Doug Yuen
https://efficientwp.com
doug@efficientwp.com
@Doug_Yuen
Mary Ann Aschenbrenner
Waterlink Web | connecting your customers with you
connect@waterlinkweb.com

More Related Content

Similar to The Elements of Design

Intro to Graphic Design Elements
Intro to Graphic Design ElementsIntro to Graphic Design Elements
Intro to Graphic Design Elements
Jordan Open Source Association
 
Making an architectural portfolio for internship
Making an architectural portfolio for internshipMaking an architectural portfolio for internship
Making an architectural portfolio for internship
LeilaSrinivasan
 
E-Content Development - R.D.Sivakumar
E-Content Development - R.D.Sivakumar E-Content Development - R.D.Sivakumar
E-Content Development - R.D.Sivakumar
Sivakumar R D .
 
Weboic website design
Weboic website designWeboic website design
Weboic website design
Nisha Mehra
 
HTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventionsHTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventions
Knoldus Inc.
 
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
BookNet Canada
 
Flat Design - Overview
Flat Design - OverviewFlat Design - Overview
Flat Design - Overview
Joe Buchmann
 
Word press beirut 19th meetup January 2019
Word press beirut 19th meetup   January 2019Word press beirut 19th meetup   January 2019
Word press beirut 19th meetup January 2019
Fadi Nicolas Zahhar
 
Class 7 Layout
Class 7 LayoutClass 7 Layout
Class 7 Layout
rschaff1
 
Introduction Microsoft PowerPoint
Introduction Microsoft PowerPointIntroduction Microsoft PowerPoint
Introduction Microsoft PowerPoint
Mujeeb UR Rahman
 
Google-Slides-Accessibility.pdf
Google-Slides-Accessibility.pdfGoogle-Slides-Accessibility.pdf
Google-Slides-Accessibility.pdf
RamSingh355655
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
Rex Wang
 
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
 
HICapacity UI talk by Kathryne Sakata
HICapacity UI talk by Kathryne SakataHICapacity UI talk by Kathryne Sakata
HICapacity UI talk by Kathryne Sakata
hicapacity
 
Presentations tips
Presentations tipsPresentations tips
Presentations tips
Monil Sheth
 
Wireframes for Web Design
Wireframes for Web DesignWireframes for Web Design
Wireframes for Web Design
Mindy McAdams
 
Graphic design for
Graphic design forGraphic design for
Graphic design for
Philip Sweezey
 
Design Credibility: No one trusts an ugly website
Design Credibility: No one trusts an ugly websiteDesign Credibility: No one trusts an ugly website
Design Credibility: No one trusts an ugly website
nonlinear creations
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
tutorialsruby
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
tutorialsruby
 

Similar to The Elements of Design (20)

Intro to Graphic Design Elements
Intro to Graphic Design ElementsIntro to Graphic Design Elements
Intro to Graphic Design Elements
 
Making an architectural portfolio for internship
Making an architectural portfolio for internshipMaking an architectural portfolio for internship
Making an architectural portfolio for internship
 
E-Content Development - R.D.Sivakumar
E-Content Development - R.D.Sivakumar E-Content Development - R.D.Sivakumar
E-Content Development - R.D.Sivakumar
 
Weboic website design
Weboic website designWeboic website design
Weboic website design
 
HTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventionsHTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventions
 
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
Faking a Grid - Franco Alvarado (Macmillan Learning), Betsy Granger (Macmilla...
 
Flat Design - Overview
Flat Design - OverviewFlat Design - Overview
Flat Design - Overview
 
Word press beirut 19th meetup January 2019
Word press beirut 19th meetup   January 2019Word press beirut 19th meetup   January 2019
Word press beirut 19th meetup January 2019
 
Class 7 Layout
Class 7 LayoutClass 7 Layout
Class 7 Layout
 
Introduction Microsoft PowerPoint
Introduction Microsoft PowerPointIntroduction Microsoft PowerPoint
Introduction Microsoft PowerPoint
 
Google-Slides-Accessibility.pdf
Google-Slides-Accessibility.pdfGoogle-Slides-Accessibility.pdf
Google-Slides-Accessibility.pdf
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
 
Making Your Site Printable: Booster Conference
Making Your Site Printable: Booster ConferenceMaking Your Site Printable: Booster Conference
Making Your Site Printable: Booster Conference
 
HICapacity UI talk by Kathryne Sakata
HICapacity UI talk by Kathryne SakataHICapacity UI talk by Kathryne Sakata
HICapacity UI talk by Kathryne Sakata
 
Presentations tips
Presentations tipsPresentations tips
Presentations tips
 
Wireframes for Web Design
Wireframes for Web DesignWireframes for Web Design
Wireframes for Web Design
 
Graphic design for
Graphic design forGraphic design for
Graphic design for
 
Design Credibility: No one trusts an ugly website
Design Credibility: No one trusts an ugly websiteDesign Credibility: No one trusts an ugly website
Design Credibility: No one trusts an ugly website
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
 

Recently uploaded

ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
jhonguerrerobarturen
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
peuce
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
amrsoftec1
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
Techno Merch
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
kecekev
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
PabloMartelLpez
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
eloprejohn333
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
GOWSIKRAJA PALANISAMY
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
asuzyq
 

Recently uploaded (20)

ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
 

The Elements of Design

  • 1. The Elements of Design Doug Yuen and Mary Ann Aschenbrenner
  • 2. Slides: https://efficientwp.com/elements-design What We’ll Cover ● Style ● Examples ● Color ● Typography ● Fonts ● Paragraph styling ● Spacing ● Contrast and consistency ● Calls to action ● Plugins
  • 3. Slides: https://efficientwp.com/elements-design Style Be consistent in your style throughout the site. Example: Flat design is characterized as two-dimensional, minimalist, and using simple elements and strong colors. ● https://www.webdesignerdepot.com/2013/09/the-ultimate-guide-to-flat-design/ ● https://designmodo.com/flat-design-principles/
  • 4. Slides: https://efficientwp.com/elements-design Examples ● https://stripe.com ● https://www.studiopress.com ● https://planscope.io ● https://carthook.com ● https://www.never5.com ● https://warfareplugins.com ● https://uptimerobot.com
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12. Slides: https://efficientwp.com/elements-design Color ● There should be high contrast between text and background colors. ● Consider using very dark gray (i.e. #222) instead of black (#000). ● Consider using off-white (i.e. #EEE) instead of white (#FFF).
  • 13. Slides: https://efficientwp.com/elements-design Color Reference and Tools ● Adobe Color Wheel: https://color.adobe.com/create/color-wheel/ ● Great article on color theory: https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1 -the-meaning-of-color/ ● Flat UI color palette: http://flatuicolors.com/ ● Hex Color Tool: https://hexcolortool.com/ ● Paletton: http://paletton.com
  • 14. Slides: https://efficientwp.com/elements-design Typography ● Font size. The text should be easy to read at a distance. ● Font weight. There's more than just normal and bold. ● Letter spacing. Can make a big difference, sometimes used for headings. ● Line height. Recommended ratio: 1.6. (Golden Ratio: 1.618) ● Paragraph spacing. Recommended: at least one line of text.
  • 15. Slides: https://efficientwp.com/elements-design Fonts ● Readability. Check how the font looks for all characters, in bold, all caps, etc. Some have strange styling for certain letters. Some fonts have limited ranges of font weight. ● Contrast. Headings and body text should be distinct from each other, either with size or font (serif and sans-serif pairings are common). ● Contrast between font color and background color. Another factor in readability. ● Contrast Ratio Tool: http://leaverou.github.io/contrast-ratio/ A contrast of 80% is great (8.6 on tool = 86%).
  • 16. Slides: https://efficientwp.com/elements-design Paragraph Styling ● Avoid centering paragraphs (and sometimes multi-line headlines too). ● Avoid using justified text alignment. ● Add variation to long form text with headings, bulleted lists, bold, links, images, highlighted boxes, etc. ● Don’t have too many words per line, which can be hard to read across the screen. This depends on font size and width of content area. ○ Limit line length — 45 to 75 characters (about 10 words per line) ○ Type Set With Me: https://typesetwith.me/
  • 17. Slides: https://efficientwp.com/elements-design Spacing ● Use white space and padding around elements for breathing room. ● The old “above the fold” rule is dead. Don’t stuff too much content in the header area. ● Consider stacking order of columns: Laptop example above / cell phone example to the right. Column gutters should be at least 20 pixels wide. 2 1 3 1 2 3
  • 18. Slides: https://efficientwp.com/elements-design Contrast and Consistency ● Use contrast in shape, size, and color for distinct elements. ● Use consistency in shape, size, and color for related elements. ● Group and align related elements. ● Don't use too many different colors, fonts, and font sizes. ● Good article on UI: http://goodui.org
  • 19. Slides: https://efficientwp.com/elements-design Calls to Action ● These are the buttons and links that are most important for visitors to click on. ● They need to stand out from the rest of the content. ● Use high contrast color(s). ● Buttons should be large enough to easily touch on a cell phone and surrounded with enough white space.
  • 20. Slides: https://efficientwp.com/elements-design Plugins Beaver Builder ● Page builder with columns, buttons, background sections, spacers, etc. ● Free: https://wordpress.org/plugins/beaver-builder-lite-version/ ● Premium: https://www.wpbeaverbuilder.com Shortcodes Ultimate ● Shortcode generator for similar kinds of elements. ● Free: https://wordpress.org/plugins/shortcodes-ultimate/
  • 21. Slides: https://efficientwp.com/elements-design Thanks! Doug Yuen https://efficientwp.com doug@efficientwp.com @Doug_Yuen Mary Ann Aschenbrenner Waterlink Web | connecting your customers with you connect@waterlinkweb.com