Creative Design for Web and Print

The challenge: Create custom storefront banners for my client, a real estate firm in Chicago. This task was particularly difficult, as I had to not only design attractive banners that conveyed my client’s message, but one of the banners had to be designed to wrap around a flat-screen TV in their window.

This is the storefront before the banners were designed. The unique challenge would be to create a banner that wraps around the TV in the right window.

Some of the problems we initially ran into was deciding on the correct banner material. I chose to print it on a cloth-like material that was light-weight and allows light to still come into the office. This was a big concern for the client, since these windows are their only source of natural light. Other options for material would have been heavy vinyl (that wouldn’t let any light in), or adhesive vinyl (the type that goes on city buses). This would have let plenty of light in, but the print quality would have looked horrible up-close, and the client needed something that could be removed easily. So the cloth material was our best solution.

The Design

The client’s number one goal was to increase foot traffic in their office. Located in the heart of Chicago just blocks from the Trump Tower, their office is in a prime location, being on street level. These banners would be seen by thousands of people as they walk by.

The left window design focuses on their commercial real estate services.

The right window design focuses on their residential real estate services. (Notice the black rectangle in the middle represents the area where the TV would be.)

Below are photos of the final finished product:

The storefront with the new banners installed. Although there is a glare, the signs are still very visible when pedestrians walk by.

The left banner

The right window banner

The view from the inside shows how the banner lets light through.

At the end of the day, the client was extremely happy and the project was a success. Foot traffic increased dramatically in the first week, and these banners will hopefully draw in plenty of business in the coming years.

Whether it’s a design for web or print, one question I’m constantly asking myself is “Will the reader be able to read this?”. This might sound like a dumb question at first, but there’s a lot of factors that will make or break your design when it comes to readability. Understanding some simple basics will ensure that your readers stay focused on what you have to say – without losing their attention.

Before we begin

Let’s talk about readers. Readers are a fickle bunch. You will never get everyone, everywhere, at all times, to read every word you write. It simply will never happen. Most people are too busy and too impatient to stop and read everything. The fact is, only 10% of people read everything you write, 80% read some things, but lose interest easily, and 10% read nothing. The 80% group of readers are who I’m focused on in this article. These are the readers that will decide whether or not to read your design in a split-second after viewing it. And the other 20% you ask? Well, there’s no changing them, so our job is pretty easy when it comes to those readers. Ok, so on to the basics.

Organize information using headlines and subheads.

This is pretty self-explanatory. Your headline should be a larger font than your body text. It should be simple and to-the-point. Your reader should be able to grasp the idea of a section by simply reading the headline. Headlines serve as an attention-getter, pulling your reader in and allowing them to read the text. The more well-written your headline, the greater chance your reader will be drawn to the rest of what you have to say.

Similarly, your subhead should be written the same way, although it can be slightly longer. I personally like to keep the font size significantly smaller than the headline, but larger than the paragraph text. Subheads can be bold or regular in weight – do whatever looks best.

Paragraphs: Font Size, Line Spacing, and Line Length

When styling your main text, here are a few thoughts to keep in mind:

Font size

When determining font sizes, your first question should be “who’s my target audience”? For younger readers, try to keep your paragraph font size smaller. For older readers with poorer eyesight, I tend to increase the font size by a couple points, but still be careful to not make it too large. For print, the default size of most word-processing programs is 12 point text. For web, this is a very normal font size. However, for print I usually go much smaller. Of course, it depends on what font you’re using, but anything between 9 and 11 points will do for most copy-heavy publications.

Line Spacing (leading)

Leading refers to the amount of added vertical space between lines of text. Most word-processing programs set the default leading at 2 points more than the font size. For the most part, the default setting looks fine. However, depending on which font you’re using and how large or small the point size is, you may want to experiment with different sized leading from time-to-time. Bumping up the leading by a couple points can sometimes set your design apart and really make it stand out. Just be careful not to increase the leading too much. Line spacing that is too large will often detract from readability.

Line length

The human eye, at normal reading distances, can only focus on a small area at a time. With long line lengths, the muscles in the eye tend to strain, as they have to move more to follow from the end of a line to the start of the next line. Also, as line length increases, retention decreases, since it’s easier for readers to accidentally skip a line or lose their place. Ideally, keep your columns shorter in width to avoid these problems. There are many studies and opinions on line length, and there isn’t one set answer that will apply for every situation. This article talks about several formulas you can try on your own to determine proper line length. Just remember, balance is key. If you feel uncomfortable reading it, then your line length might be too long or too short.

Keeping in mind, a few simple rules will help your text get noticed and read by more people. In my next article, I hope to get more in-depth about some typesetting do’s and don’ts. Stay tuned!

With almost every design project, there comes a point where you have to choose fonts. With thousands of fonts to choose from, this can be a daunting task. While there are many styles to choose from, fonts are most commonly distinguished from one another by whether they are serif or sans-serif.

Serif fonts are fonts the have a line crossing beyond the “terminal” of a main stroke. A terminal is the ending point of a stroke. Some examples of serif fonts include: Times New Roman, Georgia, and Garamond.

Sans-serif fonts are fonts without serifs. They usually appear more straight and clean-looking. Some examples of sans-serif fonts include: Arial, Helvetica, and Verdana.

Every project has it’s own needs, and figuring out what font looks best depends on the feel of the project. For more modern, technology-based designs, such as a website for a cell phone application development company, a good choice might be sans-serif — since it’s cleaner-looking that serif fonts. On the other hand, a serif font might suit a softer design, like a flyer for an arts-and-crafts store.

Choosing fonts is never easy, but understanding some of the basics can help.

Well, that’s not exactly true. It’s just getting started, really. I’ll be adding more and more samples, writing more blogs, and constantly tweaking everything. So stay tuned and thanks for visiting!