27 replies [Last post]
SteveG
Offline
Regular
Last seen: 15 years 5 days ago
Joined: 2004-11-16
Posts: 37
Points: 0

Hi there,

I have been lurking around these pages for a few weeks now, and have finally found a few minutes to join up.

Please can you check out my new design for me: http://www.painlesscomp.pwp.blueyonder.co.uk/test/

It is a site that I am in the process of building. It is a fair way from being finished though, so don't expect much content or all the links to go anywhere!

Unfortunately I am no graphic designer so I would like some feedback on how it looks to you, and any ideas on what it may be missing. I would like to know where I'm going wrong before I start adding more to the site. I have tried to keep the code + CSS as clean as possible. But I'm new to this.
Does the colour scheme need changing?
Is it usable to you?
Does it work on your browser?
e.t.c

I have tested so far in I.E 5.0-6.0 and Firefox. Unfortunately I have been unable to test it on any Mac specific browsers so feedback there would be very helpful too.

Mank thanks in advance

Steve

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 16 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Constructive criticism required!

Okay; I only have a few minutes and I haven't studied the site in detail, but here we go with some things for you to consider (meant constructively as you asked):

(1) The page width is spot-on, your font sizing is good and the page degrades nicely.
(2) The top image of computer keys is very cliched and the main logotype is boring and lacks strength.
(3) There are three different navigation blocks, which will only serve to confuse.
(4) The two blues and the manila all clash. Try a light blue of the same hue as the darker one, and if you are going to use manila, try taking it towards more of a cream than a brown. The 'Welcome' text blue also clashes.
(5) The navigation icons look tacky next to the generally professional look of the rest of the page.

I'm looking at it on FireFox Mac, and I've seen a lot worse sites out there. Keep going as it seems structurally sound Smile

Life's a b*tch and then you die!

SteveG
Offline
Regular
Last seen: 15 years 5 days ago
Joined: 2004-11-16
Posts: 37
Points: 0

Thanks

Thanks for the kind words there Roy. Smile
Your comments are just the kind of feedback I was looking for. It is certainly a big help having input into a site from other people. I'm trying to create this site in the "correct" way. And being a non-design person any feedback is appreciated.

I did wonder about the navigation icons being a bit tacky, and will probably remove them, or replace them with a single styled bullet image.
I intend to replace the Logo text with an Image at some point in the future.

Thanks again for your input, and I shall certainly change some things with regards to what you said, especially the colour scheme.

Steve

wrender
Offline
newbie
Ottawa
Last seen: 15 years 4 days ago
Ottawa
Joined: 2004-11-17
Posts: 4
Points: 0

Site

Hey,

Nice site, looks very sharp with nothing miss aligned. I would definalty recommend putting up a logo for "Painless Computers". You can download free fonts from the internet, and then put them into adobe photoshop.

I agree with the side menu icon's being tacky... they look like old school linux icons, haha. You can use css to make simple image buttons. Basically have one image for up, and another image for down, or clicked.

If you want to use images beside the links, like you have now for the menu, i would recommend making our own icons, and maybe use colors that look good with the rest of the site.

I always have problems picking out colors that don't annoy people, i've found this site really usefull... http://wellstyled.com/tools/

Good luck with your site/company.

Wes
www.ridevillain.com

SteveG
Offline
Regular
Last seen: 15 years 5 days ago
Joined: 2004-11-16
Posts: 37
Points: 0

Constructive criticism required!

Hi Wrender

Thanks for your comments. I am currently working on the branding for the site, so that text based logo will be gone before too long.
I shall also be making the menu mainly text based too, based on peoples comments.
Thanks for that link, thats a very handy tool. Added it to my bookmarks. Laughing out loud
I have found the most difficult aspect of designing this site to be coming up with a colour scheme that works ( I haven't found one yet! ) and that link is an excellent aid in this process.
Can someone let me know if this site works for them on any of the popular Mac based browsers.

Thanks again

Steve

SteveG
Offline
Regular
Last seen: 15 years 5 days ago
Joined: 2004-11-16
Posts: 37
Points: 0

Constructive criticism required!

Hello again,

I have now made a few changes. Can you have another look and see If you think it's an improvement or I've made it worse.

Heres the URL again: http://www.painlesscomp.pwp.blueyonder.co.uk/test/

I'm still having troubles with a color scheme that works well with this site. Does anyone have any suggestions.

I want to get it working 100% before the site goes live.

Thanks again

Steve

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 16 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Constructive criticism required!

Better, but don't mix your fonts like that. Use a font with character for the logotype, then use a plain font for everything else. Don't use the block serif face for the logotype as this looks like something out of a western movie! Go for a nicely styled sans-serif face that looks up-to-date and 'technical'. After all, you're dealing in computers, not wanted criminals Wink The rest of the copy should be in a plain sans-serif face like Trebuchet, Arial, or Nimbus.

Don't split your menu up and then call one of the boxes 'menu'. Either put everything together under one menu, or split them up under more specific titles.

Lose the manila colour. Try a very light and dusky blue, or a very light sand, or white; anything but that dark 'packing box' manila!

HTH Smile

Life's a b*tch and then you die!

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 43 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Constructive criticism required!

One small point. Being on Blueyonder personal web pages you can shorten your url to ~

http://www.painlesscomp.myby.co.uk/test/

This makes it a bit easier to remeber and less to type.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

SteveG
Offline
Regular
Last seen: 15 years 5 days ago
Joined: 2004-11-16
Posts: 37
Points: 0

Constructive criticism required!

Thanks Stu, I didn't realise that. It shall be moving to a dedicated server when it's completed though rather than BY's unreliable personal web pages.
Thanks once again for your words of wisdom Roy, I have now gone for a complete change in colours which I am hoping is an improvment. Ignore the empty space at the top this will be replaced with a logo at some point in the future.

GeoGeo
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2004-12-04
Posts: 13
Points: 0

Constructive criticism required!

Hi Steve

I'm also a newbie to this forum, so I thought I would share with you some of my opinions.

Looking at the site, I can see it looks structurally sound (viewed in Firefox), so that is the most important aspect.

As regards the colour scheme, I would say that it looks a little bland. I think that you have chosen colours relevant to the theme of your profession. Without looking at your content, I would have presumed that it was a site with reference to something technical. I think you have succeeded there. I have studied graphic design and the importance of colour is very important. I just looked again at your site and I still have the same impression that is on the bland side. Perhaps there is too much use of grey?

I would like to look at your site again when you have added more content, especially a logo. I quite like the boxes in the right hand side navigation area. I think they work quite well.

You are doing a good job on the site and hopefully with constructive criticism, it can only get better.

Cheers Steve.

Andy
GeoGeo
http://www.geogeo.co.uk/index.htm

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 16 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Constructive criticism required!

Steve - you've now changed so many things at once that the colour balance/dynamics of the whole page has changed! That's fine if you know what you're doing and have a good eye for these things, but when you're asking others to help you, it's a bit confusing!

As Andy has just said, you now have too much grey. He's right: it is bland. When you used the dark blue header, light blue side, and patterned background, it was just the main page colour that needed changing. But now you've altered lots of things together, you need to start again.

Sort your header out and include it; decide what background you want (patterned or grey or coloured etc.); then post again. Then I will tell you what I think you need to do to improve it colour-wise. I don't want to design it from scratch for you, I would much rather you start from something that you like, then I can help you to fine-tune it if you want.

Obviously colour issues are subjective, so you'll need the opinions of other designers, but they too will probably prefer to guide you bit-by-bit Smile

Life's a b*tch and then you die!

SteveG
Offline
Regular
Last seen: 15 years 5 days ago
Joined: 2004-11-16
Posts: 37
Points: 0

Constructive criticism required!

Thanks Guys, I really appreciate your help so far even though I keep on making it worse!

I really wasn't happy with the previous blue/brown colour scheme, so I thought I would tweak it a little, and as Roy mentions above it has changed the whole dynamics of the page.

Now I am stuck and cannot seem to find a colour scheme that works.
I have currently decided on no background pattern as I cannot find/design one that works with the overall design, but the whole page now feels a bit "empty"

I think It is nearly there with the design, it just needs a colour scheme to fit with it, which is where I am stuck. I have put in a basic header image to give some idea of how it will look on the final page.

Any ideas on how to tweak the colour scheme will be most appreciated.

Thankyou once again
Steve

GeoGeo
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2004-12-04
Posts: 13
Points: 0

Constructive criticism required!

Hi Steve

First of all, I would like to say "don't be too harsh on yourself". I have looked at your site a few times and for me, the changes you have made have not necesarily made your site worse. We all learn and this is part of the process. I think that you are doing a fine job.

As regards your colour scheme. Well, think about what sort of message you want to portray. How do you want your potential customers to percieve your site. Colours can have a very profound pshcological effect, so choosing the right combination is never easy.

I think that your site is still looking a bit bland as regards colour. There are millions of sites out there with similar colours. Try and be a bit different and take some risks. Obviously don't go overboard and have a black background and green text for example. That is just plain suicide.

Think about white. Can you build your site with white in the scheme. This is a neutral colour and I think personally that it works well for the areas where you want people to read your main text.. Some will disagree, but I think you can't go far wrong with this approach. When we talk about using colours, we think we have to use colour all over the shop. I don't think this is absolutely necessary. You can use accents of colour, shades, or even textures to give you page warmth for example. I would say that you lack some warmth on your page.

Take a look at this link as I think you may find it useful. Colours are not an exact science and with a colour wheel, it can make selection particularly easy. Take a look and see what you think.

http://wellstyled.com/tools/

I hope this might of helped you in some way. Please don't loose your confidence in your abilities. You are doing a fine job so far.

Andy
[/url]http://www.geogeo.co.uk[url][/url]

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 27 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Constructive criticism required!

You should try the Online ColorSchemer. You enter a base color in RGB or hex into the entry field(Drunk and press set color and BINGO a very professional looking color scheme. I have used it for a number of sites and haven't had something that isn't tonally balanced yet.

You could use #285577 as the color "seed" - it gives a number of color options, and your red color #980000 can give another set of options. If you click on any of the color swatches on the right the ColorSchemer will load that color as the "seed". You can repeatedly click on one of the outside colors and the palette will rotate (clicking on one of the four interiour colors will jump you into a lighter (pastel) palette.) Anyhow - have some fun with it if you want. It also does greyscale pretty well.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Constructive criticism required!

I don't like the justified text - I'd have text-align set to left.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

SteveG
Offline
Regular
Last seen: 15 years 5 days ago
Joined: 2004-11-16
Posts: 37
Points: 0

Constructive criticism required!

DCElliott wrote:
You should try the Online ColorSchemer. You enter a base color in RGB or hex into the entry field(Drunk and press set color and BINGO a very professional looking color scheme. I have used it for a number of sites and haven't had something that isn't tonally balanced yet.

Thankyou, that is a very useful little tool that I wasn't aware of. I have previously tried the wellstyled colour wheel selector, but don't get on with that.

Thanks for the confidence boost GeoGeo. Surprise surprise, I have now totally changed the colour scheme again. I am now much happier with the results. I'm really aiming for a simple to use, and easy to navigate site, that complies to "web standards" which I hope I have achieved.

As always thanks for all your words of wisdom thus far. If you'd care to comment heres the link again: http://www.painlesscomp.myby.co.uk/test/index.html

Steve

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Constructive criticism required!

Been a long time since I viewed your site, and I have to admit, it's brilliant. Much better now.

One thing - instead of using:

<!--
**** End Menu ****
-->

Use something like

<!-- End Menu -->

Takes up less code, therefore less bandwidth.

Verschwindende wrote:
  • CSS doesn't make pies

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 16 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Constructive criticism required!

'slooking good Steve. The logotype is a million times better than it was. The blue and red colouring is a little unusual but I think it works Smile I still think you should either combine the two link boxes under one title of 'menu', or give the top box a more specific title so as not to confuse.

For the header: allow a little bit more space above the logotype - let it breath. Write PCs, not pcs. Don't use an ampersand unless you have to as modern usage is only for names of business e.g. Smith & Jones. An ellipsis should not be preceded by a space i.e. more...

Overall the design is looking okay but it still lacks structure. If you are going to settle on a white foreground and background then give your key focal points some more weight as the eye currently falls straight to the menu boxes, skipping the key sales messages. For example, use some sort of background behind the top logotype to balance the footer and 'anchor' the page. Try using a coloured block background on your Shop and News subheads - try dusky pink; pale, dusky blue; or grey. You'll need to experiment but the important thing is to change one thing at a time and look at the design as a whole.

Well done so far - keep going Smile

Life's a b*tch and then you die!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Constructive criticism required!

Two colors that go nicely:

#f7f3ef - dusky, pale beige
#bd8cde - pale blue

Verschwindende wrote:
  • CSS doesn't make pies

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 27 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Constructive criticism required!

Very clean, functional and professional looking. I would compact things a bit in #content by setting line-height:1.2em; rather than 1.5. Your menu titles can grow out of the bottom of the boxes with increases in font size. You might consider a "sliding doors of CSS" trick to handle it (Just Google the phrase)

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

SteveG
Offline
Regular
Last seen: 15 years 5 days ago
Joined: 2004-11-16
Posts: 37
Points: 0

Constructive criticism required!

Quote:
Very clean, functional and professional looking.

Excellent, thats what I was aiming for!
Quote:
Your menu titles can grow out of the bottom of the boxes with increases in font size...

Thanks, I've been meaning to fix that for some time and forgot all about it. All should be well now.

Quote:
I still think you should either combine the two link boxes under one title of 'menu', or give the top box a more specific title so as not to confuse....

Thanks Roy, I intend to do this when the site finally goes live, and I have all the content in place

Thanks to everyone for all your suggestions. I have implemented a lot of them and think that the design has improved immensely because of your input into it.
I couldn't of achieved this without the great community here at CSS Creator.

Cool

Thanks once again

Steve.
http://www.painlesscomp.myby.co.uk/test/

tom_de_schlong
tom_de_schlong's picture
Offline
Enthusiast
UK
Last seen: 8 years 2 days ago
UK
Joined: 2004-06-13
Posts: 92
Points: 0

Constructive criticism required!

Hi i have just validated your site and it says you haven't got a character encoding. I doubt this is important and I would recommend that you add
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
to the head of your page

another possible problem is that when viewed with css disabled the main menu links are below the content

hope this helps

Thomas Willmot

Want a free Ipod, live in the US or UK then please <a href="http//ipods.freepay.com/?r=21545802">check this out</a>. Plenty of people have already got one just search google for freeipods.com.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 16 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Constructive criticism required!

tom_de_schlong wrote:
another possible problem is that when viewed with css disabled the main menu links are below the content

I don't know the rights and wrongs of this but some people say that this is better for SEO. Does anyone have an informed opinion on this issue?

Life's a b*tch and then you die!

GeoGeo
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2004-12-04
Posts: 13
Points: 0

Search engine

I am led to belive and have studied quite a bit about the placement of content for search engine optimisation. The popular nearer the top of your html coding the better for search engine optimisation. I too tend to try and put the content in the first DIV where ever I can, but it is not always so easy depending on what type of structure you are going for.

I cannot say if it works or not, but that is what I try. I haven't had a number one hit, so I guess my experience is nothing to go by. Hope it helps though.

Andy
GeoGeo
www.geogeo.co.uk

tom_de_schlong
tom_de_schlong's picture
Offline
Enthusiast
UK
Last seen: 8 years 2 days ago
UK
Joined: 2004-06-13
Posts: 92
Points: 0

Constructive criticism required!

I thiink that having text links at the bottom of the page to optimize search engine indexing is only for when you use images for your main navigation which is not the case here

it is far more accessible to have the links first so that you don't have to keep scrolling the past the content to get to the links.
another option would be to add an anchor link at the top of the page that moves the page down to the links when clicked. This could be hidden by css so that it is only seen when needed.

Thomas Willmot

Want a free Ipod, live in the US or UK then please <a href="http//ipods.freepay.com/?r=21545802">check this out</a>. Plenty of people have already got one just search google for freeipods.com.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 16 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Constructive criticism required!

I use a 'skip links' jump-link at the top of my un-styled page (hidden with CSS) but would prefer to have the content at the top if my layouts allowed it (which they don't). I just wonder about what is better for SEO.

Life's a b*tch and then you die!

tom_de_schlong
tom_de_schlong's picture
Offline
Enthusiast
UK
Last seen: 8 years 2 days ago
UK
Joined: 2004-06-13
Posts: 92
Points: 0

Constructive criticism required!

creating a site that is 100% standards compliant and sematic will improve your SEO more than any tinkering or trickery.

As far as I know (which isn't very far) sematics dictate that the page should be outlined thus

Page Header

Main Links

Main Content

Secondary Links

Secondary Content

Footer


This should include options to jump to the important parts with jump links provided below the header

This is only my opinion

Thomas Willmot

Want a free Ipod, live in the US or UK then please <a href="http//ipods.freepay.com/?r=21545802">check this out</a>. Plenty of people have already got one just search google for freeipods.com.

SteveG
Offline
Regular
Last seen: 15 years 5 days ago
Joined: 2004-11-16
Posts: 37
Points: 0

Constructive criticism required!

roytheboy wrote:

I don't know the rights and wrongs of this but some people say that this is better for SEO. Does anyone have an informed opinion on this issue?

I looked into this quite a bit before coding this site, and the majority of opinions seem to agree that having the content at the very top is the best for search engines.
As long as the content isn't too long so that the search engines don't get as far as the links you should be ok. Obviously these are only other peoples opinions and no one really knows how the big search engines work, except for certain employees.

Even though this current site isn't live and hasn't got any real content yet, it still appears in the top 10 with some of my required keywords. This is without any backlinks, except for the one from this site.
Hopefully when the site is live and with content it should do quite well, but with the search engines changing there ranking systems all the time who knows? Only time will tell.

I find SEO to be an interesting topic, but there are so many differing opinions it is hard to know what to do.
I guess the best possible start though is to have a page that is structually sound and validates correctly.

Any other opinions on this?

Steve