UI FOR SMALL BUSINESS WORDPRESS WEBSITES

Designing Awesome WordPress Websites For Small to Medium Size Businesses

Transcript

1. UI FOR SMALL BUSINESS WORDPRESS WEBSITES Designing Awesome WordPress Websites For Small to Medium Size Businesses Hollywood WordPress Meetup 8/14/2013
2. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Hi, I’m Greg Douglas Principal of Premium Interactive Designer / Front-end Developer Organizer of Hollywood WordPress Meetup Designing for the web since 1999 @premiuminteract
3. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Organizing Your WordPress Project
4. Slider Header NAVIGATION Footer Area Widget Widget Widget Body Sidebar Widgetized Area 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Review of Our Website Canvas Header Navigation Slider Body Sidebar Footer
5. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Review of Our Website Canvas H1, H2, H3 Body Plugins 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
6. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Selecting a Framework/Theme
7. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Elegant Themes Thematic Theme Forest WooThemes Genesis Okay Themes Some are more newbie friendly and are easier to child theme where others are more developer friendly meaning that you will need to know how to code before designing for them. Some popular frameworks/themes include...
8. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Things To Keep In Mind When Selecting A Theme Things to Keep In Mind: * 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
9. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com
10. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 10 Creating A Vision Board
11. 08/14/13 Greg Douglas | UI For WordPress | 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
12. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 12
13. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 13
14. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Researching For Your Design 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 Tools To Inspire Your UI Website Design Friendly Fonts Google Fonts, Typekit, @fontface Color Scheme Color Scheme Designer, Google search three/four colors Inexpensive Design Sets Creative Market, Design Moo Design Inspiration
15. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Screen Grab Then Make It Fab
16. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Designing Your Graphics Setting Up Your File Open Screen Grab In Photoshop Set guides and establish main graphic assetts Organize Your Layers/Folders Cool Tools Page Layers App Adobe Captivate 7 (HD screen shots)
17. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com
18. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 18
19. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Designing Your Main Pages 19 Two Pages To Design Home Page & One Sub Page Starting With The Home Page Design Sub Page For The Rest Of The Site Content
20. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 20
21. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 21
22. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Thank You Greg Douglas greg [at] premiuminteractive.com @premiuminteract