Project Community Theme: Design
It’s time for round 2 of the Project Community Theme — the theme where you create the design and I code it. And this time, we’ll discuss design.
Put your designer-thinking caps on and get ready to discuss how you want this thing to look.
Thus far, I’ve gotten a lot of interesting ideas about functionality (which we’ll cover in another post) but not a lot of feedback on how this thing should look. The goal of this post is to get some ideas about layout and color schemes.
Layout or structure
Layout is always a tricky thing when developing a WordPress theme. Not only do you have to get the thing to look like you want but to play nice with the super-duper things you want to add.
Lately, I’ve been trying to imagine layouts on a three-column grid — one column for the sidebar and two for the main content area.
Another thing to keep in mind is the layout for each part of the site, not just the front page. Should the layout look different for the home, single post, and archive pages? Should you have different sidebars for these pages? Where should the header go, below the main navigation or above? There are a lot of questions you should ask yourself when it comes to the layout of a theme.
I’m partial to fixed-width designs, but some people prefer fluid-width. The reason I’m not a fan of fluid-width layouts is because something’s almost certainly going to break the layout on some screen sizes.
Just keep in mind what functions or cool scripts you want when discussing layout options.
Color schemes
I think we’ve decided that there will be three or four different color schemes for the site instead of a long, complicated options page where users input colors.
Coming up with a decent color scheme is my weakest area in design. Fortunately, there are a lot of great sites that help out with this:
- Kuler
This is definitely my favorite place to find and create great color templates. - Colour Lovers
This a great site with lots of great color samples to choose from. It’s a bit slow on the loading side though. - Color Schemer
Color Schemer is a cool online color-scheme generator.
Go pick out some colors. If you have any other color sites you want to add, feel free to share them with the community.
Start designing
I’m ready to read your ideas on how to best put the pieces of the design puzzle together. Once we get enough layout ideas, I’ll put together some sample images for you to vote on.
So, go ahead and put this design together. Let nothing limit your imagination.
1) Should the layout look different for the home, single post, and archive pages? - I think they should be different (at least the Home and post pages should), but keep same kind design and feel.
2) Should you have different sidebars for these pages? - Yes, but keep them fairly close to the same.
3) Where should the header go, below the main navigation or above? - If it a graphic nav bar it should go below the header. If just a text nav bar above the header.
4) I’m partial to fixed-width designs, but some people prefer fluid-width. - I agree with you, fixed width is best in this case. I think 1024 pixels across is best these days(although it probably will be 1280 in the future due to widescreens).
5) Color schemes are not big deal to me ’cause it easy to change the colors in the CSS. But I would say try not to use too many colors, about three (not counting a white background).
That’s just my 2 cents.
[...] themes I’m sure the final result will be something special. Head over here for all the details or here for the latest update and get involved. Published in [...]
1) I definitely want to see a distinction between home single post and archive pages. Not only by the usage of colouring but also icons.
2) The sidebars also has to be different in my opinion. Some pages maybe don’t even need a sidebar. I always want to see related content in a sidebar.
3) I prefer the header above the navigation. But if we use a dropdown menu with transparancy it can also go below.
4) The partial width option is also something I like.
5) Great you added the color scheme sites, wasn’t familiar with those. After taking a quick look on colourlovers.com I found Panaroma Ostunose & SOE
I would also use the three-column grid but with a little bit of flexibility. In other words, behind the scenes it is three columns but fore the naked eye it can sometimes be just two. A feature for instance needs both content columns. But headlines or other content needs just one column.
Noah H.
In #3, what do you mean by graphic navigation bar, like with rounded corners or overlapping tabs?
The 1024px screen resolution is pretty common, but we have to keep in mind that a lot of users have a sidebar in their browsers (bookmarks and such). I usually try to keep it under 980px. I definitely see 1280px screens making up a big portion of the average user in the next few years.
Do you have any favorite colors even though you know how to change them in CSS?
Dennis
I’m not sure how well a distinction of colors and icons on different parts of the site would play out.
I think I’ll definitely add a no sidebar option with this theme. I’ve gotten a lot of requests to remove sidebars for certain pages with my other themes.
I really like those color schemes, especially Panorama Ostunese. I’ve bookmarked them for when we vote on color schemes.
That’s what I meant by three columns. The sidebar equals one column, while everything else fits into the two-column section. But, there’s always the possibility of adding things side-by-side in that section (like my Structure theme).
Thanks for your input guys.
Justin
I mean anything that’s not just hyperlinked text.
I know what you mean and it’s for that very reason I don’t ever use sidebars on a XGA (1024). One thing that’s kinda interesting is to put all the ads on the far right, so in a SVGA/WVGA (800px)or even a XGA with a sidebar, the only thing that can’t be seen without scrolling is the ads. Not so good for someone trying to make money off ads, but still a good way to use all 1024px and keep it so that viewed without lots scrolling.
I’ll look into the color combos and comment back.
I’d definitely like to see a rounded design!
I’ve also always wanted to pull off the “featured post” area that ABC News has: http://abcnews.go.com/. The featured story, with a top headlines section right next to it. Although instead of their scrolling arrows, maybe we can go with tabs.
Here is another color picker. Link. Lots of options.
Noah H.
Thanks for the feedback Noah. Definitely come back with some colors.
Bryan
I like the ABC News featured post area. It’s a nice break from the norm. We could also just make the top headlines area to the right the tabs (by clicking on the list, it scrolls the article).
echoca
I like the pastel options of the color the most.
[...] to design the theme of your dreams? If you answered yes to either of those questions, the Project Community Theme might be just what you’re looking for. This is a community project run by Justin Tadlock, [...]
A feature I thought of that would be nice to see is the little badges you often see that let you share stuff of other websites like Facebook, del.icio.us, digg, etc. at the bottom of posts.
Noah
I think that’s called the Share This plugin. It’ll definitely be supported because so many users are using it nowadays.
Justin,
I love the “features” section in most of your designs, but I would like to see that area a little larger (longer) for a few more lines of text… maybe a paragraph or two more. I just feel that “feature” should get a little more exposure, hopefully creating more appeal for first time readers.
Thanks for the opportunity to put in my 2 cents.
SinDe