Skip to main content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.
Ask Us

LibGuide Design Basics: Layout & Design

This guide provides tips and resources to FSCJ librarians create LibGuides.

Best Practices for LibGuide Layout

Website Design

ORGANIZING YOUR PAGES

STRUCTURING YOUR GUIDE

  • Don't have a double-row of tabs
  • Don't have a LibGuide that is only one page of content

VISUAL APPEAL

  • Only underline if the text is hyperlinked.
  • Utilize the recommended color schemes whenever possible  

FSCJ BRAND AND STYLE GUIDE

  • Use the FSCJ Brand and Style Guide in your design
  • The guide has specific information about web design elements such as color palettes and typography 

Navigation Options

To Tab or Not to Tab?

LibGuides 2 allows you to stick with traditional tab layout OR you can switch and have a side navigation menu on the left of the screen. Click on the Side Navigation tab above to see what this new display looks like.

Make LibGuides More Like Tutorials

LibGuides 2 allows you to easily attach Preview and Next buttons to the bottom of your pages. Click on the Tutorial Buttons tab above to learn more.

PLEASE NOTE: FSCJ is currently using the "tabbed" navigation as a default.  Please continue to use the "tabbed" layout. 

he side navigation option creates a left-side menu bar for each of your pages. 

Screenshot of Side Navigation example


Screenshot of Guide Navigation Layout option to select Side Navigation instead of Tabbed

 

To use the Side Navigation option:

  1. Select Guide Navigation Layout under the Edit Guide icon. 
  2. Select the Side Nav. option
  3. Check boxes if you wish to display subpages or box headers.

The Previous / Next buttons are easy ways for users to navigate through your guides. When this option is selected, the previous and next buttons will automatically show using the titles you have created for your pages.

Screenshot view of previous and next buttons at bottom of page


To add Tutorial Buttons:

     1.  Click on Prev / Next Links in the Edit Guide menu

Screenshot of Previous and Next buttons

     2. In the box that pops up, check the box to display the buttons and click Save.

Naming Your Pages

When naming your pages, be CONCISE, CLEAR, and CONSISTENT.


AVOID LIBRARY JARGON. Always consider your audience. For students, articles is a lot less ambiguous than databases or WMS. Remember that students are less likely to click on something that they don't understand, so even having an explanation on the page will not necessarily be enough.

MAKE SURE THE NAME OF THE PAGE SUMMARIZES ALL ITS CONTENT.  If the page includes links to websites, books, and journals, make sure the link says Recommended Resources instead of just Websites. 

ESTABLISH A CLEAR PURPOSE AND NAVIGATION FOR THE GUIDE. If you want students to progress through your guide in a certain way, consider renaming the homepage, adding prev/next buttons, or even adding Step 1, Step 2 helpers to the names of your guide pages.


Examples:

Social Media and Chat Boxes

Whenever possible, try to use one of our templates or reusable resources "mapped" boxes.  This will allow us to easily update all boxes with one edit.  We recommend that you add the Social Media box to the upper right of the page and the Ask Us! box to the lower left.  You should remove the border for the Social Media box by clicking on the pencil to edit. See instructions below.

License and Attributions

Creative Commons Attribution License This guide has been adapted from Butler University LibrariesButler LibGuides: Standards & Best Practices under the Creative Commons Attribution 4.0 International (CC BY)