SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 57
  1. #1
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    bbPress theme project: Design - wireframe/UI

    Welcome to the intial phase of the official SitePoint bbPress theme development project.

    For this initial stage of the development, we need to make some decisions about the overall UI (User Interface) and build a basic wireframe design. Once we have completed this stage, the graphic designers and CSS coders will be able to start their respective parts of the project.


    Unlike most bbPress themes, ours will incorporate some functionality which has previously only been available as plugins, such as forum signatures, BB code buttons, report post buttons, resolved/unresolved buttons, members online display, smilies buttons, forum polls and forum stats. The UI/wireframe will need to encompass these extra 'non-standard' features.


    If you have any opinions on how the theme should be laid out and how the UI should work, please post your comments below. If you would like to demonstrate something, feel free to post an image for us to see what you mean. Explaining things in words may be difficult, and as the saying goes "a picture paints a thousand words"! Once we have a good idea of where the basic features on the page will be we will prepare a crude wireframe HTML/CSS mock-up to demonstrate+test the functionality of the design.


    Some of the factors we need to incorporate into the wireframe are:
    • How wide? Fixed width, flexy width?
    • Do we want a sidebar containing bbPress tags like in Kakumei?
    • Gravatar on the left hand side or the right hand side of the posts?
    • Where should forum signatures be? Underneath the gravatar? Underneath the post? Somewhere entirely different?
    • Where the should the forum stats be displayed?
    • Where should the search box be displayed?
    • Should we have a forum "jumpbox"? If so, where should it/they be?
    • Where should the breadcrumbs/linktree(s) be?
    • Where should the forum menu(s) be? And should we even have a forum menu?
    • Where should the login box be?




    To help with inspiration, here are some links to various forum theme galleries:
    bbPress themes
    SMF themes
    Vanilla themes
    vBulletin themes
    MyBB themes
    phpBB themes


    We are keen to get as much feedback as possible. Once all of your feedback has been collated and processed by SitePoint staff we'll be back with another exciting post detailing any decisions made, decisions yet to made and hopefully information about the next stage in this exciting project.
    Last edited by ryanhellyer; Aug 2, 2009 at 00:17.

  2. #2
    whagwan? silver trophybronze trophy akritic's Avatar
    Join Date
    Nov 2006
    Posts
    2,780
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Cool can't wait to get involved in this one. Should be some interesting thoughts shared about how a forum should function. This is probably going to be a major factor in how the design and UI is decided upon, but I'm all up for unconventional so long as it makes good sense.


    I think in regard to the first bulleted point that the width should probably be fixed at a certain width, but could perhaps be allowed to contract to fit with 800x600 sized monitors. This is especially important for the design of a forum, since you can't tell where or by whom they will be deployed.

    Well that's just my thoughts so far.

  3. #3
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by armchaircritic View Post
    This is especially important for the design of a forum, since you can't tell where or by whom they will be deployed.
    I think for this reason it should be a fluid layout. As far as layout and design go, I think it should be made to look as much like real forum software (like vBulletin®) as possible.

    * How wide? Fixed width, flexy width? 100%/Fluid
    * Do we want a sidebar containing bbPress tags like in Kakumei? No, at the bottom above the stats
    * Gravatar on the left hand side or the right hand side of the posts? Left
    * Where should forum signatures be? Underneath the gravatar? Underneath the post? Somewhere entirely different? Underneath the post?
    * Where the should the forum stats be displayed? Bottom
    * Where should the search box be displayed? Top right
    * Should we have a forum "jumpbox"? If so, where should it/they be? Indifferent personally, as I never use them but others might so I am flexible. Bottom right
    * Where should the linktree(s) be? Not sure what the link trees are?
    * Where should the forum menu(s) be? Again

    Just my 2 cents!

  4. #4
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BPartch View Post
    vBulletin
    Heh, nice touch with the subscripted symbol!

    Quote Originally Posted by BPartch View Post
    I think for this reason it should be a fluid layout. As far as layout and design go, I think it should be made to look as much like real forum software (like vBulletin) as possible.
    Personally I'm of the opinion that forum softwares have matured to a point where the rough optimal layout has already been decided. Thousands of people have had a crack at forum layouts, and the most popular by far are the stereotypical layouts such as here at SitePoint.com.

    Quote Originally Posted by BPartch View Post
    * How wide? Fixed width, flexy width? 100%/Fluid
    How about fluid, but with maximum and minimum widths? Actually a minimum width would almost definitely be required as the design would break eventually once I dropped to something extreme like 400px or so.

    Quote Originally Posted by BPartch View Post
    * Do we want a sidebar containing bbPress tags like in Kakumei? No, at the bottom above the stats
    Ohh, good idea, I like that. That pushes them below the fold, but still leaves them in position to be of use to those who want to use them.

    Quote Originally Posted by BPartch View Post
    * Gravatar on the left hand side or the right hand side of the posts? Left
    Yep, I think the right hand side would be a little weird.

    Incidentally, we could easily add an option somewhere in the admin panel to flip it to other side if required. This would make the theme a little more user friendly for those wanting to make drastic changes such as that, or even allow their own users to change it themselves depending on their preference. But by default, I think it should be set to left.

    Quote Originally Posted by BPartch View Post
    * Where should forum signatures be? Underneath the gravatar? Underneath the post? Somewhere entirely different? Underneath the post?
    The only area in which I would drastically veer away from a stereotypical layout would be to make the signature area less prominent. Big fat forum signatures are useful at places like here at SitePoint.com, but most forums are not geared for web developers and so the signatures are usually just used for a simple catch phrase rather than for an extensive list of interesting links.

    This is also something we could provide a switch for in the admin panel, but by default I think having it as a small section below the gravatar would be best. I suspect most people will disagree with me on this. Signatures are almost always below the post so it's what people are used to I suppose. Or maybe it's better for some reason perhaps ...

    Quote Originally Posted by BPartch View Post
    * Where the should the forum stats be displayed? Bottom
    I also say bottom, but only on the main forum index. I don't think they need to be displayed on every page.

    Quote Originally Posted by BPartch View Post
    * Where should the search box be displayed? Top right
    In the header? Or in some sort of navigation menu?

    Quote Originally Posted by BPartch View Post
    * Should we have a forum "jumpbox"? If so, where should it/they be? Indifferent personally, as I never use them but others might so I am flexible. Bottom right
    Yeah, I don't tend to use them either. I stripped them out of a forum once, but I was bombed with PM's from grumpy forum users complaining that the forum was broken and they could no longer switch between forums anymore. So it seems that for some people, they are the only way they know to change forums.

    Some forums add two of them, one above the content and one below. Since I never use them I'd go for one below the content. It does provide a convenient navigation point at the bottom of the page so that users don't need to scroll back to the top whereas it seems kinda redundant at the top if there is a linktree there.

    Quote Originally Posted by BPartch View Post
    * Where should the linktree(s) be? Not sure what the link trees are?
    If you look a the top of this forum topic, there is a series of links which say "SitePoint Forums > Forum Index > Design Your Site > Web Page Design". Those are the link tree.

    I think it would be well situated below the main menu (if there is one) above the main chunk of content.

    Quote Originally Posted by BPartch View Post
    * Where should the forum menu(s) be? Again
    If you look at the top of this page again, there is a series of links in a big blue bar which say "Home Articles Books Kits Videos Blogs Contests Marketplace Forums Reference". There is also another menu below the linktree which says "SitePoint Forums > Forum Index > Design Your Site > Web Page Design > bbPress theme project: Design - wireframe/UI".

    vBulletin is much more feature rich (bloated?) than bbPress and so has a lot more stuff to stick in a menu. SitePoint.com also has a lot more than just a forum on it which also adds to the amount of stuff the need in their navigation.

    So I suspect we'd only need one menu for the bbPress theme. I'd place it below the main header but above the linktree.

    Quote Originally Posted by BPartch View Post
    Just my 2 cents!
    Thanks for the two cents

  5. #5
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please excuse the crudity of the diagram, but here is a very basic mockup of what I had in mind.


    I was assuming that the jump boxes, tags, stats etc. would not be displayed on the thread pages and that stats would only be displayed on the main forum index.

  6. #6
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ryanhellyer View Post
    Heh, nice touch with the subscripted symbol!
    I just copied it from the bottom of the page and it appeared there.
    Quote Originally Posted by ryanhellyer View Post
    Personally I'm of the opinion that forum softwares have matured to a point where the rough optimal layout has already been decided. Thousands of people have had a crack at forum layouts, and the most popular by far are the stereotypical layouts such as here at SitePoint.com.
    That's what I meant, make it look like a regular forum.
    Quote Originally Posted by ryanhellyer View Post
    How about fluid, but with maximum and minimum widths? Actually a minimum width would almost definitely be required as the design would break eventually once I dropped to something extreme like 400px or so.
    I meant it should take up the entire view port and be flexible, like SP is.
    Quote Originally Posted by ryanhellyer View Post
    I also say bottom, but only on the main forum index. I don't think they need to be displayed on every page.
    Agreed!
    Quote Originally Posted by ryanhellyer View Post
    In the header? Or in some sort of navigation menu?
    The webpage, like SP has it.
    Quote Originally Posted by ryanhellyer View Post
    If you look a the top of this forum topic, there is a series of links which say "SitePoint Forums > Forum Index > Design Your Site > Web Page Design". Those are the link tree.
    Oh the breadcrumb!
    Quote Originally Posted by ryanhellyer View Post
    I think it would be well situated below the main menu (if there is one) above the main chunk of content.
    Agreed
    Quote Originally Posted by ryanhellyer View Post
    If you look at the top of this page again, there is a series of links in a big blue bar which say "Home Articles Books Kits Videos Blogs Contests Marketplace Forums Reference". There is also another menu below the linktree which says "SitePoint Forums > Forum Index > Design Your Site > Web Page Design > bbPress theme project: Design - wireframe/UI".
    I do know what a menu is I did not see one on the default bbPress template and that is what I was using as a reference to design a layout for it.
    Quote Originally Posted by ryanhellyer View Post
    Thanks for the two cents
    Have 2 more...

  7. #7
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ryanhellyer View Post
    Please excuse the crudity of the diagram, but here is a very basic mockup of what I had in mind.
    Crude? I like it, especially the avatar, it bears a striking resemblance to me?

    No seriously, I like it, Does the sig wrap under the avatar in your vision or stretch out under the post area?

  8. #8
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The signature would wrap under the gravatar area.

    A potential hiccup to this layout is that very short posts do leave a larger area of white space under the posts themselves. I use a variant of this style of layout on my support forum and haven't noticed that being a problem, however my forum also has a fairly skinny fixed width setup so that effect wouldn't be as noticeable in comparison to a fluid width design.

  9. #9
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BPartch View Post
    I meant it should take up the entire view port and be flexible, like SP is.
    How do you feel about the layout becoming overly stretched at very wide browser widths? Or do you think that users who open their browsers that wide should have the option to view the site super wide if they choose to? I've always tended to put a maximum width in (say 1600px) to stop the design from looking weird when the window is expanded too far, I'm undecided as to whether that is a good idea or not.

    Quote Originally Posted by BPartch View Post
    The webpage, like SP has it.
    SitePoint has two, one in the header and one in the skinny sub-menu below the linktree/breadcrumbs. Since bbPress is quite a small software, the theme isn't likely to have too much stuff to place in the menu, so there is likely to be room to fit a search box in there (like this), or it could be placed into the header like the big search box in the top right of the header here on SitePoint.

    Quote Originally Posted by BPartch View Post
    Oh the breadcrumb!
    Oh yeah, I forgot that's what people tend to call them. I'm too used to digging into SMF themes which refer to it as a "linktree".

    Quote Originally Posted by BPartch View Post
    I do know what a menu is I did not see one on the default bbPress template and that is what I was using as a reference to design a layout for it.
    Good point, it hadn't occured to me that bbPress doesn't have a menu by default. In that case I'll add that to the list of questions in the original post as we'll need to decide if we need one of them two (I think it's a good idea).



    I'm also wondering about the login/logout box now too. Perhaps something like the login box used on GetShopped could be used? Or would a more typical setup with a login box in the header or below the menu be more suitable? Any opinions?

  10. #10
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BPartch View Post
    Crude? I like it, especially the avatar, it bears a striking resemblance to me?
    I was thinking of you when I drew it



    Here's an actual mockup made in HTML/CSS (only tested in Chrome):
    http://bbtheme.net/ryan/wireframe/display.html

    Note: this is a crude demo of a potential wireframe, NOT a suggestion for the final look or HTML/CSS (someone is bound to get confused )

  11. #11
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any feedback on my crude wireframe mockup so far? Don't be shy! The more criticism the better.

    I actually forgot to add a menu to it which is kinda stupid considering that is what I was suggesting! If there aren't any criticisms of what I've posted so far I'll start polishing it up a little bit and maybe create a few more templates to show how other types of pages could function.

  12. #12
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Other than the position of the signature (which i like better below the post content) i think it looks fine.

  13. #13
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    • How wide? Fixed width, flexy width?

    In my opinion it should be a fluid width, just like on Sitepoint.

    • Do we want a sidebar containing bbPress tags like in Kakumei?

    Personally, I'd prefer them on the right side or below the fold instead of the left .

    • Gravatar on the left hand side or the right hand side of the posts?

    On the left.

    • Where should forum signatures be? Underneath the gravatar?

    Below a user's post. The signatures can become long, so I don't think it's a good idea to have them under the avatar.


    • Where the should the forum stats be displayed?

    Below the fold (footer area).

    • Where should the search box be displayed?

    Above the fold. Perhaps just above the content but below the top navigation.

    • Should we have a forum "jumpbox"? If so, where should it/they be?

    I don't know how many people use this function. I never use it, but that isn't exactly telling.

    • Where should the breadcrumbs/linktree(s) be?

    They should be on the left side, below the masthead and the search would do well being on the right (so breadcrumbs on the left, nav on the right and below the main nav).



    • Where should the forum menu(s) be? And should we even have a forum menu?

    I see the question was asked but the example you gave was the breadcrumb? If you mean forum menu such as My Sitepoint Newsletter FAQ, then I think they should be at the top.

    • Where should the login box be?

    At the very top.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  14. #14
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ryanhellyer View Post
    Please excuse the crudity of the diagram, but here is a very basic mockup of what I had in mind.


    I was assuming that the jump boxes, tags, stats etc. would not be displayed on the thread pages and that stats would only be displayed on the main forum index.
    I like this. Would you like me to code that up for you ryan?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  15. #15
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    I like this. Would you like me to code that up for you ryan?
    I've already mocked most of it up in HTML/CSS already.
    http://bbtheme.net/ryan/wireframe/display.html

    There will also be a separate HTML/CSS phase to the project, at that point Dan Schulz will be leading the development of the markup and CSS side of things so anything done at this stage is really just for demo'ing so that we can see how everything works.

  16. #16
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by ryanhellyer View Post
    I've already mocked most of it up in HTML/CSS already.
    http://bbtheme.net/ryan/wireframe/display.html

    There will also be a separate HTML/CSS phase to the project, at that point Dan Schulz will be leading the development of the markup and CSS side of things so anything done at this stage is really just for demo'ing so that we can see how everything works.
    Very nicely, structured and presentated with CSS.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  17. #17
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    New mockup wireframe with some of the features/changes suggested above:

    http://bbtheme.net/ryan/wireframe/display2.html

  18. #18
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And another new mockup. I've changed a few minor things in this one include the position of the "edit" buttons.

  19. #19
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Very nice!

    The tags on the right. What are these? Are these for thread tools or content tags?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  20. #20
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Very nice!

    The tags on the right. What are these? Are these for thread tools or content tags?
    They're content tags. Basically you can tag a post with a label. SitePoint has a similar system but it's not as "built in" as the system in bbPress is. Most bbPress themes seem to come with a tag cloud for users to track down particular posts of interest, they're often useful for support forums.

  21. #21
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They may be better off down the bottom of the page rather than at the top possibly. They're not something most people tend to use anyway.

  22. #22
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ryanhellyer View Post
    They're content tags. Basically you can tag a post with a label. SitePoint has a similar system but it's not as "built in" as the system in bbPress is. Most bbPress themes seem to come with a tag cloud for users to track down particular posts of interest, they're often useful for support forums.
    Ah, okay. Thanks for clarifying.

    Anyway, I've put together a rough composition. Lots of things misisng, but perhaps it's of some use to explain what I meant.

    Maleika E. A. | Rockatee | Twitter | Dribbble



  23. #23
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh, that looks pretty good actually

    What do you guys think of the tags though? Do we need them in a big block like that? I rarely (in fact never) use them so have never seen the point in having them on most sites apart from things like support forums. Perhaps they would be better of near the bottom where the stats block is sitting at the moment?

    Your idea of moving the menu to the top is an interesting one. My demo has the menu sitting in quite a prominent position, but in reality the menu of a forum is rarely a particularly important part of the site since the most important content is within the forum itself and not in the menu.

  24. #24
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    When I want to do the most common operations, such as logging in or out, or viewing my profile, I look at the top, hence why I placed the main menu there. But it's certainly subject to debate.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  25. #25
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hope the project (very cool, btw) will think REAL hard about optimizing the CSS for mobile devices. Agree with those who say, Well, forum look-and-feel is pretty much what people are used to now -- don't tamper with it too much. But not enough thought (IMO) has gone into making this look-and-feel right for those tiny little screens.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •