Your SlideShare is downloading. ×
0
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,
o...
A little background
●   We at Atomic Ant want to help change something
●   Previous projects for UK charities
●   We have ...
First meeting
●   Who am I going to meet?
        –   Make sure to talk with people who are responsible
             and w...
First meeting
●   Think in general – don't go too crazy about features
    you can put in – MoSCoW method
●   You are the ...
First meeting
●   Take your clients wishes into consideration but be
    aware most clients don't understand the web
    t...
First meeting
    → Epic    fail!

●   Suggest phased releases.
    This will ensure
    ongoing development
    and a sit...
First meeting - assets
First meeting - assets
●   Who are the visitors?
●   What are the goals? (where is the success)
●   What can we learn from...
First meeting – MoSCoW method
●   prioritisation technique
●   MUST have this
●   SHOULD have this if at all possible
●   ...
Mood boards
Mood boards – what is it?
●   Collection of objects
        –   Images, sketches
        –   Cloth
        –   Notes
     ...
Mood boards
Mood boards – see the difference
Mood boards - benefits
●   Get your thoughts together
●   A visual starting point
●   See clients/others reactions/feedbac...
Mood boards – quick how to
●   Offline
        –   Get scissors
        –   Magazines, photos, materials, etc...
        –...
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 ...
Wireframes – tools to make them
●   Software
       –   Balsamiq http://www.balsamiq.com/
       –   Gliffy http://gliffy....
Wireframes – tools to make them
●   Offline
        –   UI sketch pad
            http://moourl.com/sketchpad
        –   ...
Wireframes – inspiration
●   Tumblr
    http://wireframes.tumblr.com/
●   Flickr group - I ♥ wireframes
    http://www.fli...
“Getting opinions”
●   FiveSecondTest
    http://fivesecondtest.com
        –   Get feedback from random testers
        –...
“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 galle...
Site launch – surely not the end!
●   Tracking your work
        –   Don't abandon the project just because it says
      ...
Site launch – tracking tools
●   Google analytics
         http://google.com/analytics
●   Chartbeat
         http://chart...
Site launch – tracking tools
●   ClickHeat mapping
       –   Helps to identify where users are clicking
       –   Rule #...
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,
ope...
Credits
Photos on moodboards were taken from various resources,
If you spot your work here, please let me know and I'll ad...
From conception to realization
From conception to realization
From conception to realization
Upcoming SlideShare
Loading in...5
×

From conception to realization

2,461

Published on

In this session I'll talk about the enitre process of creating a website. Defining site specifications with the client, refining the visuals (moodboards, colours,...), wireframing the actual implementation, usability testing on a limited budget, post-launch tracking, reaching the client's site goals and how to make a buzz around the new website. We will cover this interesting topic as a usecase of the NGO website http://www.skolavafrice.cz - Let's build a School in Africa.

Published in: Design, Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,461
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
95
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Transcript of "From conception to realization"

  1. 1. From conception to realization: A journey through the creation of a website Marek Sotak
  2. 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. 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. 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. 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. 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. 7. First meeting → Epic fail! ● Suggest phased releases. This will ensure ongoing development and a site that does what the clients audience wants.
  8. 8. First meeting - assets
  9. 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. 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. 11. Mood boards
  12. 12. Mood boards – what is it? ● Collection of objects – Images, sketches – Cloth – Notes – You name it... ● Express overal feel, style
  13. 13. Mood boards
  14. 14. Mood boards – see the difference
  15. 15. Mood boards - benefits ● Get your thoughts together ● A visual starting point ● See clients/others reactions/feedback in this early stage
  16. 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. 17. Colours
  18. 18. Colours - association ● Healthcare
  19. 19. Colours - association ● Healthcare → blue – who.org – nhs.uk – … ● Farming → green ● ...
  20. 20. Colours – in action - Turners painting
  21. 21. Colour tools ● Colour palette generator from an image http://www.degraeve.com/color-palette/
  22. 22. Colour tools ● Kuler from Adobe - http://kuler.adobe.com
  23. 23. Wireframes – what is it? ● skeleton of the website without design – Blocks – Forms – User experience – ... ● Includes functionlity
  24. 24. Wireframes – tools to make them ● Software – Balsamiq http://www.balsamiq.com/ – Gliffy http://gliffy.com – Photoshop, Gimp – ...
  25. 25. Wireframes – tools to make them ● Offline – UI sketch pad http://moourl.com/sketchpad – UIStencil http://uistencils.com – Pen and pencil
  26. 26. Wireframes – inspiration ● Tumblr http://wireframes.tumblr.com/ ● Flickr group - I ♥ wireframes http://www.flickr.com/groups/1070674@N20/
  27. 27. “Getting opinions” ● FiveSecondTest http://fivesecondtest.com – Get feedback from random testers – Memory or Click tests
  28. 28. “Getting opinions” - FiveSecondTest Results
  29. 29. “Getting opinions” - FiveSecondTest Results by users
  30. 30. “Getting opinions” - FiveSecondTest Moodboard 1 results in a tag cloud
  31. 31. “Getting opinions” - FiveSecondTest Moodboard 2 results in a tag cloud
  32. 32. “Getting opinions” ● Usabilla http://usabilla.com ● Crazy egg http://crazyegg.com
  33. 33. Remember our moodboard?
  34. 34. 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
  35. 35. 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!
  36. 36. Site launch – tracking tools ● Google analytics http://google.com/analytics ● Chartbeat http://chartbeat.com
  37. 37. 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,
  38. 38. Site launch – tracking tools - clickheat ● Clickheat map example
  39. 39. Site launch – tracking tools – CEgg confetti
  40. 40. Questions?
  41. 41. 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
  42. 42. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×