Guide To Web Designing

[custom_frame_left shadow=”on”][/custom_frame_left] In this article, we are going to learn professional steps in web designing which is a series of 4 articles. Professional steps of web designing articles explains the practical techniques involved in understanding the client requirements, designing a layout in Adobe Photoshop*, Optimizing, slicing and HTML Conversion of the layout in Adobe ImageReady* and developing HTML Pages, making the website compatible in 800 X 600 pixels, 1024 X 768 pixels resolution compatible through Macromedia Dreamweaver*.

The current article explains the expectations of a client in the web design industry, the steps to understand and implement the client requirement.

Clients Requirement

• Website should look and feel different

• The website must project a business image

• Corporate colors should be used prominently

• Launch is in a week. Seven days flat

• Above all, it should download fast

These are the requirements a client usually expects before placing an order.

Well friends… speed kills… but in today’s competitive web-design scenario, speed and creative concepts are the only vehicles that can help one race ahead of others. Having an innovative layout ready – hot and quick – is what will make a winner in this demanding industry.

So, first study your client. A smart way of doing this would be to summarize his expectations into a mission statement or goal to challenge your creative stamina.

Why A Step-wise Approach?

Come to think of it, its really simple designing a website. Just open Macromedia Dreamweaver*, MS FrontPage* or MS Word* select your stuff and save as HTML thus the Web Page is ready!

By using web authoring tools like Macromedia Dreamweaver* or saving HTML from MS Word*, anybody can create a quickie web-site, but what about the Design Part ?…the Aesthetics ?

It is here that the question for a step-wise approach to professional web designing arises. There must be some path for a web-designer to follow, which gives his client the best-designed website in the shortest possible time.

Step-wise approach facilitates:

• Designing a website, that keeps in mind all the basic elements like the clients corporate colors, logos & symbols, product gallery, etc.

• Optimization of graphic images so as to reduce the size of a page and thus enable it to download fast.

• Converting a graphically designed page to web format (HTML), so it can be uploaded on the Internet.

What Are these Steps?

• Design the Home Page and Inside Pages, using Photo Editing software like Corel Draw*, Adobe Photoshop*, Macromedia Firework*, Corel Photopaint* etc.

• Optimize & Slice the pages using software like Adobe Image Ready* or Macromedia Fireworks*.

• Save as HTML through the Photo Editing software and provide links using web-authoring tools like Microsoft Frontpage*, Macromedia Dreamweaver*.

Internet became popular very fast, especially after invention of browsers, which made it possible to view pictures along with text information. That made many users get connected to Internet.

The point here is graphics plays very important role in web design. Pictures or images if presented in the right way can communicate and drive the message better than words. If a web page is created using HTML without graphics then the power of the Internet is under- utilized.

An Image cannot be created using HTML and thus comes the need for an appropriate Photo Editing Software.

The first step is to design a home page using a good Photo Editing software.

A Photo Editing software gives the flexibility of placing an image, and creating a collage of different images, changing color combinations, adding effects to make the site look attractive.

Points To Remember While Designing A Home Page

I. Page Size

In Photo Editing software, the size of the page should be 779 x 434 pixels.

There are three commonly used monitor resolutions 640 x 480, 800 x 600, 1024 x 768. In web designing, designers generally prefer 800 x 600 resolution.

Why 779 x 434 pixels?

In professional web designing, scroll bars should not be visible on the home page specially horizontal scroll bar. Home page should fit the screen.

In a browser the upper area is occupied by the default buttons, address bar & bottom area is occupied by Windows task bar, hence the actual area which web designers get to display the Home page is 779 x 434 pixels.

II. Relevant Colors

Be very careful in choosing colors. for, e.g. green color cannot be used for a blood bank site & red color for garden – related products.

Before designing a website, it is recommended to study and understand the clients product & services.

For most of corporate web sites, white color background looks great. If the clients company has defined guidelines of corporate colors, then it is always advisable to use their corporate color.

III. Main products & services should be reflected on the home page:

A visitor who visits your clients web site to get information related to your clients product & services must see it at first instance on the Home Page.

Otherwise, the visitor will probably press stop & back button and leave the site which would be a great loss for your client. REMEMBER .. Home page is the clients first impression on the mind of the visitors.

If it generates interest, the visitor will stick around and surf further and if not, he will move out without getting any information.

In case the client deals in a large number of products and services then it may not always be possible to display them on the Home page. In such situation, a collage of the products and services can be displayed on the homepage. The individual photos can be displayed on the respective inside pages.

With the help of different layouting techniques, a designer can display the product very well. It is possible to display a wide variety of products in an attractive, systematic and well -charted outway.

Optimize & Dice Using Software

In a Photo-editing software the homepage occupies a lot of space and stores the file in its native format, which is not web-compatible.

The homepage must be saved in web formats like, .GIF or .JPEG. One simple way is to save the full layout in a single image as .GIF, this will make image web-compatible, but when it loads – it will load from top to bottom slowly depending upon the modem speed. In such case, a visitor might not wait & he will turn back as he fails to see anything for few seconds.

To avoid this the home page should be sliced into small images & then save it as .GIF or .JPEG depending on the image color requirement. This enables the page to download in parts and the visitor can view the layout being downloaded in parts and will wait for the full page to load.

Photo Editing softwares has in-built optimize & save as HTML facility. Optimization will reduce the home page size between 50 KB – 80 KB, which enables fast downloading of the page on an ordinary telephone line connection.

Web design softwares:

There are different Photo Editing softwares available. The most popular one is Adobe Photoshop*, Adobe ImageReady*. Others are Macromedia Fireworks*, Corel Photo Paint,* and Jascs Paintshop Pro*.

Photo Editing software which gives the facility to Design, Optimize, Save image as .GIF or .JPEG and Save the layout as HTML can be used for designing.

For creating and editing HTML pages Macromedia Dreamweaver* is a very user friendly software.

• Adobe Phtoshop* is the best photo editing software used globally by web designers.

• Macromedia Fireworks*, Corel Photopaint*, Jascs Paintshop Pro* any of these software can be used for designing and they have their own advantages & disadvantages.

• Adobe ImageReady* is part of Adobe PhotoShop* and very useful to dice & optimize a layout to make it lighter in size & convert graphic work into HTML format for the web.

• Macromedia Dreamweaver After conversion of the layout into HTML, web authoring software like Macromedia Dreamweaver* is required to insert text content and for providing links to other pages on the site.

Microsoft FrontPage* can also be used instead of Maromedia Dreamweaver* as it serves the same purpose.