Tutorial Lakaran

Panduan Permulaan Pantas untuk Sistem Rekaan Cabana

Ketahui cara dengan mudah memperbaiki Aliran Kerja Reka Bentuk Anda di Lakaran di sini, sekarang!

Cara kembali pada bulan November 2017 (menyertakan beberapa muzik yang agak pelik dan pudar skrin goyangan) Saya memutuskan untuk memulakan Membina Sistem Reka Bentuk / Sketch Starter File yang dipanggil Cabana. Anda boleh membaca artikel asal saya di sini.

Saya telah mencipta sejumlah artikel yang cukup sejak masa itu, ada yang pergi ke detail terperinci tentang bagaimana saya membina Sistem, dan juga bagaimana anda boleh bekerjasama dengan Sistem Reka ...

  • Bagaimana untuk mencipta Sistem Reka Bentuk dalam lakaran
  • Mewujudkan Sistem Reka Bentuk dalam lakaran

Tetapi anda tahu apa (dan walaupun arahan yang dimasukkan di dalam Cabana cukup terperinci dalam hak mereka sendiri), saya tidak akan memberi pengguna Cabana panduan pengajaran yang lebih terperinci ...

... tapi itulah yang saya mahu lakukan di sini, dan memberi arahan kepada anda dengan cara yang lebih terperinci supaya anda boleh melompat masuk ke Cabana dan berkata "Giggity panas sial saya Cabana Design System Pro hanya menunggu sehingga seluruh pasukan dapatkan sekeping saya, promosi di sini saya datang ", atau mungkin sesuatu yang sedikit lebih dihalang daripada itu?

Dengan artikel ini, saya ingin anda dapat mengatasi bukan sahaja keyakinan untuk menggunakan Sistem Rekaan Cabana dalam aliran kerja harian anda tetapi juga dengan pemahaman tentang bagaimana menguntungkan aliran kerja anda Sistem seperti Cabana.

Sebelum kita mula, ambil sendiri Kopi, satu salinan Cabana, dan biar saya tunjukkan kepada anda bagaimana untuk meletakkan Sistem Reka Bentuk Sedikit Kegiatan ini.

Perkara pertama dahulu

  • Dapatkan salinan Cabana di sini
  • Pasang fon Poppins dan Open Sans
  • Nyalakan salinan Sketch anda
  • Mari lakukan ini!

Apabila anda mula-mula membuka Cabana, anda akan dibentangkan dengan 4 Halaman kehebatan yang tidak ...

  • Sila mulakan di sini
  • Panduan Gaya
  • Komponen
  • Demo Sistem Reka Bentuk
  • Simbol

Mari kita fokuskan pada halaman Sila Mula Sini. Betul betul?

Sila mulakan di sini

Di laman web ini, kebanyakan majoriti Sistem Reka bentuk sihir berlaku. Ooh la la!

Di sini anda akan mendapati 3 Artboards berasingan ...

  • Warna
  • Typography
  • Pelbagai

Warna asas

Mari kita lihat bagaimana untuk menyesuaikan Warna Asas di dalam Cabana kita?

Kami akan memberi tumpuan kepada Warna Utama di sini, dan saya akan menunjukkan kepada anda betapa mudahnya untuk membuat hanya pelarasan pada halaman ini dan menyebarkannya ke seluruh Sistem. Ia adalah beberapa sihir Sistem Reka Bentuk / Reka Bentuk di tempat kerja di sini!

Hanya seret kursor anda di sekitar blok Warna Utama, ini akan memilih kedua-dua Warna Isi dan Sempadan. Jangan risau tentang label kecil yang dipilih, semua Judul dan Label dikunci, tidak boleh dipilih, dan tidak bergerak di mana-mana sahaja!

Kemudian, dari Inspektor, hanya kemas kini Warna Isi & Sempadan kepada sesuatu yang lebih sesuai dengan projek anda di tangan, dan kemudian klik ikon Penyegerakan untuk gaya baru ini untuk memohon perubahan.

Jika anda dengan cepat melompat ke salah satu halaman lain, menjadi Simbol, atau Komponen misalnya, anda akan melihat penyesuaian Warna mudah ini dalam semua kemuliaannya yang disebarkan.

Ini jenis penjimatan masa pasti akan membuat Back to the Doc Brown Masa Depan menjerit "Sketch Great!".

Di dalam Cabana DS (Sistem Reka Bentuk) anda juga mempunyai Warna berikut untuk membantu anda dari awal ...

  • Sekunder
  • Tertiari
  • Hitam
  • Kelabu
  • Kelabu cerah
  • Kejayaan
  • Amaran
  • Ralat

Dengan lain-lain Warna yang tersedia, anda hanya boleh menggunakan apa yang diperlukan untuk projek ini dan meninggalkan selebihnya. Tidak menjadi masalah. Saya jarang mencari diri sendiri menggunakan Warna Tersier misalnya, tetapi ia hanya ada apabila projek boleh memanggilnya, dan anda menjamin jika tidak ada projek 'seterusnya' akan memanggilnya! Anda tahu bagaimana ia berlaku?

Over Warna Overlays

Lapisan Warna hanya terdapat untuk tujuan penjenamaan dan kekentalan yang konsisten sepanjang projek anda. Dengan pilihan Utama, Menengah dan Hitam untuk dipilih.

Untuk mendapatkan Overlay di tempat, contohnya Overlay Utama, anda hanya perlu melompat ke Inspektor dan pilih Nilai Warna Hex (#) yang anda buat pada Color Base Primer anda, dan kemudian dengan Paste yang terpilih di dalam ini Nilai Hex dan klik pada ikon Sync. Semua dilakukan!

Saya telah pun muncul dalam Imej Demo jadi anda boleh mendapatkan tolok kasar bagaimana Warna pilihan anda akan kelihatan apabila dilapisi. Jangan ragu untuk tweak Opacity jika diperlukan dan kemudian ingat Sinkronkan sebarang perubahan yang telah anda buat.

Anda boleh teruskan dan ulangi proses yang sama untuk Hamparan Warna Sekunder dan Hitam jika diperlukan.

Typography

Jangan biarkan banyak fon di depan anda menghantar anda berjalan untuk salinan Photoshop. Tetap tenang dan dengarkan. Semuanya akan menjadi baik saya berjanji :)

Sistem Rekaan Cabana kini menggunakan 2 Font Keluarga; Poppins, untuk Tajuk, Butang dan sebagainya ...

... dan Open Sans, untuk Badan, Lead etc ...

Mereka dirujuk sebagai Family Font # 1 (Poppins) dan Family Font # 2 (Open Sans).

Ini hanya membolehkan anda dengan mudah menukar keluarga font kepada sesuatu yang lebih sesuai untuk projek anda tanpa perlu melalui Gaya Teks anda dan menukar nama keluarga font.

Untuk setiap Keluarga Font, anda mempunyai Gaya dari Uber (untuk mereka yang lebih besar daripada tajuk Kehidupan yang sesuai untuk penggunaan Web) sepanjang jalan ke Tiny (lebih sesuai untuk teks yang lebih kecil pada peranti Mudah Alih).

Kedua-dua Keluarga Font mempunyai setiap Gaya yang dilampirkan kepada mereka, membolehkan anda untuk beralih antara 2 Font Keluarga dengan mudah apabila mengerjakan projek.

Untuk dengan mudah menukar salah satu Keluarga Font agar sesuai dengan projek semasa anda, seret kursor anda di sekitar salah satu blok teks (anda boleh memilih semua blok atau hanya warna yang akan anda gunakan dalam projek anda).

Sekali lagi jangan risau tentang memilih mana-mana tajuk (iaitu, Keluarga Font # 1 (Black)), semuanya dikunci.

Sebenarnya anda boleh mengezum keluar supaya semua Keluarga kelihatan pada skrin anda (berguna jika anda bekerja dengan skrin yang lebih kecil) dan masih yakin memilih blok teks tanpa sengaja memilih elemen lain pada Artboard.

Sekiranya anda melihat imej di bawah, anda akan melihat bahawa saya telah menyeret kursor saya dari kiri atas Artboard tanpa bimbang memilih mana-mana tajuk (tetapi berguna untuk merujuk kursus) pesakit. Selamat memilih hari!

Kemudian dari Panel Inspektor, ubah Family Font, dan klik pada Syncicon untuk melihat perubahan anda.

Sila Perhatikan: Mana-mana Warna, Saiz Fon, Pelarasan Berat dan Penjajaran semua akan disimpan apabila anda mengklik pada ikon Refresh. Hanya Keluarga Font yang sebenar akan berubah. Oleh itu, jangan risau kehilangan salah satu daripada tweak yang anda mungkin buat sebelum anda mengklik ikon Penyegerakan.

Juga ambil perhatian bahawa Lakaran mungkin kelihatan tidak responsif jika anda menukar semua Gaya Teks sekaligus. Beri saja sebentar atau dua ketika ia membuat semua kemas kini teks.

Kini anda mungkin melihat warna Kuning (Amaran) tidak membuat penampilan dalam pilihan Tipografi. Ini sengaja dilakukan kerana saya mendapati sangat jarang bahawa anda akan menggunakan Jenis Kuning untuk reka bentuk. Blok warna, ya, tetapi untuk Typography dan kemungkinan isu Kebolehaksesan yang boleh membawa saya tidak memasukkannya.

Itu bukan untuk mengatakan bahawa anda tidak boleh memohon sendiri jika diperlukan, tetapi dari pengalaman peribadi saya, saya jarang sekali, jika pernah, memanggil Typography Kuning dalam reka bentuk, jadi tidak masuk akal untuk menyertakannya.

Ingatlah bahawa Gaya Layer dan Gaya Teks adalah 2 entiti berasingan di dalam Lakaran dan warna yang anda tetapkan contohnya Warna Pangkalan Utama anda tidak akan menyebarkan ke Typography dengan tajuk utama. Anda perlu salin dan tampal merentasi nilai Hex kemudian Segerakkan untuk melihat perubahan. Ini hanya cara Layer, dan Gaya Teks berfungsi dalam Sket. Maaf untuk mengecewakan orang di sana.

Shadows

Di sini anda boleh memilih dari pemilihan bayang-bayang yang lembut, lembut untuk meningkatkan unsur-unsur di dalam projek anda. Untuk mengalih keluar bayang-bayang dari elemen, pilihlah Tiada pilihan Shadow dari panel Gaya Dikongsi.

Untuk membuat penyelarasan pada mana-mana pilihan Shadow, anda boleh mengedit nilai X, Y, Blurand Spread dalam panel Shadows, dan untuk sebarang perubahan Opacity, klik pada Warna dan laraskan nilai Alpha di sana. Sebaik sahaja anda membuat sebarang perubahan, anda akan melihat ikon Sync muncul, klik pada ini untuk mengemas kini perubahan anda. Selesai & Selesai!

Sekiranya anda memutuskan untuk membuat sebarang pelarasan kepada kekuatan bayangan, pastikan anda mengklik ikon Sync sebaik sahaja perubahan anda telah dibuat.

Untuk menggunakan Shadow Layer Style dalam projek anda, cukup buat Borang Bentuk, dan ini boleh menjadi bekas atau imej, dan kemudian dari panel Inspektor memilih Gaya Layer Shadow, contohnya Shadow> Shadow 40%.

Sekiranya anda membuat keputusan bahawa Shadow tidak sesuai untuk elemen pilihan anda, anda boleh menukar ke Shadow> No Shadow Layer Style.

Mudah dengan taburan pada!

Kecerunan

Fikirkan Kecerunan di dalam Sistem Rekaan Cabana sebagai tambahan tambahan. Mereka tidak diperlukan, projek yang anda sedang kerjakan mungkin tidak memerlukan apa-apa untuk mereka tetapi mereka berada di sana jika anda perlu memanggil mereka. Saya hanya cuba menjimatkan sedikit masa jika anda memerlukan mereka dalam projek. Sentiasa berfikir ke hadapan!

Untuk menukar mana-mana Gradien di dalam Cabana, teruskan dan pilih kecerunan yang anda ingin ubah (contohnya Rain Rain), kemudian laraskan Gradient Fill dalam Inspektor dan setelah anda gembira dengan hasil yang anda Gradien Wizard anda, klik pada ikon Sync untuk mengunci Gradien tweak anda.

Jika anda mahu mengubah label Gaya Layer juga, ikut langkah yang saya nyatakan di atas, dan bukannya mengklik ikon Sinkronkan, pilih Cipta Gaya Layer baru dari menu jatuh turun dan namakan dengan sewajarnya.

Semua Gradien mempunyai Kelegapan 80% yang digunakan untuk mereka supaya anda boleh meneruskan dan melapiskannya pada imej anda, tetapi jangan ragu untuk tweak Opacity untuk memenuhi keperluan anda.

🖼 Imej Duotone

Sekarang, seperti Gradien sebelum ini, anda boleh melihat gaya imej Duotone sebagai tambahan pilihan kecil, dan tidak semestinya diperlukan untuk projek yang anda sudah bersedia untuk pergi, tetapi seperti Gradien yang saya sebutkan tadi, mereka berada di sana jika anda perlukan mereka (Ya Duotone masih On-Trend) dan menyelamatkan anda kerja tambahan untuk membuatnya pada masa akan datang.

Untuk mengedit Duotone Images yang sudah tersedia, pilih salah satu (contohnya Blue Moon) dan kemudian dari Inspektor tweak di pelbagai pilihan Blending Warna. Di sini anda boleh memilih daripada Pilihan Blending seperti Skrin, Multiply dan Lighten untuk mencari sesuatu yang memadukan dengan baik dengan Nilai Warna yang anda pilih.

Anda juga boleh memilih salah satu daripada Fills dan klik dan seret untuk menyusunnya semula di Inspektor, dan cuba pelbagai kombinasi sehingga anda senang dengan hasil akhir. Pergi liar untuk Campuran!

Apabila anda menggunakan Duotone pilihan anda dalam projek, hanya masukkan lapisan bentuk, pilih Duotone Shared Style yang berkaitan dan kemudian masukkan imej pilihan anda (lebih baik imej Black & White untuk kesannya menjadi lebih ketara).

8 Panduan Grid Point

Akhir sekali ke 8 Point Grid System, yang mana saya seorang pembela sebenar, dan menggunakan hampir semua projek saya.

Mengapa? Nah, kerana mewujudkan komposisi estetika yang menyenangkan dan tersusun untuk Projek setiap dan setiap kali, adalah sukar untuk dilakukan tanpa Sistem Grid sedemikian, dan 'terbang buta' bukanlah cara untuk melakukan sesuatu semasa mengendalikan Projek Pelanggan.

"Mari kita pergi ke sini, dan, mari kita pergi dengan 15.75pt di sini, dan oh pergi kemudian, 14.5pt di sini untuk langkah yang baik".

Tidak. Tidak sejuk!

Dengan Sistem Grid yang kuat seperti 8pt yang digunakan di dalam Cabana, anda boleh merasa aman dalam pengetahuan bahawa unsur-unsur dalam projek anda telah ditakrifkan, hubungan jarak yang konsisten dengan satu sama lain, dan bukan hanya itu, tetapi bahawa diri anda dan pemaju dapat untuk bekerja dari Sistem Grid tertentu yang sama dari reka bentuk melalui kepada pembangunan dan mengelakkan isu jarak dan penjajaran sepanjang jalan melalui pengeluaran. Selamat rakyat semua bulat!

Dengan Panduan Grid 8pt di Cabana, anda boleh meneruskan dan memasukkan Gaya Dikongsi ke dalam Projek, mengelompokkannya dan kemudian tunjukkan / sembunyikan Kumpulan seperti yang diperlukan semasa bekerja. Sekiranya diri anda dan Dev anda menggunakan alat seperti Zeplin, anda boleh membuat Gaya Diri 8pt yang dapat dilihat oleh Pembangun anda dan kemudian dengan mudah merujuknya dalam pengeluaran.

Saya harap Panduan Permulaan Ringkas ini menggunakan Cabana sebagai membantu anda memulakan perjalanan Sistem Rekaan anda dalam beberapa cara.

Dan sekiranya anda menjadi salah satu daripada orang-orang yang tidak berpuas hati untuk menggunakan Sistem seperti Cabana (Really?), Anda boleh meraih salinan baru Cabana di bawah ...

Mahu dengan cepat memperbaiki alur kerja reka bentuk anda dalam lakaran? Dapatkan salinan Sistem Rekaan Cabana di sini.

Gunakan kod tawaran MEDIUM25 untuk menerima OFF 25%.

Terima kasih kerana membaca artikel itu,

Marc

Pereka, Pengarang, Bapa dan Kekasih Hari Cerah