Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Style Guides

Panduan Front End Style: Pertanyaan Anda Terjawab

by
Length:MediumLanguages:
This post is part of a series called All About Style Guides.
Using Guidelines to Mind Your Tone
50 Style Guide Tools, Articles, Books and Resources

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

Kami baru baru-baru ini memberikan kesempatan bagi followers Twitter kami untuk bertanya mengenai apa saja tentang Panduan Front End Style. Berikuat adalah beberapa pertanyaan terbaik beserta jawabannya!

Semantik

@anna_debenham @wdtuts Apa perbedaan Style Guide dengan perpustakaan pola? (Secara teori maupun praktik).

— Jack Appleby (@jackappleby) May 12, 2014

Ada banyak interpretasi dari Style Guide, tetapi Saya melihatnya seperti ini: Style Guide adalah istilah menyeluruh untuk berbagai kemungkinan; panduan model editorial yang membahas tentang nada suara, panduan model desain yang mendalami tipografi dan warna untuk digunakan pada sebuah situs, bahkan panduan model kode untuk menjaga konsistensi ketika beberapa orang menambahkan kode pada codebase.

Perpustakaan pola adalah tipe panduan yang dekat dengan kerangka penuh. Perpustakaan pola merupakan deliverable yang baik untuk pengembang – ia berisi potongan kode untuk modul yang ditemukan di sebuah situs. Potongan kode ini dapat dikumpulkan menjadi instruksi manual untuk mengelola model/style sebuah situs dan kode front-end nya.

Dave Rupert mengatakan: deliverable yang responsive harus terlihat seperti model Bootstrap Twitter yang bekerja, sistem yang diatur untuk kebutuhan klien Anda. Itu adalah penjelasan tentang apa itu perpustakaan pola menurut saya.

2. Panduan Style dan Mendesain Ulang

@anna_debenham seberapa awal Anda memulai untuk mengerjakan style guide pada sebuah proyek desain ulang? @wdtuts

— Matt Quirk (@MattQuirk) May 12, 2014

Tepat ketika saya memulainya. Hal ini merupakan langah pertama dalam pengembangan yang saya lakukan. Setiap situs memiliki elemen umum seperti paragraf, tautan, heading, daftar, formulir… dan memiliki file yang telah Anda siapkan dengan seluruh markup di dalamnya merupakan hal yang sangan membantu dalam kolaborasi awal bersama desainer lainnya.

Salah satu tempat awal yang baik adalah Barebones Paul Lloyd, karena pada Barebones tersebut ada HTML mentah yang akan digunakan pada sebuah situs. Kemudian akan memudahkan kita nantinya dengan fondasi yang telah ada ini untuk kemudian ditambahkan fungsi lainnya.

3. Dalam Hal Pengelolaan

@anna_debenham @wdtuts Bagaimana Anda mengatur proses pembuatan atau pengelolaan Style Guide dengan deliverable hi-fi: perpustakaan pola, comps

— James Nettik (@jnettik) May 12, 2014

Pada proyek sebelumnya yang saya kerjakan, desainer menggunakan TypeCast untuk membuat style dan mereka mencoba tipografi awal pada browser dan mengujinya. Hasilnya terlihat bagus pada perangkat yang berbeda-beda, sebelum akhirnya memilih desain spesifik tertentu. Hal tersebut bekerja sangat baik untuk kami berdua, sebab hal ini membantu terlihatnya beberapa masalah dari beberapa hal seperti tampilan yang kurang bagus dari font web ataupun masalah dengan kontras warna pada layar yang dpi nya rendah sedari awal pembuatan. 

Beberapa desainer, seperti Dan Mall, membuat perpustakaan elemen pada software grafik mereka selama proses mendesain. Dengan cara memecah desain menjadi modul, mengkonversi style guide sangatlah membantu.  John Aizlewood menggunakan pendekatan ini selama mengerjakan desain ulang untuk Code of America,yang berarti  saya dapat  membuat  komponen dan membuat prototipe   ide sembari desain lain sedang juga dikerjakan. 

Diambil dari http://codeforamerica.clearleft.com/

4. Klien dan Komunikasi

@anna_debenham @wdtuts Adakah tips untuk mendapatkan persetujuan klien/berkomunikasi dengan klien? Bagaimana cara Anda melibatkan klien yang bahkan dalam beberapa hal mereka tidak dapat memvisualisasikannya?  

— James Nettik (@jnettik) May 12, 2014

@anna_debenham @wdtuts Bagaimana cara ada mempresentasikan/melibatkan/memahamkan klien tentang style guide? (Terutama mereka yang tidak memiliki pengetahuan tentang web)

— natalie (@talkanatalka) May 12, 2014

(Saya mengelompokkan dua pertanyaan ini sebab sangat mirip)

Hal ini akan sangat bergantung pada klien Anda. Saya berpendapat style guide sangat mudah dipasarkan pada tim rumah web karena jika mereka mengelola banyak web, secara terus menerus menuliskan kode yang sama dan menghadapi stylesheet yang super banyak, pada akhirnya mereka akan melihat style guide ini sangat bermanfaat.

Klien yang tidak berhadapan langsung dengan desain atapun kode dari hari ke hari mungkin tidak akan mengerti manfaat memiliki style guide (ini bukan hal yang cukup normal untuk ditunjukkan pada CEO), tetapi saya tetap membuat style guide karena saya tahu ini akan sangat membantu, dan harapannya, dapat membantu siapa saja yang berniat menambahkan kode baru pada proyek kami. ini sangat baik untuk mencapai susunan  teratas sebuah perkembangan akhir suatu proyek. Ini terasa seperti hal yang baik.

5. Yakinkan Atasan Anda

@anna_debenham @wdtuts Bagaimana cara mengadvokasi penggunaan style guide pada organisasi yang tidak menggunakannya karena tidak terbiasa/deadline yang ketat?

— Daniel Fosco (@notdanielfosco) May 12, 2014

Saya menjelaskan bahwa meskipun style guide membutuhkan waktu dalam mengembangkan dan mengelolanya, tetapi pada dasarnya style guide ini akan sangat menghemat waktu untuk jangka panjang. Mungkin saya lebih memperhatikan hal ini sebagai kontraktor, tetapi akan sangat memakan waktu jika saya harus membiasakan diri saya kembali setiap ada proyek, dan tidak memiliki basis informasi tersebut akan memakan waktu.

Dengan situs yang telah memiliki perpustakaan pola, saya dapat menambahkan fungsi baru pada situs tersebut lebih cepat daripada saya harus mencari informasi pada situs tersebut untuk menemukan model yang mirip ataupun membuat ulang sesuatu yang tidak ada seorangpun yang pada akhirnya memperhatikan bahwa ia ada.  

Memiliki boilerplate style guide saya dapat mengembangkan situs serta menghemat banyak waktu, sehingga menyelesaikan suatu proyek tidak akan menghabiskan terlalu banyak tenaga. Memastikan bahwa semua orang mengerjakan pekerjaan yang penting sungguh-sungguh.

6. Generator Style Guide Otomatis

@anna_debenham Saya sangat ingin mengetahui pendapat Anda tentang generator style guide otomatis yang belakangan ini ramai terdengar ... @wdtuts

— Westley Knight (@westleyknight) May 12, 2014

Ada beberapa generator style guide, Welch Canavan menuliskan daftarnya di sini: http://welchcanavan.com/styleguide-roundup/

Beberapa lainnya yang tidak disebutkan termasuk di antaranya Stylify Me dan Frontify, Anda boleh mencoba dua generator tersebut. Saya sangat menyukai suara KSS (Knyle Style Sheets) karena ia menghasilkan style guide hidup dari komentar di CSS Anda.

Generator style guide sangat bermanfaat dalam beberapa kasus, tetapi salah satu manfaat membangun style guide sebagai pengembang situs adalah Anda dipaksa untuk berpikir lebih cermat terhadap kode-kode Anda – setiap pola seolah blok lego, sehingga ia membantu Anda berpikir tepat jika Anda menjalani pendekatan berorientasi objek.

Saya berpikir generator bermanfaat jika Anda tengah mengerjakan proyek untuk sebuah situs yang telah didesain, Anda ada pada sebuah deadline yang amat mepet, dan Anda mencari warna dan heading berbeda yang digunakan. Generator akan sangat berguna untuk mendapatkan sejumlah daftar kode hex.

Nicole Sullivan's Type-o-matic juga sangat berguna pada situasi ini.  Ini adalah browser plugin yang mengetahui semua font pada laman tersebut dan mengelompokkannya berdasarkan warna dan ukuran. 

7. Orang-orang Non Visual

@anna_debenham @wdtuts Bagaimana cara Anda berkomunikasi secara efektif kepada desainer dan pengembang back-end dengan style guide tanpa perlu menunjukkan kode-kode? Terima Kasih

— Joseph James (@joeaugie) May 12, 2014

Ketika membangun style guide Anda, berpikirlah sebagai kontraktornya atau sebagai pekerja baru yang diminta untuk menambahkan section baru untuk sebuah situs. Informasi apa yang mereka butuhkan?

  • Dalam beberapa style guide saya, saya menambahkan catatan penggunaan untuk menjelaskan kapan kita menggunakan pola tertentu. Ini sangat berguna bagi editor konten untuk memiliki informasi yang menjelaskan kapan perlu menggunakan teks tebal dan kapan menggunakan heading, atau tipe daftar yang cocok untuk situasi yang berbeda.  
  • Ketika saya mengerjakan desain ulang untuk University of Surrey, kami menambahkan foto pedoman yang menjelaskan bagaimana gambar pada web tersebut dapat digunakan, dan tipe seni yang cocok digunakan untuk logonya.
  • Saya sering menambahkan contoh warna sehingga desainer dapat menemukan kode hex dengan cepat jika mereka membutuhkannya, serta saya menambahkan nama variabel Sass jika ada.

Jika Anda menambahkan informasi untuk peran tertentu, itu dapat menjadi pusat bantuan untuk orang-orang lihat dan menemukan apa yang mereka cari. Inilah hal yang GOV.UK telah berhasil capai dengan Service Design Manual.  

8. Jika Anda Telah Selesai

@anna_debenham @wdtuts Bagaimana cara penggunaan style guide yang baik dalam pengembangan desain serta sebagai referensi saat situsnya live/langsung?

— Marc Drummond (@MarcDrummond) May 12, 2014

@anna_debenham @wdtuts Agaknya tantangan untuk mempertahankan style guide tetap relevan dan akurat jika desainnya berkembang pada saat live.

— Marc Drummond (@MarcDrummond) May 12, 2014

Prototipe kode nya dan buatlah desain dengan itu, dan merujuklah pada prototipe tersebut di depan semua orang sesering mungkin. Ketika Anda membuat fungsi baru pada situs tersebut, buatlah pada style guide terlebih dahulu sehingga jika Anda mengembangkannya di situ sebelum diminta mengubah, desain Anda tidak akan ketinggalan zaman. Dengan melakukan hal ini, Anda juga dapat memeriksa jika ada model lain yang tidak bertentangan dengan yang baru.

Style guide Anda dipengaruhi versi. Buat ia open source jika memungkinkan: orang-ornag akan cenderung memastikannya up to date jika terbuka.

Ian Feather  baru-baru inimenulis bagaimana Lonely Planet mengelola style guide mereka dengan API. Ini tidak akan sesuai dengan setiap proyek, tetapi saya dapat melihat bagaimana style guide sangat membantu situs besar yang terus menerus berkembang. Rasanya menggunakan style guide adalah teknik yang bagus untuk dituju.

Kesimpulan

Saya harap saya dapat menjawab beberapa pertanyaan Anda tentang Front End style guide! Jika Anda memiliki pertanyaan lain, silakan tanyajan di kolom komen ini.

Advertisement
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.