Exploring a Designer and Developer Workflow<br />James Polanco<br />Aaron Pedersenwww.developmentarc.comflash and the city...
Who are we?<br />James Polanco<br />Aaron Pedersen<br />Web Application ArchitectsFlex, Flash, AIR, Ajax... Getting into S...
What is this session about<br />Introduce the design and developer workflow<br />What is a workflow<br />What is a designe...
Introduce the design and developer workflow<br />What is a workflow?<br />
Introduce the design and developer workflow<br />What are the common types of workflows?<br />Between tools<br />Between t...
Introduce the design and developer workflow<br />Between tools...<br />Photoshop -> Flash Catalyst -> Flash Builder<br />I...
Introduce the design and developer workflow<br />Between team members...<br />Project Manager -> Executives<br />Client ->...
Introduce the design and developer workflow<br />Between companies and divisions...<br />Design Agency -> Design Agency<br...
Introduce the design and developer workflow<br />Between disciplines...<br />Architect -> Lead Developer -> Junior Develop...
Introduce the design and developer workflow<br />What are the common roles of a designer?<br />Creative briefs, style guid...
Examine issues of the workflows<br />Every workflow has it’s issues. Common ones include<br />To much focus on the touch p...
Examine issues of the workflows<br />To much focus on the touch point<br />We to often see each other working in silos wit...
Examine issues of the workflows<br />Feedback is reactive<br />Communication and feedback is usually post completion of th...
Examine issues of the workflows<br />Pitfalls of (not) planning <br />The first shortcut we as a  team take is reducing pl...
An in depth look at a particular workflow<br />Introduction to the designer and developer contract<br />The importance of ...
An in depth look at a particular workflow<br />What is the designer and developer contract<br />A process of discovering a...
An in depth look at a particular workflow<br />Why is it important<br />Defines a common syntax that both designers and de...
The importance of wireframing during planning<br />Wireframing is the visual planning of the application<br />Helps provid...
The importance of wireframing during planning<br />
The importance of wireframing during planning<br />
The importance of wireframing during planning<br />
The importance of wireframing during planning<br />
An in depth look at a particular workflow<br />Executing the contract<br />Wireframes are the foundation of the contract<b...
Executing the contract (divide and conquer)<br />Defining parts<br />Designers think: a group of design elements, such as ...
Executing the contract (divide and conquer)<br />Designers create designs based on wireframes and the contract<br />Wirefr...
Executing the contract (divide and conquer)<br />Developers build applications based on wireframes and the contract<br />B...
A theoretical workflow<br />A parallel design and developer workflow<br />
A theoretical workflow<br />Start with wireframes<br />Remember, wireframes are part of the planning process and require i...
A theoretical workflow<br />Review wireframes<br />Developers and project managers help provide crucial input and gain ins...
A theoretical workflow<br />
A theoretical workflow<br />Both design and development start in parallel<br />Both teams work in their silos with awarene...
A theoretical workflow<br />Designers create designs based on contract<br />Designs are based on wireframes and the contra...
A theoretical workflow<br />
A theoretical workflow<br />Development creates a functional reference application<br />99% of the business logic can be c...
A theoretical workflow<br />
A theoretical workflow<br />Feedback<br />Design assets are shared with the entire project team <br />Functional reference...
A theoretical workflow<br />Integration<br />Designs can be integrated into the functional reference code base by refactor...
A theoretical workflow<br />
The wrap up<br />Workflows come in various forms<br />Workflows are a series of steps to complete a task<br />They can bet...
More about workflows...<br />We love workflows and will be speaking again at D2WC in Kansas City July 14 – 16<br />
Thank you... Any Questions?<br />Any questions?<br />	Ask them if you got them...<br />James and Aaron<br />	Twitter: @jam...
Upcoming SlideShare
Loading in...5
×

Exploring a Designer and Developer Workflow

2,387

Published on

Designers and Developers have long sought the holy grail: a seamless workflow between both disciplines that allow each to stretch their creative legs and at the same time, not step on each others toes.

However, such a workflow does not yet exist and both disciplines have struggled to keep projects on time, under budget, and keep the other happy along the way. Software, such as Adobe’s Creative Suite, can help alleviate many of the pain points by creating workflows between products. However, tools can only solve part of the problem.

Designers and developers need to work together to create their own workflows that provide an environment that allows for parallel design and development. In this session we will examine one such workflow called the ‘Designer and Developer Contract’. This workflow will focus on wireframes as the contract between both disciplines and explore how a single document can be used by everyone on the project team.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,387
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Exploring a Designer and Developer Workflow

  1. 1. Exploring a Designer and Developer Workflow<br />James Polanco<br />Aaron Pedersenwww.developmentarc.comflash and the city 2011<br />
  2. 2. Who are we?<br />James Polanco<br />Aaron Pedersen<br />Web Application ArchitectsFlex, Flash, AIR, Ajax... Getting into Scala and Lift (James is a nerd)<br />Founders of DevelopmentArcconsulting and development firm focusing on web applications<br />Authors of“Adobe Flash Platform Start to Finish: Working Collaboratively using Adobe Creative Suite 5” – Adobe Press<br /> “Understanding Flex 4 Component Development” – Lulu.com<br />Developers of Maque<br /> cross-platform tool for all your mocking needs. <br />
  3. 3. What is this session about<br />Introduce the design and developer workflow<br />What is a workflow<br />What is a designer and developer workflow<br />A look at different type of workflows <br />Examine issues of the workflows<br />Look at the challenges we deal with on a daily basis interacting with each discipline<br />An in depth look at a particular workflow<br />A favorite of DevelopmentArc and one we practice with most projects<br />
  4. 4. Introduce the design and developer workflow<br />What is a workflow?<br />
  5. 5. Introduce the design and developer workflow<br />What are the common types of workflows?<br />Between tools<br />Between team members<br />Between companies and divisions<br />Between disciplines<br />
  6. 6. Introduce the design and developer workflow<br />Between tools...<br />Photoshop -> Flash Catalyst -> Flash Builder<br />InDesign -> Illustrator -> Flash Professional<br />Photoshop -> Fireworks (production assets)<br />IDE -> Source Control<br />Source Control -> Deployment Environments (your builds!)<br />Customer Service Platform -> Issue Tracking -> Source Control<br />
  7. 7. Introduce the design and developer workflow<br />Between team members...<br />Project Manager -> Executives<br />Client -> Management -> Development<br />Development -> QA -> Client<br />
  8. 8. Introduce the design and developer workflow<br />Between companies and divisions...<br />Design Agency -> Design Agency<br />Design Agency -> Development House -> Deployment Services<br />Design Agency -> Production House -> Development House<br />Executive Team -> Design Team -> Development Team –> Deployment Team<br />
  9. 9. Introduce the design and developer workflow<br />Between disciplines...<br />Architect -> Lead Developer -> Junior Developer<br />Creative Director -> UX Lead -> Designer<br />Designer -> Developer <br />
  10. 10. Introduce the design and developer workflow<br />What are the common roles of a designer?<br />Creative briefs, style guides, informational wireframes, detailed wireframes, designs comps, asset creation, other UX focuses<br />What are the common roles of a developer?<br />Architecture planning, UML diagrams, framework development/integration, component development, data management, unit testing, and lots of code<br />How do designers and developers work together?<br />Assets and designs are provided to the developer and the developer is responsible for implementing<br />
  11. 11. Examine issues of the workflows<br />Every workflow has it’s issues. Common ones include<br />To much focus on the touch point<br />Feedback is reactive<br />Pitfalls of planning<br />
  12. 12. Examine issues of the workflows<br />To much focus on the touch point<br />We to often see each other working in silos with little communication with each discipline<br />When we do work with each other it’s at handoff<br />This creates tension and competition with each other<br />
  13. 13. Examine issues of the workflows<br />Feedback is reactive<br />Communication and feedback is usually post completion of the other’s work<br />Feedback is usually perceived as negative<br />Finger pointing and blame become focal points<br />
  14. 14. Examine issues of the workflows<br />Pitfalls of (not) planning <br />The first shortcut we as a team take is reducing planning<br />Often disciplines are left out of the planning process<br />Misinterpretations of workflows lead to bad planning<br />
  15. 15. An in depth look at a particular workflow<br />Introduction to the designer and developer contract<br />The importance of wireframing during planning<br />Executing the contract<br />A theoretical workflow<br />
  16. 16. An in depth look at a particular workflow<br />What is the designer and developer contract<br />A process of discovering and defining common goals within the current project<br />An open communication workflow between designers and developers<br />A process that requires mutual respect between disciplines (beers for everyone)<br />
  17. 17. An in depth look at a particular workflow<br />Why is it important<br />Defines a common syntax that both designers and developers can communicate with<br />Allows for a more parallel workflow between designers and developers<br />Creates a mutual understanding of features, functionality and use cases for current goals of the project<br />This can be the application, iteration, or even an individual component being developed<br />This helps prevent unnecessary refactoring and re-design due to miscommunication and reactive feedback<br />
  18. 18. The importance of wireframing during planning<br />Wireframing is the visual planning of the application<br />Helps provide a visual representation of the application’s features<br />Wireframing should involve development<br />Wireframes become the basis for the contract<br />
  19. 19. The importance of wireframing during planning<br />
  20. 20. The importance of wireframing during planning<br />
  21. 21. The importance of wireframing during planning<br />
  22. 22. The importance of wireframing during planning<br />
  23. 23. An in depth look at a particular workflow<br />Executing the contract<br />Wireframes are the foundation of the contract<br />Break down the user interface into manageable sections<br />Each section represents a element that can be further broken down into parts and states<br />
  24. 24. Executing the contract (divide and conquer)<br />Defining parts<br />Designers think: a group of design elements, such as files, layers, groups<br />Developers think: a class, movieclips, divs, and components (Flash/Flex)<br />Defining states<br />Designers think: layers, groups, css, states (Fireworks, Flash Catalyst)<br />Developers think: css, component states, other code that effects layout <br />
  25. 25. Executing the contract (divide and conquer)<br />Designers create designs based on wireframes and the contract<br />Wireframes can be used as a template for design in tools such as InDesign allowing you to use the assets as a start point in Illustrator<br />Design should be created in an application that provides easier translation into projects<br />For Flash and Flex applications Illustrator easier integration into Flash Platform tools<br />Fireworks helps HTML integration with Dreamweaver or other HTML development tools<br />
  26. 26. Executing the contract (divide and conquer)<br />Developers build applications based on wireframes and the contract<br />Business logic can be constructed to meet the contract<br />Basic UI and layout components can be constructed<br />The ui elements can use a simple look and feel until designs are finalized<br />
  27. 27. A theoretical workflow<br />A parallel design and developer workflow<br />
  28. 28. A theoretical workflow<br />Start with wireframes<br />Remember, wireframes are part of the planning process and require input from the entire team<br />Wireframes kick off the designer and developer workflow<br />
  29. 29. A theoretical workflow<br />Review wireframes<br />Developers and project managers help provide crucial input and gain insight from a visual representation of the application’s features<br />Establish the designer and developer contract based on wireframes<br />
  30. 30. A theoretical workflow<br />
  31. 31. A theoretical workflow<br />Both design and development start in parallel<br />Both teams work in their silos with awareness of each others goals<br />Communication channels are open and are welcome<br />
  32. 32. A theoretical workflow<br />Designers create designs based on contract<br />Designs are based on wireframes and the contract<br />Styles guides are created<br />Production assets are started<br />
  33. 33. A theoretical workflow<br />
  34. 34. A theoretical workflow<br />Development creates a functional reference application<br />99% of the business logic can be created<br />The layout and UI can be created with design and logic separation in mind <br />A fully operational application can be completed based on wireframes and the contract<br />
  35. 35. A theoretical workflow<br />
  36. 36. A theoretical workflow<br />Feedback<br />Design assets are shared with the entire project team <br />Functional reference application is demoed with the entire project team<br />Time is allowed for cross-review and feedback by each team<br />Feedback is not an end goal. It’s continued through iterations and deadlines<br />
  37. 37. A theoretical workflow<br />Integration<br />Designs can be integrated into the functional reference code base by refactoring the UI skin of the application<br />
  38. 38. A theoretical workflow<br />
  39. 39. The wrap up<br />Workflows come in various forms<br />Workflows are a series of steps to complete a task<br />They can between tools, companies, divisions, team members, and disciplines<br />Workflows have various pitfalls<br />Workflows are often misunderstood by management<br />Planning is lacking from many project’s primary goals<br />Bad or missing workflows can create tension between team members<br />The designer and developer contract<br />Contract is based on wireframes<br />Wireframes are part of the planning process and include all teams<br />Contract provides clear and common goals for both disciplines<br />Communication is paramount between design and development<br />
  40. 40. More about workflows...<br />We love workflows and will be speaking again at D2WC in Kansas City July 14 – 16<br />
  41. 41. Thank you... Any Questions?<br />Any questions?<br /> Ask them if you got them...<br />James and Aaron<br /> Twitter: @jamespolanco, @aaronpedersen<br /> Email: info@developmentarc.com<br /> Website: http://www.developmentarc.com<br />Maque (Get the beta now!)<br /> Twitter: @maqueapp<br /> Email: beta@maqueapp.com<br /> Website: http://www.maqueapp.com<br />

×