Description: High-end design. Standards-compliant code. Doesn’t exactly sound like a match made in heaven. We’ll look at high-profile brands, and discuss the intersection of quality code with top-notch art direction. Developers will learn strategies to achieve that extra level of “bulletproofing” in their templates; designers will pick up tips on how to better convey creative requirements to coders.
About Ethan:
The 4 Ds: Discovery (wireframes), Design, Development, Deployment (Back End).
Designers vs. Front-End Developers:
Example: Designer gives a flat photoshop file to the developer because she's afraid of something changing.
Worrying about change goes against the whole process. From wireframe to mock to live site, things will change.
Ensure the people that will inherit the work, the transition/hand off, have enough information to maintain the integrity of the design.
"Hand off" seems wrong because it implies you're done and you have no more say.
He's gonna go over 3 projects and highlight the mistakes.
First project: The Today Show
One template, fixed-width, centered horizontally.
Horizontally centered: How does the background repeat? It doesn't it ends at 900px wide. Asked for new backgrounds. New huge background image since the design can't tile.
He's explaining how front-end developers work.
Designers work closely with clients, developers don't. Make sure developers know everything they need to know from the client. Developers, get invested, get excited. Show them comps from the early stages.
Second project: Sundance Film Festival
Good designer labels every single layer and folder. It's super easy for the developer to find what they're looking for and help maintain the integrity of the design.
Multiple backgrounds, one theme needs to be three. Start with a bare bones template, no colours. Give the body a class that changes colour based on what page you're on.
Everything was going well and the designer asks "did you have any problem with the drop down menus?". There was a hidden, flat layer with one drop down menu that wasn't pointed out when the PSD was handed over.
Not a big problem, just get a new, complete mock and cut the menus.
Lessons: Make sure the developer knows where to find the important elements in the design. Build in time for the designer to work with the developer. Get the designer to review the site after it's built.
Third project: W3C
Goals for re-design: Improve I.A., design a "textual framework", fluid-width layout.
Fluid width examples:
Needed to make a liquid layout grid. No one had done it before.
All layout is done with percentages.
Design for ratios and not pixels. Target / Context = Result.
You'll end up with large percentages, leave them in, give the browser the most info you can.
Lessons learned: Don't fear prototyping (help the client better visualize the end product).
In closing: make sure everyone has all the info they need to do their job properly. Give a sort of style guide for every possible case.
They use Basecamp and IM because they are a virtual office. They also use source control so developer can see changes in the PSD.
Matt
Copyright 2012 Scribble Technologies Inc. All Rights Reserved.
