() translation by (you can also view the original English article)
Ketika Anda memulai proses pembuatan dan penerapan Style Guide Anda sendiri, ketahuilah bahwa Anda tidak bekerja sendiri. Style Guide telah cukup popular belakangan ini, jadi ada sederet informasi bermanfaat yang tersedia. Anda bisa belajar banyak dari memeriksa apa yang sudah ada di luar sana.
Ada juga beberapa alat dan sumber daya hebat yang dapat Anda gunakan untuk mengerjakan proyek Anda, yang sebagian besarnya gratis. Pada artikel ini, kami mengumpulkan semua materi Style Guide yang Anda miliki. Kami akan menambahkannya juga, jadi jika sumber baru menarik perhatian kami, Anda dapat mengharapkan ini akan melampaui 50!
Catatan: Seperti yang akan Anda baca dalam pengantar seri Style Guide minggu ini, terkadang istilah "Style Guide" digunakan secara bergantian dengan istilah serupa lainnya. Sejalan dengan ini beberapa sumber yang tercantum di bawah ini bisa dibilang berada di bawah klasifikasi yang berbeda.
Sumber Pembelajaran Style Guide
Lihatlah artikel dan tutorial yang luar biasa ini tentang bekerja dengan Style Guide:
Entry Style Guide Wikipedia
Sebuah bacaan untuk pemula yang bagus tentang definisi klasik Style Guide.
Mempertahankan Konsistensi Dengan Website Style Guide
Tuts+ Aaron Lumsden membawa kita melalui pembuatan Style Guide.
Membuat Brand Rockstar, Logo & Styleguide pada Illustrator
Tur menarik di balik layar pembuatan merek "Rockable Press" dan Style Guide.
Cara Kita Membuat Web telah Berubah
Lihatlah beberapa kekuatan pendorong yang telah menyebabkan munculnya Style Guide, dari Natasha Postolovski di blog "Inside Envato".
Style Guide yang Mudah Dikelola
Diskusi dari Ian Feather mengenai cara menjaga Style Guide tetap up to date secara efisien.
Style Guides Front End dan Pattern Libraries
Kumpulan besar contoh Style Guide dan Pustaka Pola dari Anna Debenham
Identitas Brand dan Style Guides Dari Seluruh Dunia
Daftar brand dan identitas Style Guide dari perusahaan dan institusi besar.
Membuat Style Guides
Oleh Susan Robertson di A List Apart.
Front-end Style Guides
Oleh Anna Debenham di 24 Ways.
Front-end Style Guides: A Pocket Guide
Sumber lain dari Anna Debenham. Bagian dari koleksi Five Simple Steps Pocket Guides.
Contoh Style Guide
Lihat beberapa Style Guide dari beberapa merek terbesar dan paling terkenal di web, ditambah beberapa catatan bagus dari perorangan:
New York City Transit Authority Graphics Standards Manual
Yang pertama harus hadir edisi pertama NYCTA Graphics Standards Manual yang dirancang oleh Massimo Vignelli. Jika Anda mengikuti satu link di sini, gunakan yang ini.
Tuts+ Style Guide
Pendirian dan tone, pencitraan merek, format dan banyak lagi.
Twitter Brand Assets and Guidelines
Pedoman penggunaan logo, palet warna, tipografi.
Adobe Corporate Brand Guidelines
Panduan enam puluh halaman komprehensif tentang segala hal yang dapat Anda bayangkan untuk dilakukan dengan Adobe, termasuk logo, fotografi, merek dagang, alat tulis dan barang dagangan.
BBC GEL Web Style Guide
BBC telah menargetkan untuk benar-benar memastikan segala hal yang berkaitan dengan kehadiran web mereka, dengan menyebut Style Guide mereka sebagai "Global Experience Language" (GEL).
Mozilla Style Guide
Style Guide Mozilla sangat teliti. Mereka mengisolasi ciri khas dan pencitraan merek untuk setiap aspek utama dari penawaran mereka; Mozilla, Firefox Family, Browser Firefox, OS Firefox, Marketplace, Webmaker dan Thunderbird. Mereka kemudian membahas gaya untuk situs web, presentasi, video,
tipografi, dan konten teks mereka. Akhirnya, mereka menyediakan Style
Guide lengkap untuk OS Firefox. Ini adalah contoh Style Guide yang
terbaik.
Lonely Planet Style Guide
Style Guide Lonely Planet memberikan cakupan penuh dari Elemen Desain, Komponen UI, Komponen JS dan CSS mereka, dengan masing-masing kategori dipecah menjadi subkategori lebih lanjut yang mencantumkan komponen individual di dalamnya.
Skype Style Guide
Style Guide Skype melakukan pekerjaan yang hebat dalam menyampaikan ciri khas perusahaan melalui merek dan keseluruhan gaya desainnya. Itu mencakup logo, tipografi, warna, ilustrasi, fotografi dan sejumlah subjek lainnya.
Salesforce Style Guide
Style Guide yang sangat visual yang menyusun pedoman, warna, tipografi dan ikon dengan komponen dan contoh-contoh.
facebookbrand.com
Aset pencitraan merek dan Style Guide dari jejaring sosial terbesar di dunia.
Salesforce Style Guide
Beberapa visual yang indah dari Customer Relationship Management raksasa.
findguidelin.es
Cara tercepat untuk menemukan aset merek!
All The Style Guides
Ini benar-benar mulai menjadi semua Style Guide, dikurasikan dalam Tumblog rapi.
Apple
Panduan untuk pengembang yang membuat aplikasi untuk Max OSX dan iOS.
OSX Human Interface Guidelines
iOS Human Interface Guidelines
Panduan untuk pengembang yang bekerja dengan Google Glass, ditambah panduan menyeluruh dua bagian tentang hampir semua aspek gaya visual Google.
Google Visual Assets Guidelines - Part 1
Google Visual Assets Guidelines - Part 2
Individuals' Sites
Dua situs yang menunjukkan betapa bergunanya Style Guide untuk situs pribadi.
Kode Style Guide
GitHub Style Guides
Panduan GitHub untuk memformat CSS, JavaScript dan Ruby untuk proyek GitHub.
Google Open Source Projects Style Guides
Konvensi untuk proyek yang akan diselenggarakan di Google Code, mencakup sepuluh bahasa yang berbeda.
Alat-alat Style Guide
Gunakan alat-alat ini untuk bekerja menghasilkan dan merawat Style Guide Anda sendiri:
Style Guide Boilerplate
Style Guide Boilerplate pada dasarnya adalah paket perdana untuk membuat dasar Style Guide - ini menggambarkan dirinya sebagai penghasil "Bootstraps kecil".
Stylify.me
Ini sangat menyenangkan: masukkan url dari situs yang ingin Anda analisa, lalu perhatikan Style Guide yang dihasilkan. Setelah selesai, Anda bisa mendownload panduannya sebagai PDF.
Generator Style Guide CSS yang Hidup
Masing-masing dari tiga alat berikut ini menghasilkan Style Guide "yang hidup" yang mudah diperbarui agar tetap konsisten dengan perkembangan CSS Anda. Mereka bekerja dengan menguraikan komentar CSS yang diformat secara khusus ke dalam dokumen Style Guide yang berdiri sendiri.
StyleDocco
StyleDocco adalah modul Node.js yang menguraikan komentar berformat Markdown menjadi Style Guide berpra-tema.
Kalei
Kalei juga bekerja dengan mengurai komentar berformat Markdown dari CSS, namun berjalan sebagai JavaScript berbasis browser dan menampilkan Style Guide yang mirip dengan Twitter Bootstrap's.
KSS (Knyle Style Sheets)
KSS membutuhkan Ruby dan menggunakan sintaks komentarnya sendiri. Style Guide GitHub dihasilkan dengan KSS.
Sumber Pembelajaran Style Tile
Mari mulai menggunakan pengetahuan kita ke dalam aplikasi praktis.
StyleTil.es
Rumah konsep asli untuk Style Tiles karya Samantha Warren.
Style Tiles: An Alternative to Full Design Comps
Chris Brown dari Tuts+ menuntun kita melalui keuntungan menggunakan Style Tiles.
Alat-alat Style Tile
Style Tiles for Sketch
Template sketsa open source gratis untuk pembuatan Style Tiles.
Informasi Pola
Atomic Design
Brad Frost menggambarkan teori yang mengarah pada penciptaan alat Lab Pola-nya.
patternlab.io
Lab Pola yang disebutkan di atas.
Contoh Pattern Library
MailChimp Pattern Library
MailChimp's pattern library mencakup sistem grid, tipografi, bentuk, navigasi, tabel, daftar, ikon dan lainnya.
A List Apart Pattern Library
Dokumentasi A List Apart dari contoh warna mereka, tipografi, pemformatan gambar, judul, ringkasan artikel dan aspek lain dari desain situs mereka.
Yahoo! Design Pattern Library
The Yahoo! Design Pattern Library adalah sumber dari 59 pola yang berbeda yang mereka gunakan dalam properti mereka sendiri, tersedia untuk digunakan oleh pengembang lain.
UI Patterns
UI Patterns adalah situs yang sangat besar yang mendokumentasikan berbagai pola dari berbagai situs di seluruh web. Pola dapat dilihat menurut kategori dan dipilih naik atau turun oleh pengguna situs.
Peralatan Pola
Pola Primer
Pola Primer memungkinkan Anda menyimpan cuplikan markup ke dalam "folder pola" dan memunculkannya dalam daftar dengan pratinjau dan area copy & paste untuk setiap cuplikan. Contoh pola prime
Pea.rs
Pea.rs adalah tema WordPress open source gratis yang dirancang untuk membantu Anda membuat situs dengan contoh preview markup yang kemudian dapat Anda gunakan untuk menerapkan pola kustom Anda sendiri.
Patternry
Patternry adalah layanan komersial yang memungkinkan pola dirancang, dibagi, diatur dan dikolaborasikan di antara satu tim.
Pattern Lab
Pattern Lab adalah pembuatan Brad Frost, berdasarkan konsepnya "Atomic Design". Ini membantu Anda membuat pustaka pola sesuai dengan sistem atom> molekul> organisme> templat> halaman. Demo pattern lab.
Penutup
Jika sebelumnya Anda tidak yakin harus mulai dari mana dengan Style Guide Anda sendiri, Anda sekarang pasti menemukan banyak sumber inspirasi dan bantuan ekstra.
Saya sarankan Anda untuk meluangkan sedikit waktu untuk membaca artikel ini, lihat dengan seksama contoh-contoh untuk melihat bagaimana mereka bekerja "di alam liar", dan cobalah beberapa alat yang berbeda untuk melihat mana yang paling sesuai untuk Anda.
Daftar ini sama sekali tidak lengkap, jadi kami ingin mendengar saran Anda sendiri di komentar. Tetap saja, ada banyak hal yang bisa dipelajari dan dimainkan, jadi bersenang-senanglah!
