Webmasters can then add content and customize the layout using a web-based interface. While HTML and CSS are used to design the look and feel of a website, images must be created separately. Therefore, graphic design may overlap with web design, since graphic designers often create images for use on the Web.
This just goes to show how often the two professions bleed together and how frequently they get confused. It is true, graphic design can be used in web design, but web design has little place in Graphic Design.
When it comes to the world of print, almost anything goes. The only real limitation is your own creativity and the size of your medium. On the World Wide Web, you must also consider what your viewers use to render the images you create.
Read on to gain a better understanding of the differences between web design and graphic design.
What is Graphic Design?
Graphic Design is closer to traditional art than its kissing cousin, Web Design. But what does a Graphic Designer do? They use their artistic skills to create images and documents used primarily in printed form. Think newspapers, business cards, posters, and fliers.
Graphic Designers require little to no programming knowledge because their images are not intended for websites. This does not mean they cannot be used on websites. Nor does this mean graphic designers will not be used in the creation of a website.
It simply means Graphic Designers need to be more artistically technical than they do technologically savvy.
What is Web Design?
Web Design also uses imagery, but the medium is the world wide web, not print. For this reason, Web Designers still need to be artistic, but their art is limited by the confines of current technology.
Web Designers must know not just what will make the viewer understand their message, but also how the viewer’s browser, computer, and monitor will render that message.
How are they Different?
The biggest difference between graphic and web design is their medium. The rules for print versus the web vary greatly.
Graphic Designs need to say something quickly, clearly and concisely with as much visual impact as possible.
Web Designs need to do the same, but they have many limitations to consider. For example, an image’s file size and resolution will impact the speed and performance of the website it is on.
Graphic Designers use the color mode for print, CMYK. CMYK is the abbreviation of the four inks used in the print process, Cyan, Magenta, Yellow and Key (black). Printers use a layering effect to produce the desired colors.
First, printers lay down Cyan, then Magenta, followed by Yellow and last, but not least, Black. Between each application, the printer gives enough time for the previous ink color to dry.
Web designers use the RGB color mode which does not require the same layering effect to achieve the correct color. The colors are simply mixed together to produce the desired effect.
If you were to use RGB colors in a standard print setup, the colors would not look the same.
Consider the painter. If he mixes the colors first and applies them to the canvas, he receives a very different effect than when he lays down a layer of paint of one color and follows it with a layer of another color.
You can use any font you want in Graphic Design. The fonts used in web design is more limited because the fonts available are determined by the fonts a browser or computer recognizes.
With the onset of new technologies like API based fonts and HTML5, the gap between what can be used in graphic design vs. web design has considerably lessened, but a gap does still exist.
Graphic design images are limited by physical measurements, i.e. inches and centimeters, whereas Web Design images are limited by internal measurements like Pixels and Resolution.
This is important because you can use a picture with any resolution in graphic design as long as its measurements fit the medium. But with Web Design, it is more complicated. You have to ensure no matter the size of the image, the resolution will be high enough for a clear picture, but low enough it can be rendered on any platform.
Another key difference in print graphics versus web graphics is a pretty obvious one. Print graphics do not change, but web graphics are dynamic. They can even be interactive.
Tools and Skill Sets
Graphic designers and web designers use similar tools, but different skill sets to achieve their goals.
Both use picture editing programs like Adobe Photoshop and Illustrator to create their art. But in addition to knowing how to typeset, develop concepts and use marketing materials, web designers also need a base understanding of how programming works.
A web designer’s focus is on the graphics used on a website, as well as the actual layout of the website. A web developer focuses on the actual implementation of the layout and graphics. Still, a web designer should have at least a base understanding of how HTML, CSS, and Frameworks operate as web design vs. web development presents yet another fine line.
How are they the Same?
A web designer can do and often does the same job as a graphic designer. It would be more difficult for a graphic designer to do the same things as a web designer, but that is also not unheard of.
Both professions require the same core ability to use imagery to express an idea. In web design, there is still often a need to print your visuals. Therefore, it is good to have an understanding of graphic design so these visuals do not lose their impact.
As time goes on fewer and fewer people print. In 2015, the average office user printed about 20.54 pages in a day. In 2016 that number dropped to 17.39.
Since the world has started going green, these figures should not come as a surprise. This does mean, however, as time goes by there will be less of a call for graphic designers and more of a call for web designers. That said graphic designers will never be completely obsolete, but maybe it is time for a hybrid profession.
Tips for a Graphic-Web Hybrid World
Use graphic design to make PDF pages of information your viewers may want to print. This will allow you to keep your website operating at its full capacity while still giving your viewers the ability to see beautiful graphic designs when printed.
For branding purposes, use common fonts in graphic designs that will also be used online. This will allow viewers with low-grade tech to see the same thing as someone with high-grade tech.
Create two logos. One based on CMYK color mode and the other on RGB. Doing so will keep your logos will always look great whether in print or on the web.