Don't let the first slide fool you, this presentation is a whirlwind of approaching your WordPress website with an understanding of graphic design and web design. As commercial creatives, it's all about getting someone, somewhere, to do something. Plus, some videos (linked below), resources to learn more, and some tips on life (and dealing with your career and clients). Presented in Fayetteville, Arkansas on June 23, 2018. Resources: New Divi Version Introduction: https://youtu.be/ye19dUokx0g (Divi by Elegant Themes) Gutenberg Introduction: https://youtu.be/E6qmCnC1QJQ (WordCamp Miami / WPGive.com) The Hero's Journey: https://youtu.be/Hhk4N9A0oCA (TED Education) ________________ Presented by Eric Huber, Partner/Chief Creative Officer Blue Zoo | A Creative Agency http://www.bluezoocreative.com Blue Zoo collaborates with our clients to build brands, empower businesses, and transform the lives of our clients and their customers. From the delightful to the weird and from the informative to the entertaining, we create digital and print experiences that help businesses of all sizes thrive. Just Eric... http://www.erichuber.com LinkedIn: https://www.linkedin.com/in/erichuberinarkansas Twitter: https://twitter.com/eric_huber Facebook: https://www.facebook.com/eric.huber.usa

1. Show Me:
Design Tips and Strategies
for Your WordPress Website
(and life!)

2. SHOW ME:
Design Tips and Strategies
for Your WordPress Website
(and life!)
WordCamp Fayetteville 2018

3. 1940 Lascaux Cave Paintings, France

5. ERIC HUBER
Partner | Chief Creative Officer
@eric_huber (Twitter)
@mightycreative (Instagram)
eric.huber.usa (Facebook)
www.erichuber.com
@bluezoocreative (Twitter & Instagram)
www.bluezoocreative.com
Fayetteville, Arkansas

6. Founded 2008
Collin Condray, CTO
Mark Cloud, CEO
Tracey Young, AE
Scarlett Isbell, Developer

8. GRAPHIC DESIGN
Defined

9. GRAPHIC DESIGN
Purpose
To Inspire Someone,
Somewhere,
to Do Something.

10. Communicate, Educate,
Stimulate, and Motivate.
GRAPHIC DESIGN
Examples

11. ELEMENTS of
DESIGN
The Von Restorff Effect
(be remembered)

12. ELEMENTS of
DESIGN
GESTALT PRINCIPLES
Unified Whole Visual Perception
Similarity

13. ELEMENTS of
DESIGN
GESTALT PRINCIPLES
Unified Whole Visual Perception
Continuation

14. ELEMENTS of
DESIGN
GESTALT PRINCIPLES
Unified Whole Visual Perception
Closure

15. ELEMENTS of
DESIGN
GESTALT PRINCIPLES
Unified Whole Visual Perception
Proximity

16. ELEMENTS of
DESIGN
GESTALT PRINCIPLES
Unified Whole Visual Perception
Figure Ground

17. ELEMENTS of
DESIGN
COLORS
GROUNDED NEUTRAL SOLID

18. ELEMENTS of
DESIGN
IMAGES

19. ELEMENTS of
DESIGN
WORDS

20. ELEMENTS of
DESIGN
TYPOGRAPHY

21. APPROACHING
Your WordPress
Project

22. APPROACHING
Your WordPress
Project
SITEMAP

23. APPROACHING
Your WordPress
Project
SITEMAP
HOME
ABOUT
SERVICES or PRODUCTS
BLOG
Opinion: Blog
Authoritative: Articles
Timely: News
CONTACT

24. APPROACHING
Your WordPress
Project
WIREFRAMING

25. APPROACHING
Your WordPress
Project
TEMPLATES FREE

26. APPROACHING
Your WordPress
Project
TEMPLATES PREMIUM

27. APPROACHING
Your WordPress
Project
BLANK CANVAS
Divi | Genesis | Responsive

28. BASICS
Media Library
ADMIN AREA
1. Drag and Drop into Visual
Editor
2. “Add Media”
3. Drag and Drop one or
multiple files
4. Add descriptions and alt
tags for ADA Compliance
(and search engines)
5. Set alignment
6. Select if you’re linking to
media, URL, or ‘None’
7. Select size. (One step
before uploading)
AND A NOTE ON IMAGES

30. DIVI
WYSIWYG

32. GUTENBERG
WYSIWYG

34. INTEGRATING
EVERYTHING

35. MAKING YOUR
CLIENT PART
OF THE STORY
STORY

37. INTEGRATING
EVERYTHING
What do we want someone
to do and where?
What does that person believe,
want, care about, and do?
What emotions do we want
them to feel?
What colors connect to
those emotions?
What typography matches
with all the above?
What is the “Call to Action?”
QUESTIONS

38. INTEGRATING
EVERYTHING
Image to catch attention
Headline that solves a problem
Sub-headline that shows how
you solve that problem
Content + additional imagery
to reinforce ideas*
Call-to-Action
*Content can be as long as necessary or
send to secondary pages
HIERARCHY
THE “ABOVE THE FOLD” DEBATE

39. INTEGRATING
EVERYTHING
HIERARCHY

40. INTEGRATING
EVERYTHING
HIERARCHY

41. INTEGRATING
EVERYTHING
HIERARCHY

42. HOME ABOUT MODELS NEWS CONTACT
Lemon.
This Volkswagen missed the boat.
Donec molestie luctus ligula ac
egestas. Quisque id sollicitudin
enim. Mauris sed rutrum sapien.
Cras ac mi et libero tristique tempus.
Mauris eget libero euismod, pretium
sapien dignissim, aliquet turpis.
Morbi faucibus tincidunt laoreet.
Nam ut fringilla ex, et dictum tortor.
Sed neque libero, mollis a dictum ut,
dignissim eu neque.
Mauris eget libero euismod, pretium
sapien dignissim, aliquet turpis.
Morbi faucibus tincidunt laoreet.
Nam ut fringilla ex, et dictum tortor.
Sed neque libero, mollis a dictum ut,
dignissim eu neque. Morbi faucibus
tincidunt laoreet. Morbi faucibus
tincidunt laoreet.
Morbi faucibus tincidunt laoreet.
Morbi faucibus tincidunt laoreet.
Quisque id sollicitudin enim. Mauris
sed rutrum sapien. Cras ac mi et
libero tristique tempus. Mauris eget
libero euismod, pretium sapien
dignissim, aliquet turpis. Morbi
faucibus tincidunt laoreet. Nam ut
fringilla ex, et dictum tortor. Sed
neque libero, mollis a dictum ut,
dignissim eu neque.
INTEGRATING
EVERYTHING
HIERARCHY

44. TREAD
on TRENDS
CAREFULLY

45. NEW
TECHNOLOGIES
• Progressive Web Apps (PWAs)
• Chatbots and Artificial
Intelligence
• Blockchain
• Motion UI
• PHP 7
• SSL & HTTPS
• Google AMP
• User Behavior Tracking
• VR and AR
• Responsive Logos

46. 5,000 Hours
SOME
BOOKS
LEARN MORE STUFF

47. 1. Be Impeccable with your Word
2. Don’t Take Anything Personally
3. Don’t Make Assumptions
4. Always Do Your Best
LIFE
AS PROMISED…

48. Creativity is just
connecting things.
When you ask creative
people how they did
something, they feel a little
guilty because
they didn’t really do it, they
just saw something.
~ Steve Jobs

49. QUESTIONS?
Always keep in mind:
Get Someone,
Somewhere,
to do
Something.

50. ERIC HUBER
Partner | Chief Creative Officer
@eric_huber (Twitter)
@mightycreative (Instagram)
eric.huber.usa (Facebook)
www.erichuber.com
@bluezoocreative (Twitter & Instagram)
www.bluezoocreative.com
Fayetteville, Arkansas