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 green mountain

Line art attracts the eye. Green Mountain Coffee.


shape starbucks

Abstract, geometric shapes give a unique look. Starbucks.


value brueggers

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


contrast peets

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


texture caribou

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


pattern handsome

Beans form a natural pattern, intriguing the eye.

Principles of Design:


size stumptown

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


unity folgers

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


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.


rotation coffee bean

The rotated image and text draw attention. Coffee Bean.


movement cafe bustelo

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


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?


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

Share →