Design Workflow in Agency Environment for Rapid WordPress Development - By Adrian Restantia - Wordcamp London 2015
4 likes2,028 views
Short presentation showing the internal design workflow thatis usedat 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/
Design Workflow in Agency Environment for Rapid WordPress Development - By Adrian Restantia - Wordcamp London 2015
- 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
- 7. 1. How we plan and execute our design process 2. Psd File Structure: naming conventions, starter 鍖le, 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 & E鍖ciency Digital Dream Team + The Client =
- 14. Progress Document Shared between the designer, developer & client
- 15. Template Name
- 18. Design Demo URL
- 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
- 24. Mooves Psd File Structure 1. Folder Naming 2. Layer / Folder Colour Rules 3. File Naming Conventions
- 27. Folder Naming
- 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.
- 33. Starter Template Key Elements 1. Multi-device Views 2. Design Info Panel
- 35. Example of a Multi-device View Large Desktop Small Desktop Tablet Mobile
- 37. Moving to The Next Level
- 38. 1. Linked Smart Objects 2. Web Styleguides 3. Video Simulations
- 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