The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

I need some good design advice.

I have just done a site for local photographer. One of the most important parts of her site is the picture gallery. Right now I am just loading all of the images from a specified subdir onto a page, and the user can click to get open a new window containing just the image. This works fine, but I am afraid some of the galleries are large enough that I am violating good design and usability principals. I guess I could make seperate pages (Europe 1, Europe 2), but I generally like simplicity. Here is a link to the galleries page:

http://www.lanamarch.com/gallery.php

This site was pretty much done as an exchange of service, so I don't want to spend a ton of time obsessing on it, but I still want to put it in my portfolio. Any other design critique is welcome as well, I just started to worry about the galleries.
Jeff Barton Send private email
Wednesday, March 23, 2005
 
 
Don't open the images in a new window. It'll confuse or irritate a lot of your visitors, including me. Other than that, it looks fine.
comp.lang.c refugee
Wednesday, March 23, 2005
 
 
Oh, also, in the future you should write this:

<ul CLASS="Navigation">
  <li><A CLASS="NavLink" HREF="gallery.php?g=home">Gallery Home</A></li>
</ul>

instead of this:

<ul CLASS="Navigation">
  <li/><A CLASS="NavLink" HREF="gallery.php?g=home">Gallery Home</A><br/>
</ul>

List items are containers (the contents of the list item should go in the li tag) and they can only be contained in lists, not divs.
comp.lang.c refugee
Wednesday, March 23, 2005
 
 
It looks fine to me. I second the comment about not opening a new window.  Don’t make the user juggle between the back button and closing the window.  It’s only a matter of time before they mess up and close the main window by mistake.
John Senior
Wednesday, March 23, 2005
 
 
Very nice, as far as it goes.  The black background sets off the pictures nicely.

One addition I would suggest -- when you click on a picture, it would be nice if a page opened which displayed the picture, but also had 'previous -- home -- next' links at the bottom of the page. 

Then once you'd opened a set of pictures, you could navigate through them without closing the current pane, then double clicking on the next picture.

The 'previous -- home -- next' metaphore has been used a lot, and works very well for viewing a series of pictures.
AllanL5
Wednesday, March 23, 2005
 
 
About the <li/> tags, I know they are illegal, this was a stupid short cut I took "just see how bullets look", and it ended up in production. Maybe there's a lesson there. :)
Jeff Barton Send private email
Wednesday, March 23, 2005
 
 
The problem is simplicity only works as long as your problem stays simple. Dealing with scale moves the problem into a different category.
son of parnas
Wednesday, March 23, 2005
 
 
Talking about "low quality JPEG images" right off the bat is something guys like us would do, but not what an astute marketing person would do.
NetFreak Send private email
Wednesday, March 23, 2005
 
 
NetFreak has a point.

In addition, look at spelling - you are capitalizing "Some" when it shouldn't be.

Also, the contact sentence is awkward.

Looking at the larger JPG's, as a photographer myself my first question was, doesn't she know how to focus?  The JPG images are such low quality that I think it will detract from her purpose.

Regarding the size of the thumbnail galleries, so far they are not too big.  I wouldn't worry yet about splitting them.

Does Lana have the capability of adding gallery categories and adding photos to galleries herself?  That would be very helpful to her.

Echo the suggestion for first/prev/home/next/last buttons.
Karl Perry Send private email
Wednesday, March 23, 2005
 
 
You might want to consider makingreal thumbnails instead of letting the browser scale down the larger image.  Browsing over a slow connection, the image galleries will take a while to load.
Brian Send private email
Wednesday, March 23, 2005
 
 
Yeah, I know real thumbnails would be better than what I'm doing. But then where do draw the line and say, "Okay, I have done my job."

However, I am working on super-easy-to-implement-and-customize, no-database-required, object oriented gallery and blog stuff that I will roll into this site when I am done... That gallery will support the prev/next paging and stuff too. I think I am also going to make the thumbnail pages page as well based on a 'page size' setting, in case she wants to add 20 more images to the Europe gallery...

Thanks for the grammer suggestions too, guys, I will take care of that.
Jeff Barton Send private email
Wednesday, March 23, 2005
 
 
Split the galleries into into pages so that each page fits in a single screen and requires no scrolling

Wednesday, March 23, 2005
 
 
Anon, that's usually a fool's errand. What fits in one screen on your machine might not on mine.
comp.lang.c refugee
Wednesday, March 23, 2005
 
 
Sigh.....

From a programmers perspective there are a few things that I noticed right off of the bat.  First off you have no DocType for the pages you are serving up.  Granted this isn't required but you have XHTML break tags but everything is upper case which isn't legit XHTML (everything is suppose to be lowercase).  So how would a browser know how to interpret the html?  It did look ok in Firefox but standards are standards and all webpage are suppose to have DocTypes. 

Second the link to the designed by site (I am assuming this is your site) is not a legit URL it is just http:lightwielder.com you are kind of missing some slashes.  Most browsers will figure it out but hey it is always nice to  do it correctly. 

Also your website is vulnerable to some serious attacks, brush up on some security techniques please.  If you need some resources let me know, I am more than happy to help.

Sorry for the long post.
Mike
Thursday, March 24, 2005
 
 
I would suggest adding WIDTH and HEIGHT attributes to the IMG tags in thumbnails galleries, so they don't shake when loading. It looks un-esthetic, especially on slow connection.

Other than that it's quite good. Simple & clean.
Szeryf
Thursday, March 24, 2005
 
 
Objective:

Design by LightWielder - http://www.lanamarch.com/lightwielder.com = 404 Not found

Quality of the full size images is too poor.

Using height/width attributes to make thumbs seems so lazy/poor practice that I don't have words for that.. It's only ok for dev., to check how the thumbs would look like.. You could have done the whole thing with better standard complience by using the "Make picture gallery" function (or whatever it's called) of Dreamweaver!

Sorry for the critics, and good luck for the no-maintenance automated gallery, sounds good!


Subjective:

"The beauty of Lana Rebecca March Photography is completely natural and unaltered. Lana's pictures are as vivid and true as the moment they were captured on film. Lana shoots her pictures without the aid of filters or specialized development. Her naturalistic approach to photography is a true testimony to the beauty of the world that surrounds us everyday..."

This is standing next to her picture, where she looks nothing like natural, unaltered, vivid and true; but rather like some rich window, covered with plaster and paints with a frightening camera smile for some people magazine... Maybe suggest some more natural picture, without all the fur, makeup, hairspray, ..
Z.E.T.
Thursday, March 24, 2005
 
 
Err.. "like some rich WIDOW" - not window :)
The page: http://www.lanamarch.com/index.php
Z.E.T.
Thursday, March 24, 2005
 
 
You might want to reconsider the colour scheme. Having very bright images and text against a very dark background causes several problems:
 - It segments the page, and so the user isn't sure where to look
 - The white text is quite difficult to read, and the eyes often get pulled away.

Make your background a little lighter and your font a little darker, or invert the whole thing so that the pictures blend in a little better.

Also, on your about page you have two flags to change languages. You seem to be using the Italian flag to mean "French" :-)
Brendon Send private email
Thursday, March 24, 2005
 
 
Z.E.T.: I didn't suggest using width/height attributes to make big pictures appear smaller. I suggested adding those attributes to small pictures, because that makes page loading process look better (browser knows in advance the real dimensions of the picture) - no shaking empty frames while loading.

And yes, it's standard compliant. Every HTML tutorial recommends using these attributes.
Szeryf
Thursday, March 24, 2005
 
 
Mike (and anyone else) RE Security:

I do knoow a bit about web site security, and I am aware of a fun little "hole" I can poke my way through to look at images in other places on her site, but as far as I know, I can't effect anything.

If there are some problems, please let me know. Either by email or in the forum, I don't care. I am always happy to learn!

And thanks for the other input guys, I will make a few of the changes suggested.
Jeff Barton Send private email
Thursday, March 24, 2005
 
 
I would definitely generate real thumbnails -- browser scaling makes the pictures look like ass, and it's slow. It wouldn't be too hard with Imagemagick or Netpbm to do them in one fell swoop.
E. Naeher Send private email
Thursday, March 24, 2005
 
 
I haven't looked at the site but I've done a few image gallery type sites using Zope.  Even so the issue of thumbnailing is constant.

I'd use ImageMagick to create the thumbnails, the size and quality is going to depend a lot on the quality of the originals but you can call out to convert() with the relevant image and have it manipulated by ImageMagick and spit back the thumbnail.  I'd do that as part of the script that does the upload in the first place.

You might also think about giving her watermarking so that she can impress her own chosen graphic into each picture and convert can do that at the same time as scaling the images.
Simon Lucy Send private email
Thursday, March 24, 2005
 
 
I'd put the full-size images within the design instead of them appeaing on a new white page, it just pulls you out of the site.
surreal
Friday, March 25, 2005
 
 
My 2.5 cents:

Why this site? If selling, there should be at the very least a link on each page so there's the shortest possible distance between what the visitor likes and contacting Lana.

If it's sharing, then you should make very clear what fair use/copyright is here.

Photoshop Elements 3 does a nice job of trimming the digital fat off .jpgs and not degrading images.

Nice images, don't get me wrong. I especially liked  http://www.lanamarch.com/galleries/pets/scan34.jpg
Bob Walsh Send private email
Friday, March 25, 2005
 
 
I have the perfect gallery for you....google photostack. Very clean design and eliminates the pains of thumbnails and larger images. I have used this gallery on a handful of sites and has worked out great.
Suthern Send private email
Wednesday, March 30, 2005
 
 

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
 
Powered by FogBugz