Designing Awesome WordPress Websites For Small To Medium Size Businesses

A Commercial Artist’s Approach To The Design Phase Of WordPress Website Design

Transcript

1. A Commercial Artist’s Approach To The Design Phase Of WordPress Website Design Wordcamp Los Angeles 9/21/2013 DESIGNING WORDPRESS WEBSITES FOR SMALL TO MEDIUM SIZE BUSINESSES
2. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Hi, I’m Greg Douglas Principal of Premium Interactive Designer / Front-end Developer Organizer of Hollywood WordPress Meetup premiuminteractive.com hollywoodwp.com premiuminteractive.com/wclax-awesome
3. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Design Business This is a talk about streamlining your design process to better calculate how much time your design phase will take, therefore making your quote/estimate more accurate and your business more profitable. By becoming consciously aware of what is happening in your creative process you can arrive at your creative solutions faster ... and have more fun getting there. 1. 2.
4. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com 4
5. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Organizing Your WordPress Project
6. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Review of Our Canvas Slider Header NAVIGATION Footer Area Widget Widget Widget Body Sidebar Widgetized Area Header Navigation Slider Body Sidebar Footer
7. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Footer Widget Footer Widget Footer Widget H1 H2 H3 Body Content Lorum Ipsum askld kjashfkljh asdjlkfhakjls df klasdfhlkajs d kjahs dkl haskjl fkjla sdfklj asdkljfhakjsl d kjahs- dk j asklj falkjs hd kj asdfkljhasdfklj h Sidebar Widget Sidebar Widget H1, H2, H3, etc. Body Plugins Review of Our Canvas
8. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Selecting A Theme
9. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Things To Keep In Mind When Selecting A Theme Start with a paid theme with good documentation and support Choose a theme that already has some of the page templates you need or that you know you can easily customize to fit your needs We now live in a responsive online world and selecting and designing for themes that are responsive is where it’s at
10. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com 10
11. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com 11 Creating A Vision Board
12. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Preparing Your Vision Board What Goes Into Your Vision Board Drawings or sketches of your proposed solution Design inspirations Proposed font choices Proposed color scheme
13. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com 13
14. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com 14
15. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Design Inspiration Researching For Your Inspiration Google Search “Great WordPress Website Design” Pinterest (Follow Design, Web Design) Other Design Studio Website Portfolios Communication Arts or Other Design Magazines Create An Inspiration Folder To Save Found Inspiration
16. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com 16 Example: Finding Inspiration
17. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Design Inspiration Tools To Inspire Your UI Website Design Friendly Fonts Google Fonts, Typekit, @fontface Color Scheme Adobe Kuler, Color Scheme Designer, Google search three/four colors Inexpensive Design Assets Creative Market, Dealotto, Design Moo
18. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Example: Color Schemes 18
19. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Examples: Design Assets
20. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com 20
21. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Screen Grab Then Make It Fab
22. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com
23. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Designing Your Graphics Setting Up Your File Open Screen Grab In Photoshop Set guides and establish main graphic assets Organize Your Layers/Folders Cool Tools Page Layers App Adobe Captivate 7 (HD screen shots)
24. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com 24 Example: Page Layers
25. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Designing Your Main Pages 25 Two Pages To Design Home Page & One Sub Page Starting With The Home Page Design Sub Page For The Rest Of The Site Content
26. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Home Page Sub Page
27. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com 27
28. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com 28
29. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com 29
30. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Next Steps If You Are Just Getting Started? Install ServerPress on your computer Spin up your new WordPress website locally Install the theme you wish to make a Child for Install and activate a plugin called “Child Themify” Open a window to view your site as you make CSS changes to the new Child theme, style.css file Tip: Use Firebug or the Chrome browser to “Inspect Element” of each part of the page so you know which CSS classes control the changes you wish to make.
31. 09/21/13 Greg Douglas | Designing Awesome WordPress Websites | premiuminteractive.com Thank You Greg Douglas greg [at] premiuminteractive.com @premiuminteract