Camen Design Forum

NNF Compo Theme: A Fluid Box Theme

append delete Ben

This design is currently under the working title of "metro", but isn't intended to be a direct mimic of the metro UI. My goals in the design are to have a very simple, clean interface that adapts well to different screen sizes. The design is fluid and responsive.

I'm a developer, not a designer, so I'm not entirely sure how to categorise the theme. Maybe minimalist? Maybe it's best summarised as an "IKEA feel" :-).

I've had a bit of a crack at starting it tonight, so here's a screenshot of where I'm at so far. Any feedback at this stage is perfectly welcome. The first image is the pure screenshot, the second is the same image with some annotations.

https://dl.dropbox.com/u/2477024/metro-screenshot.png

https://dl.dropbox.com/u/2477024/metro-screenshot-annotated.png

Ben added on

So, finally got this theme to a state where every page is done. This is my first foray into design-style project work, so be kind :-)

Download:

https://dl.dropbox.com/u/2477024/metro.zip

Reply RSS

Replies

append delete #1. Kroc

Hey man, thanks for being the first to dive in! I’m looking forward to how well this will develop over time. A metro-ish theme would indeed be right up NNF’s street.

Having the new thread / rss buttons on the side is pleasant. In the end they could have large symbols with smaller writing underneath, much as the Start Screen tiles on Win8, but that’s up to what you feel is right for what you’re going for.

As far as the competition is concerned consistency to your vision is important, so you need to harmonise a core set of values that you're aiming for:

* A clear layout that is repeated throughout
* A colour palette that you stick to
* A consistent means of displaying form elements and their interaction
* A typographical means of conveying information

For example, instead of just recolouring the title bars for sub-forums / threads, you could write the titles horizontally down the left or right side of the page; maybe even as a water-mark behind the threads, so that there wouldn’t be a need for the big blocky title bars themselves. Just an idea.

Looking forward to seeing more.

P.S. I hope you’re finding the code easy enough to deal with :)

append delete #2. Ben

Of it's acceptable, I'll keep posting updates after each day I spend working on this (that won't be every day -- I can't always put aside the time).

I liked your suggestion of removing the title bars. I've kept the add thread bar (unless I can think of a sensible way of getting the same message across), but replaced the subforum/thread bars with a simpler colour coding. My assumption is that it should be clear what's what, and a short period of use would familiarise a user with the concept.

The colour scheme I am using is 3 colours selected using the adobe kuler site based on a starting colour of #3B8BF8. I then use white and black (and currently one shade in between) to produce the rest.

I will look to end with symbols. Your forum software has some features I personally don't use, such as locking threads and protecting subforums, that I might need to indicate visually somehow. My next "day" working on this will be to style the list items, the submit button and the footer. After that I will either move onto icons, or make a start on the other pages.

Today's screenshot:

https://dl.dropbox.com/u/2477024/metro-screenshot-08.08.12.png

append delete #3. Kroc

Looking good. Just watch out for your colour theory. Try not apply your colours randomly. Ask yourself:

* In what way does the brown used for the breadcrumb relate to the brown used for the thread list? What is your theory here? Why would the sub-forum list therefore be blue? (shouldn’t the sub-forum list relate to the breadcrumb better, since they are directly linked?)

* In what way does the use of blue define the purpose of the colour? What is the difference between the blue highlighted buttons and the title bar?

* The use of grey-on-yellow does not reflect the use of colour matching elsewhere. Perhaps the text boxes could just be an outline when unfocused, and get a colour when focused (or vice-versa)

append delete #4. Ben

So, the colour scheme I'm currently on is:

Stable colour for the header: #1856AB
Colours designating user location (directory or thread)
- Directory (forum/subforum): #3B8BF8
- Thread: #AB7307
Areas of user input: #F8B73B

Components such as the breadcrumb colour and the colour of the left buttons is dependent on whether you are browsing the forum/subforums or if you are in a thread, as does the colour of the "New Thread"/"Reply" bar at the bottom (above the user input).

Unfortunately I've only had time to fiddle with the colours today, but still, progress of a sort and you are absolutely right, Kroc -- I hadn't taken the time to think sensibly about what I was meaning with the colours.

https://dl.dropbox.com/u/2477024/metro-screenshot-09.08.12.png

append delete #5. Ben

Had a two week period or so where I was horrendously busy. However, I am back in action! I've now mostly finished my index page. I have a few "responsive" tweaks to make and then it's done. Now to apply the same format to the other pages.

I also changed my colours to make it less garish, but otherwise the principles are mostly the same.

Where I'm at so far:

https://dl.dropbox.com/u/2477024/metro-screenshot-25.08.12.png

append delete #6. Ben

I haven't had a huge amount of time to work on this (despite starting early), hence the lateness of the entry. I've also taken this project as an opportunity to learn a bit of LESS syntax (the LESS source files are included in the project download).

I have to say, I have a lot more respect for web designers having done this. I am more of a logic/code guy, and trying to produce a coherent, sensible design without ripping off too many other message board formats was a challenge. There are some components I am not too happy with (such as the footer and the submit buttons), and some of the post/reply markup could be prettier. However, all in all I'm pretty happy with it as a first attempt.

A zip file of the theme has been appended to my first post and can also be downloaded here:

https://dl.dropbox.com/u/2477024/metro.zip

Ben added on

Should also add, I had intended the site to be responsive, and it mostly is. However, at phone sizes the layout has overlapping elements from my floats (should really make them non-floating block elements at those sizes) and my footer becomes wider than the screen. I think it's something to do with padding and not using a box-model layout.

append delete #7. dylan

Is this alowed to be used and downloaded?

append delete #8. Ben

Oops -- I didn't include a license. The css file is automatically generated by SimpLESS and I forgot to pop it in (sorry). I have updated the dropbox file to make the theme.css include the license text. It's still Creative Commons and I don't care about personal recognition. You can remove my name from anywhere it appears and do whatever you like with the metro code.

Use, abuse and, if you produce something you think is particularly neat, please post it on here (or not -- whichever you prefer) :-)

append delete #9. pekman

Update Theme?

append delete #10. Neon

Link is broken

append delete #11. Ben

“Link is broken”

Yes, it is. Turns out dropbox was not the best way to maintain stable URLs over four and a half years. I no longer have these files, so this thread can be considered redundant.

Reply

(Leave this as-is, it’s a trap!)

There is no need to “register”, just enter the same name + password of your choice every time.

Pro tip: Use markup to add links, quotes and more.

Your friendly neighbourhood moderators: Kroc, Impressed, Martijn