Montagues & Capulets Ending the Feud Between Designers & Developers

@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.

@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

@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).

@marktimemedia | @add_action_dan Set The Stage: The Waterfall

@marktimemedia | @add_action_dan Act 1: The Meeting

@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

@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?

@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

@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?

@marktimemedia | @add_action_dan Act 2: The Proposal

@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

@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

@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

@marktimemedia | @add_action_dan Take 2: Developer Speccing content types Unique templates Third party integration Shared vs. unique functionality Admin content management User management

@marktimemedia | @add_action_dan Act 3: The Design

@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

@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

@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

@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

@marktimemedia | @add_action_dan Act 4: The Development

@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

@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

@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

@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

@marktimemedia | @add_action_dan Act 5: The Delivery

@marktimemedia | @add_action_dan Scene: Launch Site Collaborating with the client and internally to find, prioritize, and fix bugs

@marktimemedia | @add_action_dan Take 1: Developer Prioritizing bug fixes based on time and functionality Purely visual bug fixes get pushed to low priority

@marktimemedia | @add_action_dan Scene: The Conflict Each feels their bug fixes are most important, and the deadline is looming

@marktimemedia | @add_action_dan Take 2: Designer Taking responsibility for the brand by pushing for most significant visual bug fixes

@marktimemedia | @add_action_dan Finale

@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