Archive for the ‘ Visual Design ’ Category

SharePoint Designs – Keep it simple, but don’t go cheap

Let’s face it – OOB SharePoint has very ugly UI.  It is plain, boring and colorless.  I am by no means a design person (quite frankly, if it weren’t for my house having it’s own ‘out of box’ design too it, it would be relatively plain and boring itself).  I am one of those many people that can only tell you what I like/don’t like once it is in place.  Thankfully we have designers that thrive off of making sites (and houses) colorful, attractive and appealing to the naked eye.  The one problem, however, is that both clients and designers alike can get a little too excited about design without thinking about maintenence once the design is in place.  Perfect case in point – putting rounded corners on web parts.  I am not sure what started the trend – it is definitely prettier – but this is probably the most  common request I get across the board.  This looks great when first built, but the problem is it isn’t extensible.  As soon as you want to add content to these boxes,therefore  expanding the part, it breaks the site build.  While not impossible to do (knowing HTML/CSS this can be managed), the typical end user finds this impossible to manage and you lose an important part of what SharePoint is here to do; you suddenly require a developer to make the updates rather than doing it yourself.

Another request, while understandable, is to keep the design implementation as cheap as possible (of course, this is after the design has been determined).  Oftentimes this can be done by using content editor web parts.  This seems like an obvious solution, and sounds simple on it’s surface to update (it allows the user to insert content of almost any type – links, images, text, photos, etc) and all the site builder/dev needs to do is stylize the part.  The problem again is in order to keep this part looking nice the end user must know HTML.  Also, they will have to always go into the web part to edit, and they will have to be very careful with the size of the content they are adding so as to not cause the site build, again, to ‘break’.  I would recommend one of two alternatives:

1. Use a design that compliments the OOB web parts (i.e. a lone video viewer web part, a seperate links web part, announcements web part, etc)  this can still be stylized, but it works with SharePoint rather than trying to invent your own combined part.

2. Use lists that pull in data to the parts.  While more expensive, this is much much easier to the end user and a much more sustainable, and clean solution.  This is a dream come true to the end user.  We have used this solution anywhere from pulling data into Featured News silverlight parts to modified Team Announcements on a home page.  What this means is:  the developer/site builder will implement styles on the pages so you can have your fancy design.  The site/page owner will go to the list as indicated by the dev.  They will simply select ‘add new item’ on their list.  Based on the design, they will then add whatever content is needed (photo, description, title, etc) and save.  The end user never actually touches the part! This process will populate the ‘fancy webpart’ on it’s own.  No worries on breaking the design, no knowledge of HTML and no formatting necessary.

Also note, what I have seen happen many times with trying to take the ‘cheaper route’ of content editor parts or even hard coding HTML on the page, is that this actually ends up being a more expensive solution, because they end up realizing that they can’t update and need to find a dev to make the udpates for them.  Alternatively, they ask to have the entire page re-done, the ‘right’ way.

Three of the biggest recommendations I hope you can take from this when brainstorming on design/budget for your SharePoint site:

  • Do NOT use rounded corners on your design
  • Avoid Content Editor web parts unless you know HTML
  • Cheaper initially does not always mean cheaper in the end

You can see all sorts of examples on our company site

I hope this proves helpful and best of luck on your site coming to life!

Design in Real Life – The Wall

As Affirma’s Visual Design Practice Lead, my area of blogging focus will be real-world design dilemmas, and talking through our process for solving them.  This week it’s going to be very real-world.  We’re talking about The Wall.

The Wall. Affirma has been working to customize and “spruce up” our office space, since it started out as what can be described as “1992 Cubicle Farm”.  Being the techy, sci-fi lovers that we are, we like grids, lines and squares. Ultimately a design student friend of the team came up with a very cool grid design utilizing three  shades of blue. Affirma’s logo has a dark navy blue color that was used as the inspiration for the darkest starting color. The two remaining colors are a medium and a lighter shade of the same blue.

Design side note here – using varying shades or even sheens of the same color can give a simple yet sophisticated design look. I’ve used this technique with painting floor to ceiling stripes or diamond shapes with great success. The same color will look darker with a high gloss versus flat or even an eggshell gloss. Give it a try, it’s only paint.

So that was a geat start to the newly updated wall – colors and a design we all agreed on. Most of the battle is behind us and all that’s left is implementation.  Sounds easy, straight lines and squares of the same size on a large scale.

It turns out that laying out and masking a couple hundred squares on a wall – and getting them straight, level, and symmetric – is more challenging than doing the same thing in PhotoShop.  Yeah, right?  But with two attempts, a good ruler, a 6 foot level and lots of determination we had straight lines and sound squares up and ready for paint. In the next few days we completed painting the wall and everyday I walk past it, I smile because as a team, we took the time to make it right. This pretty much sums up how we do everything at Affirma. If you see an issue and you can fix it, step up, offer your support and make it right.

Here’s a couple of  in-progress photos and the final result, much better in person of course.

In progress
pixel wall in progress – masking

final result

Pixel Shaders w/ Source (And a demo!)

In an earlier post, I showed some still images of Silverlight pixel shaders and how we used the awesome tool Shazzam in our development.  Today I’d like to post the code and show some interesting uses of the shaders.  (Live!)

Let’s start with the code for the Telescopic Blur effect.  Here’s the relevant HLSL:

/// <summary>Center X of the Zoom.</summary>
/// <minValue>0</minValue>
/// <maxValue>1</maxValue>
/// <defaultValue>0.5</defaultValue>
float CenterX : register(C0);

/// <summary>Center Y of the Zoom.</summary>
/// <minValue>0</minValue>
/// <maxValue>1</maxValue>
/// <defaultValue>0.5</defaultValue>
float CenterY : register(C1);

/// <summary>Amount of zoom blur.</summary>
/// <minValue>0</minValue>
/// <maxValue>3</maxValue>
/// <defaultValue>2.5</defaultValue>
float BlurAmount : register(C2);

sampler2D input : register(s0);

float4 main(float2 uv : TEXCOORD) : COLOR

    float4 c = 0;
    uv.x -= CenterX;
    uv.y -= CenterY;

    float distanceFactor = pow(pow(uv.x,2) + pow(uv.y, 2),2);

    for(int i=0; i < 15; i++)
        float scale = 1.0 - distanceFactor * BlurAmount * (i / 30.0);
        float2 coord = uv * scale;
        coord.x += CenterX;
        coord.y += CenterY;
        c += tex2D(input,coord);

    c /= 15;
    return c;

It takes 3 inputs.  By altering the center of the zoom, you can do some fun stretching motions.  As you’ll see in the demo below, it turned out to be a neat way to make text fly into view.  You can also alter the amount of zoom blur.  I’ll leave it up to the reader to play with this within Shazzam.

Next we have the underwater effect:

sampler2D input : register(s0);

float Timer : register(C0);

static const float2 poisson[12] =
        float2(-0.326212f, -0.40581f),
        float2(-0.840144f, -0.07358f),
        float2(-0.695914f, 0.457137f),
        float2(-0.203345f, 0.620716f),
        float2(0.96234f, -0.194983f),
        float2(0.473434f, -0.480026f),
        float2(0.519456f, 0.767022f),
        float2(0.185461f, -0.893124f),
        float2(0.507431f, 0.064425f),
        float2(0.89642f, 0.412458f),
        float2(-0.32194f, -0.932615f),
        float2(-0.791559f, -0.59771f)

float4 main(float2 uv : TEXCOORD) : COLOR
	float2 Delta = { sin(Timer + uv.x*23 + uv.y*uv.y*17)*0.02 , cos(Timer + uv.y*32 + uv.x*uv.x*13)*0.02 };

    float2 NewUV = uv + Delta;

	float4 Color = 0;
	for (int i = 0; i < 12; i++)
	   float2 Coord = NewUV + (poisson[i] / 50);
       Color += tex2D(input, Coord)/12.0;
     Color += tex2D(input, uv)/4;
     Color.a = 1.0;
     return Color;

Its input is a timer value, so that it can be animated.  If you compile this into a Silverlight effect, you can make the timer be a DependencyProperty, which allows the effect to be animated by Storyboard.  I love XAML.

While this is a “passable” underwater effect (and I’m still working on a better one), I found an unanticipated use for it.  But first, a digression.

A year or two ago, LucasArts re-released their classic game The Secret of Monkey Island for the XBox.  I played this game extensively as a teenager, so of course I downloaded the new version and played through again, to see what they had done with the new capabilities of modern hardware.  I wasn’t disappointed.  While upgrading the look, they had stayed faithful to the design spirit of the original.  And one of the most impressive effects was the Ghost Pirate LeChuck.  He had a wavy, wispy quality.  (As shown here.)  It was fluid and animated and very impressive, and at the time I didn’t know how they did it.

Fast forward a year or two and we’re working on the underwater shader.  On a whim, I applied it to a white square in front of a black background.  Whoah.  Now I knew.  So we put together a quick ghost demo using the underwater effect and you can see it, along with the telescopic effect used as a transition, by clicking here.

Click for Pixel Shaders Demo

Click for Pixel Shaders Demo

%d bloggers like this: