SlideShare a Scribd company logo
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
“Design is not just what
 it looks like and feels like.
 Design is how it works.”
                    - Steve jobs
You’re Already On Your Way
•  WordPress works pretty damn well
   “out of the box”
•  Don’t let your theme & widgets
   get in the way of that
•  Good site design should emphasize
   your content, not itself
But…
“Everybody thinks they have
 good taste and a sense of
 humor but they couldn't
 possibly all have good taste.”
               - When Harry Met Sally
Good taste is
 subjective.
Good design:
not so much.
Photo: emiliokuffer on Flickr
Look Around. Get Inspired.
•  Pay attention to what you like about other sites
•  Find & Follow creative curators on the web
   and via social channels (like fastcodesign.com)
•  Listen to recommendations from designers
•  Apply what you learn
Start by making
your site your own.
Photo: LeonMMelissa on Flickr
Color
Color
•  The easiest way to make any site stand out
•  Mix pairs of unusual colors or pick one
   dominant color for emphasis
•  A little goes a long way,
   even monochromatic tones
   can be powerful
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
Typography
Type Tips
•  Web fonts (@fontface) now allow you to use
   a variety of different fonts
•  Perfect way to add a
   unique touch to any design
•  Don’t use too many
•  Be careful when mixing
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
Photos
Show Don’t Just Tell
•  Great photos are another powerful way to make
   your design stand out
•  Create rules for formatting and be
   consistent (rounded corners, specific width, right-
   aligned, etc.)
•  Always credit sources.
   Don’t steal!
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
Page Templates
Use Different Page Templates
•  Built into many themes
•  Creates variety,
•  Can enhance different
   types of content
Theme Customizer
•  Introduced in WordPress 3.4
•  Make changes, preview them in realtime,
   before going live
•  More options to as theme
   developers further integrate
   it into updates
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
Premium
   Theme
Frameworks
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
Plugins
Plugins
•  Choose plugins that add functionality
   but allow control over their style/design
•  Take advantage of those controls to tie into
   your site’s style whenever possible
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
Sidebar
Triage Your Sidebar Often
•  Only include what you NEED to
•  Avoid too many third-party widgets (Facebook,
   Twitter, Flickr), can slow page load times
•  Limit # & size of ads unless
   you are making lots of money
•  Animated anything = annoying
:(
:)
Default widgets usually need tweaking
Consider consolidation
Other Bits & Pieces
•  Create & usa a favicon
•  Use built-in text formatting for posts & pages
   (H1, H2, blockquote, etc.)
•  Less is ALWAYS better.
   Simplicty is never a bad choice.
“A designer knows he has
achieved perfection not when
there is nothing left to add,
but when there is nothing left
to take away.”
             - Antoine de Saint Exupéry
Photo: Tsahi Levent-Levi on Flickr
Thank you!
      Mykl Roventine
      myklroventine.com
      @myklroventine

                    Headshot: Glimpses of Soul Photography

More Related Content

PDF
The Non-designer's Guide to WordPress (Making Your Site Awesome)
PDF
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
PDF
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
PDF
How to ensure a long life span for a website?
PDF
How to ensure a long life span for a website (WPHelsinki 2.11.2016)
PPTX
Minnesota Timberwolves - Digital Media Web Design Creative Presentation
PDF
User Focused Rapid Prototyping with small budgets using Drupal
PPTX
Wiu talk
The Non-designer's Guide to WordPress (Making Your Site Awesome)
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
How to ensure a long life span for a website?
How to ensure a long life span for a website (WPHelsinki 2.11.2016)
Minnesota Timberwolves - Digital Media Web Design Creative Presentation
User Focused Rapid Prototyping with small budgets using Drupal
Wiu talk

What's hot (19)

KEY
How to start a blog - Fabric Bradford
KEY
Stand Out Online and Land an Interview
PDF
Start Your Website for Free!
PPTX
Designing & Developing for Content in WordPress
KEY
WordPress Beginner Track
PDF
What web designers could learn from print designers
PDF
Mobile and Responsive Design with Sass
PDF
From WordPress Configurator to WordPress Developer
PDF
Jumpstart Your Web App
PPTX
WordPress for Nonprofits- TechTuesday
PPT
My project
KEY
Designing in the Browser - Mason Wendell, Drupaldelphia
PPT
Vocabulary picture book
PPTX
Creating Landing Pages That Convert
PPTX
WordPress Tips & Tricks
PDF
Quick, Useful UI Sketches
PDF
The Coding Designer's Survival Kit - Capital Camp
PDF
Quick, Useful UI Sketches
How to start a blog - Fabric Bradford
Stand Out Online and Land an Interview
Start Your Website for Free!
Designing & Developing for Content in WordPress
WordPress Beginner Track
What web designers could learn from print designers
Mobile and Responsive Design with Sass
From WordPress Configurator to WordPress Developer
Jumpstart Your Web App
WordPress for Nonprofits- TechTuesday
My project
Designing in the Browser - Mason Wendell, Drupaldelphia
Vocabulary picture book
Creating Landing Pages That Convert
WordPress Tips & Tricks
Quick, Useful UI Sketches
The Coding Designer's Survival Kit - Capital Camp
Quick, Useful UI Sketches
Ad

Similar to The Non-Designers Guide to WordPress (Making Your Site Look Awesome) (20)

PPTX
Lecture4
PPTX
Rational Website Design
PDF
guide3_webwork
PPT
elc200day13.ppt
PPTX
2011 05 word-press-not-just-for-blogging-anymore
PPTX
20 tips, tricks and secrets to making your WordPress website look professional
PPT
Developing Successful Websites
PDF
WordPress for Designers
PPTX
Customizing WordPress Themes
KEY
Web Design 101
PPTX
Beginning Site Design
PDF
Tech 802: Web Design Part 2
DOCX
PPTX
Wp nhcc portfolio
PPTX
Better design dpcon 4a
PDF
Advanced WordPress: Session II
PPT
Web Design by Client Perspective
PPT
Design selection demo.2
PDF
How To Build An Online Portfolio
Lecture4
Rational Website Design
guide3_webwork
elc200day13.ppt
2011 05 word-press-not-just-for-blogging-anymore
20 tips, tricks and secrets to making your WordPress website look professional
Developing Successful Websites
WordPress for Designers
Customizing WordPress Themes
Web Design 101
Beginning Site Design
Tech 802: Web Design Part 2
Wp nhcc portfolio
Better design dpcon 4a
Advanced WordPress: Session II
Web Design by Client Perspective
Design selection demo.2
How To Build An Online Portfolio
Ad

More from Mykl Roventine (20)

PDF
Inclusive Design: Website Accessibility with WordPress
PDF
More Than Words: The Power of Type
PDF
Social Media Strategies for Small Organizations
PDF
More Than Words: The Power of Type
PDF
Design Principles Overview
PDF
Design Principles for Non-Designers
PDF
Visual Storytelling: The State of “Show Me” Social Sharing
PDF
Planning for the Encore: Building An Online Community That Begs For More
PDF
Lets Get Social
PDF
Blogging Basics (for Nonprofits)
PDF
15 Essential WordPress Plugins (and 5 That Will Just Blow Your Mind)
PDF
Word press plugins speed datingWordPress Plugin Speed Dating
PDF
Demystifying WordPress
PDF
15 Essential WordPress Plugins
PDF
Just Your Type: Web Typography & You
PDF
Making WordPress Your Own: Theme Customization & Creation
KEY
Twitter Tools
PDF
Web Typography: Viva La Revolution!
PDF
You're So Money and You Don’t Even Know It: The Power of Real on the Social Web
KEY
Send/Receive: How to Make Telecommunications part of the social conversation
Inclusive Design: Website Accessibility with WordPress
More Than Words: The Power of Type
Social Media Strategies for Small Organizations
More Than Words: The Power of Type
Design Principles Overview
Design Principles for Non-Designers
Visual Storytelling: The State of “Show Me” Social Sharing
Planning for the Encore: Building An Online Community That Begs For More
Lets Get Social
Blogging Basics (for Nonprofits)
15 Essential WordPress Plugins (and 5 That Will Just Blow Your Mind)
Word press plugins speed datingWordPress Plugin Speed Dating
Demystifying WordPress
15 Essential WordPress Plugins
Just Your Type: Web Typography & You
Making WordPress Your Own: Theme Customization & Creation
Twitter Tools
Web Typography: Viva La Revolution!
You're So Money and You Don’t Even Know It: The Power of Real on the Social Web
Send/Receive: How to Make Telecommunications part of the social conversation

Recently uploaded (20)

PDF
Spectral efficient network and resource selection model in 5G networks
PPTX
A Presentation on Artificial Intelligence
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
PDF
Encapsulation theory and applications.pdf
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
DOCX
The AUB Centre for AI in Media Proposal.docx
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PDF
Network Security Unit 5.pdf for BCA BBA.
PDF
KodekX | Application Modernization Development
PDF
Approach and Philosophy of On baking technology
PDF
Modernizing your data center with Dell and AMD
PDF
Machine learning based COVID-19 study performance prediction
PDF
CIFDAQ's Market Insight: SEC Turns Pro Crypto
Spectral efficient network and resource selection model in 5G networks
A Presentation on Artificial Intelligence
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
Review of recent advances in non-invasive hemoglobin estimation
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
Encapsulation theory and applications.pdf
Mobile App Security Testing_ A Comprehensive Guide.pdf
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
The AUB Centre for AI in Media Proposal.docx
NewMind AI Weekly Chronicles - August'25 Week I
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Diabetes mellitus diagnosis method based random forest with bat algorithm
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
Network Security Unit 5.pdf for BCA BBA.
KodekX | Application Modernization Development
Approach and Philosophy of On baking technology
Modernizing your data center with Dell and AMD
Machine learning based COVID-19 study performance prediction
CIFDAQ's Market Insight: SEC Turns Pro Crypto

The Non-Designers Guide to WordPress (Making Your Site Look Awesome)

  • 2. “Design is not just what it looks like and feels like. Design is how it works.” - Steve jobs
  • 3. You’re Already On Your Way •  WordPress works pretty damn well “out of the box” •  Don’t let your theme & widgets get in the way of that •  Good site design should emphasize your content, not itself
  • 5. “Everybody thinks they have good taste and a sense of humor but they couldn't possibly all have good taste.” - When Harry Met Sally
  • 6. Good taste is subjective. Good design: not so much.
  • 8. Look Around. Get Inspired. •  Pay attention to what you like about other sites •  Find & Follow creative curators on the web and via social channels (like fastcodesign.com) •  Listen to recommendations from designers •  Apply what you learn
  • 9. Start by making your site your own.
  • 11. Color
  • 12. Color •  The easiest way to make any site stand out •  Mix pairs of unusual colors or pick one dominant color for emphasis •  A little goes a long way, even monochromatic tones can be powerful
  • 18. Type Tips •  Web fonts (@fontface) now allow you to use a variety of different fonts •  Perfect way to add a unique touch to any design •  Don’t use too many •  Be careful when mixing
  • 23. Show Don’t Just Tell •  Great photos are another powerful way to make your design stand out •  Create rules for formatting and be consistent (rounded corners, specific width, right- aligned, etc.) •  Always credit sources. Don’t steal!
  • 29. Use Different Page Templates •  Built into many themes •  Creates variety, •  Can enhance different types of content
  • 30. Theme Customizer •  Introduced in WordPress 3.4 •  Make changes, preview them in realtime, before going live •  More options to as theme developers further integrate it into updates
  • 32. Premium Theme Frameworks
  • 36. Plugins •  Choose plugins that add functionality but allow control over their style/design •  Take advantage of those controls to tie into your site’s style whenever possible
  • 42. Triage Your Sidebar Often •  Only include what you NEED to •  Avoid too many third-party widgets (Facebook, Twitter, Flickr), can slow page load times •  Limit # & size of ads unless you are making lots of money •  Animated anything = annoying
  • 43. :(
  • 44. :)
  • 45. Default widgets usually need tweaking
  • 47. Other Bits & Pieces •  Create & usa a favicon •  Use built-in text formatting for posts & pages (H1, H2, blockquote, etc.) •  Less is ALWAYS better. Simplicty is never a bad choice.
  • 48. “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” - Antoine de Saint Exupéry
  • 50. Thank you! Mykl Roventine myklroventine.com @myklroventine Headshot: Glimpses of Soul Photography