Hello good people!

 

You know that thing where you shift pixels back and forth ALL DAY and then at the end of the day you sit back and think, "Hmmm, that doesn't look too bad actually!" and then suddenly realise that this is because you've managed to push everything back into exactly the same position it was in 7 hours ago? ME TOO.

 

If you could cast your amazing little fresh eyes on this design, it would be great!!

 

THINGS TO BEAR IN MIND:

1) The person I am making this for is thus far being SPECTACULARLY VAGUE about basically every conceivable detail of the website, so all the images are (probably! Who knows?!) placeholders and also, when it's done, the main body text will (presumably) not just be three enormous chunks of Virgil's Aeneid.

2) Fact fans may be interested to know that I once knew the English translation of said three enormous chunks of Virgil's Aeneid off by heart! And they said Latin A-Level would be useless!

3) That's about it, really!

 

Feel free to be as harsh as you want, but you may want to bear in mind that I am prone to CRY LIKE A GIRL at the drop of even a really tiny virtual hat.

Not sure about the effect on the logo & menu.

My initial impressions:

 

I don't think the gold gradient at the top and bottom of the page is necessary. It doesn't really add anything to the design and visually probably is more distracting than anything else.

 

I love the color scheme, black and gold is very elegant and regal, but I agree with RD, the treatment of the nav and logo is a bit over the top. You could probably do a flat gold color there and maybe a 1px text-shadow to give it a little pop.

 

Font selection is great, can you deliver that via @font-face or Cufon?

 

I'd add some padding to the black content area... you want equal padding on all sides, and I think 30px-60px will really help the whole thing feel less cramped. That background has a lot going on so some spacing is going to be necessary across the board to take away the cluttered vibe.

 

Line spacing could use a slight bump. The space underneath the heading is a bit small, too.

 

The picture frame at the top might be a little much, but I'll reserve judgement on that for now. You definitely will want to put some kind of defined border on the images. As it stands, you have images that appear to be misaligned. Adding some edges would help resolve that.

 

The nav might be a little too big, but I'd like to see how the site looks with some space added in.

 

From a UX standpoint, the simple navigation should lend itself well to high conversion rates. You should differentiate the "Contact" link from the others as well as put a link/button/banner/etc. with "Contact Us Now" or "Get in Touch" or some other strong call to action. Right now the site lacks a funnel for the users to follow. Users tend to have a ~7sec attention span so making them think at all in that time period decreases your click through rate and directly affects the business's bottom line.

 

Users also hate reading that much text when it's not an interesting article or such. Suggest to your client that they drop the text on the homepage down to a 1 sentence "power statement" about the business. "We cut awesome hair" or something like that. Then add a very short paragraph or two that answers: Who We Are, What We Do, Why you should use us.

 

Other than that it's a solid start. With some refinement it should be good to go.

Thanks fellas!

 

Not sure about the effect on the logo & menu.

Me neither, to be frank!

 

My initial impressions:

 

I don't think the gold gradient at the top and bottom of the page is necessary. It doesn't really add anything to the design and visually probably is more distracting than anything else.

Although it literally BREAKS MY HEART to admit this, you may well be right. I do worry a bit that the client is going to think it's too plain without it, though.

 

I love the color scheme, black and gold is very elegant and regal, but I agree with RD, the treatment of the nav and logo is a bit over the top. You could probably do a flat gold color there and maybe a 1px text-shadow to give it a little pop.

Ugh, I know you're both right about the text effect, BUT it's really hard to make text look "gold" without loading a pile of layer styles on top, otherwise it just sort of ends up either yellow or orange and the site starts looking suspiciously like a Wasps fansite!

 

Font selection is great, can you deliver that via @font-face or Cufon?

I can do one better, actually: Google Web Fonts

 

Users also hate reading that much text when it's not an interesting article or such. Suggest to your client that they drop the text on the homepage down to a 1 sentence "power statement" about the business. "We cut awesome hair" or something like that. Then add a very short paragraph or two that answers: Who We Are, What We Do, Why you should use us.

Oh, I know, once I actually get some sort of idea from the client about what sort of thing they actually want on the site, that'll all be gone. It's really just a very temporary (and uninspired!) space-filler!

 

Other than that it's a solid start. With some refinement it should be good to go.

Thanks SO much for your post, you have helped me unimaginably! I'll report back later after I've had a bit of a fiddle and put some of your suggestions into play. If you're on a seat right now, you may want to move yourself onto the edge of it!

Porkchops got it all wrapped up there, but just to expand on a couple of things that were said :

 

The problem to me with the gold on the text is it looks a bit like you just hit "bevel and emboss" on photoshop - it looks a bit dated. I'm trying to think how you make this cleaner, and more or less arrive at what porkchops said. Another option which COULD turn out to be really cheesy but might be worth a try is actually shooting for a more realistic metal effect on them, flatter, but more satin-ey - brushed metal? Or perhaps that would look rubbish, but you get what I vaguely mean. It might make the scissors look good in the logo as well. Worth a try at least. That kind of rough ball park.

Either go cleaner (refer to earlier posts) or metally-er I think.

 

And yeah the gold gradient - you don't need it, but perhaps you could turn the volume down on it a bit from a 10 to about a 3 or 4? Try it like that as well.

 

Patterns are funny things, but I think the pattern works on this particular site, so keep that. If it was me I'd turn the volume down on that a bit as well, say from a 10 to a 7.

 

It's good, I think in general keep what you've got but just clean it up and make it a little more subtle. I have a feeling the client will like it.

and then suddenly realise that this is because you've managed to push everything back into exactly the same position it was in 7 hours ago?

 

I've had clients do that in four phone calls = 1 "Could you move it a little to the left" 2 - "Could you move it up a bit" 3 - "Could you move it a little to the right" 4 - "Could you move it down a bit".

Cheers Gibson!

 

Right. I've done a wee bit of 'toning down' work, just on the header section, what do we think? Bit less tacky?

 

(As you may notice, I am still desperately clinging on to my beloved gradient!!! Alas, I barely knew him. ...)

Cheers Gibson!

 

Right. I've done a wee bit of 'toning down' work, just on the header section, what do we think? Bit less tacky?

 

(As you may notice, I am still desperately clinging on to my beloved gradient!!! Alas, I barely knew him. ...)

 

I think the first one (without the gradient, sorry!) is the better of the two. I think the gradient, when toned down, starts looking rather blah.

 

The type is a little better looking, but if you are going to deliver it via Google are you going to be able to achieve those effects with CSS3? I still vote for a vibrant flat color, but at this point it probably comes down to personal preference, I can't see any scientific reason to complain about it.

 

Keen to see the whole site, keep at it!

I think the gradient, when toned down, starts looking rather blah.

 

For my taste actually, I quite like it. Maybe leave that one down to you then Katy. Edit - dunno about whether you could not do a gradient so much as a lighting effect like you see in the header of a lot of sites?

 

"Straighty Waity Straighteners" - haha ya great goon!

Edited April 11, 201115 yr by Gibson

Ugh. Who knew that it was possible to feel ACTUAL PHYSICAL HATRED towards some pixels? WHO KNEW.

 

Anyway, I have moved some stuff around for a while again. Is it worse? Is it better? When was the last time I actually moved from this chair? Does any of this really have a point?! I am starting to suspect we may never find out!!

Well ya nav looks slightly better without the bevel. Hairmasters is still bevelled though and I think you ought to get rid of that.

 

The glow - after having suggested it myself I'm not so sure it's working - I think personally I preferred the gradient. Perhaps again the volume on the glow needs turning down?

 

Step away from this for a while, you don't want to get RSI! Look at some designs by the guys on here and see what techniques they're using for clean clear minimal designs and get the hang of what that's all about (that's what I'm doing). This forum has some of the best designs submitted to it that I've seen on Web Design forums, the standard is excellent. Without copying, there's a lot of inspiration to be had.

 

Personally I feel the text needs to be cleaner and flatter. For example would that bevelling on "Hairmasters" really work on business cards and print? Simpler but more polished would be the way I'd personally be aiming for with that.

 

Anwyway, don't listen too much to me, I'm only an "intermediate" designer - you'd be far better off waiting to receive advice from some of the more experienced designers on here, porkchops or Alzer or Lev or someone I'm only chucking ideas about as they would occur in my own head if I was doing this project. I don't want to send you on too many wild goose chases. ALthough it's all practise!

Aside from the nav text being WAY TOO BIG (imo) I think it's a really nice design. Lovely use of colour and texture, a nice hairdresser-y feel to it. I think your client is going to be very pleased.

As others have said , the Nav text is too big. Personally I dont like the Gold scheme, looks a bit tacky to me. Also I'm not liking the picture frame, looks like something you'd get on one of those cheap photo apps that adds effect to photos. apart from that , not bad.

Ugh. Who knew that it was possible to feel ACTUAL PHYSICAL HATRED towards some pixels? WHO KNEW.

 

Anyway, I have moved some stuff around for a while again. Is it worse? Is it better? When was the last time I actually moved from this chair? Does any of this really have a point?! I am starting to suspect we may never find out!!

 

This is a massive improvement... I think the only thing I don't like is the gradient at the top (preference, though). I agree with the nav text statement, too, but for the sake of conversion this isn't a huge deal, more of a visual thing.

 

It looks great, nice work! (And, once you get a design right and portfolio ready, all the hard work is TOTALLY worth it)

Edited April 12, 201115 yr by porkchops

I don't like is the gradient at the top (preference, though).

 

You may well at the end of the day be right about this - sometimes less is more. I personally prefer the "slight" gradient. But I think what it could be is that without the gradient somehow the text looks too bright, and the pattern doesn't quite stand out enough, I get the feeling it's not so much to do with whether the gradient's actually there or not.

Hope that made sense!

 

All these possibilities give me a ****in headache when designing!

You may well at the end of the day be right about this - sometimes less is more. I personally prefer the "slight" gradient. But I think what it could be is that without the gradient somehow the text looks too bright, and the pattern doesn't quite stand out enough, I get the feeling it's not so much to do with whether the gradient's actually there or not.

Hope that made sense!

 

All these possibilities give me a ****in headache when designing!

 

I hear ya. In this case maybe it's not the GRADIENT but the COLOR. A VERY subtle gray gradient at the top might give it what you are looking for. Who knows...

 

At this point, as long as the UX and IA is sound and the client likes the visual design, it's a win in my book.

No gradient should go, it is the same color as the font and makes it vague.

 

Maybe use it only on the footer, or behind those pics at the bottom.

 

It is very good for the rest, i like big font navs.

 

As porkchops aid though, if client is happy you are happy and finished fidling around.

 

Good job.

 

P.

I quite like the design - big and chucky text is good.

 

I agree with the guys above - the top gradient needs to be at least 50% more opaque than your current design.

 

Customers will always be "vague" about design aspects because that's not their skill set. They are relying on you to present a design to them and (more importantly) to explain what you've done and why you think it works.

 

Of course I don't know how you and you're customer are working together but I have encountered other design firms that just fire off an email to the customer with a screenshot design of a website asking for "feedback on the attached".

 

I tend to produce two images at first, one the actual design prototype and another with some overlayed references numbers.

I can then outline in the email using the reference numbers what's going on in that particular area, then I call and take the customer through the design to give a personal and in depth walk through.

 

Once the basic design has been agreed I move to an actual working website so that the customer can interact and the cycle starts until completion.

 

Hope this helps ya.

 

Cheerz,

Wil.

Hey guys! It's me again! (I know you're thrilled and excited to hear this, DON'T PRETEND LIKE YOU'RE NOT) First off I just wanted to thank everyone who has helped me in this thread so far, you are all lovely people and amazing things will probably start happening to you VERY SOON (for example: you will all magically receive +1s from a mysterious benefactor! *cough*)

 

THE BAD NEWS IS: client is (in characteristically vague manner) "not sure" re: design and would like to see some other options (I think this is probably a tactful way of saying "What is this **** and why is it on my screen?"), SO: who fancies starting over again right from the beginning?!!?! (Answer: everyone! Everyone does!)

 

Right, so this is what I've knocked up so far as Option Number 2 (the structure and pictures may strike you as... er... slightly familiar). The logo is temporary. What do we think?

Hey guys! It's me again! (I know you're thrilled and excited to hear this, DON'T PRETEND LIKE YOU'RE NOT) First off I just wanted to thank everyone who has helped me in this thread so far, you are all lovely people and amazing things will probably start happening to you VERY SOON (for example: you will all magically receive +1s from a mysterious benefactor! *cough*)

 

THE BAD NEWS IS: client is (in characteristically vague manner) "not sure" re: design and would like to see some other options (I think this is probably a tactful way of saying "What is this **** and why is it on my screen?"), SO: who fancies starting over again right from the beginning?!!?! (Answer: everyone! Everyone does!)

 

Right, so this is what I've knocked up so far as Option Number 2 (the structure and pictures may strike you as... er... slightly familiar). The logo is temporary. What do we think?

Much much much better, nice trendy, contemporary feel to it. Well done.

I think it's an improvement, for sure!

 

Myriad looks funny when used in body copy, I'd go with something else there, maybe Arial/Helvetica? The headings are great though.

 

I think the white border around each element is a little too thick... Just eyeballing it looks like 10-12px, probably should be 6-8px instead, feels too chunky right now.

 

I love the HM ligature you have on the right, but not it's position. I feel like it belongs in the upper left. It would make a great symbol, maybe as a "cut out" of a box of color.

 

The icons at the top are gorgeous, where did you find them?

 

Nav menu is solid, but I'd be curious to see what your hover state would be.

 

I'd ditch the transparent background behind the headers on the images. Make it a little smaller height-wise and fully white, so it blends in with the border (kind of like the old school quick-developing photos).

 

The link text in the paragraph is almost impossible to spot. Try making the color more vivid.

 

I think you REALLY need to introduce another color here. There is a lot of gray, which is nice and elegant, but lacks a little accent. I'd go with a vibrant purple/plum color or a reddish/purplish pink color. Something to provide a little extra without using it in big blocks.

 

You also want to introduce a Call to Action. Maybe the contact link is in the Accent color you choose, maybe you put a big "CONTACT US" button in place of the HM ligature... who knows...

 

Definitely on the right track, feel free to post with any more questions, I'm happy to oblige.

Also agreed. My opinion (probably reapeating what previous posters have said):

 

Pattern possibly too prominent in background? Reduce tranaprency very slightly.

Borders too thick around pictures.

Need to polish nav a bit.

 

Just thought of something - we've all got different monitors, don't forget, so when I say "Pattern too prominent" - others may disagree based on the contrast of their monitor. Same goes for colours.

 

Nice one - yeah big improvement, it's subtler than the first one. And I agree with porkchops about the plum colour, that sounds cool.

When you contact someone like me to design your site or code up an email or put together a WordPress blog, you generally have two ways to pay for this service: by the hour or by the project. I can give you an estimate, track the hours, and bill you at the end or I can tell you a price based on what I think will be involved and keep the work to around that amount. I think both of these ways suck and I’d like to tell you why. premium Wordpress themes

Edited April 14, 201115 yr by jossalisia

get rid of all the ugly embossing on all the headers. it makes the site look very dated..

 

 

oops, was lookin at an old version. sorry

Edited April 14, 201115 yr by alzer81

Not bad.

 

I would advise you to rearrange, change position of some elements on the page header:

 

1. Move contact info to the right edge of page.
2. Move HAIRMASTERS 120-150px right/
3. Move logo to the left edge.
4. Extend navbar to the right edge.

 

I like it, it's big, it's bold (pardon the pun), it says 'we are hairdressers' and I like the wallpaper.

Colours are good.

Right, so this is what I've knocked up so far as Option Number 2 (the structure and pictures may strike you as... er... slightly familiar). The logo is temporary. What do we think?

I've only just discovered this thread. So, I had a bit of reading to do to catch up... I have to agree with the guys here though, the new(er) concept is much better. It's cleaner, clearer and way less 'blingy'.

 

Just to throw my 2cents' worth into the pot; if you're going to keep the white text colour, I'd say the contrast could do with a bit of TLC.. The background texture looks pretty awesome, fits the page well, but I think it's a tad too bright for white text.

 

I know everyone gets to see an ever-so-slightly different picture (colour settings, brightness, ambient light, people eyes, etc), but I think perhaps something like this would work nicely:

As an example, I simply set brightness to -30 and contrast to +30 (using PhotoShop).

UGH, you are all far too helpful and I would quite like to marry all of you. Possibly not all at the same time, I think that might technically be illegal.

 

porkchops: Ha, you will live to rue the day you offered me help! Rue it! The icons are from iconsweets2[dot]com and you're right, they're very nice. Thanks so much for all your suggestions, I've tried to implement them as much as possible. Now give me some more! *cough*

 

Gibson: Thanks ONCE AGAIN for your help! I have toned down the pattern a bit for the sake of your sensitive eyes

 

alzer81: No worries, I probably should have started a new thread anyway - this one's turning into the web design equivalent of War and Peace.

 

jossalisia: Thank you, that was both enlightening and invaluable. You are the most helpful of them all.

 

Lev: Cheers, I had actually basically done everything you said anyway, but you're right, it does look better!

 

ZaLiTH: Ta, I've taken your advice and darkened up (down? up? in out in out shake it all about?) the background. To be honest it looks a bit too dark to me, but there is a very good possibility that my screen is abnormally bright anyway It's like designing on the sun!

 

IF ANYONE ISN'T SICK OF THE SIGHT OF ME YET then it would be awesome if they would cast their eyes on the latest version.

 

By the way, I feel I should - without casting unnecessary aspersions on anyone - point out that the whole black & gold "bling bling" feel was not my idea!! Customer knows best, except when they see how hideous it is and change their mind.

 

Edited April 14, 201115 yr by superkaty

I appreciate the reference on the Icons. Some of the icons in there are crappy but most of them are amazing. Thanks! (The first set is fantastic all around). +1 for that.

 

I like where you've taken it now. The images on the bottom look pretty sharp, nice work. To be nit picky I feel like the header needs an extra pixel or two around it of padding inside that white box. Especially the bottom. Not quite vertically centered.

 

Content area looks great. Typography is far more conducive to reading. The feature photo looks good, too.

 

The Box around the HM is a good size, though I'd try to make it the same vertical height as "HAIRMASTERS". The box also needs more padding, feel a bit cramped. Don't be afraid to make the actual HM a little smaller to accomplish this.

 

The color you chose is a great color by itself, but here I don't think it has the saturation you need. You need something to really draw the user's eye, especially around the CONTACT US link (which I like on the right by itself).

 

I had something like #8a588e or #944d99 in mind. The latter might be a bit too vibrant, but hopefully you get the idea. Something like #d04dac, a more pink-ish wouldn't be bad either. It's hard to judge without seeing it. This is probably just personal preference though.

 

I'd use the color you choose around the CONTACT US link like you did around HOME. Think about where you want the user to click: is it more important to have them clicking on the page they are already on or the contact page?

 

For an active state you could try a little triangle underneath the active link (connected to the navbar and the same color) or maybe 4px bottom border on the individual link itself with the color you choose. Something noticeable but not more noticeable than the CONTACT US link.

 

Let me know if you want more suggestions, happy to help!

Cheers Porky! The pinkish colour ended up looking gorgeous (if I do say so myself!), so I sorted out the padding issues and sent it off clientwards! Fingers crossed they like it, because I can't wait to actually start coding the flipping thing (I feel like I have spent at least the last ten years of my life in Photoshop. AT LEAST.)

 

Thanks again for all the help, you're a legend.

Looks Great But You Need To Get rid of the image watermarking

Cheers Porky! The pinkish colour ended up looking gorgeous (if I do say so myself!), so I sorted out the padding issues and sent it off clientwards! Fingers crossed they like it, because I can't wait to actually start coding the flipping thing (I feel like I have spent at least the last ten years of my life in Photoshop. AT LEAST.)

 

Thanks again for all the help, you're a legend.

 

Happy to help. Hopefully the client likes it so you can post up coding questions I spend all day in Photoshop since we have Front-End developers to handle all the markup, and I love it. Photoshop is amazing...

 

It could also be the beer talking. The beer train just rolled through the office...

 

Looks Great But You Need To Get rid of the image watermarking

 

She is just producing a comp for the client, it's pretty obvious that she will purchase the image and remove the watermark when it goes into development.

Hello boys and girls! Remember me?! EXCITING NEWS for people who clearly haven't grasped the meaning of the word "exciting" yet - the client has decided that the blingin' gold photo frame actually was the way to go! I am trying to reach a compromise here, as I am (UNDERSTANDABLY) reluctant to take that step back (incidentally, it's not "tacky", it's "vintage". Just so you all know), BUT I am struggling a bit with this because I liked it a lot more before. But then again, it's not my website!

 

SO, it would be lovely if you would cast your eyes on these: the first one would probably be my preference, if I went with the second one I would have to change the header around a bit, which I have been too lazy to do not got round to doing yet.

 

I await your comments with bated breath

Can you make the borders thinner?

Hello boys and girls! Remember me?! EXCITING NEWS for people who clearly haven't grasped the meaning of the word "exciting" yet - the client has decided that the blingin' gold photo frame actually was the way to go! I am trying to reach a compromise here, as I am (UNDERSTANDABLY) reluctant to take that step back (incidentally, it's not "tacky", it's "vintage". Just so you all know), BUT I am struggling a bit with this because I liked it a lot more before. But then again, it's not my website!

 

SO, it would be lovely if you would cast your eyes on these: the first one would probably be my preference, if I went with the second one I would have to change the header around a bit, which I have been too lazy to do not got round to doing yet.

 

I await your comments with bated breath

 

I like the one with the black borders. The other has too much "vintage" gold.

 

The logo reads "Airmasters" with some kind of squiggle in front of it. You need to tighten up the spacing and find a character with the same kind of weight, but you may need to swap fonts for the H.

 

Other than that, not bad.

 

If your client is stubborn and forces you to go with the gold border drop it to 3 or 4px, its a bit heavy as is. Black border looks great at the size it is now.