Daniel's IGP Website Workshop...!
     

This workshop is made up of three parts, so try to stay awake:

1. Getting your domain name.
2. Have a look at other photographers sites.
3. Designing your website.



1
  Domain Name


If you're going to have a website you need a domain name or URL (Uniform Resource Locator) the domain name needs to be relevant to your site, eg if you're selling potatoes on the web, www.spud.com could be a good URL, where as www.muddyspade.com may be confusing...

As we are photographers and we have names, It might be a good idea to use your name for the URL, unless you have a business name. The good thing about owning your name is if you change careers etc you can just re-design the site to suit. unless you've been real dodgy and need to change your name as well...

Anyway the place I have gone for my domain names over the past few years is www.godaddy.com (this will open in a new window, so you can click it and still have this page open.) godaddy.com is one of the cheapest places on the web, you can buy URL's for US $8.95 which is around $13 NZ dollars. cheap as chips. I would recommend buying a .com, .net or .info, not a .co.nz because a .co.nz will cost you over $70 bucks, don't ask me why, and .tv is over $40 bucks. go to www.discountdomains.co.nz if you really want a .co.nz they sell them for NZ $29.95.

If you search around the net long enough I'm sure you'll find other cheap domain registers. Anyway back to godaddy: Type in the domain name you want into the search box, just like the one below. Select which domain extension you want, try .com first and click 'go'. You're not purchasing the name - just checking if it is available, so don't panic.


Write down the domain names that are available, so you can come back and buy them in the future.



2
  Photographers Web Sites


Plagiarism anyone?

Below I have listed a few different photographers web sites for you to peruse. Here are a few main things I want you to take note of as you surf these sites:

  • Take note of how they present their front page. Is it a title page or a welcome page with info.
  • How do you access an image? Via thumbnails, numbers, arrows, or do they load automatically?
  • Where are the navigation buttons located?
  • How prominent is the header?
  • What fonts are used?
  • Do they have a bio?
  • Is contact information available?
  • And how the site is constructed, how many clicks does it take to get to an image? Its best to try to keep click through's down to three.
  • Is the style of web site in tune with the photographic style of the photographer?

These two sites are examples of the last point:
www.christianpatterson.com

This site is young and fresh and a bit crazy which goes nicely with the style of his photography, which is quite odd, with photos of hair in the sink etc.

to contrast with that is this site
www.moederphotography.com
its clean and simple interface doesn’t distract from the photography. But is also in tune with the clean crisp photography on display.


www.barbaracole.com
Doesn't use thumbnails, hard to navigate, because its not obvious what you need to do to access site.

www.davidwaitz.com
Thumbnails are along the bottom in another frame.

www.aarongoodmanphotography.com
More of a complex layout using Flash, but not in a garish way.

www.rheaanna.com
Simple easy to follow layout.

www.keithmartinphoto.com
Thumbnails are made bigger by rolling over them, not clicking, effective if the person who is looking at site is on a fast connection. But frustrating for those who aren't.

www.charityphoto.com
Good example of a well conceived Flash site. Navigation and thumbnails are easily accessed, the only thing that might not be so good is that the header doesn't follow through the site.

www.goodmanphoto.com
Another nicely laid out easy to navigate site.

www.peterrodger.com
Not a nice site

www.danieltobin.com
Pure genius...

Two other handy sites:

www.photosource-enhanced.com
A good site that lists categorised photographers web sites

www.coolhomepages.com
Saved my bacon a few times when I worked as a web developer. When I'd get a case of designer block i'd go to this site and get ideas, or just totally plagiarise a site...sometimes...




3
  Design Your Website


Now that you have seen what's out there, and are suitably inspired, it's time to design your own web site. To do this you need to create a draft in Photoshop.

Click here to see the draft I made in photoshop for my site, When I was happy with the way it looked, I chopped each individual item out, like the header and nav buttons and saved them separately, ready to be put into Dreamweaver (the programme that you make the actual website in). But first we will make our draft:

1. Open New Photoshop File

Open Photoshop and go to File > New and in the window under custom select
800 x 600 as below:

That will open a new document the right size and resolution for a web site, we choose 800 x 600 because that's the most common sized computer monitor in use, we want to design for the smaller monitors so they can view our sites without scrolling.

2. Header


This is a Header ^


The first thing I normally create when starting a new website is the header, which involves selecting a font and maybe an image or two to go with it. Choosing a suitable font is important, it needs to go with the style of website you want to create and obviously be legible.
Having the header the way you want it gives you a good base to design the rest of the site.
So if you haven't already: type in your site name, select the font and position the header, left, right or centre?

3. Navigation buttons

< These are navigation buttons, or a menu.

One of the most important elements of your site, they need to be easy to read and uniformly placed - as in the same place on each page so your visitor doesn't get confused or lost, unless that's what you want. Like the Header, select an appropriate font and an image if you want it.
Do
you want each button to have a different image with it? Or each button to have a different colour or to be identical?
At this stage don't worry too much about what the button will say, you can just use the word 'button' if you want, all we are doing is sorting out the look of the site, the naming of pages and buttons can come later, and usually changes as the site is being built.
Position the buttons on the page, the usual places are the left side, right side or up the top under the header.

Here's some examples of the main placements for your menu:

Left Nav  |  Right Nav  |  Top Nav

So now you have your header and menu sorted, you've done the major part of the design for your site, these are elements that do not change throughout your site, the only thing that will change is the content.

So in summary the main points you need to remember when designing and building your site are:

  • Ease of use for the user of your site
  • A suitable easy to read Header.
  • Navigation that stays in the same place throughout the site and is also clear and easy to understand.
  • The structure of your site is uniform.
  • The three click rule, try to keep the click through's down to three.

As I said above after you have made the draft in photoshop, you would then chop up the different parts, save each one, then get into DreamWeaver and start to build the site - but that's another lesson.

That's all.

www.danieltobin.com

 Back to the Top ^