Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Layout and design #16

Closed
crazedpsyc opened this Issue · 32 comments

6 participants

@crazedpsyc

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

@flaming-toast

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

@crazedpsyc

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

@flaming-toast

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

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.

@flaming-toast

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

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

@nospampleasemam
Collaborator

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.

@flaming-toast

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?

test2

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

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.

@flaming-toast

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.

huzzahhhhhh

Moar color.
w00t

@crazedpsyc

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.

@flaming-toast

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

since forums get many threads:

Test
Format: Test

@flaming-toast

Good idea, thanks for the suggestion.

I was following the format and layout in the current duck.co 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

Welcome :)

How about 16x16 icons for threads,

like this one for locked threads:

Locked thread

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

@nospampleasemam
Collaborator

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

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

Agreed man,
added search too
using suggestions:

v2

@flaming-toast

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

how about these ones:

http://www.webalys.com/design-interface-application-framework.php

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

@flaming-toast

Ooh, do you mean this icon set?
http://www.webalys.com/minicons/icons-free-pack.php

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

@sogen

If you like that set let me know and I'll color 'em :+1:

@flaming-toast

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

WIP:

Test

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

Moar WIP:

Test

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

@nickl-

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

Well done!!! =)

@sogen
@Getty

huhuuhhuuuh thats cool

@flaming-toast

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

@sogen

Moar WIP:

Test

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

04:

04

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!

@flaming-toast

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

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

@Getty Getty closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.