Eskiz Stil Kılavuzu, Kitaplık ve UI Kiti Nasıl Oluşturulur

Her tasarım projesi, iyi düşünülmüş bir stil kılavuzundan yararlanabilir. Bir UI kiti oluşturmak ve aynı anda hızlı prototipleme için özel (ve yeniden kullanılabilir) bir kitaplık oluşturmak için bu öğreticiyi kullanın.

Sketch uzmanı veya Sketch'te yeni olan tasarımcılar, Sketch'te stil kılavuzları oluşturmanın, tasarım araç kutuları için çok zaman kazandırabilecek değerli bir kaynak olabileceğini göreceklerdir.

Stil kılavuzu, yalnızca işlerin tutarlı olmasına yardımcı olmakla kalmaz, aynı zamanda çok daha az güçlükle birden çok belgede renkler ve simgeler gibi öğelerde güncellemelere olanak tanır. Bu eğitici, bir stil kılavuzu ve UI kiti oluşturma sürecini adım adım açıklar ve tasarımcılara Sketch sembollerini daha iyi anlamalarını, tasarımları için bir Sketch kitaplığına başvurmalarını ve tasarım varlıklarının organizasyonuna güvenmelerini sağlar.

Çizim Stili Kılavuzunuzu Oluşturma

UXPin'e göre, "Stil kılavuzu, marka kurallarından harekete geçirici mesaj düğmeleri için eğim miktarına kadar bir proje için tekrar eden tüm öğelerin kaydını tutan kapsamlı bir 'canlı belgedir'". Bir stil kılavuzu, basit görsel öğelerden kelime dağarcığına ve onaylanmış görüntülere kadar her şeyi içerebilir. Bu eğitici, organizasyonu, renkleri, simgeleri, yazı tiplerini, metin stillerini ve varlıkları kapsar.

Birinci Adım: Organizasyon

1. Çizim dosyalarını, eklentileri ve yazı tipleri ve ikonografi gibi diğer gerekli varlıkları tutmak için bir ana klasör oluşturun. (Eklentiler eğitimin sonunda tartışılacaktır.)
2. Yeni bir Sketch dosyası başlatın ve “ Müşteri Adı Kitaplığı” olarak adlandırın. Örneğin, müşteriniz Toptal ise dosyanızın adı “Toptal Library” olmalıdır.

İkinci Adım: Renkler

Renkler zaten seçilmişse, sonraki adım renklerinizi sembollere dönüştürmektir.

1. Bunu yapmak için aynı boyutta kareler yapın ve renklerini buna göre değiştirin. “Create Symbol”e tıklayın ve bu öğeleri color/ @color-name etiketleme sistemini kullanarak kaydedin. Color/@pink , color/@background-gray veya color/@FFFFF uygun etiket örnekleridir. Adlandırma kuralları, bir stil rehberini düzenli tutmak için önemlidir, bu nedenle her şey için bir format oluşturulmalı ve en baştan buna bağlı kalınmalıdır.
2. Tamamlandığında, bunları stil kılavuzu sayfasına ekleyin.
3. Renk örneğini, renk paletinizin belgeler bölümüne kaydedin.

Faydalı kısayollar: R - dikdörtgen aracı, T - metin aracı, alt - mesafeyi ölç.

Üçüncü Adım: Simgeler

Simgeleri dinamik sembollere dönüştürmek, renklerinin yukarıdaki İkinci Adımda kaydedilen renklerden herhangi birine kolayca değiştirilmesini sağlar. Bu, bir tasarıma bir simge yerleştirildikten sonra rengin, tuvalin sağındaki 'Müfettiş' kullanılarak 'geçersiz kılma' adı verilen basit bir açılır menü aracılığıyla değiştirilebileceği anlamına gelir.

1. Simgeyi bir sembol olarak kaydedin (mümkünse varlık türü için .svg'ye yapıştırın).
2. Sembol sayfasına gidin, simgeyi bulun ve önceden kaydedilmiş renklerden varsayılan bir renkle maskeleyin. Bunu yapmak için, simgenin üstündeki renk sembolünü kaplayın ve araç çubuğundaki “Maske”ye tıklayın (veya sağ tıklayın ve açılır menüden “Maske”yi seçin).
3. Simge maskelendikten sonra, Inspector'da "Dolgular" bölümünün altındaki onay kutusunun işaretini kaldırarak dolguyu kaldırın.
4. Stil kılavuzu sayfasındaki simgeleri düzenleyin. Aynı bölümde, etkin ve etkin olmayan simgelerin rengini ve diğer önemli renk özelliklerini belirtmek yararlıdır.

Dördüncü Adım: Metin Stilleri

Yazı tipleri seçildikten sonra, metin stillerini belirleme zamanı gelir: H1, H2, H3, H4, H5, gövde, bağlantılar, başlıklar, etiketler, vb. Web tipografisi için iyi bir referans, Typecast'in bu blog yazısıdır.

1. Gerektiği kadar çok stil için boyut, ağırlık, karakter ve satır aralığını seçin.
2. Bir kelime yazın (“Bir Şey Yaz”, metin aracı olan T'ye bastığınızda otomatik olarak görünür) ve seçilen stil ayrıntılarını yansıtacak şekilde biçimlendirin.
3. "Yeni Metin Stili Oluştur" u tıklayın.
4. Stil kılavuzu sayfasındaki metin stillerini düzenleyin.

Beşinci Adım: Varlıklar

Şimdi eğlenceli kısım için. Bazı varlıklar oluşturmak için önceki tüm adımları birleştirmenin zamanı geldi. Varlıklar zaten oluşturulmuşsa, tutarlılık için bunları önceden seçmiş olduğunuz metin stillerini, simgeleri ve renkleri kullanarak yeniden oluşturmak en iyisidir. Örneğin, çalışan tasarım belgesinde bir tasarımın hesaba katmadığı birçok farklı gri rengi olabilir, bu nedenle varlığın yeniden oluşturulması seçilen rengin tutarlılığını garanti eder. Adlandırmayı tutarlı tutmayı unutmayın ve varlıkları oluşturuldukları sırada stil kılavuzu sayfasına eklediğinizden emin olun.

Üzerinde çalışılması önerilen bazı öğeler şunlardır:

Düğmeler

1. Düğmeyi varsayılan renkte maskeleyerek ve dolguyu kaldırarak, tıpkı simgeler gibi bu dinamik sembolleri yapın.
2. Metni her zaman ortalanmış halde tutmak için metin kutusunun genişliğini düğmeyle aynı olacak şekilde genişletin ve metni ortalayın.
3. Tutarlılığı sağlamak için kaydedilen metin stillerini kullandığınızdan emin olun.
4. Düğme/ düğme adı adlandırma sistemini kullanarak bu öğeleri semboller olarak kaydedin.
5. Etiketleri ve renkleri değiştirmek için geçersiz kılma özelliğini kullanın.

Arama Çubukları

1. Arama alanına ve alanın kendisinde kullanılan simgelere ve metne yeniden boyutlandırma kısıtlamaları uygulayın.
2. Belge renk paletinize önceden kaydedilmiş metin stillerini ve renkleri uygulamayı unutmayın.
3. Başlık olarak aramayı kullanarak bu öğeyi bir sembol olarak kaydedin veya farklı arama türleriniz varsa search/standart ve search/no-icon gibi etiketleme sistemine bağlı kalın.

Radyo Düğmeleri ve Onay Kutuları

1. Bir sembolün içinde bir sembol olması mümkündür ve bunu test etmenin iyi bir yolu, akıllı radyo düğmesi ve onay kutusu varlıkları oluşturmaktır.
2. İlk önce, düğme varlığının kendisini yapın. Örnek etiketleme olarak onay kutusunu/seçili ve onay kutusunu/işaretini kaldırarak bu öğeyi bir sembol olarak kaydedin.
3. Şimdi girişi oluşturun. Onay kutusu sembolünün yanına yer tutucu metni ekleyin ve ardından varlığın tamamını bir sembole dönüştürün. Bu artık bir girdi olduğundan, varlığı bu şekilde kaydetmeniz önerilir, bu nedenle input/checkbox/selected ve input/checkbox/deselected iyi bir etiket olacaktır.

Altıncı Adım: Stil Rehberini Kullanın!

Bir stil kılavuzu oluşturmak için tüm bu çalışmaları yapmak, yalnızca bir projenin gerçekten daha sorunsuz çalışmasını sağlıyorsa yararlıdır. Tüm varlıklar oluşturulduktan sonra, kitaplığı tasarlanmakta olan belgeye uygulama zamanı gelir. Sketch'te “Tercihler -> Kitaplık Ekle…” seçeneğine gidin ve kitaplık belgesini ekleyin.

Proje tasarım dosyanıza bir kütüphane ekledikten sonra kütüphaneye ve sembollerine semboller bölümünden ulaşabilirsiniz. Kitaplık seçeneği olarak Sketch ile birlikte gelen iOS UI Tasarım kitaplığının yanı sıra yakın zamanda içe aktarılan kitaplığı fark edeceksiniz.

Bir sembolü güncellemek istiyorsanız, sembolün kendisine çift tıklayın ve kütüphane belgeniz görünmelidir. Değişiklikleri yaptıktan sonra tasarım belgesine geri dönün ve sağ üst köşedeki güncelle düğmesine tıklayın.

Bonus: Metin Stillerini İçe/Dışa Aktarma

Metin stilleri bir kitaplıkla kaydedilmez, ancak Sketch için Paylaşılan Metin Stilleri eklentisi bunu çözer. Eklentiyi indirdikten sonra, kütüphane belgesine gidin ve ardından menüye gidin: “Eklentiler -> Paylaşılan Metin Stilleri -> Dışa Aktar…” Bu dosyayı kütüphane belgenizle aynı klasöre kaydedin. Ardından, tasarım belgenizde tekrar menüye gidin: “Eklentiler -> Paylaşılan Metin Stilleri -> Metin Stillerini İçe Aktar…” ve az önce kaydettiğiniz dosyayı içe aktarın. Metin stilleriniz görünecektir.

Bonus: Renk Paletlerini İçe/Dışa Aktarma

Metin stillerine benzer şekilde, belge renkleri bir Sketch kitaplığında tasarruf etmez, ancak Sketch Palettes eklentisi bunu çözer. Yukarıdakiyle hemen hemen aynı şekilde, “Eklentiler -> Çizim Paleti -> Belge Renkleri -> Paleti Kaydet” seçeneğini kullanarak paleti dışa aktarın ve “Eklentiler -> Çizim Paleti -> Belge Renkleri -> Paleti Yükle” ile içe aktarın. Diğer kitaplık belgelerinizle aynı klasöre kaydetmeyi unutmayın.

Bonus: Yazı Tipleri

Craft by InVision, Sketch yazılımını bir sonraki seviyeye taşıyan bir eklenti paketidir. Craft, görüntüleri stok fotoğraflarla değiştirmenize, prototip oluşturmanıza ve InVision ile eşitlemenize, kitaplıklar oluşturmanıza ve daha pek çok şeye olanak tanır. Craft indirilirse, belgede "cmd-shift-c" tuşlarına basın, bir stil sayfası oluşturulur. Yazı tipleri burada listelenecektir.

Yukarıda özetlenen altı adımın izlenmesi hem büyük hem de küçük tasarım projelerinin daha sorunsuz çalışmasını sağlayacak ve nihai sonuç daha parlak olacaktır. Benzersiz veya çok özellerse, stil kılavuzu, Kitaplık ve UI kiti bir istemci için veya tel çerçeveler ve prototipler gibi sürekli olarak standart UI öğeleri oluşturuluyorsa birçok proje için kullanılabilir. Başlangıçta, bu Sketch UI bileşenlerini düzgün bir şekilde oluşturmak için zaman ayırmak, ileride ve potansiyel olarak birçok projede çok zaman kazandıracaktır.

Toptal Tasarım Blogunda daha fazla okuma:

• Startup'ların Neden Bir Stil Rehberine İhtiyacı Var?
• Sketch'te Tipografi Hakkında Bilmediğiniz Şeyler
• En İyi 50 Eskiz Eklentisinin Nihai Listesi
• Adobe XD ve Sketch - Hangi UX Aracı Size Uygun?
• Etkili Bir Tasarım Çerçevesi Nasıl Oluşturulur (Ücretsiz Çizim Kullanıcı Arayüzü Çerçevesi İçerir)