A while ago Jenna wrote a post showing us how she is inspired by the world around her and uses that inspiration in her designs. Being intentionally observant is not only a pro life tip, but it also keeps your design work from growing stale.

The colors in Jenna’s post are nice and all and the pictures are lovely, but when I see colors stacked together I am reminded of paint samples for interior decoration. How does that affect design, or specifically Roundpeg’s sweet spot, web design?

So I challenged myself: Could I actually design a website from one of Jenna’s color palettes? (Disclaimer: she had no idea I would write this post when she wrote hers, and was definitely not thinking of work when she took the original photos. Or at least we can hope so for her sake.)

The challenge was fun, forcing me to make some tough decisions along the way. Maybe some of these decisions will be helpful as you think about your own web design project.

The Palette

Screen Shot 2016-05-02 at 4.19.04 PM

While the image on the left looks like a place I’d want to be, what with the cool water and sprawling palm trees, the colors on the right are Sturdy. Stable. Trustworthy. The ones I’d like to see at a bank or a yacht club. So clearly my choice for a website was an ice cream shop.

Applying brand colors to a website

 

icecream

 

All the colors are there, though I admit I fudged the gray a little since it was so dark.

The overall layout is pretty standard and simple. I intentionally chose the staid colors to let the ice cream be the feature. Bright pink stands in direct contrast to the cool blues and grays and the gold becomes contrast.

The first row is meant to grab your attention and incite action. You see the ice cream, you want the ice cream and if you click you can find out where to get the ice cream. Without thinking about it you know what’s important because of the size of the type and how it’s styled. The headline is in a simple and easily readable font in a different color from the pleated banner, logo, button and ice cream.

Applying fonts to your web design

The gold script is used in all the headers throughout the page. The only exception being the darker gold on the gray background for better legibility. But it’s still the script and subconsciously communicates the same message “read me first.”

If you’re not deeply moved by the first image, the second row allows for more convincing. In case strawberry isn’t your jam the buttons invite you to check out all of these other flavors. Again, the ice cream is the star with the cone drawing direct attention to the button. All of the buttons are the same colors with the same text treatment so you know exactly where to click.

Somehow your self-control has lasted you to the third row, meaning you’re pretty invested in the company itself. Want to know a little more? Of course you do! The sprawling gold script title tells you exactly where to go. Luxurious white space gives the story room to breathe and the bordering ice cream a mountainous, mythic quality.

The fourth row lets you keep up to date with any specials and further ice cream consumption motivation, keeping the same styles set from the beginning of the page.

The bottom line, you can make any colors work in a web design if you use them wisely and apply them consistently. Even picking just two colors and using them intentionally makes for a consistent brand presentation and results in a more professional and engaging web design.

Website Tuneup

Roundpeg is an Indianapolis web design firm.