Process for Developers, Designers, & Me
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
898
On Slideshare
898
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
18
Comments
0
Likes
1

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
  • \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

  • 1. Process forDevelopers,Designers and MeJeremy Greenawalt
  • 2. Hi.
  • 3. Why do I careabout process?
  • 4. I worked all sortsof jobs.
  • 5. I worked with allsorts of teams.
  • 6. I used all sorts ofsystems.
  • 7. I got bored.
  • 8. Why does processmatter?
  • 9. Planning
  • 10. Kicking Off
  • 11. It’s a map
  • 12. It’s triage
  • 13. Process != 12 steps
  • 14. Process is organic
  • 15. Process is a seriesof phases
  • 16. Universal PhasesPlan Learn Design Build Launch
  • 17. Each phase has:•Resources•Actions•Deliverables•Payments
  • 18. Our websiteprocess.
  • 19. Planning
  • 20. Tasks•Meet with clients•Research (project viability)•Come to agreement•Set deadlines•Make stuff legal
  • 21. Deliverables•Proposal•Contract•Updated project plan / process
  • 22. Discovery
  • 23. Tasks•Discovery meetings with client•Research•Team brainstorming•Define project scope
  • 24. Deliverables•Research artifacts (personas, reports)•Site IA•One-sentence purpose statement•Project resource folders
  • 25. •Content AreaVisualDesign
  • 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. Mood Boards•Content Area
  • 28. Style Tiles•Content Areahttp://styletil.es
  • 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. Lo-Fi •Content Area Lo-FiConcept Lo-Fi Lo-Fi ReviewConcept Comp Lo-FiConcept
  • 31. Hi-Fi •Content Area Hi-FiReview Review Comp
  • 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. Development
  • 34. Tasks•Setup staging site•Build HTML mockups•Create skin or template•Create pages•Build special functionality
  • 35. Testing•Feature functionality (PHP/Javascript)•Browser compatability•Usability
  • 36. Deliverables•Staging site
  • 37. •Content AreaLaunch
  • 38. Tasks•Final training•Go-no-go Meeting
  • 39. Deliverables•Launched Site•Design artifacts•Copyright / licensing
  • 40. We made a TYPO3process.
  • 41. IA /Planning Discovery Wireframe
  • 42. TYPO3 Dev Site PagesReview +Sign-Off Visual Design
  • 43. Content Content StrategyReview +Sign-Off Template Dev
  • 44. Final LaunchTesting
  • 45. Responsive designreally screwed usup.
  • 46. Iterate. A lot.Comp Test Mockup Test
  • 47. One Hi-Fi Comp•Ideal size•Design with a solid grid
  • 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. Initial Mockup•Boilerplate•Mobile first(?)•Build in one direction
  • 50. Hi-Fi Iteration•Play with every size mercilessly•Collaborate•Let the developer shine
  • 51. Finalize mockup•Clean out all the cruft•Test some more•Start TYPO3 integration
  • 52. Questions?
  • 53. Contact Info:jeremy@pocketrevolutionary.com@jgreenawaltwww.pocketrevolutionary.comslideshare.net/jeremygreenawalt