Design Advice Needed

[gragland]

I am making a site for a wedding/portrait photographer. She is my stepmom and I am not under any real deadline. I want to make it good, even if it takes me a long time, because this will be a my first real site, and i would like to have something good to attract more clients.

Here is what I believe to be my best design so far:
www.s91931107.onlinehome.us/site.jpg

I know its not much yet, so if you have comments on the design that would be great, but otherwise I would really appreciate some advice on how to layout the site.

I was thinking that a simple drop down list box style menu would be nice. Haven't figured out exactly where it would go. It would have:

-------------
Weddings
Portraits
-----
Home
Client Testimonials
Contact
-------------


Both the wedding and portrait sections have their own intro/slideshow. Then within both the wedding and portrait section there would be an "about", "budgeting", "contact" and maybe some options specific to the section such as "further wedding resources" for the wedding section.

I was thinking that these section specific buttons could pop up from the bottom in a horizontal row. Meanwhile the dropdown listbox would be at the top allowing the user to switch sections, and go to the other pages that arent specific to either section (testimonial, contact, home).

Would it be weird having "contact" in the dropdown listbox, as well as in the horizontal section buttons. I dont want the user to go to a section and then not be able to find the "contact" button because they dont know that its in the drop down menu....

Does this sound okay, any advice, any way you think it would be better layed out?

[sense]

That really isn't much. Looks more like a businesscard instead of a website.

You could also think of a more effective way to use the available space.
Especially if you plan to show fullsized pictures in it.

A dropdownbox as navigation isn't really that good. It's ok when there isn't sufficient space but it limits the user to go where he wants by one simple click.

Also make sure you ain't gonna 'overdesign' the site.
It's the HER photography that has to come forward, not YOUR design.

[RUSHVision]

I actually really like the look of what you have going. I think a stylized version of a picture frame is a perfect theme for a photographer's site. I agree that it looks a bit business card-like, but I think that could be remedied by simply expanding it so you have a larger content area.

For the navigation I'm going to suggest that you keep it fairly simple. In my mind you should have five menu choices on the front page. I would place the Home, Client Testimonials and Contact buttons across the top with the Weddings and Portraits butttons in a pair on the lower left.

I would even consider making the text on the Weddings and Portraits buttons larger than that of the upper buttons. My reasoning being that these two options are the main reason people will come to the site...because they are seeking these services. Making these two buttons more prominent will make it easier for the viewer's eye to latch onto where it needs to go first. Once they click either of these buttons you can have the other buttons transition in to present them with more options. I should mention that the 'buttons' can be just text, I don't think I would use a graphic in this case.

My $0.02

Did I mention that I really like that frame?

[gragland]

Thanks for the advice. Yeah, i was thinking that instead I could put two white boxes' one with a portrait pic and one with a wedding pic, and the user clicks them to go to the wedding or potrait sections. But then again I want a space to put the about me info, which would go on the home page. So im not sure....

[RUSHVision]

I would stick with just a single content area that can be used to display everything. If you have more than one, whichever one is not displaying information relevant to the current selection just becomes wasted space.

[gragland]

No, what i meant is that instead of having the home section be the big white box frame, with text or an image it, I could instead have two white boxes side by side, one being a button for the wedding section and one a button for the portrait section. When one of the boxes is pressed, then it goes to that section...

EDIT: Here is another layout I did. This layout is the demensions that the final site is gonna be. www.s91931107.onlinehome.us/site2.jpg.

[sense]

Does that menu hides when browsing pics?
Otherwise I'm afraid all of my attention will be attracted by it.

I like the layout but still thinks it's too small. Especially the space taken by the navigation is like 10% of the entire interface.
40% is for the pics and 50% for the deco. I would reconsider that.

Anyway looks good.

[gragland]

Thanks for the feedback!
Thats just the homepage that you see.

When the user goes to the wedding or portfolio section there will be a photo slideshow presentation with text. The title and nav bar will dissapear and the slidehow will be as big as it can leaving room for text underneath. The demensions of the site are small enough to fit on a 800x600 monitor (without scrolling and when the viewer has the google toolbar). I know its not much space to work with, but its seems okay to me, and i can't really see how i could make it any bigger if i want it to be good for the 800x600'ers. But yeah, during any slideshow or gallery that will be on the site I plan to use as much space as i can, but for just the homepage i think that that one pic is an okay size.

Any other advice/opinions would be greatly appreciated!

[RUSHVision]

So what happened to that nice little accent that was on the lower right corner? That was one of my favorite parts!

On the subject of space usage and navigation layout...I really think that space could be better utilized by arraying your buttons in a horizontal fashion. There is a LOT of space above and below the framed area. Moving the buttons above and/or below the content area will free up all that space that the menu is currently using. Here is a link to a page that has standard browser sizes. I'm sure you could make it a little bigger and still conform to the safest recommended size for monitors set to 800x600 resolution. In the end it's your call, though. If you and she like it, then there you go.

[gragland]

I put the buttons vertically because there was more empty space on the sides that needed filling... but ill try it horizontally, and maybe fill the verticle space with some design or something. At the size it is now it fits perfectly on a 800x600 res in IE if the user has the google toolbar. There is about 2cm of white space above and below the site, but for some reason IE still allows my to scroll up and down a little bit. Is there something i can change in the html file that gets rid of that space. The flash site fits on the screen so it should'nt allow me to scroll...

And I know the client absolutely loves it, but i want to make it as good as possible because this will be my first real complete website and i want to put it in my portolio to have something to show to otehr potential clients. I dont have a strict deadline... so however long it takes...

[RUSHVision]

Well, having a happy client is what it's all about. If you are both pleased with the design then I wouldn't try to reinvent the wheel in an effort to please an unknown audience. If you want to keep the proportions of the content area then maybe just keep the navigation on the right, but perhaps you could jazz it up a little bit with a subtle graphic treatment instead of leaving it just plain white.

For getting rid of the scrollbar I would want to see the code that you are using for your page. Is there any way you can provide a link to the html page instead of just a .JPG?

[gragland]

Well i just published a blank flash site (570x380) and changed the background color in the html to see how it fit. Didnt add any html code, only code thats there is what macromedia flash puts there when you publish a site. Thanks for the replys!

[RUSHVision]

Here is a page I made using your image. I'm not getting any scroll bars even when I move my google toolbar down below my links bar. Are you still getting scrollbars when you view it?

Example page

[gragland]

No, i dont get scrollbars with yours, i took a look at the source for your html and it has all the margins set to zero and it has a table... when i added those thing to the souce of my html file then the scroll bars went away. Could you tell me exactly what your setting are when publish in flash, that will solve my scrollbar problems. Thanks!

EDIT: Also, at 800x600 the brown background doesnt look too good, looks pixelated. I made the background using the noise filter and overlaying an image of some textured paper and a lot of messing around with the colors and stuff. If i were to make the textured background over again but this time made it bigger, and then exported the background as a jpg or png or whatever to flash and then scaled it down in my flash movie, would it then look better at 800x600? OR, at 800x600 will it always look pixelated?

[RUSHVision]

Here is an HTML template that you want to place in the following folder:

C:\Program Files\Macromedia\Flash MX\First Run\HTML

It will then show up in the drop down menu on the HTML tab in the Publish Settings. It will show up as 'Flash Only (Centered)'. This is the same template I used when I published the example page.

Here is a screenshot of the HTML tab of the Publish Settings dialogue box. Other than choosing that particular template, I left everything at it's default setting.

[gragland]

Thanks soooooooo much! Also if you could read my edit to my post above yours that would be great.

[RUSHVision]

So are you using an image that is 800x600 for your background, then? If that is the case then I would recommend using a much smaller tile instead. This is if we are talking about the background of your HTML page, not the background of your Flash movie.

In reading through your post again though, I see that you might be talking about the textured background that is the size of your stage in your Flash movie. If that is the case then I would make sure that you don't do any scaling of the image in Flash. You will want to export it from Photoshop at 570x380 and then just make sure that none of the default settings in Flash are mucking up the quality of it on export. There are two places to check/modify the quality of exported images...the first is under the Flash tab in the Publish Settings. This will globally effect how all images are exported. The second is by double-clicking the image in the Library and individually setting it's compression amount. In this case you might want to use the Library option and set the Compression to 'Lossless (PNG/GIF)' instead or 'Photo (JPEG)'. You can optionally uncheck 'Use document default quality' and set a specific quality percentage.

The bottom line is that simply having your resolution set to 800x600 won't make something look pixelated. It's far more likely that something is happening upon export from Flash. Does the background look fine when you are viewing it in the Flash authoring environment, and only gets pixelated when you view it in a browser?

I just thought of something else as well...are you importing a separate image for your background and also one for that white framed area, or have you combined all of the visual elements that are currently visible in your layout into one image? If it's all one image then I would recommend using separate images for:

1) the background

2) the white framed content area

3) the menu background

And I would also create the text in Flash rather than having it be a part of the background image as well, that is if you are not planning on doing that already. You will get cleaner text and end up with a smaller file size for your background image to boot. Making your image components modular like this will allow you to both choose the best format for each image, and also give you more control over the compression of your movie since you will be able to individually adjust the settings for each image rather than having to up the quality because one element is out of whack.

For instance, you should be able to get away with a fair amount of compression on just the background texture and save it as a .JPG. The content area has that dark 'glow' around it so I would save that as a .PNG-24. If you plan on adding the same effect around the menu panel then it would be the same deal. If you wanted the edges to be crisp then you could just go ahead and create it in Flash and place it on a layer below the content area.

I think I just might be rambling now, so let me know if you have any more questions.

[gragland]

Sorry,
I am talking about the brown textured background in my flash movie thats the size of the stage. And, i haven't really done anything with flash yet, I am just saying that the layouts that i did in photoshop (the ones you have seen and that are posted above in jpg format) dont look very good if i put my monitors resolution at 800x600. For the final site, the text will be done in flash, so its just the brown textured background that im concerned about. It looks fine at 1024x768 (it looks sorta like real textured paper), but at 800x600 i dont hink it looks very good. Is there anything that can be done about this.

I am just wondering if there is anything i can do differently when making the brown textured background (such as making the noise filter grain smaller or whatever) that would make it look better at a 800x600 res.

OR.. maybe it looks fine at 800x600, im not used to that res, so maybe its normal for things to look a little worse.

[RUSHVision]

Ok, maybe I should revise my statement about resolution a little bit. Changing your resolution from 1024x768 to 800x600 will make things look a bit more pixelated in that there are now less pixels displaying the information than there were before. There is no getting around this. You either have this many pixels to work with or that many. If you want a monitor to display crisper, clearer pictures then it needs a higher resolution to do it.

This can be seen quite readily when playing video games on your PC. I normally have the resolution on my screen set to 1600x1200. There are a couple of games out there that bring my system to a crawl though, and that's when you start toning down the resolution so it can keep up. What can be an absolutely gorgeous game at the higher resolutions can look like absolute crap at 640x480. UT2004 is a good example of this. I don't have to take it all way down there to get it play smoothly, but I took a look at it to see what kind of frame rate I would get...it looked plain awful. There is nothing wrong with the graphics or the game...it's simply limited by the number of pixels that it can use to display the required information.

So yes, you might be able adjust your image a bit to compensate for this. I'd need to see the original .PSD file to be certain, but you might try applying a small amount of Gaussian Blur or simply add some blur on export using the blur slider in Image Ready. If you are not doing so already when you save the file...go to File>Save for Web instead of just saving it from Photoshop.

[gragland]

Ok, thanks for the explanation. On second look it doesnt look to bad at 800x600, im just not used to seeing things at that res.

Do you think it would be worth it to make an identicle html version (but lacking the transitions and motion of course)? Its important to the client that it works for everyone, i could put a splash page, or a detect script that tells the viewer they need to install flash... but im just not sure the average couple who has been going through hundreds of wedding photographer sites is gonna bother... But then again there are plenty of big sites that are flash only...