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:
- 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. - 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.
- 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.
