The Secrets Of Good Design

Today I am happy to introduce a new series of articles we're doing on the subject of Design.

Throughout this series, we will be referencing Master Web Designer and Best Selling Instructor Vako Shvili's course "Complete Web Design" wherein he breaks down the elements of good design and lays out the basic principles one needs to grasp to have a solid foundation for beautiful design.

This is a 5 part series entitled: The Secrets Of Good Design.

In each issue we will cover one of the following topics:

  • Layout
  • Typography
  • Color
  • Images
  • Tips & Tricks

 

We're kicking things off with the first article which is all about Layout. Enjoy!

Layout Is King

Alignment

Just a simple alignment can make something look like it was designed with purpose. On the other hand, misalignment will make it look sloppy and amateurish.

In most instances, you will want to align the items on the page to the same reference point. If the headline is aligned to the left, then the paragraph below it should be left-aligned as well.

Grid

If you take a blank sheet of paper and draw 9 squares in 3 rows and try to line them up with your eye and make them as straight as possible, they would probably be mostly straight but they definitely wouldn't be perfectly straight. Now if you take the same sheet of blank paper and fold it in equal-width columns, you will get a grid. You can use this grid to align your elements, in this case, our squares. Just about any design software you're going to be using has a grid that you can customize and turn on or off as needed to ensure that your placement is in alignment with the other elements on the page.

NOTE: It's okay to break the grid as long as you're doing it with intention and when it's clear that you are going to get a better result by doing so.

Visual Hierarchy

Visual Hierarchy is a method that helps the audience digest the information easily. As humans, we can typically only focus on one thing at a time. When everything is presented as being of equal importance, we don't know what to focus on first. People are easily dazed by the chaos of the information. On the other hand, good design guides the audience and makes the information easy to understand, and also makes it easier for someone to find what they're looking for.

Establishing a hierarchy is actually quite simple. Bigger is more visible so it belongs higher in the hierarchy. Smaller, and less visible elements belong lower in the hierarchy.

NOTE: Be very aware of your main focal point. The most important visual element should be prominent and obvious. Take a good look at the above pages. Which makes you feel better? Which is easier to read? One is obvious and clear and moves you toward your goal of gathering information, and the other leaves you feeling confused and lost about which action to take next.

Proximity

Proximity is a design concept wherein elements that have something in common are positioned closer to each other. The basic idea here is that:

  • Things that are related, should be close together.
  • Things that are NOT related, should be further apart.

If you notice from the photo above, on the left we have a good example of very little proximity at play. Most everything is spread out seemingly randomly. The image on the right shows good use of proximity as the navigational links and the call-to-action buttons are grouped together. The extra amount of space is also gone from the middle of the page which gives the design a more meaningful feel all around.

I hope you enjoyed the first article in this new series as much as I enjoyed putting it together! The entire topic of design is wildly fascinating and as designers and creatives we are always looking for fun and inventive ways to take our craft to the next level. If you liked this series, reach out and let us know, we love to get feedback!

The Full Rundown

Twitter: @TheFullRundown