Web site critique - Rip me a new one

Alright, you know the drill.

I recently became friends with the owner of a furniture store. Strangely his business doesn't have a web site. I love the stuff in his store and offered to make a web site for store credit, which he agreed to. Mainly he just wants the web site to list his store hours, contact info, and some basic info on his store; nothing complicated.

The following is what I came up with. Please critique my design. Thanks!

http://www.rusticatucson.com

Edit - Clearly I'm missing some content (e.g. the "About Rustica" page is blank). I've just provided some sample content to give a notion of what I was thinking design-wise.

Edit2 - One of the main things I need help with is deciding whether to have a different banner graphic for each page or to just pick one, and if so which one.

Blue Velvet said:

Some of the images load quite slowly, just on the borderline of being annoying for the pages to fully load... and I'm on ADSL2. Perhaps take a look at re-optimising some of them, they don't all have to be PNGs nor do they have to be flawless.

I'll leave the design crit for others.

Click to expand...

Thanks for pointing that out. I just did some research and it turns out that Muse automatically converts images in a slideshow to big .png files if any transparency effects are applied. The workaround is to apply the effects directly to the individual .jpg's and then import into the Muse slideshow. Then the photos will remain stored as .jpg

Thanks everyone for the critiques. I've listened to what you had to say and have made some modifications to the web site.

Blue Velvet said:

Some of the images load quite slowly, just on the borderline of being annoying for the pages to fully load... and I'm on ADSL2. Perhaps take a look at re-optimising some of them, they don't all have to be PNGs nor do they have to be flawless.

Click to expand...

7031 said:

Hmm yes, I'm on a 50Mbps connection and the images are still taking a while to load on some pages. Your best bet would be to compress them using some other software.

Click to expand...

I'm using Adobe Muse to make this web site, which is currently a beta. One of the very annoying aspects that I think they need to fix before they start selling it is that any in-program modification of an image causes Muse to export it as a massive .png. I had to make sure I did all of my image modifications in Photoshop and then import into Muse as .jpeg. I still have some work to do especially with reducing the size of the images in the slideshows but there aren't any massive .png images any more

dopey220 said:

My suggestions:

1) Nothing's vertically aligned on the homepage, which is a big deal for me. Also, I'm not digging the faded edges on the images.

2) Typography: the font used for the body copy is kind of boring and the one in the menu seems kind of inappropriate for a site like this.

3) This is really nitpicky, but in the footer, you use (c) instead of ©. The actual symbol can be typed by hitting option + g.

Click to expand...

1) I think both comments are related because there isn't a well-defined vertical edge on the web pages due to the faded top graphic. I've gone back and forth on the heavily faded photo edges myself. As a compromise I've at least made the product photo slideshows with no faded edges.

2) Body font: Adobe Muse currently only supports ~13 "web safe" fonts. Anything that isn't "web safe" gets exported as a .png image. Adobe realizes that's no good and will be implementing @font-face with server-side font hosting soon in an update. At that time I'll change the font to something more interesting. Menu font: I tried a ton of different fonts, I thought that one was the best looking. Alternative font suggestions would be appreciated.

3) Footer changed from (c) to ©.

AlanShutko said:

I'm not a fan of the giant header image and menu (347px tall). What screen size are you designing for? On my MBA (1280x800) the header image and menu take up half the screen, and the content is hidden. Going by the numbers on SiteCatalyst Netaverages, 53.4% of people have a screen 800px or less, and 66.8% have a screen of 900px or less.

From a user perspective, since this is mostly a site for a brick and mortar establishment, I'd put the location and hours up front on the main page. I'm going to guess that a lot of the hits are going to be people trying to find the store, so make that easy to get to.

The menu should probably have some way of displaying where you are. I actually clicked on the same page several times because I wasn't sure where I was.

If possible, try to increase the amount of content in terms of what they stock. You don't have to have everything, but it would help out a lot if you had a decent sampling. Especially with descriptions of the items so you show up in search engines. Here's a store that is similar in spirit, I think. http://www.gringojonesimports.org/index.html I wouldn't recommend their web design, but it gives a good idea what kind of items you might find there on a given day.

Click to expand...

I've taken all of your suggestions.

1) The top graphic for each page has shrunk considerably and should make for a much better experience on low resolution displays.
2) Store location (with link to google map) and phone number added to every page's footer. I didn't put the hours on there because they vary seasonally and therefore the store owner wants people to call to find out if the store is open. (He does generally keep certain "base hours" which I listed in the contact page)
3) The menu text for the active page now has an outer glow to indicate the user's location.
4) There was little to no content with regards to store inventory at the time I originally started this thread because I hadn't taken any photos of the inventory yet. I've now set up 9 product category pages with a photo slideshow for each. Some categories need more photos which I'm still working on.

Thanks for you input everyone. Additional critiques encouraged and welcomed.

Pithdog said:

As much of the website should be text instead of images. For instance, your menu is just lots of images (not even one big one moved around using background-position), which for one, will slow down the site massively, but two, a similar effect could be have using a web font.

The top image on each top level page is different. You should keep them different, that is cool, but take out the logo from each one of those. Put it in as a separate, really optimized PNG 24. This should lower the file size of each one of the header images, and give a better experience to the user (as the logo won't keep loading again every page, it'll be cached after the first).

On the Contact Us page, instead of having a link to the Google Maps for the shop, instead embed it into the page (maybe place it where that page image is on the right of the text). Sending users away from the site for anything is usually bad.

The gallery slideshow on the 'catrinas.html' page needs to have an indication of which thumbnail it is currently on. So maybe, on the left most thumbnails, when you're on that image it's 100% opaque, and when you're not on an image it's like 75% opaque. Also remove all the empty space around the gallery, like the black below the pictures, as it gives the feel of the site being unfinished.

Click to expand...

Thanks for the suggestions.

1. Adobe's Muse support forums are filled to the brim with people complaining about how Muse automatically turns anything but the simplest web-safe type into an often-massive .png. They have stated that they will implement @font-face in the near future. I'd say it's the number one issue with Muse right now.

2. Good idea with making the logo a separate .png. I have done as you suggested, shaving several hundred kilobytes from each page load.

3. I kept going back and forth on whether or not to directly embed a google map. I suppose it's best to do so - embedded google map added.

4. I agree - I'd like to make the active thumbnail semi-opaque or something. However, Muse does not seem to want to apply any kind of filter or effect to the active thumbnail despite my exhaustive efforts to make it. I have a thread opened on the Adobe support forums on the topic. Also, I redid the overall slideshow layout to make more sense and reduce the perception of massive white space.

I guess some of these are the prices paid for using free beta software

Thanks for the suggestions everyone!