Skip to main content

Gathering Brand Requirements: It’s like pulling teeth…

Ok, so maybe it's not that bad but in my experience clients really don't know what they want. Sometimes you get the people who just want a simple brand adaptation from an existing application, or public website. That's easy enough. Or they want to see some examples of designs that we have done for other clients. Sure no problem. Or you get clients that use the following terms when describing what they want their site to look like:

  • Flashy
  • Cool
  • Clean
  • Wow factor
  • Easy on the eyes
  • New Aged
  • Techy
  • Lots of white space
  • Fun (Umm yea... OK...)
  • Never allow anyone to put a requirement in the SRS that a portal must be fun…

So what does the client really mean when they want a site to be flashy, cool, or lots of white space? Well I have tried to streamline a few set of questions that draw those definitions out of the clients mouth and into my creative brief.

Sample Agenda for a branding JAD session:
You won't get through all of this but it is a nice take away for the client to pass onto their marketing folks.

1.) Accessibility (508 Compliancy) Standards: Is this required?

2.) Browser Standards

  • Min Browser size: 800X600, 1024X768
  • Browser Width: Full width (Liquid Design) vs. Fixed width

3.) Branding

  • Style guides: Ask for the most up to date version of their style guide
  • Site Name:
    • Is there one defined?
    • If so how is it represented: Text, Logo, Other?
  • Brand customization type
    • Brand Adaptation: To what level
    • Custom: Does not exists in clients environment
  • Brand Implementation: From top (Page) to bottom (All Site Collections)
    • Site Only:
      • Content Editor Web Part - Using <Style> tag
      • Alternate Style sheet – Specified in sites Site Settings
      • Theme – OOTB or Custom
    • Site and Option to push to Sub Sites:
      • Custom Master Page – In master page gallery
    • Across all Site Collections
      • Custom Master Page – Server Side
      • Modification of Core files (Core.css, Portal.css, etc.)
  • Logo:
    • Size
    • Treatment
    • Color
    • Either corporate or site logo
  • Colors: To be either defined by style guide or custom
  • Imagery: Approved imagery that can be used throughout the site (Announcements, Links, products, etc.)
  • 4.) Functional Standards

    • Navigation Types:
      • Consistent Main Horizontal Navigation
        • OOTB the main navigation does not span across multiple site collections
      • Side Quick Launch (Tree view?)
    • Dynamic Dropdowns: How many levels does it show? OOTB there is a max of 5
    • External application links: Does it open in a new window or the same?

    5.) Branding Mood Questions:

    Q1. What type of treatments do you feel are appropriate?

    • Gradations or flat colors
    • Rounded corners
    • Transparencies
    • White Text on dark background
    • Tabbed navigation
    • Pixel lines for separation
    • Shadows

    Q2. Branding Moods Extremes

    • Simple/Complex
    • Soft rounded/hard squared
    • Flat/gradients
    • Light/Dark
    • Open/filled in
    • Heavy Imagery/soft color transitions
    • Heavy/light web part title bars (Chrome)

    Q3. Colors

    • 1 color monotone
    • Multi color complimentary
    • Bold accent colors

    Other Basic Questions that might help:

    Q1. Has your company undergone any recent re-branding?

    • If so will we have access to the design files?
    • If not when was the last time?

    Q2. Will there be a need to change or include additional Icons?

    Q3. Who will be approving these designs?

    • Marketing (how many?)
    • Board Executives (how many?)
    • Project Managers (how many?)

    Q4. Will they be available for Q&A?

    Q5. How many design reviews do you think is needed?

    • 1st Round (2 comps) 1 day for review and 1 for revisions
    • 2nd Round (1 comps) 1/2 day for review and 1/2 for revisions
    • Final Round (1 comps) 1 day for review and 1/2 for revisions

    Q6. Is there a specific need to have a different design for each area?

    • Each Department or Office has their own design
    • Each Site has its own color scheme
    • Each Web Part has its own header style

    Comments

    Marcy Kellar said…
    I found the link to the Brand Requirements Post. Well read. I found that my estimates are very similar to yours.

    Popular posts from this blog

    How To: Hide Left Side Navigation on Home Page

    I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
    <Style>
    body #s4-leftpanel
    {
    display: none;
    }
    .s4-ca
    {
    margin-left: 0px;
    }
    </style>
    Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

    Small Calendar for SharePoint 2010 & 2013

    First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.SharePoint 2010 Small Calendar:
    SharePoint 2013 Small Calendar:
    See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.Per the video above here is the code that I referenced:2010 CSS link reference in Master Page:
    <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>2010 CSS:
    /**** Small Calendar ***/
    .ms-acal-item{height: 10px !important;}
    .ms-acal-sdiv,
    .ms-acal-mdiv,
    .ms-…

    SharePoint 2010 Base CSS Classes

    This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class.I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover.Ribbon RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…