elements principles of designc offee websites

Good graphic and web design communicate messages and solve problems. Inspired by the love of coffee, I decided to examine how a few coffee websites use basic visual elements and principles of design to effectively communicate their message to market their products.

Elements of Design:

Line

line green mountain

Line art attracts the eye. Green Mountain Coffee.

Shape

shape starbucks

Abstract, geometric shapes give a unique look. Starbucks.

Value

value brueggers

Tints and shades of brown gradients remind us of a cup of joe. Brueggers.

Color

contrast peets

Color contrast: The green button contrasts with the orange box, serving as a call to action. Peets.

Texture

texture caribou

The burlap background texture evokes a sack of coffee beans. Caribou.

Pattern

pattern handsome

Beans form a natural pattern, intriguing the eye.

Principles of Design:

Size/Proportion

size stumptown

The large slider emphasizes the brand, while smaller images represent sub topics. Stumptown.

Unity

unity folgers

The red background matches the red packaging, forming a brand identity. Folgers.

Balance

balance amazon

A sensible UI/UX balance exists with the top navigation, links on the left, a large featured image above the fold, and smaller images across the bottom. Amazon.

Direction/Rotation

rotation coffee bean

The rotated image and text draw attention. Coffee Bean.

Movement

movement cafe bustelo

The man jumping and products sliding across the page, give a sense of movement and excitement. Cafe Bustelo.

Rhythm

rythym space settles best

The clouds with vertical lines, the script text, and the diagonal arrow bounce visually, leading us to action. Seattle’s Best.

Focal Point/Emphasis

emphasis national geo

The large image and text emphasize the website’s topic. National Geographic.

Can you use the elements and principles of design to effectively communicate and market your product?

Related

Successful Design Principles – a collection of design principles from designers and websites all over the world.

Share →
Buffer