Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Sites that defy
 the Reality Triangle:
Good, Fast AND Cheap
     Miko Coffey BFA FRSA

     www.usingmyhead.com
     miko@...
Reality Triangle
 High Quality
                                 Short Timeframe




                Low Cost

• Say you ca...
Web Apps
• Web-based ‘software’ applications
• Replace expensive installed software or
  offline processes
• Rely on volume...
Web Project Lifecycle
                Before Web Apps


• Planning & Content Dev: Project Manager
 ‣ Source / coordinate s...
Web Project Lifecycle
                Before Web Apps

• Design: Web/Graphic Designer
 ‣ Create/source logos & graphics (u...
Web Project Lifecycle
                Before Web Apps

• Build: Web Developer
 ‣ Slice Photoshop mockup into pieces to slo...
Web Project Lifecycle
                  Before Web Apps


• Build: Web/Specialist Technical Developer
  ‣ Custom-build onl...
Web Project Lifecycle
                Before Web Apps


• To make changes to website content or
  design:
 ‣ Client tells ...
YAY for web apps!
Web Project Lifecycle
                 After Web Apps



• Planning & Content Development
 ‣ Choose which website web app ...
Web Project Lifecycle
                  After Web Apps


• Design
 ‣ Create/source logos & graphics from online
   marketp...
Web Project Lifecycle
                 After Web Apps

• Build
 ‣ Paste contents from MS Word or txt document
   into free...
Web Project Lifecycle
                  After Web Apps



• Build - added functionality
  ‣ Create forms, shopping cart or...
Web Project Lifecycle
                After Web Apps




• To make changes:
 ‣ Login to the site admin & make the changes....
Demo: Squarespace
• Hosted CMS - nothing else to buy/install
• Different levels of subscription give different
  levels of...
squarespace.com
aviary.com - create banners / resize logos
colourlovers.com - choose colour palettes
tools.dynamicdrive.com/gradient/ - make gradients
istockphoto.com - stock photos from £1
Web App Website Tips
• Make a sketch and/or outline of your site
  before you start (a napkin will do!)
• Prepare all text...
Let’s Go!
Thank You
         Miko Coffey
 My portfolio of Squarespace sites:
http://usingmyhead.squarespace.com

     www.usingmyhea...
Sites that defy the Reality Triangle: Good, Fast AND Cheap
Upcoming SlideShare
Loading in …5
×

Sites that defy the Reality Triangle: Good, Fast AND Cheap

2,552 views

Published on

These slides formed the first half of my presentation/demo at London NetTuesday. The second half was a demo of building a polished Squarespace website from scratch in 35minutes.

SUMMARY: Before web apps, creating a website was an expensive, time-consuming process that involved lots of specialists. Now, with a little know-how and some online tools, almost anyone can create a polished website without needing a team of people.

Published in: Education
  • Nice presentation. Completely agree. I recently wrote a post advocating experimenting with webapps: Don’t overinvest in your website http://blog.wiserearth.org/dont-overinvest-in-your-website/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Sites that defy the Reality Triangle: Good, Fast AND Cheap

  1. 1. Sites that defy the Reality Triangle: Good, Fast AND Cheap Miko Coffey BFA FRSA www.usingmyhead.com miko@usingmyhead.com
  2. 2. Reality Triangle High Quality Short Timeframe Low Cost • Say you can have 2 out of 3 but not all
  3. 3. Web Apps • Web-based ‘software’ applications • Replace expensive installed software or offline processes • Rely on volume/advertising for income • Build it once, sell it over & over • Remove technical barrier to entry • Do it all from any web browser
  4. 4. Web Project Lifecycle Before Web Apps • Planning & Content Dev: Project Manager ‣ Source / coordinate suppliers, such as web agency, hosting, content management system (CMS) ‣ Coordinate copywriting and content prep; may work with a Copywriter and/or Information Architect ‣ Client-agency liaison
  5. 5. Web Project Lifecycle Before Web Apps • Design: Web/Graphic Designer ‣ Create/source logos & graphics (using Adobe Illustrator) ‣ Source photography from Stock Agency (eg. Getty Images) ‣ Create web page mockup in Adobe Photoshop ‣ Take feedback from client, tweak Photoshop mockup(s) then present to client again (repeat as necessary)
  6. 6. Web Project Lifecycle Before Web Apps • Build: Web Developer ‣ Slice Photoshop mockup into pieces to slot into HTML pages ‣ Hand-code HTML pages / templates, sometimes to fit an expensive Content Management System (CMS) ‣ Test code to be cross-browser & W3C compliant ‣ Input contents into pages (may be delegated to Assistant/Junior Developer)
  7. 7. Web Project Lifecycle Before Web Apps • Build: Web/Specialist Technical Developer ‣ Custom-build online forms, e-commerce shopping cart or other functionality; bespoke or to fit CMS ‣ If using Enterprise CMS: requires specialist training or use of CMS provider’s technical team to understand how to adapt existing modules to fit the client’s needs ‣ Flash, video or other rich media content requires high spec / bandwidth server
  8. 8. Web Project Lifecycle Before Web Apps • To make changes to website content or design: ‣ Client tells project manager ‣ Project manager tells agency ‣ Agency tells designer/developer to implement ‣ Client approves ‣ Client pays - in terms of ££ and time
  9. 9. YAY for web apps!
  10. 10. Web Project Lifecycle After Web Apps • Planning & Content Development ‣ Choose which website web app to use ‣ No hosting or CMS to choose in addition ‣ Still have to create GREAT content ‣ Still have to think about how best to present your content to the online audience
  11. 11. Web Project Lifecycle After Web Apps • Design ‣ Create/source logos & graphics from online marketplace or free WebApp such as Aviary.com ‣ Source free/cheap photography from istockphoto.com, flickr.com or Stock Xchange (www.sxc.hu) ‣ Edit photos/graphics (sizing, cropping, etc) in free software such as Picasa or GIMP, or Aviary.com
  12. 12. Web Project Lifecycle After Web Apps • Build ‣ Paste contents from MS Word or txt document into free/cheap hosted CMS such as Weebly, Wix, Squarespace or WordPress ‣ Choose an existing free template to act as starting point for web page design ‣ Upload logos & graphics, change colours, etc on- the-fly to customise the site design to your wishes ‣ Template code has already been pre-tested for cross-browser compatibility / W3C compliance
  13. 13. Web Project Lifecycle After Web Apps • Build - added functionality ‣ Create forms, shopping cart or other functionality by installing plugins or embedding from other WebApps such as Wufoo or MailChimp ‣ Host Flash, Powerpoint or other rich media content on Vimeo, YouTube or other service and link/embed into your web pages
  14. 14. Web Project Lifecycle After Web Apps • To make changes: ‣ Login to the site admin & make the changes. Preview it on-screen, then go live. ‣ Client has control - may choose to have a web consultant or designer/developer carry out complex requests
  15. 15. Demo: Squarespace • Hosted CMS - nothing else to buy/install • Different levels of subscription give different levels of site complexity/features • Basic Pro account = same price as regular hosting • VERY intuitive interface • Visual design editor requires NO custom CSS or programming knowledge to create unique designs
  16. 16. squarespace.com
  17. 17. aviary.com - create banners / resize logos
  18. 18. colourlovers.com - choose colour palettes
  19. 19. tools.dynamicdrive.com/gradient/ - make gradients
  20. 20. istockphoto.com - stock photos from £1
  21. 21. Web App Website Tips • Make a sketch and/or outline of your site before you start (a napkin will do!) • Prepare all text content in .txt or .rtf format, not MS Word .doc • Have everything ready in 3 folders: ‣ Content - for all txt content pages ‣ Design - for logos / design elements ‣ Photos - for all photos • Remember you can change anything easily later
  22. 22. Let’s Go!
  23. 23. Thank You Miko Coffey My portfolio of Squarespace sites: http://usingmyhead.squarespace.com www.usingmyhead.com miko@usingmyhead.com mob: 0794 100 5431 twitter: mikosoft skype: miko.coffey

×