lewro’s blog - 2.1 - web designer beginner

As part of my voluntary period I have started to work on 2 new projects. I spent lots of hours working with layers inside of my Photoshop files that I almost feel like I am sitting on one of them right now.

When I have turned back on my first design proposal I can not stop thinking how could I do it without layers management but I remember it was not easy. For those of you who do not have any idea what I am talking about let me describe it in a very simple way. Almost anything you create in Photoshop, either it is text area, rounded shape area or any other, they are all placed in their own separate layers. You can image that after couple of hours the number of layers will grow significantly. If you do not keep organized you will end up in the designer’s hell. OK, OK I am exaggerating but the true is that work will become very hard and extremely time consuming.

The best way is to create folders and subfolders and keep that way all the layers organized. Another very important thing is to name the folders with real names which represent the page divisions such are header, logo, footer etc. If you do it this way then looking for a particular object is just a matter of one or two seconds and not minutes as in case when you keep all the layers together in the main view.

I do not think that it is necessary to name all the layers but at least the folders and subfolders should be named. Another advantage of this system is that you can for example adjust opacity of the whole group of layers at once, or you can duplicate the group and use the same element somewhere else on the page. Good example is a button or the header background.

If you are interested what are the results of my latest work in Photoshop you can find them here and here.

Last couple of days I have been working on my second voluntary project for company called PC Planet. It is IT company which provides computer and mobile phone services together with internet cafe.

So how was the process?

Photoshop - design proposal

First of all I have created design proposal in Adobe Photoshop. It took me 8 hours to do it. Is it too long or is it OK? I have no idea. After I had an approval from customer I started the CSS coding. I cropped the Photoshop file into several images I was about to use in my CSS file.

XHTML

I have created clean xhtml document which validates as xhtml 1.1 Strict.

CSS

I created 3 basic CSS files as usually.

• Layout
• Typography
• Color

Later I have included one style sheet for IE6 and one for mobile devices.

Size of images

There is quite a lot of images used on the page but the total size of the whole web site is only 318kb so it should render pretty quick.

Scripting

I have not used any DOM scripting this time. The only script I used is the Google map.I like the way it can be dragged.

You will not be able to see it work on my test server because the API key is registered for the customers domain.

Browser’s support

I have tested the site in following browsers

• Firefox
• Opera
• Internet Explorer 7,6
• Netscape

Microformats

All contact information on the page are presented in microformats using vcard so they can be imported into MS Outlook or similar application for storing contacts which understands the format.

Time

It took me all together 30 hours to create this web site.

See it live

You can see the web site on my test server.