Panduan Pereka untuk Bekerja Dengan Garis Panduan Gaya & Gaya
Mewujudkan a identiti berjenama bukanlah tugas yang mudah. Ia memerlukan usaha keras tetapi ia juga merupakan salah satu tugas kreatif yang paling menggembirakan. Projek web sering campuran penjenamaan dengan reka bentuk antara muka. Ini boleh mengelirukan kerana terdapat banyak perkara yang perlu dilakukan di kedua-dua kawasan. Panduan gaya dan jubin gaya adalah sumber yang hebat untuk pereka web, dan sementara mereka berbunyi sama, mereka berjaya dua tugas yang berbeza.
Di dalam jawatan ini, saya ingin menyelidiki kedua-duanya, dan melindungi manfaat yang boleh anda peroleh dari aset kreatif ini. Tidak semua orang perlu (atau suka) membuat panduan gaya atau jubin gaya. Tetapi setiap pereka harus sekurang-kurangnya memahami apa ini, dan bagaimana mereka bekerja.
Panduan Gaya Untuk Web
Saya telah membaca pelbagai pendapat mengenai panduan gaya. Ada yang mengatakan ini adalah mockups digital manakala yang lain mengatakan bahawa panduan gaya berasaskan kod adalah yang paling berguna.
Sama ada cara, matlamat panduan gaya adalah sama untuk web sebagai projek lain. Ia mentakrifkan corak konsisten, modul UI, dan keutamaan kreatif digunakan dalam proses reka bentuk. Anda boleh mendapatkan ukuran yang sangat spesifik dan menetapkan ukuran pixel-sempurna untuk elemen tertentu, atau anda boleh kekal longgar dan menawarkan garis panduan dengan contoh visual.
Tidak ada cara yang betul untuk melakukan panduan gaya. Satu-satunya cara yang salah adalah untuk mencipta sumber yang semata-mata tidak dapat difahami oleh orang lain.
Matlamatnya adalah untuk mencipta aset yang akan berdiri ujian masa. Ia harus dibuka untuk pengeditan jika sumber baru dicipta. Ia juga harus diakses untuk sesiapa sahaja yang menyertai pasukan untuk menyelam masuk ke dalam panduan dengan mudah.
Panduan gaya sepatutnya seperti yang diperlukan untuk projek itu. Ia biasanya termasuk aset boleh diguna semula, seperti tipografi, butang, swatch warna, tekstur, dan elemen halaman biasa.
Kami baru-baru ini dilindungi alat panduan gaya hidup yang boleh membantu anda membina panduan gaya hidup dari awal. Panduan hidup ini lebih untuk pemaju frontend, tetapi mereka juga boleh berguna kepada pereka. Anda boleh membaca lebih lanjut mengenai topik ini dalam catatan Majalah Smashing ini.
Sumber kegemaran saya ialah StyleGuides.io. Ia meliputi asas panduan gaya untuk web, termasuk contoh hidup dan kajian kes.
Perpustakaan corak MailChimp adalah salah satu contoh terbaik yang boleh anda dapati di StyleGuides.io. Ia adalah panduan gaya hidup dalam talian itu mentakrif grid MailChimp, tipografi, dan elemen halaman.
Apabila anda merancang panduan gaya untuk sebuah syarikat web, perkara biasa adalah untuk meletakkan semuanya dalam talian, tetapi anda juga boleh membuat panduan dalaman, dan simpannya pada intranet tempatan atau hantarkannya secara peribadi di belakang halaman log masuk pengguna. Cara anda mengakses panduan gaya sebenarnya tidak penting. Mereka semua memberi maksud yang sama untuk menyampaikan warna, corak, dan visual yang khusus sepadan dengan tema projek web.
Untuk mengetahui lebih lanjut mengenai perkara ini, lihat siaran lain pada panduan gaya:
- Panduan Gaya Depan (24ways.org)
- Buat panduan gaya laman web (creativebloq.com)
- Cara Membuat Panduan Gaya Reka Bentuk Web Perfect (dtelepathy.com)
Memasuki Jubin Gaya
Jubin gaya adalah binatang yang berbeza sama sekali. Jubin ini aset kreatif yang digunakan dalam fasa reka bentuk awal apabila cuba untuk menoreh estetika tertentu.
Laman web Gaya Tiles telah dicipta oleh Samantha Warren, dan ia mempunyai semua yang anda mungkin perlu tahu. Terdapat tiada templat tertentu untuk mereka bentuk jubin gaya. Tetapi contoh Samantha digunakan tajuk dan jenis perenggan, pautan, corak, dan pilihan warna mungkin bersama dengan a logo berjenama.
Apabila bekerja dengan jubin gaya, matlamat anda akhirnya adalah hadir 2-3 jubin gaya yang berbeza kepada pelanggan atau pengarah kreatif. Jubin ini lebih terperinci daripada papan mood, lagi jauh lebih terperinci daripada mockup penuh.
Jubin sepatutnya cukup terperinci untuk memberi makna kepada identiti dan suasana laman web. Samantha menggalakkan menggunakan kata sifat untuk menggambarkan setiap jubin secara terperinci.
Pelanggan boleh melihat melalui jubin yang berbeza, dan pilih keping kegemaran mereka. Ini menjimatkan masa anda apabila mereka merancang kerana pelanggan telah melihat aset yang mereka suka, jadi kurang peluang untuk semakan yang besar.
Berikut adalah petikan hebat dari laman web Gaya Tiles:
Membandingkan jubin gaya kepada toolkit pereka dalaman adalah analogi yang tepat. Anda tidak mahu mencurahkan usaha ke dalam mockup pixel-sempurna hanya untuk mempunyai pelanggan menyedari bahawa mereka benci kebanyakan warna dan fon.
Sebaliknya, gunakan jubin gaya untuk mencari tema biasa atau bahasa visual untuk digunakan di seluruh laman web. Ini boleh termasuk penjenamaan / identiti tetapi juga mungkin termasuk Ciri UI, seperti menu jatuh turun atau butang CTA.
Anda harus menggunakannya sebagai aset yang boleh diserahkan awal dalam proses. Sebaik sahaja anda melengkapkan mockup penuh, anda tidak perlu merujuk lagi gaya jubin. Walau bagaimanapun pada mulanya, jubin gaya boleh menjadi penting untuk proses kreatif oleh menjimatkan masa pereka dan Mengulas klien banyak pilihan untuk dipilih.
Jika anda mahu menyelidiki lebih banyak ke jubin gaya semak kiriman yang berkaitan ini.
- Ubin Gaya dan Bagaimana Mereka Berfungsi
- Ubin Gaya: Alternatif kepada Kompak Reka Bentuk Penuh
- Mewujudkan Ubin Gaya: Pendekatan Mudah Untuk Arah Reka Bentuk
Panduan Gaya vs Ubin Gaya
Perbezaan antara panduan gaya dan jubin gaya adalah samar-samar tetapi pasti. A panduan gaya adalah lebih banyak lagi terperinci dan harus digunakan sebagai panduan rujukan berterusan untuk pasukan kreatif. A jubin gaya boleh digunakan sebagai moodboard kepada plot idea secara visual untuk diri sendiri atau pelanggan. Mereka sering digunakan untuk meneroka idea, dan apabila projek selesai, mereka tidak banyak memberi tujuan.
Jubin gaya sering lebih kasar di sekeliling tepi, dan ia digunakan semata-mata dalam proses kreatif awal. Panduan gaya dimaksudkan untuk digunakan sepanjang proses reka bentuk keseluruhan dan walaupun selepas itu untuk rujukan masa depan untuk pereka lain yang mungkin bekerja di laman web ini.
Kedua-duanya mempunyai manfaat dan kekurangannya. Jubin gaya adalah cepat dan menyeronokkan, tetapi tidak lama lagi dalam alam semula jadi. Panduan gaya adalah teliti dan berkelakuan seperti dokumentasi visual, tetapi mereka juga memerlukan banyak kerja.
Jadi mana yang patut anda gunakan? Ia akhirnya bergantung kepada projek.
Projek yang lebih kecil seperti untuk laman web perniagaan kecil yang berfungsi lebih baik dengan jubin gaya. Membina panduan gaya keseluruhan untuk tapak perniagaan kecil memerlukan kerja yang terlalu banyak dan jam yang boleh dibilas. Ini mungkin tidak bernilai untuk kebanyakan pelanggan.
Walau bagaimanapun a projek besar seperti mendesain semula NY Times akan mendapat manfaat daripada kedua-dua jubin gaya dan panduan gaya.
Mencari bahasa dan suasana hati untuk projek baru selalu merupakan proses yang berharga. Inilah yang membuat jubin gaya sempurna untuk hampir setiap senario.
Anda juga boleh mendapatkan tanpa mewujudkan salah satu daripada aset ini. Sesetengah pereka pergi betul dari wireframes kepada pengetatan terperinci. Dan beberapa pelanggan bahkan tidak mahu panduan gaya kerana ia tidak akan digunakan.
Bekerja secara per-projek dan tentukan apa yang terbaik untuk setiap orang.
Contoh Live
Mari bungkus ini dengan menutupi contoh kedua-dua panduan gaya dan jubin gaya. Saya dapati reka bentuk ini semasa melayari Dribbble dan saya fikir mereka memberi contoh kualiti yang anda mahu dalam panduan gaya anda sendiri atau jubin gaya.
Panduan Gaya
Panduan gaya Airbnb yang luar biasa ini dicipta oleh Derek Bradley. Ia sangat mudah tetapi ia jelas menggambarkannya corak utama, warna, dan elemen halaman boleh didapati dalam reka bentuk.
Berikut adalah panduan gaya digital yang lebih besar yang dicipta oleh pereka Naoshad Alam. Contohnya ialah lebih teratur dengan bahagian untuk warna, tipografi, borang, elemen antara muka dan ciri UI yang lain.
Panduan gaya yang lebih terperinci akan meletakkan semua elemen reka bentuk di web, dan termasuk coretan kod untuk setiap satu.
Pereka Cupi Wong membuat panduan ini untuk AfterShip. Tipografi, butang, pilihan warna, dan elemen halaman biasa dibuat dengan teliti, dan dianjurkan bersama ke dalam bahagian.
Ini juga boleh dialihkan ke web, dan dibina lebih besar sebagai dokumentasi rujukan dalam talian.
Pereka UI Greg Dlubacz berkongsi panduan gaya UInya sendiri untuk projek web. Perkara ini sangat besar. Pratonton skrin penuh menjangkau 21,000 piksel tinggi!
Benar-benar salah satu panduan gaya digital terbaik yang pernah saya lihat. Ini juga boleh dipindahkan ke halaman dokumentasi dalam talian untuk ahli pasukan untuk rujukan.
Jubin gaya
Pereka UI / UX Abdus Salam mencipta jubin gaya ini untuk laman web kedai makanan organik. Ia sangat asas dengan elemen reka bentuk rata, beberapa ciri UI yang kecil, dan a palet warna.
Pereka Adrian Cantelmi benar-benar pergi terperinci dengan jubin gaya divestasinya. Ia mempunyai warna dan tipografi tetapi juga termasuk ilustrasi vektor.
Vektor ini membantu mentakrifkan jenama, mood, dan skema warna keseluruhan dari laman web.
Reka bentuk World Cup Advisors mendapat jubin gayanya sendiri dengan ciri-ciri yang sangat asas. Beberapa ikon, beberapa pilihan warna, bersama-sama dengan reka bentuk butang pasangan. Kesederhanaan adalah nama permainan.
Jika anda boleh merasakan apa yang kelihatan seperti laman web sekali pandang maka anda melakukannya dengan betul.
Berikut adalah contoh menyenangkan jubin gaya yang ditolak yang digunakan untuk projek perjalanan. Pereka Brennan Gleason hanya menyediakan contoh kecil jubin, tetapi anda masih boleh merasakan suasana laman web.
Perkataan Akhir
Jika anda mencari di sekitar web, anda akan dapati banyak lagi contoh, tip, dan sumber untuk panduan gaya bangunan dan jubin gaya. Tetapi saya harap artikel ini boleh menjadi buku primer pada kedua-dua dan membuat anda fasih dalam memahami & mencipta aset reka bentuk ini.
