The SharePoint Designer: How I did the Design
Since the launch of SharePoint 2010 and SharePoint Designer 2010, I have designed 4 Intranet sites as well as 2 websites – I have found my true niche in SharePoint 2010. I have a few projects on the go, but this article is about my personal site: The SharePoint Designer. I have this opportunity thanks to FpWeb. They gave me one of their SharePoint sites to work with and call my own. And all of this wouldn’t have even happened without some very special people supporting me and guiding me: Veronique Palmer, Dave Coleman and Matt Hughs.
I have been fiddling with ideas for a week or so. The site is to do with everything regarding SharePoint 2010 Branding and ‘look and feel’ customization. I came up with the tag lines “The Beauty is in the Branding” and “Because Beauty is in everything”. The tag line suggested that I needed to make this site both functional and beautiful.
When creating a site, I create a colour template first. I use Adobe’s Kuler a lot to help me find decent sets of colours and then work them to what is need. Then I’ll spend a few hours on Google Images, doing general image searches and finding what colours work together in pictures. In this case I had decided sunset and plum. I changed the base colour templates a few times to match different images that were interesting.
When creating mock ups for SharePoint 2010, I don’t put content down, since you can play with it in so many different ways. My usual style is to place a main middle columns with a fixed width, and then have the two side columns expand as needed to fit any screen resolution.
No mock up struck me as “brilliant” as I’ve found them too boring and left wanting, from an impact point of view. – here are some of the ideas I played with in the beginning:
Image 1: Sunset Mock1
Sunset started because of a lovely background I found. I went along with my usual “middle” content column design, as it makes sizing a lot easier. I blurred the back image, and set it to what I thought would be eye level, and then placed my 87% transparent black block onto it. I decided on a very cursive font as I was leaning towards the romance of a sunset.
I wanted the menu to be simple, so I went with the “underline” idea for any selected menu option, and decided against the quick launch.
The end effect was romantic and pretty. But it didn’t sit as “earth shattering” for me.
Image 2: Plum Mock 2
Plum was the second attempt. I decided to try for a “clean cut” web 2.0 look and feel. I found a brilliant brush that leant itself to the romanctic feel I had started with, in the Sunset Mock up (this is what you see in the left hand corner), and moved towards a more traditional SharePoint 2010 layout: Two columns for web part zones, slight colour difference to break the page up.
The Final Result:
I wasn’t amazed with what I had produced. None of the mock ups brought across my point: Beauty is in the Branding. So I went back to my primary source of inspiration: The Arts (paintings) and classical photography. I am very blessed that many of my friends do photography as a hobby – so I have access to many different styles. I also did a Google search for beautiful branding to see what got brought back.
After playing with the colours from Sunset, I came up with a nice flow of 5 colours for my colour template. I didn’t want the colours to assault my readers and didn’t want to use soft pastels, so I found a nice medium between the two. I always try work with 5 colours. It stops sites from being monotone and boring.
In order to not loose site of my colour ranges I always pop my colour template ontop.
I can’t tell you why this layout struck me – but it did. I started with a clean 1200 x 800 px PhotoShop CS5 Canvas and started to work with my rulers. I discarded my own advice about SharePoint 2010 layouts, so as to show my readers what SharePoint is capable of from a design point of view.
I decided to go with 4 columns. Uneven in width, as to unsettle the site, but still allowing for decent content display (still using the 2 side by side web part zone layout). I also like for my top bar to be contained, and hate it when it “takes over” a site without good reason (banner / quotes/ images).
The site is to be a living portfolio of my work and my methodologies so I wanted to add a picture of myself. I broke the site horizontally to allow for that. And I started to think about 4 “content” blocks.
Image 3: Base Layout with Rulers and Colour Template
I love military grey on a site. So I thought it would be a wonderful “logo” to set a Grey Gradient block with my title (using the font Advent). I put it on top of my colour template and then thought better of it. The colour template top bar was slowly becoming part of the site. So I set it just underneath and because of this, the perfect “menu” space presented itself. I wanted to move away from white, so I coloured it in with grey to match the Logo block, which you will see in the final image.
Left Side Presentation:
The site was starting to take on the personality I wanted it to. I had a look at the left hand side “small” column, and whilst trying to figure out whether to leave it white or grey, thought that stepping it would break the “base” colour. So I layered it with different shades of my base military grey and bordered the top with a 2px darker grey line. It is a very simple technical, but the effect is very professional.
Then onto the “Personal” – I wanted to present myself. I went through about 500 pictures of myself and found this one:
Image 4: Photo taken by my mother about 5 years ago
I wanted to soften the image. So I made it black and white, then duplicated the layer, did a lens blur (here are the settings)
Image 5: Lens Blur Settings
I set the blur layer to overlay, which is how you get the soft touch photo look.
Image Six: Final photo result
I added in a short bio, some details, using the advent font again. My thoughts are that this will be an image rotator with different details of me, and small bio’s or “snaps” of my bio.
The bottom looked boring, so I went with a military grey gradient again, and popped in one of my favourite sayings: This is the end result:
Image seven: The final left hand side bar
The Content Space:
I wanted something to “pop”. And with content, you need to work with your space, so I went with a two column split with a slight colour difference. I created a simple block, offset by 5 px’s on the left – used the lighter orange from my template and set it to overlay with a transparency of 50% – and then dropped a 3px shadow on the left hand side to offset the “personal” block.
The right hand side was left blank and it was a bit boring, so I found my “loop brush” and set about playing with different looks. I placed it on the right hand side, in order to balance the site and duplicated this layer and set the bottom one to have a lens blur and lowered the transparency. I offset the top layer down by 4 px’s and set transparency to 69%.
After tweaking a few things, like small white borders, adding the menu (I like simple menu’s) and the “selected” pointer, I decided that this was exactly what I imagined when FpWeb first gave me my SharePoint 2010 site.