Designers talking to Developers

designers talking to developers

Poonam and Sarah

Describing Design Action's shop process.

Used to work mostly with Radical Designs, RD would build the sites that DA designed. Now doing lots of internal development over the last year.

Intake process:

Usually two people decide to do intake on the project, (one design one dev), they talk to client, give questionnaire, usually they decide who will be working on it during the intake and estimation.

Designer and developer then meet to come up with a plan, figure out technical requirements, extensions, pulgins, CMS, etc. Explain to the client how the process is going to work.

DA is a full service shop, so sometimes need to be coordinating web design with brochure, logo, business cards. May need to bring in more team members.

One main point of contact for client, but during the process they will be primarily talking to the team member most responsible for that part.

Information Architecture

Figure out goals, map out site structure / site map, wire frame line drawings for primary templates front page, default interior page templates. Think of hierarchy of content, teasers for important content. Multiple iterations involving client.

Question: how do you manage when content, images, etc are not pre existing? Do you need strict content deadlines? RD: sometimes builds working wire frames as websites so client can see sizes of holes to fill. DA: also builds wire frame first, gets clients to start inputting content. Helps to start training also.

Quilted (use sprint construction): Had entire organisation come in and start adding all the content in the office in the same room.

After wire frame is built, designer starts one visual design, developer starts training the client about inputting content. 1st training is just how to use a CMS 2nd training is more about how to use specific components of the site, and answer questions that have come up since 1st.

Design deliverables also includes instructions for style guide (i.e. when to use H1, H2, etc), give sample content with all styles implemented to use as a guide, as hidden sample page.

How do you get clients to use css styles instead of WISIWIG colors? 1. remove some of the options from editor 2. Tell them "if you are doing the same style over and over, let us make a css style for you" 3. Only have one person put up content, use forms to force a consistent internal format. (but doesn't that undermine why you have cms?) most orgs can't afford a dedicated person do approve or implement posts as a gatekeeper. 4. Have very detailed and specific content types in the CMS for content input. 5. Get organisation to train its members well 6. Try to explain what would happen if you wanted to re-design in the future.

What do you do when you are skinning and creating the design and it no longer works? How do designers and devs and client work it out?

Question: how important is this specific aspect of the design? If its gonna take 5 hours to figure out how to do it, is it worth it, or is there another simpler design option. Try to figre out the issues ahead of time as much as possible.

Some developers like to have dummy sites that that have default content that have all of the elements to that you can know what pieces are all ready there

Sometimes its really great to have designs that seem "really hard" to implement, because it pushes developers to learn how to do things and move beyond standard practices, push boundaries.

Sometimes its interesting for developers to send examples of technically cool things to designers to show what might be possible.

Its important for designers to understand concepts of "content buckets"

Some shops completely lock down design before writing any code.

DA is trying to make sure to do a final design pass after the development and site testing.

How do you decide how deep the design goes, how many different types of content can you style, etc?

Session Handout

Web design + development process

• 1.Intake & Discovery

• Basic intake on project scope and needs conducted
• Rough estimate submitted
• Project Manager and team (Designer + Developer) identified
• Intake questionnaire filled out by client to prepare for meeting with DAC
• Face-to-face meeting (or phone conference)
• Discuss goals of the organization and website
• Discuss site functionality & scope
• Discuss choice of CMS (Wordpress or Joomla), domain and hosting
• Review DAC web process & discuss roles, responsibilities
• After the meeting » DAC proposes revised estimate, timeline, final functionality list, and contract
  

Designer/Developer interactions: Intake may be done by designer or developer, and either can be the Proj. Manager At face-to-face meeting, developer makes sure that site needs are technically doable, and helps to chose the right CMS for the job Designer makes sure that design needs and scope are reasonable, and a good fit for our shop. Occasionally, designer will coordinate Logo/identity design (in addition to the web design), and may pull in an identity designer at the shop

• 2. Information Architecture

• Sitemap development over multiple rounds until finalized
• Discussion about front-page and interior-page elements with client (based on site and organizational goals)
• Wireframe development for front and interior templates over multiple rounds until finalized.
• Deliverables: final sitemap & wireframes for front page and interioir page templates
  

Designer/Developer interactions: IA may be done by designer or developer, but the other team member is kept in the loop as process is progressing with the client. Sitemapping: Designer — makes suggestions on best practices » if there are too many sections; if the section titles are too long and will hamper readability; whether the section titles are coherent with the visual framing needs. Wireframing: Designer — makes sure that visual proportions and placement of elements are harmonious and user-friendly; whether the visual space allocated to the elements and their hierarchy is in line with their order of importance and the site goals. Designer may also make suggestions on the length of content (vertically expandable or fixed?).  Developer — makes sure the visual representation of functionality (e.g. facebook like, twitter feeds, etc) is technically do-able without significant customization.

• 3. Programming + Visual Design

  
  
  NOTE: The programming phase and visual design phase run on a parallel track, with the programmer continuing to develop the site based on the IA while the designer submits visual mockups
• Programming:
• CMS installation and development site built on client server.
  Includes site structure build-out (pages, menus) + functionality development. Functionality development may wait until the design is completed
• Content migration (often done by client to save money)
• Client training may occur after back-end is mostly built out in order to allow early content input
• Visual Design
• Home page design
• Landing page design
• Custom template design
• Misc: icons, slideshow images, custom work.
  
  
  

Designer/Developer interactions: Designer — keeps programmer in the loop during the various design phases to point out any red flags regarding visual representation of functionality Developer — talks to the designer about questions around visual options for functionality display

• 4. Skinning: Front-End Code Implementation

Application of design to the back-end » HTML/CSS coding + browser testing

Designer/Developer interactions: Front-end code may be written by developer or designer Designer — consults with developer or whether content needs to be coded/styled in specific ways to support the back-end code Developer — consults with designer to make sure code matches final design Developer or Designer – consults with the client to make sure all the functionality is still relevant to the organizations operations.

• 5. Trainings

Client training may happen after site dev and design is completed, or anytime after the dev site is completed, even if the visual design is still in progress

• 6. Soft-Launch and Testing
  

Designer/Developer interactions: Designer  —  looks through content entered by client and makes suggestions for clean up and design consistency — “visual quality control” Developer — makes sure all pieces of functionality is working — “functionality/usability quality control”

• 7. Launch!