UI Kit Nedir?
Kullanıcı Arayüzü Kiti Nedir? Nasıl Hazırlanır?
Selamlar, ben Buse. Bu yazımda size Kullanıcı Arayüzü Kiti konusundan bahsedeceğim, gelin bu konuyu hep birlikte öğrenelim. İsterseniz yazımı okuyarak, isterseniz de ITUX Topluluğu’nda bu konuyu anlattığım videoyu izleyerek bize katılabilirsiniz. Keyifli okumalar!
Tanım
UI, User Interface, Kullanıcı Arayüzü Kiti, tasarımcılara website ve uygulama ara yüzü tasarlama görevinde yardımcı olabilecek bir grafik dosyaları ve kaynak koleksiyonudur. Tasarımcıların yanında, UI Kit developerların da ilgili websitesi ve uygulamaların yazılım aşamasında işlerini kolaylaştırır.
Tipik olarak, kullanıcılara anlam ileten ve işlevsellik sağlayan kullanıcı arayüzü bileşenlerini—renkler, tipografi, semboller, butonlar, onay kutuları, ilerleme çubukları, gezinme düğmeleri vb. — içerir.
Avantajları Nelerdir?
Bir UI kiti kullanmanın başlıca avantajlarından biri, web geliştirmeyi çok daha hızlı hale getirmesidir. Daha hızlı bir değiştirme ve geliştirme süreci sunar, dolayısıyla bu da verimliliğin arttığı anlamına gelir. Kısa zamanda yüksek verimlilik de maddi kazanç sağlar. UI Kit ile tasarım yazılımcıya daha kolay aktarılabildiği için sonuçtan memnun kalınmasını sağlar.
Özetleyecek olursak UI Kit kullanmak:
- Zaman kazandırır.
- Maddi tasarruf sağlar.
- Tasarımda değişikliği kolaylaştırır.
- Tasarımcı-yazılımcı iletişimini kolaylaştırır.
UI Kit Oluşturmaya Nasıl Başlarım?
UI Kitin ne olduğunu ve faydalarını öğrendik, peki oluşturmaya nasıl başlayacağız? Cevap: Atomik Tasarım ile. Peki nedir bu Atomik Tasarım?
Atomik Tasarım
Atomik Tasarım, tekrar tekrar kullanabileceğimiz bir parça sistemi oluşturmaktır. Daha açıklayıcı olmak gerekirse, bir araya geldiğinde molekül, organizmaları, templateleri ve sayfaları oluşturacak atomları belirlemektir. Bu atomları belirledikten sonra, belirli kombinasyonlarla bir araya getirdiğimizde moleküllerimizi ve karışık yapıları elde etmek çok kolay olacak.
Peki bizim UI Kitimizdeki atomlarımız nelerdir? Renkler, tipografi ve butonlar gibi tekli yapılar bizim atomlarımızdır. Bu atomları belirleyerek UI Kit oluşturmaya başlayabiliriz.
Adım Adım UI Kit
İTÜ Mobil uygulamasına yaptığımız re-design örneğinin UI Kitini Adobe Xd üzerinden adım adım oluşturmayı anlatmaya başlıyorum.
- Adım 1: Renk
Renk paleti bir UI Kit’in olmazsa olmazıdır. Sadece siyah ve beyaz rengini kullanmak bile o renkleri sizin renk paletiniz yapar. UI Kit oluşturmaya renk paletinizi, yani ara yüzde kullanacağınız ana ve yardımcı renklerinizi seçerek başlayabilirsiniz. Bir renk paleti oluştururken dikkat edilmesi gerekenleri arkadaşım Arda’nın yazısını okuyarak detaylı bilgiye ulaşabilirsiniz.
- Adım 2: Tipografi
Bir tipografi belirleyerek UI Kit’inizi oluşturmaya devam edebilirsiniz. Tipografi içinde harf ve sembolleri barındırır. Bir ara yüzü tasarlarken, o ara yüzde yazacağınız her yazı belirlediğiniz font ailesinden, belirlediğiniz kalınlıkta ve anatomiden meydana gelir. Bu terimler size tanıdık gelmediyse arkadaşım Merve’nin bu konudaki detaylı yazısını okumanızı öneririm.
- Adım 3: Iconlar ve Şekiller
Icon (Simge), iletişimi kolaylaştırmak amacıyla kullanılan sembolik bir görüntüdür. Ara yüzde ileri, geri, anasayfa vb. olarak kelime kullanmak yerine bunları şuan bile aklımızda canlanan ok ve ev iconlarıyla daha eğlenceli ve okunaklı bir hale getirebiliriz. Belirlediğiniz butonlarda kullanmak için bir icon set oluşturarak UI Kitinizi oluşturmaya devam edebilirsiniz.
- Adım 4: Componentler
İlk 3 adımda belirlediğiniz atomları yani renk, tipografi ve gridleri kullanarak çeşitli butonları ve barları oluşturarak UI Kit’inizi en basit haliyle tamamlayabilirsiniz.
UI Kitimiz Hazır!
Şimdi Nasıl Kullanacağım?
UI Kitimizi hazırladık artık direkt sayfalara yerleştirmeye hazır. Çok hızlı bir şekilde arayüzü tamamlayabilir ve çok hızlı bir şekilde üzerinde değişiklik yapabilirsiniz.
Hazır UI Kitlerine Nasıl Ulaşabilirim?
Evet, her şeyin hazırı olduğu gibi UI Kitlerin de hazır yapılmışına ulaşmak mümkün. Bazı ücretsiz sitelerden ve premium üyelikle ulaşabileceğiniz sitelerden beğendiğiniz bir UI Kit’i edinip, üzerinde oynayıp ya da olduğu haliyle kullanabilirsiniz. Bu sitelerden bazıları:
Teşekkürler!
Okuduğunuz için teşekkürler. Benimle Linkedin üzerinden bu konuda ve her konuda iletişime geçebilirsiniz.
Kaynakça
Bu yazımı yazarken faydalandığım kaynakları da inceleyebilirsiniz.
