SharePoint Site Creation – Step-by-Step – UI Design (Part 5)

Note, the entire tutorial from start to finish will be available as a single zip file when it is complete, it will include all source html, css, PSD/Images etc.

Seems heading off to TechED in Orlando (which was great and I will post a bunch of pictures on soon), work and everything in between had a toll on my ability to get this tutorial done faster.

In the future I’m going to set a little time aside each day to try and get posts up. First things first though I will complete this tutorial so stay tuned for the next steps coming in the next few days.

The next steps will start to delve into getting the comp cut up and creating the site. We’ll start to tackle the SharePoint side of things in the coming entries.

I have also decided that in the end I will post a single zip file which you can download that will contain the entire tutorial as a PDF and the files used to complete it.

Now, enough of that, read on for part 5!

Finally! We can start in on the more fun components and actually build something. Before we do we should quickly plan out the items we need to tackle at this point.

We have already established our key elements, our rough site sketches and we know that this website is for a web design company that has no existing brand.

Based on this we can figure out our initial plan of attack, the items on deck for this phase will be:

Logo Creation
Slogan
Colour Selection
Typography Selection
Website Comps
So, we’re ready to start in on the fun stuff eh? – Let’s get started and see if we can’t knock off the items on our list:

logo_design_heading.jpg

Logo creation is in itself a very important part of the branding process. While I will not get into much of that in this post, I will note a couple of very important things.

1) Keep it simple – The main idea in a logo is to have someone glance at it quickly and still remember the name. If it’s too cluttered that won’t work. Keep it simple.

2) Icon – Choose an icon that makes sense with your logo, again keep this simple.

3) Typography – Make sure the font you select is bold, stands out, and is easy to read. If you have to struggle to figure out what your logo says it’s probably not going to be very successful. You should also note that the logo should work well inversed on a colour as white or black as well.

4) Sizing – Always keep in mind your logo will have to work in small square areas, circular areas, long rectangular areas and everything in between. Keep that in mind when designing your logo, don’t box yourself into one possible dimension.

5) Vector First – You should always create your logo in Vector format using a program such as Adobe Illustrator. If you want to really jazz it up for the web you can always do that later.

That’s as involved as I’d like to get right now with the creation of the logo.

As mentioned before all files that I create will be available for download, this includes the logo which you can grab here.

slogan_heading.jpg

This is pretty self explanitory, we’re not going to waste much time here, only to say it should be a catchy little phrase that draws your audience in. In our case we’re going to use: The ultimate online experience.

colour_heading.jpg

Colour selection is a fairly important step in the entire process, the colours you select will set the ‘mood’ the user tends to feel when visiting.

In this situation we’re going to want vibrant colours, something fresh, bright and fun.

Once you have selected your colour scheme it’s always good practice to create a “swatch” to hold them. This saves you time using the sampler trying to grab #HEX colours during development, and proves even more useful when you are creating new materials, or passing off your project to another individual.

As promised, the swatch used in this tutorial is available here.

Details on how to load, add colours and re-save this swatch are found here.

For all intents and purposes, the main colours we will be using in this tutorial are: Blue: #7299F8, and Green: #77DF32 the will be displayed on a White: #FFFFFF background.

typography_heading.jpg

Typography is also relatively self explanitory and I won’t get into too much detail here. Just follow some simple guidelines and you should be just fine.

a) Stick with easy-to-read fonts.
b) Don’t use text so small you cannot read it.
c) Try and be consistent.

In our situation, we’re going to use:
Tahoma 12pt for our HTML Text. Download
Vrinda for our logo, and any graphical headings. Download
Terminal 8pt for a small button style typface. I think this one comes standard with windows, but I’m not 100% so sorry I cannot offer this one for download.

comps_heading.jpg

The “Comps”, this is in my opinion one of the top two steps in the entire development process.

The bottom line here is this – Your “design” – The end-result of how good your website looks, how usable and well laid out it is all starts here.

This is the area which you should really spend some time fine-tuning and paying close attention to detail. ** I really can’t stress this enough.

In our current situation (ie: Not for a ‘real client’) I have to be a little more lenient in order to actually deliver this tutorial.

A couple of tips when designinging your comps using Adobe Photoshop:

a) Try using Layer Sets (The little folder at the bottom of your layers panel. It creates a folder for you to put intuitive elements together such as a Header, Footer, or Navigation.

b) Name your layers! – It’s really not fun dealing with an image with 95 untitlted layers. This is how a good comp “Should” look.

c) Try using “Layer Comps” during the design process. These comps are snapshots of your progress at certain points. This is a great way to cut down on the number of images needed to create multiple main, or sub-page comps. With Layer Comps you can do it all from a single image and just cycle through them. NOTE: Available in CS or CS2 Only, if you are not fortunate enough to use CS, you can achieve the same result in Photoshop 7 using Layer Sets.

This is how an “organized” comp’s layers panel should look.

d) Save your “Styles”. Effects are applied to text and or other images/objects in photoshop via the “Blending Options”. When you are happy with the result you have by tweaking the options you can save these settings by clicking the “New Style” button seen on the right. The next time you want to create the same effect you can simply click your styles tab and apply your newly saved style!

As far as the “creation” of comps go, it’s really trial and error, stick to your sketches at first, see what works, what doesn’t and make the necessary modifications.

Based on the colours, type-faces, sketches and logo chosen I have come up with “THIS” as the comp for the website we will begin developing and converting to a SharePoint site in the next step of this tutorial.

Download fileDownload the source (.PSD) here

Enjoy, and stay tuned for part 6 (Much sooner this time I promise!).

This entry was posted in SharePoint. Bookmark the permalink.

Comments are closed.