Short presentation showing the internal design workflow that is used at Moove to ensure that we can work in so called ‘rapid development mode’ . Styleguides links: Preview: http://public.mooveagency.com/styleguides/Preview/ HTML Version: http://public.mooveagency.com/styleguides/sample/

1. Adrian Restantia
Moove Agency
@madebyadrian @mooveagency
(Tips, Guidelines, Inspiration)
Design Workflow
in Agency Environment for
Rapid WordPress Development

2. Adrian Restantia
@madebyadrian | @mooveagency
slideshare.net/adrianrestantia

6. About This Talk

7. 1. How we plan and execute our design
process
2. Psd File Structure: naming conventions,
starter file, info panels
3. Linked Smart Objects, Web Style-guides,
Using Video Simulations
Working faster
as a team
Designer + Developer

8. Designers

9. Developers

10. Designer + Developer
Digital Dream Team
Hard Working Peeps

11. The Client
The one who gives (valuable) feedback

12. Love & Efficiency
Digital Dream Team
+ The Client
=

13. Planning is
the key
3

14. Progress Document
Shared between the designer, developer & client

15. Template Name

16. Wireframe Demo URL

17. Wireframe Approval Status

18. Design Demo URL

19. Design Approval Status

20. Comments

21. Why is this document
so important?
1. It helps to show the client the actual
project status and leads to early
useful feedback
2. It helps the designer to organise his
time and workload on the project.
3. It involves the developer in the project
in the early stages.

22. Keep your files
clean and tidy

23. Great minds think
alike!

24. Moove’s Psd File
Structure
1. Folder Naming
2. Layer / Folder Colour Rules
3. File Naming Conventions

25. Layer135 copy14
Group23 copy6

27. Folder Naming

28. Layer (Folder)
Colour Rules

29. File Naming
Conventions
AboutUs_Careers_T7_V1_AR
Parent Page name Template
no.
Version Author

30. Why are these
important?
1. They help designers to handle the
feedback requirements faster.
2. They help developers to easily
identify, analyse and export certain
elements from a mockup.
3. They lead to a better communication
between the developer and the designer
as a lot of questions can be avoided.

31. The BIG
Picture
5

32. Moove’s Starter
Template

33. Starter Template
Key Elements
1. Multi-device Views
2. Design Info Panel

34. Multi-device Views

35. Example of a
Multi-device View
Large Desktop Small Desktop Tablet Mobile

36. Design Info Panel

37. Moving to
The Next Level

38. 1. Linked Smart Objects
2. Web Styleguides
3. Video Simulations

39. Linked Smart
Objects

40. One Change Applies
to All Project Files

41. Work Folder Structure
PSD
Smart Objects
Demos
Assets
Images
Design
Templates
PSB Files
Demo
Previews
Project
Images
Project
Assets
Wireframes Wireframes

42. Web
Style-guides

44. Video Simulations

45. Video Simulations

46. Video Presentations
for Clients

47. Thank you.
Any Questions?

48. Jointhe ment!
careers@mooveagency.com
@MooveAgency