Good design is in the details.

Let’s start this conversation with a bold statement: I don’t condone a lackadaisical approach to design! Effective visual communication relies on being extremely focused and organized, being able to think quickly on your feet and producing high-level designs that secure an emotional connection with the client/viewer. This is a huge weight to carry on our little, creative shoulders.

Anyone who knows me personally can attest I’m a fly by the seat of my pants kind of guy. Some would even say I am a bit aloof. I’m willing to admit to both statements really. One facet of my life where this doesn’t apply is my strategic approach to visual communication. Through my almost twenty years working as a visual communicator, I’ve trained myself to be a bit obsessive and detail oriented when it comes to practicing design. There are simply too many factors throughout the design process that need to be taken into account in order for a design to make it from concept to fruition. Admittedly, there are times when I feel as though I’ve got one hundred different creative plates spinning at the same time. The only way to ensure I keep them from crashing to the floor is to focus on the details. Oh, the many, many details!

There are numerous aspects of the design process we can discuss here. I’m highlighting a few: a strong concept, effective use of type and image, establishing visual hierarchy, client relations, file preparation for print and digital mediums, and design execution/presentation are this blog entry’s subjects of focus.

A Strong Concept

Practice safe design. Use a concept. — Petrula Vrontikis

The concept in a design is the common thread that’s woven into every piece found within a design series. While we may vary the visuals and copy in each piece to hold the viewers’ interest, the concept (the underlying message you’re trying to communicate) needs to remain constant throughout the entire series. The concept connects each of the design pieces together through a single, common message.

One of the tricks I use when developing a design series is to ask myself “what’s the big idea?”. This question ensures visuals and copy support the concept. For more detailed insight into concepts please refer to my previous blog post: http://dezignrogue.blogspot.com/2011/09/what-is-ad-concept.html

Effective Use of Type and Image

Our job as visual communicators is to concept unique, stand out, attention worthy ideas and bring them to life through effective use of type and image. Did you ever hear the phrase: the sum is greater than the separate parts? Each of the separate elements must work together as a team to support the message being communicated. Most creatives agree that when one — the line or the visual — is the “star” of a design, the other should take a supporting role. If both command attention, it can cause confusion. (1)

Below are some ways to get a complimentary visual/verbal relationship:

• The words determine the visual form.

• The words fight the visual form, creating contrast or irony.

• The words are straightforward and the visual is unusual (that is, humorous, odd, curious, shocking).

• The visuals are straightforward and the words are unusual.

When using type and imagery which one should dominate your design? Below are a few questions you can ask yourself when designing:

• Does my target audience prefer to read or look at pictures?

• Are the words interesting enough for people to read them?

• Is the visual going to stop people and grab their attention?

• If the design is intended for an international audience, should the design be more visual than verbal?

Establish Visual Hierarchy

I kind of feel like a broken record when talking about this point for I seem to bring it up all of the time! It just goes to show how important it is to achieve effective visual communication. Establishing hierarchy in design is organizing objects (type, imagery, etc) into different levels of relative significance and prioritizes the elements in your design to convey valuable information to the viewer. It stresses how important they are in relation to each other. Visual hierarchy helps us comprehend, reinforces the message and guides us through your story. (1.1)

Try asking yourself this simple question: what do I want the viewer to see first, second, third etc.? Placing the elements in the composition according to your predetermined numbered list is a simple but effective way to start establishing visual hierarchy. For more detailed insight into establishing visual hierarchy please refer to my previous blog post: http://dezignrogue.blogspot.com/2011/08/importance-of-visual-hierarchy.html

Client Relations

In one of my previous design posts (http://dezignrogue.blogspot.com/2011/09/things-ive-learned-about-visual.html) I stated presenting design concepts to a client is much like convincing them to walk to the edge of an active volcano. The client must trust you enough to allow you to take them beyond their comfort zone. If you work to instill confidence, you both can go to that edge and they trust you won’t push them in. If there isn’t trust, you’re not getting them anywhere near that edge!

So how can you instill confidence? Here are some of my tried and true practices:

• Not only meet deadlines, beat them!

This is an extremely deadline focused industry and you’re expected to execute and present extremely high-level concepts/designs in a very short amount of time. When designing, I tell myself jobs are due the day before the agreed due date with the client. It’s a mental deadline trick I play on myself that not only ensures I won't miss a deadline but also makes me look like a design super star by delivering designs prior to the expected delivery date.

• Exceed expectations

When specking out a job, I clearly specify how many design versions/concepts I’ll present to the client. For example, if developing a logo, I state I’ll present three distinct versions for client review. I often walk into that presentation with no less than six distinct symbols for them to review. The client is clearly expecting to see three and I offer six. This is an example of how you can go above and beyond your client’s expectations.

• Kill ‘em with kindness

Also included in the “things I’ve learned about visual communication during my lifetime” post listed above is the practice of killing ‘em with kindness. In that post I ask if you’ve ever heard the phrase "you catch more flies with honey than vinegar"? This basically means it’s easier to get what you want by being polite than by being demanding and resistant. No one wants to work with someone who has a bad attitude. You’ll accomplish more of your communication goals by being supportive throughout the process than you ever will being combative. This idea connects directly back to my statement at the onset of this section. The client must trust in you and trust what you’re proposing. In many cases you’re asking them to go into unchartered creative territory. What a scary and daunting experience it must be for them. Do your best to put their mind at ease. Doing so will help get your design accepted and approved.

File Preparation: Print

So, your client gives final approval on your design and you’re onto prepping your files for print. You clearly write detailed instructions to the printer, you package your CD carefully and you send the file off to the printer. Then comes the dreaded phone call… the printer doesn't have the fonts, the files are corrupt, you forgot to add bleeds in your files and your freaking out because this means you can't possibly make your deadline. (2)

It’s important to prepare your file using graphic arts industry standard practices. (3) Some elements to look out for when prepping a file for print:

• The software application is appropriate for the product to be printed.

• The file was created in the appropriate color space (Web: 72 DPI, RGB and Print: 300 DPI, CMYK).

• The document’s page size was built to final trim size.

• The fonts are all of one kind (preferably Postscript) and haven’t been stylized.

• All scans are 300 dpi resolution at 100% of the final image size.

• The graphic images are linked, not embedded in the file.

• The standards for indicating trapping, bleeds, and rule widths have been followed.

• The trim, score and fold marks are indicated and outside live print area.

Aspects of your print job to double check:
Accuracy
• Spelling: run spell check for spelling, grammar and punctuation errors.

• Proof reading: check names, numbers and other things that can’t be caught by spell check.

• Correct version: send the most recent version of the file.

Typography
• Punctuation marks: convert quotation marks, apostrophes, inch and foot marks, dashes and similar punctuation marks to their proper typographic symbol.

• Hyphenation: check automatic hyphenation for errors, “rivers” of white space or hyphenation that creates a widow or orphan.

• Widows and orphans: eliminate single words on a line or at the top of a column or a page.

Color
• Unused colors: delete any colors from the color palette that haven’t been used in the document.

• Color definitions: for spot color printing, define colors by using PMS numbers; for four color process, define all colors (including PMS match colors) as CMYK percentages.

• Color names: name each spot color, whether in the document or in linked graphics, with the same PMS number; similarly, define all CMYK colors, whether in the document or in linked graphics, with the same CMYK percentages.

• Color separations: test for proper color definitions by printing color separations. You should have one sheet for each PMS color (for spot color printing) or four sheets (for process color printing). And remember - if you can’t print color separations, neither can the printer.

Images (photographs, graphics)
• Resolution: 300 dpi when the image is at 100% of the size it is used in the document. Lower resolution compromises image quality and may result in pixilation.

• Fonts: convert fonts contained in images to paths or outlines. Layout programs do not collect any fonts from imported images.

• FPO: if you have placed low resolution images for position only during file construction, replace them with their high resolution counterparts.

• Color: match color definitions (i.e., spot or CMYK) and color names in linked images to what you have used in the main document. 

• File format: use TIFF (tagged image file format) or EPS (encapsulated Postscript). No PSD, JPG, PDF files!

Traps, bleeds, rules

• Traps: set chokes or spreads as appropriate.
• Bleeds: extend image to 1/8 inch beyond trim mark.
• Rules:  define rules numerically (i.e., .25 pt).

Fonts
• Unused fonts: delete any fonts not used in the document from the font listing.

• Stylized fonts: replace stylized fonts with the actual font.

Print the project out yourself, check and then submit it to the printer
Once everything has checked out, it is time for the real test – will it print? Prior to submitting the file to the printer, print it out. If you can’t print it, chances are the printer can’t, either. Also include a hard copy of the file so the printer can compare your output to theirs.

File Preparation: Digital

Large image files are the biggest offenders when it comes to slow loading web pages. Digital images are made up of small dots called pixels. Image quality is described in “dots per inch” (DPI). This refers to the number of pixels that make up each square inch of image. The higher the DPI, the better the quality of the photo. Imagery for online viewing should be 72DPI. A photo destined for the screen only needs to be 72DPI – any higher than this is a waste of file size and download time. (4)

Webdevfoundations.net offers a detailed listing of some web design to-do’s to consider when designing in this medium: (5)

Page Layout

• Appeals to the target audience.

• Use a consistent site header/logo.

• Use a consistent navigation area.

• Use an informative page title that includes the company/organization/site name.

• Page footer area could include: copyright, last update, contact e-mail address.

• Good use of basic design principles: repetition, contrast, proximity, and alignment.

• Page displays without horizontal scrolling at 1024x768 and higher resolutions.

• Find a balance of text/graphics/white space on page.

• Good contrast between text and background.

• Repetitive information (header/logo and navigation) takes up no more than one-quarter to one-third of the top portion of the browser window at 1024x768 resolution.

• Home page has compelling, interesting information above the fold (before scrolling down) at 1024x768.

• Home page downloads within 10 seconds on dial-up connection.

Navigation

• Main navigation links are clearly and consistently labeled.

• Navigation is easy to use for target audience.

• If images, Flash, or DHTML is the main navigation, clear text links are in the footer section of the page (accessibility).

• Navigation aids, such as site map, skip navigation link, or breadcrumbs are used (accessibility).

• All navigation hyperlinks "work" — are not broken.

Color and Graphics

• Use of different colors in page backgrounds/text is limited to a maximum of three or four colors plus neutrals.

• Color is used consistently.

• Color has good contrast with associated text.

• Use of color and graphics enhances rather than distracts from the site.

• Graphics are optimized and do not significantly slow download.

• Each graphic used serves a clear purpose.

• Image tags use the alt attribute to configure alternate text to display if the browser or user agent does not support images (accessibility).

• Animated images do not distract from the site and either do not repeat or only repeat a few times.

Content Presentation

• Common fonts such as Arial or Times New Roman are used.

• Techniques of writing for the Web are used: headings, bullet points, short sentences in short paragraphs, use of white space, etc.

• Fonts, font sizes, and font colors are consistently used.

• Content provides meaningful, useful information.

• Content is organized in a consistent manner.

• Information is easy to find using minimal clicks.

• Timeliness: The date of the last revision and/or copyright date is accurate.

• Content does not include outdated material.

• Content is free of typographical and grammatical errors.

• Content provides links to other useful sites.

• Avoid the use of "Click here" when writing text for hyperlinks.

• If standard link colors are not used, hyperlinks use a consistent set of colors to indicate visited/nonvisited status.

• If graphics and/or media is used to convey meaning, the alternate text equivalent of the content is provided (accessibility).

Design Execution and Presentation

Don’t let a great idea get lost in poor design execution and presentation. You must be as effective at presenting the idea as you are coming up with the concept. It doesn’t matter how much time you’ve spent concepting and developing a design. If it isn’t executed and presented at the highest quality and level, you run the risk of the client getting lost in the presentation glitches as opposed to focusing on the great concept!

• I know I stressed this one above but it’s worth a repeat: Are you using low res (72DPI), RGB imagery on a print piece? If it’s a print piece use 300DPI, CMYK imagery. Working as a creative director nothing makes a designer lose credibility more than using a low res, RGB image in a print piece. It’s your responsibility to know what file format and size to use in what medium.

• Pay attention to your craftsmanship when mounting the work onto the presentation boards. Are there pencil marks or glue splotches on the boards? You don’t want the board to look like it was created by Pig-Pen from the Peanuts. A crisp, clean presentation is a must!

• Focus on the detail and quality of your final printouts. In many cases, what the client sees is taken as a literal interpretation of what the final piece will look like. If your colors are muted on the print out this could negatively reflect on the final design presentation. Make sure what you present is exactly what you intend the final design to look like.

• For goodness sake SPELL CHECK! I know I said this like three times throughout this post?!

> InDesign the key command is Apple > I

> Photoshop it is Edit > Check Spelling

> Illustrator the key command is Apple > I

• Practice talking about your work in preparation for the final one on one presentation with the client.

• Do your research so you can speak to your client in their language! Use terminology that relates to their industry.

• Who is your client? Are they creative people that can talk the language of visual communication or are they design novices? You surely won’t present concepts to a sales manager the same way you would to a creative director! You have to alter the presentation depending on the background of the client.

• Know your client’s competition. What are they doing right? What are they doing wrong?

• Identify your target audience.

> Geographic: Where do you propose to place your designs? In a market that the company currently reaches or do you propose a totally new geographic target market?

> Demographic: The same holds true for demographics. Who do you hope to reach with your message? Is this new territory, or are you trying to strengthen an existing market?

> Psychographic: What are things the consumer is interested in? What are their interests? Likes? Dislikes? What presses their emotive buttons?

• What are your design objectives? What do you intend to accomplish with this design solution?

• What is your big idea?

• What is your main message/idea/creative strategy? How does your creative concept — the “big idea” — help to reach the target audience?

• What are your media choices?

• Relax, smile, be confident! You’ve done the work, now let the design do its job!

In Conclusion

Good design truly is in the details. Design is much more than getting a message across through the use of visuals and words. The best practice to adopt is one of checking and rechecking everything! In many cases, you’re the last person to review the design before it “goes out the door.” You better make sure all work is completed correctly or run the risk of damaging your reputation. You’re only as good as your last project. Any client will attest to that! ;)

Blog Resources:

(1) http://www.robinlanda.com/Books_Advertising_By_Design__Content.htm

(1.1) http://www.vanseodesign.com/web-design/visual-hierarchy/

(2) http://www.photoshopcafe.com/tutorials/printing/printing.htm

(3) http://www.printlocal.com/Prepress-Checklist.asp

(4) http://alumnae.mtholyoke.edu/dokuwiki/doku.php/websites/how_to_prepare_images_for_the_web

(5) http://terrymorris.net/bestpractices/