First opinions please

dod

TPer Emeritus
Suspended / Banned
Messages
16,680
Name
Ebenezer McScrooge III
Edit My Images
Yes
I've decided it's time to do a proper website rather than just a gallery and armed with dreamweaver I've managed to put a basic front page together :) Needs the spacing sorted a bit and I'm not sure about the buttons and there's no links set up yet.

Here

I know it's not great but what's folks first opinions, harsh as you like :D never done this before so any tips/hints/recommendations would be hugely appreciated

Oh, and if this is the wrong section could a mod shift it please :thumb:
 
Right ! ;)

Initial impression, you have made the page too big ! Remember not everyone has a big screen with high res, set at 800*600 and create for that size, i have mine at 1024*768 and your site is too big for my screen ! LOL

The rest seems ok, but i think you need to sort the size issue out first !
 
Needs to be a bit smaller, I use quite a large resolution and couldn't get it all on screen at once.

The biker (I think) needs to fade at the edges, he seems to be floating off the page, although you made a great job of the masking to cut him loose!

I'd lose the 'equipment' button , just have a little bit of blurb on the front page saying what you generally use (if you want) and tag each image in the gallery with lens/camera info.

Don't clutter it any more, a nice simple page will load fast and look good so you have it just about right I think.

Dreamweaver will make flash buttons for you that can look very nice, give it a try if you want to spruce them up a bit.
 
If it is just for friends to visit then its probably fine. If it is for paying customers then it looks too home made and amateur.

I'm no web designer so can't tell you what to do. I have been clicking the google ads though (photographers mostly) and the first impressions vary greatly. Some look worse than your effort but most have a simple clean design that somehow says professional.
 
Thanks guys, pfft, first time I've ever had a too big complaint :laugh1: If you set it at 800X600 what happens when you view it on higher resolution? Or should I just wait and find out :smilenod:

Robert, I know what you mean, I'm no web designer either and can't afford to pay for one just now so what ever I end up with is almost certainly going to look amateurish. I think the colour choice at the moment may just have something to do with it, that and the layout which definitely needs fixing.
 
If you set it to 800 * 600 you get space around it ! lol Most sites are developed to this size as most people use it as a standard, soon i suspect 1024*768 will become the standard, you should always work to lowest size you can expect it to be viewed at though.
 
Move the biker up until the top of his helmet is 'just' behind the Michie?
 
Oh and dont fall into the trap of flashier is better ! I get so bored waiting for animations and flashy crap to load i tend to go somewhere else ! lol

remember K.I.S.S Keep It Simple Stupid !
 
Steep said:
Move the biker up until the top of his helmet is 'just' behind the Michie?
Think that would look better Steep, that's one of the spacing issues.

Ian, at my level of stupidity, simple is good :thumb: I just set to 800X600 and I see exactly what you guys mean. Mark 2 will commence tomorrow, gotta go and cook dinner ;)
 
First impressions
I'm not convinced the buttons you've got look good with the colour background you have

There's a grey blob behind the rear wheel of the bike

You need to add some lines or borders to break things up a bit

I'm not a web designer but I had a quick play with photoshop, imageready and dreamweaver and I got this
 
That works better and I did not have to fiddle with the size of the window to view. Like others my boredom level is high and Gemok's version looks more professional and quicker to access.
 
Gemok said:
First impressions
I'm not convinced the buttons you've got look good with the colour background you have

There's a grey blob behind the rear wheel of the bike

You need to add some lines or borders to break things up a bit

I'm not a web designer but I had a quick play with photoshop, imageready and dreamweaver and I got this

That does look better :thumb: Thanks guys :)
 
the buttons definately suck, but once the size is done it will look very good!
 
Matty said:
the buttons definately suck

LOL, get off that fence :laugh1: Started Version 2, could be a few more yet :whistle2:
 
say what you see!
 
Agree about the 'equipment' tag - no-one cares what you use except us types. People see it as sad. We know they're wrong of course, but there you go...
 
Okay, version two here

Not sure about this button either but not as in your face as the last ones. Don't think I'll ever make a career of this :grinshake

The links button works but I haven't put a "home" button on yet

Think the sizings better now? Why does the top text look so bad? Any way to sort that out?
 
LOL

You need to keep the text all the same colour mate, button text and heading text should ideally be the same, keep the white outlines to the buttons, as you have the line under the heading to keep in line with.

Much better so far, i reckon by Ver 86 it should be about right, well thats how many attempts it usually takes me to be happy lol

The font in the heading looks like its struggling at that resolution and size which is why it looks a little ragged round the edges, is it Truetype font ?
 
IanC_UK said:
The font in the heading looks like its struggling at that resolution and size which is why it looks a little ragged round the edges, is it Truetype font ?
Thanks Ian, to be honest I'm not sure. Dreamweaver wouldn't give me a big enough font so I made up a jpeg in PS and used that. What should I have done? :D

Version 28's coming along nicely :banghead:
 
Not a lot I can add to wahts been said already. It's very hard to create a proffessional website without resorting to pro designers. I'm kind of in the same boat at the mo. I'm just about to upload my new one over the next couple of days as I can now link to my Alamy homepage. I was planning on getting some feedback from here too.

From my point of view, I think the colou scheme is the biggest issue, the background color needs to be either white or black or something a bit more neutral I feel. I would probaby also have used the whole image, rather than the cutout. It's kinda hovering between minimalist and jst plain dull at the mo.

I can't really offer any advice as i'm crap at this sort of thing, but I would suggest that the best thing you can do is go and look at as many photogs portfolio sites and as many sites related your field as poss then shamelessly steal what you think are the best attributes.

After all, you're a good photographer so you have an eye for what looks correct. Just try and transfer tat to wat you're designing.

HTH?
 
Try to keep the links in the same place and all the spacing similar, when you click on the contact page everything moves up because you have not got the line under your heading like on the index. Little things like that can end up making a big difference on the overall impact and appeal of a website.

For the heading, if you want to make a flashy logo, then do so in Photoshop and then to load it, make sure you use the dimensions of the image in the webpage so that it neither stretched nor compresses the image, that way it will look good and not have any jaggies.

One other thing which may or may not help, I really would recommend reading up on CSS if you are going to design your own web site. Not only is it much more powerful but it also makes sitewide changes so simple as all colours, fonts, spaces etc on every page are controlled from one (or more) style sheets. You alter one colour there and it changes it site wide instantly which if you have many pages can be such a time saver.

HTH.
 
Here are some links that I found useful over the past few months, these start of at beginner level and will give you a great base from which to work. If you get stuck with any part, doing a simple google search will usually return decent results that usually include example code and also examples of what the code actually does and how.

Also remember that we are here and I know that there are one or two people with excellent web design skills. I am hopeful that they will help out with any problems you may encounter.

http://www.htmldog.com/guides/cssbeginner/

http://www.wpdfd.com/editorial/basics/index.html

http://www.webreference.com/programming/css_stylish/

http://www.notforsnowboard.com/inspiration/

The last link is a great resource as it contains many links to other useful CSS articles and code.

HTH
 
Steve said:
Try to keep the links in the same place and all the spacing similar, when you click on the contact page everything moves up because you have not got the line under your heading like on the index.
Thanks for the links Steve, have a right look through them later :)

Not sure why the line disappears, it's in the jpeg and should be being picked up :confused:
 
dod said:
Thanks for the links Steve, have a right look through them later :)
Not sure why the line disappears, it's in the jpeg and should be being picked up :confused:

tester2.htm
<img src="graphics/header.jpg" width="798" height="98">

linkspage.htm
<img src="graphics/header.jpg" width="800" height="100">

IMG parameters may have something to do with it.
Mark
 
dod, try to stick with sans-serif fonts for web design mate. You've used a serif font (i.e. it has all the fancy tails, etc). Serif fonts look great when printed at 300dpi but when display on a screen (72 ppi) they'll always look jagged like that. Sans-serif are much simpler and look crisper on-screen.

Hope that helps.
 
Steve said:
Here are some links

This just about sums it up :D
the CSS Beginner's Guide assumes that you know as much about CSS as you do about the cumulative effects of sea squirt discharge on the brain chemistry of Germanic ammonites
 
Sorry to bump this but what do you experts think of this?

CLICKY

And in browsers with higher res than 800X600 is there anyway I can auto resize it?, does it need a different res made up??
 
That&#8217;s a massive improvement dod!!!

Some thoughts and I am sure it is still very much work in progress so if I hit on something that you have on your &#8220;to do&#8221; list then I apologise.

The layout is neat but I would replace the heading with a banner, this one thing will really spice up the whole page and also lead to giving your site an identity, don&#8217;t forget to use &#8220;alt&#8221; command for all graphics too, that way if they don&#8217;t load for any reason at least the viewer will know what was their as it will display text and not just a red X.

Instead of making the site alter its width with the browser, just make the whole background the same grey colour, that way it will fit in all browsers and keep things simple for you. If you really want to have the whole lot expand use &#8220;width 100%&#8221; instead of a set amount.

On your links page the colour of them is different to the colour of the link in your contact, I realise one takes you to email and the others are browser links but try to keep a running identity/colour scheme throughout the site. It will also be more effective if you have the links change colour when you hover over them.

You can easily alter that by adding in an extra bit to your css
this is what is effecting it currently..
Code:
.style6 {
	font-family: Tahoma;
	color: #FFFFFF;
}

by adding another bit of code, something like what I have put below (this is in addition as it will control the "on mouse over" or "hover" part ;)

Code:
.style6 a:hover {
color:#cc6666;
background-color: #ffffff;
border-bottom: 1px dotted #cc6666;
}

obviously you would need to change the colours to suit your scheme (especially the background as I have used white in my example) but by adding stuff like the above it will allow you to have the links change colour on hover. My example also adds a dotted line underneath at the same time.

Another thing I would do at this point to keep everything simple is to move all the style commands from the pages themselves into a separate style sheet and just make one call to that at the beginning of each page. Not only is that the correct way to do it, it is also easy to work with as you have all the styling in one place and only have to alter one file to change the complete look of your site.

Name your style sheet anything you want but keep the .css extention, drop it into the same directory as the rest of your pages. Then on each of your pages just add one line into your page header
Code:
 <link rel="stylesheet" type="text/css" href="whatever.css" media="screen" title="George Michie Photography.com" />

Finally, for now :) You have not yet? Made a way for your downloads to be used, it says click to access choices but there is nowhere to click. I suspect that you just have not got that far yet.

Hope that helps :)
 
A couple more things that I have thought of mate...

While building the site it is advised to test it in different browsers to check that everything is working as planned. Unfortunately IE (the work of satan ;) ) does not adhere to the standards and works in its own way, for the most part there are simple workarounds to correct issues but checking as you develop can help identify the problems easier. I check in Firefox and IE, Opera is also becoming more popular now but is generally well behaved compared to IE. If you own or have access to a MAC then checking in Safari is also advised.

The second thing is a very quick fix and concerns your page titles, currently they are &#8220;Untitled&#8221; even though you have the code in place. I would quickly edit that to read &#8220;George Michie Photography &#8211; index&#8221; for the index and change the &#8220; - index&#8221; bit to represent the gallery, links, downloads and contact pages, also for any future additions too. That way the pages will show the titles in the browsers, even when minimised, and it will also help later when you begin thinking about search engine optimisation.
 
Cheers Steve, my head's bouncing with information just now. This is very much a Work in Progress as even though it's a step on from the the Jalbum Gallery I use just now it's nothing like what I want. Very frustrating but not too bad for a few days from scratch.

Thing is I've had a few of the motocross guys, including one of the sponsors of a team (doing a special shoot for them next weekend including lorry and rider portraits at one of the Scottish champ rounds :) ) asking me for a site address to link on their sites so I need something fairly sharpish.
 
If you need something sharpish then I would suggest that you just get something together that works so that they can view the pictures and then continue to work on designing something that you are happy with in the background. Once it is ready you can just change the site over and it will remove all the pressure and give you time. :)
 
WOW The latest version is a vast improvement on the first effort even down to the choice of background colour.

Kinda linked to Steve's point of the links changing colour as you hover over them you can do the same kinda thing with your main buttons as I did on my effort WAY up the page.

To do it you need two gif's one how you want the button to look most of the time and one how you want it to look when the mouse hovers over it usually a change of background colour works well

You can either use insert - image - rollover image in dreamweaver OR code it yourself

To code it

you've got

<a href="gallery.htm"><img src="graphics/gallery%20button.gif" width="108" height="28" border="0">

Change it to

<a href="gallery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Gallery','','CHANGED IMAGE',1)"><img src="NORMAL IMAGE" alt="Gallery" name="Gallery" width="108" height="28" border="0"></a>

The bits I highlighted in red are the bits you need to change for each button
 
One thing I'm seeing is rough edges to your text, looks nasty.
 
Steep said:
One thing I'm seeing is rough edges to your text, looks nasty.
Is that the heading Steep? If it is I'm working on a banner thing to change that which should hopefully get rid of that :(
 
hokay :)
 
Looking good, the improvements to date are excellent and just shows how a little bit a playing and good advice can get you a long way, keep up the good work can't wait to see how it develops
 
quick progress update.
Finally worked out how to get the gallery working even though it's not quite tying in with the colours, found out how to change it though. Still needs navigation back from the gallery pages to the main site, that's not proving quite so easy because of the gallery generator I used :banghead:

Style sheets are still a mess, one or two text colours need sorting but it's progress

Version 749 here

Criticism and condemnation welcome :)
 
Getting there :)

All pages except links are called untitled document in IE title bar.... and the width of the boxes changes for the links page.

The gallery thumbnails appear to download again if i revist the page + it does look a lot of thumbnails :)
 
Back
Top