Skip to main content
Kinetic Community

Branding

Document Overview

The following document will assist in developing a branding (look & feel) for the Request Portal(s) being developed and the forms/services found within that portal. 

Using Existing Pages

A good way to get up and running quickly is to identify pages within the current environment that have a look/feel similar to what is desired.  This is often a corporate intranet or customer-facing site. 

Identify sections (header, footer, etc.) from one or more pages that could be utilized within the portal and/or the individual forms.   These could be simple images or more complex HTML layouts.  The important part is identifying sections/parts of a page to replicate.

Simple and consistent branding will typically lead to better, more maintainable forms.  For this reason, it is best to standardize on a header and footer for the majority of your forms, particularly within a single portal.

Your portal page(s) will likely be more complex, but here you can also use the same header/footer, adding in left/right column features if needed.

You can take these elements and add them to an existing Bundle and you'll have a functional starting place. Bundles are web-based add ons to Kinetic Request which allow you to quickly create a web interface to your request catalog. Bundles include all of the files that you need to get started and come in different themes for styling and branding. A typical bundle includes a category listing page which allows the user to browse through the catalog, a display page for your service items, a submissions page which lists all the submitted, closed and pending requests for the user and a submission details page which shows all of the details and tasks for each request.

Responsive Design

Deciding early whether or not you want to use responsive design is very important as well. Responsive design is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

This approach can limit or change the existing page elements you are able or would want to use in designing the Kinetic Request Portal. The existing header, for example, may not render well on mobile devices. Often any side menus are deemed to "heavy" for use on mobile, where the screens are so very narrow, and are dropped entirely from the design so as not to confuse the users. It could also be built into the responsive design to have the side menus there in Desktop, but move to another section of the screen for mobile devices. A choice to use responsive design weighs heavily on all other design choices made.

Existing Page Elements to Use

Page Section

Example

Notes

(Example:)
Header

http://www.sithco.com

This header should be used as is.  On catalog, the navigation bar should be shown, on forms it should not.

Form Header

 

 

Form Left Column

 

 

Form Right Column

 

 

Form Footer

 

 

Catalog Header

 

 

Catalog Columns

 

 

Catalog Footer

 

 

By identifying pages in this way, it is also easier to determine a font, font size, spacing and coloring to use within the portal.  Often the example pages you find will have a style sheet attached to the page that the form developer could use to replicate these style elements.

There may be other style notes to add at this point, or there may not be pages the customer would like to replicate.  If so, note the look/feel elements that should be incorporated into the catalog and forms.

Other Style/Branding Elements

There are many decisions to make, and standard  you can set to help set up a consistent look & feel. Here is a list with some example setting for certain items:

  • Define screen resolution requirements, this includes page width. This includes whether the page will support multiple widths in one theme (responsive design).
  • Define column design for portal page
  • Define images
  • Define color pallet
  • Define Zones for the Service Item, ex.
    • Header
      • Same banner as portal page
      • Services search
    • Local Site Navigation
    • Content
    • Footer
  • Service Item Page Layout and Style/CSS Standards
    • Page Title
    • Page Title Description
    • Headings
    • Text
    • Number of columns and widths.
    • Question Label
    • Question Answer
    • Radio Button, ex.
      • Radio buttons presented horizontally and keep them to only one line (no line wrap)
      • If wrapping occurs, present as drop down
    • Drop Down List Box, ex.
      • Use this if menu is desired or if radio buttons would take up more than one line.
    • Checkbox Presentations, ex.
      • Check Boxes will display horizontally only if they fit on one line.  Otherwise vertical display will be used
    • Dates
      • Display Calendar picker
      • Display individual date fields
      • Add menu to year field
      • Don’t display date as singular question field
    • Date/Time
      • Display Calendar/Time picker
      • Display individual date and time fields
      • Add menu to year field
      • Don’t display date as singular question field
    • Buttons
    • Tables, ex.
      • jQuery dataTables will be used
  • Define how is error handling (ex. data validation and not filled out required fields) displayed

Example Portal Pages

The following page utilizes a header, left, and right columns from other parts of a corporate website.  The center portion is dynamically created using Kinetic Request, applying fonts and visual identifiers from other parts of the site.

 image003.jpg

Below is a more lightweight, responsive design (as viewed on a computer screen).

Both catalogs went through the same design process, but different decisions were made during the process.

Example Forms

This form uses the same header, footer and left/right columns as the portal page.  The form author only needs to create the fields in the middle section.

 In other types of forms, only the header is used from the catalog and left and right columns are removed giving more space for the form content itself.

image004.jpg

Below is an example of what the form looks like in the lighter weight, responsive design (on a computer screen):

InternalCatalogItem.png

Again, the same design process with different results.

Previous (Training)                                                                                                        Next (Organizing Your Service Portfolio)