From conception to realization

From conception to realization: A journey through the creation of a website Marek Sotak

Introduction Marek Sotak Developer, designer co-founder of atomic ant ltd web design company based in London and Prague, operates internationaly. Creator of RootCandy admin theme http://drupal.org/project/rootcandy http://twitter.com/sotak http://atomicant.co.uk

A little background ● We at Atomic Ant want to help change something ● Previous projects for UK charities ● We have the tools and ideas ● Problem with charities – picking the right one

First meeting ● Who am I going to meet? – Make sure to talk with people who are responsible and who are the decision makers ● Sometimes you need to understand the structure of the company – analyse people ● Understand the project – specification ● Where is my passion?

First meeting ● Think in general – don't go too crazy about features you can put in – MoSCoW method ● You are the expert here ● Trust your experience, but listen to the client carefuly

First meeting ● Take your clients wishes into consideration but be aware most clients don't understand the web territory as well as you do. Start with a realistic basic architecture that can grow. Building all your clients wishes in one go can lead to......

First meeting → Epic fail! ● Suggest phased releases. This will ensure ongoing development and a site that does what the clients audience wants.

First meeting - assets

First meeting - assets ● Who are the visitors? ● What are the goals? (where is the success) ● What can we learn from existing site? – Statistics – Feedback from editors, admins, visitors... ● Functionality – Refer to goals – Who's the expert here?

First meeting – MoSCoW method ● prioritisation technique ● MUST have this ● SHOULD have this if at all possible ● COULD have this if it does not affect anything else. ● WON'T have this time but WOULD like in the future. ● http://en.wikipedia.org/wiki/MoSCoW_Method

Mood boards

Mood boards – what is it? ● Collection of objects – Images, sketches – Cloth – Notes – You name it... ● Express overal feel, style

Mood boards

Mood boards – see the difference

Mood boards - benefits ● Get your thoughts together ● A visual starting point ● See clients/others reactions/feedback in this early stage

Mood boards – quick how to ● Offline – Get scissors – Magazines, photos, materials, etc... – Have a big work place – big table, floor ● Online – Digital – Flickr, Google,Yahoo – Audio, video,... – Photoshop, Gimp,...

Colours

Colours - association ● Healthcare

Colours - association ● Healthcare → blue – who.org – nhs.uk – … ● Farming → green ● ...

Colours – in action - Turners painting

Colour tools ● Colour palette generator from an image http://www.degraeve.com/color-palette/

Colour tools ● Kuler from Adobe - http://kuler.adobe.com

Wireframes – what is it? ● skeleton of the website without design – Blocks – Forms – User experience – ... ● Includes functionlity

Wireframes – tools to make them ● Software – Balsamiq http://www.balsamiq.com/ – Gliffy http://gliffy.com – Photoshop, Gimp – ...

Wireframes – tools to make them ● Offline – UI sketch pad http://moourl.com/sketchpad – UIStencil http://uistencils.com – Pen and pencil

Wireframes – inspiration ● Tumblr http://wireframes.tumblr.com/ ● Flickr group - I ♥ wireframes http://www.flickr.com/groups/1070674@N20/

“Getting opinions” ● FiveSecondTest http://fivesecondtest.com – Get feedback from random testers – Memory or Click tests

“Getting opinions” - FiveSecondTest Results

“Getting opinions” - FiveSecondTest Results by users

“Getting opinions” - FiveSecondTest Moodboard 1 results in a tag cloud

“Getting opinions” - FiveSecondTest Moodboard 2 results in a tag cloud

“Getting opinions” ● Usabilla http://usabilla.com ● Crazy egg http://crazyegg.com

Remember our moodboard?

Site launch – surely not the end! ● Making a buzz around the website - marketing ● Well-designed – CSS galleries, blogs,... ● Functionality – Unique functionality,... ● Post blogs, use-case study, present ● Post statistics results and what you learned from it

Site launch – surely not the end! ● Tracking your work – Don't abandon the project just because it says finished – You can learn a lot from post-launch statistics – Reach the goals set before → success!

Site launch – tracking tools ● Google analytics http://google.com/analytics ● Chartbeat http://chartbeat.com

Site launch – tracking tools ● ClickHeat mapping – Helps to identify where users are clicking – Rule #35: "There's a Drupal module for that." http://drupal.org/project/clickheat – Clickheat – ClickDensity, CrazyEgg, ClickTale,

Site launch – tracking tools - clickheat ● Clickheat map example

Site launch – tracking tools – CEgg confetti

Questions?

Thank you! Marek Sotak Developer, designer co-founder of atomic ant ltd web design company based in London and Prague, operates internationaly. Creator of RootCandy admin theme http://drupal.org/project/rootcandy http://twitter.com/sotak http://atomicant.co.uk

Credits Photos on moodboards were taken from various resources, If you spot your work here, please let me know and I'll add it! Slide 17 – Colour wheel – by Ru Tover on flickr Slide 20 – wikipedia - http://en.wikipedia.org/wiki/The_Slave_Ship_(painting) Slide 25 – Post It wireframe – by Yandle on flickr Slide 42 – Question mark - by alexanderdrachmann on flickr Tag clouds generated with: Wordle - http://www.wordle.net/

From conception to realization

by Marek Sotak on Dec 11, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 19

Statistics

From conception to realization — Presentation Transcript