Sentry Page Protection
 

design basics: web design

 

key terms

White space • Copy
Minimalism
User interface design
Monochromatic • Grayscale

objectives

1. Identifying six major concepts associated
with your website design
2. Learning about current web design trends

 

Design Basics: What Your Website Must-Have

You website is how you greet the world.  It is imperative in the 21st century to have a great design with high quality elements.  That is the truth and we are sorry if that offends anyone.  Study after study, big blogger after big blogger, will tell you they automatically pass over blogs that lack the important concepts of web design.  The wrong color scheme, too many colors, low contrast colors, designs that look cheap, the wrong fonts, too much clutter, unorganized blocks, misplaced information, and lacking important information are usually the biggest problems with a web design.

Don’t fret!  We are going to make sure you understand the do’s and don’ts before we’re done today!


Important Concepts

There are six concepts we will be covering:

 
 
 

value

The value of your website is what you offer your audience.  It’s more than what you sell, it’s how you sell it.  Having a high content density includes the words you use but also the story you’re telling.  You don’t want too little and you don’t want too much.  Every thing on your page needs to have a clear point and a real purpose.

Questions to think about:

Why should people be coming back to your website?  Do you offer valuable knowledge or insight in the form of a blog?  Do you answers all their questions about a particular subject matter?  Do your products or services solve a problem for them?

 

direction

You want to guide and direct your reader to the highest priority content.  You get to determine what is high priority.  But you also don’t want to overwhelm anyone.  Navigation bars, tabs, pages, and proper layouts all help direct and guide readers where they need to be.

In addition, providing direction is being able to successfully answer the readers’ questions without making them jump through hoops.  The biggest example of this is if you offer services, tell them how much the services cost.

Questions to think about:

What is your highest priority content?  What about your medium and lowest priority content?

 

white space

White space is an important term in art and design.  Also called “negative space,” white space refers to the amount of unused (or blank) space.  White space doesn’t actually have to mean there is a white background.  You can have a colored or textured background and still have white space.

Questions to think about:

How much information are you trying to convey?  If you have a lot of information, have you considered multiple pages?  What type of emotions are you wanting to evoke?  

Emotions like loud, excitement, tenacious, energized, enthusiastic, exhilarated, power are more successful with less white space.  Emotions like hopeful, professional, inspired, strong, peaceful, consistent, relaxed, and trust are best conveyed with more white space.

Feel

The feeling the reader has when they come to your website is hands down the largest chuck of the pie.  If they aren’t having a positive reaction when the view your website, they are already done and it simply doesn’t matter how amazing your value is to them.

It really is a “judge a book by its cover” world.

Questions to think about:

What feeling or emotion do you want to evoke when someone visits your website?  Do you want to come across as professional and capable or would you like to come across as personable and fun?

 

Color

Having a consistent color scheme is extremely important.  Choosing the right colors to deliver your message is only a fraction of it (and you can Google color psychology to learn more about that).  Incorporating colors that flow and in the right places is the main aspect.

Questions to think about:

What colors deliver the message you want to convey?  What are your favorite colors?  What colors are you using as a part of your business logo or header? 

Depending on the feel of your website, certain colors might work better than others.

 

Copy

The copy is the actual text and content portions of your website.  Within copy, we remember other elements like color, value, and direction, but we are also concerned with the language, fonts, the formatting, and the organization of your words.  Some of this does take into account marketing language, but we’ll talk about marketing in detail another day.

Questions to think about:

What are your favorite fonts?  Are they web-friendly (or reader-friendly?)  Who is your target audience?  What age range does your audience belong?

Knowing your audience might be a key to determining both the language as well as the formatting options for your copy.


The Feel of Your Website

In this section, we will discuss trends in web design, namely minimalism, and briefly touch on color and white space. 

Minimalism

According to a study done by the Nielson Normal Group, there are several defining features of minimalism:

  • flat design
  • limited color schemes
  • few UI elements
  • use of negative (white) space
  • dramatic typography

Minimalism is a strategy that has been utilized in fine art and architecture but really took off for web design in the early 2000s. 

The secret to minimalism isn’t lack of content,

it’s about being more particular, intentional, and concise

with the content you choose to include.

Let’s take a look at Google.

 

Google

Google might be the most famous use of minimalism, but you’ll recognize it really is everywhere.  The Google homepage hits all of the defining features except the dramatic typography.

  • Flat Design

Both Google and Apple are the gold standards with flat design (also called material design).  

Wikipedia has a great definition:

Flat design is a style of interface design emphasizing minimum use of stylistic elements that give the illusion of three dimensions (such as excessive use of drop shadows, gradients or textures) and is focused on a minimalist use of simple elements, typography and flat colors.
  • Limited Color Schemes

Just how limited?  Many go so far as to use a monochromatic color scheme.  In the study performed by Nielson Norman Group looking at 112 websites, roughly 45% of the websites they used in the study used grayscale as their color scheme: blacks, whites, and grays.  Read more about the color schemes we found in our own study to the right.

  • Few UI Elements

UI, short for user interface design, is when a designer focuses on maximizing the user experience when designing a website.  This term also applies to operating systems, computers, mobile devices, and more.

UI elements, as outlined by the Nielson Normal Group study, include: “menu items, links, images, graphics, lines, captions, textures (like gradients), colors, fonts, and icons.” The purpose of limiting these elements it to avoid having an excess of unnecessary “fluff.”  

Again, remember minimalism focuses on making it easy for the reader by only including what needs to be included.  

  • Maximized Negative Space

Minimalism loves white space (as you’ll continue to see).  Again, white space doesn’t have to actually be “white,” but in most cases it is because white evokes a feeling of clean, simple, direct, organized.  Therefore it has it’s own positive reaction.  We will discuss this further when we talk about color.

Maximizing white, or negative, space further guides the reader to the point and prevents an overwhelming feeling.  It makes things simple.

  • Dramatic Use of Typography

Though Google certain uses it’s own font in it’s logo, they do not illustrate a dramatic use of typography.  In fact, a lot bloggers and websites actually don’t do this in the majority of their website.  They usually limited this to their heading or their logo or in any infographics, charts, or illustrations.

other design trends

  • Boards and grids: 

Think of Pinterest (example below). 

Though not as popular as scrolling websites, this trend can provide value for certain types of websites.  Microsoft Windows operating systems are utilizing a version of this trend.

  • Vertically scrolling navigation: 

This is an increasingly popular trend in which the reader visits a single page and continuously scrolls down in order to read all the important content they need to know.

The two examples for this is Apple.com and August.com. 

 
Member Login
Welcome, (First Name)!

Forgot? Show
Log In
Enter Member Area
My Profile Not a member? Sign up. Log Out