Is This A Design Improvement ?
Posted on 21/5/08 by Tim Koschützki
Hey folks,
so as you can see we made some minor design changes. ; ] In fact we wanted to show the design to a few people before we push it live, but since we are pro-active folks we just played a game of rock-paper-scissors and I won. So we just pushed the changes live and hope for the best, including your feedback. :]
So we think the header and footer are a little heavy now, a little too dark and the borders seem a little too thick. Please throw in your two bits.
Thanks a lot!
Did you like this blog post? If so, please consider subscribing to the Blog RSS feed.
You can skip to the end and add a comment.
couple of things that I like
A much easier to read header/site name
and the sidebar links for Google analytics etc. are now centered properly in FF
hey,
some more space on the top, other hover-colors for the title and more contrast for the navigation - then everything is fine :)
greets, leo
Hey Felix & Tim,
I tend to be a harsh design critic, so hopefully you don't take anything the wrong way, but here goes :)
First, from looking at the site before, I don't remember it spot-on, but it looks like the header mostly is different colors and bigger buttons. I'm not sure exactly what your goals are for the site, but the hierarchical proportion of the nav buttons to the site title seems off to me--seems like the site title should be larger, or the buttons smaller, maybe even a sweet, shiny graphic for the site title instead of orange Georgia.
Your footer, does indeed seem heavy, I think mostly because you aren't within the grid or style of the rest of the site and your type is huge. It almost looks like it could be Google ads because it is so different. A good rule of thumb for blocks of type is to keep line-lengths short for easy readability. For web, I tend to try to stay close to 400px-ish generally. And when it's footer content, or alternate/sub content, You would definitely want to go even shorter than that.
You guys posted something recently about KISS as a good programming practice and the same goes for design. I think for your site in general, I would recommend working on a simple color palette (1 or 2 dominant colors and a set of neutral/complementary colors)and better proportions of your various content types so that a user's eye will more easily find what they need to. That's my 2 cents, hope you guys are well...
Personally I prefer this newer version, just seems to sit better and I like the contrast in the header, but I also agree that the footer should be brought in to sit within the same width as the rest of the site.
But then it's content that counts and all I can say is keep up the good work and the best of luck to you both.
I Liked the old design to be honest. The dark header doesnt dlow with the rest of the colour scheme, green and black = yucky for a start!
Also green and orange = yucky! White + Green = :D :D :D
I think you need to build a serious logo for Debuggable. It´s the mother of all design calls that you need to make after that.
my monitor's brightness is 30% (it's more comfortable for eyes) ... and I can't see most of the header and footer dark fonts ... so maybe you can make it more shiny
Sorry I just remembered a perfect site for colors :
www.colourlovers.com/
you can choose a pallet of colors, so zou don't have to be a designer :)
and I have some more things to mention but let me sort them in my mind and I'll PM you when I finish
Hey folks, thanks for everybody's comments so far. :)
@Steve: Yeah, that helps a little.
@leo: Okay, will try that out.
@Chris: Yeah well I wanted to make the navigation bar a little more prominent. Especially the link to workshops needed to be much more prominent.
Will try your suggestion out for the footer.
@Peter: Great, thanks. Yeah content is king anyways. :]
@Josh: Hrm, the colors don't seem to be off for me. Which ones would you suggest?
@Martin: Yes it's in the works. Just the logo designers are a little slacky it seems. But we will have one very soon.
@Khaled: Hrm, can you link a screenshot here? Thanks for the linked site. :)
Hi there,
your header and footer are indeed a bit off. I'm not a designer, but here's my 2c: either make the whole site dark (will probably reduce eye strain), or make header and footer a bit brighter (possibly something in the line of background colors of your "open source" buttons on the right, or even the Cakefest button blueish).
Cheers!
Hello Tim:
I've made some changes and packed them: (the link is below)
1- logical change: I've moved the upper right part "We want to help people" and the "rss" to a new container called header, and the header now contains three parts:
leftheader (logo)
nav (navigation tabs)
rightheader ("We want to help people", rss)
because it's not logical to put something visually in header and in syntax it's not.
2- new font colors in header and footer, so now dark screen users (like me :D ) can read the footer clearly.
3- footer margin is now: (margin:10px 5% 0 4%) to prevent IE from showing a horizontal scroll
4- the header background color is css now, it wasn't. you can make it bottom cornered. but it's not the style of your site, you don't use cornered boxes any where.
5- After (Add comment) button there is no space before footer so I put some pixels :D
6- Search button if FF is not well css'ed. so I put some more space for it's caption.
7- use a packed jQuery not the full-size one (94 ~> 20)
8- Tim, redesign the tabs. you can choose a better colors for them and a new borders too.
So let's hear people, if these changes are good or not !! and you too.
link:
http://www.4shared.com/file/48784426/981441ad/debuggable.html
I like the design...except that I am afraid that in IE7 over XP the sidebar lists look a bit buggy..like if there was not enough line height.
As for the rest, I do like the header and footer. It is a nice contrast you got there.
Greetings!
Hey Khaled:
1) Good thinking
2) Don't like it. It works really well in the header, but in the footer it very much hurtst he eyes. For people with non-dark screens it is a little too bright.
3) Good idea.
4) Hrm well your approach works. However, I did like mine, too. Hrm.
5) Yup, cool.
6) Don't see a difference in FF2.
7) We enabled gzip now for the entire site, so no need to put in a packed one.
8) Hrm some people like them, some don't. Hrm hrm.. let's see. :]
Thanks for your work!
Thanks Tim for your reply
2- ok, but try to ,make the fonts a little lighter
4- but about the users who disable JS :D
6- I don't know why ... maybe my FF2 is a little buggy ;-)
7- hmmm ... nice move
8- You should convenience all the users (or let's say most of them, cuz all is impossible)
you wellcome
Personally I liked the header of the old version. It was simple and I liked the clever use of { } for the menu
The text "Debuggable Ltd." could use more room to breathe...it is above the navigation which seems to be squishing it. I feel that the 54px height of the nav buttons is to much for the overall header height of 106px.
My advice would be to either shrink the height of the nav buttons, perhaps also just increase the header height..
I would also suggest an increase in the font-size of the navigation text.
the footer by its self looks fairly good, although the font color seems a bit dark to me. and I agree with what was said above, that the footer doesn't really align with the rest of the site layout, it seems to be disconnected.
Hope some of that was helpful,
Derek
-- Also, The new header doesn't do anything to communicate your brand. When I look at it, it speaks 'generic dark header' instead and in contrast to the old header, with the use of { } brackets and the cleanness to illustrate the concept that your brand is about clean code etc...
Derek
As suggested already, a well planned logo would do you a lot of good. Also, consider brightening the footer a bit, strains the eye...just a suggestion though :)
Thanks :)
I like this.. :D
Regards.
This post is too old. We do not allow comments here anymore in order to fight spam. If you have real feedback or questions for the post, please contact us.
And yeah, we will work on the author images as well as soon as Felix moved to Berlin. :]