Your SlideShare is downloading. ×
0
Process forDevelopers,Designers and MeJeremy Greenawalt
Hi.
Why do I careabout process?
I worked all sortsof jobs.
I worked with allsorts of teams.
I used all sorts ofsystems.
I got bored.
Why does processmatter?
Planning
Kicking Off
It’s a map
It’s triage
Process != 12 steps
Process is organic
Process is a seriesof phases
Universal PhasesPlan   Learn   Design   Build   Launch
Each phase has:•Resources•Actions•Deliverables•Payments
Our websiteprocess.
Planning
Tasks•Meet with clients•Research (project viability)•Come to agreement•Set deadlines•Make stuff legal
Deliverables•Proposal•Contract•Updated project plan / process
Discovery
Tasks•Discovery meetings with client•Research•Team brainstorming•Define project scope
Deliverables•Research artifacts (personas, reports)•Site IA•One-sentence purpose statement•Project resource folders
•Content AreaVisualDesign
Wireframes•Content Area      Walk             Home     The Vision         The Walk              The Voices                ...
Mood Boards•Content Area
Style Tiles•Content Areahttp://styletil.es
Design Persona•Content Area     Overview                                                                                  ...
Lo-Fi   •Content Area Lo-FiConcept Lo-Fi                  Lo-Fi               ReviewConcept                 Comp Lo-FiConc...
Hi-Fi   •Content Area                   Hi-FiReview                     Review                   Comp
DeliveryHomepage                                              Header                                             Content P...
Development
Tasks•Setup staging site•Build HTML mockups•Create skin or template•Create pages•Build special functionality
Testing•Feature functionality (PHP/Javascript)•Browser compatability•Usability
Deliverables•Staging site
•Content AreaLaunch
Tasks•Final training•Go-no-go Meeting
Deliverables•Launched Site•Design artifacts•Copyright / licensing
We made a TYPO3process.
IA /Planning   Discovery                       Wireframe
TYPO3           Dev Site                                  PagesReview +Sign-Off                  Visual Design
Content                             Content           StrategyReview +Sign-Off                  Template Dev
Final          LaunchTesting
Responsive designreally screwed usup.
Iterate. A lot.Comp   Test    Mockup   Test
One Hi-Fi Comp•Ideal size•Design with a solid grid
Multiple Lo-Fi Iterations•Play with other sizes early•See how your grid needs to adjust•Play with layouts•Play with typogr...
Initial Mockup•Boilerplate•Mobile first(?)•Build in one direction
Hi-Fi Iteration•Play with every size mercilessly•Collaborate•Let the developer shine
Finalize mockup•Clean out all the cruft•Test some more•Start TYPO3 integration
Questions?
Contact Info:jeremy@pocketrevolutionary.com@jgreenawaltwww.pocketrevolutionary.comslideshare.net/jeremygreenawalt
Upcoming SlideShare
Loading in...5
×

Process for Developers, Designers, & Me

848

Published on

Published in: Design, Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
848
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • I blog at pocketrevolutionary.com\nI own Craft + Story\n\nNo matter if you're a solo designer, project manager, or part of a development team, understanding and developing processes is important to successful projects. I've worked with teams and clients of all different sizes and makeups (solo, internal teams, contractors, design teams, etc.), and I've learned some best practices and tips.\n\nI'm going to walk through the process of a standard project from first meeting to discovery, strategy, design, development, deployment, and management, and I'll highlight how to keep things on track and some of the sub-processes (like visual design) that we have experimented with over the years. For instance, I'm going to cover different possible steps in the visual design like personality profiles, mood boards and style tiles that can be helpful for experienced designers, students and project managers to know about.\n\nI will also talk about how we can use some of the features of TYPO3 like the separation of content from visual design and workspaces to make our processes run even smoother and allow multiple steps to run concurrently (like developing content strategies while the final CSS is being finished).\n\nFinally, I want to talk about how responsive design (and a general separation of content from visual design) should affect our processes. The new world of multiple screens means that our design and development process has a iterative loops of designing a static comp, iterating at different sizes, creating a functional mockup, iterating some more at different sizes, and finally building a TYPO3 template.\n
  • \n
  • backend developer, web designer, frontend developer, Java programmer, systems administrator, web director, creative director, and founder of my own studio.\n
  • You + internal team\nYou + your team + decision maker\nYou + your team + client team + decision maker\nYou + client team\nYou + your team + outside contractors + client team + decision maker\n
  • Waterfall\nScrum\nKanban\nChaos theory\n
  • I was a bored manager sometimes. It was either get in my designers’ ways or start playing with a new tool. Instead, I ran a sort of “lab” for different processes and found the unifying pieces that we integrated into our overall process.\n
  • \n
  • •Helps you make accurate projections.\n•See where you are in trouble.\n•If you're the professional, it's your job to define the process.\n\n
  • •Gets you ready to go.\n•Makes sure you start in order.\n\n
  • •Helps you know what's coming next.\n•If you get lost or have to pause, it can help you find where you are.\n•See who's court the ball is in.\n•The process, like a recipe, always points to what's coming up next even if you're "improvising" some of the steps.\n\n
  • •Tells you when to add or shift resources.\n•Prevents you from wasting time.\n•Manage scope creep.\n•The process is there to save you from screwing up or running everything in your head.\n•Process is like your contract. It might be invisible until it hits the fan.\n\n
  • \n
  • •Make the process your own.\n•You can still improvise steps\n▼Adapt the process to the project\n•Make those adaptations beforehand when at all possible.\n\n
  • \n
  • •Owner\n•Vision / Mission Statement\n•Random information about project\n•Links to other parts of the project\n•Show example\n\n
  • \n
  • Panic’s board\nGeckoboard\nCulturedCode.com\n
  • PPMRoadmap.com\nBurndowngraph.com\nTrailmap.com\n\n
  • Legos\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • One sentence purpose statement per project\n"Project folders" have fonts, textures, etc.\n
  • \n
  • \n
  • \n
  • \n
  • Aaron Walter, “Designing For Emotion”\n
  • \n
  • \n
  • Design comps\nContent Requirements\nStyle Guide\nGet sign-off\n
  • •Build clickable mockups in HTML\n•Create skin or template\n•Build special functionality while the client is working on content\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • ▼Ignore pixel perfection for different sizes\n•If you don't trust the developer to know at least as much (preferably more) about responsive design techniques and pitfalls than a designer, you're already screwed. \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Process for Developers, Designers, & Me"

    1. 1. Process forDevelopers,Designers and MeJeremy Greenawalt
    2. 2. Hi.
    3. 3. Why do I careabout process?
    4. 4. I worked all sortsof jobs.
    5. 5. I worked with allsorts of teams.
    6. 6. I used all sorts ofsystems.
    7. 7. I got bored.
    8. 8. Why does processmatter?
    9. 9. Planning
    10. 10. Kicking Off
    11. 11. It’s a map
    12. 12. It’s triage
    13. 13. Process != 12 steps
    14. 14. Process is organic
    15. 15. Process is a seriesof phases
    16. 16. Universal PhasesPlan Learn Design Build Launch
    17. 17. Each phase has:•Resources•Actions•Deliverables•Payments
    18. 18. Our websiteprocess.
    19. 19. Planning
    20. 20. Tasks•Meet with clients•Research (project viability)•Come to agreement•Set deadlines•Make stuff legal
    21. 21. Deliverables•Proposal•Contract•Updated project plan / process
    22. 22. Discovery
    23. 23. Tasks•Discovery meetings with client•Research•Team brainstorming•Define project scope
    24. 24. Deliverables•Research artifacts (personas, reports)•Site IA•One-sentence purpose statement•Project resource folders
    25. 25. •Content AreaVisualDesign
    26. 26. Wireframes•Content Area Walk Home The Vision The Walk The Voices Events Blog Get Involved Home The Vision The Walk The Voices Events Blog Get Involved Live Webcast 2nd Live Sharing Volunteers Webcast BANNER Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod consectetuer adipiscing elit, sed diam nonummy nibh euismod Friday, June 17th @ 7pm tincidunt ut laoreet dolore magna aliquam erat volutpat. tincidunt ut laoreet dolore magna aliquam erat volutpat. Contact: brittany@backtolifemovement.com Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Email (972) 555-5555 laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Download Promo Materials Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Past Events laoreet dolore magna aliquam erat volutpat. October Event Kickoff Contact Info Address Virtual Walk Giving Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, Share consectetuer adipiscing elit, sed diam nonummy nibh euismod consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. tincidunt ut laoreet dolore magna aliquam erat volutpat. Email Map Amount: Go! $10.00 Submit Event Information Contact Information Copyright Information Event Information Contact Information Copyright Information
    27. 27. Mood Boards•Content Area
    28. 28. Style Tiles•Content Areahttp://styletil.es
    29. 29. Design Persona•Content Area Overview Voice Personality Map If your brand could talk, how would they speak? What Write an overview of the brand personality. sorts of things would they say? Would they speak with a If your brand were a person, who would it folksy vernacular or a refined, erudite clip? Describe the specific aspects of your brands voice, and how it might be? change in various communication situations. People DOMINANT change their language and tone to fit the situation, and Maybe you have a mascot which already is the visual so should the voice of your brand. representation of the brand personality. If so, describe its traits and how that relates to the personality you want to convey. Provide examples of the type of copy that might be used in different situations in your interface. This will help writers quickly get a sense for how your design persona should communicate. UNFRIENDLY FRIENDLY SUBMISSIVEhttp://aarronwalter.com/design-personas/
    30. 30. Lo-Fi •Content Area Lo-FiConcept Lo-Fi Lo-Fi ReviewConcept Comp Lo-FiConcept
    31. 31. Hi-Fi •Content Area Hi-FiReview Review Comp
    32. 32. DeliveryHomepage Header Content PageElements The different textures in the header add a richness and detail to the overall design, but Elements will not clash with other graphics and will notRotating Banner grab visitors’ eyes away from the content. We created one example of a content page,For the home page, we have designed it to The identity of Trinity Church is clear, but not but we will provide a couple of differenthave one large area for a rotating banner. In distracting. configurations with different columnaddition, we have placed extra white space placement for Jason to use in the website.around the banner so that the images canstand on their own. This helps the most Bannerimportant content (the banner image) grab All content page templates will have oneusers’ attention and prevents the color Navigation section for a banner or “featured content” ofpalettes from the header and the banner graphics or text. If the banner is notgraphic from having to complement each necessary, it can always be omitted on anyother. We tested this with multiple current For the top navigation, we have reduced the page just by not adding content for theTrinity banners. number of options to make it clearer where banner section.On Sunday mornings, the big banner will be information can be found and preventreplaced by the live video to make it easier to overload for first-time visitors. Only sections are now listed in the header, while tools and Sidebar Navigationget live viewers involved without distraction. resources are listed in the footer. For navigation within a section, we think that the navigation needs to be in a sidebar on theFeatured Elements left side. Because this will be consistent,Under the home page, we have designed an users will be able to find pages more clearlyarea to highlight the most important events or and the navigation will appear next to thecontent pages (like the “What to expect” content where their eyes are already looking.page). This is just a content area (not We have added arrows to show that it ishardcoded into the template),so Jason can clearly a menu and encourages first-timeeasily change the number of columns or their visitors to explore. In addition, werelative distribution across the total width automatically highlight the current page with(e.g. Three columns could be 1/2 + 1/4 + 1/4). a consistent green so that users always know where they are.
    33. 33. Development
    34. 34. Tasks•Setup staging site•Build HTML mockups•Create skin or template•Create pages•Build special functionality
    35. 35. Testing•Feature functionality (PHP/Javascript)•Browser compatability•Usability
    36. 36. Deliverables•Staging site
    37. 37. •Content AreaLaunch
    38. 38. Tasks•Final training•Go-no-go Meeting
    39. 39. Deliverables•Launched Site•Design artifacts•Copyright / licensing
    40. 40. We made a TYPO3process.
    41. 41. IA /Planning Discovery Wireframe
    42. 42. TYPO3 Dev Site PagesReview +Sign-Off Visual Design
    43. 43. Content Content StrategyReview +Sign-Off Template Dev
    44. 44. Final LaunchTesting
    45. 45. Responsive designreally screwed usup.
    46. 46. Iterate. A lot.Comp Test Mockup Test
    47. 47. One Hi-Fi Comp•Ideal size•Design with a solid grid
    48. 48. Multiple Lo-Fi Iterations•Play with other sizes early•See how your grid needs to adjust•Play with layouts•Play with typography•Ignore perfection
    49. 49. Initial Mockup•Boilerplate•Mobile first(?)•Build in one direction
    50. 50. Hi-Fi Iteration•Play with every size mercilessly•Collaborate•Let the developer shine
    51. 51. Finalize mockup•Clean out all the cruft•Test some more•Start TYPO3 integration
    52. 52. Questions?
    53. 53. Contact Info:jeremy@pocketrevolutionary.com@jgreenawaltwww.pocketrevolutionary.comslideshare.net/jeremygreenawalt
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×