Client / Client contact information:
Name, phone number and email address for the person or the team on the client side.

Project:
Example: “New campaign to test “CitiClick” for Citibank.”

Prepared by:
Name, phone number and email address for the person or team members who are responsible for writing the brief.

1 Background / Overview:

What’s the big picture? What’s going on in the market? Anything happening on the client side that the creative team should know about? Any opportunities or problems in the market?

This is where you introduce the project to the creative team. You’ll go over this again in the briefing session, but write it down as well.

For an overview, state, “Who is the ad talking to, and what is the one main thing we want to say?”

Example: This is a test campaign to a selection of Citibank customers. We want them to try Citibank’s new “CitiClick” – which is available as an app and a widget – that makes online purchases easier and more secure – and we’ve got a $1 pizza offer to get them started.

2) What is the objective, the purpose of the ad?

A concise statement of the effect the ad should have on consumers. Typically expressed as an action. And focused on what the ad should make them think, feel, or do.

Example: We want people to download the free application and use it within 10 days to buy the special offer, a $1 family size pizza from Papa John’s.

3) Target audience: who are we talking to?

The more precise and detailed the better. Go beyond age and sex to describe demographics and psychographics. Explain how the audience currently thinks, feels and behaves in relation to the product category, the client’s brand, and the client’s specific product or service. > See consumer involvement theory.

Example: This campaign will be aimed exclusively at existing Citibank customers in three test markets: Sacramento, CA, Houston, TX, and Washington DC.

The primary target will be segments of our customer database: male and female, 20 to 35 YO, with at least one Citibank credit card. The target will be approximately 70% married, with combined HH incomes of $85k on average.

This audience is comfortable with new technology, and quick to test new smart phone apps or widgets that leverage their time. They like to be among the first to have the latest and greatest electronics. They make multiple online purchases monthly. We will call our representative persona “Joe”.

4) What’s the single most important thing to say?

What’s the single most persuasive or most compelling statement we can make to achieve the objective?

This should be a simple sentence. No more than a few sentences if absolutely necessary. Avoid generalities.

Example: “Joe – CitiClick will simplify and speed all of your online purchases, while providing increased security.”

5) What are the supporting rational and emotional ‘reasons to believe and buy?’

Explain why the consumer should believe what we say, and why they should buy.

Include all the major copy points, in order of relative importance to the consumer. In other words, ‘What else can we say and show to achieve the objective?’

Example:

1) It’s free, from Citibank – your trusted financial partner.

2) Get a PJ pizza for $1.

3) Backed with a 100% purchase protection guarantee.

4) It has earned rave reviews from real users. (See attached quotes.)

5) Takes just seconds to select from multiple pre-personalized download options via your online account.

6) What else will assist creative development?

Here’s where you can include consumer insights, a description of the brand personality, positioning tag lines, creative thought starters, terms of the direct response offer, result expectations, and mandatory elements such as the logo and Web address.

Be sure to include sources for additional research information, customer quotes, and certainly at least one consumer insight.

- User quote: “I see. I want. I click. I get.”

- More info: Call Bill in research 555 8888 for full research report.

- Insight: “People don’t like to input their credit card and shipping details over and over when making online purchases. But they also don’t like feeling their credit card information is vulnerable to theft.”

7) Schedule: What do we need from the creative team? When do we need it?

Provide all details on media, size and color – for both the initial concepts and finished art. Example:

1) Date _________initial creative review of rough pencil sketch ideas.

2) Date _________review revised creative. Half size, with color, hand or computer created.

3) Date _________final internal creative presentation. Same finish as previous round.

4) Date _________client creative & media presentation. Full size, full color. Hand or computer created.

5) Date _________ print ads delivered to publication.

> A client services check list

[ ] Do we have sufficient reference sources: previous ads, brochures, competitor ads, books, videos or Web sites?

[ ] Do we have contact info / links to people, research or resources that can help the creative team?

[ ] Do we need a supplemental brief / info for a long format, social media, direct response, or new business pitch project?

[ ] Is it clear from the client what must be in the communication, and what might be in the communication? What are the client requirements versus client preferences?

[ ] Do we represent the client’s issues, concerns, wishes?

By Brian Rhinehart

Original Post: http://www.noupe.com/photoshop/preparing-photoshop-files-for-web-developers.html

Whether you’re a freelance web designer or part of a team at an agency, handing off Photoshop files to a client, developer, development team or even another designer is part of the process of building websites.

Whereas the development process is generally more structured, by contrast, the design process is quite often spontaneous and full of experimentation. This can lead to a host of unused and unnamed layers that don’t end up as part of the final approved design. For developers, sifting through a quagmire of unnamed layers (Layer 1, Layer 1 copy, etc.) can be confusing and time consuming.

Designers can help their counterparts or clients before the design hand-off by taking 10 to 15 minutes to prepare files in a consistent and organized manner that can potentially save developers hours of production time. As an added bonus, an organized Photoshop file will save designers time by minimizing development questions after the file has been handed off for coding.

1. Prepping the File

First and foremost, make a copy of the Photoshop file that contains the approved design and add the suffix -prod to the file name. This way you can recognize a production file immediately and know that this file type is for development use only and not for further design refinements.

Guides and layout

Properly align and remove any unnecessary guides in the document. Keep guides to a minimum and only section off the major regions of the layout by outlining blocks of page content such as the masthead, content area, sidebar and footer so that the developer understands what basic structure the page should follow. Keeping the number of guides to a minimum also allows the developer to then add guides where needed to aid them in visually mapping out layout details in the code such as nested divs and navigation menus.

Include a color palette

Create a layer group with its visibility turned off at the top of the Layers panel named “Palette.” Populate this group with layers using Layer > New Fill Layer > Solid Color… which are named to correspond to elements that will be colored using CSS. This allows developers to simply Double+click the layer thumbnail to get the color values they need from the Color Picker while coding.

The added “Palette” Layer Group.

2. Navigation and Button States

During the design process, it’s easy to overlook that navigation graphics should have at least three states of user interaction that will need to be defined in a stylesheet. Place each state on its own layer and name that layer to correspond to its function. As an example, using the following for the layer names of a top navigation element (topnav, topnav:hover, topnav:active) will help to establish a common naming convention and language that both the designer and developer mutually understand and recognize.

Create sprite groups of navigation or button layers or layer groups to ensure that what you envisioned as a designer will get executed in the code. Position the default state as the topmost layer within the group with the hover and active states below.

When creating sprite groups, it is also recommended that a consistent height be used for all of the states so that it is easier for the developer to calculate the background-position of the elements while coding the CSS.

Sprite groups showing the different navigation states.

3. Flattening Artwork

The purpose of flattening artwork is to preserve the approved design and to combine multiple layered elements into single layers that are more readily digested. Examples of this would be a base layer which is being used as a clipping mask and the secondary layers that are being clipped by that base layer, photomontages or a group of layers that comprise the background of a site.

Merging layers

Merge (Command+E) layers and layer groups that won’t require further editing by the developer. This not only reduces the visual impact of the Layers panel, providing a clearer road map for the developer, but also removes the chance of design elements getting accidentally altered during image slicing.

Fonts

Web safe fonts that are used for headings and copy should be left as editable text. This allows developers to easily check the Character panel to see what values need to be applied to font properties in the stylesheet.

In cases where image substitution is to be used for items such as navigation or stylized text treatments, flatten the type layers just in case the developer doesn’t have a specific font available to them. Another method of preserving the appearance of a font would be to use Layer > Type > Convert to Shape in cases where the developer may need to resize a type treatment.

Smart objects

Smart objects are invaluable during the design process. They allow for resizing and styling with Smart Filters while remaining completely editable. However, once a design is approved these layer types should be rasterized or merged with other layers to reduce the overall file size as smart objects can often contain photos or other artwork that have a higher resolution (e.g. 300dpi) than is required for the final output of 72dpi. Another reason to flatten smart objects is to prevent a “File Not Found” error message should the developer Double+click the smart object layer thumbnail.

4. Organizing the Layers Panel

First things first, clean house. This means deleting any layers that are empty or are not going to be used in the final design, especially all the duplicated layers that were used to test ideas during the creative process. By doing a little housekeeping you have already made the file easier to read.

Name all layers

Once you have flattened and merged all the layers that will not require editing, go through and name all of the layers and layer groups. Use a naming convention that is not only well recognized, but also common to your work environment. One example would be to assign layers names that correspond to the CSS that would be used for that layer such as “button:hover.” The point is to establish and maintain the nonverbal communication between the designer and developer through common practices and language.

Use layer groups

Group like elements into consistent layer groups. For example, when designing a WordPress theme, it would be logical to have layer groups with the names “Header,” “Content,” “Sidebar” and “Footer.” It’s also good practice to group like items that constitute a navigational element or other design elements that have multiple states such as icons, buttons and menus.

Mirror the layout

Start from the top of the page layout and work your way to the bottom, arranging the layers and layer groups in descending order to correspond with their position in the design. In this manner a developer can quickly scan through the layer names to identify where a particular design element is located within the Layers panel based on its visual location in the design. This is especially helpful should they need to isolate it for editing or slicing.

Use nested layer groups that reflect the hierarchical structure of the layout. A layer group called “Sidebar” might contain layer groups “search” and “advertising.” Nested layer groups can also illustrate to the developer how elements are arranged structurally within the HTML.

An example of a hierarchically structured Layers panel.

5. Handing off the PSD

When the file has been prepared, don’t just send the file in an e-mail or upload it to the development server. Schedule a hand-off meeting and take the time to go over the file(s) with the developer to ensure that they have a firm understanding of how the end product is supposed to not only look, but behave in terms of user interaction. In the end, both designers and developers will save valuable time.

This model saves design companies because the job is processed faster and has a clearer direction. Technology has a way of replacing positions and improving others. There are also tools like www.basecamphq.com which can track a project and eliminate the need for project coordinators and managers.

Sending work back and forth between designers and customers through sales people can be a nightmare if the salesperson has never designed or developed a website on their own before.

This is why…under a traditional model at an advertising agency, an account executive meets with customers, sells their marketing services and brings a customer’s ideas to a designer. The designer then builds the design or functionality. Not knowing all the angles why the particular design or program works well. The salesman will go off to try to explain to the client what is working. The message and approach gets diluted and time is lost on both ends.

Customers are giving a lot of positive feedback to firms that have designers do the talking. In this day in age, Big businesses need to cut cost. They are not going to high paid executives for reinsurance. They are going to the source because time is money.

By working directly with customers, designers at Digital Complexion are able to convey customers’ ideas more quickly and accurately. Digital Complexion specializes in Social Marketing, Hybrid Web Development, Digital Design and Print.

Some of Digital Complexion’s customers include the Apollo Aviation Group, Innovative American Technologies, Carmine’s Gourmet Market, Visit Palm Beach and recently added Dr. Gloria Barredo in Jupiter, Florida for a for social marketing web campaign.

Creattica

Creattica is a gallery of great design and inspirational imagery. Anyone can submit their work for consideration and voting on items is open to one and all. The best work is accepted and featured in the gallery which receives thousands of visitors every day.

Logotwo

LogoTwo is a dedicated Web 2 Showcase of logo designs.

Logospire

Unlike other logo galleries your logos don’t have to wait to get through the long moderation queue — your work goes live right away. The public are the moderators, so if you want to only see best logos, just browse using the most popular filter.

Logopond

One of my favorites! Logopond has a large community and many participating members. It is packed with a forum and has a good arrangement of information and content.

Logo of the Day

Logo Of The Day is a high-profile logo design award scheme that rewards the best professional logos and trademarks designed throughout the world. All suggested logos are screened by our two judges Jacob Cass & Jeff Fisher to ensure this.

Logo Of The Day is also a place to come for logo design inspiration… daily! It is also a place to discuss, share & rate logo design!

Logomoose

LogoMoose is a showcase for the best logos from all over the world. We bring you your daily portion of logo inspiration.

Logolog

From Author: Logolog is a blog about logo design. The logos I post are those which made me smile and think, the ones I wish I had thought of first! I like it when logos take me by surprise, either with unexpected associations or playful ideas.

Logogalleria

From Author: We hope our efforts to collect and showcase the designs and works of independent logo artists will inspire and motivate others to create and develop new and fresh logo designs either for the web or for print.

Logogala

Another Personal Favorite! Very well organized information and usability. There is a color browsing tool which is very useful.

Logofury

This one has a partner site called cssflury which showcase css web design. Good stuff!.

Logofaves

From Author:

Logo Faves, a logo design inspiration site. A collection of best designed logos around the web is showcased in Logo Faves. we don’t want to be like other Logo repositories,our idea is to bring you all the best of best logos

Our working methodology is open to all, ie., we filter through lots of the designer portfolios over everyday and catalog the greatest logos out here. We pride ourselves on having a huge selection of inspiring logos – perfect for getting the spark of creativity going on and on.

Robin Williams

Below are features that can make a web design look dorky. These are not just my personal opinions, but are ideas I have collected from speaking to groups around the country. Examples of many of these features and more detailed explanations of the problems and solutions are in my book, The Non-Designer’s Web Book, written with John Tollett.

Backgrounds

Default gray color Color combinations of text and background that make the text hard to read Busy, distracting backgrounds that make the text hard to read

Text

Text that is too small to read Text crowding against the left edge
Text that stretches all the way across the page
Centered type over flush left body copy
Paragraphs of type in all caps
Paragraphs of type in bold
Paragraphs of type in italic
Paragraphs of type in all caps, bold, and italic all at once
Underlined text that is not a link

Links

Default blue links
Blue link borders around graphics
Links that are not clear about where they will take you
Links in body copy that distract readers and lead them off to remote, useless pages
Text links that are not underlined so you don’t know they are links
..(If you’re not going to underline your links, please make darned sure
..that each link is perfectly clearly a link! Don’t make me wander around
..with my mouse checking to see if randomly colored text is a link!)
Dead links (links that don’t work anymore)

Graphics

Missing graphics, especially missing graphics with no alt labelsGraphics that don’t fit on the screen (assuming a screen of 800 x 600 pixels)
Large graphic files that take forever to load
Meaningless or useless graphics Thumbnail images that are nearly as large as the full-sized images they link to graphics with no alt labels

I needed some inspiration for a project.  I collected some of the best logo designs from 2008 and 2009. Last year there was a variety of great designs.

You can click on the images to enlarge them.

The photos and textures are organized by categories so it’s easy to find a resource that suits for your project. The number of categories is pretty decent, the resources is being organized in 15 categories (Abstract, Animal, Architecture, Flower, Food, Insect, Landscape / Skyline, Nature, Objects, Transportation, Miscellaneous, Religious, Technology, Texture / Background, People).

The website is pretty straight forward without complex navigation and other extra stuff. You just point to the category you are interested in and browse through the photos. If you are looking for something specific, there is, of course a search option.

The images offered for download are high-resolution and the quality is great.

The collection of free stock photos is quite extensive, with over 650 items available for download. Here are a few examples :

Before choosing a professional graphic design company, it is very important to understand the different aspects of web color. In general, there are two types of colors used in web graphics: RGB and CMYK. These colors determine the background page elements and photographs. RGB and CMYK colors are generally associated with GIF and JPEG graphic file formats.

Graphic designers use web colors for web page backgrounds, HTML text, table and layer backgrounds, web links, GIF and JPEG files. Most designers employ web safe palette (Web 216 palette) in all computer graphics, web development applications and multimedia. These graphic designers use the following rules:

Flat graphics employing web 216 palettes are saved as GIF files;

Photographs and full color images employing RGB palette are saved as JPEG.

Moreover, a standard web page should be of 600×800, 620×480 or 1024×768 pixels. These important factors make a website look professional and attractive. A professional graphic design firm follows these rules and displays samples, both printed and online, in its portfolio. Always look for portfolios with diverse samples. Also, ensure that the portfolio boasts quality graphics and not poor quality images or basic clip art graphics.

A corporate graphic design company should have a proper background or reference. If you are looking to have a long term project from your graphic designer, check the company’s project report card. Make sure the graphic design company has any long term repeat clients and is not a startup company. Hence, determine whether a corporate graphic design company suits your business!

Twas the Night Before Crunch Time

Update on an Old Poem
Here’s a variation of “Twas the Night Before Christmas” especially written for all of you graphic designers and web designers. Have a safe holiday and may all your designs come true!

Twas the Night Before Crunch Time

By Frank Ling aka “admin”

Twas the night before crunch time, when all through the house

Not a designer was stirring, not even a wireless mouse.

The graphic files were saved and stored away with care,

In hopes they’d safe till the next day, and still would be there.

The designers were all nestled so snug in their beds,

While visions of deadlines kept dancing in their heads.

But suddenly outside there arose such a clatter,

Did the servers all crash, just what was the matter?

But outside there appeared the delivery man so lively and quick,

I knew right away that it must be my Cintiq!

I opened the package and looked right inside,

And there was the graphics tablet so shinny and bright.

Now Maya, now Adobe, now graphics galore,

I can now produce artwork and images and much more!

As I plugged in the tablet to my monitor and PC,

I noticed the delivery man was just about to leave.

He got in his van and gave me a whistle,

Your work never stops, that’s as clear as crystal.

But I heard him shout out as he drove out of sight,

“Happy Graphics to all, and to all a good-night!

Happy Holidays everyone. See you next year!

Q : What is visual hierarchy?
A : Important elements have the most emphasis. Least important elements have the least emphasis. So, a user’s eye should move around the page from your most important content to your least important content.

Q : Ok…I still don’t understand. How do you measure the emphasis of a single design element?
A : There are a couple of design principles that we can use to create more or less emphasis.

Contrast
more contrast = more emphasis
less contrast = less emphasis

Size
larger = more emphasis
smaller = less emphasis

Positioning
more space = more emphasis
less space = er, clutter. There should always be some space.

Color
darker or brighter = more emphasis
lighter or duller = less emphasis

Q : How do you decide the order? What should people look at first on my website?
A : Of course it varies from site to site, but here’s a hierarchy that works for most:

1. Logo / Navigation / Feature
2. Section Headings / Small Features
3. Accompanying Text

Q : I’m a visual person. Can you just show me an example? What does a design with strong visual hierarchy look like?
A : Here ya go. I added numbers to indicate where my eye went.

Q : Tell me again – why is this important?
A : Having a clear visual hierarchy helps your users scan the page and quickly take in the content. Visual confusion leads to user confusion and frustration.

Q : But how do you measure the weight of an element?
A : I like to do a squint test. Put the design on the screen/wall, squint your eyes so it’s a little blurry. What do you look at first? Second? By squinting, you are not thinking about the content itself, but about what item has the most weight on the page.

Another useful tool is Feng-GUI.

The Feng-GUI heat map service is an automatic alternative to eye-tracking. Unlike eye-tracking or click-based heatmaps, Feng-GUI creates heatmaps based on an algorithm that predicts what a real human would be most likely to look at.