Loading ...

Responses by Vicky Chung, communications manager, project lead and web designer, Stanford d.school; Scott Doorley, creative director, Stanford d.school; and Alex Tapper, web development and design

Background: The content in the d.school Public Library has been in the works for quite some time. We’d been experimenting and testing ways to help our students dig deeper into design, and we wanted to make these resources and tools accessible to a wider audience—design practitioners, students of design and educators—that surpassed our classroom walls. We borrowed the public library moniker because we love our local public libraries and what they represent: open access to knowledge, a place of growth and room to serve our community.

Design core: The library is organized around two themes: the Library of Ambiguity and the Design Questions Library. We believe the ability to navigate ambiguity is essential to creative work and will only become more and more important as design problems become increasingly complex. We’ve also dug into the breadth of design research that suggests some answers to questions we are often asked about design. We summarized these articles to share what we know—and what is not yet known—about how design works. The site also has room for future additions.

Favorite features: It was a lot of fun incorporating subtle nods to libraries and books in the style and design elements throughout the website; if you look closely, you’ll find a little yellow pencil, book textures and catalog cards to name a few. In the Library of Ambiguity, we wanted to test the boundaries and challenge users to navigate ambiguity while browsing. An interesting design feature is that the color blobs you see on the resource cards actually map to different “design abilities” being used in the resource. Another favorite is the custom animations created by designer and illustrator Radostina Georgieva in the Design Questions Library that heroically transform an often abstract concept to something more tangible. It was important to us to counterbalance the dense academic research with these whimsical animations and lighthearted article summaries.

Challenges: Figuring out how to bring two very different sets of data and experiences under one website. We created data models for each—so much data—and identified commonalities and differences when building our search and filtering. The Venn diagram has become our best friend.

Navigation: Overall, the main navigation for the d.school Public Library is straightforward, but once visitors dive into the individual libraries, they’ll find it transitions to a much more exploratory approach. We wanted users to discover tidbits and find delightful surprises along the way—just like they would in a local library. For example, there’s a pop-up librarian’s desk in the Library of Ambiguity and different ways to search and filter articles and resources. That way if someone wants to return to a specific resource, they can easily do that—or use the various navigation options to unearth something new. Users primarily navigate the Design Questions Library via questions, but we also created a direct index that lets repeat visitors bypass that and dive right into the articles.

Technology: We used Webflow for pretty much everything. The majority of the site’s HTML, CSS and JavaScript were generated using their designer tool. In addition, we are using some custom CSS and JavaScript for some of the more complex interactions. Webflow also hosts all of the content in its CMS. Additionally, we are using Zapier for some of the automation around contact forms, and Swiftype powers the search experience.

dlibrary.stanford.edu

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In