|
|
|
Web Design. Our Process.
We've found that in the vast majority of cases where we have to focus, it's best to step away from the computer, away from any electronic distractions, and create paper-and-pen prototypes for general layout. This allows us to quickly sketch and re-arrange elements on a webpage to make sure that everything we need is being displayed and that it makes sense where they're being displayed. At this stage, there are no decorations and no colors.
To get a feel for how the site will look, we move on to create a mockup in Adobe Photoshop. At this stage, decorations and colors come into play — and this is where creativity, artistic sense, and common sense come into play. (Creativity, artistic sense, and common sense are what separate excellent web designers from merely mediocre ones.) The mockup created in Adobe Photoshop is directly based on the pen-and-paper mockup, but with borders, colors, gradients, and so on. Once it looks good, we slice the image up into smaller images to integrate into a real webpage.
After the graphical mockup and slicing of the images, we hand-translate CSS/XHTML translation of the design. What does it mean to do this by hand, and why do we do it? When people talk about hand-coding CSS/XHTML, it means that CSS/XHTML is written from scratch, not generated using programs that automatically generate them. While this may seem wasteful when options exist to crank out and mass produce webpages, this method results in a cleaner and more professional look. The tools that auto-generate CSS and XHTML markup are often written for specific web browsers. Since they can only mechanically guess at the requirements of the site being created rather than step back and look at what it needs, there tends to be a lot of unnecessary markup created, which makes changing the design later on to be a hassle, and adds to the cost of sending the pages over the wire by taking up unnecessary bandwidth.
Finally, when the page looks good, we perform cross-browser testing with Firefox, Internet Explorer 6/7, Opera, and Safari. What looks good in one web browser may look terrible in another one, so we go in to the CSS and XHTML to fix the problem so the page looks right in every major web browser. This is also where hand-coded CSS comes in handy — if we had to work with generated code, it would take much longer to dig through the mountains of generated CSS to fix cross-browser compatibility problems.
