The Content Area
[ Supportive image to come ]
- Avoid any use of rounded corners within the content area.
- The simple black dropdown arrows need to remain as they are.
- The icon next to the ‘add new’ text also needs to remain as is.
- A particular style can be set for the various content area heading text colour, size, font and background colour/ subtle graphics for the heading bars.
- You can also set individual styles for the general body content text, link text, table headers, table content, list text, and the ‘add new…’ text.
- The colour and thickness of horizontal rules (lines) can be determined – and separate styling can be set for lines between headings and content areas, and lines between content and the ‘add new…’ text.
- Tabular areas can also be styled, with column and row background colours, subtle background images, border colours / thickness.
- The entire background to the content area can be styled in terms of colour. A subtle background image or repeat image could also be used but be very mindful of sufficient clarity and contrast around/behind the content, as well as how content components move around
- The horizontal bar containing the breadcrumb at the top of the content area can be independently styled – text & link colour, font, padding, background colour/image.
Hmph … I’m sure I’m missing a load of little aspects here. Probably some big ones too. I’m distracted but I’ll post this anyhow, a work in progress. Do please feel free to question or correct me on any of these points!
.
Read the rest of this entry »
Filed under: Article , Considerations, Content Area, Handy Reference Link, Sharepoint
The Left Hand Navidation Area
- Side nav area should remain the same width.
- A background colour and graphic can be applied to the vertical column itself. The graphic can be assigned to be aligned from the top or from the base of the page.
- Keep in mind that while the navigation elements may cover the top portion of this vertical column most of the time, there are numerous SharePoint templates in which the navigation is absent … so your background colouring and imagery in this area should look good with or without the navigation elements.
- Within the vertical column of this area the nav elements themselves do not need to start at the top. Padding can be added to lower them.
Click to show
- The nav subheadings text and background can be styled in terms of colour, size, font and background colour/graphics.
- The link text and background can be styled differently, with their own colour, size, font and background colour/graphics.
- Small alternative ‘bullet’ images/colours can be applied instead of the standard small square.
- The ‘View All Site Content’ link text and background can be styled independent of the other links in this column.
- The ‘Recycle Bin’ link text and background can be styled independent of the other links in this column.
- The Recycle Bin icon should remain as is.
- Visual alternatives for the hover (rollover) and active (current selection) states of links can be prescribed for the links (aside from the subheadings). This includes link colour, size, background colour/graphics.
- Background can be flat colour or a graphic, but in the case of the latter, keep the dynamic width in mind. E.g. a repeated background graphic concept is shown here, which visually includes the lower drop shadow.
.
Read the rest of this entry »
Filed under: Article , Considerations, Handy Reference Link, Left Nav, Sharepoint, Side Nav
The Primary Navigation Area
- Dynamic width by default. The height can be altered.
- Background can be flat colour or a graphic, but in the case of the latter, keep the dynamic width in mind. E.g. a repeated background graphic concept is shown here, which visually includes the lower drop shadow.
- A consistent button style is required for the standard (left) navigation items on this bar, while the ‘Site Actions’ button (right) can be styled entirely seperately.
- Nav button stylings can include text colour, size and font, a border line of variable colour & thickness as well as background colour & graphics. E.g. The rollover state on nav item ‘SPG’ is show here with a left portion, repeated central portion and right portion). Similarly button styles can include a top & bottom portions.
- Keep in mind the default visual state for a button as well as the rollover/hover state and the look of a drop down menu.
- Text colour, size & font can be altered.
- The ‘arrow icon’ next to Nav items with drop down options cannot be altered.
.
Read the rest of this entry »
Filed under: Article , Considerations, Handy Reference Link, Primary Navigation, Sharepoint
The Global Title Area
- Dynamic width by default. The height can be altered.
- Background can be flat colour or a graphic, but in the case of the latter, keep the dynamic width in mind. E.g A single background graphic is shown here, blending into a flat colour which would in turn continue should the screen be resized.
- By default there is small SharePoint icon and a Text Heading (which acts as a link) for the site situated to the left of this area. These can be placed anywhere within this area, the SharePoint icon can be hidden and the linked text heading can be restyled (colour, size, font). In the example visual shown above; a glossy background image containes the logo, which still acts as a link due to the linked text heading (made invisible) sitting above it. Alternatively you can have the linked text heading visible and placed next to your logo.
- The search form elements need to remain in-line and within this area, although can be anywhere within it. Leave the magnifying glass icon as it is. The link for Advanced Search can be removed.
.
Read the rest of this entry »
Filed under: Article , Considerations, Global Title, Handy Reference Link, Sharepoint
The Global Breadcrumb Area
- Dynamic width by default. The height can be altered.
- Background can be flat colour or a graphic, but in the case of the latter always keep the dynamic width in mind. E.g. a repeated background graphic concept shown here.
- The content on the left is the start of the global breadcrumb for the site, so keep in mind that it will grow.
- Text colour, size & font can be altered.
- The content on the right needs to remain in-line and while you can’t change the down-arrow icons, you can alter the text colour, size and font. The colour of the vertical divider lines can also change.
- Leave the blue ‘?’ icon as it is.
- Don’t feel that this area has to appear as a seperate bar.
.
Read the rest of this entry »
Filed under: Article, Handy Reference Link , Considerations, Global Breadcrumb, Sharepoint
