Crit my site redesign WIP

[MikeMakesMonkeys]

I've been toying with a new idea for my site and I'd appreciate a fresh pair of eyes or two.

I've got the progress so far uploaded at http://ghafla.dribble-sponge.co.uk/model/

Clicking the pictures would take you to a very similar page with one double sized pic and a number of smaller thumbs. The solid block of images is a conscious design decision I made, but I don't like it now. It's still very early days so any crit would be much appreciated.

Tell me what you think! Thanks!

[Dile_]

Hey Mike, I think the problem with your site is the color arrangement and the structure.

First of, when you hover a button, you have this orange text changing like crazy, and its not hovering 'close' to what you're about to click, but far away from some of the buttons, + its distracting.

So you're sitting there thinking of what to click and at the same time you get that flashy orange text jumping around on the left.. hmm

I've seen some websites use that <div> effect pretty efficient... and mainly because it has been more 'discreet' and less annoying to the eyes. I think thats worth considerning anyway.

Also.. maybe think about the size of your 'project' thumbnails.. you're giving away a lot and by the same time those thumbs are a bit boring nothing happens when you hover them, except for what i mentioned before.. it'd be more interesting to hover a thumbnail, and it'd grey out or fade a bit you know ? or even displaying the 'project description' as you hover each project .. instead of that div effect :]

also the colors are.. weird you got a lot of idifferent greens, and the borders are messing with my eyes.. aswell as that orange contrast thingy..

turn the website black&white in photoshop and see how readable it actually is..



OVERALL.. good website.. if you want to do minimum work to make it better... GET RID OF THAT ORANGE TEXT.

[corky13]

You might want to choose a different font. This one looks all fancy and nice but its a bit stressing for your eye =/ I suggest you choose one that goes more in hand with the one in the "explaining box".

[tomwaits4noman]

way too busy for a viewer

I would suggest a nice clean simple banner on top

with home | about or bio | portfolio and contact

that way you can break up the information and reveal it gradually

When viewing a website its a bit like viewing a house

You need a starting point so the viewer knows what the site is about - you don't want too much information here just enough so they can get the basic over view of whats in the site, maybe a quick bio or details of latest projects then your strongest pieces, everything else can go on seperate pages.

also the text - I know verdana/Arial is boring but it works its easy to read and not too distracting.

also you need to rethink the colour scheme and all your links lead to altavista


look at how other pros build their portfolio sites, see what works and use similar techniques in your site.

I would personally stay away from tables

use css div tags and html

you can download a full trial version of dreamweaver for 30 days and build your site through that.


if you want advice on web design or scripting a site try google or if you want you can pm me

[Black Spot]

You don’t have a doctype declaration. It will fail validation right from the start.

[MikeMakesMonkeys]

Thanks guys - much appreciated. Crit always makes you see things differently.

It seems that this is one of those designs that starts out good in my head but moves further and further away from the concept as it develops. I was vainly hoping it was just me disliking it... but in the light of day and with your crit I'm thinking I had good reason

I think I should have been clearer - this was the portfolio page - but the site would be based around the same layout of 150x150 squares and rectangles made up of square sized chunks.

Dile: I hadn't thought about it that way - the whole driving force behind this redesign is to get things a bit more together and yet I see what you're getting at. Hmm... <strokes chin>

I like the fading idea - I think I blagged a script for that a while back. I'm a bit reluctant to make the thumbs more obscure though - One of the crits I sometimes hear re: other peoples sites is that the thumbs are too cryptic. There's a thin line between enticing people in and hiding the good stuff. Ultimately portfolios are shameless self promotion.

Thanks - lots of thinking points there though,

corky13: Agreed. I didn't like the font on my business cards when I started designing this.. but now I have a new appreciation for it's brilliance.

tomwaits4noman: I'm still stuck on web 1.0 - separating style and content is still a mystery to me. But one I've been meaning to look into. I have access to dreamweaver at work, but I've not been able to get past using it as a glorified word processor yet

Is there a reason to avoid tables? (compatability issues or anything) - I've been using them since I first started playing with sites years ago.

lol - yeah that altavista link is left over from the place I blagged the script from

Black Spot: You mean a text explanation? Hmm - you really reckon? Agreed I do need a bio/cv section .. but outside of that I was going avoid a blantant text explanation as much as possible - let the pictures do the talking. That's why people would visit the site surely?

Cheers again ppl, I'm gonna start again taking what you've said on board. Will post back soon!

[Black Spot]

The whole thing with declaration is that the browsers know what they’re looking at. Without declaration, you have no control as to how it should be shown. It’s part of the head and should always be included. Try it with http://htmlhelp.com/tools/validator/ . Seriously, I nearly damaged my scroll finger with the errors.

[Jazz]

I know you asked someone else, Dune, but tables are meant for what they call "tabular data", like records in a spreadsheet or database. What you're looking to do is design your layout for displaying your portfolio. (Nice pictures!)

Dile mentioned DIV containers. Those are really good for helping you lay out your page that way you want, while adhering to the newer standards of HTML and XHTML. When you use DIV tags around your different sections (like the section of thumbnails, for instance) and turn off CSS, you can see the DIVs stack in order from top to bottom, for those who can't or don't view CSS. Very accessible!

If you want to see what the DIVs can do, here's one place to look: http://www.glish.com/css/ There are examples of "fluid" and "static" layouts.

Check with me via pm also, if you need any more guidance!!

[MikeMakesMonkeys]

Ah - this is new to me. I'm still a bit of a beginner on the code side... and yes... that's not a load of errors... that's a sh1tload of errors

Thanks - will look and learn

edit... and as I read more I see more ... it is the way ...

[Black Spot]

Look on the bright side, you did not create it in Word like I did when I knew nothing.

[tomwaits4noman]

tomwaits4noman: I'm still stuck on web 1.0 - separating style and content is still a mystery to me. But one I've been meaning to look into. I have access to dreamweaver at work, but I've not been able to get past using it as a glorified word processor yet

Is there a reason to avoid tables? (compatability issues or anything) - I've been using them since I first started playing with sites years ago.
[/QUOTE]

Tables take longer to load, even if you set the width and length of a table if your content goes over it pushes the table out, also if you want to change the layout of a table through out the site you have to change each page individually.


Css and div tags are so much more powerful, you can easily format your
and change the entire layout and colour scheme by editting the css alone.

if you have access to dreamweaver google free dreamweaver templates and free css templates
download a few and play around with them and edit and change them to your liking. Most templates are w3c compliant and are cross browser compatible.