Layout and design #16

crazedpsyc opened this Issue Sep 28, 2012 · 32 comments


None yet
6 participants

crazedpsyc commented Sep 28, 2012

The forum is in need of a good design -- mockups and code appreciated!

Hummm.....Got any ideas in particular? Color scheme? Should it stay consistent with the base layout (i.e., keeping the green bar on top xD)?


crazedpsyc commented Sep 30, 2012

It should definitely stick with the base layout/design. Other than that, I have nothing. simple, and not too obnoxiously shiny ;-)

Ok. : ) First shot at a design: Clean, simple, minimalistic.

first design

I changed the header because I felt like the red icon clashed with the green header, but if you feel differently feel free to ignore those changes. I don't have (human-readable) code available yet.

In addition, I was going to add some sort of fade hover effect over each thread (probably have a box appear around it or change the background color)

Any comments and/or suggestions? :D


crazedpsyc commented Sep 30, 2012

Awesome! The font is a bit odd, but overall I like it. My only suggestion would be a more prominent "new thread" link, it sort of blends in too well there.

Hehe. Which font/section of text are you referring to? Or the whole body? Perhaps I should use a more generic font like Arial...Thoughts?

I experimented with a lot of different fonts (gah, they're so hard to choose). I'll probably play around with them and post more screenshots later.

EDIT: mega typos.


crazedpsyc commented Sep 30, 2012

All of it is tall. Very tall. Unnaturally tall. ;-)


majuscule commented Sep 30, 2012

I like it too! One thing is something about the navigation bar feels a little off to me, like it's weighted a little too lightly, or maybe just needs a little more margin on top. But I don't really know. It feels clean which I like. I do agree with @crazedpsyc about the font as well though. Maybe we should use the same font as our logo? My instinct would be to use the font from our official duckduckgo logo, at least for the DuckDuckGo in the header, and then a different font for the "community platform" text which would set the style for the design.

Thanks for your comments :D
@crazedpsyc Alright, not-so-tall fonts for the thread titles (I really like narrow fonts for some reason....) Or maybe the font is still too tall?


Not sure how to make the "New Thread" link stand out. I think I'll make it into a button and put it below the nav bar.

As for the header, I agree that the official logo font should be used. I wasn't sure what the exact font was, so I just picked something that looks similar. The skinniness of the "community platform" font started bothering me, so I changed that as well.

EDIT: Will also change the fonts in the top-right corner (username/account/logout) to non-narrow fonts, I forgot to do that for this screenshot :P


crazedpsyc commented Oct 1, 2012

That font looks good to me. In a way I agree with you on the header logo, the red/green is a big contrast, but let's leave that for now. I believe there will be some internal discussion on that today, so we'll see.

Humm.....Just playing around with some more ideas...Made the content layout a tad bit more similar to how things are laid out on the current forum.


Moar color.


crazedpsyc commented Oct 29, 2012

Hups, I thought I replied to this. @flaming-toast the last design with the blue is just awesome, and I think we will go with that.

Awesome. :P I'm still open to taking more suggestions, if anymore ideas come up. Working on the actual code now; will send a pull request when ready.

sogen commented Nov 13, 2012

since forums get many threads:

Format: Test

Good idea, thanks for the suggestion.

I was following the format and layout in the current forum (ie, the user's avatar next to thread name), and the size of the avatar (50x50) didn't seem to be an issue. I do think I will make the avatars in each thread smaller though, and I'll play around with the spacing/padding.

sogen commented Nov 15, 2012

Welcome :)

How about 16x16 icons for threads,

like this one for locked threads:

Locked thread

Oops, looks like crap, anyway, I'll better it.


majuscule commented Nov 15, 2012

Wow that layout looks fantastic! The "Replies", "Started by", "Last post" and "today" font looks... strange though? Also, with the tabular data below it, might it look better with the buttons above (new thread, search, etc) spaced out to fill the bar?

sogen commented Nov 15, 2012

I used a different font since I don't know what font was used.

Agreed man,
added search too
using suggestions:


I still need a decent icon set (I've just been using stock ones I've found on the internet), any suggestions?
Specifically, a good icon for announcements and one for sticky posts.

sogen commented Nov 15, 2012

how about these ones:

Let me know if you need them in a specific pixel size (i.e. 16x16px)

Ooh, do you mean this icon set?

They do look nice by themselves, but they're all grayscale; maybe colored icons would look better on the page?

sogen commented Nov 15, 2012

If you like that set let me know and I'll color 'em 👍

Hm, before coloring, perhaps it would be helpful if we could put some icons in the mockup (i.e., next to each announcement, sticky post, thread, etc), to see how it looks on the page first.

sogen commented Nov 17, 2012



I added a Trending Topics bar since the purpose of a forum many times is to provide answers, for example if there's a bug, many people will search for something like this in the forum, to provide an answer to something happening currently.
(Parenthesis: maybe could list trending #DDG topics from Twitter too?)

Also, highlighted the sticky, because it makes it easier to get noticed.

Also thigtened the window, taking advantage of the header,

And made it list the current subforum the user currently is, and a link to the Main forum.
Explanation: Some users will drive to a Suggestions/Ideas forum, others to Developement forum (maybe make this a closed forum?), others will go to a General Off-Topic forum, etc.

sogen commented Nov 17, 2012

Moar WIP:


took some text out, I'll add it back on next update.

nickl- commented Nov 18, 2012

Wow! Now that's starting to look like something...

Well done!!! =)

sogen commented Nov 19, 2012

Thkx :)

Posting another mockup in a couple minutes

On Sun, Nov 18, 2012 at 4:01 PM, Nick Lombard notifications@github.comwrote:

Wow! Now that's starting to look like something...

Well done!!! =)

Reply to this email directly or view it on GitHub


Getty commented Nov 19, 2012

huhuuhhuuuh thats cool

Suggestion: I think the right column with the announcements and stickies should be given a bit more room : ) Seems kind of squished.

sogen commented Nov 19, 2012

Moar WIP:


Moved everything to a grid, liked the idea, but not liking the colors in this one a lot,
looks way too serious...

There's a blank space in there, it'll be for pagination and forum tools

@flaming-toast: The sidebar could have more space,
thinking... thinking...

sogen commented Nov 20, 2012



Maybe take all the sidebars out and move them to the front page?
(i.e before entering a particular forum. Why? because many people are sometimes looking for a solution to a particular issue/problem/question)

Commentos appreciatedos!

Hmm....I'm used to having the stickies and announcements on the side though :P
We could move them to a separate page...but let's first try shortening the thread titles a tiny bit and add like 30px-50px to the sidebars, what will that look like?


Getty commented Sep 4, 2013

Hey... aehm we are now in phase 1 before softlaunch of the forum you can take a look at and test it :) (will get resetted on real launch). Thanks for all suggestions!

Getty closed this Sep 4, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment