Morey Creative Studios Blog

Design Basics 101: Key Elements to Becoming a Killer Web Designer

Design Basics 101: Key Elements to Becoming a Killer Graphic Designer

Jake Stringfellow

Jake Stringfellow
Published October 23, 2019

Take a look around. Really! Peek around your cubicle, open office, or city high-rise. Wherever you are, if you pay close attention, you’ll find dozens, hundreds, or maybe even thousands of intricately designed creations, some of which are right under your nose. The point is everything consists of some type of design element.

Consider the items that sometimes run your life: phones, laptops, vehicles. These are likely the most heavily designed and workshopped items you own. The importance of good design is simple: People just don't like ugly stuff, so if the aesthetic of your design doesn’t steal their attention, they won’t give it, or your business, a second look.

There’s a plethora of different, complex puzzle pieces that come together to build a great design, but none of those pieces will connect if you’re lacking a strong foundation. Also, and most importantly, no one wants to buy an ugly puzzle! Even a few basic guidelines will go a long way in establishing a firm footing for your design skills.

Let’s take a look at three basic guidelines you can incorporate into your next design to take it from the valley to the mountain.

 

As we apply these basics, the graphic below, as painful as it was to make, will eventually become one we can be proud of.

DB1

 

Spacing

Trees need room to grow. Too small a pot and the tree won’t survive, let alone excel and thrive.

Claustrophobia is a very real fear among most people in today's world, and it's no different when talking about design elements. Just like our own preferences for personal space, text, images and other elements share that same desire. In order to adequately space different elements of your design, there’s a couple of terms you need to understand:

Padding

Padding refers to the amount of space around design elements. You can think of it simply as an invisible layer of “padding” around each image, headline or other piece of your work. Without padding, elements begin to blend together and fade. As padding is added, these same components are given room to breathe and stand out.

White Space

"White space" refers to any additional empty space around a design. When designing, it’s common to get caught up in trying to convey as many messages as you can in a single piece of art. However, without an appropriate amount of white space, those messages will immediately mesh into one confusing blob of jumbled words. The right amount of white space allows a simple, concise message to emerge to the forefront of your design.

Kerning

Sometimes we just want a little space. Letters, numbers and characters are no different. This is where kerning comes in. Kerning refers to the spacing between characters (letters, numbers, etc) in a font. In CSS kerning is referred to as “letter-spacing” which makes for a more straight-forward title. Put simply, increasing kerning is the perfect way to break up lines of text in order to accent other lines.

Leading

Leading is similar to kerning, but instead refers to the vertical spacing between two lines of text. As lines of text begin to multiply and build, each line can start to blend into the next; leading avoids this common problem. As lines are given more room to breath, the text in those lines begin to shine and break through to communicate with the audience.

 

When we incorporate spacing fundamentals into our design below, we see it start to breathe and come to life.

DB2

 

Color

Color Wheel

Peer upward on the next glorious sunny day. Notice the simple white clouds perfectly contrasted by the bold blue sky. Or look at the wide stretching rainbow after those same clouds turn dark and pour down rain. We see color balance and theory in nature everywhere. When designing we can draw very important lessons from the natural designs around us.

Pick a palette

A color palette is a group of colors that you will employ on your design, site, etc. When it comes to choosing colors for your design palette, you have four main options:

 

Complementary:

Not all colors work well together. In elementary school, you probably learned about complementary colors, and thankfully, the term perfectly describes how they interact with each other. Complementary colors are any two hues that are directly across from each other on the color wheel. This palette ensures the highest contrast between your two main hues, guaranteeing a bold, eye-catching design.

Complementary-Color-Scheme

Example: The glaring sun against a beautiful blue sky. (Orange and Blue)

 

Monochromatic:

Perhaps the easiest option of the four, monochromatic palettes are derived from shades of the same color. If each hue in your palette is based on the same parent color, there’s zero chance of mismatching. A black and white palette, the oldest color scheme in the book, also qualifies as monochromatic.

Monochromatic-Color-Scheme

Example: The bright-shining moon on a pitch black night. (Black and White)

 

Analogous:

This palette consists of a main color, and colors on either side of it on the color wheel. Consistency is key with this kind of palette because the color wheel doesn’t lie, and the rules are simple. This is always a good choice.

Analogous-Color-Scheme

Example: A leaf-covered path in the middle of fall. (Orange, Red, Yellow)

 

Triad:

You guessed it, a triadic color scheme has three main colors. These colors need to be equidistant from one another on the color wheel. This palette is more difficult than the others, but when you find the right one, it’s worth the planning.

Traid---Color-Scheme

Example: The impeccable feather pattern of a parrot (Blue, Red, Yellow).

 

Keep it simple:

Just because we’re aiming for an eye-catching design, does not mean we need to use 10 different colors. Just like that blue sky, a simple color palette can oftentimes be the best approach. Regardless of which kind of color palette you decide to incorporate, oftentimes two or three different colors can go a lot further toward beautifying your design than five or more. The lesson: sometimes less is more.

 

The right color scheme is always tough to find, but by adopting the methods above, we’re able to take our design to the next level by using our flawless, complementary based Morey Creative color palette (no partiality).

DB3

 

Typography

The last guideline to address is typography, which can make or break your creation. There are four main styles of typography (shown below), and each fits a specific need, style or feel for a design.

Fonts-Serif,-Sans

Fonts-Decorative-Script

When addressing font choices, a common lesson rings true: simplicity outshines complexity when it comes to typography. Utilizing one or two fonts can often give your brand an identity and consistency. Incorporating up to three to five different font families isn't out of the question, but it is difficult to fully utilize each font to its full potential.

 

Unfortunately, Papyrus and Comic Sans were not doing the trick for our design. After incorporating new fonts, along with some extra tweaks, we see how far our design has come by following these basic fundamentals.

Design-Basics-101

 

Don’t Forget

As you continue to develop as a designer, these basic practices will always remain extremely important. No matter how many years you've been doing this professionally, overlooking any of these basic guidelines will ruin your work. Once mastered, these methods can serve as a vehicle to better improve design elements on the web, in print, and elsewhere. After incorporating these basics, we can see the difference between our original and new creation.

Related Articles

Recent Articles