Process for Developers, Designers, & Me
•Download as KEY, PDF•
1 like•1,041 views
The document outlines a process for developing websites that includes planning, discovery, design, development, testing, and launch phases. Each phase involves specific tasks, deliverables, and resources. The process emphasizes iterative design, testing designs across different screen sizes, and collaboration between designers and developers.
Recommended
More Related Content
Similar to Process for Developers, Designers, & Me
Similar to Process for Developers, Designers, & Me (13)
Recently uploaded
Recently uploaded (20)
Process for Developers, Designers, & Me
- 1. Process for Developers, Designers and Me Jeremy Greenawalt
- 2. Hi.
- 3. Why do I care about process?
- 4. I worked all sorts of jobs.
- 5. I worked with all sorts of teams.
- 6. I used all sorts of systems.
- 7. I got bored.
- 9. Planning
- 10. Kicking Off
- 11. It’s a map
- 12. It’s triage
- 13. Process != 12 steps
- 15. Process is a series of phases
- 16. Universal Phases Plan Learn Design Build Launch
- 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
- 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
- 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 SUBMISSIVE http://aarronwalter.com/design- personas/
- 30. Lo-Fi •Content Area Lo-Fi Concept Lo-Fi Lo-Fi Review Concept Comp Lo-Fi Concept
- 31. Hi-Fi •Content Area Hi-Fi Review Review Comp
- 32. Delivery Homepage Header Content Page Elements 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 not Rotating 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 different have one large area for a rotating banner. In distracting. configurations with different column addition, we have placed extra white space placement for Jason to use in the website. around the banner so that the images can stand on their own. This helps the most Banner important content (the banner image) grab All content page templates will have one users’ attention and prevents the color Navigation section for a banner or “featured content” of palettes from the header and the banner graphics or text. If the banner is not graphic from having to complement each necessary, it can always be omitted on any other. We tested this with multiple current For the top navigation, we have reduced the page just by not adding content for the Trinity banners. number of options to make it clearer where banner section. On Sunday mornings, the big banner will be information can be found and prevent replaced 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 Navigation get 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 the Featured Elements left side. Because this will be consistent, Under the home page, we have designed an users will be able to find pages more clearly area to highlight the most important events or and the navigation will appear next to the content 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 is hardcoded into the template),so Jason can clearly a menu and encourages first-time easily change the number of columns or their visitors to explore. In addition, we relative 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
- 39. Deliverables •Launched Site •Design artifacts •Copyright / licensing
- 40. We made a TYPO3 process.
- 41. IA / Planning Discovery Wireframe
- 42. TYPO3 Dev Site Pages Review + Sign-Off Visual Design
- 43. Content Content Strategy Review + Sign-Off Template Dev
- 44. Final Launch Testing
- 45. Responsive design really screwed us up.
- 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?
Editor's Notes
- \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