Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

Praktik terbaik untuk membuat Cerita Web yang sukses

Important: this documentation is not applicable to your currently selected format websites!

Cerita Web adalah format bercerita yang dapat diketuk, dibagikan dengan mudah, dan menghanyutkan. Cerita Web dibuat dengan menggunakan bagian dari kerangka kerja AMP. Cerita Web adalah peluang bagi pencipta dan penayang untuk membuat struktur konten dalam pengalaman pertama di perangkat seluler yang menarik, layar penuh, dan dengan visual yang kaya bagi pengguna.

Cerita Web dapat dinikmati dengan ringan, dan pembaca menyukai potongan cerita pendek dalam waktu mereka yang singkat. Saat menunggu kereta atau membeli kopi membuka peluang untuk konsumsi konten yang dipadatkan. Pastikan bahwa setiap bagian menarik dan menyenangkan dengan mengikuti praktik terbaik untuk membuat Cerita Web ringan dan memuaskan.

Selayang pandang

Poin-poin utama dalam membuat Cerita Web yang ringan dan memuaskan:

  • Sampaikan cerita yang lengkap dan menarik.
  • Maksimalkan dampak halaman sampul Anda dengan gambar bermutu tinggi dan judul yang memikat.
  • Jadikan visual dengan video dan gambar yang pas dan memenuhi layar pengguna.
  • Anda dapat menyampaikan banyak hal dengan menggunakan lebih sedikit sumber daya, khususnya saat menggunakan gambar visual. Targetkan untuk mempertahankan teks di bawah 10 kata per halaman.
  • Jika menggunakan video, yang lebih pendek adalah yang terbaik, jadi cobalah untuk menggunakan durasi kurang dari 15 detik.
  • Ada orang dan situasi yang mengharuskan melihat layar tanpa suara. Jaga konten agar tetap terkait dengan menambahkan teks untuk video.
  • Beri pembaca sesuatu untuk diketuk. Cerita dengan panjang sekitar 10 hingga 20 halaman memungkinkan penulis pada umumnya untuk menyampaikan narasi yang baik.
  • Jangan berlebihan menggunakan animasi atau sematan, dan perhatikan pengaturan waktu transisi.

Mengetahui narasi Anda

Rencanakan pengantar cerita, buat cerita mini sempalan (arc), dan bangun menjadi narasi yang lengkap. Setelah Anda mengetahui apa yang ingin Anda sampaikan, bagi menjadi beberapa bagian. Setiap halaman Cerita Web harus menyampaikan satu ide yang erat kaitannya dengan yang lain.

Konten menarik dan memuaskan

Setiap Cerita Web harus mempunyai minimal 4 halaman dan idealnya kurang dari 30 halaman. Cerita Web harus disampaikan dengan baik dan mudah untuk dinikmati. Jika diperlukan untuk narasi Anda, buat lebih dari 30 halaman.

Pengemasan: Pilih saya!

Halaman sampul Anda adalah kemasan Cerita Web Anda. Ini adalah hal pertama yang akan dilihat pengguna, dan jika mereka tidak membuka cerita web Anda, itu akan menjadi satu-satunya hal yang mereka lihat. Pastikan sampul Anda memikat! Sebuah halaman sampul yang baik mempunyai dua elemen, gambar yang menarik perhatian dan judul pendek yang mengesankan.

Informasi visual

Gunakan video gambar potret bermutu tinggi yang memenuhi seluruh layar. Buat penggemar tahu bahwa itu adalah merek Anda dengan menyertakan ikon web (favicon) dan logo.

Judul

Buat judul yang jelas dan rapi, idealnya di bawah 10 kata dengan jumlah karakter kurang dari 40. Sertakan nama penulis dan publikasi serta tambahkan tanggal publikasi jika cerita tersebut terbatas waktu.

Merek dan tanggal

Pembaca perlu mengetahui siapa yang menayangkan Cerita Web tersebut dan kapan. Sertakan atribusi merek dan tanggal publikasi pada halaman sampul. Ini akan menumbuhkan rasa percaya dan, jika pengguna menyukai konten Anda, loyalitas. Cerita Web dari CNN tentang perjalanan di Italia membuat walau hanya dilihat sekilas, mudah untuk melihat penayangnya dan tanggalnya.

Kepuasan visual

Pikat pembaca datang dengan visual bermutu yang menarik perhatian mereka, dan teks yang dapat mereka baca dengan mudah dan cepat. Utamakan untuk menggunakan gambar dan video bermutu tinggi, namun tambahkan daya tarik animasi jika memungkinkan.

Semua gambar dan video harus memenuhi seluruh layar dengan penggunaan letterboxing minimal jika memungkinkan.

Video

Video membuat pembaca sangat betah, pastikan untuk menyertakan sebanyak mungkin di dalam Cerita Web Anda. Targetkan video dengan durasi kurang dari 15 detik. Jika video Anda lebih panjang, pertimbangkan untuk membaginya menjadi beberapa potongan kecil.

Cerita Web dinikmati dalam mode potret, jadi perhatikan yang berikut ini:

  • Rekam video dengan perangkat seluler canggih, jika memungkinkan.
  • Rekam pada 480p.
  • Rekam dalam minimal 24 bingkai per detik.
LAKUKAN JANGAN LAKUKAN
Video dengan bleed (lebihan) penuh ini membantu pembaca berfokus pada satu subjek utama. Video lanskap ini kekurangan rasa mendalam dan dapat membuat perhatian pembaca teralih.

Pastikan konten Anda dapat diakses. Ubah ukuran video untuk menyisakan ruang bagi teks dan keterangan video di bagian bawah. Tidak semua pembaca akan dapat, atau ingin, mendengar konten video.

LAKUKAN JANGAN LAKUKAN
Keterangan video membantu audiens Anda tetap tertarik, bahkan saat mereka tidak bisa mendengar audionya. Tanpa keterangan, audiens Anda harus bisa mendengar audio agar dapat memahami cerita Anda. Hal ini dapat membatasi siapa yang tetap terlibat dengan konten Anda dan kapan mereka dapat melakukannya.

Gambar

Gunakan gambar layar penuh dan format potret dengan resolusi yang bagus (828 x 1.792).

Hindari foto yang dipotong untuk menjadi lanskap.

Potong dengan bijak

Jaga fokus tetap pada hal penting. Potong elemen yang tidak perlu atau mengganggu perhatian, dan pastikan subjek utama foto ini berada pada fokus dan lengkap. Ingatlah bahwa bagian atas dan bawah mungkin terpotong pada beberapa perangkat, jadi harap periksa hal-hal ini.

LAKUKAN JANGAN LAKUKAN
Gambar ini dipotong agar sesuai dengan konten halaman dan mendukung ide utama. Potongan seperti ini membuat fokus pembaca tidak jelas harus ke mana dan pesan apa yang ingin disampaikan gambar ini juga tidak jelas.

Teks

Pastikan teksnya dapat dibaca. Ukuran font 24 sebaiknya menjadi ukuran minimum yang digunakan, namun buat sebesar dan semudah mungkin untuk dibaca. Warna teks yang kontras dengan gambar atau latar belakang halaman cerita. Jangan sertakan gambar atau video yang hanya berupa teks.

LAKUKAN JANGAN LAKUKAN
Kontras yang tinggi membuat kata-kata mudah dilihat. Dengan kontras rendah, kata-kata Anda mungkin berbaur sehingga kata-katanya sulit dibaca dan ceritanya susah dipahami.
Menyorot teks dapat membuat kata-kata menonjol dan membantu pembaca Anda tetap berfokus pada cerita Anda. Menggunakan teks berwarna pucat di atas gambar yang ramai membuat kata-kata sulit dibaca.

Penyajian Kecil

Teks sebaiknya disajikan dalam porsi kecil, bukan porsi besar. Cobalah menjaganya di bawah 200 karakter atau kurang per halaman.

Perlakukan detail seperti daftar bahan, sediakan, tapi hanya jika diminta oleh pengguna. Sertakan konten teks dalam bentuk panjang pada lampiran halaman. Lampiran halaman menyampaikan kepada pengguna bahwa masih ada yang bisa dibaca. Mereka dapat mengusap pada perangkat jika tertarik.

Halaman dengan konten teks yang lebih panjang dibanding kalimat mungkin tidak dapat dihindari. Cobalah agar ini tidak menggunakan lebih dari 10% dari total halaman cerita.

LAKUKAN JANGAN LAKUKAN
Cobalah menjaga teks hanya untuk hal-hal penting. Membeda-bedakan ukuran dan gaya pengetikan untuk membagi blok teks dapat meningkatkan penglihatan sekilas. Dinding teks besar seperti ini bisa sulit dibaca dan mungkin menyurutkan keinginan untuk terlibat dengan cerita Anda.

Animasi

Animasi sangat menarik jika dilakukan untuk suatu tujuan, seperti menambahkan gerakan pada gambar statis. Anda dapat membuat gambar dan aset menjadi animasi dengan efek fly-in, rotasi, atau fade-in.

LAKUKAN JANGAN LAKUKAN
Gerakan di dalam contoh ini membantu mendukung ide utama dan menambahkan elemen dinamis pada halaman. Halaman statis ini fungsional, namun mungkin melewatkan peluang untuk lebih terlibat dengan pembaca.

Namun, gunakan secukupnya, karena animasi dapat menjadi tidak menyenangkan jika digunakan secara berlebihan. Hindari menambahkan terlalu banyak rasa tertentu dan pernak-pernik tertentu pada animasi.

Pengaturan waktu adalah segalanya

Halaman harus memasuki status selesai dengan cepat - sebuah animasi tidak boleh menghentikan pengguna untuk mengetuk ke halaman selanjutnya - tapi jangan terlalu cepat! Penting untuk menyampaikan kombinasi yang benar atas gaya dan durasi. Contohnya: animasi sederhana seharusnya kurang dari 500 milidetik, namun perhatian pada gambar latar belakang harus lebih lama.

LAKUKAN JANGAN LAKUKAN
Efek Ken Burns ini pada gambar latar belakang samar dan membuat pengalaman lebih mendalam. Ini menciptakan keseimbangan yang tepat dengan hamparan teks bersama. Di sini, efek Ken Burns terlalu cepat. Gerakannya mengganggu perhatian dan menyulitkan untuk berfokus pada baris tajuk.

Pertimbangkan untuk kreatif dengan gerakan. Animasikan beberapa objek menjadi sebuah urutan, daripada membuatnya bergerak bersama dalam satu efek. Elemen-elemen dapat mempunyai efek dan durasi berbeda yang bekerja menghasilkan animasi yang padu.

LAKUKAN JANGAN LAKUKAN
Menganimasi objek-objek ini secara terpisah menjadikan visual ini lebih menarik dan menyenangkan. Ini juga membantu setiap item menonjol sendiri. Menambahkan gerakan cepat pada satu blok besar seperti ini tidak menambahkan pemahaman, dan hal ini dapat mengganggu perhatian.

Penyandingan sempurna

Sandingkan gaya animasi Anda dengan estetika cerita Anda. Gunakan perpustakaan animasi Cerita Web yang tersedia untuk membantu Anda menemukan gaya dan intensitas yang cocok untuk Anda tanpa mengalihkan perhatian dari konten.

LAKUKAN JANGAN LAKUKAN
Menggeser judul ke atas dan teks keterangan dari pudar berangsur jelas memandu pembaca untuk mengikuti konten halaman dalam urutan yang benar. Animasi rotasi ini tidak menambahkan nilai pada cerita. Sebaliknya, ini menciptakan keramaian visual dan dapat mengalihkan perhatian pembaca.

Ingin lagi dan lagi

Izinkan pengguna untuk menjelajahi topik Anda lebih lanjut dengan menyematkan konten pihak ketiga, melampirkan informasi tambahan, dan menautkan ke lokasi baru.

Sematan strategis

Sematan memberikan dimensi tambahan di mana relevan dan disajikan dengan menyenangkan. Sertakan konten yang relevan bersama sematan sehingga menjadi bagian yang tidak terpisahkan dari cerita. Anda mungkin perlu memungkinkan interaktivitas untuk sematan Anda.

LAKUKAN JANGAN LAKUKAN
Sematan pada halaman ini terpadu baik dengan bagian tata letak lainnya. Grafis judul, tanggal, dan latar belakang membantu menyempurnakan visual. Menempatkan sematan saja pada halaman terlihat tidak selesai dan tidak terpadu baik dengan cerita lengkapnya.

Melampirkan konten tambahan

Jaga agar Cerita Web Anda ramping dengan menempatkan konten terkait pada lampiran. Dengan cara ini, pembaca dapat menggali lebih dalam jika mereka ingin mengetahui lebih banyak tentang cerita Anda. Pembaca menelusuri cerita dengan lebih mudah jika konten tambahan dilampirkan pada halaman yang relevan.

LAKUKAN JANGAN LAKUKAN
Sematan pada halaman ini terpadu baik dengan bagian tata letak lainnya. Grafis judul, tanggal, dan latar belakang membantu menyempurnakan visual. Menempatkan sematan saja pada halaman terlihat tidak selesai dan tidak terpadu baik dengan cerita lengkapnya.

Lampiran berfungsi dengan baik bersama blok teks yang panjang, atau jika cerita Anda berisi video cuplikan, Anda dapat menyertakan video lengkapnya sebagai lampiran.

LAKUKAN
Video cuplikan bisa menjadi elemen yang berguna dalam cerita AMP. Anda dapat menyertakan video dengan durasi penuh sebagai lampiran, sehingga pembaca mempunyai pilihan untuk menggali konten Anda lebih dalam.

Menautkan ke lokasi baru

Anda dapat menambahkan tautan di mana pun pada halaman Cerita Web. Mengetuk pada suatu tautan akan memunculkan tooltip. Ini memberi tahu pengguna ke mana tautan menuju dan memungkinkan mereka untuk memastikan tindakan sebelum keluar dari cerita.

LAKUKAN JANGAN LAKUKAN
Tautan pada halaman ini ditandai dengan jelas dan diliputi oleh konten terkait. Tautan-tautan ini tidak mengganggu navigasi cerita. Tautan-tautan pada halaman ini menghalangi navigasi sepenuhnya. Pembaca tidak akan dapat dengan mudah pergi ke halaman sebelum atau selanjutnya.

Pikirkan ukuran, lokasi, dan frekuensi kemunculan strategis tautan Anda. Jika jumlah elemen yang dapat diketuk terlalu banyak, navigasi dapat menjadi rumit dan membuat pembaca frustrasi.

Dengan kode atau membuat sendiri

Cerita Web dapat dibuat dengan menulis kode sendiri dari nol atau dengan menggunakan alat kreasi.

Jika Anda membuat Cerita Web dengan kode sendiri, Anda akan membuatnya dari nol dengan menggunakan kerangka kerja AMP. Ikuti Membuat Cerita Web pertama Anda untuk memulai. Setelah Anda membuat Cerita Web Anda, pastikan bahwa itu adalah AMP yang valid. Anda dapat menguji cerita Anda di validator AMP. Bacalah detail teknis Cerita Web untuk mendapatkan informasi selengkapnya.