Obys’ Design Books is a curated digital library representing the foundational information and inspiration our crew makes use of and recommends to our college students within the Design Training Sequence. We imagine that bodily books with their distinct textures, weight, and even their scent stay an immortal supply of inspiration that permits us to pause the each day routine and discover a sense of calm and readability.
Mission Backstory
The concept for this challenge got here from a quite simple query. Our college students and followers usually ask us: “What books ought to I learn to get higher at typography or format?” We’ve been answering this in emails and messages for a very long time. Then we thought: why not construct a spot the place all these suggestions can dwell collectively?
We didn’t need a boring checklist or a primary on-line retailer. We wished to create an area that looks like our personal workplace shelf. It took us about three months to carry this to life. The most important turning level was after we determined to vary how navigation works. Normally, you click on a hyperlink and go to a brand new web page. Right here, we wished every little thing to be proper in entrance of you, similar to books on a desk.
The Concept: Making Digital Really feel Actual
The primary purpose was to make the web site really feel “tactile”, that means you’re feeling such as you’re touching one thing actual, not simply clicking pixels.
Every little thing is All the time There
Within the Obys Library, all of the pages are seen on the similar time. They’re stacked on prime of one another. If you need to see a special ebook, you simply carry that “sheet of paper” to the entrance. This makes searching really feel quick and playful. You don’t look forward to a web page to load; you simply transfer issues round.
Paper Textures
To make it really feel like an actual ebook, we added totally different textures to each web page. The pages appear like previous recycled paper. It’s a small element, however it adjustments how you’re feeling in regards to the content material.
Tech Stack & Instruments
We stored our tech stack easy and highly effective. We don’t prefer to overcomplicate issues if we don’t must.
- Frontend: We used HTML, CSS, and JavaScript. We didn’t use large frameworks as a result of we wished whole management over the animations.
- GSAP: That is our principal device for movement. It helps us deal with how the pages transfer, how they stack, and the way they react while you click on them.
- Easy Scroll: We spent quite a lot of time making the scrolling really feel “heavy” and easy, not jumpy. It provides to the sensation that you’re shifting bodily objects.
- Backend: Strapi (Headless CMS). It’s very straightforward to make use of. Our crew can add new books or change descriptions in a couple of minutes with out touching any code.
Characteristic Breakdowns
1. The Manner You Transfer (Navigation)
Since each web page is seen, we needed to give folks other ways to navigate in order that they don’t get confused:
- You possibly can click on the perimeters of the pages.
- You should use a fast menu if you understand what you’re searching for.
- You possibly can open a full-page menu to see the entire assortment directly.
Making these three programs work collectively was the toughest a part of the code.
2. Pure Movement
We didn’t need the pages to only “pop” up. We wished them to slip and settle like paper. We used GSAP to create a “carry” impact. If you click on a ebook, it barely rises after which drops into place. It’s a tiny animation, however it makes the entire web site really feel extra alive.
3. Private Types
Each ebook has its personal model. If you change between them, the accent colours and the grain of the paper change. The web site adapts to the ebook you’re looking at.
Visible & Interplay Design
The design is all about being clear and centered. As a result of there are a lot of pages on the display directly, we needed to be cautious to not make it look messy.
- Colours: We used pure colours – lotions, comfortable grays, and deep blacks. Nothing too vivid or “digital.”
- Fonts: Typography is a large a part of Obys. We used robust, daring headers that appear like ebook covers, and easy fonts for the textual content so it’s straightforward to learn.
- The Grid: Every little thing follows a strict grid, even when it appears to be like just like the books are simply scattered round. This retains the design feeling organized.
Structure & Construction
A giant problem was efficiency. Having many pages with high-quality textures could make an internet site gradual. To repair this, we solely “totally” load the pages which might be close to the highest of the stack. The pages which might be buried deep down are simplified till you begin shifting in the direction of them. This retains the location very quick, even on telephones. We additionally optimized the textures so they give the impression of being nice however don’t take eternally to load.
Web page-by-Web page Notes
- The Intro: We begin with quite a lot of empty house. It’s like a deep breath earlier than you begin studying.
- Guide Particulars: If you choose a ebook, we present the duvet clearly and clarify why we expect it’s vital. We give attention to how this ebook helped us in our work.
- Filters: In the event you solely need to see books about “Typography,” the opposite pages transfer away to the facet. It’s a bodily approach of sorting your desk.
Reflections
Constructing the Obys’ Design Books web site reminded us that typically, the very best concepts come from the “previous” world, like books and paper.
What was robust: The toughest half was realizing when to cease. We wished so as to add extra results and extra buttons, however we realized it was making the location too busy. We needed to take away issues to maintain it easy and calm.
What we beloved: We love that this isn’t only a “challenge” – it’s a device. We use it ourselves, and our college students use it. It’s an awesome feeling to construct one thing that truly helps folks discover their subsequent favourite ebook.
What’s subsequent: Those that have been following our crew for a very long time know that we love creating academic websites. We began years in the past with Typography Rules and our highly regarded Grids challenge. For us, the ODB web site is a pure continuation of that journey. It looks like a basis that brings all our earlier work collectively.
It summarizes what we’ve constructed to date, however it additionally hints that there are nonetheless many subjects we haven’t coated but. There’s a lot extra to discover, and this challenge proves that there’s nonetheless an enormous subject for brand spanking new academic web sites and attention-grabbing experiments. We are able to’t wait to point out you what’s subsequent.
