The Web Design Process

It all begins with a needs assessment. Through this discussion, the obstacles and challenges of any design can be understood and systematically addressed. What does the client wish to show the visitor? How is the visitor guided through the information in a logical manner?

I will use my own website, www.psypher101, as the example. And it, like many other web sites, started with the 960 Grid.

The 960 Grid (available at http://960.gs/) is an open source grid system that has effectively streamlined development based on commonly used dimensions. It has been used the world over by many a web designer. It essentially divides the "real estate" of a browser window into 12 or 16 columns or even 24 thinner columns, based on a width of 960 pixels.

When creating a layout I always start from the top down. I create a header that will contain my logo and navigation, a shape to work as a placeholder for what will eventually be the graphic slider, and finally a stylized box for the main content, and an empty footer section that will have a secondary (redundant) navigation and links to social media.

After that I create all of the elements that will fill the containers for the desired layout within Photoshop. I start with the Homepage, keeping all of the elements for the Homepage in a Photoshop group. At this point everything is still only in the design stage, this is not an actual functioning website although it appears to be. I decide to create a small contact form that will persist on the footer of every page, making the footer more functional.

Next is the main content for the About Me page, like the Homepage I keep all the contents in a Photoshop group. And the contents of each column are in aptly named sub-groups for better organization.

The following screenshot shows the Layers Pane in Photoshop, with the about group expanded. Each page is structured in a similar manner within Photoshop.

I then create the layout for the My Skills and Portfolio pages.

After the layout work is finished in Photoshop I start the task of "slicing" all the graphical elements. This process allows me to quickly export the logo, buttons, and any other graphics.

After the slices are created for the Homepage I hide the background layers to allow me to export clean transparent PNG files which I deploy and position correctly using CSS.

Now that all JPEG and PNG files are ready, I begin the process of creating the HTML for the website using the newly created assets. Like any website this starts with simply getting the copy together, not worrying about the layout just yet.

The process of applying the 960 Grid CSS to the completed HTML is simple. Most of the pages I designed use 3 columns for the copy, using the 12 col variant of the 960 Grid, I simply divide 12 by 3 to get 4. Now I know that I need to wrap the content for the 3 columns in the grid_4 div class. I do so and everything fits together perfectly. If something needs to be nudged left or right I either add the push or pull class to the div tag, or I write a unique line in the Grid CSS for more specific manipulation.

The animated elements of the site were implemented using JQuery. I used the Superfish plugin for the navbar; the Fancybox plugin for the portfolio viewere, and a combination of plugins for the Graphic slider at the top of the Homepage.

Finally, cleaning up the URL and separating the Header, Main Content, and Footer sections is handled through PHP. This is done so updates to the Header or Footer will be applied site wide and not require hard-coding of individual pages. This will save time in the long run.