Mockup critique please

Joined: 12/16/2007
User offline. Last seen 27 weeks 6 days ago.

Hey guys,

I wanted to get some feedback on a design I'm working on. I've never done much in the way of "grunge" textures and style, so before I go any farther with this, I'd like to get some thoughts.

is it too busy? Is it missing elements I didn't consider? Are there conflicting elements that are out of place?

Still trying to learn, so as much as possible, please tell me what you would do differently, and why you think something is out of place, or right, or whatever!

http://dl.getdropbox.com/u/720898/worshipnexus-moc...

Thanks!

Tony

G&G Podcast Host
Matt Farina's picture
Joined: 06/01/2006
User offline. Last seen 21 weeks 6 days ago.
bottom?

The top that you have so far looks good. What do you have planned for the bottom?

Matt Farina
Geeks and God Former Co-Host
www.mattfarina.com

Joined: 12/16/2007
User offline. Last seen 27 weeks 6 days ago.
Some ideas...

I thought I'd use the same background as the navigation for a nice large footer, but before I did anything else, I wanted to get some feedback and make sure the elements I have so far are going to stay.

Any other thoughts?

Tony

Joined: 12/16/2007
User offline. Last seen 27 weeks 6 days ago.
updated...

Here it is with a footer in it.

http://dl.getdropbox.com/u/720898/worshipnexus-moc...

Tony

G&G Podcast Host
Rob Feature's picture
Joined: 06/01/2006
User offline. Last seen 10 weeks 1 day ago.
Super Image Heavy

Now, to do this type of style, it's going to be super image heavy, which means slower loading times. That's probably OK if your audience is younger and/or wealthier (more likely to have higher speed connections). Personally, I shy away from designing like this because of the bandwidth impact (although, I think I need to get over that a bit, myself).

One thing I might suggest is that, when you do the CSS for this, include ALL the images you have here into a single sprite image. That way, it should load them all a touch quicker. Otherwise, you'd have tons of images here, most likely and slower delivery.

My other cratique is that, if you have anyone dealing with lower rez monitor settings, that logo area at the top is going to be the only thing 'above the fold'. All of your content will be towards the bottom and parts (or all) of it will have to be scrolled to see. Again, depending on demographic of the target audience this may be less of an issue (or maybe you and others don't really mind).

The design looks great, those are just some things to think about as you move forward. Nice work.

-Rob Feature
Geeks and God Co-Host
www.mustardseedmedia.com

Joined: 12/16/2007
User offline. Last seen 27 weeks 6 days ago.
Sprites

So, you're suggesting that I make one big image file, and then use css to position it a bunch of times on the page? That sounds sneaky!

as far as the header image, it's 300 px to the bottom. on 800 x 600 I can see that being an issue, but it's only going to be on the front page. Here's what I have for the "inside" of the site:

http://dl.getdropbox.com/u/720898/worshipnexus-moc...

No header image, just the nav bar up top. so where most of the content is, it won't be an issue. I'm also going to but the sidebar on the right, so 800 x 600 monitors won't need to scroll content, just the sidebar links.

I've never really done a design like this, so I wasn't sure about it. it's for a worship songwriting community, so I figured artsy and image-intensive is a prerequisite for the audience.

Thanks for the feedback...

Blessings,
Tony

G&G Podcast Host
Rob Feature's picture
Joined: 06/01/2006
User offline. Last seen 10 weeks 1 day ago.
Should work well
Ah, excellent...yeah, so if that header is only on the homepage than I don't think it's a concern at all. The internal looks great. As far as sprites, yeah, that's exactly what I was saying: take all the images that are on every page (backgrounds, menus, etc) and get them all into a single image file...then position with CSS. It's a tad more work on the CSS side, but it should make the site load quicker. Nice work! I think the artsy-types will approve!

-Rob Feature
Geeks and God Co-Host
www.mustardseedmedia.com

Joined: 12/16/2007
User offline. Last seen 27 weeks 6 days ago.
Updated footer...

Here's an update on the footer design.

http://dl.getdropbox.com/u/720898/worshipnexus-moc...

Any other critiques out there?

Tony

Joined: 09/09/2008
User offline. Last seen 1 day 5 hours ago.
Generally, I like it

Generally, I like the look.

Now some hopefully constructive nit picking:

  • The menu across the top seems a little small.
  • The dark "borders" on the top menu items bother me. I wonder why they're there.
  • I might like the look better if the background for the sidebars was the same as the background for the header.

The layout reminds me of a couple of themes from RoopleTheme, particularly Tapestry and BealeStreet. Both of these themes inherently support Suckerfish (dropdown) inherently and provide a lot of regions. I've used both of these themes, with varying amounts of customization. I'd be inclined to take one of these themes, probably Tapestry, and use it as a framework for your graphics.

Hope this helps,
Curt

Joined: 12/16/2007
User offline. Last seen 27 weeks 6 days ago.
Thanks man!

Thanks for the nits, friend! I'll have an html/css demo up later to beter demonstrate this.

Couple of clarifications:

The dark borders on the menu will "drop down" as you hover over them, and stay down on active menu-trails, so that's their function, if it helps. i don't know if I like them up there all the time either. I may ditch the dropdown motion, and just have them appear when you hover over the item.

those are not sidebars, that's just the body background-image. The sidebars and main content regions will be contained within the white space in this layout. I wondered if the backgrounds conflicted myself.

As far as navigation size... that is 20 pt font in a 50px button... did you expand the image to view it full size?

Thanks for the info!

Blessings,
Tony

Joined: 09/09/2008
User offline. Last seen 1 day 5 hours ago.
Another nit

Tony,

I used the wrong term when I called the background image sidebars, sorry. I think you understand my concern anyway.

I hadn't expanded the image to full size. When I did I found the menus to be well sized. But, here's the other nit, when I resize my window in Firefox to be 1024*768 I find your content area to be just a little too wide to fit. I believe the content area is pretty close to 1000 pixels wide, right? Making it just a little narrower, maybe 970-980 pixels, would probably insure that you don't get a dreaded horizontal scroll bar on most monitors.

I can't describe it, but there's just something about the gray shading on the sides of the header that I don't like. Maybe it's just me.

Keep up the good work,
Curt

Joined: 12/16/2007
User offline. Last seen 27 weeks 6 days ago.
Here's a live demo

Here's a live demo of what I've coded so far... I used Bob's suggestion of one massive sprite. Actually, the body background is a separate file of 39kb, and the rest is on large sprite, at 160kb. I still think it all loads pretty quickly.

http://dl.getdropbox.com/u/720898/worshipnexus/pag...

Blessings,
Tony

Joined: 01/12/2009
User offline. Last seen 2 years 10 weeks ago.
Looks Good!

Load time is fine for me! Love those roll overs!

Good work, should be a good looking site once done!

Jesse

Church Website Dealer
http://www.churchwebsitedealer.com

Church Website Ideas
http://www.churchwebsiteideas.com

Joined: 12/16/2007
User offline. Last seen 27 weeks 6 days ago.
Curt, et al...

The more I looked at it, the more I found myself agreeing with your comment about the background, so a played around with it a bit, and settles on a desaturated version with a red tint to it. Let me know if this works better...

http://dl.getdropbox.com/u/720898/worshipnexus/pag...

Tony

Joined: 01/12/2009
User offline. Last seen 2 years 10 weeks ago.
Footer

Looks good!

The footer looks like it's one pixel off to the right.

Jesse

Church Website Dealer
http://www.churchwebsitedealer.com

Church Website Ideas
http://www.churchwebsiteideas.com

Joined: 12/16/2007
User offline. Last seen 27 weeks 6 days ago.
What browser?

I've been getting inconsistent results myself on different browsers and systems... can you tell me what OS and what Browser/Version you looked at it in?

Thanks, Tony

Joined: 09/11/2008
User offline. Last seen 7 weeks 4 days ago.
nice layout

Hey Tony,

That page looks really nice. I'm using Firefox on a Mac and everything looks fine.

Joined: 01/12/2009
User offline. Last seen 2 years 10 weeks ago.
Firefox on a PC. I didn't

Firefox on a Windows XP.

I didn't notice it until I moved the footer over the main area of your site.

Now that I look at it again, I see the header and footer one pixel off.

Jesse

Church Website Dealer
http://www.churchwebsitedealer.com

Church Website Ideas
http://www.churchwebsiteideas.com

Joined: 12/16/2007
User offline. Last seen 27 weeks 6 days ago.
yeah...

Here's the thing, it HOME on XP FF3 I see what you're talking about. At WORK on XP FF3, I don't see it. Just frustrating. I think in this particular layout, I can get rid of the white in the bodybg.jpg, and have the #main bg be white (assuming I'm careful about my floats). Then, no one should notice the difference.

Tony

Joined: 12/16/2007
User offline. Last seen 27 weeks 6 days ago.
Dalerius, Curt, et al...

Thanks for your feedback in regards to this ! Here's an updated peek. Per suggestions, I've changed the bg to something within the color scheme, and modified the design so the content area is 960px rather than a full 1000px, to avoid ugly scroll bars on 1024px displays. I've also changed the bg so the shadow keeps going underneath the content area, rather than being a white cut out like the old one. This should cover and hide the 1px shifting problems I was having in various browsers. Sometimes the best fix isn't convoluted css! Like a bad cowlick, you can either shave your head or let it have it's way... Alright, that was a ridiculous analogy :)

http://dl.getdropbox.com/u/720898/worshipnexus/pag...

By the way, Dropbox is awesome! It makes doing these mock-ups for people a snap! No FTPing required.

Thanks for all the input. More is always appreciated!

Blessings,
Tony

Joined: 09/09/2008
User offline. Last seen 1 day 5 hours ago.
Definite Improvement

Tony,

I think the background image on the sides of the header is greatly improved. I see thin, solid, lines above and below the header area that is distracting but I suspect it's just a remnant from building the image and I presume you'll remove it.

I don't like having the background fixed; I think it calls attention to itself when you scroll down. Of course, this is just my opinion, others might like it.

Nice work,
Curt