This document outlines Marek Sotak's process for creating a website from conception to launch. It discusses initial meetings with clients to understand goals and priorities. It also covers creating mood boards and wireframes, selecting colors, gathering feedback, launching the site, and tracking results. The overall process emphasized understanding the client, creating realistic plans in phases, and continuing to track the site after launch.

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

2. 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

3. 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

4. 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?

5. 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

6. 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......

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

8. First meeting - assets

9. 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?

10. 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

11. Mood boards

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

13. Mood boards

14. Mood boards – see the difference

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

16. 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,...

17. Colours

18. Colours - association
● Healthcare

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

20. Colours – in action - Turners painting

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

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

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

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

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

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

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

30. “Getting opinions” - FiveSecondTest
Results

31. “Getting opinions” - FiveSecondTest
Results by
users

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

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

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

36. Remember our moodboard?

37. 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

38. 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!

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

40. 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,

41. Site launch – tracking tools - clickheat
● Clickheat map example

42. Site launch – tracking tools – CEgg confetti

43. Questions?

44. 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

45. 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/