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

www.phasecreative.com.au

Almost Custom ...it’s childs play!


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


Toolkit:Some of my favourites

GENESIS

CREATIVE CLOUD

DYNAMIK

ASANA

CODA

FIREBUG

MAMP

INVISION


PRO TIP: Create a master to-do list for your sites in asana, duplicate for each site & add/edit as you need


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


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.


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


“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


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.




Delivery• Make screengrab. I always credit the original designer


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


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/


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

http://www.phasecreative.com.au

http://www.twitter.com/phasecreative