Tweet

Graphic Design vs. Web Design: Separate and Not Equal by Nick Haas

Guest post by: Andy Crestodina

Article Overview: As designers, it is our job to communicate effectively in both the print and web mediums, and learn that they are separate and not equal. Understanding the distinct differences between being a graphic designer and a web designer in 2010 might help you on your next project or in the way you approach your design.

Graphic Design vs. Web Design: Separate and Not Equal by Nick Haas

As designers, it is our job to communicate effectively in both the print and web mediums, and learn that they are separate and not equal. Understanding the distinct differences between being a graphic designer and a web designer in 2010 might help you on your next project or in the way you approach your design.

Eight years ago I started out as a graphic designer working for an agency that dabbled in web. I was able to begin working solely on web design projects and over the course of these eight years I shifted my focus completely. But it took me some time to re-orient my way of thinking when it came to what I was producing as a web designer. And while I’m still learning, here are some main principles that I find especially important/helpful/relevant.

Forget Linear Movement When designing for the web you must understand the habits of your audience and how they move through a website. These tendencies should then drive your decisions on the design. In print, items on the page do not interact with each other. On the web, you must expect your audience to jump from page to page, scanning content for specific words, phrases, or icons that inform their decisions on where to go next.

On the web, users can start from any page and move around your site. They then interact with the information. As opposed to print which is generally more linear with most people starting at the beginning of magazine or book. Planning for this interaction and non linear movement will produce better results for your site. You must allow your designs to be fluid in nature, not fixed.

Plan for growth A common tendency of graphic designers designing for the web is to plan improperly for growth. The designer needs to understand that over time certain elements of the website will change and grow. Allowing for this in the design is crucial to minimize update costs. An example of this planning is the use of vertical navigation versus horizontal navigation.

With horizontal navigation, you are limited by the number of links that can be displayed across the interface left to right, whereas vertical navigation can continue to grow down the page. Horizontal navigation is good to use when the number of links are relatively fixed and will be over the site’s lifespan. But if the website is larger in scale, for example, an e-commerce site, you might want to use left-side vertical navigation to ensure that more pages and products can be added with little impact to the design.

This principle is especially true when designing for content managed websites. In content managed websites content will be updated constantly usually by non technical types who need be confident that when they add/delete content, the website design will accommodate. Plan for growth in the navigation, the content areas, the footer, and anywhere else that will allow for ease of updates. You and your client will appreciate this within a few weeks of the launch.

Put your usability hat on When we conduct usability studies, we often find users blame themselves for getting lost or not knowing what to do, when the study actually points to a particular design flaw as the cause. Usability studies are focused on a select group of users testing certain website features at various stages before launch in order for us to gain further insight if the decisions we made in the design work as intended.

So don’t let yourself get caught up in cute tricks or overdesigned elements. Your site’s success will be measured by how well your users get what they need, not by the implementation of the most unusable but cool grungy navigation ever seen.

Users expect a certain consistency on the web, and they expect that your design will follow these standards. The fact that users control elements, click to find content, search for content, and create a multitude of options to get information means that it is essential for things to look very consistent across your site. If you have call to action items , such as “click here” or “sign up now”, that are meant to deliver conversions, they should repeat the same graphic elements or something similar.

It is equally important that elements’ appearance indicate their functions. This means that if you have navigation on the site, it should, well, look like navigation. If you have “add to cart” buttons they should look like buttons and add items to your cart. As users interact with your site, they need to know what to do and where to go no matter where they find themselves.

Talk to your developers often As graphic or web designers we can work in a vacuum. It is easy to not consider if and how something should be done, if it will cause issues when the site is built, or if it can be improved upon in development. Talk to your developer or development team often to ensure what you are designing or presenting to a client makes sense.

Often, a client sees a design before a developer has a chance to review it, it gets approved, and then issues arise afterwards regarding the implementation – either something can’t be built or something could have been enhanced for little or no budget impact. Developers are often our best assets when it comes to ensuring the site you are designing can be built with efficiency. They often can improve or notice things when it comes to usability/accessibility. And they always appreciate that you shared your design with them up front.

I often relate this relationship to that of a graphic designer and a printer. You would not just print a run of brochures without consulting your printer first, would you? You would investigate costs, enhancements to the design and improvements to your production, etc. A similar relationship applies here.

Embrace the medium As a graphic designer there were things that drove me batty when I transitioned into web design: PMS to web color conversion, using standard web fonts versus custom fonts, image optimization, etc. Over the years I have learned to embrace standard practices as these are not set up for us designers but for our users. These standards provide the road map in designing solutions that alleviate issues common to all web users.

Some common issues are screen resolution/color differences, content readability, download times and seamless user interactions. By embracing the medium and these standard practices, you will make a user’s experience more worthwhile.

Some things you need to embrace:

1. There is no exact color matching on the web:
   
   Web color is rendered in RGB: Red, green, blue light used on screens to render your images. Print Color is rendered CMYK or a Pantone color. CMYK is Cyan, Magenta, Yellow & Black ink that make up a single color image. A Pantone color is a specific color number given to a printer to produce. These ink colors printers will use to output your images to paper. In order to be as consistent as possible across the web, you need to pick the RGB equivalent of your print CMYK values or Pantone color. But even then your colors may render differently screen to screen due to individual user settings, age of the monitor or even quality of the construction. It’s just how it is.
   
   
2. Web fonts consist of a set of standard serif and sans serif fonts that all users can render on their machines. The fonts come pre-loaded on every machine made in the world.
3. Follow common web design standards. Users spend most of their time on other people’s websites, not yours. If you design something too different, it will most likely confuse your users.

I hope that these main principles that I find especially important/helpful/relevant assist you in your next project or help with your transition into web design.

Related Articles
  Graphic designing vs. Web designing
  When Graphic Design Takes Over Web Design
  Get Graphic Design done for your Website
  How Has Website Design Influenced the Graphic Design Industry?
  Role of Graphic Design in a Website
  Enhance Your Web Design With Graphic Design Services
  Essential Skills in Website Design and Graphic Design
  Why Graphic Design is Necessary in Your Web Design?
  Why You Should Use Graphic Templates
  Improve the Visual Appeal of Your Website Through Graphic Design
  A Good Mascot Design leads to Effective Advertising
  Common Mistakes by Graphic Designers in Web Design
  See The Real Difference With Customized Graphic Designs
  How can Graphic Design be used for Establishing a Positive Business Impression?
  Why You Want Your Design Layout to Look Like CRAP!
  5 Strategies for Working with Website Designers and Graphic Designers
  Graphic Design Goal
  How to Choose a Web Designer
  Home-based business: Graphic Design
  Ways to Design Business Cards

Article Tags: development, graphic design, usability, web design



Related Forum Posts
Fashion Designers Needed - My name is Blake and I am also starting a clothing line (to some extent)and I think that maybe I could help us both. I am a Graphic Design major from the University of Central Oklahoma and I would like to provide you with some ideas and designs...and all I ask in return is some feedback (positive or negative). If this sounds beneficial please contact me and describe what it is specifically would help you.
Re: Top Banner Help - [quote:35xjo6uq]Good job on the banners BennyBoy![/quote:35xjo6uq] No probs:) I agree Online Marketing and Publicity Search Engine Optimization - Web Design and Programming Blogging also may be... Web Design Tutorials Looking to Hire - jobs section Interesting Articles / websites
Re: what position to request? - Hi Michael, Great suggestion from David, or you could try something around a design consultancy, How about Website Design Consultant, Design and Development Manager, Website Support and Development Manager or maybe Internet Business Development Consultant. Ultimately whatever you are comfortable with and good luck for the future, Mal.
Your Riskiest Business Decision - Greetings All I was just thinking about my own Graphic Design business and how I've made risky decisions in the past. One of these decisions involved taking on a long term, full time contract at the expense of losing new and existing clients for the next 2 years, as well as having to satisfy existing clients on the weekends. Would the contract kill my entire freelance business after 2 years? Would it be worth it? As I'm nearing the end of the 2 year contract and I would have to say that it's paid off. This is because I managed to run my own business on the side (weekends) to retain most of my existing clients so when/if I decide to go back to full time freelancing I won't have to start from the beginning again. In saying this I would like to know of any risky business decisions that you have made and whether it paid off or not? My 2 year contract decision did pay off but I also lost two good clients because I did not have the time to efficiently satisfy their requests.
Elevator Pitch in 10 Words - "Winning Business Design For Aspiring Entrepreneurs Based On Their Idea"


Share this article with your friends. Fund someone's dream.

Leave a comment below or share on the left and you'll help support entrepreneurs in Africa through our partnership with Kiva. Over $50,000 raised and counting - Please keep sharing! Learn more.

Newsletter

Get advice & tips from famous business
owners, new articles by entrepreneur
experts, my latest website updates, &
special sneak peaks at what's to come!

Name:
Email:

Popular Articles

3 Key Factors For Raising Capital

Do You Pretend To Listen To People?

Creating a Better Place to Work

Suggestions

Email us your ideas on how to make our
website more valuable! Thank you Sharon
from Toronto Salsa Lessons / Classes for
your suggestions to make the newsletter
look like the website and profile younger
entrepreneurs like Jennifer Lopez.