Web Designer Process
Selecting the right design
Introduction
Web design is a process of conceptualization, planning, modeling, and execution of electronic media content delivery via Internet in the form of Markup language suitable for interpretation by Web browser and display as Graphical user interface (GUI) (source: Wikipedia). Selecting the best web design plays a very crucial role in web project, especially during design stage. Without a definite template to pattern with, designing a website will cause much time than expected.
The scheduling
A web consultant will seek a design schedule from the Production Manager. By default, a web design will be scheduled one week upon notifying the Production Manager. Example, if the consultant asked for a schedule on Dec 11, the project design will be completed on Dec 18.
Below is the typical design schedule:
| Sample design | Design revision | Sample design | Design revision | Sample design |
Choosing the right template
One role of the web consultant is to provide the chosen template by the client. Letting the client select the template lessen the designing time. Remember that based on the contract, the design is a template-based, meaning that the design is patterned to an existing website, although altering and modifying to fit client’s materials is greatly encouraged.
The Requirements
There are two requirements prior web designing, which should be provided by the web consultant. These are:
- Web design questionnaire – an answer sheet that is given to the client. It asks what are the client’s preferences with regards to fonts, company color, images, presentation, overall look, competitors, etc.
- A sample template which can visualize further the desired layout of the client.
Design deliverables
A web designer is given one day to complete the task, which includes:
- Home page design – raw file (psd format)
- Subpage design – raw file (psd format)
- HTML pages – both homepage and sub page
It is imperative for a web designer to complete the web design within the day. All the files (source, html pages, other files) must be saved in\\cerebro\ProjectA\ProjectA\projects\. (See chapter regarding Web Server for more details).
Updating the Php Collab
Once the designer has completed his project, he/she has to update the project in the Php Collab, a Project Management website. (see separate chapter regarding Php Collab for more details). He must update his task Web Design status to Production completed. The designer must also put the URL of his project in the Discussion section.
Design Libraries and Resources
If the graphic designer needs better images for his project, he / she can access \\cerebro\Data\lib\Photoimages\. This is Production’s design and script library. Here the designer can get:
- Clip-arts
- Design Templates (in jpeg format)
- Icons
- Backgrounds, textures
- Brushes
- Javascript
- Graphics
- Flash movie clips and masks
Web designer is encouraged to contribute new ideas and styles since designing is an evolving process / activity.
Web Design – WebFocus style
Here are some of important guidelines that the designer must remember:
Web site falls into three categories:
Ice web sites: are very rigid sites. The box that holds the content is fixed to the left. On higher resolutions appears a blank space stripe on the right causing a lack of equilibrium in the design.
Jelly web sites: are the middle solution between rigid and flexible. The box holding the content is centered at any resolution thus preserving equilibrium, while still not using up all of the available space.
This is the most common category we use.
Liquid web sites: are the utopia of flexibility, a site with no constraints whatsoever. Liquid sites expand or shrink to the available space on the screen monitor, no matter what browser window size or resolution the user might be using.
- Always put footer on the web design. Remember to include “Website developed by WebFocus Solutions, Inc. and hosted by ServoBox.” It helps WebFocus’ and ServoBox’s SEO ranking, not to mention the acknowledgment it brings to the company. The client may want to remove it from the design, so don’t be surprised if they request for it.
- You may use Photoshop brushes, but make sure that it complements the design and the ‘personality’ of the website.
- The most used fonts are Bank Gothic, Myriad, News Gothic, Micro gamma, Edwardian Script. But make sure that you are using the appropriate font for the design.
- The folder name of a project should be the domain name. No dots needed. Example: folder name is webfocusph, or servoboxcom
- Inside the project folder, create a separate folder and name it ‘src’. Inside the ‘src’ folder create a sub folder for each file format. Like ‘psd’ for photoshop files, ‘png’ for fireworks, ‘fla’ for flash, and so on.
- Never mix source files from materials. Materials folder is maintained by the web consultant.
- Use your creativity and design talent. But don’t hesitate to ask the web consultant or the Production Manager for advises.
- Be patient with revisions.
- New design size standards:
- Top Image Navigation button height: 20 to 25px
- Top Main Navigation (height, below flash): 30 to 35 px
- Width Size (if design is Ice or Jelly types): 900px
- Footer font size: 9 to 10 pixels, Arial
- Left Navigation Width: 250 px;
- Body Font color: #333 (if white background)
- Font Style: Arial 12 px; Verdana 11px; Georgia 12 px;
- Line-height: 12px;
- Letter-spacing: none
- Image Border: 1 to 2 px
- Footer label: Website developed by WebFocus Solutions, Inc. and hosted by ServoBox.
- Inclusion of sitemap link in footer
- Inclusion of favicon.ico
