UI Design

Owned by
Hieu Dao
Mar 27, 2019
9 min read

Graphic Design Theory And Basics You Must Know

In this section you will learn the most important basic design principles you absolutely must know and master.

There are, in total, six elements of  design which you need to be aware of: the line, the shape, the color, the texture, the value, and the space. Read about each of them and see real-life examples.

Now it’s time to learn about design principles like balance, dominance and priority, proportion, contrast, rhythm, and harmony and unity. It’s very important to learn these principles 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.

When you have learned about overall principles, it’s time to learn about composition and it’s basic elements – single visual, the golden ratio, focal point, grid design, Gestalt laws and  The “Z” and “F” layout. Learn here how you can use negative space as a design element, too. In the school, we had a really good exercise where you had to hand draw the flyer following these principles.

Once you have learned these basics, start observing the art around you – in the websites you visit, on cars, posters, advertisements. Notice what they are doing right, what they are doing wrong, and how it feels to you. When you become more prolific in design, you will be able to experiment and develop your own unique style.

Another great exercise is described in this article. Nowadays, every phone has a good camera built in them; thus, taking photos is a great way to learn about composition, symmetry (learn about symmetry and asymmetry), background, and rule of thirds.

Use every tool you have to learn. Start with your phone.

Do you know what is the good step by step way to start and finish a design project? If you don’t, you must read the 7 -step formula of the design thinking process. Too many times designers spend too much time than necessary on design projects just because they are all over the place and are not applying systematic step by step approach. By saying that, it’s good to have a design thinking process. However, you should not go overboard but to make sure you still stay creative and actually embrace imperfection.

*Note: If you have kids at home, why not learn design together with them? Did you know by teaching what you are learning to others deepens and amplifies your growth rate?

Learn About Typography

Using beautiful graphics and fonts other talented designers have created is the fastest way to produce quality outcome yourself. As for typography, it is important that you don’t mix ugly fonts together and don’t go too crazy as a beginner. That’s why we have created this article on combining multiple fonts and how to do it the good way. Be careful though, don’t use too many fonts, it’s best to stick to one main font and use one another different font for accents. For example on the blog, you would have all the textual content in one main font and then only main article headings in different font. You would do this to bring extra attention to headlines, since in the blog one of the main goals is to get visitors to read your content.


typography

Typography is more important than you think.

Here is a very helpful tutorial with examples and explanation, how you can work with types to create really unique and beautiful posters. And this typography tutorial style was even used on popular rapper disc cover.

If you like to work with type, you should learn about Swiss Style typography as well. With recent minimalism style, Swiss typography really looks great.

[ctt title=”Good artists copy, great artists steal. – Pablo Picasso” tweet=”Good artists copy, great artists steal. – Pablo Picasso @1stwebdesigner” coverup=”Uc4q7″]

Typography is like the soul to design so you shouldn’t underrate it. Make sure you don’t make any of these typography mistakes.

It might be too early for web typography, but this seemed the most appropriate place to pitch in these three articles:

If you enjoy typography, you should keep learning more about it online, here is the list of further learning and reading materials.

Learn About Colors And How To Utilize Them Correctly

I have seen so many bad designs created just because of the color choices designers made. Even if you create a balanced design with good focus points and typography, if you choose bad colors or use too many of them your design will not look good.

I stick to the same rule as proposed for typography. Go with one main color and use another contrasting for all the calls to action, like links and buttons. 1stWebDesigner uses white color, dark background on header and our action color is orange, which we took from our logo. In the result site looks clean and professional.

Back to you now, first you should have a fun and educational read about optical illusion and notice how great power you have in your hands as a designer. For graphic designers, unfortunately we do not have articles about colors for them, but we do have a lot of educational materials about how to apply color in web design. Don’t worry though, because basically the same principles apply on graphic design.

typography

Colors are important. Make sure you understand them as a designer.

How to use colors effectively in the web:

  1. How Colors Help Make Websites Successful – read how colors stimulate senses, how to mix colors and see us analyzing different websites and giving you ideas for colors you could use when building your website
  2. Colors in Web Design: Choosing The Right Combination for Your Website – this article goes more in depth by showing color spectrum and what colors mean in different cultures
  3. Empathizing Color Psychology in Web Design – similarly to previous article, this one talks about different color meanings and analyze good website examples
  4.  5 Web Design Colors that Encourage Visitors to Click that Subscribe Button – I saved the best article for last. Learn about the five most popular color schemes used in web design. With the help of color palettes created by talented designers you will make a great impression with colors
  5. A Guide To Improve Your Website’s Readability Through Colors – many designers sacrifice usability and readability to create a sexy design. Don’t do that. Rule of thumb – your grandma should be able to read the text in your design easily and the most important element should grab the attention first

We are big advocates of keeping your designs simple, clean and minimal. We recommend you make use of white space and white color. This article goes in-depth explaining what makes white color beautiful and how to create websites, that look professional and elegant.

To wrap this color section up, read this article to get more ideas how to pick the right color combinations when building websites or creating designs for your clients. Usually your clients will have logos already created, which makes an excellent starting point. As I mentioned earlier, colors for 1stWebDesigner website are directly derived from our branding logo.

Creating A Logo Design And Branding

It’s hard to teach logo design and we won’t pretend that 1WD is the best place to learn it. I can give you a few pointers though – keep it simple. The best logos created are simple, elegant and with hidden meaning by utilizing negative space. For beginners the best way to create a new branding is by playing with typography and modifying text. 1stWebDesigner logo is a typographic one and has achieved unique looks just by playing with type.


branding

Represent the brand correctly. Know what’s at the stake.

If you are a creative type, you definitely should think about becoming a logo designer. If you like creativity within the set of rules like I do, you should become a web designer, the path we embrace here.

Good and Bad Logo Design Case Studies:

  1. 15 Famous And Successful Logo Redesigns – What Has Been Improved? – in this article we analyze the changes done to famous company logos and how these changes improved company branding
  2. The Difference Between Timeless And Classic Logo Design – learn what are the four basic logo types, you can always start with when creating logos
  3. Successful and Failed Logo Redesigns – oftentimes when companies update their logo, they loose the association they had with their clients and that’s when logo redesign has been failed. Don’t make this mistake yourself
  4. Razzie’s Of Logo Design: The Worst Logos Ever Designed – title may be a bit bold, but this is a more fun read where designers unconsciously create controversial logos, which convey the wrong message

When trying to create a new branding, it’s important to experiment, just sketch, play with type and have loads of inspiration with successful branding examples. We can help you with some inspiration:

  • Lines into Trademark: Finest Line Art Logo Examples for Inspiration
  • 38 Brilliant Logo Branding Designs For Your Inspiration
  • 25 Sources For Logo Design Inspiration
  • 20+ Awesome Flickr Groups for Logo and Web Design Inspiration

Graphic and Web Designers – Be Inspired!

Since we are on the groove to become inspired, let’s not stop with logo design. This section will definitely get you excited to tinker around Photoshop, start drawing and get pumped up to start delving deeper in graphic and web design.


inspired

Inspiration is important for everyone. Make sure you are motivated in what you are about to do.

It is very important to learn from others, be part of community to exchange ideas and share knowledge. You can find inspiration everywhere – online or offline, you just need to look for it.

[ctt title=”Look deep into nature and then you will understand everything better. – Albert Einstein” tweet=”Look deep into nature and then you will understand everything better – Albert Einstein @1stwebdesigner” coverup=”9mrbD”]

You should never underrate the past and you should learn from history. Many great artists have lived before you, and if you neglect their work, you are simply arrogant. In the design school we spent quite a bit of time learning about great art movements that inspired our day designers and I regret to say I neglected these studies at first.

Our world is full with different countries and it is always interesting to explore how their cultural differences reflect in their artworks:

Notice how your culture affects how you design and develop your own unique style!

Now let’s mix up inspiration a bit more and here are lists of beautiful magazine covers, business cards, brochures, packaging designs and more:

  1. Useful Tips on How to Design a Great Magazine Cover – this is more useful learning than inspiration you should read if you are creating cover for magazine
  2. 23 Creative Book Cover Designs and Their Story – after reading magazine article, check these creative book cover designs
  3. 50 Fresh and Creative Business Card Designs – every business needs a business card, in my early days I created quite a bit of cards. The most important thing to remember is that you are designing for print. Don’t put important elements on the edges of business card and make sure you consult with printing companies if they can print what you have created
  4. 40 Awesome Examples of Typography in Advertising – typography in advertising can be very creative process. Not many companies will want to associate with such craziness, but you can always choose to find ones, that will
  5. Showcase of Creative and Effective Booklet and Brochure Designs – how about booklets and brochures? Graphic designers will love this
  6. Creative and Environment-Friendly Packaging Designs – packaging design is best for creative type of designers
  7. 50 Awesome Examples of Minimal Typography – typography can be applied everywhere, just be creative about it

Become A Part of Designer Community

We didn’t want to leave you hanging with limited inspiration selection, so go ahead and check this article, where we review the best designer communities, that will be endless source of inspiration, whenever you need some.


community-network

You are the average of your 5 closest friends. Test this and make sure you have great friends.

Participate in these communities, gain new friends, follow designers, who you admire and read blogs about topics that interest you. Being part of design industry means that you need to be committed to never-ending learning and growth.

  • 30 Must-Follow Designers on Twitter – if you are on Twitter and your friends tweet about what they ate in dinner, you need to mix it up with inspiring tweets of people sharing their latest design lessons and inspiring thoughts
  • 30 High Quality and Most Influential Web Design Blogs of All Time – if somebody would have shared this article when I started I would have been so grateful. This article reviews in detail the best websites to read and what they write about. Read 1stWebDesigner and then read some more

You have learned the basics now and you know what you are signing up for when becoming a freelance designer. I wanted to congratulate you getting this far. You have taken the most important step and decided to take charge of your life and follow your passion!