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.
by Matt McCausland at 6/24/2008 1:32:41 PM
About Ethan:
by Matt McCausland at 6/24/2008 1:32:48 PM
by Matt McCausland at 6/24/2008 1:33:01 PM
The 4 Ds: Discovery (wireframes), Design, Development, Deployment (Back End).
by Matt McCausland at 6/24/2008 1:50:10 PM
Designers vs. Front-End Developers:
by Matt McCausland at 6/24/2008 1:53:01 PM
Example: Designer gives a flat photoshop file to the developer because she's afraid of something changing.
by Matt McCausland at 6/24/2008 1:53:47 PM
Worrying about change goes against the whole process. From wireframe to mock to live site, things will change.
by Matt McCausland at 6/24/2008 3:00:53 PM
Ensure the people that will inherit the work, the transition/hand off, have enough information to maintain the integrity of the design.
by Matt McCausland at 6/24/2008 3:01:06 PM
"Hand off" seems wrong because it implies you're done and you have no more say.
by Matt McCausland at 6/24/2008 3:01:32 PM
He's gonna go over 3 projects and highlight the mistakes.
by Matt McCausland at 6/24/2008 3:01:40 PM
First project: The Today Show
by Matt McCausland at 6/24/2008 3:01:50 PM
One template, fixed-width, centered horizontally.
by Matt McCausland at 6/24/2008 3:01:59 PM
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.
by Matt McCausland at 6/24/2008 3:02:10 PM
He's explaining how front-end developers work.
by Matt McCausland at 6/24/2008 3:02:22 PM
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.
by Matt McCausland at 6/24/2008 3:02:44 PM
Second project: Sundance Film Festival
by Matt McCausland at 6/24/2008 3:02:50 PM
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.
by Matt McCausland at 6/24/2008 3:02:58 PM
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.
by Matt McCausland at 6/24/2008 3:03:07 PM
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.
by Matt McCausland at 6/24/2008 3:03:15 PM
Not a big problem, just get a new, complete mock and cut the menus.
by Matt McCausland at 6/24/2008 3:03:29 PM
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.
by Matt McCausland at 6/24/2008 3:03:36 PM
Third project: W3C
by Matt McCausland at 6/24/2008 3:03:42 PM
Goals for re-design: Improve I.A., design a "textual framework", fluid-width layout.
by Matt McCausland at 6/24/2008 3:03:52 PM
Fluid width examples:
by Matt McCausland at 6/24/2008 3:03:58 PM
by Matt McCausland at 6/24/2008 3:04:03 PM
by Matt McCausland at 6/24/2008 3:04:09 PM
Needed to make a liquid layout grid. No one had done it before.
by Matt McCausland at 6/24/2008 3:04:16 PM
All layout is done with percentages.
by Matt McCausland at 6/24/2008 3:04:24 PM
Design for ratios and not pixels. Target / Context = Result.
by Matt McCausland at 6/24/2008 3:04:30 PM
You'll end up with large percentages, leave them in, give the browser the most info you can.
by Matt McCausland at 6/24/2008 3:04:37 PM
Lessons learned: Don't fear prototyping (help the client better visualize the end product).
by Matt McCausland at 6/24/2008 3:04:46 PM
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.
by Matt McCausland at 6/24/2008 3:04:55 PM
They use Basecamp and IM because they are a virtual office. They also use source control so developer can see changes in the PSD.
by Matt McCausland at 6/24/2008 3:05:02 PM
by Matt McCausland at 6/24/2008 3:05:13 PM