Basics Style Concept Workshop

Web Design Workshop 3 – Site Title

This workshop is based supposes that you are equipped as per Web Design Workshop 1 and Web Design Workshop 2. Also you have taken care of the Basics by defining your Purpose and Goals as well as by establishing a Project Charter Document.

To make our job easier we start from a known template, the brand new Semiomantics XO release candidate. The goal of the entire workshop is to be able to adapt the Design of Semiomantics XO to your needs and preferences, or as the case may be to your customers’ taste.

1. Start with a blank page

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

This is what my sample site looks right now: there is no content on the site and the style zero is applied. You can find the reference Make Money site HERE.

To reset your style to get the same look, please download the style-sheet fom Web Design Workshop Materials and load according to instructions.

Then reset XO settings from your dashboard under the Semiomantics XO menu:

1. Header: Disable Logo, Disable User Login, disable 468×60 Header Add.

2. Frontpage: Disable “Display Laterst Story”

Widgets:

Under Appearance, Widgets: take out all widgets.

Add a blank Text Widget to the sidebar (s) you may have selected.

Now your page should look similar to the above example, displaying Title, Tag line and Footer notes. (If you have already loaded content, then your posts and pages will be visible as well.

2. A Blank page is not a Blank Page

While you see a blank page, you know better! The appearance is misleading as behind the blank or white page there is a whole array of Web Design elements at work already. In order to keep our course simple, we will take care of the design elements step by step as we meet them and as we introduce them to our new site.

3. Keep it simple and to the point

Good Web Design is the Art of maximum communication with a minimum of means. Based on our Project Charter we know the Purpose, Goal and Target audience we want to reach and therefore we also have done a study about the expectations of that target audience.

If you want to sell chocolate you need to live up to the expectations of chocolate lovers: a blue and white yogurt site is most likely not what they expect; however a creamy chocolate brown scheme with images triggering all the senses stimulated when actually eating chocolate would create immediate empathy.

Don’t forget, web design is not art for art, it is communication in function of a targeted audience and a targeted goal. So, always step back and klook at your progress from the side of a targeted visitor.

A good web designer is someone who has the skill of abandoning his belly-button views and to slip into the skin of the targeted audience to then use his technical skills to communicate with that audience through an interface called the web site displayed in browsers or feed and other reading devices.

4. The 5 Elements of Web Design

I have described the 5 Elements of Web Design earlier. Now we want to start looking at some of these elements in relation to our site and to the style as defined by our style-sheet.

Even on the above featured blank page we are in presence of some visible building blocks. The most visible being the Title and sub title of the site (Name and Tag-line). This implies already that we have a clue about fonts, colors, shapes and images if you want to use a graphic header. Also we have to be able to define some layout elements, such as the site width and height of the header.

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

5. The Layout of Semiomantics XO RC

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

Select your site width, the number of sidebars and one of 4 options for the layout of the front or home page. Select the position of the Name of the site in the header (Left, right or center).

For the purpose of this exercise and in function of my Project Charter and Project Development, I will choose a with of 800 pixels with one sidebar of 360 pixels wide on the right side.

The reason why I select these settings: I want my site to be easily visible on any screen size and resolution as well as I want my site to be quickly easily readable by mobile devices. The use of just 1 sidebar will give a look of a 2 column theme. The front page layout will be option 3 or 4; I will decide once I see content on the site. The site name is displayed on the left.

6. The Site Name

The display 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 {= identifies that the following block concerns the Title. The block’s definition is between the {}.

font-size: 48px; = font size

margin: 20px 0 0; = Margin from top 20 px margin from right 0 and magin from bottom 0

margin-left: 5px; = Margin from left 5 pixels

padding: 0; = padding 0

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

Next block:

#title a { = this concerns still the title; the letter “a” indicates that this has to do with the hyperlink associated with the title

color: #222222; = color of the title code #222222 (very dark gray) according to hexadecimal color code.

} = end of the block.

Next block:

#title a:hover { = still concerns title with a hyperlink, but this time the hover effect: when you pass your mouse over the title, the style changes according to the definitions in the hover block.

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

text-decoration: none; = means there is no decoration, such as underline, bold, italic or such like.

} = closes the block.

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

Also: there is no font definition in the block.

7. Change Style of the Site Name

According 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 purpose of this exercise I have selected web friendly fonts for my site: Georgia, Times, Arial, Verdana and Tahoma as well as “sans-serif and serif” for browser defaults.

I choose Georgia, alternatively Times,  dark gray for my title and hover to red. The font-size will be reduced to 36 pixels, the line size as well as the position and margins 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 priority, 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 displays now as desired in Georgia 36 pixels and when passing the mouse over it the hover color is well my red #B30000.

Note: Ihave reduced the font-size considering that I will work with an site width of 800 pixels where the font size 48 pixels for Georgia or Times appears to be big: I reduce by 25%  by changing the ‘fon-size’ from 48px to 36px.

8. Change the style of the Tag-line

On our style-sheet the default block looks as follows 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 defining 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 content. I consider them both as important, whereas the tag-line contains more information. In the original version of the style-sheet, the huge Main Title steals the show of a weak tag-line, in fact, most visitors won’t even notice it. If the tag-line should not be noticed, better don’t publish it. If however it is like in my case, part of your message to your visitors, increase it’s importance to a standard granting the necessary visibility.

Note 2: The margin-left is of 10px originally, while on the Name of the site, the corresponding margin is of 5 px;  personally I prefer to align Title and Sub-Title at the same level; I change thus the margin left to 5px to be in line with the Name of the site.

Style-sheet style-header.css

The style-sheet as it is after these manipulations can be downloaded from the Materials section. Workshop 4 will start based on this new style sheet.

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

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