Web Design Critique
February 16, 2004 8:25 PM Subscribe
A site I designed was recently described as "competent but uninspired," while this stung, it matches what I feel about it. My question to the community: are any designers here willing to take a look and offer me some constructive criticism? I'd really appreciate it, as this site is for an artist friend and I'd like the design to be both professional and "inspired" without obscuring the art. [Link Inside]
The first and most obvious thing about it is the lack of consistent navigation. It doesn't matter how good a site looks if you can't figure out where you are in it and what clicking a particular link might do. It's quite disconcerting to have background colors change and the navigation change location (or disappear) when you click on what seems to be an internal link.
That said, I think the design complements the artwork well - it just needs a bit of tidying up IMO. I don't like having to horizontal scroll on the gallery pages - maybe these could be resized? Also the artwork titles don't line up with the following descriptive lines - is that intentional? It's not obvious that clicking the title brings up a larger version - the smaller jpeg could also be a link to the full-size image.
posted by cbrody at 8:59 PM on February 16, 2004
That said, I think the design complements the artwork well - it just needs a bit of tidying up IMO. I don't like having to horizontal scroll on the gallery pages - maybe these could be resized? Also the artwork titles don't line up with the following descriptive lines - is that intentional? It's not obvious that clicking the title brings up a larger version - the smaller jpeg could also be a link to the full-size image.
posted by cbrody at 8:59 PM on February 16, 2004
IANAWD, but I second the inconsistency across the site, particularly with regard to the navigation. The index page looks great and you could base the other pages on the same design with good effect.
posted by dg at 9:15 PM on February 16, 2004
posted by dg at 9:15 PM on February 16, 2004
Response by poster: Hm, OK. Navigation needs to be reworked, that I can do. The odd layout on the main page was me trying to fit in what I needed and give precedence to the Gallery and Contact links without making the layout looked to cramped. I can rework it, though. The thumbnail image ought to be a link as well as the title, I agree, and I need to indicate that the smaller thumbnails are detail views and are clickable.
As far as consistency goes. There are three stylesheets. The main page. The gallery pages, and the Contact/About/Credits pages. The navigation is supposed to look the same, except on the gallery pages there is a sub-list for navigating the gallery. I have no problem including this on all pages if it seems better.
I deliberately avoided using fancy photoshop effects and images for text because the site is primarily graphical, and I wanted to keep load times as fast as possible.
I would like to incorporate the feel of the main page across the site, but for the gallery it made more sense to have a minimum of extraneous clutter, simple images and descriptions. There is a second advantage to what I did, if you turn stylesheets off on the gallery everything still makes perfect sense.
I agree that the info pages need to be more in synch with the rest of the site. Would changing the colors and removing the pattern on the left be sufficient?
posted by Grod at 9:16 PM on February 16, 2004
As far as consistency goes. There are three stylesheets. The main page. The gallery pages, and the Contact/About/Credits pages. The navigation is supposed to look the same, except on the gallery pages there is a sub-list for navigating the gallery. I have no problem including this on all pages if it seems better.
I deliberately avoided using fancy photoshop effects and images for text because the site is primarily graphical, and I wanted to keep load times as fast as possible.
I would like to incorporate the feel of the main page across the site, but for the gallery it made more sense to have a minimum of extraneous clutter, simple images and descriptions. There is a second advantage to what I did, if you turn stylesheets off on the gallery everything still makes perfect sense.
I agree that the info pages need to be more in synch with the rest of the site. Would changing the colors and removing the pattern on the left be sufficient?
posted by Grod at 9:16 PM on February 16, 2004
Response by poster: Oh, almost forgot. The jagged edge of the main index graphic is to give the impression of a frame, which is literally what it is, as the image behind it is loaded randomly, refresh the page to see what I mean. There is a gif with a hole in it in a div with a background image that is actually a simple script for randomly loading an image. If that didn't makes sense the stylesheet for that page is embedded, so you can just view source to see what I did.
posted by Grod at 9:21 PM on February 16, 2004
posted by Grod at 9:21 PM on February 16, 2004
My recommendation: Take a look at some photo sites like Truck 808, Photomo, Photojenic, Troniu.dk, Apparently Nothing, Actual Blue, etc.
Notice how the site designs carefully hide in the background, thrusting the actual photos to the reader's attention without distracting them with cool navigation, whizbang graphics, etc.
The overall impression I got from your site was that it's trying too hard to be a cool website, and not hard enough to subjugate itself to the actual artworks and content. Does that make sense at all? (Sorry, I'm tired...!)
posted by oissubke at 9:46 PM on February 16, 2004
Notice how the site designs carefully hide in the background, thrusting the actual photos to the reader's attention without distracting them with cool navigation, whizbang graphics, etc.
The overall impression I got from your site was that it's trying too hard to be a cool website, and not hard enough to subjugate itself to the actual artworks and content. Does that make sense at all? (Sorry, I'm tired...!)
posted by oissubke at 9:46 PM on February 16, 2004
The inexperience shows. This is exactly the type of site a new designer would sketch out when asked to make somebody a portfolio. Go look at design house and portfolio sites to broaden your vision of what a portfolio can look like and do. This is exactly the point of those million graphic design sites (k10k etc) and magazines (CMYK, Print, etc) and books -- to continually share and expand one's vision of the possible.
You'll probably axe a lot of the bg imgs, ditch the randomizer and have more consistency across the pages. (Bad form changing the page width from index to interior.)
posted by raaka at 12:46 AM on February 17, 2004
You'll probably axe a lot of the bg imgs, ditch the randomizer and have more consistency across the pages. (Bad form changing the page width from index to interior.)
posted by raaka at 12:46 AM on February 17, 2004
oissubke is spot on. Maybe consider using Flash for a more immersive experience.
posted by derbs at 2:48 AM on February 17, 2004
posted by derbs at 2:48 AM on February 17, 2004
Suggestions:
- Your thumbnails are way too big, making for a heavy, hard to read page. Try to design a simpler, easier to use gallery. E.g., you could have one big image, and a series of small (50x50px) thumbnails underneath, maybe with some flash so you can scroll through the entire collection. forward and back buttons.
- Make the entire thumbnail a link, not just the title text.
The main link on the home page should be obvious, it should say "enter" or "start" or "gallery" or something.
- Lose the frames around the text areas.
- Simplify the site logo and use it on all the pages. Link it to the home page.
- Increase the line height on your main text style.
- Make the main menu always look the same and be in the same place. The exact same place; not just "somewhere near the top-left", but "50px down, 35 px across", for example.
- Use a consistent link style / placement. For instance, on the home page, you have "Gallery" in a large font with a blue dot somewhere on the left. You have "Contact" in a smaller font and blue dot hidden somewhere over the "frame", "About" in an even smaller font sans blue dot underneath the main text box and next to it you have "Credits" in the same smaller text size but RED, also no blue dot. Get my point?
posted by signal at 5:08 AM on February 17, 2004
- Your thumbnails are way too big, making for a heavy, hard to read page. Try to design a simpler, easier to use gallery. E.g., you could have one big image, and a series of small (50x50px) thumbnails underneath, maybe with some flash so you can scroll through the entire collection. forward and back buttons.
- Make the entire thumbnail a link, not just the title text.
The main link on the home page should be obvious, it should say "enter" or "start" or "gallery" or something.
- Lose the frames around the text areas.
- Simplify the site logo and use it on all the pages. Link it to the home page.
- Increase the line height on your main text style.
- Make the main menu always look the same and be in the same place. The exact same place; not just "somewhere near the top-left", but "50px down, 35 px across", for example.
- Use a consistent link style / placement. For instance, on the home page, you have "Gallery" in a large font with a blue dot somewhere on the left. You have "Contact" in a smaller font and blue dot hidden somewhere over the "frame", "About" in an even smaller font sans blue dot underneath the main text box and next to it you have "Credits" in the same smaller text size but RED, also no blue dot. Get my point?
posted by signal at 5:08 AM on February 17, 2004
Regarding an earlier suggestion: ix-nay on the ash-Flay, please.
posted by DaShiv at 5:54 AM on February 17, 2004
posted by DaShiv at 5:54 AM on February 17, 2004
The list of browser-specific anomolies on the "About" page is distressing. Use a simpler design that works for (almost) everyone. If I'm using one of your "perfect" browsers, I don't care about your caveats; if I'm not, I don't care why- I'm just not going to visit the site.
posted by mkultra at 6:41 AM on February 17, 2004
posted by mkultra at 6:41 AM on February 17, 2004
i'm learning too. i think you've got a huge advantage in having someone who says "competent but uninspired" - whoever it was, treasure them.
i'm finding that automated tools really help (even if it's not mine - apparently that was a bug in ghc for windows 98/me). i've just been looking at some of the sites recommended here, learnt something new (a xml declaration upsets IE), and modified and regenerated my own gallery site in a few minutes. it would have been hours of work if i'd done everything by hand. and automating things also makes it easier (easiest) to have a consistent look and feel.
posted by andrew cooke at 6:51 AM on February 17, 2004
i'm finding that automated tools really help (even if it's not mine - apparently that was a bug in ghc for windows 98/me). i've just been looking at some of the sites recommended here, learnt something new (a xml declaration upsets IE), and modified and regenerated my own gallery site in a few minutes. it would have been hours of work if i'd done everything by hand. and automating things also makes it easier (easiest) to have a consistent look and feel.
posted by andrew cooke at 6:51 AM on February 17, 2004
Response by poster: Wow, this is great (I can actually feel my skin getting thicker :)) Seriously, The navigation thing was the only problem I was already aware of and its good to have my suspicions confirmed. All the rest is new to me and helpful. The only suggestion I won't consider is to use flash. While it is applicable to this type of site, it causes to many problems. Besides, I know how to use Flash, but that's it. I can do the basics but I've spent five years with photoshop, a couple years with html, css, and xml (all in my free time because I love the stuff) and maybe a week playing around with flash.
I agree that the browser list is annoying. I could fix that by simply switching to a table based layout instead of the CSS I'm using. I don't like tables. I've used them, but I find them cumbersome and hard to change.
Besides, if browsers can't treat something as simple as {float:left} identically, there's a problem.
Andrew, I still intend to switch to an automated program, yours or someone elses, but right now I am bogged down with coursework, and don't have the time to do much except fiddle with what I've already produced.
I appreciate the suggestion that I use smaller thumbnails, the problem I have is that these works are incredibly detailed, and most are quite large. If I use smaller thumbnails it becomes difficult to know what they're thumbnails of. If I use a small section of the painting as the thumbnail, it can easily look like an entirely different painting.
The reason I did the gallery in such a simple way is purely personal: I hate having to click NEXT on gallery pages, and I personally like big thumbnails. Since I have no knowledge one way or the other what the majority of web users like.
As far as the guy who told me competent but uninspired, I barely know him, he's a reference librarian who did a stint as a designer. I tend to make friends with people who prefer to be honest, blunt, and straightforward and not worry to much about being nice. I find these people are more dependable and reliable, and, frankly, useful.
posted by Grod at 8:48 AM on February 17, 2004
I agree that the browser list is annoying. I could fix that by simply switching to a table based layout instead of the CSS I'm using. I don't like tables. I've used them, but I find them cumbersome and hard to change.
Besides, if browsers can't treat something as simple as {float:left} identically, there's a problem.
Andrew, I still intend to switch to an automated program, yours or someone elses, but right now I am bogged down with coursework, and don't have the time to do much except fiddle with what I've already produced.
I appreciate the suggestion that I use smaller thumbnails, the problem I have is that these works are incredibly detailed, and most are quite large. If I use smaller thumbnails it becomes difficult to know what they're thumbnails of. If I use a small section of the painting as the thumbnail, it can easily look like an entirely different painting.
The reason I did the gallery in such a simple way is purely personal: I hate having to click NEXT on gallery pages, and I personally like big thumbnails. Since I have no knowledge one way or the other what the majority of web users like.
As far as the guy who told me competent but uninspired, I barely know him, he's a reference librarian who did a stint as a designer. I tend to make friends with people who prefer to be honest, blunt, and straightforward and not worry to much about being nice. I find these people are more dependable and reliable, and, frankly, useful.
posted by Grod at 8:48 AM on February 17, 2004
Besides, if browsers can't treat something as simple as {float:left} identically, there's a problem.
The reason I did the gallery in such a simple way is purely personal: I hate having to click NEXT on gallery pages, and I personally like big thumbnails. Since I have no knowledge one way or the other what the majority of web users like.
Get ready for some more of that thick skin...
These are common attitudes of novice designers, and they'll sink you like a stone. The only web site that should reflect your personal biases about how things "should" be is your own personal site. You need to bury your gut instinct and get some grounding on "proven" design principles.
Buy and read a book or two on design and usability.
posted by mkultra at 10:20 AM on February 17, 2004
The reason I did the gallery in such a simple way is purely personal: I hate having to click NEXT on gallery pages, and I personally like big thumbnails. Since I have no knowledge one way or the other what the majority of web users like.
Get ready for some more of that thick skin...
These are common attitudes of novice designers, and they'll sink you like a stone. The only web site that should reflect your personal biases about how things "should" be is your own personal site. You need to bury your gut instinct and get some grounding on "proven" design principles.
Buy and read a book or two on design and usability.
posted by mkultra at 10:20 AM on February 17, 2004
Response by poster: Well, thanks everyone for the advice, I'll check this thread in case there are any late comers with an opinion, and I'll post when I make the changes if anyone is curious and willing to continue the crit. (or just likes crits.). Thanks again. One last question, is there a useful list of novice designer fallacies, like a top ten list, so I know what to avoid? :-)
posted by Grod at 5:14 PM on February 17, 2004
posted by Grod at 5:14 PM on February 17, 2004
Regarding mkultra's suggestion, substitute Nielsen's book for the Siegel book. Siegel's book is very outdated, and even he went against his previous design principles in his later (but equally misguided) stuff. IMO, of course.
BTW, what ever happened to Siegel? It's like he dropped off the face of the earth.
posted by tirade at 5:46 PM on February 17, 2004
BTW, what ever happened to Siegel? It's like he dropped off the face of the earth.
posted by tirade at 5:46 PM on February 17, 2004
You know, I would have to say the inverse: the site definitely looks inspired, although less than thoroughly refined, with regards to a consistent navigation system, sub-page design, and typography.
You have five different fonts on the front page. Pick two and make them work for you.
Also, the copyright statement at the bottom is breaking into two lines seemingly arbitrarily; it is also distracting from the bold artwork underneath it. I would stick it underneath the main content box, a few pixels below the white border.
The link at the end of the intro paragraph seems a little cryptic. I would just let it read "More..." or perhaps add an escaped right bracket to make it look more like an arrow.
Overall though, as I said at first, the front page is lovely, makes good use of the assets you were given, and I really like the color choices and the empty frame gif on top of a random picture div is brilliant. A co-worker came over while the site was up and said "ooh. neat."
Best wishes to you in your future web designing adventures.
posted by macinchik at 11:41 AM on February 18, 2004
You have five different fonts on the front page. Pick two and make them work for you.
Also, the copyright statement at the bottom is breaking into two lines seemingly arbitrarily; it is also distracting from the bold artwork underneath it. I would stick it underneath the main content box, a few pixels below the white border.
The link at the end of the intro paragraph seems a little cryptic. I would just let it read "More..." or perhaps add an escaped right bracket to make it look more like an arrow.
Overall though, as I said at first, the front page is lovely, makes good use of the assets you were given, and I really like the color choices and the empty frame gif on top of a random picture div is brilliant. A co-worker came over while the site was up and said "ooh. neat."
Best wishes to you in your future web designing adventures.
posted by macinchik at 11:41 AM on February 18, 2004
Response by poster: If anyone is still reading this, I've completed a first round of revisions. The only problem that remains is consistant navigation, which is giving me a headache. I think the site feels more consistant overall and is now more viewable. If I have created any new problems with my fixes please let me know. Here's the link again: Fine Art.
I'm also considering adding a form to the contact page. Is there any common wisdom regarding this? Thanks again.
posted by Grod at 8:34 PM on February 20, 2004
I'm also considering adding a form to the contact page. Is there any common wisdom regarding this? Thanks again.
posted by Grod at 8:34 PM on February 20, 2004
Response by poster: Added a feedback form
Does anyone have any suggestions on how to make navigation identical across the site?
posted by Grod at 6:32 PM on February 21, 2004
Does anyone have any suggestions on how to make navigation identical across the site?
posted by Grod at 6:32 PM on February 21, 2004
« Older Where to go when Metafilter is down? | Is it possible to stop Mozilla/Firefox from... Newer »
This thread is closed to new comments.
Also, there is no consistency within the overall site. Every page looks different, and while that could work given the nature of the content, it hasn't. Even the pages are different widths on my display. Go with the main page design since it is rather appealing, and model the other pages based on that.
I like the jagged edge of the main index graphic, though it could stand to lose the 1 pixel black border.
And stick with the mustard yellow and not the bright one for the gallery pages.
Also, the layout of the navigation on the index page is rather disorienting. Vertically or horizontally align them.
Just my first impressions. Good beginning, just needs some more refinement.
posted by lychee at 8:50 PM on February 16, 2004