2 main types of designing a resume/portfolio web site
It appears that many of you are having difficulty designing your web site. So I thought I'd create a step-by-step guide, to make your job easier. Because designing your web site should be relatively easy. Remember to keep it simple - VERY simple. There are really only two directions to go in terms of basic design: one using a masthead, the other using individual page images (or non-masthead type).
MASTHEAD TYPE OF WEB SITE
With the masthead-type of web site, you are using a masthead to create a theme, and add visual interest. This masthead remains consistent on each page. All you need to do for each page is to add content, and possibly some tiny images along with your text.
A masthead is simply a collage, a combination of images that set a theme for what your site is about, what you're interested in, and is appealing to your potential employer. For this exercise, I will use my already created collage - "The Dragonfly." Since I wish to make my theme around "art/creativity" I'll use my collage which communicates both, because I'm likely going to apply for an art director's job.
I'm going to create an "index.htm" page, and then a content page, or a "home.htm" page. These two pages will be quite different in layout. Let's do the index.htm page first. I'm simply going to use my collage as the main layout, except that I'll make the dimensions 800x500 pixels.
In order to make it fit, I've centered my dragonfly collage in the middle of my 800x500 canvass area. I filled the background with black. Then I deleted the top and bottom of the dragonfly collage image, and using the rectangular selection tool, selected a horizontal area around the top, and then the bottom, and used the Guassian blur tool at 10 pixels to blur the edges of the top and bottom. This makes it look like the image belongs in the centre of the image, and blurs into the black background.
I realized I wanted to create a rollover for this centre image. Once a visitor comes to the site, and places their cursor over this image, then I wanted the dragonfly collage image to change to black and white (to show that it is active) and add the words "click to enter." This I added in red, with a white glow around the lettering.
Creating the "home.htm" page
Now I need to design a page, using a masthead, employing the dragonfly collage, while also adding a navigation bar, and an area in which to place my content/text.
I'll begin with creating a masthead, using the dragonfly collage. The webpage will be 800x500, and the masthead/collage needs to be 800 pixels x 110wide. Using half the width, I selected half the area with the rectangle selection tool, then used "Paste Into". The dragonfly collage image was pasted into this area, which I then used CTRL T (Transform) and enlarged it until it fit the area. Then I repeated this process for the second half of the 800 pixel wide banner, but this time I focussed on the "slipstream" word. I again enlarged the image until it fit the second half.
In order to make the two halves blend together, I merged the two layers, then selected the area between them, and used the Gaussian blur filter to make them blend together. Here is the effect:
Now I need to add the "logo" or my name. Again, I'm keeping it very simple. I know from experience that keeping your "logo" very simple is the best direction, especially when it comes to corporate communications (such as your resume/portfolio web site), because anything more fancy appears like you're trying to sell yourself too hard. So I made "michael" in regular arial, and "jorgensen" in "arial black". Feel free to use this method yourself. You can change fonts, but keep your first name in a thinner font, and your last name in a thicker font. You could add interesting characters between your first and last name, such as a "|" or a "/" or an underline "_" or a square, a circle, a star, etc. In this case I decided to use my dragonfly icon to separate my first and last name. And I placed it on the top left handside, above the masthead. You could also change the colour of either your first or last name to add visual interest.
With a "Masthead" design, it's likely that you'll add your navigational bar down the left hand side (sometimes the right hand side) of your web page. Keeping the text of the links simple, possibly having a background or shape around them are possibilities. Here, I've opted to keep the minimalism, and just used Times New Roman Italic, to mimic the "slipstream" word. I've given the white text a slight blow "glow". If these were rollovers, I might change the colour to the greyish blue I used in the main text area.
I decided not to put additional html links at the bottom, since the entire page appears within one screen, and no scrolling will be required.
I decided to make the text/content area black, like the rest of the back. This keeps the dramatic effect, as well as an overall visual consistency. The text used was Verdana, 11pt, with extra spacing. I added a small picture of the dragonfly to break up the block of copy, and add visual interest.
Notice how I tied the theme in from my masthead and index page, into the introductory copy. This is important to put your theme into context. I'm probably exaggerating the themes in the copywriting, but I did so, to show you how it could be done.
Finally, I added a copyright notice at the bottom.
Now I can use this "home.htm" page for each page, just changing the content and small images for each.
It's easy to use, simple to comprehend, easy to change - yet has a consistent and hopefully interesting visual interface. Much more could be experimented with...but at least this gives you an idea of how to approach a MASTHEAD TYPE web site. Keep it simple, dramatic, fun, and you'll get people's interest.
Feel free to follow similar steps in the design of your own web site!
POSTSCRIPT
After thinking about the design overnight, I was unsatisfied with it, and came up with some new ideas. I redid the collage completely so that it fit better in the masthead, I made the dragonfly overlap the masthead to add visual interest, and changed the background from black to a gradient using greys. I also made the paragraph begin with a "headline" to lead the reader into the copy.
Instead of user "outer glow" filter on the navigational bar text, I decided to use a "drop shadow," and also applied this to my logo name and picture. Finally, I used 80% black for the bodycopy - this is a trick used by professional graphic designers to make bodycopy more "designy," rather than just using 100% black.
It appears that many of you are having difficulty designing your web site. So I thought I'd create a step-by-step guide, to make your job easier. Because designing your web site should be relatively easy. Remember to keep it simple - VERY simple. There are really only two directions to go in terms of basic design: one using a masthead, the other using individual page images (or non-masthead type).
MASTHEAD TYPE OF WEB SITE
With the masthead-type of web site, you are using a masthead to create a theme, and add visual interest. This masthead remains consistent on each page. All you need to do for each page is to add content, and possibly some tiny images along with your text.
A masthead is simply a collage, a combination of images that set a theme for what your site is about, what you're interested in, and is appealing to your potential employer. For this exercise, I will use my already created collage - "The Dragonfly." Since I wish to make my theme around "art/creativity" I'll use my collage which communicates both, because I'm likely going to apply for an art director's job.
I'm going to create an "index.htm" page, and then a content page, or a "home.htm" page. These two pages will be quite different in layout. Let's do the index.htm page first. I'm simply going to use my collage as the main layout, except that I'll make the dimensions 800x500 pixels.
In order to make it fit, I've centered my dragonfly collage in the middle of my 800x500 canvass area. I filled the background with black. Then I deleted the top and bottom of the dragonfly collage image, and using the rectangular selection tool, selected a horizontal area around the top, and then the bottom, and used the Guassian blur tool at 10 pixels to blur the edges of the top and bottom. This makes it look like the image belongs in the centre of the image, and blurs into the black background.
I realized I wanted to create a rollover for this centre image. Once a visitor comes to the site, and places their cursor over this image, then I wanted the dragonfly collage image to change to black and white (to show that it is active) and add the words "click to enter." This I added in red, with a white glow around the lettering.
Creating the "home.htm" page
Now I need to design a page, using a masthead, employing the dragonfly collage, while also adding a navigation bar, and an area in which to place my content/text.
I'll begin with creating a masthead, using the dragonfly collage. The webpage will be 800x500, and the masthead/collage needs to be 800 pixels x 110wide. Using half the width, I selected half the area with the rectangle selection tool, then used "Paste Into". The dragonfly collage image was pasted into this area, which I then used CTRL T (Transform) and enlarged it until it fit the area. Then I repeated this process for the second half of the 800 pixel wide banner, but this time I focussed on the "slipstream" word. I again enlarged the image until it fit the second half.
In order to make the two halves blend together, I merged the two layers, then selected the area between them, and used the Gaussian blur filter to make them blend together. Here is the effect:
Now I need to add the "logo" or my name. Again, I'm keeping it very simple. I know from experience that keeping your "logo" very simple is the best direction, especially when it comes to corporate communications (such as your resume/portfolio web site), because anything more fancy appears like you're trying to sell yourself too hard. So I made "michael" in regular arial, and "jorgensen" in "arial black". Feel free to use this method yourself. You can change fonts, but keep your first name in a thinner font, and your last name in a thicker font. You could add interesting characters between your first and last name, such as a "|" or a "/" or an underline "_" or a square, a circle, a star, etc. In this case I decided to use my dragonfly icon to separate my first and last name. And I placed it on the top left handside, above the masthead. You could also change the colour of either your first or last name to add visual interest.
With a "Masthead" design, it's likely that you'll add your navigational bar down the left hand side (sometimes the right hand side) of your web page. Keeping the text of the links simple, possibly having a background or shape around them are possibilities. Here, I've opted to keep the minimalism, and just used Times New Roman Italic, to mimic the "slipstream" word. I've given the white text a slight blow "glow". If these were rollovers, I might change the colour to the greyish blue I used in the main text area.
I decided not to put additional html links at the bottom, since the entire page appears within one screen, and no scrolling will be required.
I decided to make the text/content area black, like the rest of the back. This keeps the dramatic effect, as well as an overall visual consistency. The text used was Verdana, 11pt, with extra spacing. I added a small picture of the dragonfly to break up the block of copy, and add visual interest.
Notice how I tied the theme in from my masthead and index page, into the introductory copy. This is important to put your theme into context. I'm probably exaggerating the themes in the copywriting, but I did so, to show you how it could be done.
Finally, I added a copyright notice at the bottom.
Now I can use this "home.htm" page for each page, just changing the content and small images for each.
It's easy to use, simple to comprehend, easy to change - yet has a consistent and hopefully interesting visual interface. Much more could be experimented with...but at least this gives you an idea of how to approach a MASTHEAD TYPE web site. Keep it simple, dramatic, fun, and you'll get people's interest.
Feel free to follow similar steps in the design of your own web site!
POSTSCRIPT
After thinking about the design overnight, I was unsatisfied with it, and came up with some new ideas. I redid the collage completely so that it fit better in the masthead, I made the dragonfly overlap the masthead to add visual interest, and changed the background from black to a gradient using greys. I also made the paragraph begin with a "headline" to lead the reader into the copy.
Instead of user "outer glow" filter on the navigational bar text, I decided to use a "drop shadow," and also applied this to my logo name and picture. Finally, I used 80% black for the bodycopy - this is a trick used by professional graphic designers to make bodycopy more "designy," rather than just using 100% black.
posted by MJ at 3:50 PM
0 Comments:
Post a Comment
<< Home