Need a designer eye

Michelle - May 13, 2008 - 14:46

My site is a hobby so I can't afford to hire a designer and I am so not one. Overall, I'm fairly happy with my theme and not looking to make any radical changes. But I feel like it's lacking something. I look at sites that are professionally designed and then I look at mine and mine seems so amateur. I mean, obviously, it is since I'm not a pro, but there's just something, especially with the front page. Something I can't put my finger on that just looks wrong.

So I thought I'd post and see if any designers out there can give me some tips. I'm hoping that someone will say "oh just do this and that and it will be much better." LOL! Maybe crazy, but worth a shot. If your tip is to scratch it and start over, don't waste your breath. I've spent far too much time on this theme to just chuck it. I'm just looking to give it a little something... maybe a different font? Different spacing? I don't know.

Anyway, the site is http://couleeregiononline.com . Oh, and I know there's still a few rough patches like the pagers not in the right spot and other small glitches. Fixing those would help, of course, but this is more of an over all feel of something not quite right that is eluding me.

Thanks,

Michelle

...

Chill35 - May 13, 2008 - 14:54

It does not look so ameuteurish to me.

I see 2 problems though, easy to fix.

1- Problem with white space surrounding your content (I include the sidebar...). Add some. For example, your left column sits way too close to the edge. And there's no balance with the white space between the right column and the right edge. Adding white space will help, and make that amount of white space the same, on your far left and far right.

2- Alignment of the logo. It is now centered. I would align it to the left.

Caroline

11 heavens.com

er

Chill35 - May 13, 2008 - 14:57

Actually I would align the logo to the right.

I would try both (left and right), and decide, but right-alignment will look better I think, because of the text in the logo... stronger alignment you'll get this way.

Try and align the edge of the logo (the edge that is aligned) with the text in the left column (if you left-align), or to the edge of the blocks in the right sidebar (if you right-align).

Caroline

11 heavens.com

By the way, your web site looks very web 2.0

Chill35 - May 13, 2008 - 15:01

Depending on personal taste, this can be a great thing, or a bad thing.

What I mean by web 2.0-style is

gradient used in titles, glossy-button-like... flashy colors, rounded corners with gradient for blocks, big font size, etc.

Caroline

11 heavens.com

Yeah :)

Michelle - May 15, 2008 - 03:52

I really like the bright colors and gradients. I am thinking of making the font a bit smaller, though. I think there's too much scrolling on the page and I'm not done adding stuff. Will have to experiment and see.

Thanks,

Michelle

--------------------------------------
See my Drupal articles and tutorials or come check out life in the Coulee Region.

Michelle

Chill35 - May 13, 2008 - 15:01

I love your logo. Perfect.

Caroline

11 heavens.com

Thanks :)

Michelle - May 15, 2008 - 03:56

It was designed by marcrobinsone

Michelle

--------------------------------------
See my Drupal articles and tutorials or come check out life in the Coulee Region.

ok this bit will be nit-picky

Chill35 - May 13, 2008 - 15:06

Inside your blocks, maybe you could add (wow, the phrasing of that) a little more space between the titles and content. And reduce space between title and sub-title.

There is as much white space between the title-and-sub-title and the first list element that follows, as there is white space between list elements... IMO there should be more. Not as much.

Caroline

11 heavens.com

Thanks!

Michelle - May 13, 2008 - 15:10

Thanks for all your help. I wasn't expecting such a quick response and I actually have to leave in a few minutes. Usually it takes a while to get an answer so I figured I'd post before I left. LOL! I'll give your suggestions a try when the kids nap this afternoon.

Thanks again!

Michelle

--------------------------------------
See my Drupal articles and tutorials or come check out life in the Coulee Region.

:-)

Chill35 - May 13, 2008 - 15:12

I hope I am not overwhelming you with the number of comments I posted here.

Caroline

11 heavens.com

...

Michelle - May 13, 2008 - 18:48

Oh, not at all. I did ask for feedback after all. :) I need to play with this on my dev site and see how it looks. Thanks so much for taking the time to give me advice. I know what I like when I see it and the same for what I don't, but getting from what I dont' to what I do is tricky. :)

Michelle

--------------------------------------
See my Drupal articles and tutorials or come check out life in the Coulee Region.

Unity

Chill35 - May 13, 2008 - 15:10

Lack of unity between the style of the content titles... and the tab buttons below ("Latest", "popular", ...).

Also the text for the non-active state on these tabbed buttons ("Latest", "popular", ...) is not very legible. Green on ~same green.

Caroline

11 heavens.com

Unity?

Michelle - May 15, 2008 - 03:57

I understand most of your suggestions in this post. (Just need to get time to try them. Sigh) But I don't get this one... What do you mean by "Lack of unity..."?

Thanks,

Michelle

--------------------------------------
See my Drupal articles and tutorials or come check out life in the Coulee Region.

Here is what I would do...

CrashTest_ - May 15, 2008 - 04:20

I preface this by saying that this is what I would do with your site for starters (and I did, locally) to get it trimmed up a little and to get things a bit more consistent. Also, I haven't read the other comments, so I am probably going to repeat or go against what others are saying, but design is somewhat subjective, so we will just work on the assumption that I am not right, but these ideas might work for you :)

Ok, a couple of things I see. First, one of the things I learned about design is that unless you really have to, don't align every thing center, you should pick a good line and stick with it. I find that if you left aligned you would find it looks more professional.

Most of what I put here follow the principles of C.R.A.P. :) Contrast, Repetition, Alignment, Proximity. Also, everything I recommend here I tested in Firebug on your site and verified that it does indeed make it look even more awesome than it is already!

Width, you have your body do a max width but not the header, better to be consistent like with alignment. Keep them both max-width 1270 if that is a width you like.

I like to open up the line height a little like 1.8em to give it a little more readability, on all of the body text and anything that is normal'ish text.

I would put the search in a smaller, but VERY visible box above your Welcome Visitor box.

Don't make the mission font bigger but differentiate it somehow, such as a border, italicize it, or indent it, put giant quotes around it with a nice large very light grey "Mission" background to the section.

Margin on the right is very wide, inconsistent with the rest of the page. Margin on the left is not wide enough. Though it may look different with a smaller font size, I would recommend about 20px then mirror that on the right and in the gutter between columns.

The footer is AWESOME, nice color, font size, and alignment for a footer (this is one place that I think is appropriate for center align).

Above each of your header gradient bars in the left column, open up the space a bit and reduce the font size for ALL h2's and headers. I did 1.2em font size, and margin: 1.5em 0 0.5em on the #front-talk h2, and #front-who h2 along with aligning them left and padding them in 10px in their boxes.

Your .read-more doesn't need to be bold AND 1.3em, just bold (and maybe even .9em). One thing that you will notice is that you need to make things very different, but not more than is needed. Bold, and green is different enough, being 130% the size of the rest of the text makes it look like the Incredible Hulk :)

I would use Verdana, for your headings and Trebuchet MS for all of the rest of the text. Have it fall back to Tahoma for body.

I would do the following with your images on the front page so that you don't have the staggered blocks with some images creating an uneven left alignment in the Who We Are: block:

.compact-teaser-item img {
border:1px dotted silver;
float:left;
margin:0px 10px 10px 0px;
min-height:75px;
width:75px;
}

Your div #front-calendar needs to have it's width be the same as those rounded blocks above it.

I could probably keep fine tuning to infinity (that's sort of what I do, a blessing and a curse :) ) but here is a good place to stop.

I hope this helps you out Michelle :)

Pat (CrashTest_)

 
 

Drupal is a registered trademark of Dries Buytaert.