What I’m trying to say here is, by choosing to solely create your design solutions via computer graphics programs, it can limit your possibilities for producing truly unique and original work. There can be better solutions to a visual problem out there that might not even cross your mind if you are only working in Illustrator all of the time. Looking through the recent Computer Arts Projects issue 124 on “The Art of Typography,” I discovered some inspiring work from designers who are taking a different approach to design through tactile and hand constructed typography to environmental, anamorphic typography. I feel that because so much work is created on the computer today, designers are trying to find unique solutions by going back to the basics and getting more in touch with a hands on approach.

Here are some inspiring creatives who are taking this approach of design outside of the computer screen:

Craig Ward

Project: You Blow Me Away
In this project, Ward screenprinted type onto 20 sheets of 7mm glass and used a catapult to fire various objects through the glass while photographer Jason Tozer captured the shots.

Project: Creative Review
Ward uses anamorphosis inspired by work from Swiss artist Felice Varini and creates the letters CR out of tape.

Project: Hairy Alphabet
Ward was inspired to create this typeface while getting a haircut. He noticed the fallen hairs on the floor created a vague shape of a letter. He asked the barber for some hair, bagged it, and scanned hair into in the computer. This project first involves a hands on approach—gathering actual hair clippings before creating them into letterforms on the computer.

Axel Peemoeller

Project: Eureka Tower car park signage
Way-finding signage for the Eureka Tower car park in Melbourne, Australia using anamorphosis.

Karina Petersen

Project: A Three Dimensional Typeface
Another project applying anamorphosis to typography.

Marian Bantjes

Project: Flaunt Magazine cover
Marian Bantjes goes back basics and uses a fine art approach to designing the cover of Flaunt magazine with an oil painting.

Project: Stephen Sagmeister: Sugar
Bantjes was asked by Stephen Sagmeister to contribute to his “Things I have learned in my life so far,” and creates tyopgraphic work out of sugar.

Yulia Brodskaya

Brodskaya does typographic work out of paper cut illustrations.

Jonas Valtysson

Project: Sequences
In collaboration with Siggi Odds, Sven Davids, and Mundi, Valtysson used real-time art to create this typographic poster for a multimedia real-time art festival in Reykjavik. Valtysson poured milk to create the letterforms.

I know there’s tons more of examples of designers out there who are doing cool hands on work, but this is all I can think of right now. Do you know of any designers doing experimental design with a hands on approach that you would like to share? I hope this post can give designers a few new fresh ideas and inspire them to come up with new ways to approach projects.

However, although it seems everything is moving toward the internet these days, it’s far from over for print which is fighting back with high quality printing. Designers and printers are bringing innovation and experimentation to print design through the use of print finishes which can intensify the aesthetics and tactility of a printed product. Thus, creating more memorable work with an edge over web.

Through this blog, I hope to create a resource for designers like myself who aren’t very familiar with print finishes and are wanting to further their possibilities with print design.

“Although the application of print-finishing techniques signals the end of the production process, these techniques should not be considered as afterthoughts, but as an integral part of a design, and one that needs to be considered during the planning stage (67, Ambrose/Harris).”

Listed here are explanations of the various print finishes that you should know about. These are a compilation of the information I found in Computer Arts magazine issue 163 (pgs. 48-52), and Print & Finish by Ambrose/ Harris.

The Finishes You Should Know:

Die Cut

The technique of cutting a desired design into a substrate using a metal block called a die. The die is used to cut away specified sections of the design in order to create a decorative and tactile effect or to reveal a part of the proceeding page.

A die can cost anywhere around $100-200 bucks and up. You might want to consider wisely what you create a die for. It is most useful to invest in one if you are planning to create many reproductions of a project involving the die.

Varnishes

You may be familiar with varnishes in relation to wood finishes on furniture and decks. Essentially, varnishes for print are the same thing. It is a colorless coating that is applied to work to protect it from scuffing while also enhancing the visual effect of the design or elements within it. Varnishes can be matte, gloss, or silk/satin, and can be applied to wet or dry ink. When applied to dry ink, varnishes tend to be absorbed less.

• matte – typically used with text–heavy pages to diffuse light and increase readability. Gives a non­–glossy, smooth finish to the printed pages.
• gloss – a gloss varnish reflects back light and is frequently used to enhance the appearance of photographs or other graphic elements.
• satin/silk – this varnish is a middle option between gloss and matte varnishes. It provides some highlight, but is not as flat as a matte varnish.

Spot UV

Ultraviolet varnishing is a way to really make colors pop in a design. It is a clear liquid that is cured instantly with ultraviolet light. This treatment can make colors appear more vibrant when used as a spot covering to highlight specific areas of a design and also gives off a different texture.

Emboss and Debossing

An emboss or deboss is type of treatment where a die is used as a stamp that impresses a part of a design into a substrate to enhance that particular part in the design. This creates a three-dimensional, decorative and textural element to a design.

An emboss is a raised impression while a deboss is a recessed impression. Embossing and debossing can be done with ink, foil or without either which is called a blind emboss/deboss. Embossing and debossing typically work better on thicker paper weights than light ones.

Blind Deboss

Foil Blocking

Foil blocking is a process where a colored foil is pressed onto a printed piece with a heated die. This separates the foil from its backing and allows it to adhere to the printed material. A foil block can also be known as a foil stamp, heat stamp, hot stamp, block print and foil emboss.

You might want to try out some special types of foil blocking like a holographic foil or a mirror foil which can help emphasize surrounding colors in a design. A mirror foil can add a nice shine in contrast to dark imagery.

holographic foil

A cheaper way to achieve a similar effect to foil blocking is to use metallic inks which have a reflective property, however, it is less reflective and eye catching.

Overprinting

This is the process of printing one color on top of another creating an interesting visual effect by having the colors interfere with one another.

Designed by Delicious Design League

Lamination

A thin film applied to one or both sides of a printed stock. Lamination can be gloss or luster and has several benefits. It helps increase sheet stability or rigidity, protect work from moisture and handling, and can make work waterproof and tear-proof.

Helvetica 50 project workbook. Designed by Breakmould design agency

Folds

You don’t always have to do the typical valley fold (folding your paper in half). Different folding methods can help present your work in creative and visually interesting ways. Think about what would appropriate for your project and your budget.

• French Folding – In a French fold, the paper is printed on one side and then it is folded horizontally and vertically to create a four-sided, uncut document or section.
• Throw outs – A folding and scoring technique that is bound into a publication to give extra space to showcase a particular image or visual element. Usually found in magazines.
• Gatefold – When a sheet is folded into four panels and placed into a publication so that the left and right panels fold parallel and inward to the spine without overlapping. This kind of fold is useful if the spread has a large key image or a lot of content to be displayed.
• Accordion / Concertina Fold – This fold comprises two or more parallel folds that go in opposite directions and open out. This folding method enables many pages to be collapsed into a smaller size publication. (88, Ambrose / Harris)
• Roll Fold – A roll fold is composed of a series of parallel valley folds, which are further folded into one another. (90, Ambrose / Harris)

French Fold

Self Promotional Book by Nikolaus Schmidt

Designed by Davidesign

Gatefold

Triple Darkness Music Packaging by Sawdust

Roll Fold

Designed by AV Browne

Accordion / Concertina Fold

Multi Concertina Folding by Clinical Print Finishers (U.K.) LTD

This site found on The Designcubicle, provides instructions for properly folding using these techniques.

Perforation

Perforation (or perf cutting) is a process that creates a cut-out area in a substrate, which weakens it for detaching. (108, Ambrose / Harris)

The dos and don’ts of working with combination finishes (52, Computer Arts issue 163):

1. Spot UV and Embossing
   Spot UV combined with embossed elements can look great, because it seems to lift the embossed portion off the page.
2. Heavy gloss lamination and light stock
   Light stock that is only laminated on one side can cause curling. To solve this problem, change to a heavier stock or laminate both sides.
3. Spot UV and lamination
   Unfortunately, spot UV won’t work with lamination because the heat process interferes.

How to prepare your file for a print finish

Generally speaking, from my own experience and from what I have heard from other designers, I have found that schools aren’t really preparing design students well enough with the knowledge of the printing process and how to prepare files before sending them to a printer. Learning how to prepare your files properly will make things run more smoothly when working with a printer.

If you ever feel unsure about how to accomplish a particular treatment in a design, it is best to sit and talk with a printer. It is important to communicate with your printer to ensure that a project will come out as planned.

Liz Anderson, from AlphaGraphics on Michigan Avenue in Chicago, gave me some valuable advice about working with a printer. She suggests to:
• Involve a printer as early on as you can when working on a project. You can send the printer a PDF of your work in progress just to see if what you are planning to do will work with what the printer can offer and also can give you an estimate of the cost of the treatment(s) you may have in mind.

Setting up your files for many of these print finishes is easy to do and they are pretty much done in the same fashion. For example, you can set up a diecut, emboss/deboss, foil stamp, and varnish all in the same way.

There are a couple of ways you can go about doing this:

1. The first method consists of making separate files for the design content. For whatever treatment you are planning to do, make a file that only has the element(s) that will have the particular print finish. Then, make a separate file that contains the rest of the design EXCLUDING the element(s) meant for the print finish.
   Example: Lets say we want to make “Push” embossed in this poster.
   
   Make a two separate files. One file containing “Push” for the emboss and a second file with everything else.
   
2. The second method involves only one file and is simply done by separating the area to-be-treated from the rest of the design by putting it in its own layer. Just indicate to the printer that the particular layer is meant for the print finish.

In this image, “Push” is in its own layer to distinguish it as what will be embossed.

You can ask the printer if he or she has a preference on which way to approach preparing your files.

Setting up for a fold or perforation:

If you are planning to have a score made for a fold, or perforation in your design, it seems easy to go with the second technique mentioned above to set up your file. In the native file, just create lines as guides on a separate layer and name them as score guides/perforation guides/ or whatever so that the printer knows what they are for. Keep the visibility of this layer with these guides off  because you don’t want them to appear on the finished product when printed.

Good luck, and I hope this gave you some insight on some techniques you might not have known about. Feel free to contribute any advice you may have on this topic or any sites you feel are good resources. If any of this information presented is inaccurate, please correct me. This article is supposed to be a resource for those like me who are learning. Thanks.

Related articles:

8 print finishes to spice up your print work by Brian Hoff of thedesigncubicle
Print Finishing from fullcolorprinting.co.uk

Sources for examples of beautifully made print work.
Take a look at these and find more implementations of print finishes.
Print Inspiration: 40 Hidden Gems by Francesco Mugnai
GraphicExchange > Print
Beautiful Brochures and Booklets by Smashing Magazine
Stationary Style

Sources for this article:
Ambrose, and Harris. Print and Finish. Switzerland: AVA Publishing, 2006.

Walsh, Jason. “The Finishing Line.” Computer Arts Magazine. July 2009: 48-52

Liz Anderson, from AlphaGraphics on Michigan Avenue in Chicago

WordPress is possibly the cheapest and best optimized Content Management System out there today.  WordPress and search engine optimization (SEO) guru,  Joost de Valk of yoast.com. says, “Out of the box, WordPress is a pretty well optimized system, and does a far better job at allowing every single page to be indexed than any other CMS I have used.” Wordpress comes ready for search engines with several built in search engine optimization tools including the ability to use .htaccess to create static URLs called permalinks, blogrolling, and pinging (“Search Engine Optimization for WordPress,” WordPress.org). It also comes with various built-in feeds and allows your site to be viewed by various feed readers. There are even different third party plugins for WordPress that allow users to further optimize and customize sites to satisfy their needs.

Joost de Valk, shares the potential of Wordpress SEO in his article The Definitive Guide to Higher Rankings for Your Blog. The article also has a corresponding hour-long video presentation for those who are more visual learners and listeners. The video and article serve as great resources for newbies who are just learning WordPress and SEO and also for more experienced users who want to know how to further optimize their blogs. In his article and video de Valk lists essential plugins that add optimization for WordPress sites, as well as template tips and ten steps to improve the conversation on your blog.

Some useful plugins he mentions are:

• Headspace2: Helps edit titles for better optimization

• Redirection: Helps manage 301 redirections, keep track of 404 errors, and basically tidy up any loose ends your site may have. It is helpful if you are migrating pages from an old website, or are changing the directory of your WordPress installation.

• YARPP: Allows search engines to crawl through related posts.

• SEO Friendly Images: Provides proper alt and title tags automatically to images.

• RSS Footer: This is a simple plugin that lets you add an extra line of content to articles in your feed defaulting to “Post from: ” and then a link back to your blog, with your blog’s name as it’s anchor text.

• Yoast Breadcrumbs: Allows you to add breadcrumbs to your theme. Check out why breadcrumbs are useful in site navigation from our previous blog.

• Robots Meta: Allows you to easily prevent indexing of your search result pages, while still allowing search engines to follow the links on them, plus much more.

• Pagination: Allows you to use page numbers instead of next and previous links. With this plugin, users can easily navigate much quicker to the page they want. It is good for SEO (Search Engine Optimization) as well, because it creates a tighter inner link structure.

A couple of his plugins are only available by signing up for his mailing list so check out his site to find the full article, video presentation, as well as his list of plugins.

de Valk, Joost. “WordPress SEO: The Definitive Guide to Higher Rankings for Your Blog.” 2009. Yoast. 7 July 2009 <http://yoast.com/articles/wordpress-seo/>.

“Search Optimization for WordPress.” Codex. 2009. WordPress.org. 7 July 2009. < http://codex.wordpress.org/Search_Engine_Optimization_for_Wordpress>.

Are you the type of person who likes to skip brainstorming and outlining and simply jump into your project or writing? That process of working can be a real headache if there is a lot of content to discuss and organize. The same is true for designing websites.  The best way to approach designing a website is to plan! The first and perhaps most important step to creating an efficient and user-friendly website starts with careful research and brainstorming.  It is crucial to write and/or sketch out your ideas before heading to a computer.  Unfortunately, many designers skip over this step, jumping straight into the project hoping it will turn out a success. Thus polluting the web with mediocre to some very bad websites.  

Websites can be very complex and no two are the same, so it is important to treat each one individually and plan accordingly. An efficient and well-functioning website should be an enjoyable experience for its users.  Below are a few easy tips and advice that experienced web developers use.  It may seem like common sense, but hey, surprisingly people don’t always use their common sense, so check it out! 

1) Establish a clear goal and objective.

Be sure to know the objectives and goals you or your client is trying to achieve.  It is also very important to know who the audience is and what they are looking for.  Be on the same page with your client in terms of understanding the goals for the website and what is realistically achievable before starting any design. This will save you time and stress by preventing any mistakes from happening before the site is made.  

2) Structure the content.

Use site mapping to define the structure of your site.  A site map is a collection of your ideas and the content that you will organize on your site. Scottie Claiborne claims in his article, Effective Site Navigation, that when planning your site or site redesign, think about the structure first.  It helps to physically map out these pages. Use index cards or post it notes, write a page topic on each card, lay them out and organize them into groups. Once satisfied with your plan, you will have yourself a site map and will be ready for the next step; wire framing. 

Use wire framing to come up with the skeleton of the site. According to Andy Budd, creative director of Clearleft (clearleft.com), wire framing is similar to a director’s storyboard or an architect’s blueprint. There are two different (and necessary) ways to approach wire framing.  The first is a design free wire frame. This allows to focus on the purely functional aspect of the site, keeping in mind effective and consistent navigation. The second is a structure-free wire fame.  This allows for focus on the aesthetic aspect of the website. Combining these two wireframes will result in a very effective skeleton of your site (Grannell, 10).

3) Use Effective and Efficient Navigation. 

In his book Designing Web usability, Jakob Neilson stresses that online navigation must answer these questions:

- Where am I?

- Where have I been going?

- Where can I go? 

Consistency in navigation placement is vital if you want your website to be a success.  It allows users to move fluidly to and from pages without hassle.  Scottie Claiborne makes an analogy in his article on Effective Site Navigation (webcredible.co.uk) relating website navigation with hospital navigation. If you walk down a hallway in a hospital and see a sign for where you want to go, but suddenly the main entrance, cafeteria and emergency signs are gone how are you supposed to find your way back? Many sites use breadcrumb trails, which are links (usually in a small font, placed directly below the page header) that show where the user is in relation to the homepage.  

So what exactly is the most effective layout for navigation? Both horizontal and vertical navigation work well, but which is the best of the two is debatable.  Designer Chris Garnett argues “vertical navigation doesn’t demand the same amount of visual attention. I want primary navigation to be one of the most instantly recognizable elements of any site I build.” 

Here are 5 sites that demonstrate efficient navigation according to the Ultimate Guide to Web Design:

Unfortunately, what we have found with many of these sites is that the design aspect of the site suffers in order to enhance effective navigation.  Here are some sites that we have found to have both effective navigation and great design: 

The Fox website uses a consistent top bar navigation throughout the entire site. Any information the user might need is accessible within 2 clicks.  

The Chicago Water Taxi website is a good example of using an effective vertical navigation bar. 

The NFL website is a great example of how to organize a site with A LOT of information on it. They utilizing two top navigation bars: one with all the team logos and one for the general content of the site.  

If you want to read an article that helps explain how to plan a website for consistency and intuitive navigation in more detail, read Claiborne’s article Effective Site Navigation. It is worth checking out if you find yourself to be someone who has a hard time planning a site or if you feel your process of planning isn’t really working for you. The article even provides a helpful section of Dos and Don’ts on website navigation. 

One more important thing keep in mind when making any website — efficiency. Your aim should be to enable users to get to content swiftly, in a logical manner, and with few clicks as possible and remember, stay consistent!

Two articles from .Net’s issue The Ultimate Guide to Web Design contributed to this blog, Plan the Perfect Site and Master Site Navigation by Craig Grannell.