2020-01-03 SPLAT Curiosity Report: Volume 4, Issue 9

Featured Story

Wireframes!

You don’t need to be a fancy front-end developer to build a website. You don’t even necessarily need to know any programming at all. By building wireframes, you can visualize the layout of the website without knowing a word of code.

A wireframe is also known as a low-fidelity prototype. It’s a bare-bones sketch of what a website does or could look like. Forget content, logos, and color palettes completely. A wireframe is the skeleton that the actual content is built on. Try thinking about rectangles. Your computer monitor (or phone, tablet, laptop, whatever) is a rectangle. Within that, your browser window is a rectangle. All the stuff you see on a website is made of rectangles. The search box, navigation bar, pictures, header, background, events calendar- all rectangles.The wireframe just exposes those rectangles. By reducing visually complicated websites to simple outlines, it’s easy to think abstractly about how to present the information on a website in a way that’s easy to use and navigate.

Since we’re talking about a visual concept, a visual example might be helpful. I’ll show you how to make a wireframe out of an existing website. If you’re looking to redo your library’s site, it’s instructive to make wireframes out of other sites you like so you can see the underlying structure of how they set it up, why they may have set it up that way, and how it might be done better.

Here’s the homepage for my employer, the Coeur d’Alene Public Library:

Now, let’s draw some boxes! I pasted this screenshot into Publisher, drew some shapes, changed the border color, and selected “no fill”. There are plenty of other ways to do this, but the end result should be all the information items on the page surrounded by boxes.This allows us to start to view the website design abstractly. Rather than getting buried in presentation details like color or font choice, the underlying information structure begins to become apparent:

The penultimate step is deleting the original image and leaving the boxes intact. We are left with pure structure:

And from here, we apply some conventions of wireframing to add just a hint of context: an X through a box to denote a picture, some basic labels for the buttons, and you’ve got a working wireframe:

Phew! You can add a little more detail to these boxes, but the idea is to keep it simple. You could replace the “NAV” boxes with the actual text of the buttons, for example, or put in some Lorem Ipsum filler text in your text elements. Anyway, the above is an example of a pretty tidy wireframe. For an additional comparison, here’s a wireframe of the Boise State Albertsons Library website:

It’s kinda fun to build frames onto websites. You can see how the designers thought through problems and made compromises. It is interesting to see what layouts and navigation conventions are used in most websites (the library logo also being a link to the home page, the search box being on the right half of the screen). It’s just as interesting to see websites laid out in an atypical format- for example, Coeur d’Alene putting their header information (navigation links, logo, search bar) at the bottom of the screen.

If you’ve enjoyed this brief article, you can use wireframes as a starting point to learn more about web design and information architecture. Does the format of a website change if a visitor is on a mobile phone instead of a desktop computer, or does the user get an itty-bitty version of the full site? Does the site work with a screen reader if a visitor has a vision impairment? Does the header information remain consistent as you navigate around the webpage?

If you’re still awake, you might be interested in the following further reading:

– Tyler McLane, Coeur d’Alene Public Library

Fail Forward

We’ve all been there. You pour your heart into a program, and no one shows up. You try something new, and you fall on your face. Sound familiar? Fail Forward is the place to share your failures, and give you the opportunity to share what you learned from them. Did you promote your program in a different way after no one showed up? Maybe you took a new approach to the new thing you were excited about? Awesome! Share your story via our online form so others can learn, and realize that failure is often part of the process.

Do Librarians Dream of ”Electric” Programs?

I had a dream. An electrifying Neon dream to get summer school kids into the library each week and participate in summer reading. I reached out to the school district, set it up, and even worked out a way to have each of the kiddo’s get a library card. How could this go wrong? It was a DISASTER. First, we had kids who were dropped off for summer school without registration, this meant they didn’t have any parent information to pass on. Second, there were too many kids for our staff to handle on Monday mornings. And thirdly, they had a hard time keeping their books and cards at school and not taking them home. Thus they lost cards, books, and summer reading logs. Staff was frustrated, kids were frustrated, and I was deflated. How could this have gone so wrong? I tried to think of every possible problem…and yet I had missed things. The result? I began taking notes and listing successes and failures. Then right after summer reading I met with staff and school district supervisors, and we made a new plan. Hopefully, next summer I will be better prepared.

– Rasheil Stanger, Valley of the Tetons Library

Is there a library you follow on social media who is always doing new and exciting things? How about a blog you follow that inspires you? What about a new idea, book, or resource that you want to share? Library Crush Corner is a place for those working in Idaho libraries to share what inspires them, and who or what they’re crushing on… in a professional sense. Share your story via our online form so we can publish it in a future issue!

Caldwell Public Library – Menstrual Product Drive

I’m breaking the rules a bit and crushing on my own library. (In my defense, this took place before I joined them.) The Caldwell Public Library saw that there was a lack of resources for low-income women in the area, and hosted a donation drive of menstrual products. The staff assembled kits and placed them in the public restrooms at the library, encouraging anyone to take some if they or someone they knew needed them. You can read more about it here.

– Alex Johnatakis, Caldwell Public Library

SPLAT explores the ever-evolving library world and supports library folks as they adapt to meet the needs of their communities. Library folk throughout the state of Idaho volunteer to serve on the Special Projects Library Action Team (SPLAT). Learn more about SPLAT at splat.lili.org

SPLAT is brought to you by the Idaho Commission for Libraries and was made possible, in part, by the Institute of Museum and Library Services (LS-00-19-0013-19). The views, findings, conclusions, or recommendations expressed in this publication do not necessarily represent those of the Institute of Museum and Library Services.