From conception to realization
10 likes924 views
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.
From conception to realization
- 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
- 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/