Making Sharepoint Look Good

One year later…

davekeyes — Tue, 20 Jul 2010 05:48:15 +0000

Okay, one year later… and it’s about time to flog this blog concept back into some sort of shape.

This time I’m thinking that a collaborative effort may work wonders, drawing from the inspiration, skills & knowledge of that rare beast – the professional Designers who work on SharePoint projects.

Are you a professional designer who deals with SharePoint?
Would you be interested in sharing some knowledge?
Or do you know or know of someone who might be interested?

Leave a comment & let me know what you think.

Bookmark Library : Icon Sets

davekeyes — Thu, 30 Jul 2009 09:49:14 +0000

Don’t go over the top, but good use of icons can really lift a good clean minimal SharePoint design and give it life & character. Here are a handful of links to some decent icon resources online.

Icon sets

http://www.pinvoke.com (Awesome set. Worth purchasing!)
http://www.famfamfam.com/lab/icons
http://iconfactory.com/freeware
http://tinyurl.com/yvy6qy (smashing magazine)
http://tinyurl.com/5v5sro (more from smashing magazine)
http://www.freeiconsweb.com
http://www.icojoy.com/blogs/3
http://bs-markup.de/iconsets

Photoshop Template (06) for SharePoint

davekeyes — Sat, 18 Jul 2009 05:47:58 +0000

Another layered Photoshop (CS3) file to use when creating a new Sharepoint Theme look & feel. I’m not a big fan of it, but see if it’s to your taste. I won’t be uploading any more PSD Templates for a few weeks, but I will be adding some posts of links to some excellent design resources online (tools/tips/inspirations). I’m hoping that within the month I’ll be able to provide an additional nifty resource to this site too … I won’t give any hints now, but fingers crossed it comes together.

As ever, feedback, comments & suggestions much appreciated.

Click here to find the zipped PSD on Windows Live. If this is of any use to you, let me know!

All text is editable and the Font used is Verdana
Top nav highlight, dropdown list & site actions button visuals included

Preview Image

Photoshop Template (05) for SharePoint

davekeyes — Fri, 17 Jul 2009 23:59:15 +0000

Righty … here’s another layered Photoshop (CS3) file to use when creating a new Sharepoint Theme look & feel. Not massively different to the previous few, really, but still has a little character of it’s own. Click here to find the zipped PSD on Windows Live. If this is of any use to you, let me know!

All text is editable and the Font used is Lucida Sans
Top nav highlight, dropdown list & site actions button visuals included (seperate layer folders)

Preview Image

A Peek at SharePoint 2010 & Light Themes

davekeyes — Thu, 16 Jul 2009 05:30:20 +0000

So! Some more information has been released regarding the upcoming SharePoint 2010 – and it includes detail that may interest those who want to easily change the colours & fonts of their out-of-the-box SharePoint site.

Click here for the video!

Jump to 16.52 in the video (or simply click on Rich Themes header in the Feature Highlights list below the video) to shortcut to the Theme portion.

There is some info regarding the new office ribbon which is being brought in for SharePoint .. as well as a demo of basic wysiwyg text & image editing features along with a cursory glance at how ‘very basic’ theming can be achieved through importing Theme Colours from PowerPoint for instance.

Click to Enlarge

The above linked screenshot shows how SharePoint can understand imported Theme Colours from PowerPoint and how you can define (and preview) which colours associate with elements of your site.

As for how good and usable this is (for v.light themes) – I’m reserving judgement until :

I’ve been able to have a tinker with it
the developers here tell me how scaleable/deployable particular font/colour sets are
we find out how customisable the admin restrictions / access rights are for these features

Photoshop Template (03 & 04) for SharePoint

davekeyes — Fri, 10 Jul 2009 09:31:22 +0000

Based on the previous design, here are a couple of clean colour variations to keep things moving. As before, layered Photoshop (CS3) files to use when creating a new Sharepoint Theme look & feel. Click here to find the zipped PSD on Windows Live. See if this is of any use to you and let me know how it goes.

Click to Enlarge

I will likely be uploading a different Theme design style within the next week, just so you know.

Feedback, comments & questions are all always very welcome.

Photoshop Template (02) for SharePoint

davekeyes — Thu, 09 Jul 2009 10:59:49 +0000

As promised, here’s a second handy layered Photoshop (CS3) file to use when creating a new Sharepoint Theme look & feel. Click here to find the zipped PSD on Windows Live. See if this is of any use to you and let me know how it goes.

All text is editable and the Fonts used are Georgia & Verdana
Two left nav panel variations are included (seperate layer folders)
Top nav highlight, dropdown list & site actions button visuals included (seperate layer folders)

Preview Image

Preview Image (alt nav)

I’ll likely provide some simple colour variations on this Theme shortly.

Feedback, comments & questions are all very welcome.

Talking About Brand & Themes

davekeyes — Sun, 05 Jul 2009 11:57:10 +0000

Thought I’d stick my talk slides from the New Zealand SharePoint Conference up here… in case anyone finds them useful. I’ll add some accompanying notes soon.

I was glad to have the opportunity to speak (Thanks Mr Orange) – it was just a shame that due to heavy workload I could only pop along to the Conference for the talk, then leave straight after.

Back with Links

davekeyes — Sun, 28 Jun 2009 11:18:55 +0000

Links to good examples of public Sharepoint sites can be very handy sources of inspiration. Seeing what is out there. Despite the fact that the following sites go a significant way further than simply customising Themes, they should hopefully give you something to think about. There are always elements we can learn from.

Basic Graphic Considerations : Part 5

davekeyes — Thu, 16 Apr 2009 10:42:06 +0000

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!

Basic Graphic Considerations

Part 1. The Global Breadcrumb Area
Part 2. The Global Title Area
Part 3. The Primary Navigation Area
Part 4. The Left Hand Navidation Area
Part 5. The Content Area

* I’ve labelled these graphic considerations ‘Basic’ as these are the simpler aspects for a Front End Dev / Presentation Layer Dev to customise (for the mythical quick, simple and cheap solutions). Personally using these basic graphic considerations in creating Theme visuals has allowed the css guys I work with to construct an implementable Theme package in just a few days (2-4 days on average). I’ll post on intermediate / advanced graphic considerations in time … and meanwhile, as ever, your feedback is very welcome!