[1098jo]

Hi

I'd appreciate some feedback on my mock up for a customers website.
I will write it in xhtml and css but would like some views on the design. Please ignore the fact that its in dreamweaver thats just to get the background colour.

He has chosen the fonts and wants the hot sun to come accross!

I'm not sure about the slide show colours

Seirra Trekking

Edit 5th Jan This is the new improved version!

Seirra Trekking 2

Thanks

[bumfluff]

Can you post a link? I left my psychic powers in the other room.

[1098jo]

bumfluff, on Jan 2 2009, 12:32, said:

Can you post a link? I left my psychic powers in the other room.

Ooops!

It's
Seirra Trekking

Thanks

[traxor]

First of all, there's one MASSIVE mistake that people who design in DreamWeaver always seem to miss, the <title></title> is set to "Untitled Document", which is very important for SEO.

Also, make sure that you avoid having spaces in folder names, because browsers really don't like that at all. I do like the colours, but without a real feel for the website, we can't give any comments on navigation, usability, validity etc.

Avoid using Comic Sans MS too by the way, use a universal font like Arial or Tahoma, so that all operating systems view the sites the same to a certain extent. I don't even have Comic Sans MS installed on my laptop, so if I looked at it when it's live, i'd be commenting on it completely differently to someone else.

Personally, I'd steer clear of DreamWeavers automatic code and type by hand, at the moment it'll probably use Tables etc, which are meant to be for tabular data, something that websites aren't. Have a read of This Article to see why you should use DIVS instead.

[drumbass]

Sorry but mostly


http://www.bancomicsans.com/home.html

[1098jo]

traxor, on Jan 2 2009, 13:17, said:

First of all, there's one MASSIVE mistake that people who design in DreamWeaver always seem to miss, the <title></title> is set to "Untitled Document", which is very important for SEO.

Also, make sure that you avoid having spaces in folder names, because browsers really don't like that at all. I do like the colours, but without a real feel for the website, we can't give any comments on navigation, usability, validity etc.

Avoid using Comic Sans MS too by the way, use a universal font like Arial or Tahoma, so that all operating systems view the sites the same to a certain extent. I don't even have Comic Sans MS installed on my laptop, so if I looked at it when it's live, i'd be commenting on it completely differently to someone else.

Personally, I'd steer clear of DreamWeavers automatic code and type by hand, at the moment it'll probably use Tables etc, which are meant to be for tabular data, something that websites aren't. Have a read of This Article to see why you should use DIVS instead.

[1098jo]

Hi

Thanks for your feedback

I'm not explaining myself very well

I'm treating waht I have inked to as an image I only put it into dreamweaver to upload it and convert the image to html. When I write this I will hand code it using css and divs etc. As I did loads of designs I haven't named them.

I realise that it's hard to get a feel from just an image but any feedback on this would be great.

[drumbass]

O.K - poor choice of font for a start. Choice of font sizes isn't great, primary/secondary navigation placement and importance (denoted by size of text) is confusing. Poor contrast between background and font color.

Your photo is a good starting point. Strip it back to there and try again (in my opinion).

Edit : Sorry for being harsh but I'm Dutch Uncling you you'll thank me in the future...

[MolotovRuss]

traxor, on Jan 2 2009, 13:17, said:

First of all, there's one MASSIVE mistake that people who design in DreamWeaver always seem to miss, the <title></title> is set to "Untitled Document", which is very important for SEO.

Also, make sure that you avoid having spaces in folder names, because browsers really don't like that at all. I do like the colours, but without a real feel for the website, we can't give any comments on navigation, usability, validity etc.

Personally, I'd steer clear of DreamWeavers automatic code and type by hand, at the moment it'll probably use Tables etc, which are meant to be for tabular data, something that websites aren't. Have a read of This Article to see why you should use DIVS instead.

What are you TALKING about? It's an IMAGE. Not a website! The guy isn't coding anything yet, he's not considering SEO, he's just showing us an IMAGE.

[traxor]

MolotovRuss, on Jan 2 2009, 14:25, said:

What are you TALKING about? It's an IMAGE. Not a website! The guy isn't coding anything yet, he's not considering SEO, he's just showing us an IMAGE.

For someone who uses Dreamweaver to convert something to HTML, rather than just posting a .jpg, I figured they might need some advice.

Think about it, and chill out. Just because I'm slightly new here doesn't mean I don't deserve a bit of respect.

[1098jo]

traxor, on Jan 2 2009, 15:55, said:

For someone who uses Dreamweaver to convert something to HTML, rather than just posting a .jpg, I figured they might need some advice.

Think about it, and chill out. Just because I'm slightly new here doesn't mean I don't deserve a bit of respect.

I will word my question more carefully in future.

I just wanted to say that I put the image in a table in dreamweaver so that the background colour would fill the screen whatever the resolution. Is this such a ridiculous thing to do? I am really looking for design advice on the layout color, etc.
Unfortunatley he wants comic sans for the font and monotype corsiva for the heading!

Any useful advice still appriciated!

[drumbass]

If he has specifically asked for those fonts then good luck. On the other hand, his taste is so bad that he'll probably be happy with whatever you give him, so don't burst a gut trying to make it look pretty.

IMO Typography is the most important choice when designing anything. If he gives you that base to start off with he's not doing you any favors. It's like giving you a ford escort and asking you to win Le Mans with it. You could try and explain to him why comic sans is not a good choice?

[1098jo]

calumbrodie, on Jan 2 2009, 16:46, said:

If he has specifically asked for those fonts then good luck. On the other hand, his taste is so bad that he'll probably be happy with whatever you give him, so don't burst a gut trying to make it look pretty.

IMO Typography is the most important choice when designing anything. If he gives you that base to start off with he's not doing you any favors. It's like giving you a ford escort and asking you to win Le Mans with it. You could try and explain to him why comic sans is not a good choice?

Yes when he said that he wanted a rustic look and gave me the fonts I knew I had my work cut out!

I will try and persuade him to ditch the comic sans and look at the font size. What did you mean about the navigation? Is the horizontal nav too small? or vertical too large. I will space the main text more. Is the heading too small?

[Skysurge]

MolotovRuss, on Jan 2 2009, 15:25, said:

What are you TALKING about? It's an IMAGE. Not a website! The guy isn't coding anything yet, he's not considering SEO, he's just showing us an IMAGE.

Exactly what I thought when I read that.

traxor, on Jan 2 2009, 16:55, said:

For someone who uses Dreamweaver to convert something to HTML, rather than just posting a .jpg, I figured they might need some advice.

Think about it, and chill out. Just because I'm slightly new here doesn't mean I don't deserve a bit of respect.

Well, backtracking and making up something like "figured they might need some advice" (on converting they're website MOCK UP), instead of realizing your mistake, won't get you respect. You have nearly 400 posts, I wouldn't really consider that new either. It just sounds like your making up excuses to avoid being wrong.


To 1098jo:

Its a good start, other than the above said about typography, some texture might help bring some feel to your design. The flat gray isn't terribly attractive, some depth would help. Your logo doesn't stand out too much from the rest of the page, and looks kind of dark. I can tell you're a new designer, keep up the good work

[drumbass]

Primary navigation (I think in your case horizontal) should be more prominent then secondary (vertical), you should consider this when deciding where each will go. It seems you have sized the text to make it fit into the space.

Also think carefully about each section you have chosen, do you need a whole tab for "contact us"? How about just displaying the contact information in a footer on every page, and at the same time move a few of the less important sections down to the footer too, the ones people are less likely to be interested in (terms and conditions, they will only want to see these when they book probably), can you combine the Calendar and Booking pages seeing as they compliment each other?

Just suggestions, you may have legitimate reasons for choosing to make a whole 'section' for each of these things, but when it comes to navigation I think less is more.

Can you integrate the text into the banner (header)?

a few resources for you,

Footers in modern web design a good range of footers - seeing as you don't have one
http://www.smashingmagazine.com/2008/04/08...ples-and-ideas/

I Love Typography contains alot of great articles on typography, and links to great free fonts (comic sans is NOT NOT NOT rustic )
http://ilovetypography.com/

On Comic Sans or just google "comic sans" there are a million pages - explain to your client about how fonts communicate. You should watch the documentary "helvetica" if you are a typography beginner, it will help explain how different fonts communicate different ideas
http://joshshalek.bl...-evil-font.html

Color Contrast a tool to make sure there is enough contrast between your fore and bg colors
http://juicystudio.c...ourcontrast.php

Color Lovers a great color inspiration site.
http://www.colourlovers.com/

Good Luck, you'll get there eventually

[traxor]

Okay, sorry if it annoyed anybody, was just saying.

Anyway, 1098jo, a major problem that you'll come across with clients is that some will think that they know what is best for them, this is something that you've got to ignore, and emphasise the fact that you are the professional, you wouldn't tell that company how to write Trekking Guides (that's the general jist of what I got from the site), so always remember this when designing a website, and don't be afraid to say "well no, actually..." and give them a better idea of marketing on the web, then perhaps reach a compromise (ie a font a little better).

Always remember that websites are going to be relayed back to you in some way, shape or form, so designing a site that you don't think is any good is a no go.

[1098jo]

calumbrodie, on Jan 2 2009, 18:35, said:

Primary navigation (I think in your case horizontal) should be more prominent then secondary (vertical), you should consider this when deciding where each will go. It seems you have sized the text to make it fit into the space.

Also think carefully about each section you have chosen, do you need a whole tab for "contact us"? How about just displaying the contact information in a footer on every page, and at the same time move a few of the less important sections down to the footer too, the ones people are less likely to be interested in (terms and conditions, they will only want to see these when they book probably), can you combine the Calendar and Booking pages seeing as they compliment each other?

Just suggestions, you may have legitimate reasons for choosing to make a whole 'section' for each of these things, but when it comes to navigation I think less is more.

Can you integrate the text into the banner (header)?

a few resources for you,

Footers in modern web design a good range of footers - seeing as you don't have one
http://www.smashingmagazine.com/2008/04/08...ples-and-ideas/

I Love Typography contains alot of great articles on typography, and links to great free fonts (comic sans is NOT NOT NOT rustic )
http://ilovetypography.com/

On Comic Sans or just google "comic sans" there are a million pages - explain to your client about how fonts communicate. You should watch the documentary "helvetica" if you are a typography beginner, it will help explain how different fonts communicate different ideas
http://joshshalek.bl...-evil-font.html

Color Contrast a tool to make sure there is enough contrast between your fore and bg colors
http://juicystudio.c...ourcontrast.php

Color Lovers a great color inspiration site.
http://www.colourlovers.com/

Good Luck, you'll get there eventually

Thanks, Just the sort of advice I need! the colour contrast site looks great.

[caraewilton]

I rather like the orange, gray and white as I think it works well with the header image. I agree that the horizontal menu should be bigger than the secondary vertical menu. I would also work on ways of making it stand out more. I am not sure I like the gray as a background, and would experiment with other options. Lastly I think that the Sierra Trecking needs to stand out more.

As an aside, I have been in the position of having Web Professionals build sites for me. There is nothing more annoying than a professional who feels they know best and do not do what you ask. Websites need to updated and maintained once the original has been built. Ideally you want these people to come back to you. From personal experience, the guys who just did their own thing, did not hear from me again. One guy I worked with, listened to what I wanted, went off and came back with three mock-ups. One showing my ideas, one what he thought would be best and one a compromise. At the end of the day I went with his idea as it was better, but at least I felt he took me seriously. He earned a constant income from us for three years. I hate to say this on a Web Designer Forum, but the truth is there is a perception out there that web designers are arty people who are unreliable, can't spell and egotistical. I am not saying this is true, but I am saying, a professional should take the wants of their clients seriously and not disregard them because they think they know better. Actually, it is not your name you should be trying to promote, but your clients name, so at least give thought to what they want.

[1098jo]

caraewilton, on Jan 2 2009, 19:55, said:

I rather like the orange, gray and white as I think it works well with the header image. I agree that the horizontal menu should be bigger than the secondary vertical menu. I would also work on ways of making it stand out more. I am not sure I like the gray as a background, and would experiment with other options. Lastly I think that the Sierra Trecking needs to stand out more.

As an aside, I have been in the position of having Web Professionals build sites for me. There is nothing more annoying than a professional who feels they know best and do not do what you ask. Websites need to updated and maintained once the original has been built. Ideally you want these people to come back to you. From personal experience, the guys who just did their own thing, did not hear from me again. One guy I worked with, listened to what I wanted, went off and came back with three mock-ups. One showing my ideas, one what he thought would be best and one a compromise. At the end of the day I went with his idea as it was better, but at least I felt he took me seriously. He earned a constant income from us for three years. I hate to say this on a Web Designer Forum, but the truth is there is a perception out there that web designers are arty people who are unreliable, can't spell and egotistical. I am not saying this is true, but I am saying, a professional should take the wants of their clients seriously and not disregard them because they think they know better. Actually, it is not your name you should be trying to promote, but your clients name, so at least give thought to what they want.

Oh it's nice to have a bit of positive feedback! I am going to look again at the gray.

It's interesting what you say about the client. My next move was to give him an option of the site as he has specified and a version that I thought was better I'll definitley do that.

Thanks for your comments.

[1098jo]

traxor, on Jan 2 2009, 18:38, said:

Okay, sorry if it annoyed anybody, was just saying.

Anyway, 1098jo, a major problem that you'll come across with clients is that some will think that they know what is best for them, this is something that you've got to ignore, and emphasise the fact that you are the professional, you wouldn't tell that company how to write Trekking Guides (that's the general jist of what I got from the site), so always remember this when designing a website, and don't be afraid to say "well no, actually..." and give them a better idea of marketing on the web, then perhaps reach a compromise (ie a font a little better).

Always remember that websites are going to be relayed back to you in some way, shape or form, so designing a site that you don't think is any good is a no go.

Yes I admit i do have mixed feelings about having a site on my portfolio that is not as I would design it having a free hand. I think there has to be some compromise but I am going to show him a version as I would want it!

[1098jo]

Skysurge, on Jan 2 2009, 17:25, said:

Exactly what I thought when I read that.




Well, backtracking and making up something like "figured they might need some advice" (on converting they're website MOCK UP), instead of realizing your mistake, won't get you respect. You have nearly 400 posts, I wouldn't really consider that new either. It just sounds like your making up excuses to avoid being wrong.


To 1098jo:

Its a good start, other than the above said about typography, some texture might help bring some feel to your design. The flat gray isn't terribly attractive, some depth would help. Your logo doesn't stand out too much from the rest of the page, and looks kind of dark. I can tell you're a new designer, keep up the good work

Thanks, I'll have another look at adding some texture.

[bumfluff]

caraewilton, on Jan 2 2009, 19:55, said:

As an aside, I have been in the position of having Web Professionals build sites for me. There is nothing more annoying than a professional who feels they know best and do not do what you ask.

Surely if you're hiring someone to do a job, you hire someone who DOES know better than you?

[bumfluff]

Quick notes on the mockup:

- The company name is kinda hard to read due to the fore- and background colours. Not sure where that burnt orange came from, but you might be better off with using the #DE7735 from the menu background.

- The first heading ("Guided Walking Holidays..") isn't that clear either, but may work better as live text than it does as an image.

- The sunset/sunrise picture could be quite dramatic but the colours are a bit washed out. It could do with being touched up.

- The main picture is the draw on that page, it's the bit that's going to hook people, but it needs to be shown off better. At the moment, the site colours are too neutral to show it off. The grey background needs to be quite a bit darker to show off the colours in the sunrise.

- The line height of the body copy is too close.

- Like others have said, the comic sans doesn't suit the rest of the site's personality.

- Do you need to put "Guided Walking Holidays" etc in three places? Looks a bit spammy

- All looks a bit flat. Just flat blocks of colour... could do with some small touches just to add some visual interest.

[1098jo]

bumfluff, on Jan 2 2009, 22:21, said:

Quick notes on the mockup:

- The company name is kinda hard to read due to the fore- and background colours. Not sure where that burnt orange came from, but you might be better off with using the #DE7735 from the menu background.

- The first heading ("Guided Walking Holidays..") isn't that clear either, but may work better as live text than it does as an image.

- The sunset/sunrise picture could be quite dramatic but the colours are a bit washed out. It could do with being touched up.

- The main picture is the draw on that page, it's the bit that's going to hook people, but it needs to be shown off better. At the moment, the site colours are too neutral to show it off. The grey background needs to be quite a bit darker to show off the colours in the sunrise.

- The line height of the body copy is too close.

- Like others have said, the comic sans doesn't suit the rest of the site's personality.

- Do you need to put "Guided Walking Holidays" etc in three places? Looks a bit spammy

- All looks a bit flat. Just flat blocks of colour... could do with some small touches just to add some visual interest.

I'm just in the process of re-designing the page. These thing are all so obvious once you say them! Thanks for the advice

[1098jo]

Time to put my head above the parapit once again!

Seirra Trekking mk 2

As you can see its still just an image but any feedback would be welcome.

Thanks

[traxor]

Not a big fan of the patterns at all sorry, particularly with the gradients.

[bumfluff]

The image isn't loading at all for me

[1098jo]

bumfluff, on Jan 5 2009, 23:37, said:

The image isn't loading at all for me

No wonder I wasn't getting any feedback.

Thanks for taking the time to point out my mistakes!

Seirra Trekking 2

[bumfluff]

Fixed link

Will take a proper look later

[Jute]

Hi,

Good start!

I must say that I am not a big fan of your menu to the left. I would like it to look "cleaner".

Also I agree with earlier comment about the picture....it does not pop out...to mellow, make it or get one that when you see you just feel that ohhhh I have to go there.

Best of luck!

Jute

[1098jo]

bumfluff, on Jan 6 2009, 12:20, said:

Fixed link

Will take a proper look later

Thanks

[1098jo]

Jute, on Jan 6 2009, 15:57, said:

Hi,

Good start!

I must say that I am not a big fan of your menu to the left. I would like it to look "cleaner".

Also I agree with earlier comment about the picture....it does not pop out...to mellow, make it or get one that when you see you just feel that ohhhh I have to go there.

Best of luck!

Jute

I wasn't sure about the menu, I was trying to brighten it up a bit I'll have another go! The client is going to provide me with another image - I hope it fits in!!

Thanks for the feedback.

[bumfluff]

That's looking better than the first version. The darker grey you've chosen works much better than the mid-grey on the first. I'm not 100% sold on the bronzey gradient on the menu, though. I think it needs to be a little more subtle.

The other thing that I think needs a change is the logo area. It's much better than the first one, way more readable, but it does look a little divorced from everything else. I'm not keen on the gradient, it looks a little cheap.. maybe a flat colour background? The other option would be to change the lettering colour, and just have it on the same background (btw, I'd just have that as a flat colour rather than the checkerboard pattern.. the checks aren't really noticeable at most resolutions, but they can visually mess with things placed on top). Also, it needs some kind of alignment on the left edge.. right now, it doesn't align with anything visually.

Couple of minor suggestions:

- how about having the image go right up to the left and right edges of the container? I think that would make it feel more panoramic. Having only a top and bottom border would also help that.

- the horizontal menu feels a bit of an afterthought. It may help to put a 25% or 50% black overlay on the menu area, so you can still see the picture through it (though darkened). As it stands though, the image is probably not tall enough, but it might be worth a try if you can crop it so it's taller.

- the bottom gradient line doesn't fit.. it's the only line in that style, so it stands out like a sore thumb. Having it the same style as the other lines would probably suit better.

- I'm not sure you actually need a lighter background for the right column. It doesn't really serve any purpose, and it makes the site feel kinda closed in. Trekking is about freedom and open spaces, the site design should emphasise that.

[1098jo]

bumfluff, on Jan 7 2009, 00:18, said:

That's looking better than the first version. The darker grey you've chosen works much better than the mid-grey on the first. I'm not 100% sold on the bronzey gradient on the menu, though. I think it needs to be a little more subtle.

The other thing that I think needs a change is the logo area. It's much better than the first one, way more readable, but it does look a little divorced from everything else. I'm not keen on the gradient, it looks a little cheap.. maybe a flat colour background? The other option would be to change the lettering colour, and just have it on the same background (btw, I'd just have that as a flat colour rather than the checkerboard pattern.. the checks aren't really noticeable at most resolutions, but they can visually mess with things placed on top). Also, it needs some kind of alignment on the left edge.. right now, it doesn't align with anything visually.

Couple of minor suggestions:

- how about having the image go right up to the left and right edges of the container? I think that would make it feel more panoramic. Having only a top and bottom border would also help that.

- the horizontal menu feels a bit of an afterthought. It may help to put a 25% or 50% black overlay on the menu area, so you can still see the picture through it (though darkened). As it stands though, the image is probably not tall enough, but it might be worth a try if you can crop it so it's taller.

- the bottom gradient line doesn't fit.. it's the only line in that style, so it stands out like a sore thumb. Having it the same style as the other lines would probably suit better.

- I'm not sure you actually need a lighter background for the right column. It doesn't really serve any purpose, and it makes the site feel kinda closed in. Trekking is about freedom and open spaces, the site design should emphasise that.

Thanks for taking the time to make all of those suggestions it all makes sense. I'll get working on some changes.

I've also had some comments from the customer who prefers the lighter grey so I may have to compromise on that and lighten it a bit which is a shame as I also think it works better with a darker contrast. I put all of the textures and colour variations in as I thought it looked a bit flat. The gradient was to try and get accross the feeling of the warm sun but I take your point about it loooking cheap.

It's great to have some constructive suggestions to work on - mk 3 coming up!!

[bumfluff]

1098jo, on Jan 7 2009, 10:30, said:

I've also had some comments from the customer who prefers the lighter grey so I may have to compromise on that and lighten it a bit

Can't you just shoot them instead?