The SharePoint Designer

Brand. Design. Amaze.

Feb 9

The SharePoint Designer: How I did the Design

No Gravatar

AS SEEN ON WWW.NOTHINGBUTSHAREPOINT.COM : The Creation of a branded SharePoint2010 site

___________________________________________________________________________

Designing is not a science, it is an art. Inspiration comes from the strangest places and people.
Page Content

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:

2011-02-03-TheSPDesigner-01.jpg
Image 1: Sunset Mock1

Sunset:

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.

2011-02-03-TheSPDesigner-02.jpg
Image 2: Plum Mock 2

Plum:

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.

2011-02-03-TheSPDesigner-03.jpg
Image 3: Base Layout with Rulers and Colour Template

Top Bar:

2011-02-03-TheSPDesigner-04.jpg

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:

2011-02-03-TheSPDesigner-05.png
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)

2011-02-03-TheSPDesigner-05a.jpg
Image 5: Lens Blur Settings

I set the blur layer to overlay, which is how you get the soft touch photo look.

2011-02-03-TheSPDesigner-06.jpg
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:

2011-02-03-TheSPDesigner-07.jpg
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.

2011-02-03-TheSPDesigner-08.jpg

Tags: , ,

11 Comments

  1. Brent SamodienNo Gravatar

    February 10, 2011

    Reply

    Nice Work :)

  2. FrancoisNo Gravatar

    February 10, 2011

    Reply

    Just scanned over it, but looks pretty nifty.

  3. Ben CarlNo Gravatar

    July 21, 2011

    Reply

    Just wanted to give you a shout from the valley of the sun, great information. Much appreciated.

  4. barrieNo Gravatar

    October 13, 2011

    Reply

    Hmmmm, thanks for sharing this post. Nice choice about the sunset.

  5. Nicholas RudesNo Gravatar

    November 27, 2011

    Reply

    I love reading through and I conceive this website got some truly useful stuff on it! .

  6. Arletta MezaNo Gravatar

    December 19, 2011

    Reply

    Outstandingly drafted article, if all people provided the same material as you, websites became a greater place.

    • Louise van der BijlNo Gravatar

      January 9, 2012

      Reply

      Thanks Arletta.

  7. David GoodspeedNo Gravatar

    January 8, 2012

    Reply

    Thank you a great deal designed for supplying all people a very marvelous chance to read in greater detail out of this webpage. It is almost always hence outstanding as well as jam-packed together with an enjoyable experience personally along with my best workplace colleagues to check out your internet site no less than thrice weekly to find out the fresh items you are displaying. Not to mention, I’m only continually completed in regards to the very good ideas you serve. Selected just one recommendations on this site happen to be completely the very best I have ever had.

  8. Kate RamonezNo Gravatar

    May 10, 2012

    Reply

    Pleasant document, I have found it immensely helpful and it’s just exactly the infos I was scouting for. No need to say how it took me very long to discover it, so that’s why I wished to take some time to comment and give my opinion about it. Conversely, on on the second paragraph if I remember well, you made a small typo, maybe you should double check. carry on the good-job !

  9. pregnancy food pyramidNo Gravatar

    May 11, 2012

    Reply

    I’m agree with you about The SharePoint Designer: How I did the Design » The SharePoint Designer , but you can write more on this subject.

  10. francois divanNo Gravatar

    May 12, 2012

    Reply

    Surprising, first post on this blog. Good tips, thanks.

Leave a comment

The SharePoint Designer is using WP-Gravatar