From conception to realization

  • 2,413 views
Uploaded 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 …

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.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,413
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
94
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 24. Wireframes – tools to make them ● Software – Balsamiq http://www.balsamiq.com/ – Gliffy http://gliffy.com – Photoshop, Gimp – ...
  • 25. Wireframes – tools to make them ● Offline – UI sketch pad http://moourl.com/sketchpad – UIStencil http://uistencils.com – Pen and pencil
  • 26. Wireframes – inspiration ● Tumblr http://wireframes.tumblr.com/ ● Flickr group - I ♥ wireframes http://www.flickr.com/groups/1070674@N20/
  • 27. “Getting opinions” ● FiveSecondTest http://fivesecondtest.com – Get feedback from random testers – Memory or Click tests
  • 28. “Getting opinions” - FiveSecondTest Results
  • 29. “Getting opinions” - FiveSecondTest Results by users
  • 30. “Getting opinions” - FiveSecondTest Moodboard 1 results in a tag cloud
  • 31. “Getting opinions” - FiveSecondTest Moodboard 2 results in a tag cloud
  • 32. “Getting opinions” ● Usabilla http://usabilla.com ● Crazy egg http://crazyegg.com
  • 33. Remember our moodboard?
  • 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. 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. Site launch – tracking tools ● Google analytics http://google.com/analytics ● Chartbeat http://chartbeat.com
  • 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. Site launch – tracking tools - clickheat ● Clickheat map example
  • 39. Site launch – tracking tools – CEgg confetti
  • 40. Questions?
  • 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. 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/