Obys’ Design Books is a curated digital library representing the foundational data and inspiration our workforce makes use of and recommends to our college students within the Design Schooling Sequence. We consider that bodily books with their distinct textures, weight, and even their scent stay an immortal supply of inspiration that permits us to pause the day by day routine and discover a sense of calm and readability.
Undertaking Backstory
The thought for this mission 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 structure?” 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 record or a primary on-line retailer. We needed 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 once we determined to vary how navigation works. Normally, you click on a hyperlink and go to a brand new web page. Right here, we needed every part to be proper in entrance of you, identical to books on a desk.
The Thought: Making Digital Really feel Actual
The principle aim was to make the web site really feel “tactile”, that means you are feeling such as you’re touching one thing actual, not simply clicking pixels.
Every thing is All the time There
Within the Obys Library, all of the pages are seen on the similar time. They’re stacked on high of one another. If you wish to see a unique e-book, you simply carry that “sheet of paper” to the entrance. This makes looking really feel quick and playful. You don’t anticipate a web page to load; you simply transfer issues round.
Paper Textures
To make it really feel like an actual e-book, we added completely different textures to each web page. The pages appear to be previous recycled paper. It’s a small element, nevertheless it adjustments how you are feeling concerning 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 need to.
- Frontend: We used HTML, CSS, and JavaScript. We didn’t use huge frameworks as a result of we needed complete management over the animations.
- GSAP: That is our important instrument for movement. It helps us deal with how the pages transfer, how they stack, and the way they react once you click on them.
- Easy Scroll: We spent plenty 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 simple to make use of. Our workforce can add new books or change descriptions in a couple of minutes with out touching any code.
Characteristic Breakdowns
1. The Approach 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 may click on the perimeters of the pages.
- You need to use a fast menu if you realize what you’re in search of.
- You may 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 needed them to slip and settle like paper. We used GSAP to create a “elevate” impact. If you click on a e-book, it barely rises after which drops into place. It’s a tiny animation, nevertheless it makes the entire website really feel extra alive.
3. Private Types
Each e-book has its personal fashion. If you swap between them, the accent colours and the grain of the paper change. The web site adapts to the e-book you’re looking at.
Visible & Interplay Design
The design is all about being clear and centered. As a result of there are numerous pages on the display screen directly, we needed to be cautious to not make it look messy.
- Colours: We used pure colours – lotions, mushy grays, and deep blacks. Nothing too vivid or “digital.”
- Fonts: Typography is a big a part of Obys. We used robust, daring headers that appear to be e-book covers, and easy fonts for the textual content so it’s simple to learn.
- The Grid: Every thing follows a strict grid, even when it seems to be just like the books are simply scattered round. This retains the design feeling organized.
Structure & Construction
An enormous problem was efficiency. Having many pages with high-quality textures could make a web site sluggish. To repair this, we solely “totally” load the pages which can be close to the highest of the stack. The pages which can be buried deep down are simplified till you begin shifting in the direction of them. This retains the positioning very quick, even on telephones. We additionally optimized the textures so they give the impression of being nice however don’t take perpetually to load.
Web page-by-Web page Notes
- The Intro: We begin with plenty of empty area. It’s like a deep breath earlier than you begin studying.
- Guide Particulars: If you decide a e-book, we present the quilt clearly and clarify why we predict it’s essential. We concentrate on how this e-book helped us in our work.
- Filters: Should you solely wish to see books about “Typography,” the opposite pages transfer away to the facet. It’s a bodily method of sorting your desk.
Reflections
Constructing the Obys’ Design Books website reminded us that generally, the perfect concepts come from the “previous” world, like books and paper.
What was robust: The toughest half was understanding when to cease. We needed so as to add extra results and extra buttons, however we realized it was making the positioning 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 “mission” – it’s a instrument. 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 e-book.
What’s subsequent: Those that have been following our workforce for a very long time know that we love creating instructional websites. We began years in the past with Typography Rules and our highly regarded Grids mission. For us, the ODB website 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 thus far, nevertheless it additionally hints that there are nonetheless many matters we haven’t lined but. There may be a lot extra to discover, and this mission proves that there’s nonetheless an enormous area for brand new instructional web sites and attention-grabbing experiments. We are able to’t wait to point out you what’s subsequent.
