Panduan gaya, juga dikenal sebagai pustaka pola, adalah cara yang bagus untuk memastikan bahwa desain Anda berjalan sebagaimana dimaksud saat situs web Anda tumbuh atau saat anggota tim baru mengerjakan proyek web. Setiap gaya, atau pola, adalah pengelompokan markup dan gaya untuk elemen desain situs web Anda.

Panduan gaya modern biasanya ditampilkan sebagai halaman web yang sebenarnya, yang menunjukkan berbagai elemen dalam desain situs web atau aplikasi. Saat banyak orang atau bahkan beberapa tim sedang mengerjakan proyek web, panduan gaya akan menebak elemen visual yang seharusnya terlihat. Ini adalah cara yang bagus untuk menjaga semua orang pada halaman yang sama untuk konsistensi proyek.

Jaga agar tim Anda tetap pada jalurnya dan kode Anda KERING

Selain desain visual, panduan gaya membantu memastikan bahwa file CSS tidak lepas kendali. Kita semua pernah mengalami kode berulang, jadi mari kita berusaha untuk menjaga kode tetap dapat dipertahankan dan tanpa sesuatu yang mutlak diperlukan. Jika semua orang di tim Anda dapat melihat semua gaya di satu tempat, gaya mana yang ada saat ini akan terlihat dengan jelas sehingga tidak diduplikasi di lembar gaya.

Karena panduan gaya Anda berfungsi sebagai kumpulan yang mencakup desain modul dan elemen desain lainnya, mudah untuk melihat apakah elemen desain baru sesuai dengan standar yang ditetapkan.

Apa yang harus ada dalam panduan gaya web?

Seperti yang kita ketahui, desain web memiliki kecenderungan untuk berjalan sedikit liar. Kabar baiknya adalah desain web yang efektif, terutama saat menggunakan panduan gaya, berada dalam kendali Anda. Panduan gaya berkisar dari yang sangat sederhana hingga yang sangat kompleks. Saya telah menyertakan beberapa ide di sini untuk membantu Anda memulai.

Palet warna

Sebaiknya sertakan contoh yang memiliki warna heksadesimal. Diri Anda yang terbatas waktu akan berterima kasih! Saya tidak ingat berapa kali saya bertanya atau ditanya, "Apa warna hex itu lagi?" Memiliki referensi cepat pasti akan berguna bagi semua orang.

Tipografi dan hierarki

Placeholder heading deskriptif dapat membantu tim Anda memahami konteks seperti apa elemen dalam tata letak Anda perlu digunakan.

Panduan gaya juga harus menyertakan hierarki header yang disarankan. Manakah h1, h2, h3, dan seterusnya? Kata-kata deskriptif seperti tajuk utama, subjudul, dan tajuk widget bilah sisi juga menghilangkan banyak tebakan di masa mendatang.

Jangan lupa untuk menyertakan elemen tipografi yang kurang umum, seperti kutipan blok misalnya. Anda harus menentukan semua contoh teks, bahkan yang jarang digunakan. Jika Anda memiliki tajuk dan gaya tubuh tertentu untuk blockquotes atau testimonial, tentukan dengan detail yang sama seperti yang Anda lakukan untuk elemen yang lebih umum digunakan.

Gambar-gambar

Sertakan perlakuan umum gambar untuk proyek Anda. Apakah gambar memerlukan batas atau efek opacity yang unik? Apakah ada interaksi hover? Jika demikian, dapatkan itu di panduan gaya Anda. Jika ada beberapa perawatan, sertakan masing-masing dan tentukan kapan perawatan tertentu digunakan.

Tautan, navigasi, dan gaya formulir

Dari perspektif UX, tautan, navigasi, dan elemen bentuk adalah tiga bebek yang sangat penting untuk dimiliki secara berurutan. Anda pasti tahu bahwa tautan teks, tombol, dan gaya navigasi harus disertakan dalam panduan gaya Anda. Namun, mudah untuk lupa menyertakan contoh gaya normal, mengarahkan kursor, dikunjungi, dan aktif untuk masing-masing gaya tersebut. Dapatkan yang didokumentasikan untuk memastikan konsistensi dalam setiap detail situs Anda.

Saat gaya hebat bergabung dengan formulir, tidak ada cara yang lebih baik untuk memamerkan semua elemen formulir web selain di panduan gaya Anda. Ini adalah cara yang bagus untuk memetakan dan menginventarisasi semua elemen formulir, apa yang berhasil, apa yang tidak berfungsi, dan apa yang hilang.

Secara khusus, berikut adalah beberapa komponen utama yang harus disertakan untuk gaya formulir:

• Status bidang input normal
• Status bidang input terfokus
• Gaya label
• Teks placeholder formulir
• Teks aktif pengguna
• Pengguna memasukkan teks
• tombol kirim
• Pesan eror
• Gaya kotak centang

Lebih banyak ide untuk disertakan dalam panduan gaya Anda

Sulit untuk membuat daftar setiap elemen yang mungkin Anda temui, tetapi berikut adalah beberapa lagi yang mungkin bermanfaat bagi Anda:

• Kotak panggilan
• Tautan horizontal
• Elemen komentar
• Tag kategori
• Model pop-up

Cara membuat panduan gaya web Anda sendiri

Jika Anda adalah orang yang beruntung untuk mengatasi prestasi heroik dalam membuat panduan gaya dari awal, saya punya beberapa pertimbangan bermanfaat untuk Anda.

Saya pribadi suka memulai dengan file HTML kosong dan mulai dari sana. Tautkan panduan gaya ini ke CSS situs web atau aplikasi sebenarnya. Dengan cara itu perubahan tercermin di kedua tempat, dan Anda tidak perlu khawatir tentang mempertahankan dua file CSS.

Mulailah dengan menginventarisasi semua elemen situs Anda dan kemudian tambahkan markup tepat yang Anda butuhkan untuk masing-masing elemen ke panduan gaya Anda. Terdengar mengintimidasi?

Pertama menilai kisi halaman dan kemudian mengisi panduan gaya dengan elemen penting seperti tipografi dan palet warna, menambahkan lebih banyak pola saat Anda mengerjakannya. Pola desain lainnya dapat mencakup hal-hal seperti gambar, kutipan blok, gaya bilah sisi, tombol, dan gaya formulir.

Percaya padaku. Ini adalah waktu yang dihabiskan dengan baik. Juga baik untuk diingatkan bahwa tidak ada yang permanen dan semuanya dapat dengan mudah disesuaikan dan diperluas.

Jika Anda menginginkan kecepatan dan entri manual dari semua gaya bukan untuk Anda, ada beberapa alat hebat di luar sana yang memudahkan untuk membuat dan menggunakan pola yang dapat digunakan kembali.

Misalnya, Pattern Primer Jeremy Keith akan menghasilkan daftar semua pola dalam folder. Ini adalah alat PHP sederhana untuk mengubah cuplikan kode menjadi pustaka pola. Anda akan melihat pola dirender sebagai HTML.

Pilihan hebat lainnya adalah KSS Kyle Neath, yang juga merupakan alat hebat untuk dokumentasi panduan gaya. Gaya otomatis yang dihasilkan ini adalah seperangkat pedoman untuk membantu Anda menghasilkan panduan gaya HTML yang terkait dengan dokumentasi CSS. KSS dirancang untuk bekerja dengan baik dengan praprosesor CSS dan mengakomodasi banyak kerangka kerja CSS.

Seperti yang kita semua tahu, sebuah situs web tidak pernah selesai. Jika elemen baru diperlukan, mudah untuk memperluas panduan gaya hidup Anda hanya dengan menambahkannya.

Panduan gaya awal Anda mungkin tidak identik dengan halaman yang akhirnya Anda buat, tetapi ini adalah kesempatan bagus untuk menguji gaya baru, dan ini sangat membantu untuk mendesain untuk beberapa browser.

Contoh panduan gaya

Ingin beberapa contoh kehidupan nyata dari panduan gaya yang hebat? Anda mendapatkannya:

Kode untuk Amerika
Simpanse surat
Tenaga penjualan

Dengan memberikan konsistensi dalam desain Anda, panduan gaya Anda membuat perluasan situs web dan peningkatan web di masa mendatang menjadi mudah. Saat gaya ditambahkan dan dimodifikasi, dokumen ini adalah cara yang bagus untuk memberi tahu tim dan memamerkan proyek gaya Anda.