Graphic Design: Print vs Web

By Paul Schmitt   Posted at  3:13 PM   web design
IT Services Promotional Postcard
Print is not dead or dying. It's not even taking a breather.

I. Print Now or Web Ready?
This week, three jobs rushed out the doors from here at the design desk. Two jobs were web sites and the third was a print job - a pretty good ratio. While I was working on these different jobs, I started thinking about the multiple areas of overlap between print and web based techniques.

At it's heart, Graphic Design for print and web are practically twin brothers. They both look identical on the surface but below that surface layer they are very different people. Very different people who happen to being doing the exact same job: Communication.

Print work, Twin #1, is demanding. It's unforgiving with very little margin for error. Once a typo or a bad image goes to press - it's frickin' permanent. And you, as a designer or a project manager will hear about it. Yet, even in circular ads and for direct mail, print is by far taken much more seriously than any well-designed email ever will be.

Print design produces a solid, authentic and tangible product. Anyone can understand it. No electricity, browser related errors or internet connection needed. Catalogs are much more accessible than search boxes. Art prints beat electronic wallpapers hands down. There's an inherent value to print despite all the premature reports of it's death.

However, the one thing that a static catalog or newspaper cannot do is change.

Web Design, Twin #2, is much more forgiving but several orders more complicated. Why should that be? Aren't each simply communicating a message? Here is where Twin #2's many complications begin...

Once, there was just Microsoft's Internet Explorer, which dominated the internet browser market, and Netscape. Designers in the 1990's had free range to throw scaled-down print graphics online. They were free to do so in anyway they wanted to just so long as they fit into HTML tables.

The results, then, were nearly identical. The code for Explorer and Netscape, at that time, was not so radically different.

HTML5 CSS3 Portfolio Web Site
An HTML5 CSS3 W3C Complaint Cross-browser compatible website. Say that three times fast.

Today, there are dozens of smaller browsers and four mainstream internet browsers - Chrome, Firefox, Safari, Explorer. Add to that two varieties of mobile browsers (phone/tablet) with Mac and PC variants.

In 2014, Explorer users make up between as low as 10%-25% of the market. All of the HTML protocol that was originally written for Explorer in the 90's now only applies in the loosest possible way to a much larger digital landscape.

"Today, all browsers new and old are expected to play by the same rules that were hastily written in a different decade for an increasingly obsolete program."

The most popular browsers today (the oldest of which is Safari written in 2003) use software that operates very differently than the original programmers could have imagined. These browsers display text and graphics in much more stream-lined, effective and efficient way than Explorer does now or did in the 90's.

Designers today live and work in the era of The Browser Wars. Today, all browsers new and old are expected to play by the same rules that were hastily written in a different decade for an increasingly obsolete program.

Browser Popularity 2009 to 2014
Internet browser popularity 2009-2014 as tracked by Stat Counter and chronicled on Wikipedia.

II. HTML Finally Evolves
The good news is that: through robust competition in the browser market, the HTML language has been forced to re-invent several critical aspects of it's own structure with HTML5.

This re-invention of HTML allows for many things including stream-lining audio and video. For example. the <video> allows for a broader usage of Youtube, Vimeo and video applications which were not even considered in the early days of a dial-up Internet.

In those days, downloading a 2Mb extension to view a website would stop a viewer dead in his or her Pennyloafers. Today, with widespread high-speed internet and client-side scripting, it's barely noticeable. HTML5 makes this aspect much more accessible to designers.

Next, and most importantly, in re-considering the current HTML and writing HTML5 the first building blocks of all HTML sites were examined; namely - tables. This brings us to an unavoidable situation and the bad news: Chrome, Firefox, Safari and Explorer each interpret tables differently. That includes table alignment methods, table borders/padding and even how standard image formats are seen inside of tables. This produced an amazing array of possible errors with tables depending on which browser is used.

Since designing tables for just one browser or for just mobile devices is not a viable methodology - finding a better solution became critical. Enter the seldom used <div> tag from HTML4 which is now critical to the under-lying structure of HTML5 sites.

With neatly stacked <div> containers, questionable tables are no longer essential. Dividers (divs) allow a more cross-browser friendly web design to be developed. No special lines of code have to be added to collapse tables and borders or to center text and graphics in the HTML. This method removes unnecessary redundancy and the high probability of misaligned graphics and text within tables.

HTML5 CSS3 Restaurant Web Site
Using modern specs, a site looks the same in Chrome, Firefox, Safari or Explorer.

The are complexities that have to addressed in both print and web based Graphic Design for designers. To say one method is more or less complicated is not a productive line of thought. What is productive to recognize is: access to audiences and target markets is easier today than it has ever been.

The methods to reach them are only a matter of style. Consistency in message, print or web, is all that is important in this context.

Next time, I would like to talk about practical usage of CSS3. There will be some style sheet code examples that mimic Photoshop tricks for shading, shadows and highlights.


Balancing Graphic Design And Illustration

By Paul Schmitt   Posted at  2:58 PM   prints
Ferdinando Ongania Early Venetian Printing Illustrated
This book is part of Archive.org - a collection of rare and important historical books.

Illustration and Graphic Design are thought of as two separate disciplines. This can be the case. They are two separate job descriptions. However, in many important ways the two over-lap. Not only in the document, newspaper, catalog or web site that they appear in but in the purpose that they serve.

And that purpose is simple: relay information is a structured way.

In catalogs, art falls on top of photography with sizes, prices or shipping information. On a website, borders, shadows and artwork shape the borders that photography appears in. It is a technique that is used so much that it is almost invisible.

What about examples of these techniques in another era? We should be able to spot the transitions and archiac techniques much more quickly there.

The goal in 1500 is the same as now: relate important information with a balance of Graphic Design and Illustration.

Ferdinando Ongania's Early Venetian Printing Illustrated, the book above, was originally published in 1895 but covers Italian Renaissance prints and illustration work from roughly 1400 to 1600. Here, there there are is an incredible over-lap of graphic design (text and textual elements) and illustration.

We can see a harmony at work but without the slick gradients, shading layers and glossy styles that are commonplace today. The important thing to remember is that these Classic era designers had the exact same purpose that Designers and Illustrators have today, and no mutually exclusive job titles.

For further reading, Artist and Designer Johnathon Coulthart has a review of individual pages and styles from this book at his blog Feuilleton.


Logo Design

By Paul Schmitt   Posted at  3:03 PM   graphic design 1 comment
Prouduction Company Logo

Logo design can be a tough task! A company's identity, communicated by fonts and artwork, is the most critical part of their business presence in the public eye. Here are a few logos that I've worked on recently.

Retail Logo

Westview Gardens is a small company in Queensland, Australia. I worked with the owner to create a logo that had a universal appeal four customers while underscoring the central part of her business.

Medical Logo

Gene Therapy Cures is a very exciting and relatively new part of medical science. The goal for this logo was to be as professional and succinct as possible.


Direct Mail

By Paul Schmitt   Posted at  1:36 PM   postcard No comments
Direct Mail

Direct mail! Millions of us get it but how much of it is really worth looking at? These designs are meant to be eye-catching and informative. These designs are the ones that get read in that pile of colorful mail we pull out of the mailbox each week.

Being attention grabbing and informative is exactly how to get these direct mail campaigns out there in the public eye and in front of interested parties.

Direct Mail

Would you like to take it further? We also digitally convert these mass mailers into emails for mailing lists. This saves time, effort, the environment and most of all printing and postage costs.

Do you like the look of these cards? Get in touch with my company directly by email and we will work up a campaign aimed directly at your market.

Back to top ↑
Connect with Us

    Popular Posts

©2014 Gargantuan Media |