As a SharePoint developer, you’ll often be tasked with modifying the “look and feel” of a your clients default site. This you’ll need to do to make sure your customer’s site doesn’t look like an “out of the box” installation of SharePoint. Though this might sound like a hard task - trust me, it isn’t. If you’ve done it once, you can do it a 100 times over. And each time you do, you’ll get better at it!
In the first part of this Branding SharePoint series, I am going to provide some tips for how to start your design process. The design you create will totally depend on you – let your creativity drive you! Let’s get started.
Start Here!
As stated on Wikipedia, web design is a process of “conceptualization, planning, modeling, and execution of electronic media content delivery via Internet in the form of technologies (such as markup languages) suitable for interpretation and display by a web browser or other web-based graphical user interfaces (GUIs).
The intent of web design is to create a web site (a collection of electronic files residing on one or more web servers) that presents content (including interactive features or interfaces) to the end user in the form of web pages once requested.” The same concepts apply when you design a site in SharePoint! You’ll need the following basics before we dive into the realm of customizing you site in SharePoint:
· Logo
· Color Scheme
· CSS
· Images
o Tip: If you don’t have any images and would like some, you can purchase some for $50+ depending on source, resolution and target purpose. Sites like MorgueFile.com or SXC.hu have some low budget images. Another option is to grab your camera and take pictures yourself or you could just go to www.istockfoto.com to search for royalty free stock images and photos or browse a giant selection of stock photography.
Where do I find that stuff?
Several elements such as your companies marketing policies, sales and management guidelines, will dictate a lot of what you can or can’t do. Depending on the organization, design elements may already be outlined in official documents that have been approved or are in use. If you don’t have any of these resources, look to other elements already available (web sites, brochures, etc) to find logos, colors and images. If this doesn’t do it for you or you don’t have any of these resources, start to think about descriptive words that describe your project, company or purpose. You could also take a look at www.colorschemer.com which is a professional color matching application for anyone from hobbyists to advanced professionals. It allows you to work with a dynamic visual color wheel, instantly explore harmony relationships and even let ColorSchemer Studio intelligently suggest color schemes for you.
Done designing, here’s what’s next?
Now that you have identified design elements, you can start working on a prototype, or comp, for your SharePoint design. For you or the person building the design, being a SharePoint expert is not a requirement, but it does help to be somewhat familiar with the interface and the application itself. There is a lot to SharePoint and detailed comps for several sample SharePoint screens will make the development process go much smoother. The site designer should spend some time in the interface checking out SharePoint and clicking beyond the home page. Here are some things to consider in regards to your design:
· Site Navigation
o SharePoint has and uses a lot of it. Make sure your design accommodates the navigation you need to use. Don’t forget about things like the breadcrumbs, the welcome menu and Site Actions.
o Off, on and hover – A lot of SharePoint elements have off states, on states when the item is active, and hover states. The design needs to provide detail for how these different states should be handled.
o Expanded menus, tree view and fly-outs – If your site is using any nested navigation, make sure you have design specs for the various levels and treatments.
· Toolbars – There are several toolbars used in SharePoint on various screens, plus form field backgrounds.
· Content – web parts, calendars, publishing areas
· SharePoint functionality – what SharePoint interface features do you want to keep in the new design? Think about page titles, site titles, page images, navigation menus, etc.
· Splash page and sub page - Will your site design have a splash page (a home page with a different layout and look)? If so, you will need a sub page design that focuses on content delivery.
· Custom web parts and functionality – if you will have custom features on your site, make sure the interface has been created in a comp for developer reference.
Are we done yet?
Almost. Here’s a quick recap:
· Identify resources for design
· Become familiar with the SharePoint interface
· Identify SharePoint interface elements you need in your final design
· Using your resources and SharePoint knowledge, create multiple comps for the home page, sub page and other subsequent screens to show design treatment for navigation bars, toolbars, web parts and other types of content.
Part 2: Coding for your design
The next part in this series will focus on how to create the code for your design.
