Graphic Design vs. Web Design: Separate and Not Equal

Share This
Nick Haas
Share

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 might help you on your next project or in the way you approach your design.

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 the years I shifted my focus completely. But it took me awhile to reorient 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 and 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 website 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.

With 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 their changes. 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.

Related Post: 7 Reasons Why Wireframing is Important

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 be 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 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. Some sites to reference if you would like to know more about trends, standards, color, type and usability when designing for the web.

Share This

What are your thoughts?

By signing up you are agreeing to our Privacy Policy.

Comments (16)
  • Everything was correct.

    I’m a graphic designer years ago when I did a shift to Web designing. Graphics and the Web was really different.

    Graphic designing was more of an abstract, putting pieces anywhere you want to achieve the desired result, the more creative, the better.

    But for the Web design, it’s different, the more decoration you put, the more it’ll confuse your visitors, so overwhelming designing has never been an option – Simplicity was. Clear content separation and consistency has always been the major key – not to mention the proper architecture behind it when people who will not be able to see the content visits your web site (e.g., blind users or color blinded ones).

  • Great post, I always consider web and graphic design to be different animals!

  • I do mini site design for a living for the past 5 years and main thing that differentiates web design from graphic design is the type of response you’re looking for.

    On the web you’re most likely after an immediate action while this isn’t really the point of graphic design…

    Just my two cents,
    Alex

  • I think graphic designers are not web designers. The Web is so different that usually requires a very different process of work.
    If you want to bring it all under one roof, then I think the correct term is “Communication Designer”.
    In web design you need the skills of a Graphic Designer. But that’s not the whole story. 20% of the process of Web design is Graphics design. The other 80% is Information Architecture, Usability, Interaction Design, Experience Design, etc …Thanks for sharing.

  • Thanks Scott. Glad you found the post insightful!

  • Theres a huge differnce between web and graphic design. Im a web designer and theres obviouslt going to be people that disagree but web design is a lot harder. CSS, UX, CMS, RWD, all things that a web designer is now supposed to have a really good grasp on.

    Rather than wow, good web design about is about ROI.

  • Interesting article on web usability and great links!

    Thanks!

  • Nice blog. Your post is really an eye opener. Thanks.

  • It is necessary to read this above information..we come across so many useful points ion graphic and web design ..that is too much useful.

  • dfdf

  • Graphic design holds great position of importance along with website designing although both processes are different with each other. Graphics is more associated with the creative part whereas website design with the coding side. Thanks!

    • I want a short term course for around 3 months. What should I prefer graphics or web ?

  • Hi Nick, thanks for explaining the difference between graphic design & web design. Really very helpful. Awaiting for more useful blogs like this.

    • Mark, glad you found it useful.

  • Thank you for sharing such a great article. Really it’s giving clear points.

    Recently I have seen one forum thread, there one guy asked “Which aspects of Graphic Design are related to Web Design?” From this, he wants to save his time in the learning process by skipping the essential principles of design which are not related to web design.

    This article can help him.

    • Nathan, send along to anyone you think can benefit from the article. Glad you enjoyed it.

 
Join over 16,000 people who receive bi-weekly web marketing tips.

By signing up you are agreeing to our Privacy Policy.

Share This