Hi, would like some feedback of Do's and Dont's on my homepage

Would be great if you could help me here

 

http://beffo.se/stromming

First off, I would try and differentiate between your header and navigation and content areas.

There is a bit of a lack of colour and interest visually - try adding some images and colours, they can make a huge difference.

The W3C badges are a bit unneccesary, but if you want to keep them there, I suggest making them the same size to begin with, and removing the border around the html one.

A portfolio page is probably the hardest page to do, so I would look around for a bit of inspiration, and try to give your page a visual theme, this will add much needed interest.

Well done for making your site validate, though. You'll be amazed how many don't.

1) Don't display "valid" buttons when your site isn't valid. You have no character encoding and as such, the W3C validator won't accept your site.

 

2) Try and accommodate for other screen resolutions than 800*600.

 

3) Consider using an unordered list for your navigation.

 

4) Consider specifying a font or three for the body. Right now it's my default times new roman which isn't pretty at all.

 

5) Consider using a font other than Impact for your title. http://dafont.com has hundreds to choose from.

 

6) Consider adding more COLOUR to your design. The monochrome look is hard to pull off, and the gradient you're using is making my eyes hurt.

 

It's not bad if this is your first site, but you still do have a long way to go. Good luck!

don't want to speak out of turn here because i'm a complete layman and you'd have to take my point of view with a pinch of salt ...

 

but i kinda liked it, your gradient didn't make my eyes hurt but having small black text on it is kinda hard to read. i like how simple it is (my brain doesn't work fast enough for complicated home pages) although i guess it does have a lot of empty space. maybe you could leave a little more space between your heading and your links, and also at the bottom underneath your copyright 2008 bit, because it's looking a little squashed there.

 

but yeah, i've seen way worse websites than that

I think the menu should be more defined, just applying some css can make a lot of difference. The header seems a bit wordart style to me, and the gradient im not sure on either.

Thanks for the feedback. I am making a new layout which I hope will be better. Will post updates when it is done.

Not bad at all, but it'll be more visually pleasing if you have your page centered.

 

My 3 favorite smilies: o.O | =P | xD

XD That made me smile.

I am working on a new layout with a new concept and new color scheme. Any new feedback?

 

I have heard people saying the text can be hard to read since it looks a lot like the background. Any ideas of a color that I could use instead? Personally I like it and have no problem reading it.

 

First up, that's a massive improvement over the first one.

 

My biggest negative point is that you (and your friend TJ) use rather a lot of bevelling/3D effects on your websites. If you take a look around the web today, people tend to use gradients, and drop shadows but rarely are they used in combination to produce the 3D bevelled look. This is quite an old fashioned trend and while it isn't wrong it doesn't help your sites to look modern or clean.

 

In light of this, it actually looks quite nice on this design! However, I would get rid of the 3D effect background as this in conjunction looks very busy. Try using a 2D pattern, or just a simple gradient.

 

To check whether your text and background colours are ok together, use this tool: http://www.visionaustralia.org/info.aspx?page=628#download

 

As for suggestions of colours, something like the light beige colour in your sig (What is that about btw) might be a good idea.

Try using a 2D pattern, or just a simple gradient.

 

Could you develop this a bit more?

 

I changed the text color and it looked a lot better, thanks for the link btw

And my sig is a browser game I play...

By 2D patterns I mean something like these: http://squidfingers.com/patterns/

 

They are *flat* patterns and don't appear to come out of the page at all like your current one does.

Something like this perhaps?

 

Oh, and If you think I don't get it... I prolly don't... I'm not a good designer but I do my best.

Think I need to edit the color scheme with that background.

 

Far too much colour IMO - but edit the background to the colour scheme, not the other way around!

 

Don't worry about it, I am happy to give you whatever help I can, I am not a good designer either, I just muddle through and get on with the coding

 

What you are looking for here ideally is a not too strong pattern which won't take over the page.

One way to help this might be to close up the gap between your header, nav and main - but if we find the right background this may be unnecessary.

 

I notice you have removed the bevelness, I think it is a drastic improvement, what do you think? And your text does look much better.

 

Squidfingers is a great resource, but perhaps try making your own pattern using the colours in your design, purple and brown is a very unique combination, (I like it) and you may struggle to find something which sits back into the background but complements your design. On squidfingers page 5 where you got that pattern from http://squidfingers.com/patterns/5 the top middle and bottom right are my two faves, if you tweak the colours in a graphics program it will look much better though. There is also some potential on page 20 http://squidfingers.com/patterns/20 and try top right of this page http://squidfingers.com/patterns/21/

 

Keep trying different ones until one *Clicks* the foreground should pop out and the background should add interest while not *eating* the page

 

The next thing to look at will be the typography but this is probably easier done when the site is coded than in whatever you are designing in. You just need to get your text spacing and line-height right to add a touch of professionalism.

 

Hope this helps,

 

Eris

 

P.S. Liking your avatar

Your new layout is a HUGE improvement already in my opinion - so much more readable and gentle on the eyes.

 

I basically agree with everything Eris has said, and I think a more subtle background is the way to go; I don't think you've quite nailed it so far with the ones you've posted on this thread.

 

I'd also be keen to see some images as part of this design.

 

Definitely on the right track though.

I'll try to work on this and get some help from TJ, he's much better than me anyway >_<.

 

At the moment I am working in Photoshop CS2, I am not too good with the program itself however so I can't use all the tools yet.

Also I am not working in any graphical program, I use PS CS2 and notepad, that's it. On my teacher's recomendation of course.

 

Thanks for great feedback

 

Like ur avatar too, but Daniel is of course the unbeatable favorite, but Teal'c get challenging sometimes.

PS CS2 is a graphics program

 

If you get the hang of the magic wand tool or the colour balance or hue&saturation tool (the last two are in the image>adjustments menu) you should be able to change the colour of a pattern.

 

Or you can cut the pattern down to it's smallest repeated element and replace it pixel by pixel.

 

You are definitely getting there, don't give up.

 

P.S. Daniel is wicked, but Sam rules (i have a horrible feeling we are both supporting characters of the wrong sex here )

but edit the background to the colour scheme, not the other way around!

 

that's good advice.

 

the banner / nav and content colours are coming along very nicely, there's no need to overbake / complicate things with such a textured and style background imho.

 

maybe a different font for the nav and content?, verdana's a safe choice (i pretty much always use it), arial and lucida grande are good too.

 

i'm never entirely sure about centreing everything, but some like it. if you have the chance have a play with the banner type indented from left say at a guess just 75px, align the start of the nav to this and then left align the content with say padding of 25px. tweak from there. then erhaps fix the right padding to double that of the left.

 

i'm never entirely sure about centreing everything, but some like it. if you have the chance have a play with the banner type indented from left say at a guess just 75px, align the start of the nav to this and then left align the content with say padding of 25px. tweak from there. then erhaps fix the right padding to double that of the left.

 

Ok, since I am a beginner that made a mess in my puny little head...

Could you please make it a little more... understandable?

Ok, since I am a beginner that made a mess in my puny little head...

Could you please make it a little more... understandable?

 

hi sorry - meant i'm never sure about centreing text or headers or navigations, e.g. text-align : center

 

was suggesting have a play with left aligning it all and use more padding / indentation for the navigation and header / banner than the content.

 

hope that makes more sense?

 

Ah that was better Yeah I agree with you... but since I am stupid I also don't know what indentation is.... But padding I understand

Ah that was better Yeah I agree with you... but since I am stupid I also don't know what indentation is.... But padding I understand

 

indentation same effect as padding mostly, text- indent or is it ident?

 

another suggestion - how about splitting the text in content into two split columns, might give it a bit more form?

 

PS CS2 is a graphics program

 

If you get the hang of the magic wand tool or the colour balance or hue&saturation tool (the last two are in the image>adjustments menu) you should be able to change the colour of a pattern.

 

Or you can cut the pattern down to it's smallest repeated element and replace it pixel by pixel.

 

You are definitely getting there, don't give up.

 

P.S. Daniel is wicked, but Sam rules (i have a horrible feeling we are both supporting characters of the wrong sex here )

 

 

What I mean with graphical programs are Website making programs like dreamweaver... I don't use such programs

PS CS2 is a must since our teachers wants us to work with images.

 

Hehe, do you want trade characters or what?

I like having Daniel, I feel kinda like him... only he's brilliant and I'm not... not yet anyway.

use some picture. though your last website layout is much better than first website layout.

use some picture. though your last website layout is much better than first website layout.

What kind of pictures did you have in mind?

Question - who are Daniel and Sam?

They're characters in the TV show "Stargate: SG-1".

Question - who are Daniel and Sam?

I was just about to ask the selfsame thing! Glad I'm not the only one who doesn't know. Is it very popular this Stargate thing? I'm too busy trying to learn web design to watch telly

It has a big cult following, but with good reason!

Very, very popular. It finished running last year after 10 long, wonderful years. My avatar is Sam and stromming's is Daniel (you may recognise him as the Russian spy in 24 series 6. The first of two direct to DVD films to finish off the series is coming out this month "Arc of Truth" and I can't wait!

 

Sorry Stromming this thread has gotten a bit sidetracked, please post another update of your design when you are ready

It has a big cult following, but with good reason!

Tell me that you watch it and that you love Daniel too...

Got a few updates. I did 1 with a new color scheme with more bright colors and I improved the old one.

 

Feedback would be great

 

New Color Scheme

 

No New Color Scheme

 

P.S

I have already seen Arc of Truth It was a good movie but I would rather have a whole new season instead of the movie... Movies are too short.

Hi Stromming

Of the two screengrabs in your last post, I have to say I prefer the 'no new colour cheme' for a web layout. It's easier on the eyes, and the background is less distracting.

Having said that, I love the background in the new colour scheme; reminds me of my parents' wallpaper in the mid 70's

I think it would look great in another project, but isn't quite right for this one.

In the first one, the contrast between the blue and the brown doesn't quite work, but I do like the colours.

 

In the second one the background is really nice but still perhaps a bit too busy. I think it might be worth trying putting a just-off-white box around all 3 boxes that you have as a sort of "Page" type thing, or just closing up the gaps.

 

Beyond that the only think that really needs sorting is the typography. If it was my site, I would take the bold off of the main text, align it to the left and set the line hight to something like 1.75em.

 

If you put different headings into the text and start to play with it you will start to see how the whole design comes to life because of course the most important thing on the page is the content that people have come to read. When the typography is done well you can see instantly if a design works or if it doesn't (that is if it distracts too much from the main design).

 

P.S. I'm jealous you've seen arc of truth, one more movie to go eh?

P.P.S Your English is very good! (I guess thats a good thing cos my Swedish sucks)

Here is an update

 

not to happy with the banner tho...

 

Which is the other one to go? xD I can't remember really.. But it isn't a fully fledged SG-1 movie right? Isn't it only with like 2 characters?

 

And yeah, my english is better than my swedish... at least I have better grades in english

I have begun to code the new website... It seems much much darker now than in PS...

I'm gonna try to make a brighter color scheme since this is a bit dark... stay tuned for more updates o.O

i think the black shadow is to big

i think the black shadow is to big

 

Here is what I've done so far... mostly working on the layout instead of the content at the moment.

I changed the background since a lot of people thought it was too busy.

 

Is the shade really too big? I think it's just fine... not to big, not to small.

 

>>Clicky<<