Design

5 Web Design Mood Boards You Can Copy for Your Next Project (With CSS Styles!)

By April 7, 2017 No Comments

The hardest part of creating a website can sometimes be coming up with a ‘look.’ You’ve done the research, have the content, created a solid wireframe and now it’s time to dress up the layouts with photos, colors, and type. Whether you’re working on a personal project or a project for a client with no brand standards in place, applying a ‘voice’ to your site through visual elements can take your website from good to great.

Here are 5 web design mood boards to copy for your next web project:

1. Modern Glam Mood Board

Modern Glam mood board for your next web project

Bright and feminine, this web design mood board would be ideal for clothing retailers, photographers, and fitness related sites. Vibrant greens project a feeling of health and vitality while pinks and neutrals keep things light and clean.

Use the included CSS on your images to make your photos bright and a little bit desaturated or completely black and white.

Colors:

#082c1b
#3d682e
#dfd6cb
#eb9393

Photo CSS:

img {
position: relative;
-webkit-filter: contrast(90%) brightness(134%) saturate(85%) sepia(4%) hue-rotate(20deg);
filter: contrast(90%) brightness(134%) saturate(85%) sepia(4%) hue-rotate(20deg);
}
img::before {
content: “”;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
mix-blend-mode: soft-light;
background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(165, 34, 40, 0.6) 1, rgba(34, 4, 5, 0.38));
background: radial-gradient(50% 50%, circle closest-corner, rgba(165, 34, 40, 0.6) 1, rgba(34, 4, 5, 0.38));
}

Black and White

img {
position: relative;
-webkit-filter: contrast(126%) brightness(154%) saturate(0%) sepia(4%) invert(6%);
filter: contrast(126%) brightness(154%) saturate(0%) sepia(4%) invert(6%);
}
img::before {
content: “”;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
mix-blend-mode: unset;
background: rgba(0, 0, 0, 0.3);
}

Fonts:

@import url(‘https://fonts.googleapis.com/css?family=Abril+Fatface|Cormorant+Garamond’);

h1
{
color:#000;
font-size:55px;
font-family: ‘Abril Fatface’, cursive;
text-transform:uppercase;
}

h2
{
color: #7f7a75;
font-size:35px;
font-style: italic;
font-family: ‘Cormorant Garamond’, serif;
}

Site Inspiration

www.thecuppingroom.com
www.lovepineapplestudios.com
www.stylemepretty.com

2. Earthy & Rustic Mood Board

Earthy & rustic mood board for your next web project
This web design mood board is geared towards the more outdoor enthused. Natural canvas textures, sepia-toned photos, and neutral tones create that rustic, campy feel perfect for travel sites, outdoor apparel shops, and food retailers catering to natural foodies.

Using the included photo CSS will give your images a nice sepia tone that will enhance the outdoorsy feel.

Colors:

#182039
#2f5881
#e4e3d0
#31302e

Photo CSS:

img {
position: relative;
-webkit-filter: contrast(75%) brightness(115%) saturate(96%) sepia(29%);
filter: contrast(75%) brightness(115%) saturate(96%) sepia(29%);
}
img::before {
content: “”;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
mix-blend-mode: lighten;
background: rgba(91, 86, 73, 0.5);
}

Fonts:

@import url(‘https://fonts.googleapis.com/css?family=Fjalla+One|Roboto+Slab’);

h1
{
color:# 31302e;
font-size:66px;
font-family: ‘Fjalla One’, sans-serif;
text-transform:uppercase;
}

h2
{
color: #807c75;
font-size:18px;
font-family: ‘Roboto Slab’, serif;
letter-spacing: 2px;
}

Site Inspiration

stokcoffee.com/products/
epicbar.com
www.backcountry.com

3. Saturated & Icon Heavy Mood Board

Saturated & icon heavy mood board for your next web project
High contrast and bright colors make this web design mood board stand out while bold icons give this look a big punch of visual interest. Try using background colors on headers to really make your type stand out. This theme would be ideal for fun eateries, web apps, and even infographics.

Colors:

#322945
#00a493
#ffffff
#c90021

Fonts:

@import url(‘https://fonts.googleapis.com/css?family=Raleway:400,800’);

h1
{
color:# 000;
font-size:55px;
font-family: ‘Raleway, sans-serif;
font-weight: 800;
text-transform:uppercase;
}

h2
{
color: #000;
font-size:30px;
font-family: ‘Raleway’, serif;
}

Site Inspiration

www.wellcoin.com
www.flufffestival.com
www.nicevicecream.com
foundryco.com/work/community-pizzeria

4. Rustic Workspace Mood Board

Rustic workspace mood board for your next web project
Rustic and moody, this web design mood board evokes feelings of professionalism and expertise. Black and white photos lend a timeless and clean feel to the design. Fonts are clean and textures are subtle. Use this style for personal portfolios, trendy restaurants, and anything fashion related.

The CSS for the photos will make your images black and white and add sharp contrast for a clean, professional look.

Colors:

#28252f
#c68f0c
#ffffff
#000000
#e9e3db (background)

Photo CSS:

img {
position: relative;
-webkit-filter: contrast(130%) brightness(125%) sepia(30%) grayscale(100%);
filter: contrast(130%) brightness(125%) sepia(30%) grayscale(100%);
}

Fonts:

@import url(‘https://fonts.googleapis.com/css?family=Fjalla+One| Cormorant+Garamond’);

h1
{
color:#000;
font-size:67px;
font-family: ‘Fjalla One’, sans-serif;
}

h2
{
color: #866109;
font-size:30px;
font-style: italic;
font-family: ‘Cormorant Garamond’, serif;
}

Site Inspiration

themuleokc.com
abednegocoffee.com
foundryco.com/work/williams-sonoma-bbq

5. Bright & Modern Mood Board

Bright & modern mood board for your next web project
Colorful, monochromatic photos make this web design mood board stand out. This theme is perfect for web apps, fitness sites, and almost anything technology related.

Colors:

#ba0099
#009d6f
#009ebb
#005fa2

Photo CSS:

Blue

img {
position: relative;
}
img::before {
content: “”;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
opacity: 0.5;
background: rgba(0, 95, 162, 1);
}

Pink

img {
position: relative;
}
img::before {
content: “”;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
opacity: 0.5;
background: rgba(186, 0, 153, 1);
}

Green

img {
position: relative;
}
img::before {
content: “”;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
opacity: 0.5;
background: rgba(0, 157, 111, 1);
}

Fonts:

@import url(‘https://fonts.googleapis.com/css?family=Open+Sans:400,800’);

h1
{
color:#000;
font-size:57px;
font-family: ‘Open Sans’, sans-serif;
font-weight: 800;
}

h2
{
color: #000;
font-size:30px;
font-family: ‘Open Sans’, sans-serif;
}

Site Inspiration

rentberry.com
www.adisonpartners.com
www.theofficegroup.co.uk
www.decoratedairstudios.com


Visual design can be a challenging aspect when creating a website. All designers hit road blocks, but a little bit of inspiration can go a long way. Using the above mood boards and CSS styles is a great way to kick your web design into gear and create a site that not only functions great but looks visually appealing as well.

Executive's Guide to Web Development

80 pages of topics and tips to navigate your way to a better website.

Leave a Reply