Designer Handbook by Aaron Guiles

Designer Handbook Version 3.0 | Q1 – 2011

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Overview The Designer Handbook provides one cohesive source for designers to reference to ensure that company design and production best practices and procedures are followed. Designers are frequently reassigned to new accounts and projects that are often already under way. If all designers execute their work and organize it in their own unique way, the inevitable results are inefficient workflows and reproduction of most work. In an effort to standardize the way we do some things, this handbook outlines everyday procedures and best practices to help with quick onboarding and to keep projects on track.

Digital Version The Designer Handbook will be periodically updated as information changes or new resources become available. The latest version of the Designer Handbook is available in a digital format both on Einstein and on Colossus: Einstein: http://einstein.imc2.com/wiki/Designer_Handbook Creative Files: \\colossus\CreativeFiles\_Resource Library\Design\Process Standards\DesignerHandbook.pdf

Content 03: Design Guidelines

01: Accessing Your Work Server Access Server Paths Working Locally 02: Organizing Your Work Project Folder Structure Concepts Folder Structure Production Folder Structure Flash Development Folder Structure Flash Media Development Folder Structure File Naming Conventions – Design and Master Files File Naming Conventions – Final Cuts File Naming Conventions – Media Files Surround Overview

Authors Aaron Guiles Contributors Bryan Parker

•

Jason Booker

•

Phillip Walker

Fold Requirements Producing Production-Ready PSDs Production Transition Checklist Production Cut Templates Appendix: Design Resources Design Presentation Template Storyboard Document Template Implementation Guide Template Concept Sketch Tools Notes

Special Thanks

•

Robert Fultz

All of the information in this Designer Handbook is a culmination of everyone’s hard work throughout imc2’s rich history. Thank you to all the people, past and present, who contributed their insight and support that led to the successful documentation and application of the Designer Handbook.

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

01: Accessing Your Work Server Access Server Paths Working Locally

01: Accessing Your Work – 1

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Server Access All project files are saved on imc2 servers that can be accessed by team members across the company. The servers are organized according to various criteria: groups within the company, clients, projects, etc. As members of the Creative Group, designers and Flash developers most often need to access the servers known as Creative Files and Client Folders. As a general rule, all creative files are saved on the Creative Files server. Project managers, account managers, writers and information architects save their files on the Client Folders server for other team members to access. Connecting to the Server To connect to the servers from a Mac, go to the Finder and open the Connect to Server dialogue (Cmd + K). Either enter the address of the server or select one from the list shown on the right, and click the Connect button. If these paths do not connect you to the server, they may have been recently updated. Check with a fellow member of the Creative Group who is on a Mac. Windows vs. Macintosh Server Addresses Team members using computers running Windows may refer to these same servers using letters for names (“That file is on the N: drive.”). Windows associates each server with a letter instead of a name. These are some of the most commonly used: D A L L A S

NORTHEAST

Creative Files

Client Folders

Home Directory

Shared Files

01: Accessing Your Work – 2

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Server Paths Designers and Flash developers will frequently need to send their work to a project manager or an entire team for review or collaboration. Because everyone has a limit on how much data can be stored in their email inbox, sending email attachments with large file sizes can be inconvenient. A best practice is to email the location of your files on the server by sending a server path. WinShortcutter An application called WinShortcutter is useful for sending server paths. It has already been installed on your Mac. To use, control-click or right-click a file, and select Copy Path to Clipboard. You can now paste the text path into an email. On the next page, we’ll go through the steps to set up a keyboard shortcut for this action. If WinShortcutter is not already installed on your computer, you can find the latest version of the application here: http://www.lobotomo.com/products/WinShortcutter/

After installing WinShortcutter, open up your System Preferences and click on the WinShortcutter icon:

Then make sure Use Backward Slashes is checked. If your path looks like this, then you’ve done it correctly: \\colossus\CreativeFiles\…

There’s no point in sending out a path if the recipient can’t use it. So be sure this is checked.

01: Accessing Your Work – 3

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Server Paths (continued) You’re not done yet – we have even more features available to us! Trust me, you’ll want to set these up. It’ll make your life and your colleagues’ lives easier if you take the time to tweak a few settings. 1) By choosing Show Details you can adjust some more specific settings that will help format the drive mapping to make it easier for you to send paths, and to open paths sent from other people (PC or Mac)! 2) Be sure to check Enable Mappings. 3) Then click the “+” sign to start typing in the drive names as illustrated in the screenshot. • T his mapping fixes the path that you would send out to other people. This part is crucial, so be sure to set this up at the very least. If you see the word “Volumes” anywhere in your paths that you’ve been sending out, then you haven’t set this up yet, or you haven’t set it up correctly. • T he rest of the remappings shown are just examples of how to set it up for when you receive paths from other people. This might not be a comprehensive list, but you can see how it’s set up. So if you receive a path that doesn’t quite work, then you may want to remap it.

1) Next, go to Entourage and choose Services. 2) Click on Services Preferences. 3) Check Open as Windows Link. 4) Change the keyboard shortcut to Ctrl + Opt + Cmd + O. 5) Check Copy Path to Clipboard. 6) Change the keyboard shortcut to Ctrl + Opt + Cmd + C.

Setting up these keyboard shortcuts to open and copy paths saves a ton of time in the long run! CONFIDENTIAL – Copyright © 2011 imc2. All rights reserved. May not be reprinted or distributed without prior written consent of imc2.

01: Accessing Your Work – 4

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Server Paths (continued) Now that you have all of the preferences set, you can take full advantage of using server paths! When someone sends you a path via email, all you have to do is follow these simple steps: Before you try the next two steps, be sure to connect to the target server first; otherwise, you’ll get an error message that says “Could not follow link – Target file does not exist.“ 1) After highlighting the path, go to Entourage and then Services. 2) Select Open as Windows Link. Then, like magic, your path should open in a new window in the Finder. (Note that the window will not pop up to the top, but trust me, it’s there.) And remember that you don’t have to use the menu anymore; you can use your new keyboard shortcut (Ctrl + Opt + Cmd + O)! You can open paths on a Mac!

01: Accessing Your Work – 5

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Working Locally Getting used to working locally will help prevent some major headaches. If you open a file off of the server, the file can potentially become corrupted if the server suddenly loses connection or if the application you’re working on suddenly crashes (and sometimes the simple act of saving can corrupt a file). By copying your working files from the server to a place on your local machine, you’re greatly reducing the risk of losing or corrupting files, and you’ll notice things just move along much faster. Just be sure to sync everything back up with the server once your work is complete. There’s nothing more frustrating than finding out someone is out of the office and they didn’t copy their files back over to the server. Finding Your Public Folder The Public folder is located on the hard drive under the user account. A Drop Box folder may already be available, but you can create a new Projects folder inside your Public folder to store all your local work files. This is a good place to store your working files, as IT has remote access to this folder and they can help someone locate files that may not have been copied over to the server.

Setting Up Your Projects Folder Organization inside the Projects folder should resemble the folders on the Creative Files server, just to avoid confusion for yourself or for IT if they ever need to access the files on your machine for someone else. By storing your working files here, you can separate any personal files by storing those documents elsewhere.

01: Accessing Your Work – 6

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

02: Organizing Your Work Project Folder Structure Concepts Folder Structure Production Folder Structure Flash Development Folder Structure Flash Media Development Folder Structure File Naming Conventions – Design and Master Files File Naming Conventions – Final Cuts File Naming Conventions – Media Files Surround Overview

02: Organizing Your Work – 1

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Project Folder Structure All projects are to be sorted into folders according to the client name, brand name and project name. A standardized template group of folders should be copied into the project folder at the beginning of the project. Those folders can be found here: \\colossus\CreativeFiles\_Project Folder Structure\Client Name\Brand Name\Project Name

If you create the initial project folder, give it the same name as is used on the Client Files server (your project manager will have created this folder on the Client Files server already).

client folder brand folder

specific project folder standard project folder group (same as folder name on Client Files server) (copy from template at above location)

02: Organizing Your Work – 2

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Concepts Folder Structure Inside the Concepts folder, use Round folders to organize files according to significant changes in the design or stages in the project (you might start a new Round upon receiving major client feedback or a change of direction). Inside each Round folder should be folders labeled _Archive and _Presentation. Using underscores in the folder name moves them to the top in list view, so their location will be consistent in all folders. The latest design source files should be in this folder.

main project folder Round folder(s) (standard project folder structure)

design files saved here

All older versions of design source files should be moved into the _Archive folder, so that only the latest versions will be in the main Round folder. Save all exported JPG files in the _Assets folder (to be referenced by an InDesign document or to be merged into a PDF file for review).

Store the exported PDF in the _For Review folder and move all older versions into the _Archive folder. This eliminates confusion and gives other team members a consistent place to locate final files for review.

Extra Credit: Numerical Prefixes By adding a numerical prefix to your file names based on the site map or the content doc, you save time and eliminate any confusion for yourself (and others) by defining the linear order of the presentation up front. Numerical Prefixes: Help organize your files even more CONFIDENTIAL â&#x20AC;&#x201C; Copyright ÂŠ 2011 imc2. All rights reserved. May not be reprinted or distributed without prior written consent of imc2.

02: Organizing Your Work â&#x20AC;&#x201C; 3

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Production Folder Structure Once a concept has been approved, move all of the files over into the Production folder and then into the Masters folder. These assets will be managed exactly as before – they are just separate from the Concepts folder from this point forward in the process. These files should be cleaned up according to the Production-Ready guidelines.

main project folder Production folder (standard project folder structure)

Round folder(s)

design files saved here

The Final Cuts folder is used as a sort of temporary folder, so you can use it when working locally when creating cuts before finally uploading all the cuts to Surround. Surround is the final destination for all cuts and should be managed much more diligently.

The Implementation folder is used to manage the Implementation Guides and should be managed similarly to the _Presentation workflow. The Templates folder is used to store all of your cuts templates and should mimic the structure of your Final Cuts. You can learn more about both of these topics in the Design Resources section.

02: Organizing Your Work – 4

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Flash Development Folder Structure Because Flash pieces and projects can have so many additional pieces that are not used in other areas of the site, folder-naming conventions are even more important – not only for developers, but for any tech, client or account person who may need to touch or find the files now and in the future. File-naming consistency is key to simple organization and further updates. Inside the Production folder will be a Flash folder for each Flash piece, using the IA name, if possible. This name should be used throughout. Inside that folder will be a Build folder and a Source folder. While the Source folder will hold all required FLAs, library items and other reference material, the Build folder should be considered the root of the server, and only required files should be put in Build.

Production folder (standard Production folder structure)

folder for Flash piece

Build folder

Build Since Build is basically at server root, there is an mm folder, which will hold all of the multimedia content for the site. Next to mm, there is a sample HTML file that will simulate the implementation of the Flash piece to Tech and is intended only for preview. Inside mm should be a folder named after the IA code of the piece (e.g., hp_flash). Inside the mm/hp_flash folder is where all of the pieces for this particular project should reside. The main SWF would be named hp_flash.swf and its corresponding JavaScript would be hp_flash.js. Supporting files (mp3, xml, xhtml, js, jpg, png, gif, flv) will be put into subfolders named audio, data, flashdetect, images, videos, etc. Secondary SWFs can be put into the hp_flash folder or segmented into their own subfolder inside hp_flash if there are many.

02: Organizing Your Work – 5

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Flash Development Folder Structure (continued) Build is not meant to be versioned other than through Surround. Unless there is a major departure, it is recommended to use Surround as version control and to let newer files replace older versions. Note About Build Build sounds complicated, but when making updates or searching for one piece or another, this folder structure makes everything very simple.

Production folder folder for Flash pieces Source folder (standard production folder structure)

_lib folder (for all Flash library elements)

Source The FLAs will be inside Source, as well as any .as files that are #include files. Inside Source are: _lib All assets that are imported into the library of the Flash piece _old Any previous FLAs that have been versioned up (_v1 will go here when _v2 is created) _ref Any reference documents (e.g., current content doc, latest comp, latest storyboards and reference materials NOT imported into the FLA) classes Class files go here. Class names are capped com Packages are in here. Package standards will be developed with consideration given to Tech’s package standards as applicable Naming structure for FLAs in the Source folder should retain the IA name for primary pieces (hp_flash_v1.fla), but should be clear and descriptive for other pieces (chapter2_v3.fla). The names of the FLAs should be the names that will be used as SWFs. (To export directly from the FLA in Source into the proper place in Build, change the publish settings to ../Build/mm/hp_flash/hp_flash.swf)

02: Organizing Your Work – 6

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Flash Media Development Folder Structure Inside the Production folder, there will be a RichMedia and/or Standard folder as required. The structure inside RichMedia and Standard varies only slightly, the point of the separation being for review and delivery to trafficking companies. Prevailing naming conventions will be BRAND_CONCEPT_size, such as LVZA_HandDealt_160x600.

Standard Media folder

Files and folders named by brand, concept and size

Build Inside Build will be HTML files for previewing the banners. Nondevelopers will review the units from this point. HTML file names should begin with an underscore to sort them to the top of the list. There should also be a folder for each of the SWFs and any required supporting files, such as videos. RichMedia files will include a _bnr and _pnl designation for the banner and any supporting panels (BRA_CON_160x600_bnr.swf).

Source Inside Source will be all of the FLAs, following the same naming structure as files in Build. The Source/_lib folder is where all of the imported items will live. The BRA naming requirement is optional, as all of the files there will be the same brand, and the _lib folder will not be sent to trafficking companies. Size and description are highly recommended when naming _lib items.

02: Organizing Your Work – 7

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

File Naming Conventions – Design and Master Files The following conventions should be used for files that are design comps and/or master documents, such as Photoshop .psd files, Flash .fla files, InDesign .indd files and other original source documents that may need to be versioned or revised. Most documents should follow this naming format: Format: IA code _ ShortName _ design option letter _ version number .extension

Example: AU_AboutUs_a_01.psd IA Code Many design concepts are based on a wireframe document. When possible, using the Information Architecture code (IA code) from the wireframe document or site map in your file name will remove any confusion about what that page is. (If you don’t have a wireframe for your project, skip this and begin your file name with a short name in “CamelCase.”) Design Option Letter Since we frequently create several options of the same design, we will use a letter to differentiate between the alternate designs. For example, if we are providing a client three designs of a homepage, those designs would be options “a,” “b” and “c.” Version Number Add a version number to the end of all file names. All designs will begin with “01” and increase in number for each set of revisions. Use a “leading zero” in front of single-digit numbers. So, for example, when you need to make a revision to an existing document, copy that document into the _Archive folder, then increase the version number in the file name (“01” » “02”), and then make your changes to the document with the newest version number. This example tells us that there are three design options for this homepage and that option “b” has had revisions:

Avoid using file names like “variation 3.psd” or “design 2_ralph.psd,” or naming subfolders with your name. This kind of file naming and organization can create confusion later in the project. Following these guidelines and the organization described in the Concepts Folder Structure page will ensure the latest files are always easy to find and older versions are always available as well. Extra Credit: Numerical Prefixes By adding a numerical prefix to your file names based on the site map or the content doc, you save time and eliminate any confusion for yourself (and others) by defining the linear order of the presentation up front. Numerical Prefixes: Help organize your files even more CONFIDENTIAL – Copyright © 2011 imc2. All rights reserved. May not be reprinted or distributed without prior written consent of imc2.

02: Organizing Your Work – 8

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

File Naming Conventions – Final Cuts All cuts created in production should be named using CamelCase while following a simple structure that combines a predefined set of prefixes and suffixes with descriptive text to delineate the purpose and position of the specific cut. By sticking to a general formula for production files, we can easily locate and implement each image regardless of who originally produced the graphic. There remains a good amount of flexibility within this formula, but by standardizing it somewhat we allow for a more efficient process when dealing with these images during implementation and further down the road during development. Here is the basic formula: Format: prefix(s) Description Suffix(s) .extension

Example: navHomeOver.gif

Prefixes The prefixes should be used to define general position, location and the type of image that they represent. For example, if the image cut is a button for a form submission, you can expect to see something like btnSubmit.gif. These can be combined to describe the image even further. The following is a list of prefixes that are commonly used, but we also understand that each project brings with it new considerations, so use your best judgment:

bdy elements that exist within the content area, such as content images or graphic text bkgd part of a background to the page or a specific element btn button call callout or element relating to the callout area of the page template chart chart/graph graphic ftr part of the footer area of the page template hdl headline hdr part of the header area of the page template icon icon/bullet nav part of the navigation system thumb thumbnails

Description The middle part of the naming convention is where you can get creative. This is designed to help identify the specific image as succinctly as possible, allowing anyone to step in and understand exactly what that cut represents. As an example, if you were creating a headline graphic from the content [headline]Contact Us by Phone, you might create the name as follows: hdlContactUsPhone.gif Suffixes The final section of the naming convention deals with the state or location of a cut within a series of images that are used to create an effect, whether they are rollover effects on a button or pieces used to construct a design element. These can be combined to describe the image even further. The following are examples of some commonly used suffixes:

btm bottom portion of a constructed element left associated with the left side of the page or area of focus mid middle portion of a constructed element on on/indicator state of a button or nav element off off/default state of a button or nav element over over/hover state of a button or nav element right associated with the right side of the page or area of focus tile tiling background element for the page or area of focus top top portion of a constructed element

02: Organizing Your Work – 9

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

File Naming Conventions – Media Files Media files use the same conventions as master files, with the exception that we substitute the size dimensions for the IA code at the beginning of the file name. The following conventions should be used for files that are design comps and/or master documents created for media or banner advertisements, including Photoshop .psd files, Flash .fla files and any other original source documents that may need to be versioned or revised. Most documents should follow this naming format: Format: size dimensions _ ShortName _ design option letter _ version number .extension

Example: 320x240_TellAFriend_a_01.psd

Size Dimensions Use the dimensions of the media unit (in pixels) to begin your file name, separated by the lowercase letter “x,” and list width before height. So, for example, if you are creating a banner ad that is 300 pixels wide by 250 pixels high, your file name would begin “300x250” followed by and underscore and a short name in “CamelCase.” Design Option Letter Since we frequently create several options of the same design, we will use letters to differentiate between the alternate designs. For example, if we are providing a client three designs of a homepage, those designs would be options “a,” “b” and “c.” Version Number Add a version number to the end of all file names. All designs will begin with version “01” and increase in number for each set of revisions. Use a “leading zero” in front of single-digit numbers. So, for example, when you need to make a revision to an existing document, copy that document into the _Archive folder, then increase the version number in the file name (“01” » “02”), and then make your changes to the document with the newest version number.

This example illustrates how multiple media sizes, design concepts and revision numbers can all be organized together with correct file naming:

02: Organizing Your Work – 10

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Surround Overview Surround is a type of version-control software that Web developers, production designers and Flash developers use to manage and maintain the files associated with a particular site or project. Tech’s version of Surround is much more powerful and complicated; luckily, production designers only really need it to pass along final cuts and different types of multimedia files (mainly Flash). We have our own branch, named DesignProduction, that we use to organize these files separately from Tech’s branch. Even though we have a separate branch, we still need to mimic some of the same guidelines that Tech uses to organize and manage its repositories and files. Setting Up Your Repositories Repositories are basically like folders – you can create/move repositories within other repositories. If you’re setting up repositories for the first time, you’ll need to follow this repository structure before you upload any files. Start with the [ClientName], followed by the [BrandName], then the [SiteName/ProjectName]. Within the site/project repository you’ll manage your final cuts in a folder named images and any multimedia assets in a folder named mm. You should be sure that you don’t include any spaces or special characters from this point forward. Also, remember that the [SiteName/ProjectName] repository should represent all of the assets that will be pushed live on the final site/project. Sometimes several different projects will affect only one site, so those assets should still be managed in that one site/project repository, instead of in separate repositories, if possible. Common Repository/File Activities • Create Repository creates a new repository. • Remove Repository removes an existing repository. Note: The repository is removed

but it is not deleted from the Surround server; it can still be recovered.

• Set Working Directory is where you can direct Surround to a folder, locally or on Colossus. So when you choose to Get, Check In, Check Out, Add Files, etc., Surround will try to carry out that particular action to/from the Working Directory you selected. • History allows you to view the history of a file/repository – by version #, user, timestamp, action, etc. • Differences allows you to compare, accept or reject differences between two file versions. • Info gives you some basic information on the particular file/repository you have selected. This is useful when you need to send a path to Tech.

• Get pulls down a copy of the files/ repositories in Surround to a selected folder, locally or on Colossus. • Check In updates files with changes, and increases the version number. • Check Out is when you check out a file, Surround copies a read-write version of the file into the working directory. This allows you to edit the file and make changes to it. When you’re done, be sure to check the files back in. • Add Files allows you to add individual files or an entire directory to Surround. When you add a directory, a repository with the same name is created in Surround, with all of its files. You can optionally repeat the process recursively for all subdirectories. Note: If you’re adding new files, use this method instead of dragging and dropping from the Finder, as this doesn’t work as expected.

You’ll need to refer to the help documentation that came with Surround if you need more advanced information or if you need to troubleshoot a problem.

02: Organizing Your Work – 11

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

03: Design Guidelines Fold Requirements Producing Production-Ready PSDs Production Transition Checklist Production Cut Templates

03: Design Guidelines – 1

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Fold Requirements Templates We currently target a screen resolution of 1024 x 768 for our webpage designs. Some clients still require us to target 800 x 600. In either case, we have Photoshop templates we can use for most webpage designs. These templates contain basic named layers, guides set at the appropriate width and a designated fold guide. The templates are located here: \\colossus\CreativeFiles\_Resource Library\Templates\Web Pages Measurements This diagram shows the lowest common denominator values that are generally accepted industrywide and that we should follow, unless a particular brand has different requirements: 800

R E S O L U T I O N

FOLD

740

800 x 600 = 740 x 410 1024 x 768 = 960 x 578

960

600

410

1024

578 768

Does the fold really matter? This topic is completely debatable. There are many articles online that debunk the “myth” of the fold. There are pros and cons concerning whether the fold should be required. If you feel that the fold is important (or if you’re indifferent on the subject), then please use these guidelines and templates. If you’re strongly against the restraints of the fold, be prepared to state your case with a solid argument, because you could be met with some resistance from your teammates and/or the client. CONFIDENTIAL – Copyright © 2011 imc2. All rights reserved. May not be reprinted or distributed without prior written consent of imc2.

03: Design Guidelines – 2

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Producing Production-Ready PSDs Begin with the End in Mind The Photoshop documents we regularly create can become complex very quickly – not to mention the fact that most likely multiple designers will work on a single file before it is complete, perhaps over the space of weeks or even months. These Photoshop documents will be used in later stages of the process to prepare cut templates, and to help the developer gather important information that is crucial to front-end development. The key to success: preparation and organization. As you create your Photoshop files, take an extra few seconds to label, sort and optimize. The team member who opens your file after you’re finished with it will thank you (and that person may be you).

Do: Version out your PSDs when making major updates. Don’t: Leave all of your versions of your PSDs in the same folder location. Why: Versioning out PSDs and storing them in the “_Archive” folder helps keep the folders organized and easy for others to identify which set of PSDs are the latest and greatest. It also gives you the ability to go back and pull older versions of the comps that may have elements that have been omitted from current versions, just in case you need them again.

Always have a backup

Do: Ensure that all of your Photoshop documents have a resolution of 72 ppi, a color mode of RGB @ 8 bits/channel and an sRGB color profile. Don’t: Design in any resolution greater than 72 ppi, CMYK, anything greater than 8 bits/channel or anything other than the sRGB color profile when designing for on-screen viewing. 72 ppi, RGB @ 8 bits/channel, sRGB

Why: When designing for on-screen viewing vs. print, you’ll need to double-check your documents before you get too far along to ensure they are set up correctly.

Do: Retain editability whenever possible. Don’t: Rasterize or flatten type, Smart Objects, vector shapes, etc. Why: By rasterizing something that should remain editable, you’re just creating problems and slowing other team members down. If someone has to make an update to something that has been flattened or rasterized unnecessarily, it’s going to cost extra time Never rasterize or flatten and effort to make the revisions, and the quality/consistency may be compromised. If done properly, you can avoid having to hack together some screenshots from a dev site or some old comp, which should be everyone’s goal.

03: Design Guidelines – 3

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Producing Production-Ready PSDs (continued)

Do: Use guides responsibly. Don’t: Go crazy with too many guides or (even worse!) never use guides.

Good guides always prevail

Why: This makes it easy to pull dimensions from the comps without having to guess. Be sure to define the overall width of the page and the primary column areas, aiming for whole values that end in a 0 or a 5 if appropriate. Starting with a solid template up front helps save time and ensures consistency down the line when creating all of the variation designs. Digging through a jungle of unused guides is worse than never using guides at all, so use your best judgment.

Do: Establish consistent margin and padding rules. Don’t: Just eyeball the positioning of design elements. Why: This really just makes it easier to build. Since we are designing for the Web using CSS, it only makes sense that we would want to define a predictable structure to the spacing used throughout the site. The developers will love you for this, as it makes their job more enjoyable and less of a headache. A good rule of thumb is to use whole numbers that end in either a 0 or a 5. Again, use your best judgment.

Developers love digestible numbers

Do: Name all your layers, and keep it simple. Don’t: Leave layer names like “Layer 23 copy” or name the layer too specifically. Why: Naming your layers with a very simple name (such as “Background Color” instead of “Purple #663399 Background Color Top Left with Client Updates”) makes it easier for you and others to quickly find and identify a specific layer in a sea of many other layers and to make appropriate updates without having to rename the layer each time. Heaven: Layers named and sorted

Headache: Unnamed mystery layers

03: Design Guidelines – 4

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Producing Production-Ready PSDs (continued)

Extra Credit: Removing “copy” from Duplicated Layers You now have the ability to remove “copy” from duplicated layers in Photoshop CS5. Simply open the preferences for the layer palette and uncheck “Add ‘copy’ to Copied Layers and Groups.”

Do: Group your layers into appropriate folders and subfolders. Don’t: Leave layers stranded in the layers palette between groups or, even worse, organize layers into groups that they don’t belong in. Why: This makes it easier to drill down into a set of folders to find specific layers of similar content. It also groups things together into chunks that you might regularly move as a whole. Be sure to keep the names simple and related to the type of content at the highest level (e.g., header, navigation, callout, content, footer, background, etc.).

Extra Credit: Closing Layer Folders P hotoshop saves the appearance of the layers palette when the file is saved. For optimum organization, collapse all folders before saving the file. A quick way to do this: Hold down the “Option” key when clicking the expand/collapse icon; this will close the folder and all subfolders within.

A place for everything and everything in its place Option-click: closes all subfolders

03: Design Guidelines – 5

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Producing Production-Ready PSDs (continued)

Do: Delete unused layers. Don’t: Turn an unused layer’s visibility off but still keep it in the PSD. Why: This helps in keeping the file size of the PSD smaller as well as making it easy for others, when working with your PSD, to be able to confidently know which layers are being used in the layout. If you are wary of deleting any of the layers, then that would be a good indication that you need to version out your PSD and then remove unnecessary layers.

Just make sure you’re ready to delete the layers (not recommended when using layer comps)

Do: Use, save and share color swatches. Don’t: Use the eyedropper tool to sample colors from the comp or, even worse, use your eyeball to guess which colors are being used. Why: This ensures that you’re being consistent throughout your comps when using brand guideline colors, or colors that you’ve set up yourself. It especially becomes handy when someone else needs to work with your comps.

Extra Credit: Managing, Saving and Sharing Swatches Use black swatches to help organize your swatches into rows

ou can save a set of swatches as a stand-alone file. If you include this file on Y the server, you can share it with others. 1) Choose Edit, then 2) choose Preset Manager and then select Swatches from the pull-down menu. 3) Click once on the first swatch, then 4) shift-click the last swatch. This makes a selection of swatches (by the way, you can reorder your swatches here too). 5) Click Save Set and give it a name. Save it as a .aco file in an appropriate place on the server. Finally, let someone else know where the file is and they can simply load it and it’ll automatically add those swatches to their Swatches palette.

03: Design Guidelines – 6

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Producing Production-Ready PSDs (continued)

Do: Establish a clear hierarchy of type treatments. Don’t: Go overboard with different font faces, sizes and treatments. Why: This makes it easier for production and development, not to mention better for the end user ultimately. Be sure to consistently use this structure throughout all of your comps as well. Also keep an eye on the point size of all of your fonts – you don’t want any HTML headlines to be set at “18.56 pts” when they should be “18 pts.”

Clarity is King

Do: Determine what content will be an image vs. Web-safe HTML content. Don’t: Use non-Web-safe fonts when HTML should be used instead. Why: This makes development and maintenance of a site much easier when you can use Web-safe HTML fonts as much as possible. You can use cuts in some instances – usually for navigation or certain headlines or callouts – but with some careful planning, these too can use HTML instead. Use your best judgment, and work with a developer to determine the best approach.

Do: Use vector shapes whenever possible (e.g., shapes, masks, etc.). Don’t: Fill a shape or a mask with a rectangular or elliptical selection and fill it with pixels if you could use a vector shape instead. Why: This makes it incredibly easy to make adjustments to a vector shape or vector mask. Raster-based masks should be reserved for advanced masking, soft brushing or elaborate gradients. Vector masks can be used anywhere raster-based masks are used, and they can be combined together for even greater control.

Vector shapes make it easy

03: Design Guidelines – 7

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Producing Production-Ready PSDs (continued)

Do: Keep a sharp eye on vector shapes that contain straight lines, and always work with these shapes at a 100% zoom level. Don’t: Nudge nodes at any zoom level other than 100% or transform vector shapes that contain straight lines. Why: We’re working with pixels in Photoshop. Keeping that in mind, if the edge of a shape lives in the middle of a pixel instead of directly in between two pixels, it will create a fuzzy edge instead of a nice, crisp edge. So it compromises the quality of the final graphic and the reliability of Photoshop to return accurate measurements for a certain shape. There are ways to avoid this by tweaking a few settings and adjusting your workflow a bit when creating and modifying these shapes.

Always work at a 100% zoom (actual pixels) when nudging nodes around with the arrow keys (Cmd + 1 or Cmd + Opt + 0).

The Pixel Police will find you. If you encounter a shape that is already misaligned, simply zoom in as far as you can and nudge the nodes into the correct position.

Make sure Snap to Pixels is checked for the Rectangle tool and the Rounded Rectangle tool.

Do: Use Smart Objects responsibly. Don’t: Import images or vector shapes that can and will be reused or rescaled frequently as rasterized layers.

Warning: Using Smart Objects may increase brain cell growth.

Why: Smart Objects can be very powerful and useful time-savers when used appropriately. Anytime you need to scale something repeatedly (a logo or photo, etc.) and you don’t want to degrade the original quality of the image, use a Smart Object. But not everything needs to be a Smart Object; just use your best judgment. Also, Smart Objects can easily increase the file size of your PSD, so be sure to scale things down (like high-res images) to an acceptable size that is large enough to give you some flexibility and small enough to maintain a manageable file size.

03: Design Guidelines – 8

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Producing Production-Ready PSDs (continued) Extra Credit: Exporting and Replacing Contents nce you’ve created a Smart Object, you can right-click on it and O choose Export Contents to save it as a .psb file. Inversely, if you want to replace the contents of an existing Smart Object with another file, you can right-click on the Smart Object and select Replace Contents.

Export/Replace the contents of a Smart Object

Do: Use layer comps responsibly. Don’t: Leave layer comps broken or out of sync. And avoid using a single PSD that uses layer comps to mock up variation designs for the rest of the site, as this causes bloated PSDs that could become corrupt and are difficult to work with more often than not.

Clean: Practically perfect in every way

Dirty: You don’t want to see this

Why: Layer comps can be very powerful and useful timesavers when used appropriately. A good rule of thumb is to use layer comps strictly for Flash-based content that will animate or change over time. It’s also a good idea to make sure that you always use the same settings for all layer comps throughout one PSD to ensure that the layer comps behave themselves. So either use Visibility only, or Position only, or Visibility + Position only. Any other combination will just give you grief. It’s very rare that Appearance should ever be used, but use your best judgment.

Choose wisely

03: Design Guidelines – 9

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Producing Production-Ready PSDs (continued)

Do: Consider how design elements will be built. Don’t: Go crazy with too many gradients or textures that make it unnecessarily difficult to build. Why: Developers love solving technical problems, not design problems. By educating yourself on the basics of production (templates and cuts) and front-end development (HTML and CSS), you can anticipate how certain design elements could be built out. If you’re not sure about a certain design treatment, ask your fellow production designer or tech developer for their insight on how they might want to build it, then adjust your designs accordingly. The point here is to have open communication with the people who will be working with these files during the later stages of the production/development process.

Bottom line: Know the capabilities of CSS and use them to your advantage.

03: Design Guidelines – 10

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Production Transition Checklist The Handoff to Production Once the conceptual design work has been completed, the designer, production designer and developer must work together to bring the work to life. The bottom line is, you are not the only one who will touch your files, so creating production-ready files is an important part of your job as a designer. It is critically important that the conceptual designer transition the source design files in a manner that will assist the production designer and the developer in building the site efficiently. Before production can begin, the designer should run all Photoshop design documents through the following checklist and ensure that each of the requirements has been met. You aren’t finished with the design until you have ensured your files are production-ready and are handed over. You should review this checklist prior to transition each time. If the files provided do not meet these requirements, they may be rejected and returned to the designer for revisions prior to beginning production.

File Names and Folder Structure Are all files named properly, according to the naming conventions in the Designer Handbook? Are all files saved in the correct folder on the server, with all outdated versions archived?

Cleanliness and Consistency Do the layouts adhere to the “fold requirements” outlined in the Designer Handbook, or by client, brand or audience guidelines? Have all necessary variation designs been completed? Are layers appropriately named and organized into groups? Are common elements consistent in position, style and layer location among all comps? Have the majority of the items listed in the Producing Production-Ready PSDs section of the Designer Handbook been met?

Approvals and Handoff Have all of the stock images been finalized or marked FPO? Have comps been approved by the client and the creative director? Have all of the creative files been handed off and explained by the designer to the production designer and/or tech developer? Have all parties agreed that the condition of these files is acceptable?

03: Design Guidelines – 11

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Production Cut Templates Cut templates are a modular breakdown of a site design. Before you begin slicing a comp for production, you should create a series of cut templates that are organized based on certain types of content. You create cut templates to better manage the site assets while the site is being developed and maintained. By breaking down the site design into modular templates, it becomes easier to make a quick update to a specific part of the site. Instead of trying to find some random slice in a sea of comps to make a simple update, we use a single PSD that houses similar content, such as buttons, callouts, etc. This also helps ensure that the assets are consistent across the board, so development and maintenance of the site will be much more efficient. An added benefit of using cut templates is that it makes the job of the person who may have to work on your project in the future a lot easier, because it’s a standardized process. They won’t have to think too much to make the update, because we will all be working similarly throughout the company. You’ll note that the Templates folder and the Final Cuts folder are mirror images of each other. The images folder is what you’ll be using to keep Surround up to date as well. This eliminates any confusion when making updates to cuts in the future. So take a moment to think about how you’ll set up your files before you start making any cuts. When creating your cut templates, you should organize them based on related items, such as buttons, icons, common, navigation, etc.

Templates folder (source Photoshop documents)

images folder (this should mirror the Templates folder structure and Surround repositories)

You should set up the template files so that they can be easily versioned out for future updates. This is done in a similar manner to the way we manage our other design assets. Back up any outdated templates in a folder named _Archive, and create a new version of the templates when making any major updates.

archive folder

03: Design Guidelines – 12

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Production Cut Templates (continued) You should always strive to be as organized and descriptive as possible when working with your layers and laying out your assets to be cut. You never know who will need to make updates to this file after it is created. So by making it clear and simple, we save a lot of time while transitioning the work to another designer or developer.

Remember to remove any unnecessary elements from the cut template. These may include text layers that are intended to be HTML (and not part of the cut itself) and/or items that are not directly related to the cuts being created (e.g., having the common interface elements for the site in a cut template specifically made for callouts or icons is unnecessary and confusing).

The benefit of using cut templates becomes especially apparent when working with cuts that require special attention, such as this nav bar that is going to become a sprite. If you had to manipulate a comp in order to create this custom cut, it would prove to be difficult and frustrating if you had to lay it out this way every time you had to make any updates. So since the cut template is separate from the comps, you can manipulate the file to suit your needs.

03: Design Guidelines – 13

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Appendix: Design Resources Design Presentation Template Storyboard Document Template Implementation Guide Template Concept Sketch Tools Notes

Appendix: Design Resources – 1

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Design Presentation Template When possible, conceptual design work should be presented, with write-ups, in a branded imc2 design presentation PDF file. This helps build consistency in deliverables shown to clients, helps explain the reasoning behind design decisions and keeps the imc2 name attached to the work, for the client and anyone else who looks at it. Template files for the design presentation template, as well as an example presentation in this format, can be found on the server. The example presentation can be found here: \\colossus\CreativeFiles\_Resource Library\Templates\Design Presentation\Design Presentation (Example) And the template files here: \\colossus\CreativeFiles\_Resource Library\Templates\Design Presentation\Design Presentation (Template)

To create a new design presentation, copy the Design Presentation (Template) folder into your project folder on the server, and rename it as appropriate. Open the InDesign file, add your client’s logo to the first page and the A-Master page, add a title to the first page, and add JPGs of the conceptual designs, along with write-ups or notes in the left-hand column text area. This is an excellent opportunity to sell your work – be sure to point out any strong reasoning or special features behind the design work.

• Add client logo to title page • Add a title and change the version number with updates

• Add client logo to the A-Master page • Include write-ups to explain the conceptual design work (your writer can help you develop this)

Appendix: Design Resources – 2

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Design Presentation Template (continued) Keep the design presentation folder organized and version the InDesign file with each major change, so any other designer who needs to make changes after you will be able to find all necessary files. Versioning When a major update is required to the presentation document, drag a copy of the InDesign file into the _Archive folder, and increase the version number of the file in the main folder. (For example, a file named Ai_Gallery_a_01.indd would become Ai_Gallery_a_02.indd.) Only store the latest version of the master InDesign document in the main folder – all older versions should be moved to the _Archive folder. Assets All graphical assets should be kept inside the _Assets folder. It is not necessary to keep older versions of graphic assets, but if desired, an _Archive folder should be created to store older versions separate from the most recent. Publishing When a design presentation is ready for team or client review, it should be published as a PDF file. Store all exported PDF presentations in a separate _For Review folder inside the main folder, to help your team find it. Store only the most recent version in the _For Review folder; older versions should be moved to an _Archive folder to avoid confusion. Give the PDF file the same file name as the master InDesign file (with the .pdf extension).

design presentation folder assets folder (store all graphic files used in InDesign document)

Appendix: Design Resources – 3

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Storyboard Document Template Storyboards for extended Flash animation or complex interactive projects often must be presented to the client for approval or legal review. To facillitate this process, use a standard imc2 storyboard document template. This helps build consistency in deliverables shown to clients, helps communicate audio or animation content and keeps the imc2 name attached to the work, for the client and anyone else who looks at it. Template files for the storyboard presentation template, as well as an example presentation in this format, can be found on the server. The example presentation can be found here: \\colossus\CreativeFiles\_Resource Library\Templates\Storyboards\Storyboards (Example) And the template files here: \\colossus\CreativeFiles\_Resource Library\Templates\Storyboards\Storyboards (Template)

To create a new storyboard, copy the Storyboards (Template) folder into your project folder on the server, and rename it as appropriate. Open the InDesign file, add a title to the first page, and add JPGs of the conceptual designs. The space below can be used to document voiceover narration or describe intended animation. Using different colors and font styles can help differentiate between different kinds of content. There is a basic key to text formatting on the second page of the document, and the text styles are available in the Character Styles palette within InDesign. • Change the explanatory language and text color legend on the second page to fit your needs • Add a title and change the version number with updates • Add descriptive text or voice-over transcripts below the design mock-up; color coding helps provide clarity

Appendix: Design Resources – 4

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Implementation Guide Template Implementation guides help bridge the gap between Tech and Design. It is the role of the production designer to prepare this document and work alongside Tech to ensure they get all the information they’ll need to create the front-end templates to be used in development of the final site. The following templates include the base information that is necessary for every project broken up modularly to make it easier to digest. Anything beyond this core information will be dealt with on a project-by-project basis. If Tech needs any additional information beyond this, they will need to work with the production designer to have it included in the implementation guide so they get what they need for development. Template files for the implementation guide, as well as an example implementation guide in this format, can be found on the server. The example implementation guide(s) can be found here: \\colossus\CreativeFiles\_Resource Library\Templates\Implementation Guide\Implementation Guide (Example) And the template files here: \\colossus\CreativeFiles\_Resource Library\Templates\Implementation Guide\Implementation Guide (Template) To create a new implementation guide, copy the Implementation Guide (Template) folder into your project folder on the server, and rename the InDesign file appropriately. Open the InDesign file and the ImplementationGuideLibrary.indl file. Update the cover page and A-Master page each time you modify the guide. Format the Color Palette page and the Font Styles page. • Drop in client logo, make sure URL is accurate, and update version number and date on cover page • Format swatches on the Color Palette page with the appropriate color and hexadecimal number • Format the Font Styles page, making sure that you format the label for each item in the corresponding font face, size, color (with corresponding swatch), etc.

Appendix: Design Resources – 5

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Implementation Guide Template (continued) Then you simply drop your comps into the following pages: Defined Sections, Page & Column Widths, Margins & Padding, Colors and Font Styles. You can then start formatting these pages using the ImplementationGuideLibrary.indl file alongside an example guide for reference. You’ll duplicate these core pages and drop in the next template/variation design, continuing in the same pattern. • Be sure to label the headlines with the IA code and page title

Keep the Implementation folder organized and version the InDesign file with each major change, so any other designer who needs to make changes after you will be able to find all necessary files. Versioning When a major update to the implementation guide is required, drag a copy of the InDesign file into the _Archive folder and increase the version number of the file in the main folder. (For example, a file named ProjectName_ImplementationGuide_a_01.indd would become ProjectName_ImplementationGuide_a_02.indd.) Store only the latest version of the master InDesign document in the main folder – all older versions should be moved to the _Archive folder. Assets All graphical assets should be kept inside the _Assets folder. It is not necessary to keep older versions of graphic assets, but if desired, an _Archive folder should be created to store older versions separate from the most recent. Publishing When an implementation guide is ready for team or client review, it should be published as a PDF file. Store all exported PDF presentations in a separate _For Review folder inside the main folder to help your team find it. Store only the most recent version in the _For Review folder; older versions should be moved to an _Archive folder to avoid confusion. Give the PDF file the same file name as the master InDesign file (with the .pdf extension).

Implementation Guide (Template) folder

Implementation folder

_For Review folder

Appendix: Design Resources – 6

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Concept Sketch Tools Creating full-blown color comps in Photoshop is often too time-consuming to make it effective for illustrating ideas or concepts for potential projects to the clients who need to sign off on them. In order to help clients visualize a concept or design before going through the process of fully developing it as a comp, consider sketching the idea using tools available on the server. Created in Adobe Illustrator, these files contain very simple illustrations and wireframe-like page elements (navigation bars, buttons, etc.) that, when combined with a brush filter, look much like pencil sketches. They can be quickly manipulated to create rough layouts or mock-ups to help communicate a concept. Examples and resource files for the concept sketch process, as well as a brief overview, can be found on the server in this folder: \\colossus\CreativeFiles\_Resource Library\Design\Resources\Concept Sketch

Within the Concept Sketch folder on the server, there are two subfolders: Resource Elements Inside the Resource Elements folder, there are multiple files that serve as repositories of elements created in previous sketches that can easily be reused to quickly lay out interactive tools or design layouts. A number of interface elements, text and navigation styles and illustrations traced from photographs are all available for use. Sample Layouts Inside the Sample Layouts folder, several completed concept sketches of website layouts and/or tools are stored for reference. These layouts may also serve as good starting points in creating additional sketches.

Appendix: Design Resources – 7

Designer Handbook | Version 3.0

01: Accessing

02: Organizing

03: Guidelines

Notes Use this page to take down any notes. If you have any comments or suggestions for future updates of the Designer Handbook, be sure to reach out to the authors.

Appendix: Design Resources – 8