KCI Web Design Procedure

This document is present in both the KCI SharePoint under General Admin -> Policies and Procedures and on the Wix Website. If you update one version, please ensure the other version is updated as well. This procedure is only visible on Wix in the editor mode, as it is on a hidden page. On Wix, please ensure the anchors line up with the headings.

 

General Formatting

All text should be either Cinzel or Arial font. Use black or red #920707 for most texts, tan for a select purposes (see Other Text). Use minimal animations and only outlined or the third shadow effect. Use preformatted designs from “My Designs” whenever possible and use only themed colors.

When shapes are used, be consistent with the theme. Use sharp corners or circles.

 
Colors

Themed colors should all appear under the “Site Colors” picker:

  • Red #920707 (second darkest)

  • Green #054203 (darkest)

  • Tan #FCDCAD, #F9CA84 (lightest on the last column)

  • Brown #523304 (darkest on the last column)

  • Pale tan #FFF9EB (lightest on second to last column)

  • Black

  • White

The lightest tan and the green are usually used as background colors rather than text colors. Other variations on these colors are acceptable but should be used at a minimum.

 
Image selection

When possible, use photos by or of KCI employees. Avoid stock photos of employees when possible. Stock photos of Hawaii are less recognizable as stock photos and are usually better to use. Make sure images are not excessively blurry and are not stretched. Headers and other larger images will more often require stock photos because of the high quality needed. Make sure that the main parts of the image are not blocked by text or other elements.

KCI photos can be found in SharePoint under All Employees->Pix.

 
Boxes

Box format can be changed based on context. The format listed below has been used on the website and should appear when designing a box.

  • Use pale tan #FFF9EB for background

  • Red #920707 for outline

  • Sharp corners

  • No effects

 
Text
Headings
  • Cinzel

  • Size 25, 30, or 35, depending on the context

  • Red #920707 (second to darkest red in the site colors picker, should match the logo)

  • Can use third shadow effect (diffuse dark shadow) especially when using a background image

Body Text
  • Arial

  • Size 15 or 18

  • Black

Other Text

Can use Arial 30 pt, bold, red for smaller subheadings.

Use first or second lightest orange on site colors picker for other small text on darker background.

 
Headings
Main pages

Main page headings have a preformatted template under “My Designs.” It should have a strip with a background image with the “Reveal” effect.

  • Cinzel

  • 35 pt

  • Third shadow effect

  • White

  • Hawaiian Text in Italics ~ English Text Plain Bold, bolded with a space on either side of the tilde

  • No filters on the background photo

Section Headings

For main sections within pages, use preformatted “Section Heading Template” under “My Designs”

  • Strip with photo background

  • Hover button

    • White background with 25% opacity, no borders, square corners

    • English text in Cinzel white, bolded, third shadow effect

    • Hover for Hawaiian text in Cinzel, tan #FCDCAD, unbolded, third shadow effect

  • Two black lines above and below

Subsection Headings

Subsection headings vary by context, but usually use

  • Cinzel

  • Red #920707 (second darkest)

  • 35 pt

 
Lightboxes
  • If the lightbox is a photo only, use white Cinzel 35 pt above the image (on the black background) for the title

  • Use black 80% opacity for the overlay background

  • Use a white background behind text

  • Close with X icon, not close button

 
Mobile

The mobile website is more flexible than the desktop. Hide elements when necessary, but do not delete them. Make sure that it is up to date with the desktop version.

Procedures

 
Images
If an image is the wrong dimension

There are many ways to change the dimensions of an image. Sometimes cropping the image in Wix is sufficient, but the crop tool is not very good. Sometimes you will need to make the background of the image larger, such as when making a Recent News article, or in adding an image to another element that auto-crops the image. Many tools can make the background larger, but Microsoft Paint is easy to use and comes with Windows.

  1. Open the image with Microsoft Paint

  2. Drag the bottom right corner of the canvas to make it larger

  3. Use the rectangular selector tool to select the original image and drag it to the center of the new canvas

  4. Save the image

  5. Upload the image to Wix

Note: If you need to re-dimension the image but have a clear background, skip to “To remove the background”

If a logo is blurry

This procedure will reduce blurriness in images, but it doesn’t always work well, and works much better with logos/illustrations compared to phots. It’s best to find a clearer image if possible.

  1. Find and download the clearest image easily available; Google is your best option

  2. On Wix, go to Media->Upload Your Media to upload the image

  3. When the image has finished uploading, click on “Adjust”

    1. If the image is black and white, increase the saturation. Otherwise, skip to step b.

    2. Increase the sharpness of the image (under the “Effects” section). The optimal amount to increase the sharpness depends on the image; over-sharpening it can make it look pixelated instead of blurry

  4. Save your changes and delete the old version of the image from Wix by right-clicking and selecting “Move to Trash”

To remove the background

If an image has a solid-color background that needs to be removed, you can do so with Wix:

  1. Upload an image to Wix, or choose an image from the “Choose Media Files” window

  2. Click on “Cut out Background”

  3. Use the tools to adjust any other areas

  4. Save image, and delete old image if necessary

 
To create a Recent News Article

Recent News articles now open a blog. Blog entries show as a thumbnail with a cover photo, title, date, and brief description. When clicked, they open a page that can include a longer description and a photo, video, or gallery. 

  1. Open the “Recent News” page 

  2. Double click on the blog element and click “Add Post” 

  3. Put the image/images into the article 

    1. To add a slideshow, select gallery, add all desired images, and change the layout to slideshow—it should look like a dropdown that says “grid” 

  4. Write the title and body of the article 

    1. Make sure to use proper formatting. The different headers can be used to make subsections if it is a long post 

  5. Click on settings on the left 

  6. The cover image is by default the first photo added to the article, but you can change it to a different image if desired 

  7. Add the published date—it could be present or in the past if you are publishing an old article 

  8. Add a brief summary in the excerpt section 

  9. Click “Publish” 

  10. Click on the three dots on the right for the new post and disable comments 

  11. Go to preview mode to check the formatting of your post 

 
To create a lightbox
  1. On any page, go to Add->Interactive->Lightbox and select the one that most closely matches the design you want

  2. Click “Set Triggers” and select the desired settings. Usually you should not have it open automatically

  3. Change the Overlay Background to black 80% opacity

  4. Change the background to white

  5. Add desired elements

  6. Click the green “Exit Lightbox Mode” button when finished

  7. Go to the element you want to link to the lightbox and click on the link button (see above if linking to a gallery/Recent News, otherwise try left clicking on the element) and select the lightbox

 
To add an article to the employee page bulletin
  1. Click on the repeater, select Manage Items, and duplicate the most recent entry

  2. Write or paste the article, title, and date into their respective text boxes

  3. Do not resize the text boxes. If inserting a video or image, put in enough line breaks in the text box to allow enough room. Resizing the textbox by dragging increases the space on all articles

  4. If adding media to the article, drag into place until it says “Attach to Box”

 
To link an email
  1. Highlight the email/text

  2. In the “Text Settings” popup box, click the link button on the right below font size

  3. Select “Email” and paste the email in the input box.

 
 
 
 
 
 
 
 
 
 
 
 
 
Virginia

202 Church St SE,

Ste 313A  

Leesburg, VA    20175

Homepage     About      Contracts      News      Contact      Careers

Ho'oulu kekahi i kekahi ~ "Growing and uplifting one another"

  • Facebook - White Circle
  • Twitter - White Circle
  • White LinkedIn Icon

Copyright © 2013 Kalani Consulting, Inc. All rights reserved.

Hawaii

Post Office Box 540

Captain Cook, HI 96704