LearningIsFun

File hand-off checklist

graphixboy — Wed, 13 Oct 2010 22:32:09 +0000

Several weeks ago, I had the opportunity to help Catalyst Studios host a short workshop for print designers looking to make the transition to interactive. As with many people in this situation, our attendees wondered how to streamline the process of moving their design from concept to production and specifically how to improve the Designer/Front-End Developer partnership. One of the results of this session was a checklist of details and considerations to be applied before turning all those hours of sweat and blood over to the developers who must bring it to life. I realize that the interaction between designers/developers frequently contains an amount of contention and while I believe the very best way to alleviate that stress point is for designers to learn some code perhaps this checklist will provide a sort of bridge.

I want to preface this list by explaining that at Catalyst Studios we typically follow the process of creating site mockups in Photoshop and then breaking them down into the visual elements required to display a site. Type, color, layer styles, size, position and so on are translated from the PSD into HTML, but we aren’t simply slicing up the document into a group of images that show the page. This list is intended to optimize this process of mapping the elements base on our work flow, however most of it should easily translate to other processes and software applications.

Ok on to what you all care about–the list (annotated and explained as I have time). This document can be summed up by saying as a designer you need to be specific. Never assume that the developer is looking at the same vision you have in your head. Meaning its rarely enough to simply create one of similar elements and expect the developers to know how to modify that object or to intuitively know how a drop-down menu should look or even what font you had in mind for those form fields. Keeping in mind that you need to specify exactly how EVERYTHING will look, and interact makes this list somewhat irrelevant but here goes:

Interactivity

Did you design alternate content states?
Have you defined a visual look for rollover/hover states on buttons and links?
Have you defined a visual look for error messaging and status information?

Concept & Layout

Did you account for different sized content?
Did you design for extremes?
Did you design for dynamic content?
Does your layout width add up to a standard viewable area?
Are columns, gutters, margin and padding all equal and add up to the container width?
Did you provide direction for what should occur when the browser window changes size?
Did you use web-safe fonts? If not, did you include the font with your design or check licensing for use with @font-face?

Photoshop Document

Is your image file 72DPI and RGB color space?
Have color management profiles been removed from the file?
Did you name and organize your layers?
Do objects in your layout end on full pixels?
Have you used any blending modes (multiply, screen, burn) to create an effect? If so find a different way to create the effect.

Production Instructions

Have you specified content that requires special technology? If so how should these be included?
have you specified a hand-full of reusable typographic elements side wide? (For example make body copy on all pages the same size, color, etc)
Have you defined browser compatibility requirements? (Must support IE6 or needs a mobile version)
Did you consider how this will look on different devices/mediums?
Did you specify any locations where visual objects should be the same height?

Pixel Perfect

graphixboy — Mon, 13 Apr 2009 22:05:11 +0000

Here are 7 great tips about what goes into great web design. http://wefunction.com/2009/04/quality-within-web-design/

1. Spacing
2. Pixel Perfect Detail
3. Typography
4. Organization of Elements
5. Restraint & Subtlety
6. Using Color
7. Do Something New

have more? Leave em in the comments.

Actionscript Lecture Notes

graphixboy — Mon, 09 Feb 2009 19:52:43 +0000

Here’s the Keynote from the “What Is Actionscript” Lecture feel free to grab the pdf from http://www.whenimnotsleeping.com/lab707/WhatIsAS2.pdf

CS3 Video Tutorials

graphixboy — Thu, 22 Jan 2009 03:45:08 +0000

Seems that Adobe has managed to keep the CS3 video workshop alive even after the release of CS4. Here’s the link.

Flash 2 Projects

graphixboy — Wed, 08 Oct 2008 21:56:15 +0000

Take a look at the cool ideas from Flash 2

View online

One Question:Many Answers

graphixboy — Wed, 10 Sep 2008 15:50:54 +0000

Whats the most important thing I would tell a design student? Always always come to class on time, sit in the front row, do your homework… Just kidding. Here’s a great post by Brian Yerkes about the “Most important thing I would tell a design student“. This is a pretty valuable list for anyone just starting out in the field.

OBEY

graphixboy — Wed, 23 Jul 2008 15:00:14 +0000

I know we have a lot of Shepard Fairey fans around here so I thought people might want to check out this interview covering his art, design, life…

Make it Shiny

graphixboy — Fri, 11 Jul 2008 21:28:23 +0000

We all know that sometimes the very best ideas can be overlooked in favor of something thats much prettier, but lacks depth. So now you’ve got a great idea, but maybe you could use a little help with the polish. Here’s a round up of tutorial sites on various topics that I find extremely useful when I want to make things look slick.

Tutorial websites (photoshop, illustrator, flash, more):

Mac FTP Apps

graphixboy — Mon, 03 Mar 2008 19:52:52 +0000

Ok so its time to get your project online. Step 1: Find some FTP software so you can upload your files to the server. Here are a few favorites

After Effects

graphixboy — Thu, 21 Feb 2008 02:21:01 +0000

If any of you want to follow up on our After Effects demo last week, you can take a look at a few of these tutorials.