Mendesain Konten

Tidak ada cara mendesain konten yang kami wajibkan, namun kami memiliki langkah-langkah kecil untuk membuat desain konten yang unik dan ramah untuk pembaca.


Menentukan Tema Konten

Sebelum mulai mendesain, kita harus menentukan terlebih dahulu konteks atau tema konten yang akan kita buat. Tujuannya agar kita merencanakan dengan matang hal-hal yang akan dibahas – supaya tidak keluar konteks.

Tema konten ditentukan dari ide yang ada di kepala kamu, coba tanyakan hal berikut ke diri kamu sendiri:

  • Di mana saya dapat mencari ide?
  • Apa yang ingin saya bahas? Library? Framework? Tool? Atau apa?

Itu yang kami lakukan ketika hendak membuat konten. Kami biasanya menemukan ide secara tidak sengaja atau memang niat mencarinya, kami juga biasanay mendapatkan ide dari beberapa situs dan tempat berikut:

  • Twitter – Kami biasanya menemukan ide di Twitter ketika mengunjungi halaman discover
  • Product Hunt – Situs ini tempat untuk semua orang ketika merilis sebuah produk
  • Dev Awesome – Sebuah Newsletter mingguan yang mengirim kurasi tool-tool atau apapun yang sedang populer
  • Awesome List – Biasanya setiap bahasa pemrograman memiliki library populernya masing-masing
  • Laravel News – Tempat yang wajib di-subscribe untuk mendapat update seputar Laravel
  • Dsb

Setelah mendapat ide, biasanya kami bertanya ke diri kami sendiri untuk membuat konten yang ramah pembaca dan tidak menimbulkan pertanyaan dasar:

  • Narasi kontennya seperti apa?
  • Sesuatu yang saya akan bahas ini gratis atau berbayar?
  • Bila gratis, apakah boleh digunakan untuk keperluan komersil?
  • Di mana pembaca bisa mempelajari lebih lanjut tentang hal ini?
  • Bila sebuah produk, apakah ada tautan yang dapat digunakan oleh pengguna untuk melihat demo dari ini?
  • Dsb

Setelah mendapatkan ide, tema dan narasi, kamu sudah boleh mulai mendesain konten di aplikasi desain favorit kamu untuk dipublikasikan ke sosial media atau situs pribadi kamu.

Membuat Desain Dengan Figma

Di sini kami akan menggunakan aplikasi mendesain, Figma. Kami tidak mewajibkan menggunakan Figma, tapi, kami menyarankan menggunakannya karena beberapa hal:

  • Berbasis cloud storage
  • Gratis dengan unlimited storage
  • Kolaborasi tim
  • Kompatibilitas lintas platform dan berbasis browser
  • Komunitas yang aktif

Figma merupakan aplikasi berbasis browser untuk mendesain yang dapat kamu gunakan untuk mendesain antarmuka pengguna, konten, banner atau desain vektor lainnya.

Figma dapat kamu gunakan di sistem operasi apapun yang terdapat browser di dalamnya, seperti Windows, macOS dan Linux. Untuk sistem operasi Windows dan macOS, kamu dapat meng-install aplikasi desktop dari Figma, ketimbang membukanya di browser. Kamu juga dapat meng-install aplikasi desktop Figma di sistem operasi Linux, namun aplikasi ini bukan resmi dari Figma.

Figma juga dapat menjadi alternatif terbaik untuk SketchApp atau Adobe XD. Selain mudah digunakan, Figma berbasis cloud storage yang di mana berkas desain kamu pasti aman berada di dalam server Figma – tanpa harus menyimpan di local storage dan mem-backup-nya.

Langkah-Langkah Mendesain (Gambar)

Setelah sedikit mengenal Figma, mari kita membuat desain konten yang sederhana dengan Figma. Tutorial ini dengan gambar, bila kamu lebih menyukai video, kamu dapat langsung pergi ke bagian berikutnya.

  1. Buka situs Figma

  2. Klik "Sign Up" untuk membuat akun baru (bila belum memiliki akun sebelumnya) atau klik tombol "Login" bila sudah memiliki akun sebelumnya

  3. Setelah mendaftar atau login, kamu akan dibawa ke halaman "Files". Bila kamu berada di halaman ini, itu berarti kamu sudah berhasil login Kita akan mengabaikan mayoritas fitur yang ada di Figma, karena tujuan kita adalah membuat desain konten.

  4. Buat berkas desain baru dengan cara klik tombol + yang ada di pojok kanan atas

  5. Terbuka sebuah berkas desain baru yang kosong Berikut ini beberapa bagian yang terdapat di lembar kerja desain Figma:

    1. Di bagian atas (berwarna hitam) terdapat Toolbar
    2. Di bagian samping kiri terdapat Panel Layer/Assets
    3. Di bagian samping kanan terdapat Panel Properties/Prototype/Code
    4. Di bagian tengah terdapat Canvas
  6. Di Figma, untuk memulai membuat sebuah obyek desain apapun, kita harus awali dengan membuat Frame di Canvas. Maka dari itu aktifkan tool Frame di toolbar atau tekan tombol F di keyboard

  7. Lalu, gambar Frame di Canvas dengan cara klik satu kali di Canvas atau klik-tahan-geser untuk membuat dan sekaligus mengatur ukuran Frame

  8. Atur ukuran Frame dengan skala 1:1. Karena kita ingin membuat desain untuk konten dan agar dapat dipublikasi di beberapa platform sosial media, maka kita atur ukuran Frame dengan dimensi: 1080px x 1080px.

    Untuk mengatur ukuran Frame, kita perlu memilih Frame di panel layer sebelah kiri

    Lalu, mengatur width dan height-nya di panel properties (sebelah kanan)

  9. Maka kita sudah berhasil mengatur ukuran Frame yang kita miliki

  10. Untuk mengatur "Zoom" canvas di Figma, kamu dapat klik menu dropdown yang ada di atas kanan dan pilih "Zoom to Fit" untuk menampilkan Frame secara menyeluruh dalam satu layar

  11. Sekarang kita sudah dapat melihat keseluruhan ukuran Frame

  12. Kita atur warna latar belakang Frame dengan cara klik Frame dan atur warna fill yang ada pada panel properties (sebelah kanan)

  13. Katakanlah kita ingin membuat konten dengan judul, "Berbagi Pengetahuan Ilmu Komputer di Kodinger.com". Gunakan "Text Tool" pada Figma dengan cara klik "Text" di toolbar atau tekan tombol T di keyboard

  14. Dalam mode "Text Tool" aktif, klik di Canvas untuk mulai mengetik teks. Lalu klik di area mana saja di Canvas untuk selesai menulis teks atau tekan tombol kombinasi COMMAND+ENTER (macOS) atau CTRL+ENTER (Windows/Linux). Kita melihat layer baru di dalam Frame, yaitu layer teks yang baru saja kita buat

  15. Atur ukuran dan jenis huruf teks tersebut dengan cara, klik layer teks di dalam layer Frame, lalu pergi ke panel properties bagian "Text"

    Aktifkan layer text

    Atur ukuran dan jenis huruf teks (di panel properties sebelah kanan)

    Hasilnya

  16. Atur warna teks menjadi lebih kontras. Karena latar belakang berwarna gelap, maka warna kontras dari gelap adalah terang; kita akan atur menjadi warna putih

    Aktifkan layer text

    Atur warna fill menjadi putih (di panel properties sebelah kanan)

    Hasilnya

  17. Atur lebar teks agar panjang teks tidak "overlap"

    Aktifkan layer text

    Atur lebar teks (di panel properties sebelah kanan)

    Hasilnya

  18. Kamu dapat memberikan gambar ilustrasi di bawah teks tersebut atau kamu juga dapat mengganti gambar ilustrasi menjadi sebuah screenshot website yang sedang dibahas. Kami asumsikan kamu sudah memiliki gambar screenshot, lalu impor gambar tersebut ke canvas Figma dengan cara tarik langsung ke canvas atau klik Hamburger Menu > File > Place Image (CTRL+SHIFT+K atau CMD+SHIFT+K)

  19. Sesuaikan lebar gambar agar rapih dengan cara seperti kamu mengubah ukuran Frame, atau kamu juga bisa mengubah ukuran gambar dengan cara men-drag titik-titik yang ada di sisi-sisi gambar

  20. Kamu juga dapat memberikan teks untuk keterangan konten (caption) di bawah gambar dengan ukuran teks lebih kecil dari teks yang pertama. Caranya sama seperti pada saat membuat teks pertama kali dan ubah ukurannya menjadi lebih kecil

  21. Selebihnya kamu dapat melakukan improvisasi untuk desain konten kamu, karena ini hanya desain konten yang sederhana, maka desain seperti ini sudah cukup dan kita akan ekspor desain ini menjadi berkas PNG agar dapat dibagikan ke sosial media atau platform lainnya

  22. Ekspor desain dengan cara klik "Frame 1" di panel layer (sebelah kiri)

    Klik tombol "+" di bagian "Export" di panel properties (panel kanan) dan klik tombol "Export Frame 1"

    Berkas akan otomatis ter-download

  23. Selesai! Selamat kamu sudah berhasil membuat desain konten untuk dipublikasikan di platform atau sosial media favorit kamu

Langkah-Langkah Mendesain (Video)

Melihat tutorial dengan gambar saja biasanya tidak cukup, karena kita (seringkali) tidak tahu bagian mana yang sebenarnya harus diklik atau yang lainnya. Maka dari itu, kami memiliki video untuk memudahkan kamu.