Basic graphic design for SharePoint developers and designers – Part I

As a former graphic designer now turned Analyst, my skills in typography and design come in handy every once in a while. A lot of teams and projects don’t have the budget or full time position for a graphic designer or user experience professional, but here are a few tips and tricks to help you with your software and SharePoint design.

Almost every place I’ve worked has a low budget (or no budget) for graphic design. In fact, the only place that had a high priority placed on graphic and photography was my first job out of college working in the newspaper and magazine publishing industry where they had several full time photographers and graphic designers.

Since then I’ve had to work with basically $0, so I’ve learned to be savvy in how I make or obtain my graphics. Because of my background in journalism and my knowledge of copyright law from undergrad and grad school, I know you can’t just go “steal” or “re-use” graphics from the web without permission or paying.

For a few recent projects in SharePoint, I’ve had to redesign a portal/landing page and create a new site dashboard for management. In the redesign of a portal, the previous icons for navigation were inconsistent in typography and design. Some were left justified, some were centered. Some had drop shadows, others didn’t. To be consistent and uniform I found a set of icons with a similar look and modified them as needed. I redesigned the text to make them consistent in being left justified and removed the drop shadows from the images. I also used a primary color pallet where before the icons were an odd assortment of colors.

In a new dashboard for a SharePoint site collection, the site was designed to track service requests. We wanted to provide simple navigation for users and management to select the respective branch or service requests, and also provide navigation to a stoplight chart and reports. I needed logos.

A great resource for official government seals or logos, flags and so forth can be found on Wikipedia. If you search for government organizations, names of countries or states, you can find many images are in the public domain or available for official purposes.  After selecting an image from Wikipedia, you can view the terms with copyright details of the work below as to if it’s in the public domain, licensed through the Creative Commons, fair use or other type of work.

Here in the DoD, we have DefenseImagery.mil which has many official seals and photography from all services. They have seals in several different formats including JPG, EPS, WMF and GIF in both color and black and white.

Here is one of my tips:
1-Find a good base of graphics or icons and “reuse and recycle”

Smashing Magazine has a whole bunch of awesome icon sets available for free. They have plenty of web and mobile icon sets and many various themed icons such as for holidays, e-commerce, arts, entertainment, food and education plus more. All of the sets available may be used for private or commercial projects without restrictions. A great article about how to use icons on your website can be found here. Enjoy these freebies and have fun designing in SharePoint!

Stay tuned for Part II of my blog where I show a few examples of my image creations and modifications.

Resources for free art, photography and icons:
http://openclipart.org
http://www.morguefile.com
http://www.smashingmagazine.com/tag/icons/

Resources for paid art, photography and icons:
http://istockphoto.com
http://dreamstime.com

Resources for photography in the public domain and for purchase:
Library of Congress – http://www.loc.gov/pictures/ (some free high-res historical images, many in public domain)
NY Public Library – http://digitalgallery.nypl.org/nypldigital/index.cfm
National Archives – http://www.archives.gov/research/arc/index.html
Calisphere – U of California – http://www.calisphere.universityofcalifornia.edu/
Archives Smithsonian American History Museum – http://americanhistory.si.edu/archives
Great Images in NASA – http://grin.hq.nasa.gov/UTILS/search.cgi
Smithsonian Images – http://siarchives.si.edu/collections
USDA – http://www.ars.usda.gov/is/graphics/photos/

Images For Purchase:
National Geographic – http://www.natgeocreative.com/ngs/
Magnum Photos – http://www.magnumphotos.com/
Getty Images – http://www.gettyimages.com/creativeimages
Corbis Images – http://www.corbisimages.com/
Picture-Desk – http://www.picture-desk.com/xf_page2.html
Nature Picture Library – http://www.naturepl.com/
Alamy – http://alamy.com
Art Resource – http://artres.com
Bridgeman Art, Culture & history images – http://www.bridgemanimages.com/en-US/

Historical Images:
Picturing Women – http://www.picturingwomen.org/about_pw.php
Classic TV images – http://www.lib.umd.edu/special
Denver Public Library Digital Collections – http://digital.denverlibrary.org/

Images from News, Celebrity, and Entertainment:
Associated Press – http://www.apimages.com/
Wire Image – http://www.wireimage.com/

About Michelle Schafer

Michelle Schafer is an Analyst with over 15 years of experience in web technologies. Her background is in communications and graphic design. For the past 6 years she has been working in agile software development teams doing web content management, knowledge management, technical writing, requirements, design and testing. Michelle received her Bachelor’s degree in Mass Communications from Middle Tennessee State University and a Master’s in Publishing with an Electronic Publishing concentration from George Washington University. She is a mother to two daughters, enjoys volunteering and tries to achieve a balance in her work and family life.