Graphic Design Basics Part 1: Elements

Posted in Tips, Web Design • Posted on 9 Comments

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

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.

The lines separate the two columns and are not very bold.

The solid lines are used to separate different parts of the website.

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.

Fred Maya's portfolio uses shapes to emphasize the logo and the previous work.

3. Textures

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.

Jason Julien's portfolio uses a grunge texture.

This webpage uses a different texture than the first example, looking like a math notebook.

4. Color

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.

Feed Fever uses different colors for text, trying to emphasize the importance of each line with a different nuance.

5. Value

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.

6. Space

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.

Google is the best example on how the negative space can be maximized.

Site Inspire also uses the negative space on the sides and combines it with a well-suited typography.

Conclusion

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.

Further reading

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

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

69 Written ArticlesWebsite

Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

9 Comments Best Comments First
  • Julien

    Thursday, November 10th, 2011 15:42

    5

    A very powerful article, thanks a lot for this precious informations

    0
  • Dan

    Friday, October 28th, 2011 06:48

    1

    First of all i want to tell thanks for this article because i am webdesigner and i am always find that type of articles and i really enjoy this article……….and one more thing i want to say to dainis that 1stwebdesigner’s logo is Great so Congratulation…

    -1
  • Brandon

    Friday, December 2nd, 2011 11:30

    7

    Very nice post!
    The first few seconds that a visitor spends on the website are very vital in retaining the prospective client. Therefore, the web design should be witty to communicate to the visitor what the website is concerning.

    -1
  • Morgan

    Saturday, October 29th, 2011 20:52

    3

    This is amazing…your analysis and details with illustrations. So whats gonna be in part 2?

    -3
  • Sunil

    Monday, November 7th, 2011 16:05

    4

    Awesome tips and sufficient explanation. I like this very much, waiting for part 2.

    -3
  • Dan

    Friday, December 9th, 2011 19:41

    8

    thanks for this great article, I will try to apply some of these techniques to the design of my home interior blog

    -4
  • Aagya

    Friday, October 28th, 2011 19:00

    2

    This is very valuable content atleast to me and the best part is, it is free…thanks a lot

    -5
  • Sahil Kotak

    Thursday, December 29th, 2011 09:29

    9

    Great article, I’m a newbie in Designing and I’ve many things to learn from right now. I’ll keep reading more and more here as you’re just awesome.

    -6
  • Trey Rollo

    Thursday, November 17th, 2011 08:57

    6

    I think this best blog for a person who is going to start his career in web designing. He can easily get many tips from this blog. I really appreciated the works done by author in this blog.

    -6
  • Sahil Kotak

    Thursday, December 29th, 2011 09:29

    9

    Great article, I’m a newbie in Designing and I’ve many things to learn from right now. I’ll keep reading more and more here as you’re just awesome.

    -6
  • Dan

    Friday, December 9th, 2011 19:41

    8

    thanks for this great article, I will try to apply some of these techniques to the design of my home interior blog

    -4
  • Brandon

    Friday, December 2nd, 2011 11:30

    7

    Very nice post!
    The first few seconds that a visitor spends on the website are very vital in retaining the prospective client. Therefore, the web design should be witty to communicate to the visitor what the website is concerning.

    -1
  • Trey Rollo

    Thursday, November 17th, 2011 08:57

    6

    I think this best blog for a person who is going to start his career in web designing. He can easily get many tips from this blog. I really appreciated the works done by author in this blog.

    -6
  • Julien

    Thursday, November 10th, 2011 15:42

    5

    A very powerful article, thanks a lot for this precious informations

    0
  • Sunil

    Monday, November 7th, 2011 16:05

    4

    Awesome tips and sufficient explanation. I like this very much, waiting for part 2.

    -3
  • Morgan

    Saturday, October 29th, 2011 20:52

    3

    This is amazing…your analysis and details with illustrations. So whats gonna be in part 2?

    -3
  • Aagya

    Friday, October 28th, 2011 19:00

    2

    This is very valuable content atleast to me and the best part is, it is free…thanks a lot

    -5
  • Dan

    Friday, October 28th, 2011 06:48

    1

    First of all i want to tell thanks for this article because i am webdesigner and i am always find that type of articles and i really enjoy this article……….and one more thing i want to say to dainis that 1stwebdesigner’s logo is Great so Congratulation…

    -1

Comments are closed.

54.167.144.4 - unknown - unknown - US