Etkili Bir Tasarım Çerçevesi Nasıl Oluşturulur (Ücretsiz Çizim Kullanıcı Arayüzü Çerçevesi İçerir)

Bir süredir tasarım dünyasındaysanız, muhtemelen şu terimleri duymuşsunuzdur: tasarım çerçevesi, UI çerçevesi, UI kiti veya model kitaplığı. Hepsi aynı şeye atıfta bulunur - bir ürün boyunca kullanılan ve tasarım diline hizmet eden bir tasarım standartları, şablonlar, UI kalıpları ve bileşenler sistemi.

Daha önce bir tasarım çerçevesi oluşturmadıysanız, birine başlamak bunaltıcı ve zaman alıcı görünebilir, ancak tasarım çalışmanızı hızlandıracak ve genel olarak daha verimli hale getirecektir.

Bir tasarım çerçevesinin çözdüğü ana sorunları, neden bir çerçeveye ihtiyacınız olduğunu ve bir çerçeve oluştururken oluşturmanız gereken bileşenleri ana hatlarıyla belirtelim. Makalenin ilerleyen bölümlerinde kendi tasarım çerçevenizi oluşturmanıza olanak tanıyan ücretsiz indirilebilir bir Sketch UI çerçevesi bulacaksınız.

Tasarım Çerçevesi Nedir?

Her kullanıcı arayüzü tasarımı boş bir çalışma yüzeyi ile başlar ve her tasarımcının bu boş tuvali tam olarak işleyen bir ürüne dönüştürmek için kullandığı bir süreç vardır. Bu süreç, oluşturulan tüm küçük tasarım bileşenlerini ve tasarımcının renklerden düğmelere ve aradaki her şeye kadar uyumlu bir bütün oluşturmak için attığı adımları içerir.

Çoğu zaman, bu çalışma tekrarlanır ve birbiriyle ilişkili kalıplar ve bileşenlerden oluşan bir sistem yaratılarak birleştirilebilir ve daha verimli hale getirilebilir. Başka bir deyişle, bir tasarım çerçevesi .

Tasarım çerçeveleri, aşağıdakiler de dahil olmak üzere çeşitli sorunları çözer:

• Ürün tasarımındaki tutarsızlıkları ortadan kaldırmak.
• Tasarım ve ürün ekipleri arasında işbirliğini, verimliliği ve iletişimi artırmak.
• Tasarım sürecinde daha sonra tasarım güncellemeleri yapmak daha az sinir bozucu.

Birinci Sorun: Üründe Tutarsızlık

Tutarlılık, iyi bir tasarımı harika bir tasarıma dönüştürür. Tutarlılık, kullanıcı deneyimini, genel kullanılabilirliği ve kullanıcıların dijital ürünleri kullanma verimliliğini artırır. Küçük bir web sitesi, uygulama veya büyük bir SaaS ürünü olsun, tasarımdaki tutarsızlıklar ürünün görünümünü, verdiği hissi, güvenilirliği ve kullanıcı deneyimini tehlikeye atar.

Tutarsızlıklar genellikle bir ekip veya tasarımcı işleri çok hızlı yaptığında veya anında değişiklik yaptığında ortaya çıkar. Bazen bir tasarımcı, bir müşteriye veya paydaşa, bu değişikliklerin nasıl görüneceğini hızlı bir şekilde göstererek farklı bir şey isteyen bir yanıt verir. Aniden, tasarım ekibi kendilerini dört farklı yeşil tonuyla buluyor ve kimse hangisinin ana düğme rengi olduğundan emin değil.

Tasarım çerçeveleri bu sorunu tutarlı standartlar oluşturarak çözer.

İkinci Sorun: İşbirliği ve İletişim Boşlukları

Genellikle geliştirme sürecinde, sürecin farklı noktalarında tasarım üzerinde çalışan birçok ekip üyesi olduğunda, ekibe rehberlik edecek bir dizi standart yoksa, bu durum kafa karıştırıcı hale gelebilir.

Bir tasarım çerçevesi, iletişim sürecini düzene sokarak ve net standartlar ve yön sağlayarak işbirliğini ve verimliliği artırır. Hangi rengin veya yazı tipinin kullanılacağını bulmaya çalışırken ileri geri koşarak zaman kaybetmek yok.

Üçüncü Sorun: Son Aşama Tasarım Değişiklikleri

Tasarımcılar, halihazırda geliştirilmiş 120 çalışma yüzeyi ile tasarım dosyasında kaç kez tek bir renk değişikliği yapmak zorundalar? 200 bileşenin parçası olan bir simgeyi kaç kez değiştirmek gerekir?

Tasarım süreci boyunca değişim kaçınılmazdır, ürün bu şekilde gelişir, ancak çoğu zaman tasarımcıların istediğinden daha sonra olur. Bir tasarım çerçevesi, bu son aşamadaki değişiklikleri çok daha az acı verici hale getirir, çünkü nesne yönelimli bileşenlerden oluşan bir sistem üzerine kuruludur. Bir kez değiştirin ve tüm tasarım boyunca dalgalansın.

Tasarım Çerçevesi Nasıl Oluşturulur

Artık bir tasarım çerçevesinin ne olduğunu ve çözdüğü sorunları bildiğimize göre, bir tane oluşturma hakkında konuşalım (ve makalenin ilerleyen kısımlarında sağlanan Sketch UI kiti indirmesinde neler var).

Bu makale için kullanılan tasarım çerçevesi, Sketch'te "semboller" olarak bilinen belirli bir bileşen hiyerarşisi kullanılarak düzenlenen tek bir Sketch dosyasıdır. Bu semboller, dosya genelindeki değişiklikleri tek bir tıklamayla uygulamayı kolaylaştırır. "Ana" bileşendeki bir değişiklik - "sembol" - diğer tüm durumlarda anında yansıtılır.

Tasarım Çerçevesi Hiyerarşisi

İyi çalışan bir tasarım çerçevesi oluşturmak için sağlam bir görsel hiyerarşi oluşturarak başlayın. Önce renk ve tipografi gibi her yerde hazır bulunan bileşenleri tasarlayın. Ardından, düğmeler ve giriş bileşenleri gibi daha küçük olanlara çalışın. Bunu bir ev inşa etmek gibi düşünün; önce temeli inşa edin ve ardından proje ilerledikçe diğer parçaları ekleyin.

Renk

Renk, bir UI tasarım çerçevesi hiyerarşisindeki en önemli unsurdur; bir tasarımdaki her bir bileşen renk kullanır. Renk, insanlarda güçlü tepkiler ve duygular uyandırır ve bir ürünün genel görünümünü, hissini ve tonunu belirler.

Renkleri gruplara ayırmak iyi bir uygulamadır:

1. Ana renkler, tipik olarak bir projenin genel renk şemasını oluşturmak ve düğmeler gibi önemli bileşenler için kullanılan ana marka renkleridir.
2. İkincil renkler , birincil paleti tamamlar; bunlar genellikle ana renklerin farklı tonları, doygunlukları veya renk tonlarıdır. Gri tonlama , tipografi veya arka planlar için yaygın olarak kullanılır. Beş ila sekiz gri seviyesi arasında bir yerde yeterli olmalıdır.
3. Sistem geri bildirim renkleri , tasarımcıların sıklıkla unuttuğu önemli bir gruptur. Bu renkler, uyarılar, uyarılar ve bildirimler dahil olmak üzere sistem mesajlarını görüntüler.

Izgara: Tasarım Alanı

Renkler seçildikten sonraki adım bir ızgara oluşturmaktır. Izgara, sayfadaki diğer tüm bileşenleri doğru yerde ve sırada tutar. Bu, genel tasarım alanıdır.

İki tür ızgara vardır: dikey ve yatay .

Dikey ızgara en yaygın kullanılanıdır ve her şeyi yatay olarak hizalı tutar. Bootstrap veya eski 960px ızgara gibi birçok popüler ızgara sistemi vardır.

Yatay bir ızgara o kadar yaygın değil. Tipografi için yatay bir ızgara kullanılır. Paragraflar için dikey ritim oluşturur ve gazetelerde yaygın olarak görülür.

Değiştiriciler: Stil Kuralları

Renk ve ızgaraya ek olarak, tasarım çerçevesi hiyerarşisinde yüksek olan bir bileşen daha vardır: değiştiriciler. Bağımsız bileşenler olarak kullanılamazlar - diğerlerini değiştirmek veya biçimlendirmek için kullanılırlar.

Bu grup bir projeye stil getirir ve şekiller veya gölgeler gibi estetikten sorumlu bileşenleri içerir; projenin sonraki aşamalarında bunları tek tek değiştirmek zahmetli olabilir.

Değiştiricileri, sonraki tüm yapı taşları için parametre olarak ele alın. Üç farklı şekilden Sketch sembolleri oluşturun: dikdörtgen, yuvarlak dikdörtgen ve daire. Düğmeler, giriş bileşenleri, form alanları vb. ve arka plan öğeleri dahil olmak üzere bir kullanıcı arabiriminin her bir bileşenini oluşturmak için bu şekilleri kullanın.

Bu teknik, tasarımcıların UI bileşenlerinin görünümünden ziyade UX'e daha fazla odaklanmasını sağlar. Ayrıca temel şekle geri dönmeyi, stilini değiştirmeyi (örneğin köşe yarıçapı) kolaylaştırır ve bağlı olan her şey otomatik olarak güncellenir.

Tipografi: İçerik

Tipografi, son önemli tasarım çerçevesi bileşenidir. İki gruba ayrılabilir: başlıklar ve paragraflar gibi statik sayfa kopyası; ve düğmeler, gezinme veya giriş alanları gibi etkileşimli bileşen kopyası.

Tüm başlıkların (H1, H2, H3 vb.) ve paragrafların stilini ve boyutunu tasarlayın. Statik sayfa kopyası genellikle pek çok stil (renk veya ağırlık) varyasyonuna sahip değildir. Statik sayfa kopyalama stiliyle ilgili olarak tek değişiklik, açık veya koyu arka planda olup olmadığıdır. Bu nedenle, statik sayfa kopyalamanın her ikisinde de çalıştığından emin olmak için iki renk grubu oluşturmak en iyisidir.

Düğmeler veya sistem geri bildirim mesajları gibi etkileşimli bileşenlerde görünen kopyanın birden fazla varyasyonu olabilir. Örneğin, sistem geri bildirim mesajları, mesaj türüne göre (uyarı, hata, başarı, vb.) dört farklı arka plan renginde gösterilebilir; düğme etiketleri farklı arka planlarda da olabilir.

Bu grubu tasarım çerçevesine dahil etmek, tipografi hakkında küresel olarak düşünürken yardımcı olur. İlk olarak, normal düğme etiketi metnini oluşturun ve ikinci olarak, varyasyonlarını oluşturun; bu, çok fazla yazı tipi boyutuyla sonuçlanmaktan kaçınmaya yardımcı olacaktır. Çerçevede yeni UI bileşenleri oluştururken, her zaman uygun bir tipografi stili olup olmadığını kontrol edin.

Simgeler

Bir tasarım sisteminde iki grup simge vardır: bilgilendirici ve kullanıcı arayüzü simgeleri. İlk grup tipik olarak bir çizim sisteminin parçasıdır ve herhangi bir UI etkileşim bileşeni (düğmeler gibi) için kullanılmaz. İkinci grup - UI simgeleri - çok az yer kaplarken daha karmaşık bileşenlere anlam katar: düğmeler, etiketler veya tablolar. Kullanıcı arayüzündeki simgeler, "düzenle", "kopyala", "indir" ve "kaldır" gibi işlev tetikleyicileri olarak da kullanılabilir.

Kullanıcı arayüzü etkileşimleri için kullanılan oklar, "ekle" (+) veya "kapat" (x) gibi basit simgelerle başlayın. Bunları farklı boyutlarda (12px, 16px, 24px 32px) tasarlamak iyi bir uygulamadır.

Bileşenler

Düğmeler

Düğmeler, tartışmasız UI tasarımındaki en önemli bileşenlerden biridir ve yıllar içinde tasarım trendleri gelip geçtikçe birçok değişiklik geçirdiler.

Düğmeleri tasarlarken, kendi "durumlarını" tasarladığınızdan emin olun. Kural olarak, bir düğmenin birden çok durumu vardır ve kullanıcılara mevcut durumu (boşta, fareyle üzerine gelme, basılı, devre dışı, etkin vb.) belirtmek için görsel geri bildirim sağlar.

Bunu yapmanın iki yolu vardır: birincisi, düğmelerin görünümünü her durum için ayrı ayrı tasarlamaktır (düzenli, etkin, üzerine gelindiğinde ve basılı olduğunda). Bu çözüm zaman alıcı olabilir, ancak daha sonra çok fazla esneklik sağlar. (Bu yöntem, aşağıda yer alan ücretsiz Sketch UI çerçevesinde kullanılmıştır.)

İkinci yol, tüm durumları ilk duruma göre tasarlamaktır. Örneğin, her bir durumun rengini, doygunluğunu veya parlaklığını değiştirecek bir Çizim sembolü oluşturun.

Bunu yapmak için, sembolü, Sketch karıştırma modlarından biriyle düğmenin kaplaması olarak yerleştirin: ton, doygunluk veya kaplama. Doygunluğunu değiştirmek için normal düğme üzerinde ton karıştırma modu olan siyah bir dikdörtgen kullanın. Kaplama opaklığını daha sonra değiştirmek, onu az ya da çok doymuş bir düğme yapar.

Giriş Bileşenleri

Girişler, kullanıcının uygulama ile iletişim kurmasına ve veri yüklemesine izin verir. Düğmelerle birlikte giriş alanları gibi bileşenlerin kullanılması, basit bir web uygulamasının oluşturulmasına olanak tanır. Düğmelerde olduğu gibi, farklı durumlara sahip giriş bileşenleri oluşturmak en iyisidir. Tasarım çerçevesine bağlıdır, ancak en azından boş, doldurulmuş ve hata durumları oluşturmayı düşünün.

Karmaşık Bileşenler

Bu aşamada, tasarım çerçevesi tamamlanmış sayılabilir çünkü işleyen bir ürün yaratmak için gereken her şeye sahiptir. Ancak, kartlar, tablolar, veri seçiciler, çizelgeler ve formlar gibi UI çerçevesi için daha karmaşık UI bileşenleri oluşturmak için biraz daha zaman harcamak genellikle faydalı olacaktır.

Bölümler

Bu aşamada, uygulamaların veya web sitelerinin en yaygın bölümleri oluşturularak tasarım çerçevesi daha da geliştirilebilir. Bir tasarımcı, gezinme, başlıklar, "hakkımızda" bölümü ve galeriler gibi şeyler tasarlayarak bir projenin sonraki aşamalarında zaman kazanabilir. Ürünün farklı bölümlerinin çeşitli varyasyonlarını oluşturmak, farklı projelere uyum sağlamayı kolaylaştıracaktır.

Tasarım Çerçevesi En İyi Uygulamaları

Tasarım Çerçevesini Sürekli Test Edin

Test, herhangi bir tasarım veya geliştirme sürecine dahil edilmelidir. Küçük tasarım parçaları oluşturarak ve bunları "stres testi" yaparak hataları ve eksik bileşenleri önleyin. Örneğin, başlangıçta oluşturulan bir bileşenin değiştirilmesinin, yeni eklenen bir bileşeni de değiştirip değiştirmediğini kontrol edin.

Basit Kullanıcı Arayüzü Bileşenleri Oluşturun

Mümkün olduğu kadar çok tasarım kullanım örneğini düşünürken bileşenleri basit tutun, böylece gelecekte herhangi bir stil kapsanabilir. Basit şekillerle UI bileşenleri oluşturmak ve onları herhangi bir projeye kolayca uyum sağlayacak kadar esnek tutmak en iyisidir.

Tek Bir Stile Odaklanma

Bir tasarım çerçevesi evrensel olmalıdır, bu nedenle belirli bir stile odaklanmak yerine bir stil oluşturmak için kullanılabilecek bileşenlere odaklanın.

Kendi Tasarım Çerçevenizi Yaratın

Bir sonraki projenizde, bir tasarım çerçevesi oluşturmak için başlangıçta zaman ayırın. Genel tasarım sürecini iyileştirdiğini, verimliliği artırdığını ve ürünün tasarım tutarlılığını geliştirerek kullanılabilirliği iyileştirdiğini göreceksiniz. 120 Sketch çalışma yüzeyinde bu fikirler birkaç saniye içinde hayata geçirildiğinde zamandan tasarruf edecek, tasarım fikirlerini daha etkili bir şekilde iletecek ve müşterileri ve paydaşları mutlu edeceksiniz.

Kendi Tasarım Çerçevenizi Başlatmaya Hazır mısınız?

Sketch dosyasını buradan indirin. Nasıl kullanılacağına dair talimatlar dahildir.

İlham Veren Tasarım Sistemleri ve UI Çerçeveleri

Tasarım çerçeveleri hakkında daha fazla bilgi edinmenin en iyi yollarından biri, ne kadar büyük, yerleşik şirketlerin bunları kullandığını incelemektir. Bu tür şirketleri takip edin ve yaklaşımlarını öğrenin.

Google'ın Materyal Tasarımı – şu anda dünyanın en popüler tasarım çerçevelerinden biri. Google'ın tüm tasarım sürecini nasıl katmanlaştırdığını ve yararlı bir bileşen hiyerarşisi oluşturduğunu öğrenin.

IBM'in Tasarım Dili – IBM, her ayrıntının derin bir açıklaması da dahil olmak üzere tüm tasarım sürecini paylaşır. Ayrıca, basit simgelerden bir UI animasyon kitaplığına kadar tasarım dillerinden bol miktarda kaynak paylaşırlar.

Atlassian – başka bir harika öğrenme kaynağı. Ürün stili kılavuzları, çalışmak için harika bir tasarım sistemidir. Tonlarca bileşen ve konsept içeren bir Sketch dosyası olan Web GUI paketini paylaşıyorlar.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• eCommerce UX – En İyi Uygulamalara Genel Bir Bakış (Infografik ile)
• Ürün Tasarımında İnsan Merkezli Tasarımın Önemi
• En İyi UX Tasarımcı Portföyleri – İlham Veren Vaka Çalışmaları ve Örnekler
• Mobil Arayüzler için Sezgisel İlkeler
• Öngörülü Tasarım: Büyülü Kullanıcı Deneyimleri Nasıl Yaratılır