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.
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
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.
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
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,...
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
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/