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
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
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
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 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
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.