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!

1. BUILDING
AWESOME
WEBSITE
A GUIDE
TO WEBSITE
PRODUCTION
Shakuro / Web Design & Development Agency / @shakuro

2. Making websites
and apps
In business since
2006
UX-heavy Pixel maniacs
and code geeks

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. ...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. 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. WEBSITE
CONSTRUCTION
PHASES

7. MANUFACTURE MISSION CONTROL

8. MANUFACTURE MISSION CONTROL

9. MANUFACTURE MISSION CONTROL

10. MANUFACTURE MISSION CONTROL

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. DEFINITION

13. DEFINITION STAGE

14. DEFINITION STAGE

15. DEFINITION STAGE

16. SCOPING

17. SCOPING STAGE

18. SCOPING STAGE

19. SCOPING STAGE

20. WIREFRAMING

21. WIREFRAMING STAGE

22. WIREFRAMING STAGE

23. WIREFRAMING STAGE

24. DESIGN

25. VISUAL DESIGN STAGE

26. VISUAL DESIGN STAGE

27. VISUAL DESIGN STAGE

28. VISUAL DESIGN STAGE

29. DEVELOPMENT

30. DEVELOPMENT STAGE

31. TESTING

32. TESTING STAGE

33. TESTING STAGE

34. LAUNCH

35. LAUNCH STAGE

37. MAINTENANCE

38. MAINTENANCE

39. OUTTAKES
Have a roadmap
Use visual sync services (RealtimeBoard.com)
Use high-quality images
Use scalable code
Get content-heavy
Keep improving
•
•
•
•
•
•

40. OR

41. Let the PROs do all the work and enjoy the result!

42. HAVE AN IDEA?
WE CAN BUILD IT!

43. SHAKURO.COM