Almost custom - Example design workflow for customising a WordPress website based on a Genesis child theme

  • View
    496

  • Download
    2

Embed Size (px)

DESCRIPTION

Cath from Phase Creative (Sydney) presented these slides at WordPress Sydney Meetup in Jan 2014. A run through of her workflow demonstrated as a case study. Almost Custom: customising a WordPress website using a Genesis Child theme

Text of Almost custom - Example design workflow for customising a WordPress website based on a Genesis child...

  • 1. Almost Custom ...its childs play! www.phasecreative.com.au

2. OverviewDesign workflow for customising a WordPress website using a Genesis Child theme Basic customisation Typopgraphy Colours Integration of logo and logo elements Images and image treatments Backgrounds and textures Extras Custom templates Custom widgets Custom functionality www.phasecreative.com.auPRO TIP:Provide a definition of customisation in your contract and state the limitations of the process 3. Toolkit:Some of my favourites GENESISDYNAMIKCODAMAMPCREATIVE CLOUDASANAFIREBUGINVISIONwww.phasecreative.com.au 4. PRO TIP:Create a master to-do list for your sites in asana, duplicate for each site & add/edit as you needwww.phasecreative.com.au 5. Basic Workflow Take a design brief Get content from client (!!) Discuss structual placement, user journey and devise sitemap Decide the best child theme base, dont always show client Mock up homepage for discussion, make any changes Mock up internal page(s) for review / revisions Once approved, set up on MAMP with pre-built plugin set Build out & upload to staging server (cheapy shared host) Send link for client to view, get feeback Build out remaining client content with changes Test, send link again, make any required changes, test again Once approved (and paid for), upload to client server for launchwww.phasecreative.com.au 6. Case StudyMaaike Furniture Resurrection Brief: Existing WordPress blog with over 300 posts spanning 4 years Time to position as high-end artisan creative Galleries and blog a focus - wanted grid blog Needed online quote form Wanted to look more like a website than a blog Clean, neutral design so her pieces would singMy one big wish is for a really great gallery page. www.phasecreative.com.au 7. Approach Maaikes content was ready. She was very organised. She had a photoshoot done so great photos to work with I flicked her Foodie, along with a few others to look at for the boneswww.phasecreative.com.au 8. I only really looked at the foodie child theme, and wet my pants with excitement. Design adjustments required Typography Colour palette Imagery Structual changes New homepage New gallery template New newsletter call to action Blog layed out as a gridwww.phasecreative.com.au 9. ITS BEAUTIFUL!!! Everything I imagined. So damn spot on Im almost disappointed that theres not a surprise element. And then I saw the sketch details in the top and bottom bars and got a little surprise. And a little teary. www.phasecreative.com.au 10. www.phasecreative.com.au 11. www.phasecreative.com.au 12. Delivery Make screengrab. I always credit the original designerwww.phasecreative.com.au 13. Pros Swift production process, many turn-key elements Testing has mostly been done on the child theme Client can see proof of concept before you start Community help when using well supported framework You can get familiar with the themes You can bank your own child themes along the way Cons Lack of appreciation for the value of the process Clients misunderstand custom to mean bespoke so there is an education process Not as many bells & whistles - managing expectations You dont always know the code so it can be trial and error www.phasecreative.com.au 14. Links & Resources Foodie theme: http://shaybocks.com/foodie/ Genesis framework: http://my.studiopress.com/themes/genesis/ Asana: https://app.asana.com/ Adobe Creative Cloud: http://www.adobe.com/au/products/creativecloud.html MAMP: www.mamp.info/ Coda 2: http://panic.com/coda/ Dynamik by Cobalt Apps: http://cobaltapps.com/ Firebug: https://getfirebug.com/ Invision: http://www.invisionapp.com/www.phasecreative.com.au 15. More info Web: phasecreative.com.au Twitter: @phasecreative Email: hello@phasecreative.com.au Phone: 0402 040 049 Location: SydneyCath Beaton is a Sydney based WordPress consultant and web designer with a passion for helping small business professionals maximise their online impact.Thank you :-) www.phasecreative.com.au