A lot of people thought of the word identity and looked inwards. They looked at their own experiences of past events and explained how those events shaped their identity. From this perspective one student went on to say that children/new born babies had no identity because they have not had any life experiences yet which would shape their identity. I found this idea to be a fairly interesting one and perhaps even a valid point. She then went on to explain that as the person gets older their identity becomes stronger as they have gathered more experiences.

Another student expressed a similar idea by telling the story of a fictional character by revealing the pieces of her puzzle. Each piece of the puzzle represented a unique experience to her which shapes her identity. He made the point that somebody’s identity is what people see them to be. We went on to say that we should not judge somebody’s identity before we really know then because we can be totally off. I can relate to this as the impression I originally had of the girl who’s image he had at the start was very different to the impression I had of her identity by the end of his presentation.

I believe that my identity website had a fundamental uniqueness compared to the rest of the students. Most of the other students looked inwards to explore what identity was. They looked at their own experiences and things that may have shaped their identity. I on the other hand looked outwards. I attempted to create a tool that people could use when wanting to create an online identity for whatever purpose they may have.

So as you can see there is a great diversity as to how the identity can be expressed and explored. From fundamental differences such as looking inwards to looking outwards to more specific ideas such as relating human identity to animal instinct (as in Ali’s presentation).

Perhaps the most fundamental flaw that can be found on literally millions of website on the Net today is too much information.  Yes … the most significant problem associated with a majority of websites up and running on the Net today is that they contain too much copy, too much content.

The most important rule that must be remembered when it comes to the development of website copy and content today is that less is more – and not the other way around.  The best strategy that you can employ to make the best and most appropriate use of website content is the integration of white space onto a web page. 

In this regard, you will want to properly utilize white space on both a macro as well as micro level when it comes to the appropriate and compelling development of web pages on your site.  You will want to consider the use of white space in the proverbial “grand scheme of things” (the macro level).  You will want to make certain that the overall design takes into consideration the generous use of white space.  Moreover, you will want to make certain that white space appropriately is injected into sentences and paragraphs that comprise the actual content maintained on the website pages (the micro level).

Ultimately, the use of white space will render a website far more attractive as well as the copy far more readable and compelling.  In short, you will make your site far more user friendly and extremely more productive when it comes to promoting a product, service or some other significant endeavor.

My case study is John Cow.

John Cow is the house hold name blog when it comes to making money online. Let us have a close look at what this website offers. I have very little knowledge about the making money online scene so I will be able to view this website in a fairly unbiased way.

The first thing that strikes me immediately when I first enter the website is the alias of John Cow. When I visit this website and read this name I automatically get a sense that this identity is big. Why is it that I get this impression? Well when I go to most websites the title/url of the website kind of straight away gives you hints as to what the website is about. For example websites like http://www.download.com and http://www.collinsbooks.com.au/ kind of tell you what the website is about. But when I visit a website with the url http://www.johncow.com there is no indication of what the website is about. Its just a name… Which kind of says to me ‘This is the website of John Cow… We don’t need to explain to you what this website is about because everybody knows who John Cow is and what he does… Gosh!”

Another reason why I get the impression that this website is run by someone big and powerful is the use of a very customized avatar. Avatars such as these are called mascots in the world of website design. One thing that most web designers understand is that having a professional artist create a custom web mascot for your website and online identity can be very expensive. Knowing this I automatically get the impression that a) This guy has money and b) This guy is serious about his website. Both of these points further reinforce the impression that the url and website title imply.

So how about the content of the website. Are these things that I just mentioned just a gimmick to make an average blog seem above average? Maybe, maybe not. I have no knowledge in the world of making money online so I cant accurately judge the quality of the content on this blog. However what I can say is that the url, together with the custom avatar and alias has built an reputable online identity within my mind. I see the owner of John Cow as being an important person within his community. For this reason I respect the content that is on his website and trust what is written there. So these small aspect may have in fact boosted the quality of his content as I see him as a credible source of information.

This is the website I am trying to make a  CSS layout for:

Click on the image below to view the website design..

This is the resulting code…

XHTML FILE

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link href=”css/master.css” rel=”stylesheet” type=”text/css” />
</head>

<body>

<div id=”top”>

<div id=”promo”>
this is promo
</div>

<div id=”options”>
this is options
</div>

</div>

<div id=”navigation”>
this is navigation
</div>

<div id=”bot”>
this is bottom
</div>

</body>
</html>

CSS FILE

@charset “utf-8″;
/* CSS Document */

#top{

width:986px;
height:505px;
background-color:#ffffff;

}

#promo{

width:986px;
height:284px;
background-color:#ffffff;

}

#options{

width:986px;
height:221px;
background-color:#ffffff;

}

#navigation{

width:986px;
height:31px;
background-color:#111111;

}

#bot{

width:986px;
height:500px;
background-color:#ebc795;
}

Summary

You can see how simple the code is in both the XHTML and in the CSS. This is the beauty of CSS, it cleans up your code a great deal

Ok lets get started.

Creating a layout in XHTML and CSS is a very easy thing to do even for people who have never had any experience with website development. I will explain to you how XHTML and CSS work together in an easy to understand way.

What is XHTML?

XHTML is a markup language which basically tells a web browser how to display a piece of information.

For example. Writing the following text <img src=”http://abc.com/123.jpg” /> tells the web browser to display an image which is found at http://abc.com/123.jpg. Knowing how to write quality XHTML is no more than knowing what tags are available to you for use.

http://www.w3schools.com/html/ Is a great website for expanding your XHTML knowledge.

However for or sake it is acceptable to not know any XHTML at all as I will explain everything that you need to know.

What is CSS?

CSS stands for cascading style sheets. It is basically a file that is connected to your XHTML file. Your CSS file holds characteristics (such as height, width etc) of items in your website.

Combining XHTML and CSS

When trying to create a CSS layout this is how the XHTML and CSS files work together:

In the CSS file we will be setting all of the characteristics of our rectangular areas. In this tutorial we will be working with width, height and background-color.

In the XHTML file we will actually call these rectangular areas and display them on the web browser.

STEP ONE: Defining your Div

Using Dreamweaver or any other similar application of your choice (notepad will work) create a file called master.css

In this file we will have all of our CSS code.

We will now create our first simple CSS layout.

In your master.css file write the following code

#top-container {

width:500px;

height:300px;

background-color:blue;

}

#bottom-container {

width:500px;

height:600px;

background-color:red;

}

In this piece of code we have defined two divs (divs are rectangular areas in CSS). We have given each of these divs an ID. A div id is basically a way of labeling the div.

Our first div is called top-container. All of the rules associated with top-container are contained within the { and }.

So the following rules belong to top-container:

width:500px;

height:300px;

background-color:blue;

So as you could imagine, the first step of creating a CSS layout would be to declare your divs (rectangular areas) in the CSS file and the provide them with their attributes.

If you are working with a website design which originates from a PSD file the trick is to use the slice tool to break apart your PSD file into rectangular slices. Then using the slice select tool you can double click on any slice to retrieve its height and width.

Make sure that you use a logical labeling system within your CSS when you are naming your divs. There is nothing worse than downloading a CSS template and seeing DIVs labeled as #div1 , #div2 , #div3 etc. Try use meaningful names such as #content-left, #header, #footer,  #navigation etc.

Onto the XHTML

This is a XHTML skeleton for you to use. Use dreamweaver or any text editor to create a new .html file. Paste the following code into the newly created file.

<! DOCTYPE html PUBLIC “-//WC3//DTD XHTML 1.0 Transitional//EN”
	“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
	<!– The DOCTYPE tells the browser which HTML standard to use–>
<html>
<head>

<meta http-equiv=“Content Type” conent=“text/html; charset=UTF-8″/><!– Sets the character mode to UTF-8 –>

<title>Kristian Tasevski-Home</title>

<meta http-equiv=“Content-Language” content=“en-us” /> <!– Sets language. Good for engine searches–>
<meta http-equiv=“imagetoolbar” content=“no” /> <!–Stops the internet explorer tool bars appearing over images –>
<meta name=“MSSmartTagsPreventParsing” content=“true” /> <!– Stops the smart tags on the page from being parsed –>

<meta name=“description” content=“description goes here” /> <!– Website Description –>
<meta name=“keywords” content=“keywords go here” /> <!– Website Keywords –>
<meta name=“author” content=“author goes here” /> <!– Website Author –>

<style type=“text/css” media=“all”>@import “css/master.css”;</style> <!– Specify the CSS file to be displayed –>
</head>

<body>

</body>

</html>

The area that we will be working with is the space between the <body> and </body> tags. This is where all the content for the website goes.

So now that we have created our divs in the CSS file we need to actually use them in our xhtml file.

This is how we call a div:

<div id=”div-name”>

content goes here

</div>

So for example if in the CSS we labeled one of our divs as  #content-left

i.e

#content-left{

height:100px;

width:100px;

}

we would do the following in the XHTML file:

<div id=”content-left”>

this is the left hand side content…

</div>

So no we go ahead and call all of the divs that we need in order from top to bottom.

Once a website designer has finishing producing their amazing PSD file they may be dumbfounded on what to do next. The following series of posts will guide a designer on how to convert their PSD file into a working XHTML/CSS website. We will assume no knowledge about XHTML and CSS so each line of code will be explained.

Slicing a PSD

Step One: Deciding on a Div Structure

Building a website layout involves creating rectangular areas which hold content. Each of these rectangles can be given attributes such as length, width, color and many more. The first step of slicing a website is trying to visualize how you would break apart your PSD/website design into rectangular areas.

Consider the following website:

Have a look at the website and consider how you would break up this website into rectangular areas…

When considering how to break up a website into rectangular areas you should consider the different elements on the website. Elements are basically any item on your website. These elements could include a navigation, a block of text, an image or any other distinct item on the website. It is logical to have major elements sitting in their own rectangular area which is made particularly for that element.

When slicing in this element based way it is best to take a top-down approach. Basically we first create rectangles which separate the major pieces of the website. Here is how I would define the major rectangles for the above website:

The different colors in the image represent the different rectangular areas which I have defined. I would like to stress that there is usually many many ways to successfully define your rectangular areas. There is technically no right or wrong answer to how you define your rectangular areas. However defining logical rectangular areas will help you out a great deal when it comes to coding the XHTML / CSS.

Step Two: Incorporating your Div structure into your PSD

Now that you know how you want to define your rectangular areas we can now define these areas in your PSD file.

1. Open your PSD file in Adobe Photoshop
2. Enable rulers by clicking on View -> Rulers. The shortcut is ctrl+r(PC) or apple+r(Mac).
   Enabling rulers displays a ruler above your canvas and a ruler to the left of your canvas. Rulers enable to you to create guidelines which help you with defining areas.
3. Use the rulers to create the guidelines needed to define your rectangular areas.
   To create guidelines left click on one of the rulers (above your canvas or to the left of your canvas) and drag onto your canvas. This creates a baby blue guideline in the position you released your mouse. The great thing about these guidelines is that objects will ’snap’ to the guidelines, allowing you to easily align things.Take a look at the following YouTube video for more information about rulers:
   http://au.youtube.com/watch?v=ROT8_2KvgnQ
   
4. Now that you have your guidelines in place we can now use the slice tool to define your areas.
   Select the Slice Tool from the tool bar. It is the 6th item on the tool bar and is beneath the crop tool.
5. Simpy using the Slice Tool to create your rectangular areas. Notice how the slice tool will snap to the guidelines that we just created.
   Your PSD file should now be over-layed with these slices.The following image shows how it should look:
   
6. One of the main reasons why we create these slices in Photoshop is so that we can see the dimensions (height and width) of each slice. This helps us create our divs (rectangular areas in CSS)
   To see the dimensions of any of these slices use the Slice Select Tool. To choose the Slice Select Tool left click and hold on the Slice Tool in the tool-bar. This bring up a menu with two items: Slice Tool and Slice Select Tool. Choose the Slice Select Tool.
7. With the slice select tool activated you can now simply double click on any of your defined slices. Doing this will bring up a menu which tells you information about your slice. Theinformation we are interested in is height and width.
8. 

The next post in this series will take the reader through creating these rectangular areas in XHTML / CSS. We will use these rectangular ares as containers which will house our elements

The website will be an online resource which will help people create their own online identities. The website will feature the following resources

• Alias Generator: The alias generator will consist of a simple PHP script which will combine randomly selected words in a database. The extensive database will hopefully provide an alias generator which can produce some unique names.
• Avatar Database: There will be a section which features a collection of small avatars which people can adopt as being the graphical representation of their online self. Such avatars are usually used in forums and other online communication.
• Custom Avatar Creators: I will explore custom avatar creator programs such as the Create a South Park Character web application.
• Blogging Resources: Blogging is a great way to establish a web presence. I will provide some tools and tips on setting up and running your own personal blog.

The features of the website will be elaborated and more detail will be revealed as the project progresses.

click the above image to see a screenshot of the psd mockup

When most web designers and web developers come across the term web design we are automatically bombarded with images and ideas regarding the form and functionality of a web site. The term web design to me refers to the production of web related material which serves a role and has meaning. The role being played by this web material can be as simple as promoting a product or informing users about something. Basically if the web content is acting to “do” something such as sell a product it is a product of design.

To me the term web art relates to the aesthetical aspects of a website or any artwork using a website as a means of propagation. The pieces of web art have a simple purpose, to communicate a message through it’s form.

Let us examine a website to explore these two terms.

This website belong to IDAD, the freelance design studio of talented designer Eric Smith. I intentionally chose to examine this website because gallery websites such as this one seem to lay on the elusive borderline between design and art. I explained above that I separate design and art based on functionality, where products of design serve a purpose whilst products of art serve to communicate an idea.

The functional form of the IDAD website is that of a gallery of previously made CG work. Upon seeing this form we would intuitively classify this website as an art based website; one which uses the web to propagate the ideas of previous work.

However on closer inspection it can be seen that this gallery is serving a very functional purpose. The gallery acts as a means of advertisement, a way of selling a product. The product in this situation however is the designer himself, Eric Smith.

Thus although this page actually posses a form which we would associate with an artwork based website this website is clearly an overall product of design, serving as a means of marketing and promoting this freelance design studio.

Below is a collection of 18 beautiful websites all boasting an exquisite creative flair and originality.

For more web inspiration visit our web inspiration category or visit Cheb 2.0

Web design is crucial to any website. A website may offer the most amazing content, but if it is bundled with uninspired, drab design, not many visitors are going to give it a second look. There are various sources that a web designer can draw web inspiration from for his/her web design and a most useful resource for this purpose is a web design blog. Blogs are a great option to offer information as they can be updated regularly and effortlessly. The world of web 2.0 design is ever changing and growing and a great tactic that a web designer can use to stay up to date with advancements in the world of web design is to visit good and useful web design blogs regularly.

#1 Cheb 2.0 Web Design Blog

There are a lot of web design blogs out there today and a person looking for a good blog can be confused regarding the choice of a good blog that truly will enhance their design knowledge and provide web inspiration. www.cheb.com.au is a wonderfully informative and useful web design blog run by Cheb, a web specialist based in Sydney, Australia. Cheb has been in the forefront of the Australian web design industry and has been actively involved in various types of web design, ranging from simple static pages to high-end e-commerce and social networking portals. The firsthand knowledge of the owner is clearly reflected both in the web design and the excellent content of the site. Cheb also writes various journals and articles on web design and other technical topics.Coming to the website, it sports a clean, easy to navigate format with pleasing colors and cool design elements.

The blog offers a variety of blogs that are very relevantly categorized. Wordpress, Gaming, Search, Web Design, Web 2.0 are just some of the categories under which various informative blog posts are available. Right from the latest news on the various big players in the world of Information Technology to thorough analysis of the latest hot stuff in web design are on offer on this blog.

A great feature is that in addition to news, cheb.com.au also offers lots of informative tutorials on web design and other related topics for novices and experts alike. A feature that makes this blog stand out from other web design blogs is the Web Tools feature that it offers. This feature offers free, latest software tools that aid in web design and is something that any web designer will be delighted to hear about. This new feature is in the infancy stage with a lot more promised in the coming weeks.

Sydney Web Design is the link that takes you to the page where you can read about the services offered by Cheb. The page lists the clients that Cheb has worked with which is quite an impressive list and also details the various freelancing services offered by Cheb. If you are interested in hiring Cheb’s services, all you need to do is fill up a simple form on the page to get a free quote.The fact that this blog has been listed in various popular CSS/Design galleries and websites is proof of its quality. RSS feeds are also available to keep up to date with the information on the blog. To sum it all up, www.cheb.com.au is a great place to be for anyone interested in web design.

For more web inspiration www.cheb.com.au also has a blog post titled Web Design Inspiration: classic online advertising. This article rounds up a nice collection of both online and offline forms of advertisement. The adds feature incredible creativity as well as originality. Additionally Cheb provides his personal thoughts and rating towards each of the chosen advertisements.

#2 Smashing Magazine

Blogs can be very easily and frequently updated with fresh content and so offer the best option for someone looking to stay up to date on the latest happenings in the world of web 2.0 design. There are hundreds of web design blogs out there and it can be quite confusing to choose a good one. Not all offer good content that will truly be useful in enhancing the web inspiration of a designer and at the same time keep them abreast of all the latest news in web design. But some golden nuggets do exist in this huge pile of pebbles, and www.smashingmagazine.com is most certainly one of them.This site has a huge feature list and offers a number of freebies that will get any web designer excited. A great feature is the How-To category that offers in-depth articles that explain web design and other related techniques from scratch allowing a novice designer to learn a completely new concept with ease. These articles also go ahead and explain advanced techniques as well, and even the expert, experienced designer might find a new tip or trick that he/she didn’t know earlier. With complete snapshots of each step involved, these articles are sure to keep any web design fanatic involved for hours.

The Graphics segment offers a wide variety of graphics-related articles and freebies. Free high quality icons, wallpapers, useful images and free graphics software are all available and are sure to get the avid web designer really excited. And the best thing is, all of them are available for free download! It’s a useful and myriad collection of graphics and related stuff.

Design Showcase is where all the cool new developments in the world of web design are exhibited for everyone to see and get familiar with. Various articles on good practices for blog or site design, latest drawing, style, typography options and really cool contests for budding designers can be found here.

The inspiration section offers samples of state of the art brochures, calendar designs, booklets, photography, packaging and product design and so much more for designers to derive that all important web inspiration from. Of course, every designer needs his fonts and the Fonts section offers just that. New, cool fonts are up for download every month in the Fonts of the Month section. CSS editors, graphics related tools, various other graphics software packages, product reviews, tutorials… the list goes on and on.

Further web design inspiration can be obtained by browsing through our Web Inspiration category.