Written by on September 29, 2014

Introducing our updated and integrated Out Loud blog

Hey everyone! This is Tyler Deitz, the library’s new web developer student assistant. Starting this summer I have been working on a new iteration of our library’s excellent Out Loud blog, with the main task of unifying the blog’s layout with our website’s current design.

Here’s how it used to look:

A snapshot of the blog's previous layout.

A snapshot of the blog’s previous layout

Out Loud’s old layout certainly was good, but it just didn’t match the design themes of our main site. Here were our goals:

  • Implement the top navigation bar that structures all of lib.calpoly.edu
  • Use a standard typeface that compliments the rest of the website while also making text easy to read
  • Keep visual elements simple and organized
  • Use responsive design for all screen sizes and form factors

Collected drafts and notes

Collected drafts and notes

This was a very iterative design process. Most of my work was simply prototyping new elements of the interface and seeing what was working and what wasn’t. Here are some things that just couldn’t make the cut to production:

Testing out how to reveal more navigation elements when interacting with the logo. It turns out this action is impossible to recreate on a touch screen, and too subtle to use as an interface.

IMG_3152Links to other articles on a post’s page. This concept was toned down and matured into the category tags visible above the title image.

outloudMainFull width banner image. We found that this resembled the library’s homepage too much, as well as put less emphasis on the category list by moving it vertically down the page.

Screen Shot 2014-09-27 at 3.52.54 PMFinal iteration before launch!

New features:

  • Article images now appear as you scroll through the landing page
  • Mousing over an article snippet reveals the post’s featured image on the landing page
  • Post dates are now simplified into how many days/weeks/months ago they were published on the landing page (full date is available on the post’s page)
  • Post text is now larger and more readable
  • Blog now scales seamlessly into a mobile-view for phones and tablets
  • All other main pages on the libraries site are easily accessible with the top navigation bar
  • Media in posts can be larger than before, allowing videos and images to be prominent forms of publication

What we finally came up with is a solid publication platform for all members of the library to showcase their work and ideas. For the next few weeks I’ll be working on integrating our new posts into our website’s homepage, so the blog can get the exposure it deserves. Check it out!

Read more on earn by doing and Kennedy Library Out Loud!.