almost custom - example design workflow for customising a wordpress website based on a genesis child...
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 themeTRANSCRIPT
www.phasecreative.com.au
Almost Custom ...it’s childs play!
www.phasecreative.com.au
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
PRO TIP: Provide a definition of customisation in your contract and state the limitations of the process
www.phasecreative.com.au
Toolkit:Some of my favourites
GENESIS
CREATIVE CLOUD
DYNAMIK
ASANA
CODA
FIREBUG
MAMP
INVISION
www.phasecreative.com.au
PRO TIP: Create a master to-do list for your sites in asana, duplicate for each site & add/edit as you need
www.phasecreative.com.au
Basic Workflow• Take a design brief
• Get content from client (!!)
• Discuss structual placement, user journey and devise sitemap
• Decide the best child theme base, don’t 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 launch
www.phasecreative.com.au
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 sing
My one big wish is for a really great gallery page.
www.phasecreative.com.au
Approach• Maaike’s 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 bones
www.phasecreative.com.au
“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 grid
www.phasecreative.com.au
IT’S BEAUTIFUL!!! Everything I imagined. So damn spot on I’m almost disappointed that there’s 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
www.phasecreative.com.au
www.phasecreative.com.au
Delivery• Make screengrab. I always credit the original designer
www.phasecreative.com.au
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 don’t always ‘know’ the code so it can be trial and error
www.phasecreative.com.au
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
Thank you :-)
Cath Beaton is a Sydney based WordPress consultant and web designer with a passion for helping small business professionals maximise their online impact.
More info• Web: phasecreative.com.au
• Twitter: @phasecreative
• Email: [email protected]
• Phone: 0402 040 049
• Location: Sydney