Eye For Design

One of the first steps in becoming a designer is to have an eye for design. The presentation of the text is as much a design choice as working with images. Everything from text to images, we are building a foundation that has an intended purpose. As we create a document or an image, we have one purpose in mind. We need to ensure the viewer of our design has a clear understanding of the subject we are presenting.

In this article, I would like to explore the key fundamentals of design. I will give you a basic understanding of design principles. After reading, you will approach how you view things with an eye for design. From a design point of view, understand why it works or doesn’t work.  Remove roadblocks that you believe do not work in your designs.

Take Inspiration Outside Of Your Niche

The principles of design are universal. Often your niche is where you spend your time online. For example, you want to create a website about golf. Most of the time when you are online you read articles and search for things that have to do with what you love.

I would like you to step outside of your comfort zone. Take the time to browse with an open mind looking for sites that inspire you, and not topics that inspire you.

You are not browsing these sites for any particular purpose except to explore design. Different developers use different tactics to entice their viewers. Explore not only the colors, and images, but also the concepts and how they direct their viewers. Take the time to look at sites you normally would not bother to look at. Scuba may not be of interest to you, but browse some sites that discuss scuba and places to go.  You may find yourself amazed at the images as well as typography. 

Look at the colors they use, the layout they follow, and how they direct the audience. With the use of other sources, you may find a combination of ideas for your current or future design. The information you gather will be your }rst step in creating something original.

The Principle Of Design

The principle of design allows the creator to focus on an effective layout. Design with emphasis, balance, alignment, contrast, proportion, movement, and white space. I understand that information above may seem daunting. Allow me to separate each one with an explanation.  After you have an understanding of each it will become clear to you.

Emphasis

What is the information my viewer needs to know? If this has many items in the category such as the who, what, when, and where. Then you need to break it down from the most important to least important.  This is the first thing the viewer will see and will make the most impact.  We want the viewer to progress through the site, not leave the site. 

Make it impactful and give the viewer a reason to stay.  From images to text you may need to use an assortment of tactics.  Repetition is one tactic that is used often.  The use of bold text or italics is also used.  Font size may place an impact on what you need to emphasize as well.  There is a multitude of ways to place emphasis on the most important aspect of an item.

Balance and alignment

Every item on a page has weight. Have you ever gone to a page with so many items you could not tell what direction to go? Too much weight can have a negative aspect on a viewer.  

There are many unattractive sites available all over the internet. A prime example would be CraigsList. Links upon links is the foundation that it was built on and has never changed. It does not stop the popularity of this website.

An example of a site that has entirely too much content is LingsCars.  Remember that simplicity is the best policy. Designing websites with an abundance of animation and graphics is not a policy I would recommend.

Balance your page and align-items in a meaningful order. The layout is in your hands. Remember to keep things symmetrical and balanced throughout the page.

The use of minimal animation is nice.  Remember to not go overboard in the process.  I would also recommend using very little to no animation for cell phones and tablets.  Animations on a small screen are distracting and may cause a viewer to leave.

Contrast

In definition, it is the state of being different from something else. This could be as simple as saying that the text on the page is black and the page where the text appears is white. This makes the text very easy to read. If the text were grey it would be more difficult to read meaning that the page would have poor contrast.

The contrast on a website revolves around the color palette. When we think of a color palette, several things come into play. The page consists of a header and a footer. You also have the page and all the elements that exist on the page.

A color palette may consist of as few as four colors, but I find eight colors work best in most situations. When you place a hyperlink on a page, there are three colors used. The hyperlink has a hover state as well as a visited state. There are, call to action used, commonly referred to as CTA. The CTA, usually a button, has a default color as well as a hover color. The page does not have to remain in the default color of white. When you change the color of the page, you must change the color of the font.

Color and contrast are the first things I deal with when beginning a new website. There are many tools to use to assist you along the way with color choice. I love the website Coolors. I always make a template of the colors for the site. I include both the hexadecimal value as well as the RGB value.

Note: The RGB Value is only needed when applying color with code.

Remember that the same can hold true with images.  Viewers of the site may be using a phone or tablet.  The monitor they use may have a different aspect ratio than the one you used.  Take these factors into account when designing images.

Placing text on top of an image could also result in poor readability.  Be certain to keep all of these things in mind when you use images on your website.

Proportion

The visual size and weight of elements on the page should be proportional to one another. If I have images on a page that all have different size properties the page will not look uniform. This holds especially true when you are dealing with a store item page.  I created a very crude image to illustrate.

Keeping your images in a proportion will help with the way items on a page line up. There are other objects to think about as well including text. This may include the title of an item or the description of an item. Keeping things uniform for the viewer is important.

It is not only items listed where you need to be careful. A page needs to remain proportional as well. In WordPress, I use a plugin called Admin Pad. For the use of notes or reminders, you may write them here. 

Another plugin I use is WP Dashboard Notes. I like this plugin more than Admin Pad. I changed to Admin Pad when the author failed to update WP Dashboard Notes. Currently, it appears updated.

Use one of the two plugins to leave notes for yourself about different image sizes. Use as a quick reference to you when you are uploading images for your website.

Movement

Not animation or movement on the page.  Instead, control the way the communication drives the viewer. Think of each page as a story where the next element on the page is the next process in the story being told. The goal of the page is to simplify the steps to take in a logical order. Remember that if something is too complicated, the visitor will become overwhelmed. Simplicity is the key here.

Think about form creation as well. Your goal is to establish communication with your site visitor. Do not create a form with a lot of questions.  Keep your forms simple with a few yes or no questions if you can.  Once you establish communication then you have options. You will get the information you need. 

The home page or landing page you create should not be like reading an article.  The use of fewer words with descriptive meaning is better.  Visiting home pages that require you to read a lot of information is annoying to everyone. If you need to provide more information, create a read more link that directs them to a new page. Remember above all else that simplicity is the best policy.

White Space

I can not overemphasize the importance of white space. White space is the amount of space between items. This could be the amount of space between a heading and a sub-heading. White space is important when creating images as well. With a little practice, anyone can learn the basics of image creation.

When I say image creation, I am referring more to image manipulation. I use software to accomplish all of my tasks. Every application available free or paid has a learning curve.

Explaining white space is difficult to do. Below I created two images one with proportion, symmetry, contrast, and emphasis. The other says the same thing but does not follow the same design principles. 

Note: The images below I created. The zebra I cropped out of a JPEG image. I saved the cropped image as a PNG file to allow for a transparent background. I used a particular color as the background and added a texture of parchment. The parchment I set at 18% to give just enough of an effect. I used two different fonts, but the primary is clean and legible.