Motegues & Capulets: Ending The Feud Between Designers & Developers

Building anything for the web is a daunting task. Not only does one need to wrangle code languages, information architecture, data relationships, visual appeal, brand & messaging, browser / resolution support, but there’s also times when the biggest challenge is communicating with other people on your team who seem to be speaking another language.

We will look at the phases of a typical project through the eyes of both a designer and a developer, identifying pain points that can crop up throughout the process. We’ll also demonstrate how to channel these seemingly opposing viewpoints into building something great for your client.

Transcript

1. Montagues & Capulets Ending the Feud Between Designers & Developers
2. @marktimemedia Two careers, both alike in dignity, In fair Milwaukee, where we lay our scene, A modern grudge of code and imagery, A battle for the mastery of the screen. From forth the brilliant minds of these two pros A pair of star-cross'd workers build a site; When both respect the things the other knows They with their joint endeavor make it right. So let collaboration now commence, To solve the client’s problems on the page, Which, with specialized knowledge applied hence, Is now the half hours' traffic of our stage; The which if you with patient ears attend, Design and dev, our talk shall strive to mend.
3. @marktimemedia | @add_action_dan Our Montague: Actor: Dan Beil Occupation: Developer Employer: Alley Interactive Former in-house developer (2yr) & freelancer (4+ yr), collaborated with large & small teams as well as directly with clients to build WordPress sites
4. @marktimemedia | @add_action_dan Our Capulet: Actor: Michelle Schulp Occupation: Designer Employer: Independent 6+ yr independent collaborating with developers, designers, agencies, and businesses on WordPress sites. Former in-house designer (2 yr).
5. @marktimemedia | @add_action_dan Set The Stage: The Waterfall
6. @marktimemedia | @add_action_dan Act 1: The Meeting
7. @marktimemedia | @add_action_dan Scene: Enter Client A qualified client with preconceived notions Has heard many buzzwords for web technology, but is willing to take direction Represents an image- conscious, minimalist brand looking to set up a large product showcase/portfolio
8. @marktimemedia | @add_action_dan Take 1: Designer Who are your users? What problems are we solving? What are some examples of sites you do/don’t like? What can you tell me about your brand? Is there existing content? How many products and how many details?
9. @marktimemedia | @add_action_dan Scene: The Conflict Designer hasn’t asked the questions a developer needs answered More meetings, scope creep, problems down the line
10. @marktimemedia | @add_action_dan Take 2: Developer Is there an existing codebase? What functionality do you need and how customized? Do we need to integrate with third party code/APIs? Do we have to migrate content from anywhere? What is the expected traffic?
11. @marktimemedia | @add_action_dan Act 2: The Proposal
12. @marktimemedia | @add_action_dan Scene: Writing Quote Pricing an ecommerce-style portfolio with a mega menu, featured products, blog, integrated social sharing, and a large product database, but no online purchasing
13. @marktimemedia | @add_action_dan Take 1: Designer Reaches out to developer with general ideas before writing Amount and type of content being designed Number of pages Images and elements displayed Calls to action & hierarchy Support multiple screen sizes
14. @marktimemedia | @add_action_dan Scene: The Conflict Not getting developer involved before the proposal, or getting developer involved with incomplete or vague info, leads to a poorly specced project
15. @marktimemedia | @add_action_dan Take 2: Developer Speccing content types Unique templates Third party integration Shared vs. unique functionality Admin content management User management
16. @marktimemedia | @add_action_dan Act 3: The Design
17. @marktimemedia | @add_action_dan Scene: Art & Layout Designs mega-menu to organize content, minimalist aesthetic based on typographic detail & custom branding all elements on the page
18. @marktimemedia | @add_action_dan Take 1: Designer Designer creates wireframes and style guides, followed by complete mockups at various screen sizes Custom design includes all elements including fonts, icons, form items, nav, and lists Decides from client meeting that featured products should be “popular” products
19. @marktimemedia | @add_action_dan Scene: The Conflict An incomplete design that doesn’t tell the whole story Lack of understanding for the functionality or logic behind design decisions Creation of individual pages rather than a system
20. @marktimemedia | @add_action_dan Take 2: Developer “Why is this different?” Universal vs unique layouts, elements, screen sizes, etc. Layout/structure matching how content can populate it Problems with custom designing universal browser elements or third party components
21. @marktimemedia | @add_action_dan Act 4: The Development
22. @marktimemedia | @add_action_dan Scene: Build Site Needs to display and filter products, feature certain products on homepage, and both dynamically and manually populate mega menu
23. @marktimemedia | @add_action_dan Take 1: Developer Content architecture (CPT/taxonomy/meta fields) Admin content management user experience Extrapolate a complete frontend system for displaying content from design files
24. @marktimemedia | @add_action_dan Scene: The Conflict Development discovery: challenging assumptions about element functionality Designs breaking with non- perfect content (text length, sizes, dimensions, or empty) Standardization where things need to be unique
25. @marktimemedia | @add_action_dan Take 2: Designer Create a design system to style most small unforeseen design challenges Provide explicit guidance on typography/grids/spacing on a global and per-page basis as needed Work creatively within budgeted scope to balance custom with defaults
26. @marktimemedia | @add_action_dan Act 5: The Delivery
27. @marktimemedia | @add_action_dan Scene: Launch Site Collaborating with the client and internally to find, prioritize, and fix bugs
28. @marktimemedia | @add_action_dan Take 1: Developer Prioritizing bug fixes based on time and functionality Purely visual bug fixes get pushed to low priority
29. @marktimemedia | @add_action_dan Scene: The Conflict Each feels their bug fixes are most important, and the deadline is looming
30. @marktimemedia | @add_action_dan Take 2: Designer Taking responsibility for the brand by pushing for most significant visual bug fixes
31. @marktimemedia | @add_action_dan Finale
32. @marktimemedia A fount of knowledge WordCamp with it brings; The biases and conflicts have been shed Go hence, to have more talk of these great things; While enjoying the lunch that's provided For never was a session better spent Than this of design and development. Dan Beil @add_action_dan Michelle Schulp @marktimemedia Slides: bit.ly/shakespearepress