980px

View: http://faculty.washington.edu/sinkum/visual-design-for-your-webpage/

Code: https://github.com/msinkula/HCDE598/tree/master/visual-design-for-your-webpage

When creating a visual design for your web page for a client, it is important to follow their branding guidelines.

Example: University of Washington Brand Guidelines

For this exercise, we are going to follow the University of Washington’s Web Color Palette:

University of Washington Web Color Palette

University of Washington Web Color Palette

Next, we will need to create the Tints & Shades for this palette.

See Also: Creating Tints & Shades in Illustrator | WEB200 | Premium Design Works

However, instead of creating them in Adobe Illustrator, we are going to use the Color Palette Creator tool.

See Also:

We can then use the Purple, Gold (original) and Gold (bright) as our primary colors with tints and shades.

Let’s reference these colors in our style sheet:

Select Code
1
2
3
4
5
/*
Purple: http://slayeroffice.com/tools/color_palette/?hex=39275B
Gold (Original) : http://slayeroffice.com/tools/color_palette/?hex=C79900
Gold (Bright): http://slayeroffice.com/tools/color_palette/?hex=EBB700
*/

Step Two: Implementing the Color Palette

Now that we know our colors, lets start adding them to or web page.

First, let’s give our page an overall page background color by adding a background color to our <html> tag and remove the background color from our <body> tag:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
html {
background-color: #39275B;
}

body {
background-image: url(images/bg-960.png);
background-position: center;
background-repeat: repeat-y;
/*background-color:#FFFFFF;*/
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}

Note: We will be updating the backgrounds in both the <html> and <body> tags later.

If we preview at this time, we should see the Purple background in our page:

Now I have a purple background.

Now I have a purple background.

Next, let’s modify our page divisions.

I am going to start by moving our grid background to our content <div> tag and give that element a white background:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}

#content {
width: 940px;
background-image: url(images/bg-960.png);
background-position: center;
background-repeat: repeat-y;
background-color:#FFFFFF;
overflow: hidden; /* prevents the great collapse */
margin: 0 auto;
padding: 0 20px;
/*border: 1px solid black;*/
}

Notice that I also commented out the black border.

Now we should still see our grid in our content area:

I can still see my grid in the content division.

I can still see my grid in the content division.

Now we can start giving some colors to our header, navigation and footer text.

Let’s start with the header and change our name to look a little better:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
h1 {
font-size: 36px;
line-height: 36px;
color: #FFF;
}

#header {
width: 980px; /* change the width */
margin: 0 auto;
padding: 20px 0; /* change the padding */
/*border: 1px solid black;*/
}

I am also going to edit the <h1> tag to just say my name:

Select Code
1
2
3
4
5
<!-- Begin Header -->
<div id="header">
<h1>Mike Sinkula</h1>
</div>
<!-- End Header -->

How about we also do something similar to the footer element:

Select Code
1
2
3
4
5
6
7
#footer {
width: 980px; /* change the width */
margin: 0 auto;
padding: 20px 0; /* change the padding */
/*border: 1px solid black;*/
color: #FFF; /* give all text elements a color of white */
}

And, as well to the navigation element:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#navigation {
width: 980px; /* change the width */
margin: 0 auto;
padding: 10px 0; /* lets change this to 10px top/bottom and 0px left/right */
/*border: 1px solid black;*/
color: #FFF; /* give all text elements a color of white */
}

#navigation ul {
overflow: hidden; /* prevents the great collapse */
/*border: 1px solid grey;*/
padding: 10px 0;
margin: 0; /* overwrites existing margins */
}

#navigation ul li {
list-style: none;
float: left;
margin: 0; /* overwrites existing margins */
margin-right: 20px; /* gives the items space between */
}

White text looks much better on the purple background:

White text looks much better

White text looks much better

Uh.. oh… Why isn’t the text in the navigation white?

Here’s where we need to create the styles for our link colors.

In order to do that, let’s add in the styles for or <a> tag states:

Select Code
1
2
3
4
5
6
7
8
#navigation ul li a {
color: #FFF; /* let's use white for the default link state */
text-decoration: none; /* this disables the default underline */
}

#navigation ul li a:hover {
color: #EBB700; /* and use bright gold for the hover state */
}

Now that looks more like a navigation:

Link colors applied!

Link colors applied!

We are now ready to start tacking the content section to make it look more appropriate.

At this time we still have our grid background in the content section for reference. We’re gonna keep it in there, but hide it with a comment. We can then turn it off and on as we please.

So, let’s comment that background out:

Select Code
1
2
3
4
5
6
7
8
9
10
#content {
width: 940px;
/*background-image: url(images/bg-960.png);*/
background-position: center;
background-repeat: repeat-y;
background-color:#FFFFFF;
overflow: hidden; /* prevents the great collapse */
margin: 0 auto;
padding: 0 20px;
}

Now our pinstripes should be gone:

Remove the 960 Grid Background

Remove the 960 Grid Background

Let’s add a bit of padding to the top and bottom of the content area and give it rounded corners:

Select Code
1
2
3
4
5
6
7
8
9
10
11
#content {
width: 940px;
/*background-image: url(images/bg-960.png);*/
background-position: center;
background-repeat: repeat-y;
background-color:#FFFFFF;
overflow: hidden; /* prevents the great collapse */
margin: 0 auto;
padding: 20px; /* change padding to 20px all around */
border-radius: 10px; /* adds rounded corners */
}

We should now see a little bit more pleasing of a content area:

A little more padding and rounded corners.

A little more padding and rounded corners.

See Also: CSS3 Borders | W3 Schools

Now we can get to work on branding and setting our type a little better.

Let’s start with the headlines:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
h2 {
font-size: 24px;
line-height: 24px;
color: #39275B; /* purple */
/*padding-top: 8px;*/
margin-bottom: 10px; /* changed */
}

h3 {
font-size: 18px;
line-height: 18px;
color: #39275B; /* purple */
padding-top: 10px; /* changed */
margin-bottom: 4px; /* changed */
}

Let’s notice that I changed a bit of the space before and after. You can set this how ever you’d like.

See Also: Setting Type for the Web | WEB112 | Premium Design Works

Next, we need to create the link states for our body copy section.

Therefore I am going to designate link states for any links in my content area. We forgot to put <a> tags around our list item text in both the content area and sidebar regions.

So, Lets do that now:

Select Code
1
2
3
4
<ul>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
</ul>
Select Code
1
2
3
4
5
6
7
8
9
10
<!-- Begin Sidebar -->
<aside id="sidebar">
<h2>Headline</h2>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Aliquam tincidunt</a></li>
<li><a href="#">Vestibulum auctor</a></li>
</ul>
<aside>
<!-- End Sidebar -->

Then we can brand the colors of the link states in our content section:

Select Code
1
2
3
4
5
6
7
#content a {
color: #39275B; /* purple */
}

#content a:hover {
color: #C79900; /* gold */
}

Let’s add link states to our header and footer too:

Select Code
1
2
3
4
5
<!-- Begin Header -->
<div id="header">
<h1><a href="index.html">Mike Sinkula</a></h1>
</div>
<!-- End Header -->
Select Code
1
2
3
4
5
6
7
8
#header a {
color: #FFFFFF; /* white */
text-decoration: none; /* remove undeline */
}

#header a:hover {
color: #C79900; /* gold */
}
Select Code
1
2
3
4
5
<!-- Begin Footer -->
<div id="footer">
<p>&copy;2014 <a href="http://www.mikesinkula.com/">Mike Sinkula</a>. All rights reserved.</p>
</div>
<!-- End Footer -->
Select Code
1
2
3
4
5
6
7
#footer a {
color: #FFFFFF; /* white */
}

#footer a:hover {
color: #C79900; /* gold */
}

We should now see our link states shaping up nicely:

Our link states have shaped up nicely.

Our link states have shaped up nicely.

But, our links in the sidebar still have that default bullet. Let’s replace it with a branded image.

Download: bg-bullet.png

Let’s create the style for it:

Select Code
1
2
3
4
5
6
#sidebar ul li {
list-style: none; /* removes default bullet */
background-image:url(images/bg-bullet.png);
background-position: left; /* positioned to the left */
background-repeat: no-repeat; /* do not repeat background */
}

When we do this we will see our bullet appear in our list items:

Our bullets appear in our list items.

Our bullets appear in our list items.

But, they don’t seem to be positioned correctly. This is because of our general settings on our <ol>, <ul> and <li> tags.

Let’s fix it:

Select Code
1
2
3
4
5
6
7
8
9
10
11
#sidebar ul {
padding-left: 0px; /* overwrite general padding */
}

#sidebar ul li {
list-style: none; /* removes default bullet */
background-image:url(images/bg-bullet.png);
background-position: left; /* positioned to the left */
background-repeat: no-repeat; /* do not repeat background */
padding-left: 10px; /* creates padding so we can see the background image */
}

Now that looks like a real sub-navigation scheme:

Now we have a real sub-navigation scheme!

Now we have a real sub-navigation scheme!

We’re getting close to having a nice visual design for our site!

All we need to do is polish up the background a bit by adding a bit of a gradient and a branded image.

Download: bg-boxes.png

Let’s add the branded asset that I used on the department’s website to the <body> tag.

Select Code
1
2
3
4
5
6
7
body {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-image: url(images/bg-boxes.png);
background-position: top ; /* positioned to the top of page */
background-repeat: repeat-x; /* repeat horizontally */
}

This gives our web page a bit of character:

Adding a little bit of character.

Adding a little bit of character.

Let’s take it one step further and finally use those tints and shades we created earlier.

We are then going to apply a CSS3 gradient to our <html> tag:

Select Code
1
2
3
4
5
6
7
8
9
10
html {
background: #2b1d44; /* Old browsers */
background: -moz-linear-gradient(top,  #2b1d44 0%, #39275b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b1d44), color-stop(100%,#39275b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #2b1d44 0%,#39275b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #2b1d44 0%,#39275b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #2b1d44 0%,#39275b 100%); /* IE10+ */
background: linear-gradient(to bottom,  #2b1d44 0%,#39275b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b1d44', endColorstr='#39275b',GradientType=0 ); /* IE6-9 */
}

See Also: Ultimate CSS Gradient Generator | ColorZilla.com

Congrats!!! You now have a branded visual design to your web page:

I now have a branded web page!

I now have a branded web page!

Next, we will start creating multiple pages for our site!

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.

Leave a Comment:

Don't forget to get your Globally Recognized Avatar.

css.php