Web Design Workshop 3 – Site Title

by Yorgo Nestoridis

This work­shop is based sup­poses that you are equipped as per Web Design Work­shop 1 and Web Design Work­shop 2. Also you have taken care of the Basics by defin­ing your Pur­pose and Goals as well as by estab­lish­ing a Project Char­ter Document.

To make our job eas­ier we start from a known tem­plate, the brand new Semi­oman­tics XO release can­di­date. The goal of the entire work­shop is to be able to adapt the Design of Semi­oman­tics XO to your needs and pref­er­ences, or as the case may be to your cus­tomers’ taste.

To start with, let’s reset our design to next to zero and start with a white page:

This is what my sam­ple site looks right now: there is no con­tent on the site and the style zero is applied. You can find the ref­er­ence Make Money site HERE.

To reset your style to get the same look, please down­load the style-sheet fom Web Design Work­shop Mate­ri­als and load accord­ing to instructions.

Then reset XO set­tings from your dash­board under the Semi­oman­tics XO menu:

1. Header: Dis­able Logo, Dis­able User Login, dis­able 468×60 Header Add.

2. Front­page: Dis­able “Dis­play Lat­erst Story”

Wid­gets:

Under Appear­ance, Wid­gets: take out all widgets.

Add a blank Text Wid­get to the side­bar (s) you may have selected.

Now your page should look sim­i­lar to the above exam­ple, dis­play­ing Title, Tag line and Footer notes. (If you have already loaded con­tent, then your posts and pages will be vis­i­ble as well.

While you see a blank page, you know bet­ter! The appear­ance is mis­lead­ing as behind the blank or white page there is a whole array of Web Design ele­ments at work already. In order to keep our course sim­ple, we will take care of the design ele­ments step by step as we meet them and as we intro­duce them to our new site.

Good Web Design is the Art of max­i­mum com­mu­ni­ca­tion with a min­i­mum of means. Based on our Project Char­ter we know the Pur­pose, Goal and Tar­get audi­ence we want to reach and there­fore we also have done a study about the expec­ta­tions of that tar­get audience.

If you want to sell choco­late you need to live up to the expec­ta­tions of choco­late lovers: a blue and white yogurt site is most likely not what they expect; how­ever a creamy choco­late brown scheme with images trig­ger­ing all the senses stim­u­lated when actu­ally eat­ing choco­late would cre­ate imme­di­ate empathy.

Don’t for­get, web design is not art for art, it is com­mu­ni­ca­tion in func­tion of a tar­geted audi­ence and a tar­geted goal. So, always step back and klook at your progress from the side of a tar­geted visitor.

A good web designer is some­one who has the skill of aban­don­ing his belly-button views and to slip into the skin of the tar­geted audi­ence to then use his tech­ni­cal skills to com­mu­ni­cate with that audi­ence through an inter­face called the web site dis­played in browsers or feed and other read­ing devices.

I have described the 5 Ele­ments of Web Design ear­lier. Now we want to start look­ing at some of these ele­ments in rela­tion to our site and to the style as defined by our style-sheet.

Even on the above fea­tured blank page we are in pres­ence of some vis­i­ble build­ing blocks. The most vis­i­ble being the Title and sub title of the site (Name and Tag-line). This implies already that we have a clue about fonts, col­ors, shapes and images if you want to use a graphic header. Also we have to be able to define some lay­out ele­ments, such as the site width and height of the header.

As you see, the 5 build­ing blocks are present even on a “blank page”.

The XO RC theme makes it easy for users to select a pre-configured layout.

Select your site width, the num­ber of side­bars and one of 4 options for the lay­out of the front or home page. Select the posi­tion of the Name of the site in the header (Left, right or center).

For the pur­pose of this exer­cise and in func­tion of my Project Char­ter and Project Devel­op­ment, I will choose a with of 800 pix­els with one side­bar of 360 pix­els wide on the right side.

The rea­son why I select these set­tings: I want my site to be eas­ily vis­i­ble on any screen size and res­o­lu­tion as well as I want my site to be quickly eas­ily read­able by mobile devices. The use of just 1 side­bar will give a look of a 2 col­umn theme. The front page lay­out will be option 3 or 4; I will decide once I see con­tent on the site. The site name is dis­played on the left.

The dis­play of the name is defined by the style sheet: Font, Font Size, Font Color and Hover display.

This is the default code on your style zero style-sheet, lines 84 – 99 :

#title {
font-size: 48px;
margin: 20px 0 0;
margin-left: 5px;
padding: 0;
line-height: 34px;
}

#title a {
color: #222222;
}


#title a:hover {
color: #666666;
text-decoration: none;
}

Now, what does all this stuff stand for?

#title {= iden­ti­fies that the fol­low­ing block con­cerns the Title. The block’s def­i­n­i­tion is between the {}.

font-size: 48px; = font size

margin: 20px 0 0; = Mar­gin from top 20 px mar­gin from right 0 and magin from bot­tom 0

margin-left: 5px; = Mar­gin from left 5 pixels

padding: 0; = padding 0

line-hight:34px; = line hight 34 pixels

Next block:

#title a { = this con­cerns still the title; the let­ter “a” indi­cates that this has to do with the hyper­link asso­ci­ated with the title

color: #222222; = color of the title code #222222 (very dark gray) accord­ing to hexa­dec­i­mal color code.

} = end of the block.

Next block:

#title a:hover { = still con­cerns title with a hyper­link, but this time the hover effect: when you pass your mouse over the title, the style changes accord­ing to the def­i­n­i­tions in the hover block.

color: #666666; = is the color dis­played when you pass your mouse over the title, here a medium gray #666666.

text-decoration: none; = means there is no dec­o­ra­tion, such as under­line, bold, italic or such like.

} = closes the block.

Note:
At the end of every com­mand line there is a “;”! A block opens with “{” and is closed with “}”.

Also: there is no font def­i­n­i­tion in the block.

Accord­ing to my project, the my site design will show black #000000, white #FFFFFF, gray and red # B3000o to set accents. My Gray tones will be #222222, #333333, #666666.

For the pur­pose of this exer­cise I have selected web friendly fonts for my site: Geor­gia, Times, Arial, Ver­dana and Tahoma as well as “sans-serif and serif” for browser defaults.

I choose Geor­gia, alter­na­tively Times,  dark gray for my title and hover to red. The font-size will be reduced to 36 pix­els, the line size as well as the posi­tion and mar­gins I leave unchanged:

#title {
font-size: 48px;
margin: 20px 0 0;
margin-left: 5px;
padding: 0;
line-height: 34px;
}

#title a {
color: #222222;
}

#title a:hover {
color: #B30000;
text-decoration: none;
}

What remains to be done: we need to add the font. As we give a choice by pri­or­ity, we call for the font-family in the title block by adding a line as follows:

#title {
font-family: Georgia,  Times, serif;
font-size: 36px;
margin: 20px 0 0;
margin-left: 5px;
padding: 0;
line-height: 34px;
}

#title a {
color: #222222;
}

#title a:hover {
color: #B30000;
text-decoration: none;
}

My Title dis­plays now as desired in Geor­gia 36 pix­els and when pass­ing the mouse over it the hover color is well my red #B30000.

Note: Ihave reduced the font-size con­sid­er­ing that I will work with an site width of 800 pix­els where the font size 48 pix­els for Geor­gia or Times appears to be big: I reduce by 25%  by chang­ing the ‘fon-size’ from 48px to 36px.

On our style-sheet the default block looks as fol­lows on lines 102 – 108 on the style-zero style-sheet:

#description {
font-size: 14px;
color: #333333;
margin: 10px 0 0;
margin-left: 10px;
padding: 0;
}

I change font by adding a line defin­ing the font-family, font-size and color.

#description {
font-family: Verdana,  Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
margin: 10px 0 0;
margin-left: 10px;
padding: 0;
}

Note: The name of the site and the tag-line together inform about the con­tent. I con­sider them both as impor­tant, whereas the tag-line con­tains more infor­ma­tion. In the orig­i­nal ver­sion of the style-sheet, the huge Main Title steals the show of a weak tag-line, in fact, most vis­i­tors won’t even notice it. If the tag-line should not be noticed, bet­ter don’t pub­lish it. If how­ever it is like in my case, part of your mes­sage to your vis­i­tors, increase it’s impor­tance to a stan­dard grant­ing the nec­es­sary visibility.

Note 2: The margin-left is of 10px orig­i­nally, while on the Name of the site, the cor­re­spond­ing mar­gin is of 5 px;  per­son­ally I pre­fer to align Title and Sub-Title at the same level; I change thus the mar­gin left to 5px to be in line with the Name of the site.

The style-sheet as it is after these manip­u­la­tions can be down­loaded from the Mate­ri­als sec­tion. Work­shop 4 will start based on this new style sheet.

• Web Design Work­shop 5 Sub-navigation
• Web Design Work­shop 5 – Sub-Navigation
• Web Design Work­shop Navigation
• Web Design Work­shop 2
• Web Design Workshop

This page is wiki editable click here to edit this page.

Related posts:

1. Web Design Work­shop 2
2. Web Design Workshop
3. Web Design
4. Web Design Elements
5. Web Design Basics

Tags: Change Title Style, How to change Title Style, Title Style, Web Design CSS, Web Design Workshop, Yorgo Nestoridis

This entry was posted on September 5, 2009 at 11:57 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed.