HOME | DD
electricnet โ dA groups mockup
Published: 2008-08-26 23:28:01 +0000 UTC; Views: 6516; Favourites: 42; Downloads: 144
Redirect to original
Description
So hey, ze admins were asking for ideas and opinions on how the forthcoming groups system should be built, and they also asked for mockups, and so I felt inspired to make one! I've used a couple of hours perfecting this one, and I'll describe the decisions I took here.Imagine this being a screenshot from the future of a page at groups.deviantart.com/bokeh-lovers.
The large problem I had with this mockup process was that I didn't want to have users confuse groups with ordinary user accounts. But why would they do that, you ask? Well, groups still has to have an avatar and a page, just like an ordinary user, and if those things look identical to ordinary user's avatars and userpages, who are to tell the difference? For the avatar problem, I solved this by slapping a little "GROUP" label onto group avatars, as seen in the top left. For the page, I thought that going for the same two-column layout as seen on userpages would exactly cause the problem: It looks too much like a userpage. Additionally, many people search for many different kinds of informations on a group page, and thus I decided to add another column, and thus it was made a three-column system. The downside to this, of course, is that it looks a bit complicated at first, but I still hope it looks intuitive. Another downside is it being difficult at low screen resolutions. (Perhaps a JS could be done which makes it a good ol' two column layout again at sub-1024x768 resolutions.) A consequence of this is also that on this screenshot, there was only space for 1 column of "recent submissions", but I imagine that on wider resolutions, this would adapt and it would be back to more columns. However, this setup allows the user to see most things at a glance without even scrolling. Notice how short the page is; that is definitely an advantage.
Anyways, tl;dr, I will stop blabbering here. I hope the decisions I took can be seen in the image itself, but if you have any questions, then please shoot. :D
Oh, and click Download to see the mockup in 1:1 resolution!
Related content
Comments: 44
really awesome one !! i wish i would have this !
๐: 0 โฉ: 0
I do think a chat tab would be nice though - a lot of groups have chats associated with them and this would make it more obvious
๐: 0 โฉ: 0
to fix the columns problem, maybe put the ID on the left side, as ยขmindfuckx said, and place the Forum underneath the journal and "past news".
It's a VERY basic solution...
Also, maybe having the information sectioned off like our user pages are, but include the "ID" in the information, so that it's entirely different from how we would integrate IDs on our pages.
Just a suggestion, because you totally have the best idea so far.
๐: 0 โฉ: 0
Now this I love! Very very very cool and easy to navigate!
๐: 0 โฉ: 0
This is really really nice. Very organized and shows all the important stuff on the main page. Nice!
๐: 0 โฉ: 0
This beat my mockup D:
Still incredible though, I love every part of it!
๐: 0 โฉ: 0
One thing - the label on the avatar would probably break some things - it wouldn't fit in the bar to the left of this comment, for example, unless comments and forum posts are disabled for club accounts
๐: 0 โฉ: 0
Wow, wow, wow, wow and wow!
I wish I had an in-depth feedback comment like ยขmindfuckx , but everything about this is wonderful!
I will disagree with him, however, on the basis that I don't think it looks cramped. That might be my obsessively large Mac "cinema-screen" resolution, though.
๐: 0 โฉ: 0
I like it, and I echo everyone elses comments.
๐: 0 โฉ: 0
I likey
But like ยขmindfuckx pointed out, I don't like the cramped up look (ie. 3 column structure). Other than that I think this is a great mockup
๐: 0 โฉ: 0
Good mock-up, I like your thoughts.. or at least some of them:
I love the groups-label, I love the little extra features you added ( join button f.ex ) and the attention to detail.
I don't like the 3-column layout, I understand it's to set clubpages apart from userpages, but these columns will just be too damn narrow at a 1024x768 resolution. You really need to another system to make those clubpages look different.
What about changing the order of the modules ?
Having members on the top left and ID on the top right will give the page a totally new ( and groups-focused ) look and feel.
Or perhaps 1 wide column and 1 small column/sidebar.
I also don't like the fact that you went with the old userpage style, just because I would love to see what you come up with.
Oh, it needs "devious comments" as well... interaction is one of the key aspects in groups, so we really need those comments..
๐: 0 โฉ: 1
Thanks for the great comment!
My other problem in relation to the columns was that I felt both art (because it's an art site), news (because people go there to get updates) and info (because people go there to read about it) is equally very important, and I just couldn't get myself to push any of them down. But you're right, a three-column layout isn't so practical on lower resolutions, but would actually work perfect on larger ones. This is also why I think that there may be some sort of JS way of reorganizing them into two columns when at a low resolution, since three-column looks really great, as long as you have the resolution for it. I'm not usually taking the JS way, but JS is already used a-plenty around here, so why not here, too?
But, I agree, there are lots of other things one could do to hinder it from looking like a user page, and your ideas are certainly good too.
Also, why not the user page style? I could easily have designed something that was totally different, but I didn't do it because it would be inconsistent with the rest of the site. And I think consistency is kinda important.
And, interaction? Groups already have both forums and chats, not to mention news comments, and in my opinion it makes it more organized to rely on these, and it's kinda important to be organized when it's a huge group. 
๐: 0 โฉ: 1
I think using JS to reorganize the layout on "lower" resolution is a pretty half-assed solution. I mean, you split the layout into 3 columns to diversify it from the userpages, but on lower resolutions you undo your solution.. making the clubpages look similar to userpages again. I think you really need a solution that works on all resolutions.
( not to mention the problems this JS-solution will cause when resizing your browser window 
I know you kept the same style for consistency's sake but my point is:
those userpages desperately need to be restyled too, so why not kill 2 birds with 1 stone here ?
๐: 0 โฉ: 1
Yeah, I know, it's not the best solution I've ever devised. The best solution is indeed to go with the two-column layout all the way. I just really liked the three-column look. 
But, you're right, it could still be different even though it's two-columned. I have a couple of ideas, I just don't have time to image them at this point in time.
And, I would've tried to redesign the user page too, but that wasn't the point of this mockup.
๐: 0 โฉ: 0
I wonder how long before that name gets snapped up!
๐: 0 โฉ: 0
Group tag on avatar, 3 column layout and general look and feel? All great.
You fer staff? I think so (: You have done their job for them on this one
๐: 0 โฉ: 0
lmao "I can't find my camera! by *wtf"
Looks good! I'd love to see your idea for an "admin panel" of sorts for the groups thing, assuming there will be one :B
๐: 0 โฉ: 0
Pretty awesome!
'cept I would stick with a 2 column layout (because I ran into trouble with screen-width when I coded a 2 column journal a while ago)... Left the devID block, below all the art. Right journal/news, and forum. And below that, a comments block similar to the userpage. I'd also have a small spot for some stats on top of it all (again, similar to current userpages, and probably not in the devID block) and more links, like a +watch link (yep, I'd like having the possibility to watch a group without being a member there).
But in general, looks solid!
Oh, and I almost didn't notice: the GROUP tag next to the avatar is a sweet idea! Still, there is a need for a user symbol IMHO as well, but that's small potatoes
๐: 0 โฉ: 1
I still don't want to have people confuse a group too much with a user though, and that is also why I think a group should never have a user symbol, as it is not a user in any way. The way groups should work optimally, is that they should not be something you log into as with a user. It is bad for a couple of reasons; it's insecure because you share a single password that grants access to every part of the group account, but first and foremost, the worst thing is that you have to log out of your own user and log all the way back in with the new one and vice versa when you're done. It's not exactly something that encourage users to update their groups with content, as they really deserve to be.
I think optimally that a group should really just be like a chatroom on dAmn; it's not a user, but it's a gathering of users with different privileges. That's why I think a group should not have a user symbol, as it's in no way a user.
Thanks for the great comment!
๐: 0 โฉ: 1
Oh yes, I get your point, and it all makes sense. And I totally agree on the not-log-out-and-back-in part - you definitely should be able to manage your group as admin `electricnet (or whoever the/a admin is).
But concerning "user" symbols, well, dAmn rooms have them (#devart e.g.), so why not groups as well? Course we would need one that is instantly recognizable. But this shouldn't be a problem
๐: 0 โฉ: 0
Totally awesome!
Now I wish I was around for the party feature dA used to have.
๐: 0 โฉ: 0
I don't know, it seems too similar to SheezyArt's club system. 
It looks pretty good other than that.
๐: 0 โฉ: 1
To be honest I've never seen that thing before.
๐: 0 โฉ: 1
No, certainly not entirely the same. If you've never seen it then it's just coincidence
๐: 0 โฉ: 0
For the second time.
I love your mock-ups. They're just great.
๐: 0 โฉ: 0
