Exploring a Designer and Developer Workflow

  • 2,207 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,207
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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