Buku Desain oleh Orbis: Ubah daftar bacaan Anda menjadi perpustakaan online yang taktil – Beragampengetahuan

Buku Desain Orbis adalah perpustakaan digital yang dikuratori dengan cermat yang mewakili pengetahuan dasar dan inspirasi yang digunakan dan direkomendasikan oleh tim kami kepada siswa kami. Seri Pendidikan Desain. Kami percaya bahwa buku fisik, dengan tekstur, berat, dan bahkan baunya yang unik, tetap menjadi sumber inspirasi abadi, memungkinkan kita untuk menghentikan sementara kehidupan sehari-hari dan menemukan rasa tenang dan jernih.

Latar belakang proyek

Ide proyek ini berasal dari pertanyaan yang sangat sederhana. Siswa dan pengikut kami sering bertanya kepada kami: “Buku apa yang harus saya baca untuk lebih memahami tipografi atau tata letak?” Kami telah lama menjawab pertanyaan ini melalui email dan pesan. Lalu kami berpikir: mengapa tidak membangun tempat di mana semua usulan ini bisa hidup berdampingan?
Kami tidak memerlukan daftar yang membosankan atau toko online dasar. Kami ingin menciptakan ruang yang terasa seperti rak kantor kami sendiri. Kami membutuhkan waktu sekitar tiga bulan untuk mewujudkannya. Titik balik terbesar adalah keputusan kami untuk mengubah cara kerja navigasi. Biasanya, Anda mengeklik tautan dan membuka halaman baru. Di sini kami ingin semuanya ada di depan Anda, seperti buku di atas meja.

Konsep: Membuat angka menjadi nyata

Tujuan utamanya adalah membuat situs web terasa “sentuhan”, yang berarti Anda merasa seperti sedang menyentuh sesuatu yang nyata, bukan sekadar mengeklik piksel.

semuanya selalu ada

Di Perpustakaan Orbis, semua halaman terlihat secara bersamaan. Mereka ditumpuk satu sama lain. Bila ingin membaca buku lain, cukup bawa “kertas” itu ke depan. Hal ini membuat browsing terasa cepat dan menyenangkan. Anda tidak perlu menunggu halaman dimuat; Anda hanya memindahkan sesuatu.

tekstur kertas

Untuk membuatnya terasa seperti buku sungguhan, kami menambahkan tekstur berbeda pada setiap halaman. Halaman-halamannya tampak seperti kertas daur ulang bekas. Ini adalah detail kecil, tetapi mengubah perasaan Anda terhadap kontennya.

Tumpukan teknologi dan peralatan

Kami menjaga tumpukan teknologi kami tetap sederhana namun kuat. Kami tidak suka memperumit masalah jika tidak perlu.

• ujung depan: kami telah menggunakan HTML, CSS, dan JavaScript. Kami tidak menggunakan bingkai besar karena kami ingin kontrol penuh atas animasinya.
• Rencana evaluasi keseluruhan: Ini adalah alat utama gerakan kami. Ini membantu kita mengetahui bagaimana halaman dipindahkan, bagaimana halaman ditumpuk, dan bagaimana reaksi halaman ketika diklik.
• Pengguliran halus: Kami menghabiskan banyak waktu untuk membuat pengguliran terasa “berat” dan mulus, bukannya gelisah. Ini menambah perasaan bahwa Anda sedang menggerakkan benda fisik.
• bagian belakang: Strapi (CMS Tanpa Kepala). Ini sangat mudah digunakan. Tim kami dapat menambahkan buku baru atau mengubah deskripsi dalam hitungan menit tanpa menyentuh kode apa pun.

Kerusakan fungsi

1. Cara Anda bergerak (navigasi)

Karena setiap halaman terlihat, kami harus memberi orang cara bernavigasi yang berbeda agar mereka tidak bingung:

• Anda dapat mengklik di tepi halaman.
• Jika Anda tahu apa yang Anda cari, Anda dapat menggunakan menu cepat.
• Anda dapat membuka menu satu halaman penuh untuk melihat seluruh koleksi sekaligus.

Membuat ketiga sistem ini bekerja sama adalah bagian tersulit dari kode ini.

2. Gerakan alami

Kami tidak ingin halaman tersebut “muncul begitu saja”. Kami ingin mereka meluncur dan stabil seperti kertas. Kami menggunakan GSAP untuk menciptakan efek “angkat”. Saat Anda mengklik sebuah buku, buku itu akan naik sedikit dan kemudian jatuh ke tempatnya. Ini adalah animasi kecil, tetapi membuat keseluruhan situs terasa lebih hidup.

3. Gaya pribadi

Setiap buku mempunyai gaya tersendiri. Warna aksen dan tekstur kertas berubah saat Anda beralih di antara keduanya. Situs ini menyesuaikan dengan buku yang Anda lihat.

Desain visual dan interaksi

Fokus desainnya adalah kebersihan dan fokus. Karena ada begitu banyak halaman di layar pada saat yang bersamaan, kita harus berhati-hati agar tidak terlihat berantakan.

• warna: Kami menggunakan warna-warna alami – krem, abu-abu lembut, dan hitam pekat. Tidak ada yang terlalu terang atau “digital”.
• Jenis huruf: Tipografi adalah bagian penting dari Obys. Kami menggunakan judul tebal yang terlihat seperti sampul buku, dan font teks sederhana agar mudah dibaca.
• kisi: Semuanya mengikuti grid yang ketat, meski sepertinya buku-bukunya berserakan di sana-sini. Hal ini membuat desain terasa terorganisir.

Arsitektur dan Struktur

Tantangan besarnya adalah kinerja. Memiliki banyak halaman dengan tekstur berkualitas tinggi dapat memperlambat situs Anda. Untuk mengatasi masalah ini, kami hanya memuat halaman “sepenuhnya” di dekat bagian atas tumpukan. Halaman-halaman yang terkubur dalam-dalam disederhanakan sampai Anda mulai membukanya. Hal ini membuat website menjadi sangat cepat, bahkan di ponsel. Kami juga telah mengoptimalkan tekstur sehingga terlihat bagus namun tidak memakan waktu terlalu lama untuk dimuat.

Anotasi halaman demi halaman

• Perkenalan: Kami mulai dengan banyak ruang putih. Ini seperti menarik napas dalam-dalam sebelum mulai membaca.
• Detail buku: Saat Anda memilih buku, kami memperlihatkan sampulnya dengan jelas dan menjelaskan mengapa menurut kami buku itu penting. Kami fokus pada bagaimana buku ini membantu kami dalam pekerjaan kami.
• Menyaring: Jika Anda hanya ingin melihat buku tentang “tipografi”, halaman lainnya akan disingkirkan. Ini adalah cara fisik untuk mengatur meja Anda.

Cerminan

Membangun situs web Orbis Design Books mengingatkan kita bahwa terkadang, ide terbaik datang dari dunia “lama”, seperti buku dan kertas.

Apa yang sulit: Bagian tersulitnya adalah mengetahui kapan harus berhenti. Kami ingin menambahkan lebih banyak efek dan tombol, namun kami menyadari hal ini membuat situs terlalu sibuk. Kami harus menghapus beberapa hal agar semuanya tetap sederhana dan tenang.

Yang kami sukai: Kami senang bahwa ini bukan sekedar “proyek” – ini adalah sebuah alat. Kami menggunakannya sendiri dan siswa kami menggunakannya. Senang rasanya membangun sesuatu yang benar-benar membantu orang menemukan buku favorit mereka berikutnya.

Selanjutnya: Anda yang sudah lama mengikuti tim kami pasti tahu bahwa kami senang membuat website pendidikan. Kami memulainya beberapa tahun yang lalu Prinsip tata letak serta kami yang sangat populer jaringan proyek. Bagi kami, situs ODB merupakan kelanjutan alami dari perjalanan ini. Rasanya seperti sebuah fondasi yang menyatukan semua pekerjaan kami sebelumnya.

Ini merangkum apa yang telah kami bangun sejauh ini, namun juga mengisyaratkan bahwa ada banyak topik yang belum kami bahas. Masih banyak yang perlu dijelajahi, dan proyek ini membuktikan bahwa masih ada peluang besar untuk situs web pendidikan baru dan eksperimen menarik. Kami tidak sabar untuk menunjukkan kepada Anda apa yang akan terjadi selanjutnya.