Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

November 05 2011

10:00

Graphic Design Basics Part 2: Design Principles

In the first part of the series we covered the basic elements of graphic design with shapes, lines, textures and color among others. Today we 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.

1. Balance

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.

Florida Flourish is a good example of a total symmetric website

Duplos uses an asymmetrical layout which works really well.

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.

Area17 emphasizes the dominant element in the top left corner and the welcome message pulls you in as well because of the color.

3. Proportion

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.

Bluecated Interactive uses proportion to draw the attention on the image.

4. Contrast

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.

eHarmony's "Find My Matches" button stands out because of a good use of contrast.

5. Rhythm

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.

David Desandro's portfolio follows a very regular, progressive rhythm

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.

Conclusion

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

November 01 2010

10:00

Lines into Trademark: Finest Line Art Logo Examples for Inspiration

Have you ever wondered on what is the importance of logo and how does it affects people? Logo represents or symbolizes your company or your product, it is a trademark. For instance, whenever you see golden yellow arches that looked like the letter “M”, you are thinking that it is Mc Donalds. Or if you saw a check mark, you’ll say it’s Nike. And that’s how logos purpose is. Designing a logo is not that easy, you really need inspiration and a lot of creativity. In the world of graphic design today, line art logo is not a new technique but a new concept for designers. They create a striking logo by just using straight or curve lines.

First, I would like to tell you on what is a line art, a line art is an image that consist of straight and curved lines that is place against a background to represent objects. These line arts are usually placed on a plain background to better see the image. The image below made by Gustave Doré depicts the tales of Baron von Münchhausen in line art.

Paul Gustave Doré’s 9th illustration for Baron von Münchhausen (1862)

There are two kinds of line art logos. The first one is the open design wherein logos in this kind do not form an enclosed shape. The second one is the continuous design. Logos in this kind have lines that are continuous and form an enclosed shape. Before, designers only use black and white for line art logos. However, you can now also create using different colors. In this article, I have showcased the most creative line art logos for you to get inspired. I also put some comments and suggestions on each to help you out if you will be doing your own line art logo.

1. The Sweetest Days Photography

by: eziemac

This logo is for a photography business named, The Sweetest Days. The design is so feminine, simple but elegant.

2. Pilgrim

by: sbdesign

This Pilgrim logo is used for a travel agency. I love how the designer of this logo creatively use those curve lines to form a pilgrim.

3. Muses

by: JeNgFX

This is a very appropriate design for a boutique. It’s cute in pink and very stylish.

4. Drink Dry Creek

by: jerron

Drink Dry Creek is a company that produces world class wines of distinction. The logo makes it very easy for customers to determine on what the company is.

5. Wire Bar

by: Laava

Laava made a very nice logo. I like it how the designer use lines to form a wine glass and the violet background color made the wine glass stand out. Not to mention that violet here may represent grapes where wine is made of.

6. Ramm

by: designabot

This is intended for a men’s fashion brand. The logo is very masculine, simple and clean work.

7. Photoclick

by: sbdesign

This amazing line art logo is obviously, for a photo studio. Very direct and creative in design.

8. Key Logic

by: Brandsanity

This logo is designed for Key Logic. Two thumbs up for a great concept. It also fits on the tagline, Unlock (key) & Empower (light bulb).

9. Royal Trivole Gardens

by: nitish.b

This logo is for a farm-house club named Royal Trivole Gardens, a venue for business meetings and golf tournaments. The background color makes the logo look more elegant.

10. Message! In a Bottle

by: Type08

This logo was used for a launching of private label wines in Vancouver, Canada wherein fifty percent of the profit will go charities and to indigent people throughout the province. The designer’s concept on having this as an open design is to give the message “continuous efforts” to the people.

11. Spoon

by: con3x

A nicely done spoon logo. The concept is calm and refreshing.

12. Lovelë

by: hellogo

This great work of logo is for Lovelë, a fun brand good for any business to do with care for animals (namely elephants) love or dating, children or a charitable organization. I see how nicely the lines are used here, how the designer used one line to form two elephants with trunks that form a heart shape. The elephant here symbolizes the eastern symbol of strength and national symbol in Thailand.

13. Music Junkie

by: Kleetz

In my opinion, if the background was in a dark color other than brown, maybe a white or dark blue one, it would look better. Nonetheless, the concept is very brilliant.

14. Get Wired

by: bosh

Get wired is a coffee and an internet shop combined in one store. This logo has great concept and good choice of colors and fonts, as well.

15. Emerge

by: Double A

The logo is for a religious ministry. I find the logo very good. The orange cross may represent God and the line that formed a man represents the people. It’s like the logo is saying we should emerge with God’s ministry.

16. Property Innovation Council Logo

by: wookasheen

I found this property innovation council logo on logotournament website. It was the winner for the contest. The concept was very appropriate for the company and the choice of colors of the designer really looks great on the mark.

17. Equus Estates

by: designoutloud

This one is designed for a real estate. Very simple and professional looking logo.

18. Love Clicks

by: kathariney

This logo was made for Valentine’s Day, that’s why the background is in color Red. The mark consists of two computer mouse that forms a heart shape with their wire. Very nice concept for Valentine’s Day, right?

19. Fly

by: HitByReindeer

A great concept. Maybe it would be better if the curve lines of the letter “y” were lessen to make it look clearer.

20. Kudesnitsa

by: denis_izotov

Very cute butterfly made in lines. The letters looks also great. Good job for the designer.

21. VELOsite

by: bpd_sign

The mark was done really good. Very creative to form a man riding a bicycle using lines.

22. Lion Art

by: vasvarip

This lion art logo represents strength, and potency. I think it would look better if some curves will be omitted especially on the mouth part down to the left leg of the lion.

23. Swandart

by: vasvarip

Swandart stands for swan and art logo. Very elegant and clean looking. This can be used for clothing, fashion or even arts industries.

24. Hearthread

by: Kazhis

Lines that form hearts. This very cute line art logo was fits a fashion business or maybe a clothing boutique.

25. SewPerfect

by: Logomotive

The mark is perfectly done. This one is really nice. It can be used for a sewing store or a dressmaking shop.

26. Sculptor v03

by: sbj

A great concept. It would be easier for customers to notice that they are hands sculpting if they were put sideways.

27. Mothman

by: designabot

This one is inspired by the largest crop circle in Holland. A beautiful design indeed.

28. Haragano

by: Felix Benito

This logo is for men’s shoes. Though the logo does not directly portrays that it is a shoe brand, but I like it how the designer done those curve lines to make the mark look dainty.

29. Median Wing

by: mariob

The colors and the curves of the bird blended well. This is a great logo.

30. Homespun Chili

by: brandclay

This logo is designed for Homespun Chili Company. Very appropriate trademark for the company.

31. The VIP Club 2

by: Logomotive

This one is designed for The VIP Club. Though it was not the chosen mark but I think it looks great, the concept of the designer is simple and nice.

32. Handmade Cafe

by: serhos

A logo made for Handmade Cafe in Moscow. Well done in the execution on the curve lines, as well as with the lettering.

33. CHA – Centre for HIV and AIDS

by: Black ColourBash

A logo for the Centre for HIV and AIDS. The overall design really represents the organization.

34. The Golf Park

by: mainichi

This one has a great design and color. I think it will look better if the shaft of the golf club was longer.

35. Memoart

by: vasvarip

This logo can be used for memory or board games, or anything that is related into memory or brain. This one makes me appreciate line art logos more.

36. Nostos Restorations

by: Siah-Design

The concept of this mark is there are two hands that hold a house, conveying that this company is a renovation/repair company.

37. Opera Logo

by: randyheil

This logo is for an opera, but it was never used. The combination of the curve lines and the color of the dress make the design very sweet

38. Barefoot

by: BigAl67

A logo designed for a company that specializes a carbon lifestyle assessment. It has a good combination of colors and creative concept to form the foot into a letter “B” .

39. Love Clip

by: designabot

This one is very lovely. The concept is very simple and perfect with the pink background. Suitable for a bookstore or publishing company.

40. FishLine

by: geniuslogo

The designer did a great execution for this logo. This one can be used for a fishery company.

41. Cherry on Ice

by: Type08

This one has good choice of colors, the fonts are great too. This mark is really cute for an ice cream parlor or a restaurant that sells yogurts.

42. iDream Images

by: Siah-Design

iDream Images is created for a photo studio. The logo is very unique in style, has great choice of font and colors.

43. Toro Bull

by: grigoriou

This one is a good example of an artistic line art logo. The colors and the text made it very artistic.

44. Metro Mobile

by: William © 2009

This logo has a nice concept and is very suitable on the tagline of the mobile company, which is “the city where distances are shorter”.

45. Pastamasta

by: hindmarshdesign

Pastamasta is a great piece of work, and it has good choice of colors and font. It really represents a pasta restaurant.

46. Natural Selection (logo 2)

by: Fogra

This is a logo proposal designed for a new local organic shop. The ligature of lines made it looked very natural and organic. It has also good colors.

47. Canterbury Cabin

by: BluesCue

This mark is created for a soap and candle company. The logo itself is very nice and simple.

48. Motor Sports

by: SimonFenix

A logo created for a motor club. Overall, the design is great. I think the line in the middle will look good under the 50 50 text.

49. The Leasing Studio

by: urbanINFLUENCE

This simple and clean line art logo was made for The Leasing Studio that binds landlords and tenants. It has nice choice of colors and a great concept.

50. Jo Ann Medical Center

by: IrakliG

Jo Ann is a medical center especially for children and young ones. A good concept on having a heart shape that portrays the mission of the medical center, and that is to give tender and loving care for its patients.

Tips to Ponder

Aren’t these logos look amazing? I bet you want to make your own. So, here are few tips if you will be doing your own line art logo:

  • Make sure to use plain background so that the logo itself will stand out.
  • If your logo has a dark color, use a light one for the background. For example, if the logo is in a white color, you may put your background into black. Or vice versa.
  • Use an icon or an object that will represent your company. This directly describes your line of business. For instance, if it is a bakeshop, you might as well create a line art logo with loaf bread on it.
  • Make it appropriate, direct and simple as you can. Just let that creativity flow in you.

I hope this gives you an inspiration and additional techniques in making stunning logos, like these line art logos.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...