In this article we will talk about Graphic design basics. However, before we start, there are a few things to mention. Graphic design is a very wide domain and getting a job as a graphic designer is not an easy task. Besides the many skills you will have to learn, getting a job on the web also requires personal attributes such as resistance to stress, creativity and self-motivation. But before your personal skills will be evaluated, the practical ones are the first to be looked at; and the most important, obviously. Therefore today we start a short series of articles in which I will talk about the basics of graphic design. Today we review the most popular elements of the industry.
The main job of a graphic designer is to design visual elements for the web and print, such as layouts for websites (which are most of the time “translated” into real websites by the web designers), posters, brochures, flyers or advertising campaigns (both in web and offline).
Table of Contents:
- Graphic Design Basics: The Elements
- Graphic Design Principles
- Graphic Design Composition
- Most Common Visual Content Mistakes and How To Fix Them
- Difference between Print and Web Design
Lesson 1 of Graphic Design Basics: The Elements
There are in total six elements of a design which you need to be aware of: the line, the shape, the color, the texture, the value and the space.
1. The line
The line is usually present in every design, even if it is a solid border of 1px or a dotted one of 5px. Every website has lines, but the minimalistic style which became more popular in the past couple of years tries to erase the lines from the layouts, or at least to decrease the use of them.
The lines can be long, red, straight, thin, blue, dashed, short, black or curved, they are all into the same category. They are most of the time used for delimitation between different sections of a design, or are used to direct a viewer’s vision in a specific direction.
The lines can create different effects and visual impact. While a thick, bold line draws attention because of its visual power, the thin lines tend to go the other way. The color has an impact too, dark colors are easier to see and draw more attention than light or pale colors.
And this is not all. The style of a line can also influence the way the user sees it. This style can easily be defined through CSS and can be solid, dotted and dashed among others. The solid lines have a different impact than the dotted ones, because they are more imposing.
The minimalistic style which I’ve talked about earlier uses either less solid lines or more curved lines, because they give a dynamic and fluid look to a design, which is also the purpose of the style. They indicate energy, keep the user interested and, if combined with illustration, are very powerful to the human eye.
Many years ago solid lines were very popular because they determined the style of the design: rigid, solid and organized. The web changed in the past years and this style is not very popular anymore, especially for designers’ portfolios and other pages with a strong need of a personal touch.
2. The shape
The shape, or the form, is the second most used element of a web design. They are actually lines combined in different shapes. The forms are still popular and this is because if there is something that needs to stand out, forms are one of the ways to do it. There can be circles, squares, rectangles, triangles or any other abstract shape; most of the designs include at least one of these. Minimalistic designs use it a lot, because they are often based on illustrations and drawings. The old style of designing websites included shapes too, so they remained popular throughout the time and will probably continue being like that.
Like lines, shapes are also associated by the human mind with different movements. For example, circles are associated with movement and nature, while squares are often seen as structured, basic designs. Just like with the lines, the color, style, background or texture of a shape can totally change the viewer’s perception.
The textures were not very popular a couple of years ago, but they tend to become more and more used. They replaced (or compete with, if we can call it a competition) the single-colored backgrounds. Textures can look similar to solid background colors, but if they are analyzed closer, small but effective differences can be noticed.
Texture styles include paper, stone, concrete, brick, fabric and natural elements, among flat or smooth colors. Textures can also be subtle or pronounced and can be used sparingly or liberally. They work with pretty much everything. Even if they do not seem important, the textures can totally change a website and offer a totally different visual impact.
The color may even be the most important element of a design, because it offers the most powerful visual impact at a single glance. Color is obvious and does not need basic graphic skills to be noticed. While lines and shapes mean the same thing as in the reality, only at a little more profound level, the color means exactly the same thing as in the nature. Color creates emotions – red is passionate, blue is calm, green is natural. Even if you don’t realize this, colors have a clear effect on your mind.
Studies have been done and a person who lives in a red environment has a higher heartbeat and pulse than a person living in a blue environment. The human brain sees this and influences the rest of the body.
Therefore color theory is very important to know, because not many designers can call themselves experts in this field. Being a master of colors might make the difference between a good design and a stunning one.
I am not saying you have to know all of them, but knowing how hue, saturation, shade, tint, tone or chroma work together is crucial for a graphic designer.
I did not specify value above, even if it is closely related to color, because value is more general and represents how dark or light a design is. Value has a lot to do with mood too, only at a more profound level. Understanding colors will take you close to perfection, but knowing how value works will take you beyond this. Lighter designs offer a different impact and feeling than the dark ones and you need an expert eye to notice differences and decide which one is the best.
The space and how it is used is crucially important in design. Lately the “white space” (also called negative space) became used widely because it allows the human eye to read easier. For whoever is not familiar with the term “white space”, it does not mean precisely space filled with white, but every area of the design which is only filled with the background color. You can see several examples below to better understand the concept.
If there is a lot of negative space in your web design, it offers light and an open feeling. The lack of white space will turn your design into an old-fashioned, cluttered one. The space has also a lot to do with how the design is perceived by the human eye.
Even if I said the color is maybe the most important element of a design, the space is definitely present in the top, because it is also very easy to notice by the untrained eye. It can turn a design to your advantage and get the best out of your layout.
These are the basic elements a beginner graphic designer should know about. Having this knowledge will allow you to think more user-focused and design with a better style. However, this is not everything. A couple of more articles will complete this series and the following one, due to come very soon, will talk about the principles of design.
This article was just a list of the basic elements of a graphic designer. If you wish to learn more about them, I’ve gathered the following sources for you from the internet. Reading them entirely (and maybe more times) will give you a better understanding of the basic design process.
How to Actually Use Negative Space as a Design Element on 1stWebDesigner
The Colour Wheel: Using Colour Theory In Design on eColourPrint
The Meaning of Lines on Van SEO Design
The Meaning of Shapes on Van SEO Design
Shape – Basic Element of a Design on About.com
Basic Color Theory on Color Matters
Color Theory on Wikipedia
A Guide to CSS Colors in Web Design on Six Revisions
Let’s go to the second part of basics.
Graphic Design Principles
In the first part we covered the basic elements of graphic design with shapes, lines, textures and color among others. In this section we will go a bit more in-depth and will take a look at the principles of design, which are very important to know because they’re what separate the good designers from the amazing designers. Some of the principles we’ll cover today are applied unconsciously, but they definitely exist and we will show you examples from the web to illustrate the concepts.
Balance is how the elements of a design are distributed throughout a layout. If the balance is good, then stability is assured, although lately many designers go for unbalanced designs because they are dynamic and offer a totally different perspective. The personal pages are the most suitable for slightly off-balanced layouts, and you will see some examples soon.
To be able to notice what kind of balance a website has, you need to know the three types of balance: symmetrical, asymmetrical and radial. The first one takes place when both sides of a design are the same in shape, lines, texture and so on. Because this is the way we design today, this happens most of the time along a vertical axis, so when we talk about the two sides of a design, we talk about left and right. There are also examples along the horizontal axis and sometimes even along both of them, but these are rare. The symmetrical designs are pretty much most of the websites on the internet until 5 years ago.
The second type of balance occurs when the two sides of a website do not look like each other, but still have elements that are similar. Although it is called asymmetrical, they still provide some symmetry, like the first type of balance, only at a lower level. Asymmetrical websites are becomimg more and more popular nowadays (see WordPress layouts with content on one side and sidebar on the other).
The radius balance takes place when design elements are placed in a circular pattern. They give a sense of movement, dynamism, but it is not seen very often on the internet, because even the most experienced designers have problems laying out such a design.
As said earlier, balance is achieved through shapes, colors, textures, lines and the other elements we’ve talked about in the first episode.
2. Dominance and Priority
These two principles are together because they are strongly linked. They both have a lot to do with the user experience because a lack of priority and element dominance can be confusing. The dominance level is the one which prioritizes the importance of different elements, such as menu, logo, content or footer. Sure, this is also done by playing with the font and size, but let’s go a bit deeper and see what dominance and priority mean.
There are three main levels of priority. We have the headline or call to action, which comes as a primary element; then we have the secondary elements like images needed to make a point or, most of the time, the navigation. They are obviously not the most important element of a website, but you can’t do it without them either. The tertiary elements are information like footer links, meta information on blogs or different elements, and a website can most of the time exist without them. However, they are used frquently because they complete the design in different ways, either by offering more information, or by completing the layout with some elements.
Proportion is important and represents the scale of elements compared to each other. They have a strong effect on the user and are also linked with the previous principle. It is no surprise that larger elements have a stronger impact on the user than the small ones. Dominance, priority and proportion work together to assure the user sees the information properly on a website. Having a larger font in the footer than in the content is a mistake because it does not respect these three principles.
This is another important principle not only of design, but also of photography and any other visual art. I don’t think we need to go too deep into this, because everybody knows what contrast means. Having enough contrast between elements makes sure that some of them stand out more than others. If designers wish to blend elements together, they do it by having minimal contrast between them. If the contrast is high, the elements are distinct from each other.
If balance is created through shapes and lines, the contrast can be created through color. However, lately the contrast has also been changed through typography and texture, so this becomes more and more popular. Having perfect typography can help you achieve not only the perfect contrast, but also proportion, dominance and priority. It is easy to see that the last three concepts we’ve talked about are slightly linked to each other in some ways. If we would talk a bit more general about this whole topic, we would be able to put all of them into the same paragraph.
This might be a new one for you. The rhythm of the page is the principle that makes the human eye move from one element to another. It ensures the flow of the eye and in which order users should see the elements. Now this is a difficult one to make, because everybody has their own way of looking at a website and making all of them do it the same way might be too overwhelming.
There are two types of rhythms: the fluid and the progressive. The first one is a variation and the best example is the movement of water, which flows in the same direction basically, but has a lot of variation in how it moves. The progressive rhythm occurs when there is a clear sequence on how the eye should move between elements.
6. Harmony and Unity
The last principle of design wants to ensure that even if all the principles above are used properly, it is still impossible to create a stunning design without harmony and unity, and this is quite often seen in real life. We often hear of rich people who have everything they want, but lack harmony and unity in their lives. It is the same rule in design. If all these elements work together properly, then you’ve achieved what we call unity. Only placing all these elements on a page without linking them to each other does not create a design, but a page with a bunch of elements. If the elements complement each other and the website is easy to the eye and offers a good user experience, then the work you’ve done is more or less finished.
There is no really need for an example here, we all know that websites with harmony and unity can be spotted all over the place; think of a website that you like a lot and that you always remember. That’s probably a website that has harmony and unity.
The second article of the series wraps up the process of analyzing the very basic principles of design you really need to know about. After reading the first two articles you pretty much have most of the knowledge you need to start designing your own layout, but wait a bit more. The third and last article of the series comes soon and will cover the basics of composition such as focal point, grid theory, gestalt laws and others which can also be used for products like magazines, flyers or brochures.
Read more in-depth
If this article only satisfied a bit of your curiosity, then I’ve gathered for you few other sources where you can read more about the basic principles of design.
Web Design Symmetry and Asymmetry on 1stwebdesigner.com
How to Use Size, Scale and Proportion in Design on Van SEO Design
Unity in Design on Van SEO Design
Developing Visual Rhythm in Web Design on Tynpanus
Principles of Design: Contrast on Sitepoint
Dominance on Van SEO Design
The third section of this guide will be dedicated to the graphic design composition.
Graphic Design Composition
The second was about the Principles of Graphic Design and we took a look at concepts such as Balance, Dominance, Contrast and Harmony. Today we go a bit more in-depth with the last episode and talk about the composition and its basic elements.
1. Single Visual
This composition is where a single image is used for the design. This means the image is usually powerful, creates an impact and the whole design is built on it. Examples of single visual pages include landing pages, but this is more popular in print than in web.
The single visual composition is one of the easiest to achieve, although you need to carefully select the image, otherwise it won’t have the desired effect. The main principle behind this pattern is to make sure the typography and the other design elements reinforce the visual element and do not compete with it. There has to be a clear definition over which one is more important and in this case the image, illustration or graphic element used have to be the most powerful.
2. The Golden Ratio
The Golden Ration, which is also known as the Fibonacci Spiral or Phi, is around 1:1.618. The Fibonacci Spiral is found all over the world in different things and the web is no exception. It is a good idea to place the elements into a website along the lines of the Spiral, because this is the way the human eye works. Managing to use the Golden Ratio properly will bring the focus of the visitors onto specific things you wish to emphasize.
3. Focal Point
This is another important one because the focal point is the one who gives the viewers something to look at. The focal point adds a more specific idea to the design and acts as a starting point for most of the visitors. The focal point can be represented through simple typography, a button, illustration, a picture or any other element. It is totally up to the designers which is the way he wants to create a focal point through.
The focal point has to be in focus and has to be the first element a viewer sees when he enters the page (especially for the first time). However, making it too important and visible will break the balance of the layout. Keep the focal point within your site’s goal and make the purpose of the page be shown through it. For example, having a call to action button is a focal point, because that is the final action you want the user to take on your page.
4. Grid design
This should not be a new one for you. Grid theory is maybe the most popular element of a composition, because we do it all the time even without realizing. Grids add structure to a design and are used to hold a good proportion among the elements on the page. You can find lots of grid frameworks on the internet, which are free to download and build on, and I actually recommend you to use them if you are a beginner in this domain. Working from the beginning with grids will make you feel comfortable with this approach and this is good for your layouts.
Grids do not have to be rigid all the time, they can also be subtle, but if you go for this option, then make sure the design will still be clean and refined before the delivery. When working with grids it is always a good idea to ask feedback from the ones around you, because working for hours long with a grid framework in front of you will probably make your eyes not see small mistakes that need adjustments.
5. Gestalt Laws
When I learned this principle in school I was amazed by the difference it made in my designs. The laws are the result of the human visual perception of things, including websites and elements. The laws are created by the way different elements impact the viewer.
There are five principles Gestalt Laws: closure, similarity, continuation, alignment and proximity.
Shortly explained, the law of closure says we are accustomed to close things in our imagination that are not really closed. A good example is a near circle which you draw only on 330°. The human brain will perceive it as a whole, completed circle. The law of proximity shows we tend to group objects that are closer to each other, while the law of similarity emphasizes the same thing, only that we group things that have the same color, shape or texture. The law of continuation emphasizes that objects will be grouped as a whole if they are co-linear or follow a specific direction, while the last rule, the one of alignment, shows that objects are aligned based on their edges (very popular pattern), or based on their centerlines. The objects can also overlap each other.
There are actually more Gestalt Laws, but not all of them are important for designers. At the end of the article you can find a link with all the laws and you can learn more about each one of them.
6. The “Z” and “F” Layout
The so-called “Z” layout is based on the normal movement of the human eye. As the name says, most of the people who’ve been eye-tracked look at a webpage in a Z shape, meaning they start in the upper left corner and finish in the bottom right one. Managing to align all the objects on a home page along this shape will definitely provide better results and will make your design more efficient.
There is another type of layout as well, shaped as an F. This means users read the first line and then continue to read the second, continuing like that in a specific order.
These are the most important principles of design and by having a strong knowledge of each one of them your layouts will not only look better, but will also offer a better user experience. Creating good interfaces for the user will make them keep your page in mind and, if you get used to working with these principles, at some point in time it will even get normal and logic.
Sure, there is much more knowledge to get about all these laws, but this knowledge comes along with the experience and you can’t really get it only from books, but by practicing. By looking back at all these three articles you should already have enough knowledge of the basic elements of a graphic design and I really hope that if you are a beginner, this series of articles made you think more seriously about a graphic design career.
The Gestalt Psychology on Wikipedia
The Gestalt Principle on Tutsplus
Grid Theory on Design Festival
Grid Design Basics on Opera Developers
The Golden Ratio in Web Design on Tutsplus
Golden Ration on Wikipedia
We will finish this article with the most common content mistakes and how to fix them. This is really important as people are visual creatures. Ready? Alright.
Most Common Visual Content Mistakes and How To Fix Them
By nature, people are visual creatures and we’re naturally attracted to images, especially those containing people. Marketers have found out long ago that using striking imagery accompanied with smart copy can affect people and their behaviour towards products and brands.
Exponential growth of mobile devices with cameras empowered people to create more visual content and share it in seconds on their social profiles or via text or email. In this article I will identify the most common visual content mistakes and show you how to leverage this influential content marketing to achieve your business goals.
What is visual content and why is it the future of the content?
What is visual content you may ask in the first place and what is its difference from other forms of content. Let’s define it first.
Visual content is mostly used in marketing and gathers different forms of content marketing based on visual elements.
Visual content marketing encompasses the use of:
- Images (Instagram, Pinterest, Tumblr)
- Infographics (Infogram, Visually)
- Slides (SlideShare, Speaker Deck)
- Comics (The Oatmeal)
- Videos (YouTube, Vimeo)
- Memes (9gag, Clients from Hell)
- Visual note taking hand drawn videos (TED-Ed)
Popular social media channels like Snapchat, YouTube, Facebook, Twitter, Instagram, Pinterest, Tumblr, and Vine are great examples of distribution channels in visual content marketing strategies.
What makes visual content so important and demanded? Why is it a “thing” in 2015?
In the case of reading, our brain decodes visual information 60,000X faster than text. Visuals are perceived faster and can evoke much stronger emotions when the receiver sees the content.
- Information overload. There is more information created in one year than it was created in thousand of years prior now. We’re drowning into the ocean of text based content.
- Life pace is increasing and rapid lifestyle is shaping our future as well as the way we read, learn, and enjoy. People don’t have time to read and skimming as well as scanning have become the norm in many industries.
- Virality, and easy share-ability. Think of the exponential growth of Pinterest and Tumblr, which are purely visual based. Images are easily shared and received much better than plain text.
To back up these statements look at the data gathered by MDG Advertising.
“94% more total views on average are attracted by content containing compelling images than content without images.”
Most Common Visual Content Mistakes
It’s alright to make mistakes, it happens to the best of us, but doing the same thing over and over again expecting different results is stupid. Below are the most common mistakes brands, marketers, and designers commit and potential fixes you can implement.
1. Too Busy
Once designing a poster, product announcement, or infographic, we get so excited that we basically put everything that comes to our mind just because we think it will be valuable for the consumer. Then, we generally create an information-rich visual piece, but we end up with a visual mess that doesn’t have a clear message, priority, or the next step.
Fix: Provide a clear next step
Simply talking to your audience is not enough. There has to be a desired outcome of the visual content you’re creating. If it is an invitation to an event, provide the call to action, a button or a link that user can navigate to fill in more data and sign up. Visual content without clear call to action is a waste of time and money, yes, you might get some shares and likes but these do not contribute to the long-term relationship building and you can simply lose a fan without capturing their data for future approaches.
Pro tip: have only one clear call to action that is prominent in size, color and contrast.
2. Lack of strategy
This is what brands and inexperienced marketers do all the time, “let’s get likes and shares and it will be good”. No. There is a full cycle of sales funnel included: grabbing attention, increasing awareness, providing value, capturing lead information, interacting, providing even more value, gaining trust and loyalty and eventually selling. You need to have a defined strategy for every single step including user research, competitor analysis and market trends.
Fix: Know your end goal
Start out with defining clear business objectives and desired outcome. After that make sure you get to know the audience you are serving, their needs, and desires. Then see where these two worlds collide and the convergence will be your strategy backbone where you will base all your communication and visuals on.
3. Designing one format and using it across different mediums
One size simply doesn’t fit all. Surprisingly social networks are not designed by some general guidelines that apply to everything. You need to study each social media platform to get familiar with different constraints when it comes to image formatting.
Designing once and distributing your visual content across various platforms will lead into the next mistake on this list – distorted, cropped incorrectly, and low quality image. Check out this guide to the most popular social network image sizes guide.
Fix: Have templates ready and re-use
Once you are familiar with platform constrains and formats, you can start creating simple templates,which can be easily re-used in the future rather than creating everything from scratch over and over again for each of these, and simply adapt your content to fit these templates.
4. Image is low quality and/or not appealing
Quality over quantity is probably used everywhere you go but it is true. For every visual content campaign make quality your top priority. People might not notice details you put into your work but they will definitely sense your effort and hard work which will lead to better engagement, more shares, and easier tribe building process.
Fix: Follow brand and social network guidelines
To establish certain quality standards, work with your designer on brand guidelines defining what fonts to use, colors, language, image types, spacing etc. Consistently keeping high quality will turn into more fans and followers who dig your style and can recognize you from a distance. Check out these guidelines by Heidi Cohen as a starting point for visual content marketing.
5. Don’t forget the context
Always think of the context how your content will be viewed including device, place, and even demographics. For example, Instagram is only a mobile based social network with over 300 million users. There is a way to show photos on desktop device but creating and consuming content mostly happens on mobile devices. Consider these constraints when planning your next visual content campaign.
Fix: Analyse where, how, and who will be seeing your content
If you are targeting teenagers make sure you don’t try to reach them in wrong places, like Facebook for example, where teenagers are quickly abandoning the platform. Think of where the cool kids hang out, Snapchat, Instagram and act upon these facts and challenges.
Burger King’s Biggest Virtual Burger On Instagram
A great example is Burger King France‘s campaign of the biggest virtual burger on Instagram that was not only a brilliant idea in terms of environment and execution but also in brand awareness and engagement of certain age groups -in this case, teenagers, as they are the active ones on Instagram.
To celebrate the launch of their Instagram account, Burger King France created the world’s biggest virtual burger by posting over 90 pictures of burger parts which create the illusion of a giant Whopper. Brilliant!
This Ad Has a Secret Anti-Abuse Message That Only Kids Can See
Other great example of smart visual content implementation was done by a Spanish organization called the Aid to Children and Adolescents at Risk Foundation. In order to provide abused children with a safe way to reach out for help they have created an ad that displays a different message for adults and children at the same time. Play the video to find out how.
7. Leave your ego at home, you’re not designing for yourself
Just because you like it doesn’t mean it should be there. One of the most common mistakes we all tend to do when working for others is to judge everything by our personal taste. Get into the shoes of the brand viewer to better understand why, how, and what has to be designed to appeal to your campaign receiver. This gets especially hard when anyone in the team has no one close to the target audience to give a genuine point of view. This is when problems arise and people start fighting over their personal taste and preferences. Simple solution is to leave your ego at home.
Fix: Ask your audience
Simply ask your audience many questions to discover what they like, dislike, what and how they share content with their friends and try to pick out their brains if you get a chance to chat with them closely. Another trick is to analyse data, figure out what has been shared the most, what content is most shared by similar brands and your competitors, by the demographic you are targeting and act upon the data.
8. Lack of consistency
Brand loyalty is not shaped in a day or a week, it takes time for people to get to know your brand better, to better understand values and vision you stand for. Only consistent delivery of high-quality visual content and providing value will take you to the next level of customer relationship.
“It’s not what we do once in a while that shapes our lives. It’s what we do consistently.” ― Anthony Robbins
Another common mistake brands perform is inconsistency. Make sure to avoid different graphic styles, language and topics to stay relevant to your audience. Sometimes that means sacrificing some brilliant and potentially marketable ideas.
Fix: Stay consistent and identifiable
Neil Patel is a content marketing rockstar. Just because he has been working consistently on his personal brand for years and now creates highly anticipated content he gets his content shared bringing in new business opportunities. Neil has established a certain style of visually pleasing guides that lay his knowledge in an easy to digest way. A brilliant strategy to re-purpose your content and turn it into visual guides that are easily identifiable and highly shareable.
9. Thinking short-term
Yes Christmas, Easter, New Year are great marketing opportunities but they don’t really create long-term brand value. You get engagement for these special occasions. Tons of views and shares just because it is relevant at a time but then suddenly your target audience freezes up and stops sharing your visual content is the worst you can do to hurt your brand. You should really get down to the roots of your business and, as in mistake 2 fix, get clear about your business goals, set clear values, mission and vision statements so you are getting closer to your ultimate goal rather than getting low hanging fruits.
Fix: Employ storytelling and long-term value creation
Perfect example of storytelling and long-term value creation in visual content is Nike. With their iconic “Just do it.” and “Find your greatness.” campaigns which keeps inspiring people despite the fact that it has been used a long time. These topics are still relevant whether it’s Christmas or Easter.
The legendary University of Oregon track and field coach, and Nike co-founder, Bill Bowerman said, “If you have a body, you are an athlete.”
10. Ignoring user generated content
Internet in 2015 has empowered humanity to create more content than ever before. Brands ignoring their customers content are missing out on genuine and highly relatable visual content campaigns that directly talk to their fans in their own language.
Fix: Utilise fan generated content
It’s easier than ever to monitor your brand with tools like Google Alerts, SumAll, Mention and react to these mentions. Most important thing here is to put that support and love your customers show into creating more genuine and closer relationships. Once you start noticing and appreciating fan support people become evangelists of your brand that becomes the ultimate promotion tool.
Now that we have gone trough the chapters above, we need to bridge the gap between print and web design. Let’s take a look at this in the following section.
Difference between Print and Web Design
It’s becoming more and more common for modern-day graphic designers to take on more than one role. In the area of design, many have to be familiar with both print design and web design, which doesn’t sound like a hard task. However, don’t be fooled into thinking they are essentially the same thing; the truth is they are extremely different and any designer who focuses on one sector will more than likely have difficulty becoming comfortable in the other.
We can take myself as an example: I am a print designer that can whip up a business card or flier for you in a few hours. My clients almost always ask me for help with web design and I found myself having to turn it down constantly. Eventually I decided to try my hand at web design and I found it extremely difficult. It’s a completely different development process that takes a while to get used to and I could never really create anything I was happy with. I ended up doing a bunch of research and worked on my technique, and while I’m still not 100% there, I would definitely say I am improving.
Knowing print and web design standards shouldn’t be something you learn in order to be functional in them, but to be able to provide a product to your client that can be easily transferred between sectors. I’ve put together a little list of some of the things I think are most important when dealing with print and web design.
Image by: Brian Lary
Freedom of Print Design
File Size – When one goes to get, for instance, their business card printed, the printer usually does not have a limit on the size (megabytes, etc.) of submitted designs. When doing print, and really getting into bigger projects (like full color booklets, folders, etc.), it is extremely typical to see files sizes reach the gigabyte mark. This has a lot to do with setting your document up to print at 300 dots per inch. This creates a bigger file size because you demand a higher quality print than you would using the standard web resolution of 72 dpi.
Bigger Canvas = Bigger Design – Not that it is not acceptable to do really huge designs with web, but this is where the idea started from. You will almost always be able to see a huge design in one viewing rather than having to scroll and slide around websites and piece it together in your mind.
One-Size Design – When you design for a standard business card, that design is only going to appear on that size. When you design for a standard folder, that design will only be on that folder. There is no need to really try to make sure everything in a design is in such a way that it can be printed in different sizes. There are a few exceptions, but most of the time the design you create will only be viewed on the paper size it was created for.
Paper or Printed Factor – Sometimes when you design for print you have to design with the entire finished product in mind. For example printing with a letterpress or spot-UV technique, is an added element to your already magnificent design. Printing on matte paper is another technique that can take your design to another level, as well as using a die-cut.
Fluid Layouts – In my research, web design is a bit boxy; you have to kind of think of elements within boxes and lined up correctly. In print, there is a similar quality but I don’t believe it’s as boxy. You can essentially put everything wherever you want it go. For example, fliers and postcards are almost always designed to wow you and take design to another level sometimes without regard to a box or standard set up.
Limitations of Print Design
Color Selection – You have to be careful when choosing your colors in whatever design program you use. Every time I send something to be printed I’m always anxious and nervous to see the print, because the colors can sometimes end up being way different that what was picked in your design program. To be safe, you want to get a hold of a Pantone Color Picker and pick colors that way. It’s almost impossible to pick really bright, neon colors with a traditional printer, as well.
Technique Translation – Some techniques that are heavily used in web, aren’t easily picked up in print design. Do your research to figure out what does and does not work, especially if you find yourself doing the technique a lot in web design. Things that I found don’t work too hot are subtle gradients (for example medium gray to dark gray/black) and hair lines (1 pixel lines), which I depend a lot on in website design. There are ways around it, but just be sure before you try a different technique in print.
Measurement Limitations – If you want your image to be printed to the edge (with no white border), you must set up what is called a ‘bleed’ in your print design. This is usually 1/8 of an inch of dead space around your design so it can be cut off. With that you have to make sure the rest of your elements are within a safe distance of the bleed so nothing is cut off. You may also have a gutter when creating booklets that is the part of the page that will be coming from the spine. This isn’t the biggest print limitation but something that can alter the appearance of your design if not taken into consideration.
Freedom of Web Design
Infinite Color Selection – The color difference between your mock up and your finished product is almost always the same. The aren’t a ton of limitations on color (not as much as in print) and you can do a bunch more with your colors. The only issue here is hoping other monitors have similar settings to yours in order to translate the design correctly.
Easier to imagine things in motion – I think this was and still is my biggest hurdle with web design. As time progresses integrating web design with motion is becoming more and more standard. This isn’t just another technique but a way to really make your website pop and get your audience to really engage with it.
Technique Translation – Much like the opposite in print design, you can do a lot of your more intricate techniques in web design. Hair lines, gradients and pixel perfect art really work well with web design. If you have more flat colors used in print, you can really use your web design to really add some extra character to the designs.
Limitations of Web Design
One-Size Fits All – When you are creating for the web you aren’t just creating for your monitor’s size, but you must create something that will look good in every monitor size, and presently, you have to even keep in mind the small sizes of iPads and Android cellphones and such. Once this is understood it isn’t a huge deal, but starting out this is one of biggest things newbies skip; optimizing designs for all monitor sizes.
Loading Sizes – Another opposite of print design, you almost always have to optimize your designs for the web. File sizes are to be as small as possible so that can load for your audience as quickly as possible. The trick here is lowering your file size and keeping the quality of your pictures.
The Importance of Bridging the Gap
The biggest importance here is what the client wants. If you’re a web designer and you create a site for your client, it needs to be something that can be easily translated into print design, especially if your client asks you to create the print design. This, in short, is a part of branding and brand recognition: having an audience be able to connect an image or colors or a logo with a company. Knowing the two, even if you are just a web or print designer will allow you to create in a way that can be beneficial for both sectors, and ultimately, your client.
What are some other freedoms and limitations you’ve found in either design sector?
Whether you have been wondering how to get started in visual content marketing and graphic design or simply looking for ways to improve, this article will definitely help to level up your game. There are many ways to engage with the ever changing social media world and hopefully tips and tricks in this article will help you design better content, reach more people, and grow your business or personal brand.
I’d like to hear your experiences and lessons in visual content marketing and what is your opinion on graphic design guide and the differences between print and web design. Until next time, good luck and keep striving.