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.

BUILDING AWESOME WEBSITE - A GUIDE TO WEBSITE PRODUCTION

506 views

Published on

A decade of work in the industry of web design & development stacked us up a bunch of use cases, some bumps and bruises, and a lot of valuable first-hand experience that we'd love to slide share with you guys!

Published in: Software
  • Login to see the comments

BUILDING AWESOME WEBSITE - A GUIDE TO WEBSITE PRODUCTION

  1. 1. BUILDING AWESOME WEBSITE A GUIDE TO WEBSITE PRODUCTION Shakuro / Web Design & Development Agency / @shakuro
  2. 2. Making websites and apps In business since 2006 UX-heavy Pixel maniacs and code geeks
  3. 3. Ad Hoc The year 2006 when we came along was the dawn of interaction design. And everyone thought in 10 years it was going to be like this…
  4. 4. ...Well it’s not. However, today’s websites look nothing like their dinosaur ancestors. And here’s why: Mobile devices changed the game to responsive being a must. Faster internet allowed for a more visual content-sensitive design. Better frameworks aided the backend significantly. Attention time span shrunk, driving the UX towards the desired quick involvement. Social media took over, cranking the interaction level to a maximum. • • • • •
  5. 5. The Ruby Era Why use Ruby on Rails Readable code. RubyGems Robust infrastructure. DRY (Don’t Repeat Yourself) principle. Close-knit open-source community. • • • • • 2005 was the year of emergence of Ruby on Rails and 2006 was the year it took off. We got into it right away and developed a knowledge that helped us grow from a grass-roots studio into a web and mobile development agency of today. RoR
  6. 6. WEBSITE CONSTRUCTION PHASES
  7. 7. MANUFACTURE MISSION CONTROL
  8. 8. MANUFACTURE MISSION CONTROL
  9. 9. MANUFACTURE MISSION CONTROL
  10. 10. MANUFACTURE MISSION CONTROL
  11. 11. But... Having a plan alone won’t get you anywhere unless you know how to execute it, cut angles, avoid pitfalls, and leverage the power of creativity.
  12. 12. DEFINITION
  13. 13. DEFINITION STAGE
  14. 14. DEFINITION STAGE
  15. 15. DEFINITION STAGE
  16. 16. SCOPING
  17. 17. SCOPING STAGE
  18. 18. SCOPING STAGE
  19. 19. SCOPING STAGE
  20. 20. WIREFRAMING
  21. 21. WIREFRAMING STAGE
  22. 22. WIREFRAMING STAGE
  23. 23. WIREFRAMING STAGE
  24. 24. DESIGN
  25. 25. VISUAL DESIGN STAGE
  26. 26. VISUAL DESIGN STAGE
  27. 27. VISUAL DESIGN STAGE
  28. 28. VISUAL DESIGN STAGE
  29. 29. DEVELOPMENT
  30. 30. DEVELOPMENT STAGE
  31. 31. TESTING
  32. 32. TESTING STAGE
  33. 33. TESTING STAGE
  34. 34. LAUNCH
  35. 35. LAUNCH STAGE
  36. 36. MAINTENANCE
  37. 37. MAINTENANCE
  38. 38. OUTTAKES Have a roadmap Use visual sync services (RealtimeBoard.com) Use high-quality images Use scalable code Get content-heavy Keep improving • • • • • •
  39. 39. OR
  40. 40. Let the PROs do all the work and enjoy the result!
  41. 41. HAVE AN IDEA? WE CAN BUILD IT!
  42. 42. SHAKURO.COM

×