Slide 1

Slide 1 text

UI FOR SMALL BUSINESS WORDPRESS WEBSITES Designing Awesome WordPress Websites For Small to Medium Size Businesses Hollywood WordPress Meetup 8/14/2013 Friday, August 23, 13

Slide 2

Slide 2 text

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 Friday, August 23, 13

Slide 3

Slide 3 text

08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Organizing Your WordPress Project Friday, August 23, 13

Slide 4

Slide 4 text

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 Friday, August 23, 13

Slide 5

Slide 5 text

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 Friday, August 23, 13

Slide 6

Slide 6 text

08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Selecting a Framework/Theme Friday, August 23, 13

Slide 7

Slide 7 text

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... Friday, August 23, 13

Slide 8

Slide 8 text

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 Friday, August 23, 13

Slide 9

Slide 9 text

08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Friday, August 23, 13

Slide 10

Slide 10 text

08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 10 Creating A Vision Board Friday, August 23, 13

Slide 11

Slide 11 text

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 Friday, August 23, 13

Slide 12

Slide 12 text

08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 12 Friday, August 23, 13

Slide 13

Slide 13 text

08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 13 Friday, August 23, 13

Slide 14

Slide 14 text

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 Friday, August 23, 13

Slide 15

Slide 15 text

08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Screen Grab Then Make It Fab Friday, August 23, 13

Slide 16

Slide 16 text

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) Friday, August 23, 13

Slide 17

Slide 17 text

08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Friday, August 23, 13

Slide 18

Slide 18 text

08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 18 Friday, August 23, 13

Slide 19

Slide 19 text

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 Friday, August 23, 13

Slide 20

Slide 20 text

08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 20 Friday, August 23, 13

Slide 21

Slide 21 text

08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 21 Friday, August 23, 13

Slide 22

Slide 22 text

08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com Thank You Greg Douglas greg [at] premiuminteractive.com @premiuminteract Friday, August 23, 13