YC Design Prototype

I've designed a prototype skin for our entire site to follow. Please let me know if you like or dislike the design. If you don't like the design, tell me what you would like to see changed. I've designed two pages so far, our profile pages, and info pages:

Profile Page

Info Page

Keep in mind that the design has not been implemented yet, these are still trial pages. Awaiting your feedback!

Edit: Here is the new design we came up with. We are in the process of building out the site now.

OH MY GOD. I LOVE IT.

the wacky font in particular gladdens me lots. i feel positively sure that someone is going to ask you to change that wacky font, however, and i pray that if you do, please retain the option to keep it for those of us that want to. (like a tick-box or a skin or something) :P add in the man in brown pants while yer at it.

i don't think it looks modern at all. more like jolly and nostalgic. hehe.

total jackpot.

I can't say I like this layout, as it is. It's lacking in many facets of its design.

nb. Keep in mind that I'm not a professional designer and have little basis in design theory proper. The following is purely my own opinion, demonstrated or justified as I feel capable, based on my own aesthetic judgement.

First of all, the title and heading font. The kerning is much too small, and the subtle outline is exactly too subtle to really hint at the glyph shape. It really hurts the titles' readability. You don't want someone to have to concentrate on reading titles, but be able to skim over them quickly.

Furthermore, it contrasts significantly with the rest of the design. The curvy, bubbly font feels very much out of place with a design that is otherwise extremely square and conservative in feel, except perhaps the colour palette which, though relatively conservative, still feels a little bubbly to me. It contrasts even more strongly with the rest of the fonts: you're using a serif font. Not Times New Roman, thankfully, which is not only not optimally readable but quite conservative. Yet that font, with the rest of the design, still opposes the title font significantly.

On that subject. did you even specify any fonts in the CSS? A look through the CSS via Firebug seems to indicate not. No design should go without fonts specified; always pick some style of so-called "web-safe" fonts (Georgia is nothing like Times, even if they're both serif!) and specify a generic family as a fallback. You typically don't want to leave that choice to the user-agent's configuration, lest a clash such as this happens.

I'm not a fan of the square design, either. Although it can be pulled off nicely, here it just feels "blocky", and lacks visual unity. Some parts of it feel like they were just stuck on there amateurishly (most notably the "dropdown settings" etc. box, the "Member Rank ..." box, and "Title of Work ..." section background format, and the juxtaposition of the heading/nav elements). The contrast of colours and lack of transition, flourish or symmetry between these elements detract from a unified appearance. The colours, juxtaposed as such, contrast a bit strongly in my opinion (again e.g. Member Rank box). You could probably play with either positioning/transition or colours to achieve a more balanced, unified appearance; indeed, perhaps both are necessary. I don't think the fixed-width design is helping that feel of rigidity, either, though its effect can be made marginal. (I'm a bit biased against fixed-width layouts, though...)

On the subject of colours, I find the palette used just a shade too ... cold, i.e. blue. As it is, it feels a bit uninviting to me, personally. If you're going for a more saturated (?) design (rather than the much whiter one we currently have), I would suggest picking a palette that is slightly warmer. (Mind you, neither of my monitors are quite calibrated for colour and both differ visibly in colour temperature, so I'm not sure how accurate that is. Since this is web, not print, though, you'd want the design to look good on most monitors regardless of adjustments...)

Back to the design, something else that contributes to the blocky and perhaps cramped feel is the use of whitespace. I find it overall rather inadequate: the font is too small under Info (profile.html), Forum Info and Profile Info (info.html), and the line-spacing and spacing between listed fields/entries is inadequate for it to be easily read and to give the site adequately breathing space (especially since you're going for a friendly community, not a stuffy feel!). The same occurs between the thread post box and the reply boxes: they need breathing room and maybe some subtle Web 2.0-style embellishment. For the Compositions, a little more padding (1-2px) might be nice; the Liked Compositions feels adequately spaced, although distinguishing "Title" from "Composer" typographically might look nicer (and not have the background follow the hanging indent).

Those elements I just mentioned also feel rather "square" in shape.

Also, mind your W3C Standards. The code is invalid XHTML 1.0 Transitional: profile.html (28 errors) and info.html (11 errors). The CSS is fully valid, though (checked under CSS3).

===

I prefer the current homepage design: it feels more open and lets you breathe. Maybe the outer background contrasts with the inner white or the browner LOG IN/TOPICS sections a bit, but only if I stop to think about it (my first instinct would be to use a slightly darker, redder colour for the background). Otherwise, it feels nice: the gradients give it a nice rounded look, added to the highlight shapes (on the main nav and Network sections e.g. Recent Compositions). The white space and colours seem effective at keeping the design open yet not too airy, and the horizontal rule below every box's title makes for a subtle but well-appreciated visual separation of the title. I'm not 100% sure how I feel about the fonts, but they certainly don't clash as much as the title vs. text of the prototype design (except in the ONLINE USERS section). (Mind you, some of the other sections, e.g. the music directory, could be improved design-wise.) Also, on a highly subjective note, I love the header image.

(Also, the code's filled with a load of validation errors - several seem to just be that & was never escaped to &, which is REQUIRED even in (X)HTML attributes like href ... and it seems the Javascript was never put into XML CDATA blocks, which is needed in XHTML. There's a minor glitch in Firefox wherein the white colour of the boxes' background only clips to the apparent inner padding, rather than extending to the border, too.)

Overall, while I feel the ideas in this new design have the potential to be developed into a nice web layout, what you've accomplished so far isn't yet presentable; it's only the first buds of a design process and needs to be revised and developed before it blossoms and can be shown to the world.

Regards,

Marc-Alexandre

P.S. A few ties with the poll questions:

Is the layout clean and simple?

It's simple. A bit too simple. Embellishment doesn't have to be excessive - it can be quite subtle - but those embellishments can make the difference between a nice yet amateurish design and a good, nuanced design. As for clean... I find it's too cramped.

Do you feel the design is modernized?

The design doesn't feel "modern"... where "modern" seems to be the whole Web 2.0 style (whether you like it or not). It seems to reflect design immediately prior Web 2.0 (not necessarily bad, though this layout isn't yet refined). Indeed, though, it does have a certain air of nostalgia.

I'm just going to post a minor update on the profile page reflecting my idea for visibly floating divs. This makes it obvious that parts of the page are distinguished from others. That and I tuned down padding in the feed items. Other than that it's the same as Chopin's - just minor CSS changes.

http://forum.youngcomposers.com/prototype/jamesprofile.html

Looks extremely busy and cramped. The colour choices make everything look muddy and unattractive.

-John

Re: James' update.

It's still rather cramped - heck, even more so. However, I must say I prefer the background colour of the content boxes. Not so much the contrast with the background colour of the boxes inside them.

Do you think the cramping be relieved by using more percentage of the page width? The fixed width is 1000 pixels. If we go more, it might be better to go to adjustable width (minimum can be fixed at 1000px).

Do you think the cramping be relieved by using more percentage of the page width? The fixed width is 1000 pixels. If we go more, it might be better to go to adjustable width (minimum can be fixed at 1000px).

I think you need to reconsider the use of whitespace (margins/padding), and maybe some element styles. Every border you add constricts whatever is inside; you'll need to adjust accordingly. Refer to my first post in the thread; I mentioned several other aspects/elements that I find add to that cramped feel. Mind you, I think the block-ish, right-angle-and-solid-border style needs more whitespace to feel as well-spaced as a layout that uses round corners and more subtle borders (for example), so changes at that level may warrant reviewing the whitespace.

Something I didn't emphasize, perhaps, was spacing between paragraphs/text blocks and line spacing. It's crucial to adjust that to get an appropriate feel (along with font and overall design of course). On the Feathered Melody website, I recall that line-spacing difference of 0.3-0.4 was the difference between "we take ourselves pretty seriously as game-developers" (smaller line-spacing) and "we're a friendly group doing this for fun/out of passion". Of course, that also affects how cramped the layout looks to an extent.

Also, you may want to look at the padding (or margin) versus content width balance for the columns.

Is the design aesthetic?

The browns combined with the wacky font gave it a New Orleans feel. I felt like I was redirected to the Popeyes official website. I do like the font however and I do like the beige and burgundy.

Do you like our color choices?

NO. what is it with the designers and browns?

I don't like the whole brown thing at all, the beige and burgundy is fine, but the brown is just ew. Is there a way to have each user have their own customizable color choices?

If not, I would like to see some more common, pleasing colors. Blue would be the best choice.

Is the layout clean and simple?

Everything is alot smaller, so it'll take some getting used to, but for the most part it's usable?

Do you feel the design is modernized?

No! I don't know why, but it has a 90's vibe to it. Maybe changing the squarish designs would help.

I don't know where to do begin. I feel like I have covered a lot of ground before about what I like and dislike before and Laogeodritt's post above covers a lot of my dislikes (and in more technical detail) so I'll just answer the questions and leave it be now.

Is the design aesthetic? - Voted No.

I like the font - its a bit more funky that what we have right now. But layout is way too cramped. The feed looks too much like Facebook's and excluding the fact I hate the idea of the feed, I hate the look of it as it way too cramped.

Do you like our color choices? - Voted No.

It reminds me of mud of the most part.

Is the layout clean and simple? - Voted No.

Some of the writing is too small and the whole layout is way too cramped. I would hate to see how this skin would look like on the main forum page with the shoutbox.

Do you feel the design is modernized? - Voted No.

Nope. Like others have said, it more jolly and nostalgic than modern.

I will add that if the design was active, I would really be put off using this site.

I second Apple's last comment. If this site was active, I would be really put off too. I don't think Chopin is getting it. We need someone who actually knows how to design a webpage to design a webpage.

Ah, don't be turned off by thinking that chopin will be the final designer of the site. His plans are to give these mock-ups to legitimate designers who will take them and expand, making sure the site both follows the design plan and is pleasant to navigate. This is the barebones - layout and colour scheme. I would highly doubt even the square corners are to stay, and even if they are there might be some texture or gradient to make these parts of the site more appealing.

About the brown - to speak frankly it's been a longtime trademark of the site. Not many sites can pull off brown and I think we should try. I believe the intent is to go for a classic woodsy feel. That said, I'm still strongly encouraging chopin to consider site-wide skinning - a simple click could change from default brown to one of several choices (blue, red, green... )

I don't mean to pry, but isn't it the designer's job to, ya know, design the site?

Chopin should give them what we, the users, want only and let them come up with something good and easy to navigate. The slight problem is that costs a fortune. As a mid-way, I'd rather have some quality college grad desperate for money come in and design something before us even making a mock up. Designers don't just do code, they focus on UI, something so sadly overlooked in today's websites, and this mockup overlooks that.

Can someone PLEASE make this site look like 2010 and not 1998? Kthxbai.

For my viewing pleasure, could you link a few sample sites that use what you consider to be the modern design sense you are looking for?

P.S. learn CSS and maybe you can help out. I'm learning it on the fly.

I know HTML and CSS pretty well so if you need my help I'd be more than happy to.

Some "modern" sites: (You might recognize them)

http://www.apple.com/

http://www.youtube.com/

http://www.google.com/

http://mail.google.com

http://mashable.com/

http://www.linkedin.com/

http://digg.com/

http://twitter.com/

http://online.wsj.com/home-page

http://chris.pirillo.com/

http://www.microsoft.com/en/us/default.aspx

A nice little article on the subject: http://www.webdesignfromscratch.com/web-design/current-style/

I second Tokke's comments about getting a college grad student (or maybe a even really talented undergrad that need experience) to take a whack at it.

In the long run, its going to be a better than chopin, and I mean that with no insult. We need a pro job not a hack job.

James, chopin, I'm still willing to give a hand with the markup, if you need it.

As for colour, it feels too artificial to feel really "wooden". Adjust the hues a bit. Or heck, use a wood texture for the background with a partially transparent intermediate container. That might look nice - and, depending on how that's executed, might look more "modern" too!

Though I must agree, given the scope of the site/project, that getting a professional designer or at least a student in design would be better. Or, heck, if there are some people with proper experience in web-design and -coding on YC (even if it's not their profession), you might consider getting a group of volunteers or even offering compensation. Given the right talent, experience and dedication, I'm sure that could turn out nicely. (Then again, the "dedication" part often wavers with volunteer groups...) But I'm not sure you two alone have the experience needed for the design aspect, even if you're getting along with the code (or not? I haven't so much checked the source, so I don't really know). I don't mean that in any way condescendingly - I don't either.

For my viewing pleasure, could you link a few sample sites that use what you consider to be the modern design sense you are looking for?

P.S. learn CSS and maybe you can help out. I'm learning it on the fly.

Some Modern Looking Sites - You Don't Get On This Site Without Doing Something Right

If there are any professional designers on site, willing to work with my specs, contact me. I also need more than a hobbyist, unless you are an extreme designer enthusiast :)

My plans currently are to use my mockups as a basic layout, and provide this to my designers/programmers (along with your criticisms) to help create a great design. Along with the simplistic modern feel, I'm trying to get that "wooden" feel as well. I know some of you are saying you would prefer blue, but I don't think blue would work well with this site.

If there are any professional designers on site, willing to work with my specs, contact me.

Even if I were a professional, I would not work with these specs. You're still using old technology from the early 2000s era. The site needs to be rebuilt "from the ground up", to use your words. That means litterally gutting the server and starting anew. No IPB, no php, no crappy code, no stupid UI, no even stupider color scheme. Rebuild the site. If that means incorperating IPB later when they build the forum, great, but don't say "This is what I've got, now use this to make something new." That's not how it works in coding. You have to start from the beginning because taking big pieces and gluing other pieces onto it causes massive compatibility issues and next to no portability. (If you don't know what those words mean in programming langauge, you shouldn't be designing a site.) It's just like a building. If you start with a two-floor house, you can't stick a skyscraper on top of it and expect it to hold up, which is essentially what you did with YC. A hugue no-no. When your original developers bailed you should have gotten your money back and started again from scratch. It is very, very difficult to re-start a project with code you haven't written yourself. You must not know that because you're not a programmer.

Bottom line, stop with the roundabout way of doing this and seriously consider throwing the old site in the fire and starting over from scratch. Lord knows, this site needs it. Because how this is going right now, YC will definitely die out if another December '09 is pulled on us.

If there are any professional designers on site, willing to work with my specs, contact me. I also need more than a hobbyist, unless you are an extreme designer enthusiast :)

My plans currently are to use my mockups as a basic layout, and provide this to my designers/programmers (along with your criticisms) to help create a great design. Along with the simplistic modern feel, I'm trying to get that "wooden" feel as well. I know some of you are saying you would prefer blue, but I don't think blue would work well with this site.

This is so full of contradictions. :facepalm:

You want our input as members, yet you emphasis that anyone working with you have to be "willing to work with [your] specs." So anyone wanting to help has to do it 100% your way?

Chopin, with all due respect, you're not a designer. You say you want a simplistic modern feel yet most of the people who have already commented on this thread have outlined that they think the designs are too crowded. Also, while the limited number of votes are divided, there is a clear feeling that the designs aren't modern. You're designs are contradicting your "plans." I feel sorry for any poor designer who receives those. There would be a mountain of work to do on solving the criticisms and with the forum divided over how they want the site to look, they would never get it right.

Also, I thought it was an established criticism that a lot of members dislike the brown but would be willing to let it me the main site palette as long as other colors were provided. Would it kill this site to be shown in other colours or are you going to force members to use a site the colour of mud? The current palette would be a million times better than that. Being able to change colour themes is a common feature of modern web design - even the search engine Ask.com makes itself stand out from Google by allowing users to change the theme of the site.

You're designing the new and improved version of YC without knowing fully what we want. In the feed thread for example, I mentioned an idea of a Watch System rather than a Feed System. James, liked the idea but that was the last I heard of it - you never commented on it, no further discussion was mentioned about it so if it was rejected, why was it rejected? Or have you decided, on your own, that a feed system a la Facebook is what everybody wants based solely on the number of votes it got? Without reading the comments?

I have tried being nice, I have tired explaining my point of view until I am facepalming in real life because you don't get my point of view. And yes, I know I am not the sole person on this forum but Chopin, you really seem content in ignoring everything and pressing on with your own vision of how the site will look. James has been willing to discuss ideas, he is more fluid with accepting different outlooks on the direction of the site. Through talking with him, one great idea about tabbing the profiles to allow for a composer bio came forward. We comprised our ideas to make it work with this site's software in a way that we work with his ideas and mine. I hope this idea goes forward and yet I don't see you doing this - I just see you posting threads with polls and posting the odd comment on here or in shoutbox. Nothing I would or could class as an active, cooperative discussion about the site.

If you won't discuss ideas or don't have the time to respond and most importantly listen to those people's opinions then I give up. I have taken the time to write several long posts of late - I'm dyslexic and it takes me longer to write messages like this one because I have to go through everything with a tooth comb later and they all seem to have been in vain. I give up trying to make you understand my point of view too. We all have a common goal in this yet that does not seem to matter - Tokke took some stick for his post, I'll probably take more for this one. I don't care anymore.

Last December - I left for Six Months because of the way the last lot of changes were handled. If this keeps up, I'll be gone for good. Call me dramatic or whatever I really don't care now but it boils down to this. If YC can't keep the members it has, how on earth do you think you will keep this site going and attract new members?

Finally, one comment that was made about Tokke was that he was being self-centered. I'll probably peeved a bunch of people off now but honestly, the community isn't responding to these threads. The community is not having an active discussion. My best interest is making this site better and I have been willing to discuss my point of view with anyone and willing to bend my ideas and thoughts in line with others except the only people I have had an active, productive discussion which over my ideas have been James and Tokke. I'm going to defend Tokke because my gut tells me that he is of the same mindset. That same gut also tells me that if more people were being productive in these threads and more ideas were being discussed then the extreme negativity that I am expressing in this post would not exist.

Finally, one comment that was made about Tokke was that he was being self-centered. I'll probably peeved a bunch of people off now but honestly, the community isn't responding to these threads. The community is not having an active discussion. My best interest is making this site better and I have been willing to discuss my point of view with anyone and willing to bend my ideas and thoughts in line with others except the only people I have had an active, productive discussion which over my ideas have been James and Tokke. I'm going to defend Tokke because my gut tells me that he is of the same mindset. That same gut also tells me that if more people were being productive in these threads and more ideas were being discussed then the extreme negativity that I am expressing in this post would not exist.

You're spot on! I'm not in this for my own personal gain, I want this site to be awesome. But that's impossible.

Where is this massive community that the admins (*cough*Jason*cough*) keep touting in our faces? Because, if it exists, they certainly aren't acting like a community.

When I say "my specs" I'm talking about the basic layouts and colors, along with the font choice and logo design. These colors are trademarks of the site, and we can't just change them drastically. And layouts have to be simplistic and obvious, for ease of navigation. I've taken many votes on the skin of this site throughout the years, and the general consensus is that people enjoy the brown layout. The site just wouldn't look right if we used blue.

You're still using old technology from the early 2000s era. The site needs to be rebuilt "from the ground up", to use your words. That means litterally gutting the server and starting anew. No IPB, no php, no crappy code, no stupid UI, no even stupider color scheme. Rebuild the site.

This statement is simply false, and full of assumptions. You don't have access to the YC server, so there is no way you have seen the source code to make this assumption. Furthermore, we are using modernized technology from 2010, not from the early 2000's. Your suggestion to start completely from scratch would be a sure way to end the site. I believe most parts of this site work well. The only problem is the design and layout which I am trying to figure out (and some bugs that are inevitable to show up here and there). It's very hard to please everyone, as everyone will have different visions on how to build the site. The best I can do is listen to suggestions from "everyone" as a whole, and take action on some of the best suggestions.

When I say "my specs" I'm talking about the basic layouts and colors, along with the font choice and logo design. These colors are trademarks of the site, and we can't just change them drastically. And layouts have to be simplistic and obvious, for ease of navigation. I've taken many votes on the skin of this site throughout the years, and the general consensus is that people enjoy the brown layout. The site just wouldn't look right if we used blue.

Do you mean in the legal or common sense?

This statement is simply false, and full of assumptions. You don't have access to the YC server, so there is no way you have seen the source code to make this assumption.

Well DUH! But I can gather from inference to see what you do have. Right now it isn't exactly cohesive.

Furthermore, we are using modernized technology from 2010, not from the early 2000's.

What's the "modernized tehcnology" you speak of then?

Your suggestion to start completely from scratch would be a sure way to end the site.

Sure way to end the site? No. It would make the site one cohesive whole, of which it isn't right now, and bring new people to a site that would actually want to be here. In fact, I believe that if you do it the right way, the site would explode in use. Trust me, if I had the money for it, I'd pay for it myself.

I believe most parts of this site work well.

As a messy amalgamation of multiple technologies, sure. I'm not saying something like that can't work, just that it doesn't work here.

The only problem is the design and layout which I am trying to figure out (and some bugs that are inevitable to show up here and there). It's very hard to please everyone, as everyone will have different visions on how to build the site. The best I can do is listen to suggestions from "everyone" as a whole, and take action on some of the best suggestions.

I don't know if its so hard to please everyone since we do have a very specific audience and user base. Young, Classical Music, mostly-tech-saavy, Composers. That's a pretty small market and their wants shouldn't vary too much. Indeed, though, one should accomidate the best of all suggestions, not just what's "easiest" or "least-effort" for you and your developers. There's more problems to this site than just layout, and I have a sneeking suspician you know that. But no admission will be made to that I'll bet. :) I applaud your thinking on this point though. Now lets build a site together, please.

Sorry for quote-mining, but I don't see any other good way of responding.

That's a pretty small market and their wants shouldn't vary too much

You'd be surprised. Everyone has different personalities, and different tastes. For every person who appreciates a new design, one may hate it. Problems start happening if "for every one who likes it, 3 dislike it".

There's more problems to this site than just layout, and I have a sneeking suspician you know that.

In the technical sense, the only problems I see are uploading bugs every now and then (and even this has minimized), and staying logged into the network part of the site. I realize the instant messenger, although it works, is clunky. I am addressing this. Functionally, we will be making a better use of profiles. Aesthetically, I want to revamp the design, and as far as the actual layout, I want to remodel the pages to make navigation more obvious. Lastly, I want to "ajaxify" parts of the site so that it creates a better user experience and gives it that web 2.0 feel, as well as match the new design to the forum and wiki. If we can accomplish this, I feel a lot of the problems you speak of will have been addressed. The site should feel much more cohesive with those following updates.