design workflow in agency environment for rapid wordpress development - by adrian restantia -...
TRANSCRIPT
Adrian Restantia Moove Agency
@madebyadrian @mooveagency
(Tips, Guidelines, Inspiration)
Design Workflow in Agency Environment for
Rapid WordPress Development
Adrian Restantia@madebyadrian | @mooveagency
slideshare.net/adrianrestantia
About This Talk 1
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
Designers
Developers
Designer + Developer
Digital Dream TeamHard Working Peeps
The ClientThe one who gives (valuable) feedback
Love & Efficiency
Digital Dream Team+ The Client
=
Planning is the key 3
Progress Document
Shared between the designer, developer & client
Template Name
Wireframe Demo URL
Wireframe Approval Status
Design Demo URL
Design Approval Status
Comments
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.
Keep your files clean and tidy 4
Great minds think alike!
Moove’s Psd File Structure
1. Folder Naming
2. Layer / Folder Colour Rules
3. File Naming Conventions
Layer135 copy14
Group23 copy6
Folder Naming
Layer (Folder) Colour Rules
File Naming Conventions
AboutUs_Careers_T7_V1_AR
Parent Page name Template no.
Version Author
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.
The BIG Picture 5
Moove’s Starter Template
Starter Template Key Elements
1. Multi-device Views
2. Design Info Panel
Multi-device Views
Example of a Multi-device View
Large Desktop Small Desktop Tablet Mobile
Design Info Panel
Moving to The Next Level 6
1. Linked Smart Objects
2. Web Styleguides
3. Video Simulations
Linked Smart Objects
One Change Applies to All Project Files
Work Folder Structure
PSD
Smart Objects
Demos
Assets
Images
Design Templates
PSB Files
Demo Previews
Project Images
Project Assets
Wireframes Wireframes
Web Style-guides
Video Simulations
Video Simulations
Video Presentations for Clients
Thank you. Any Questions?
