From conception to realization
Upcoming SlideShare
Loading in...5
×
 

From conception to realization

on

  • 3,217 views

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.

Statistics

Views

Total Views
3,217
Views on SlideShare
3,198
Embed Views
19

Actions

Likes
10
Downloads
94
Comments
0

1 Embed 19

http://www.slideshare.net 19

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

From conception to realization From conception to realization Presentation Transcript

  • 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, operates internationaly. Creator of RootCandy admin theme http://drupal.org/project/rootcandy http://twitter.com/sotak http://atomicant.co.uk
  • 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
  • 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?
  • 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
  • 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......
  • First meeting → Epic fail! ● Suggest phased releases. This will ensure ongoing development and a site that does what the clients audience wants.
  • First meeting - assets
  • 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?
  • 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
  • Mood boards
  • Mood boards – what is it? ● Collection of objects – Images, sketches – Cloth – Notes – You name it... ● Express overal feel, style
  • Mood boards
  • Mood boards – see the difference
  • Mood boards - benefits ● Get your thoughts together ● A visual starting point ● See clients/others reactions/feedback in this early stage
  • 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,...
  • 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 experience – ... ● Includes functionlity
  • Wireframes – tools to make them ● Software – Balsamiq http://www.balsamiq.com/ – Gliffy http://gliffy.com – Photoshop, Gimp – ...
  • Wireframes – tools to make them ● Offline – UI sketch pad http://moourl.com/sketchpad – UIStencil http://uistencils.com – Pen and pencil
  • Wireframes – inspiration ● Tumblr http://wireframes.tumblr.com/ ● Flickr group - I ♥ wireframes http://www.flickr.com/groups/1070674@N20/
  • “Getting opinions” ● FiveSecondTest http://fivesecondtest.com – Get feedback from random testers – Memory or Click tests
  • “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 galleries, blogs,... ● Functionality – Unique functionality,... ● Post blogs, use-case study, present ● Post statistics results and what you learned from it
  • 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!
  • Site launch – tracking tools ● Google analytics http://google.com/analytics ● Chartbeat http://chartbeat.com
  • 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,
  • 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, operates internationaly. Creator of RootCandy admin theme http://drupal.org/project/rootcandy http://twitter.com/sotak http://atomicant.co.uk
  • 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/