October 27, 2003 | View Comments (25) | Category: Design Journal
Summary: A look at the first designs for AllTheParties.com.
The client is AllTheParties. I started work on this about 2 weeks ago and the deadline is October 31. So that gives me about 3 weeks to clean it up, tighten it up, increase the brand image, use red, and oh, make it XHTML Strict Compliant (I am going for XTHML 1.1) along with a tableless design. Did I mention the only images that could be used are the logo and the party pictures that users upload? No text images or border images. This is as simple as it gets. Difficult to do in this short amount of time? Yes. Challenging? Most definitely. Fun? Hell yeah.
Some of the current challenges that I have come across in this short time of development are: Internet Explorer on any platform sucks, floats within floats can cause some issues in IE, and actually presenting all of the information in a legible form that would make sense to any user without making the site seem too text heavy.
The redesigned site so far: Redesigned AllTheParties homepage. Some pages are incomplete and others might not exist yet. This is simply a template design so do not expect any of the forms or image enlargement links to work and the homepage is the only one that has been set as final. The owner of the site, Sam, will be watching this discussion for any ideas and criticisms that you might have on how he could improve the site and also telling him how wonderful of a person I am. As usual constructive criticism is always welcome.
I would like to congratulate Sam on taking the initiative to recognize the importance of web standards and simple, clean design. It is rare to come across such a client and I find myself very fortunate to have the opportunity to work with someone who seems to know more than I do about design sometimes :).
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/38
JP: Thanks. With regards to the background issue, I had a light gray as the background and changed it back to white because the color of the backgrounds seem to take away the certain "feel" for the site. However, since it is just the background color this is always under consideration. On the homepage, everything except for the Welcome section uses a h2 because they carry the same weight. They are the same color, with the exception of h2s, more so because Sam likes the red and using the blue could make users think it was a link and making it gray/black took the importance of it away I felt.
Scrivs (http://www.9rules.com/whitespace/)
I agree with the background idea, though I would probably go with a light grey color for the background (outside of the "box"). #eee or something.
I also agree about the headings. They are too similar. Maybe make some color and/or size changes to mix them up a little more.
It also might look good to offset one or both of the left and right columns with a colored background or box, to further break up the page a little. The all white isn't as noticeably blank on the sub-pages, since there is a little more color and pictures to break it up, but I would do something to add some more color to the front page.
Some icons could also really add something to the page...
"Popular Cities" Could have a small building icon, or skyline; "Upcoming Parties" could have a calendar icon; "Party Confessions" could have a head icon with a dialog bubble, etc. Icons could be used in other places throughout the site as well to provide an easier visual cue of each section at a glance, so you don't always have to read all of the headlines. I would just make a small pixel icon and put it to the left of each headline or something. Nothing huge.
But the coding is excellent, and it is a huge improvement over the original!
Derek (http://www.twotallsocks.com/)
few things:
1) Popular Cities and Service Providers don't line up - although I think they should (SP is a few pixels lower)
2) Perhaps something to highlight the WELCOME TO ALLTHEPARTIES? A different background, or its own border, or something?
3) Possibly moving "Welcome: Login | Register | Help" up to the same level as the page logo/title? Just to alleviate a little more scrolling.
Overall I think it's a great redesign.
kyle (http://www.allergic2love.com)
Headings and background change, because I get the feeling a lot more people are going to be mentioning that :)
Derek: Excellent idea with the small icons. However, even though they are small those constitute images and this site is trying to go without images as much as possible.
Scrivs (http://www.9rules.com/whitespace/)
Much better with the background in my opinion...
And yeah, maybe make the welcome area have its own box or something. That would break up that front page a lot more I think. You could make it have a grey or even red background to really grab attention.
Derek (http://www.twotallsocks.com/)
kyle/Derek: Funny you guys mention the border and background around the Welcome section. I had it in a red box before, but Sam did not like that and I admit that much red does come across as too strong. It becomes difficult to focus on any other section of the page when there is a red block pulling your eyes towards it. Gray most definitely could work though as I have it on my test servers. I also spoke with Sam about the icons and it is something we will try a little later. Right now we are just trying to get the major issues worked out with the site.
The image restriction comes in to play because he is trying to keep the site as lean as possible, which is understandable. Even though it offered a greater challenge in the beginning, right now it is no longer an issue.
Scrivs (http://www.9rules.com/whitespace/)
Ya, I think a red block would be too distracting.. a light gray (like your form input boxes when not selected, for example), with a red border might be better.
kyle (http://www.allergic2love.com)
All the forms need to be worked on formatting wise. I hate forms. They are just no fun.
Scrivs (http://www.9rules.com/whitespace/)
Forms, IMHO, are a damned good place to ignore the 'tableless' design, because tables just work so damned well with them, better than anything else would. On the place with the calendar icon, you need a little padding between that and the text, I think.
re: the headings, maybe a >> or something in front of them (>>Popular Cities) to help set them apart from the rest of the text
re: the welcome section, it definitely needs to stand out more. Why not left align the logo and put the welcome information at the top right... presumably when you're logged in it says "Welcome, Scrivs!" and has navigation related to your account on the system beneath it; for people not logged in you could say Welcome, Guest! in the same manner. Or some more interesting version of guest... like... Club Monkey or something... random list of generic names for partygoers. Just a thought. At any rate, it needs to stand out a little more, it gets lost where it's at now.
JC (http://www.thelionsweb.com/weblog)
Looks really good. A gigantic improvement over the original. Kudos to Sam for wanting a standards compliant, clean, fast, simple site. And for hiring such a good designer.
A few critiques:
1) The color scheme leaves something to be desired. The white/light-slate-blue scheme is good for sites that sell servies and for blogs, but doesn't seem so good for a party site. Needs more energy. Add in the Red that is required and you end up with a red/white/blue color scheme--patriotic, but probably not what you are shooting for.
2) The "Welcome to AllTheParties" in the box: I don't like it. My initial reaction on seeing it was "Is he reserving space for a banner ad?" Certainly not the response you were looking for.
I took the liberty of making some minor modifications to the page. I've posted it here:
http://site-unseen.net/wink/samples/atp/atp.htm
The most noticable changes are in the color scheme. I barely touched the layout (it's already quite good). These are the modifications I made:
1) I changed the color scheme. The blue/white/gray scheme was too cool for a party site, even with the red thrown in. I changed it to a red/burgundy/beige/purple one for more color and energy.
2) I centered the links in the top navigation bar.
3) I retitled some of the h2's. I added an "s" to one and I made some of the others rhyme.
4) I removed the box around the "Welcome to AllTheParties". Apparently, previous versions did not have the colored box around it, and people complained about it not being set off enough. Well, I never saw those versions. But the boxed version looked too much like a banner ad to me, so I took the box away. I increased the letter spacing to help it stand out more. And I removed the "Top 10" link and replaced it with a tagline. The link contributed to the ad feeling to me. I moved the "Top 10" to the Login/Registration/Help line. [note: my wife thinks that I should have left the "Top 10" link where it was. I could well be wrong on this one. ;)]
P.S. I took the source for the page before you moved the login/register/help to the top corner and added a search function. The new way is probably more practical, but I liked the look of the original way better. The balance felt better when the middle column had a short section at the top instead of having long sections at the top of all three columns. Also, the new search area has a border around it in Opera7/Win which is not there in IE6/Win. This border mangles the login/register/help area. Don't know why Opera7 screws that up. Opera6, IE6 and NN7 are fine.
wink (http://site-unseen.net/wink)
wink: Very nice post. I do like the idea of a different colored background and in fact might steal your color :)
re: Color scheme. I do believe the color scheme fits well with the "feel" of the site, since these my not be generally the type of parties that you are thinking of. These are parties held in nightclubs and other such places so the "exclusive" feel is a little more than just a party. Your color scheme (however much I like it) makes me want twizzlers and seems to cause all the text to just flow into each other.
re: The Banner. I do have to agree with you on the banner aspect. Amazing what another set of eyes can show you. I think your wife is correct in the placement of the Top 10 link :P
JC: Changes have been reflected, but I still I need to make it a little "tighter". These changes have been discussed before with Sam and along with everything else got lost in conversations. Also if you look at the form on the registration page (not done) it does not use tables, yet I was able to align the fields.
To everyone who has posted so far, thank you for the great critiques. I wish I could tell you though how many things you guys have already suggested that I have done before on previous designs of this site. When doing things in time crunch you can get caught up in the time and simply push out pages. It seems the perfect environment might be one where everyone can critique every page of a site per day until they are just "right". Although this will never happen it goes to show what can happen when new sets of "experienced" eyes look at a design.
Been a long day...good night. Thank you everyone again, and feel free to keep the comments coming. Sam is enjoying them.
Scrivs (http://www.9rules.com/whitespace/)
'It seems the perfect environment might be one where everyone can critique every page of a site per day until they are just "right". '
FLiP Prototyping, especially devNotes, which installs a small message board at the bottom of each page, letting the client and any other observers of note comment on each page while the developer responds directly on the page as changes are made...
JC (http://thelionsweb.com/weblog)
er... you don't have HTML turned on even for links? ah well. It's a long one...
http://www.fusebox.org/index.cfm?&fuseaction=methodology.prototype
JC (http://thelionsweb.com/weblog)
It is beautiful and great, but being served with the wrong MIME type. Try this PHP:
if (stristr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml')) {
header('Content-type: application/xhtml+xml');
} else {
header('Content-type: text/html');
}
Or see the X-Philes for more information.
HTTP Geek (http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html)
HTTP Geek: Wouldn't I be serving the right MIME type to UAs that support XHTML and just not sending an "accepted" MIME type to UAs that don't understand HTML. I don't see how I am serviing the wrong MIME type. I am just not offering a separate MIME type. And the X-Philes shows that the site could be placed on the list if so desired.
Scrivs (http://www.9rules.com/whitespace/)
Looks great. The whole site feels much warmer without all of that gray. And moving the login/registration/help "outside the box" was a nice touch.
I thought about putting the bottom nav and copyright outside the box on the bottom of the page, but decided against it. Having the login stuff outside the box was a better move.
And now that I look at it more, I like the "Top 10" link where it is. I should listen to my wife more often. ;)
You're doing great work! Keep it up.
wink (http://site-unseen.net/wink)
wink: Thanks. Unfortunately some of the internal pages are not as easy to construct with such elegance. Oh well, I design because I like the challenge.
Scrivs (http://www.9rules.com/whitespace/)
Much better with the welcome stuff at the top. Can you align the text by the search so it's closer to the middle of the text field, and maybe use some CSS to make the search box look prettier? red with white text or something maybe?
JC (http://thelionsweb.com/weblog)
Yeah, there are some minor tweaks that I have made on the local server here that just haven't been uploaded yet. I am trying to get the internal pages completed since the homepage is pretty solid right now I think.
Scrivs (http://www.9rules.com/whitespace/)
I thank you guys for constructively critiquing the site, www.alltheparties.com. As the original designer and owner of the site, goal is to keep the design simple and intuitive. The reason why I seeked outside help was b/c if you have been working on something so long in isolation, you really can't see your work for what it is. Paul kept things simple and intuitive.
Samuel (http://www.alltheparties.com)
JC: No other pages right now, but thanks though. The homepage was the one that had all the info on it so I just wanted to clean that up. Everything else seems to be coming along, but no doubt I will give a shout for help when needed. Thank you again everyone.
Scrivs (http://www.9rules.com/whitespace/)
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
Nice job on the design so far—you've shaved off 5k from the original front page, but you still managed to pack in much more useful content.
Constructive criticism:
-The page looks a bit anemic to me—white, white, white. Maybe a subtle background color (pink?) behind the outerFrame is in order....
-Because all of the headlines are the same color and very nearly the same size, it is hard to tell what is the most important section (on the front page at least). What could you do to give the elements some hierarchy?
Kudos on the nice (and speedy) work. If I ever try my hand at freelancing, I know who to turn to for advice!
JP