page design¶

details:

• masthead: the masthead is designed to be small and colorless, but also have some distinctive riseup theme. i don’t want the masthead to clash with a color scheme that might be picked for a particular page. I think of it more like the thin blue masthead that is at the top of blogger.com blogs.
• top navigation menu: the top menus are cut out of the masthead. this provides a simple and clear design. it provides a very strong context: it is obvious that everything on the page directly relates to whatever top level item is selected. the cut out also helps the eye by giving a distinctive shape to current selection, as does the gap between the menu and the banner below. The words are not in all caps, because the eye also is able to read words much better that have distinctive shapes. I have no opinion if the beginning of the menu should be flush with the left edge of the screen or aligned with the banner below.
• banner: although we do not have this ability now, it is important to me that we eventually have the ability to strongly theme the banner. that has been my idea with the banner from the very beginning. i think this is really important in order to make it so that people feel like their crabgrass site is their own, to provide important cues as to where you are, and to make the whole site look better. crabgrass actually works with bannerless pages (there is a config item to allow the owner to be optional). this mockup would work also without a banner. the key thing that makes pretty banners something that is feasible and not just a pipe dream is the new invention of firefox personas. There are many thousands of these ‘personas’ for firefox, all licensed under a creative commons license. Personas are the right shape and size, and most of them have a muted left side and a fancy right corner, like the example in this mockup. We could either include a ton of personas with cg (easy), or add some way to navigate the live firefox personas website from within cg (a bit harder). For personas to work, the banner must not be full screen width, although it can vary considerably.
• banner navigation: the banner in this mockup is relatively bigger than other designs and has embedded in it the group/person navigation links. since these are combined in the banner, the space used by the banner+nav is actually the same as in the other mockups. by combining them, we get more space to display the pretty banner and it makes it clear that the navigation is within the context of the group. There is a gap under the banner, which I am not particularly happy about, but it looks much better than without, I think.
• page content area: I think this area should remain pretty much exactly how it is currently in we.riseup.net. I would make three small changes: (1) allow the color of the title box to change with the banner. This provides some very light weight theming. In this mockup, the titlebox is peach colored, to complement the banner. (2) move ‘history’ link to the info box tabs (show, edit, etc). it makes much more sense here. in the case of wikis, it would need to be combined somehow with the versions tab. (3) move the ‘printable’ button to the infobox, put it on the right hand side and make it part of a dropdown menu labeled ‘view as’ with other options, such as ‘pdf’. I really like the autonomy of the page content area now, and how it all looks clean, and how the comments work. I want to keep this area pretty much how it is on we.riseup.net currently, and to make it stand out from other elements on the screen (like it does now). this allows you to focus your attention on the business at hand when you want to edit or read a page.
• page sidebar: the sidebar in this mockup is similar to the current one, with a few changes. I created box around some items, which helps add another level of visual distinction and clustering.
  • page sidebar box: I divided the box into three section:
    • the first is popularity and navigation stuff relating to the actual page. This is stuff that should be shown for everyone visiting the page, regardless of permissions. It lets you know how popular the page is, what tags it has, and eventually should list a few pages that are similar to this page. This section could also use a ‘created on’, ‘created by’, and ‘number of page views’ elements, perhaps.
    • The second section down is for a particular user to edit their relationship with this page. In addition to the ‘watch’ and ‘include in my pages’ checkboxes, it might be useful to add a link here eventually that lets you ignore a page you are not interested in anymore. currently, we have no way for you to break your ties with a page once you have commented on it or been given access.
    • The third section is just a bunch of links to page actions.
  • page sidebar background: in addition to the box, the page sidebar also has elements that we want to draw less attention to and that flow down the page on the background level. I think it is important to display the names and the access rights of every person and group. I do not want a list of just icons. It is really important to me that what groups and people are part of this page is something that cannot be easily confused or overlooked, which is likely to happen if we just display the icons.

Overall, this mockup is designed with these ideas in mind: (1) make the navigation context crystal clear at all times (2) cluster and space items to provide visual variety and clarity (3) background and foreground elements to cut down on distraction. It is also important to me that there is no trapped white space, which the other designs have.

The total vertical space used in this mockup is identical to that used in the current ui redesign. However, it looks like there is more space between things, which is exactly the kind of feel that i would argue we want to achieve.