Skip to:
Content
Pages
Categories
Search
Top
Bottom

Wireframe collections

  • Avatar of Tammie
    Tammie
    Moderator

    @karmatosed

    I’m starting this topic to collect all wireframes for this week then move onto bpdevel those wireframes for conversation.

Viewing 25 replies - 26 through 50 (of 60 total)
  • Avatar of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

    This group is most certainly the right title going forward. bp-default can easily refer to bp-default template files instead of theme. As in the default template files that ship.

    If I’m not mistaken 1.7 is all about theme compatability and if people install BP and the template files do not have some sort of base layout css people are going to delete delete delete because most if not all WP themes will not include the required css for basic structure.

    Avatar of @ubernaut
    @ubernaut
    Participant

    @ubernaut

    i’d have to agree with that. if you aren’t providing a default structure for buddypress content then what exactly is being provided for universal theme compatibility? am i mistaken in thinking if you actually took that approach the end result would just be a pile of unstyled text lines?

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    Read the posts again carefully? of course a basic style has to be provided., but theme compatibility does not mean somehow magically BP appears looking themed and styled it means that BP seamlessly works with any theme, it works as a templating system working to provide it’s functions via the WP processes rather than the custom files it required to date.

    And it isn’t a great group name for this as bp-default refers to a theme! However as karmatossed pointed out it was for want of a better place to start the thread.

    Avatar of Anton
    Anton
    Participant

    @nat0n

    If my sketches communicate any specific CSS code it was not intensional. Sure, putting things to the left of something other requires some CSS – you just have to imagine other kinds of positioning as well. It’s very hard to make sketches of something 100% CSS neutral. (It’s also very hard to deliver HTML code that don’t take some responsibility for the visual result, e.g. when adding and naming id’s and classes.)

    Avatar of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

    Back on topic ;) This thread is to post wireframes not discuss the merits of css or no css.

    @hnla with out templates files a theme is nada so calling the templates files that come with BuddyPress “bp-default template files” completely makes sense right now. When bp-default is moved out to the wp repo then yeah this forum should be used for that.

    Avatar of @ubernaut
    @ubernaut
    Participant

    @ubernaut

    ok heres my take on what the member page should look like it is essentially the same as what exists now but with the nav shifted to a vertical orientation. sorry for the patchwork appearance of the mockup, i do not own balsamic and the copy paste seemed faster then using something else anyway. the main difference from what has been mentioned before is the ability to turn on or off activity types by way of checks in the sub menu. i also think the option of stack organizing is desirable. i have used the basic structure from the wp admin for the vertical nav. i think this has a benefit to the end user who may already be familiar with wp admin (at least they have a better then average chance of being so). feel free to trash this idea unmercifully or tell me how much you love it that works too ;)

    https://creative.adobe.com/file/b4abf171-8951-44f5-9a45-5bc133857c22

    Avatar of @mercime
    @mercime
    Keymaster

    @mercime

    Nice ones @nat0n and @ubernaut. We’re kinda thinking in the same direction more or less :-)

    1. Allow for Horizontal OR Vertical Menus – for Member/Group navigation. Members navigation includes actions found in WP adminbar like Add New Post e.g., so that it would be easy for the member to create a new topic if adminbar is disabled. Other info in pink box in image attached.

    2. Allow Designer or Site Admin and/or Member to Add/Move components in Member’s Home Page. This can already be done if you know how. Hopefully make it easy for the all-important members to choose what to show in respective homepages.

    Avatar of Quint
    Quint
    Participant

    @qrahaman

    @mercime,

    Looks great! I would also add filtering for each of the appropriate components. So, for example, My Videos, My Albums or My Groups could include “favorited” or rated content which the member could filter by.

    Avatar of Tammie
    Tammie
    Moderator

    @karmatosed

    Great work all.

    @ubernaut: I do think perhaps we’ve still got the old problem with your layout of too much space for profile on the now normal larger theme sizes. I don’t feel the profile area should be limited like that myself.

    I’m not sold of the menu going over content like that to be honest either. Feels a little messier as a menu solution compared to say a tree / show / hide.

    @mercime: Interesting and some good ideas there in the mockups.

    I’m not totally sold on the break down or terminiology but that’s something can be discussed. Actions is a very developer term. Also you can do actions on friends, groups etc. Perhaps as said it’s more a how that is split. I’m also not sold after seeing it as a tree view on the navigation going across. It just feels a waste of space to me. Perhaps though we just need to have the option with a declaration somewhere of ‘horizontal/vertical’ for navigation like you I think are showing in the 2 different ones?

    I’m not sold either on the content area being so mixed grid myself (that could easily look quite odd with too many entires in any section) but as you say the designer can change that – we probably don’t want such a hectic grid layout as default. I think it being split up with Friends up top would be good. I feel having recent posts and recent activities like that is a little distracting to the eye. Perhaps even have that top area for Friends, Groups and then profile fields. That way you are splitting the ‘actions’ (posts, activities) with the personal inforamtion nicely. I’ll probably do a mock up later today to show what I”m saying better there. We also need to show the friend and other user action buttons somewhere – this could allow that.

    This default layout you have shown does tend to lean towards a rather large screen – it would be quite too dense on a small one. But, that’s something that can be explored.

    Albums / videos are great ‘if’ that site has that functionality. But, again this probably is a ‘space here for something’. I’d just wander what default should be.

    I like the idea of more tags/codes for people to use very much.

    Avatar of @ubernaut
    @ubernaut
    Participant

    @ubernaut

    @mercime i do also like the idea re-arrangable boxes but i think that was vetoed for being impractical.

    @karmatosed I don’t think i understand most of your comments about my mockup. when you say “the old problem with your layout of too much space for profile on the now normal larger theme sizes. I don’t feel the profile area should be limited like that myself.” I’m not sure what that is exactly are you referring to the one versus 3 column thing?

    and when you say that the flyout menus are messy do they feel messy on the backend to you now? To me they don’t.

    edit: i would say the addition of the check marks certainly adds some “mess” UI-wise though.

    Avatar of Tammie
    Tammie
    Moderator

    @karmatosed

    @ubernaut: I am referring to the large space you have in the profile header – it’s basically what there is now.

    I think what got ‘vetoed’ was more the drag and drop of widgets/sections. What I took @mercime to be saying was more a tag/shortcode approach. Of course, that’s just my take on things.

    As for messy – yes I feel they are messy but I’m not a fan of flyouts in general front of back end. Personally, I think making it look so close to back end of WordPress isn’t a benefit. I agree the check/ticks do not make sense UI either.

    Avatar of @ubernaut
    @ubernaut
    Participant

    @ubernaut

    ok thanks for clarifying. i do agree that in full width the profile header has a lot of air i think however that in many themes (boddypress.org included) there is so much info crammed in there I’m not sure how much smaller you could make it horizontally (maybe half width?). maybe that issue isn’t relevant to the default theme but that’s why i left it as full width. another semi related question for clarity’s sake, the plan is to make the default theme responsive is it not?

    regarding the flyouts i would tend to agree with you in general i do not like them and ideally your nav shouldn’t need them but if we are concerned about efficiency of space I’m not sure there’s a better way.

    check marks were just an idea i got from looking at your mockup with the stacked activity types which i think is good as an option. i do feel like there is some overlap/redundancy in the existing types selectable in the activity tab versus the filter menu available on the activity screen as well but maybe thats just a feeling. :P

    Avatar of Tammie
    Tammie
    Moderator

    @karmatosed

    @ubernaut : Checks works for filtering it’s in the menu context it seems a little less useful. Flyouts aren’t the only suggestion as @nat0n showed tree view is also a possibility.

    Avatar of @ubernaut
    @ubernaut
    Participant

    @ubernaut

    indeed, the trade off would be tidiness versus # of interaction steps. i suppose efficiency-wise they are basically the same and I’m sure tree is desirable for other reasons as well.

    Avatar of @mercime
    @mercime
    Keymaster

    @mercime

    @qrahaman thank you. My take is that the filters should appear on the component’s page but was not made clear because I forgot to add the “More ->” link. Check out the wireframe attached in this post.

    @karmatosed

    1. At the end of the day, a theme designer/author can already implement this navigation – horizontal or vertical, flyout nav or tree view – right now by making changes to the template files. What I’m after is not having to make too many and major revisions on the template files, hence “Allow for Horizontal or Vertical Navigation”

    2. Devs vetoing dragging of components for Member home page, that’s life. But what I also pointed out in image #2 above was the need/importance of template tags.and shortcodes.

    3. The implementation of #2 image I posted above works for pages with sidebar, I know it works. The layout was basically a different take to how the Member’s home page was done for BuddyPress 1.0.

    For a full-width Member’s Home page, I’d do something like the image below.

    4. As for grids – different strokes for different folks. I like them :-)

    Avatar of Tammie
    Tammie
    Moderator

    @karmatosed

    I’ve got a few mockups to add to the mix. The profile is a build on from what you did @mercime and the 3column is a build on from your suggestion @nat0n for menus. I have notes on each to hopefully explain a bit more things. You can click each to see the full image.

    I think having the toolbar indicate things like messages and comments could be good:

    This is a suggestion on a reworking of the messaging section:

    My build upon @mercime‘s work for the profiles (a minor edit purely for visual paths) – splitting into clear sections of content types rather than mixing it all (who they are(details), who they know(contacts/connections), what they have done(activity/posts). This is aiming to give it a bit more visual ease and ways through the content rather than it all on the page without visual order. I have purposely left out any plugin related information as dealing with defaults now. The leap could be made to add those plugins’ content underneath but leaving that to one side for the moment.

    A few filtering and stream suggestions:

    Avatar of Tammie
    Tammie
    Moderator

    @karmatosed

    @Mercime: Couldn’t agree more about menus – it should be more a functional choice.

    Let me say before I comment on the profile wireframes that it rocks much more already compared to what we have in BP-Default – which is great.

    I know you say it works, my issue isn’t with it ‘working’ it’s with the dense nature of the content and I feel that this is shown in your member profile page you linked. It’s a little too content heavy without some paths or sectioning. There are varying grids being used that probably aren’t aiding that though – with such content heavy UI’s it’s usually best to have one grid if being as tight to grid as your layouts.

    In saying this I do like the concept of showing it all and perhaps one of the issues is the bundling in of plugins you are doing in your visuals. Unless you are thinking those things should be rolled into the default package? If that’s not the case, perhaps could you step back show with defaults?

    I’m trying to get a grasp on what would be default in the profile to then move into the more dense profiles from there.

    Avatar of Tammie
    Tammie
    Moderator

    @karmatosed

    A few more profile mockups trying to combine some of the ideas from mine and yours @mercime:

    Avatar of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

    Block overkill. Is too much going on?

    Avatar of Tammie
    Tammie
    Moderator

    @karmatosed

    @modemlooper in reference to which?

    Avatar of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

    the last few mockups, showing a few of each content type as a grid is eye crossing. One content per page unless they are widgets in side bar. Making a mock will post in a bit. I’m always for less is more per page and let user drill down to the content they need. Everyone seems to be trying to give a little of each content type on one page. If there is one thing we all have learned over the years is people are confused with all the BP content; this stream that stream + forums etc.

    Theme designers can always add more but for the OOTB template i think we should streamline content.

    Thoughts?

    Avatar of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

    I think this approach is better suited for compatibility for any WordPress theme. The previous mocks seem to be thinking in the sense it’s still the BP-default wrapper. No one will know what dimensions a theme will have. We should not use grids for this reason. The activity stream in the middle is better suited for variable widths. there can be extra content in the sidebars. Let a site manager decide these things, not us.

    Avatar of Anton
    Anton
    Participant

    @nat0n

    Just a quick note before I go through the last mockups more in detail: While I do think thumbnails are visually nice for people (a face says a lot) they communicate very little for other content types e.g. groups. This is one of the problems with Ning – you have to rely on creating good “logos” to draw attention since the name just shows on hover (they’ve changed this somewhat lately). Therefore I’m more positive to listing groups as lists/tables with more info shown than thumbnails/grids just an image.

    Avatar of Roger Coathup
    Roger Coathup
    Participant

    @rogercoathup

    Have to say I’m totally in agreement with @modemlooper on this – you shouldn’t be designing a site here, these should be minimal template parts to present a given element… Which will improve the chance of them being reused and adapted by designers / developers.

    Stripping back the HTML to a semantic minimum should also be a goal.. Let’s get rid of all those unnecessary ‘presentation’ divs that BP currently wraps round elements. Development then becomes additive rather than subtractive … And we dont have to spend so much time having to write filters just to strip out markup.

    Avatar of Tammie
    Tammie
    Moderator

    @karmatosed

    @rogercoathup: I don’t recall anyone is designing a site. As it’s been levied also at me I can state I am not. Think we’ve already all agreed that’s a bad idea in our numerous conversations about that already. I think we can put that one to one side for a moment as it’s come through loud and clear :) It’s why for me personally I left out headers / footers intentionally aside from one mockup which was to show a 3 column idea discussed. You are also welcome to do some wireframes if you think things should be illustrated differently – be great to see your interpretation. Remember like it or not it has to look like something when it’s loaded for end users.

    @modemlooper: Sure, that can also work for profile – I was building on @mercime‘s posts but that’s a good other option of course. I do think perhaps the navigation is more priority than the user image. That’s my only quandary with that there. I’m also not sold on your layout for activity. Also, you’re assuming a sidebar… perhaps we shouldn’t :P

    I’m not sure about the bp-default wrapper thing you say – my wireframes certainly didn’t assume that and not sure everyone else’s did. Perhaps we should all be just discussing the wireframes putting themeing and the debate about html/semantic/wrappers/anything not relating to wireframes to one side for a brief moment. People are exploring things and doing some interesting ideas lets be open to all of them.

Viewing 25 replies - 26 through 50 (of 60 total)

The forum ‘BP-Default’ is closed to new topics and replies.