1. Style Guide

By default, we set the guides with vertical navigation to make it less confusing when the layout changes when viewing it on a mobile device. The boxes don't follow the left-to-right rule, but rather by column.

Since the guides are one large column, try to prevent the chance of having to scroll down the page too far. You'll lose the reader's attention.

• Chunk your information into multiple pages, making steps to a process.
• Use different box types to make the page more eye-catching and less list-like scrolling.
  • Standard
    Great for directions and basic content.
  • Tabbed
    Great for grouping like-items.
    Prevents endless list-scrolling.
  • Gallery
    Great for grouping like-items that have a visual element, like book covers. 
    The settings allow for multiple rows of contents and auto-scrolling features. This allows the viewer to passively explore the content.

ISBN

• Use this to easily get the bibliographic information and book cover.
• After the fields have filled, delete the ISBN field.

Title Field

• Include the title and subtitle
• Include the modality in parentheses (Print) or (eBook)
  This is for us and the end-user to easily identify what format the book will be in. We use it to easily select which copy we want to reuse.
  We typically avoid keeping the publication dates and other bibliographic fields because it adds more lines and text that students will not read.

Publication Date

• Delete

Call Number 

• Use only when it is a print book, as necessary.

URL

• Enter the catalog page URL for print books.
• Enter the permanent link for the ebooks.

Description

• Use only if necessary. Students are not likely to read.

Create a Media/Widget instead of linking out to videos. This diversifies the way we present content on the page.

Make sure to have a small descriptor of what the asset is: How to Study (video). This makes it easy to know when we are looking to reuse content what it is.

When you want an embedded item, like a video, to be center-aligned in the box, you can add a little code int he widget asset.

<iframe width="560" height="315" src="https://www.youtube.com/embed/OdfEmLOy4sM" frameborder="0" allowfullscreen class="center-block"></></iframe>

For optimal user experience (UX), use the minimal amount of text possible. People skim pages and are not likely going to read full paragraphs of information.

• Use bullet points were needed to break up the information.
• Break information up with headings.

Below are the Lone Star branded colors. Red and blue are the main colors.

Campaign Colors

Typography

These are the six fonts used in LSCS branded communications.

• Trajan Regular -Trajan Regular is a Lone Star College font.
  This is only in all capital letters and is used for headlines.
  Large and small caps may be used.
   
• Futura Bold - Futura Bold is a primary Lone Star College font.
  This is used in upper and lowercase letters for headlines and subheads.
   
• Futura Book - Futura Book is a primary Lone Star College font. 
  This is used in upper and lowercase letters for text on printed items. Futura is preferred over Arial.
   
• Arial Black - Arial Black is a primary Lone Star College font.
  This font is used if Futura Bold is not available.
   
• Arial Regular - Arial is a primary Lone Star College font.
  Use Arial regular if Futura Book is not available.
   
• Garamond - Garamond is a secondary Lone Star College font.
  Use this serif font on large and text-heavy booklets and documents.

Other Design Fonts

In rare cases, when designing for special audiences such as children, other fonts may be used in headlines and titles. Consult the Public Information Council member at your location. See also “Performance Posters” elsewhere in this style guide.