×

Web Design Guidelines

I. About

The LoneStar.edu style guide is essential documentation for contributors working on the website, enforcing standards for a consistent design across its numerous pages. It serves as a reference for content authors, web designers, information architects, and developers, ensuring accountability and guiding the addition or modification of content.

Please note that myLoneStar, iStar, Employee Intranet, SharePoint, D2L and Portal services are a separate portal and all pages are managed through the Office of Technology Services (OTS).

II. What to Avoid

lonestar college logo

Logos - Avoid adding logos on images. The website already has a LSC logo on it and additional logo usage is not necessary.

qr code

QR Codes - Avoid adding QR codes on images. QR codes on the website are not feasible on websites, especially on mobile devices. If you have an event that has a link, please provide that link on the webpage itself and attach the event information as a PDF on the site instead.

example poster

Posters/Flyers - Uploading posters on websites is strongly discouraged due to ADA violations. Poster text is not picked up by screen readers, limiting accessibility. It's best practice to type out important event information directly on the website or provide a link to the PDF version of the flyer. This improves accessibility and ensures everyone can access the details.

pulsing gif example

GIFs - Avoid using GIFs on websites due to ADA concerns and accessibility limitations. Screen readers may not interpret GIFs, impacting content reach. To ensure a more inclusive user experience, consider providing essential information in text format on the website.

code example

Borrowing Code - DO NOT BORROW CODE. Avoid using code from other sources, whether within LSC or external websites. Do NOT alter templates. If you need a page redesign or additional features, submit a ticket to the Web Services team using the provided link. A web designer will contact you and guide you through any web needs. 

III. Image Styling

IV. Text Styling

Dos

  • Consistent Font Sizes: Maintain consistent font sizes for a cohesive look.
  • Whitespace: Use ample whitespace to enhance readability and avoid clutter.
    Shift+Enter = Single space, Enter = Double Space
  • Hierarchy: Apply heading tags (h2, h3, etc.) to create a visual hierarchy.
  • Line Length: Keep lines of text at a moderate length for comfortable reading.

Don'ts

  • Inconsistent Font Sizes: Avoid abrupt changes in font sizes that may confuse readers.
  • Excessive Italics or Bolding: Limit the use of italics and bolding for emphasis to prevent visual overload.
  • Long Paragraphs: Break up long paragraphs to make the text more digestible.
  • Ignoring Accessibility: Don't overlook accessibility considerations, such as ensuring text is readable for users with visual impairments.

V. Button Styling

Dos

  • Clear Call-to-Action (CTA): Ensure buttons have a clear purpose and guide users with a specific action.
  • Consistent Styling: Maintain a uniform design for buttons throughout the website for a cohesive look.
  • Adequate Size: Buttons should be large enough to click comfortably but not too overwhelming.
  • Whitespace: Leave enough space around buttons for clarity and to avoid visual clutter.
  • LSC Buttons:

Blue Button White Button White Button Outline 

Graphic button example:
Images with simple designs and short text may be used in place of a traditional button. However these images would still require alt text. Please use sparingly and keep contrast, font size, and image size in mind when using this option.

Registration Event Signup button
Example graphic button size: 150 x 93 px, 72 dpi, font size 20


Don'ts

  • Flyers/PDFs Thumbnails: Don't use a thumbnail of a file as a button, replace them with a link or an actual button.
  • Vague Labels: Avoid using unclear or confusing button labels that don't convey the intended action.
  • Tiny Buttons: Avoid making buttons too small, which may lead to misclicks, especially on touch devices.
  • Cluttered Placement: Don't overcrowd buttons; leave enough space around them for clarity.
bad button example flyer bad button example flyer
bad button with cursive font bad button with too much text

VI. Publishing Pages

Once content is released for publication, the update will be included in the next batch publishing job, which currently runs every night Monday through Saturday. If content must be published immediately in the case of emergencies or time-sensitive materials, please contact the LSC Web Services Team at SO-WebServices@LoneStar.edu.

Make LSC part of your story.