Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Visuals
Webdesign

Mengelola Konsistensi dengan Website Style Guide

by
Length:LongLanguages:
This post is part of a series called All About Style Guides.
50 Style Guide Tools, Articles, Books and Resources
Style Tiles: An Alternative to Full Design Comps

Indonesian (Bahasa Indonesia) translation by Ratnawati (you can also view the original English article)

Membuat style guide menjadi hal umum yang dilakukan oleh desainer web, terutama ketika menangani situs dengan konten yang berat. Dengan website style guide, desainer dapat mengatur dan mengelola tampilan dan rasa dengan membuat satu set pengaturan yang desainnya akan mengikuti. Prosesnya kemudian menjadi fleksibel, dapat diperbarui dengan mudah, serta konsisten.

Dalam tutorial ini saya akan mendemonstrasikan bagaimana Anda dapat menerapkan style guide pada situs milik Anda ataupun proyek.  

Apa yang dimaksud dengan Style Guide?

Style guide telah menjadi populer beberapa waktu belakangan. Bahkan sebelum adanya web, perusahaan seringkali perlu membuat visual yang konsisten serta menyatu untuk brand mereka. Dulu biasanya dapat dicapai dengan penggunaan pedoman brand atau identitas. Pedoman tersebut biasanya dalam bentuk dokumen dan dapat berisi informasi sebagai berikut:

  • Warna brand
  • Tipografi, seperti font, ukuran, leading dsb
  • Posisi logo, dan bagaimana penggunaannya pada situasi yang berbeda. seperti layout cetak dapat berbeda dengan layout web
  • Nada suara

Tepat sekali bahwa apa yang terdapat pada sebuah petunjuk brand/identitas bergantung pada perusahaannya. Dapat berupa satu halam dokumen, langsung pada dokumen masif komprehensif seperti TV Channel Bahasa Inggris, style guide Channel 4.

C4 style guide

Web style guide bekerja dengan cara kerja yang mirip dengan pedoman brand/identitas, perbedaannya adalah Anda bukan membuat identitas brand, melainkan identitas untuk website. Pada saat ini website adalah brand nya, dan, misalnya, style guide digunakan untuk membuat konsistensi serta kesatupaduan dalam desain website tersebut.

Kapan Kemungkinan Saya Menggunakan Style Guide?

Saya tidak mengatakan bahwa style guide harus dituliskan untuk setiap website yang Anda terlibat di dalamnya, akan tetapi terkadang cukup masuk akal untuk melakukannya.

Contohnya, ini mungkin dapat menjadi ide yang bagus..

  • ..ketika website tersebut memiliki konten yang cukup berat dan perlu menampilkan banyak hal dengan cara yang beragam
  • .. ketika bekerja dengan tim yang besar pada sebuah situs. Sebuah panduan akan sangat berguna karena setiap komponen pada situs itu harus dibuat konsisten, tidak peduli seberapa banyak orang yang mengerjakan tampilan situs tersebut. Meskipun anggota tim tersebut merupakan anak baru. Keuntungan lain untuk tim adalah dengan memiliki definisi yang tetap serta nama komponen yang telah disetujui bersama maka anggota tim akan dapat berkomunikasi dengan jelas dan efektif tentang komponen modul mana yang dimaksudkan.
  • ..ketika sebuah situs memerlukan pembaruan yang lebih mudah, atau mendapatkan fitur tambahan yang cukup sering.

Cara kita mendesain website nampaknya tengah mengalami pergeseran. Kita mulai menyadari bahwa mendesain website dengan basis halaman per halaman sudah tidak lagi menjadi solusi yang tepat dalam beberapa situasi. Dengan membuat sistem dan struktur seperti style guide maka kita akan dapat melihat gambaran yang lebih besar bagaimana sebuah website dapat cocok satu sama lain, membuat proses pembaruan menjadi lebih mudah diatur.

Sekarang, setelah Anda sedikit telah memahami tentang website style guide, mari kita lihat beberapa contohnya

Contoh-contoh Website Style Guides

Twitter Bootstrap

Twitter Bootstrap style guide

Mungkin pengaturan paling terkenal untuk sebuah website dapat ditemukan pada Twitter Bootstrap. Meskipun bukan merupakan style guide spesifik untuk twitter.com, beberapa komponennya dapat ditemukan dalam twitter.com dan banyak digunakan pada aplikasi internal Twitter.

Github

Github style guide

Github merupakan contoh yang baik untuk website yang perlu menggunakan style guide. Github memiliki tim desainer dan pengembang yang bekerja untuk produknya, maka menjaga konsistensi menjadi hal yang esensial tidak peduli siapa yang mengerjakan fitur baru dan bagian website tersebut.

MailChimp

Mailchimp style guide

Jika Anda melihat gambar MailChimp style guide Anda akan melihat berbagai komponen dari berbagai website MailChimp. Satu hal yang mungkin Anda perhatikan adalah bagaimana MailChimp sangat ramah pengguna serta menggunakan pendekatan manusia dalam dialog yang digunakannya sepanjang situsnya. Hal ini menunjukkan konsistensi sebabMailChimp telah memiliki satu set pengaturan yang nada suaranya  harus diikuti.

Membuat Website Style Guide di Photoshop

Apa yang Anda putuskan untuk ada pada style guide Anda akan beragam berdasarkan situs apa yang akan Anda desain. Contohnya, situs social media akan memiliki komponen yang berbeda dengan situs ulasan film.

Anda dapat menjadi cukup detail maupun sangat ringkas sesuai yang Anda inginkan, tetapi semakin Anda mendetail semakin padu desain Anda nantinya.

Ketika membuat style guide, penting untuk memasukkan seluruh situasi yang elemen atau komponennya dapat temukan. Contohnya, Anda harus memikirkan bentuk tombol dan input yang berbeda, begitu juga item menu terkini dll. Hal ini harus Anda demonstrasikan di file . PSD anda.

Tip: Anda dapat membuat tombol visual beraneka ragam dalam Photoshop dengan menggunakan Layer Comps. Lihatlah pada tutorial kami pada subjek ini.

Tahap 1 : Persiapan

Pada contoh ini saya akan membuat style guide untuk sebuah blog. Style guide blog ini akan memuat beberapa komponen, yakni:

  • Author card
  • Post Blog
  • Komen
  • Tombol
  • Halaman
  • Elemen form
  • Tabel

Saya juga akan menggunakan enam warna berikut ini:

  • biru #a4d4e8 – Akan digunakan sebagai warna utama/primer
  • hiijau #aee1a3 - Akan digunakan sebgai warna sekunder
  • merah #f67f77 – akan digunakan sebgai warna sekunder dan untuk peringatan eror
  • hitam #474747 – Akan digunakan sebagai warna utama untuk teks
  • abu-abu tua #919191 – Akan digunakan sebagai warna sekunder untuk teks
  • abu-abu muda #e7e2de – Akan digunakan untuk ikhtisar

Semua input dan tombol akan menggunakan bingkai-radius 5px, sedangkan semua komponen widget menggunakan bingkai-radius 0px yang membuat semua berbentuk persegi panjang.

Tahap 2: Mengatur Dokumen

Setting up photoshop grid

Pertama, atur dokumen halaman kerja baru. Saya membuat milik saya seluas 580px. Ini merupakan ukuran yang nyaman dan mewakili ruang kerja yang baik untuk desain dengan basis modul.

Saya menggunakan sebuah grid (View > Show > Grid) untuk membantu saya dengan desain saya dan menjaga segalanya lurus. Saya memutuskan untuk menggunakan frid 20px x 20px dengan subdivisi setiap 10px. Ini dapat diganti dengan pergi ke Preference > Guide, Grid and Slices.

Anda akan melihat seperti tampilan di bawah ini. Di sini Anda dapat mengubah jarak grid sesuai yang Anda inginkan, tetapi saya menemukan bahwa grid 20px dengan subdivisi diatur menjadi 2 bekerja dengan baik. Saya juga mengatur beberapa panduan pada luas 460px untuk setiap sisi untuk memudahkan saya mendapat bantuan. Sebagai tambahan untuk hal ini adalah dapat memutar 'snap' menuju View > Snap. Sebagai tambahan, elemen Anda akan berakhir dengan pengukuran pixel yang tepat dan jangan coba-coba dengan pengukuran stray sub-pixel.

photoshop preferences grid

Tahap 3: Komponen Pemilik

author component web site style guide

Hal pertama yang akan kita buat adalah komponen modul pemilik. Jejaring sosial seperti Twitter membuat author card akun menjadi populer belakangan dan saya pikir mungkin ini hal yang bagus untuk digunakan sebagai bagian dari web style guide. Dengan cara ini, setiap pemilik blog dapat memiliki author card mereka masing masing.

Mulai dengan mmemilih shape tool dan pilih latar depan berwarna putih. Dengan yang telah dipilih ini, buatlah persegi panjang berukuran 380x250px. Setelah langkah ini selesai, klik kanan pada shape layer tersebut kemudian pilih ‘blending options’. Panel blending options harusnya telah muncul di layar. Di bar sebelah kiri panel, pilih ‘Stroke’ dan berikan ukuran stroke 1px. Warna yang akan kita gunakan adalah abu-abu muda #e7e2de yang diambil dari set warna.  

Sekarang pilih ‘Outer glow’ dan atur warna outer glow sama tetapi dengan redup direndahkan menjadi 80. Atur persebaran glow/cahaya menjadi 100% dan ukurannya menjadi 4. Ini akan memberikan bingkai komponen dengan glow tebal yang tersembunyi sebgai bingkai.

Photoshop layer styles

Model layer yang kita buat akan sering digunakan pada elemen yang akan kita kerjakan nantinya, tetapi ada tips cepat bagaiaman menggunakan model layer yang sama pada elemen lainnya. Jika Anda meng-klik kanan pada elemen layer yang telah kita buat tadi, klik ‘Copy layer styles’. Perintah ini akan melaksanakan persis seperti yang dikatakannya dan membuat Anda dapat menerapkannya pada layer lain yang Anda miliki. Untuk melakukannya, ada cukup meng-klik kanan pada layer yang Anda inginkan kemudian pilih ‘paste layer styles’. Catat hal ini karena kita akan sering menggunakannya sepanjang tutorial ini. Kita akan merujuk pada style layer ini sebagai ‘main layer style’.

Untuk avatar author, ambil sebuah foto sebgai contoh kemudian atur ulang ukurannya menjadi 75px x 75px. Kemudian pilih ‘Elliptical marquee’ tool dan tarik kursor Anda ke sekitar foto, mulai dari atas kiri menuju bawah kanan. Tahan tombol shift ketika Anda melakukan ini untuk mempertahankan proporsi serta membuat lingkaran yang sempurna. Setelah Anda selesai memilih gambarnya, copy kemudian paste gambar ini pada dokumen style guide Anda. Copy dan paste elemen ‘main layer style’ kita tadi kemudian edit layer style dan hilangkan stroke.

Untuk membuat tiga kotak status, pertama buatlah tiga kotak persegi panjang yang ukuran 380px yang dapat dibagi sama rata. Ketika Anda selesai melakukan ini, ambil salah satunya kemudian buka panel layer styles lagi kemudian klik kanan pada layer tersebut. Kemudian pilih ‘Inner Shadow’. Pastikan ‘blend mode’ nya diatur normal dengan opacity 100%. Atur sudut/angle menjadi ‘-90’ dan ubah distance/jarak menjadi 5px. Untuk warnanya, gunakan warna primer kita, warna biru #a4d4e8. Kemudian ualngi proses ini pada dua kotak status lainnya tetapi kali ini ganti warna inner shadownya masing-masing menjadi; hijau #aee1a3 dan merah #f67f77. Kemudian tambahkan teks untuk masing-masing statistik. Di milik saya, saya menampilkan jumlah pengikut, yang diikuti, dan posts.

Photoshop inner shadow style

Untuk menambahkan teks dan bio pemilik saya menggunakan ‘Droid Sans’, tersedia sebagai font Google Web.

Untuk segitiga kecil di sudut kanan atas author card, buatlah 50px x 50px persegi dengan warna primer biru kemudian pilih ‘polygonal lasso tool’. Gambar garis lurus dari atas kiri persegi menuju bawah kanan kemudian gambar di sekitar kiri persegi tersebut. Setelah selesai pilih Layer > Layer Mask > Hide Selection dan hal ini akan membuat bentuk segitiga pada ujung sudut author card.

Untuk bentuk bintang pilih shape tool ‘Polygon’. Pastikan sisi-sisinya diatur menjadi ‘5’ pada menu bagian atas. Kemudian pilih panah kecil yang letaknya di samping kata ‘Sides’. Pilih bintang/star kemudian ‘Indent sides by’ menjadi 50%. Kemudian gambar bintang putih di atas segitiga tadi dan letakkan pada sudut kanan atas dari author card.

Tahap 4: Komponen Post Blog

Komponen postingan blog dibuat dengan cara yang sama ketika kita membuat elemen utama author card di atas.

Blog post component

Saya kemudian menambahkan ‘main layer style’ pada bagian ini. Gambar thumbnail 70px x 70px diletakkan pada bagian dalam kiri. Saya membuat tiga model teks berbeda; untuk headline, tanggal, dan teks paragraf. Pada bagian kanan bawah saya menambahkan tombol ‘baca lebih lanjut’. Lihatlah  tahapan 6 untuk membuat tombol.

Tahap 5: Komponen Komen

Untuk membuat balon komentar buatlah persegi panjang berukuran 316px x 90px kemudian tambahkan ‘main layer style’ pada bidang itu.

Blog comment component

Buatlah bentuk persegi berukuran 15px x 15px kemudian putar  Edit > Transform Path > Rotate, kemudian pada options menu, putarlah menjadi 45 derajat. Pilih shape layer actual kemudian pergi ke Edit > Copy kemudian pergilah ke persegi yang telah kita buat tadi. Pastikan persegi itu berada di baris yang Anda inginkan. Kemudian pilih Edit > Paste dan yang Anda copy tadi akan bergabung/merge, sehingga ada dua bentuk/shape. Tambahkan main layer style dan terbentuklah balon percakapan! 

rotate shape photoshop

Saya membuat dua jenis komponen balon komentar; satu untuk komentar standard dan yang satu lagi untuk komentar dari author. Untuk balon komentar author saya mengubah stroke menjadi warna biru primer.

Step 6: Tombol

Membuat tombol cukup mudah karena kita telah membuat pedoman sebelum kita membuat style guide kita.

Blog button component

Untuk membuat tombol yang cukup besar pilih ‘rounded rectangle’ tool. Dari bar ‘options’ pastikan kita mengatur radius menjadi ‘5px’ kemudian gambar persegi panjang berukuran 125px x 40px dengan warna biru. Kemudian tambahkan teks yang Anda inginkan. Duplikasi layer nya dengan cara klik kanan pada layer kemudian pilih ‘Duplicate Layer’. Jika Anda telah selesai melakukannya, ubah warnanya menjadi warna sekunder. Ulangi proses ini untuk tombol-tombol menggunakan warna sekunder lainnya. Juga, ulangi proses ini untuk tombol kecil tapi kali ini buatlah persegi panjang dengan ukuran 30px x 105px dan pada bagian ‘call to action button’ ubah menjadi 374px x 40px.

Untuk bagian yang melayang saya menambahkan gradien halus dengan cara menambahkan ‘gradient overlay’ pada layer style. Atur warna menjadi ‘Normal’ dan opacity 10% dengan gradien hitam hingga putih. Hal ini akan menjadi petunjuk yang cukup untuk pengguna menggunakan tombol.

Untuk set tombol grup, buatlah persegi panjang berukuran 380px x 30px dan bagi menjadi empat tombol seukuran. Anda dapat melakukan ini dengan cara menggambar menggunakan pencil line ukuran 1px atau memotong section dengan tool ‘rectangular marquee’ seukuran 1px.

Step 7: Penomoran Halaman

Penomoran halaman dibuat dengan cara yang mirip dengan set tombol grup yang baru saja kita buat sebelumnya. Tetapi kali ini, kita tidak membuat empat tombol seukuran sama, melainkan membuat sepuluh tombol persegi seukuran dengan tombol panah pada salah satu ujung dengan ukuran lebih besar. Gambar di bawah ini akan menjelaskannya. Untuk panah saya menggunakan bentuk yang telah saya persiapkan yang dibuat khusus untuk desain panah web.

Step 8: Formulir

Sekarang Anda telah memahami betapa mudahnya membuat kehidupan untuk diri kita sendiri hanya dengan mengulangi perintah yang sama pada layar dalam membuat elemen dan style. Hal terbaik dari semua ini adalah, hal tersebut dapat menjaga konsistensi desain kita.

Blog form component

Masukan/input dan area teks untuk set di atas dibuat dengan metode yang kita gunakan sebelumnya. Untuk input kita menggambar persegi panjang bulat dengan ukuran 380px x 40px kemudian terapkan warna stroke. Perpanjang tinggi textarea sedikit menjadi sekitar 90px. Untuk fokus elemen saya menggunakan ‘main layer elemen’ kita kemudian menambahkan elemen ekstra untuk pemberitahuan eror atau sukses.

Kesimpulan

Terserah pada Anda seberapa banyak elemen yang Anda inginkan untuk ada pada style guide Anda. Anda akan mengetahui persyaratan yang diperlukan situs yang sedang Anda kerjakan dan Anda akan mengetahui apa yang perlu dan tidak perlu dikerjakan. Hal yang luar biasa tentang style guide adalah elemen apapun yang Anda kenalkan akan menjadi aturan dan praktik yang perlu dikerjakan untuk mempertahankan konsistensi desain situs.

Hal ini akan membuat semua orang terbisa dengan pengguna serta memberikan pengalaman yang lebih baik secara estetika maupun fungsi.

Tautan Lebih Lanjut, Bacaan, dan Sumber

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.