Dokumen ini bertujuan untuk membantu pengguna dalam negeri yang belajar menggunakan Framer, yang mengalami kesulitan karena kurangnya materi dalam bahasa Indonesia, dengan menerjemahkan konten dari blog resmi ke dalam bahasa Indonesia dan menambahkan informasi yang berguna untuk praktik kerja. Semoga bisa memberikan sedikit bantuan bagi Anda yang menggunakan Framer.

Mengapa storytelling penting untuk sebuah situs web?

Situs web yang baik tidak hanya berakhir sebagai sesuatu yang ‘indah saja.’ Kekuatan yang membuat pengunjung terjebak dalam cerita situs dan tetap tinggal sampai akhir adalah storytelling. Dalam desain web, storytelling adalah elemen kunci yang menciptakan perjalanan imersif melampaui pengalaman biasa.

Framer adalah alat yang dioptimalkan untuk mewujudkan situs storytelling semacam itu. Dalam artikel ini, lihatlah 7 contoh situs web nyata yang dibuat dengan Framer, dan temukan bagaimana desain dan storytelling dapat bersinergi, mengubah satu guliran menjadi sebuah perjalanan cerita.

1. Height

Situs web Height menarik perhatian dengan pendekatan yang unik sejak awal. Menggambarkan proses membangun produk sebagai ‘perjalanan waktu melihat masa depan,’ analogi ini membangkitkan empati dan minat pengguna.

Desainnya bersih dan sederhana, dengan garis yang mengalir halus, memandu pengguna secara alami ke masing-masing bagian. Animasi kecil yang bergerak ringan meningkatkan keterlibatan, dan tulisan yang jelas serta rambut-rapi memastikan pengguna tetap tertarik dari awal sampai akhir.

2. NOLO

Situs web NOLO menggambarkan proses penggalangan dana yang mudah untuk siapa pun di kota kecil sebagai ‘pengalaman menyenangkan seperti bermain game’. Pengunjung merasa diundang ke dalam sebuah cerita, bukan sekadar penjelasan.

Desain yang cerah dan dinamis sama-sama menyampaikan energi aplikasi, dan saat menggulir, tiap bagian berlanjut seperti lembaran slide. Tujuan aplikasi, masalah yang ingin dipecahkan, serta solusi kreatifnya hadir secara berurutan, menciptakan cerita yang natural. Tulisan yang jelas dan animasi yang terhubung halus membuat pengunjung ingin membaca hingga akhir.

Pergi ke situs

3. Unifiers of Japan

Situs web Unifiers of Japan langsung memikat dengan elemen visual yang kuat dan animasi menarik. Situs ini bukan hanya ruang untuk menghormati Oda Nobunaga, tetapi sebuah perjalanan historis ke dalam kehidupan seorang ‘tokoh legendaris yang memulai penyatuan Jepang’.

Grafik tebal dan transisi halus menyatu untuk menyampaikan cerita secara hidup. Tiap visual dan elemen interaktif tidak sekadar dekorasi, tetapi dirancang untuk pendalaman cerita, dan cerita yang berkembang secara alami melalui scrolling membuat pengguna lebih terlibat dalam sejarah tersebut.

Pergi ke situs

4. Melnūdens Coffee

Situs web Melnūdens Coffee bercerita tentang perjalanan bagaimana ‘sebuah biji menjadi secangkir kopi’, bukan hanya memperkenalkan merek kopi spesial. Dari awal merek hingga cara pengadaan biji berkualitas tinggi, proses roasting dan blending untuk menciptakan cita rasa yang sempurna semuanya disajikan sebagai sebuah cerita.

Desain yang ramping dan animasi yang halus menyampaikan cerita dengan hidup, dan mengarahkan pengguna untuk mengalami setiap tahap proses pembuatan kopi saat menjelajahi halaman. Proses ini melewati sekadar pengenalan produk untuk membangun koneksi emosional dengan merek melalui storytelling.

Pergi ke situs

5. Cancel Culture

Situs web Cancel Culture mengeksplorasi apa yang akan terjadi jika kita ‘menghapus sebagian dari kehidupan’ Abraham Lincoln dengan pandangan modern. Ini adalah ruang yang menyoroti bagian-bagian kontroversial dari masa jabatan Lincoln sebagai presiden, membuat kita berpikir bagaimana sejarah dinilai dengan standar modern.

Warna visual yang kuat dan animasi besar menyampaikan cerita dengan tegas. Peta interaktif yang memuat nama “Lincoln” di seluruh AS menyajikan pengalaman yang memukau. Ketika pengguna menekan tombol “Cancel Lincoln,” nama kota dihapus satu per satu, memberikan pengalaman tidak langsung menghapus warisannya. Interaksi ini melampaui efek visual sederhana, menjadi perangkat yang memicu refleksi mendalam melalui cerita.

Pergi ke situs

6. Mars Rejects

Mars Rejects adalah situs yang berpusat pada 10.000 karakter NFT unik, dan situs itu sendiri terbuka seperti novel grafis. Dengan latar belakang bumi yang hancur dan sekelompok kecil orang penting yang melarikan diri ke Mars, mereka yang tertinggal membangun narasi ‘Mars Rejects’.

Grafik bergaya komik yang digambarkan secara detail dan animasi menyampaikan cerita secara nyata. Setiap bagian situs menampilkan aspek lain dari cerita, dan visual serta cerita menyatu secara organik untuk meningkatkan imersinya.

Pergi ke situs

7. Punkt

Situs web Punkt menyambut pengunjung dengan desain yang seolah menggambar di atas kertas ketika Anda memasukinya. Ini menghadirkan kesan ‘tugas UX writer langsung,’ membuat ruang ini terasa akrab.

Khususnya, grafik yang menggambarkan teks di dalam blender secara intuitif menunjukkan kebingungan dan revisi yang tiada henti. Saat pengguna melayang, huruf-huruf bercampur, memvisualisasikan masalah sehari-hari yang dialami dalam desain secara kreatif. Frasa ‘chaos everywhere’ dan garis bergoyang menggambarkan kesulitan ux writer dengan lebih jelas. Situs ini melampaui penjelasan fungsional, menciptakan koneksi emosional bagi pengguna.

Pergi ke situs

Cara Membuat Situs Storytelling yang Efektif

Untuk membuat situs storytelling di Framer, desain, konten, dan fungsionalitas harus bersatu padu. Ikuti langkah-langkah berikut dan coba buat sendiri.

• Langkah 1. Memvisualisasikan cerita

  Buka kanvas bentuk bebas Framer, dan visualisasikan cerita yang ingin Anda sampaikan.
  Manfaatkan tata letak tanpa batas untuk mengatur alur dan suasana hati yang diinginkan secara bebas.

  
  

• Langkah 2: Memilih font yang tepat

  Dalam storytelling, font adalah alat utama untuk menyampaikan emosi.
  Gunakan font bawaan Framer atau terapkan font kustom untuk memilih tipe huruf yang sesuai dengan tonasi cerita.

  
  

• Langkah 3: Menghubungkan halaman dan bagian

  Hubungkan bagian dan halaman agar pengunjung dapat mengikuti cerita secara alami.
  Gunakan fitur navigasi Framer untuk memastikan cerita tetap tersambung dan berlanjut.

  
  

• Langkah 4: Menambahkan elemen interaksi

  Interaksi memberi kehidupan lebih pada cerita.
  Tambahkan animasi awal, efek scroll dari Framer untuk menyoroti adegan penting dan menciptakan ritme di seluruh situs.

  
  

• Langkah 5: Mengedit teks dengan AI

  Semakin penting teks selain elemen visual dalam storytelling.
  Gunakan fitur AI Rewrite dari Framer untuk membuat teks lebih jelas dan halus. Desain dan teks yang menyatu akan menyempurnakan cerita secara keseluruhan.

Ciptakan Situs Web Menjadi Sebuah Perjalanan

Storytelling bukan sekadar tren, tetapi alat kuat yang mewujudkan koneksi yang mendalam dengan orang-orang. Dengan mengintegrasikan storytelling ke dalam desain web, situs tidak hanya menjadi ruang informasi tetapi serangkaian perjalanan mengasyikkan yang melibatkan pengunjung.

Bagaimana dengan Anda, cerita apa yang ingin Anda paparkan melalui situs web?

Artikel ini diadaptasi dan diterjemahkan dari artikel di blog resmi Framer ‘7 professional storytelling websites: UX Narrative case studies’.