UI Tasarımı İçin Kapsamlı Bir Kılavuz

( Bu sponsorlu bir makaledir .) Büyük resmin oluşturulmasıyla - kullanıcı yolculuklarının haritalanması ve tasarımınızın görünüş ve hissinin tanımlanması - bu on makale dizisindeki beşinci makalem, kullanıcı arabirimi bileşenlerinin tasarımının ayrıntılarına dalıyor.

UX, IA, UI: Tüm bu kısaltmalar kafa karıştırıcı olabilir. Gerçekte, tasarımcılar olarak, genellikle şu farklı uzmanlıklar üzerinde çalışacağız: genel kullanıcı deneyimini (UX) tasarlamak, bilgi mimarisini (IA) dikkate alırken bilgiyi mantıksal olarak düzenlemek ve kullanıcı arayüzünün (UI) ayrıntılı tasarımını dikkate almak. .

UX tasarımı kılavuzumda, kullanıcıların ihtiyaçlarını anlama ve kullanıcı yolculuklarını dikkate alma ihtiyacını, insan davranışlarını göz önünde bulundurarak tasarım yapma ihtiyacını ve genel bir estetik oluşturma ihtiyacını araştırdım. Bu makalede, tutarlı ve ölçeklenebilir arayüzleri nasıl tasarladığımızı ayrıntılarıyla keşfedeceğim. Tasarım sürecinin bu aşamasındaki amacımız, öğrendiklerimizi kullanıcı arayüzü tasarımımıza şu şekilde uygulamaktır:

• Kullanıcı arayüzünüzün uyumlu ve tutarlı bir şekilde değerlendirilmesini sağlayan arayüz envanterleri geliştirmek için kıyaslama kullanmak;

• Tasarladığınız şeyin hem uygun maliyetli hem de tutarlı olmasını sağlamak için arayüz envanteriniz tarafından bilgilendirilen bir kalıp kitaplığı oluşturmak; ve

• Animasyonu kullanıcılarla iletişim kurmanın bir yolu olarak benimsemek, tasarımımızı hem işlev hem de zevk düzeyinde geliştirmek.

Kısacası, bu makale, bir dizi projede yaygın olarak uygulanabilen ve ölçeklenebilir, kullanıcı arabirimi tasarımına yönelik sistematik bir yaklaşım geliştirmenize yardımcı olmayı amaçlamaktadır. Tasarım için bir çerçeve oluşturarak, başkalarından öğrenilen dersleri uygulayabilir, böylece tasarımlarımızı geliştirebilir ve kullanıcılarımız için daha iyi bir sonuç elde edebiliriz.

Kullanıcı arayüzü tasarımı (UI) geniş bir konudur, bu nedenle bu makaleyi kısa bir başlangıç ​​olarak kabul edin, ancak - önceki makalelerimde olduğu gibi - iyi bir şekilde kapsandığınızdan emin olmak için bazı önerilen okumalar sağlayacağım.

Bir Arayüz Envanteri ile Başlayın

Yeni bir ürünle temiz bir sayfadan başlıyor olabilirsiniz veya mevcut bir ürünü tekrar ziyaret ediyor olabilirsiniz, ancak bir arayüz envanteri oluşturarak başlamanıza yardımcı olur. Bir içerik envanteri içeriğin (yani kelimeler, resimler ve diğer içerik türleri) tutarlı olmasını sağlamaya yardımcı olduğu gibi, bir arayüz envanteri de kullanıcı arayüzlerinin kapsamlı ve üzerinde düşünülmüş bir çerçeve içinde tutarlı bir şekilde geliştirilmesini sağlar.

Bunun için biraz zaman harcamak, ekip üyeleri arasında tutarlı ve kolayca ölçeklenebilir tasarım sistemleri kurarak uzun vadede çok zaman kazandıracaktır. Bir arayüz envanteri oluşturmak, zamanınızı ve emeğinizi şu anda ihtiyaç duyduğunuz öğelere odaklamanıza yardımcı olur, ancak - tıpkı bir stil kılavuzu gibi - ürününüz büyüdükçe büyüyen, genişletilebilir, yaşayan bir belge olmalıdır.

Peki, "arayüz envanteri" tam olarak nedir? Bu terim Brad Frost tarafından icat edildi ve popüler hale getirildi. İçerik envanterlerinin temelini oluşturan fikri alır ve onu kullanıcı arayüzü tasarımı dünyasıyla eşleştirir. Frost'un özetlediği gibi:

"Bir arayüz envanteri, bir içerik envanterine benzer, yalnızca içeriği elemek ve kategorilere ayırmak yerine, web sitenizi [veya ürününüzü] oluşturan bileşenlerin stokunu alıyor ve kategorilere ayırıyorsunuz. Bir arayüz envanteri, parçaların kapsamlı bir koleksiyonudur. arayüzünüzü oluşturan şeyler."

— Arayüz Envanteri, Brad Frost

Mevcut bir ürünü yeniden tasarlıyorsanız, bir arayüz envanteri, sistematik olarak belgelendirilmeleri için ne kadar büyük veya küçük olursa olsun tüm bileşenlerinizin haritasını çıkararak başlar. Yeni bir projeye başlıyorsanız, başkalarının çalışmalarının bir analizini üstlenerek bir rakibin ürününün haritasını çıkarmak isteyebilirsiniz. Bu, göz önünde bulundurmanız gereken farklı arayüz bileşenleri hakkında fikir edinmenize yardımcı olur.

Sürecin ilk aşaması, tasarladığınız her şeyin sistematik olarak ekran görüntüsünü almaktır . Bu zaman alıcı olacak, ancak önemli. Bu aşamada - özellikle büyük bir tasarım ekibiniz varsa - farklı öğelerin nasıl tasarlandığına dair tutarsızlıklar görmeye başlayabilirsiniz. Arayüz envanteriniz, daha sonra düzeltebileceğiniz bu öğeleri belirlemenize yardımcı olacaktır.

Aşağıdakiler dahil, kullanıcı arayüzünüzü oluşturan tüm farklı bileşenleri göz önünde bulundurun:

• tipografi

  • Başlıklar ve Alt Başlıklar
  • Metin Öğeleri (Örgütler, Paragraflar)
  • Listeler

• Görüntüler ve Medya

  • Logolar
  • ikonografi
  • Görüntüler

• Formlar

  • Metin Girişleri
  • Radyo / Onay Kutusu Girişleri
  • Menüleri Seç

Eğer eski ben gibiyseniz ( daha iyisini bilmeden önce! ), bu farklı bileşenleri herhangi bir sistematik yaklaşım olmadan ihtiyaç duyulduğunda ve ihtiyaç duyulduğunda tasarlamış olabilirsiniz. Bir arayüz envanteri fikri, bu sürece her şeyin tutarlı olmasını sağlayan bir sipariş empoze etmektir.

Sürecin her şeyi kategorize eden ikinci aşaması, aldığınız ekran görüntülerine bir düzen getirmeyi amaçlar. Her türlü aracı kullanarak ekran görüntülerinizi düzenleyebilirsiniz, ancak her şeyi Keynote veya PowerPoint kullanarak düzenlemenizi öneririm, böylece çalışma tamamlandığında ekibinize sunabilirsiniz. Her zaman yardımcı olan Brad Frost, kullanabileceğiniz bir şablon sağladı (ZIP).

Üstlenilen yukarıdaki çalışma ile, bir ekip olarak veya müşteri ile bir araya gelmek ve her şeyi gözden geçirmek iyi bir fikirdir. Bu tartışma, tasarlamanız gereken farklı bileşenlerin daha iyi anlaşılmasına yol açacaktır. Ayrıca, paylaşılan kalıpları belirleyerek farklı bileşenlerinizin bir miktar düzene girmesine yol açması da muhtemeldir - verimlilik için büyük bir kazanç.

Bir Model Kitaplığı Oluşturun

Arayüz envanteriniz üstlenilmiş ve tüm bileşenleriniz organize edilmişken, ortak tasarım kalıplarını belirlemeye başlamak ve bunların etrafında inşa etmek önemlidir. Arayüz envanterinizin tasarımınızda büyük tutarsızlıklar ortaya çıkarmış olması muhtemeldir, şimdi tasarım sürecindeki nokta, kullanıcı arayüzünüzü modüler bir şekilde yeniden oluşturarak bunları ele aldığınız noktadır. Bu yaklaşımı biraz LEGO gibi düşünmeyi faydalı buluyorum.

LEGO ile (küçük parçalar kullanarak) inanılmaz derecede karmaşık şeyler yapabilirsiniz. Arayüzler benzer. İlk bakışta bir arayüz inanılmaz derecede karmaşık görünse de, esasen daha küçük bileşenlerden oluşur. Bu bileşenler, kalıp kitaplıklarının devreye girdiği yerdir. Peki, kalıp kitaplığı nedir?

Bir kalıp kitaplığı, tipik tasarım sorunlarına yinelenen çözümler olan tasarım kalıplarını tanımlar ve sınıflandırır. Bunlar şunlar olabilir:

• Takvim Seçiciler
• kırıntı izleri
• atlıkarıncalar

Bir desen kitaplığı, bir arabirimi daha sonra yeniden kullanılabilir yapı taşları olarak kullanılabilecek daha küçük öğelere ayırır. Bu yaklaşımın faydaları şunları içerir:

• Tasarımınızda tutarlılık
  Daha küçük, yeniden kullanılabilir bileşenler kullanarak karmaşık kullanıcı arabirimi öğeleri oluşturarak, tümü aynı basit bileşenlerden oluşturuldukları için tüm kullanıcı arabirimi öğelerinizin tutarlı olmasını sağlarsınız.

• Ekip üyeleri arasında paylaşabileceğiniz görsel bir kelime hazinesi
  Ürününüz için bir kalıp kitaplığı oluşturarak, ekibinizdeki herkes kendi geçici öğelerini oluşturmak yerine bunu temel alarak oluşturur.

• Tasarımlarınız geliştikçe zaman içinde verimlilik
  Ürününüz zamanla büyüse bile, temel bir desen kitaplığı üzerine inşa edildiğinden bakımı verimlidir.

Kullanıcı arayüzünüzü tasarlarken, neyin işe yaradığını - ve eşit olarak - neyin yaramadığını görmek için başkalarının tasarım modellerine başvurmak faydalı olacaktır. UI Kalıpları, bunu yapmak için mükemmel bir kaynaktır ve zengin tasarım kalıplarını bir araya getirir.

Arayüz envanterinizi ortak tasarım modellerini belirlemek için bir başlangıç ​​noktası olarak kullanarak, bir tasarım sistemi oluşturmak için oluşturmanız gereken bileşenleri oluşturmaktan bir adım uzaktasınız. Bu, kullanıcı arayüzünüzün tutarlı ve ölçeklenebilir olmasını sağlamaya yardımcı olacaktır.

Atom Tasarımını Kucaklamak

Biraz daha derine dalmadan ve atomik tasarım ilkelerini keşfetmeden önce, gereken yerde biraz kredi vermek önemlidir. Andy Clarke bir süredir “sayfa değil, sistem tasarlamak” hakkında yazıyor ve konuşuyor.

Clarke'ın, sayfaları izole bir şekilde tasarlamayı bırakıp bunun yerine bu sayfaların oluşturulduğu sistemlerin yaratılmasına odaklanmamız gerektiğine dair kavrayışı, tasarım kalıplarına odaklanmanın önemi etrafında ortaya çıkan yazıların çoğunu bilgilendirdi.

Çok sayıda tasarımcının ipi eline alıp bu düşünce tarzını derinlemesine araştırdığı için şanslıyız. Brad Frost'un Atomik Tasarım üzerine kitabı ve Alla Kholmatova'nın Tasarım Sistemleri üzerine kitabı hem faydalı tavsiyelerle dolup taşıyor hem de okunması gerekiyor. İkisini de şiddetle tavsiye ederim.

Arayüzlerin tasarımına yönelik metodik bir yaklaşım benimsemenin önemini vurgulayan Frost, şunları söylüyor:

"Arayüzlerimizin nelerden oluştuğu ve tasarım sistemlerini daha metodik bir şekilde nasıl inşa edebileceğimizle ilgileniyorum.
İlham ve paralellikler ararken kimyaya geri dönmeye devam ettim. […] Bütün maddeler atomlardan oluşur. Bu atomik birimler, sonunda evrenimizdeki tüm maddeyi yaratmak için daha karmaşık organizmalara dönüşen moleküller oluşturmak üzere birleşirler.
Benzer şekilde, arayüzler daha küçük bileşenlerden oluşur. Bu, tüm arayüzleri temel yapı taşlarına ayırabileceğimiz ve oradan çalışabileceğimiz anlamına gelir. Atom tasarımının temel özü budur."

— Atom Tasarımı, Brad Frost

Frost'un metodolojisi, atom tasarımını içeren beş farklı seviye belirler: atomlar, moleküller, organizmalar, şablonlar ve sayfalar. Atomdan başlayarak inşa ederek, her şeyi inşa etmemize izin veren tasarımın temel yapı taşlarını yaratırız.

Kimya hiçbir zaman benim güçlü noktam olmadı, ama özünde:

1. Atomlar bir araya gelerek molekülleri oluştururlar;
2. Bu moleküller birleşerek organizmaları oluştururlar;
3. Bu organizmalar daha sonra (belirgin bir şekilde kimyasal olmayan) şablonların ve sayfaların oluşturulması için temel olarak kullanılır.

Kısacası, küçük arayüz yapı taşları oluşturuyoruz ve ardından bunları giderek daha karmaşık arayüz öğeleri oluşturmak için bir araya getiriyoruz. Atomik tasarımın faydaları, öğeleri tanecikli düzeyde birleştirerek tutarlılığı sağlayabilmeniz ve ardından bunlardan oluşturabilmenizdir.

UI Kitleriyle Avantajlı Başlangıç

Çoğunlukla web üzerinde çalışan tasarımcılar olarak, yaptığımız işe yönelik ortak bir yaklaşımı kutlayan bir topluluğun parçası olduğumuz için inanılmaz derecede şanslıyız. Son birkaç yılda, hayatımızı biraz daha kolaylaştırmaya yardımcı olan, sistematik olarak tasarlanmış kullanıcı arabirimi bileşenleri setleri olan UI Kitlerinde bir patlama gördük.

Bir UI Kiti sizi bu zamandan ve emekten kurtarabilirken, ortak UI bileşenlerini yeniden çizmekle zaman kaybetmenin bir anlamı yoktur. İyi tasarlanmış bir UI Kit, bir web sitesi veya uygulama olsun, dijital bir ürünün temel taşını oluşturarak tutarlı bir görünüm ve his ile görsel kimliğe sahip olmasını sağlayabilir.

Adobe, keşfetmeye değer harika Adobe XD UI Kitleri oluşturmak için dünyaca ünlü bir dizi tasarımcıyla ortaklık kurdu. Ayrıca, sizi çalışır duruma getirmek için UI Kitleri ile tasarımınıza başlama konusunda bazı harika eğitimler de sağladılar.

Bir dizi ücretsiz simge seti (Lance Wyman, Buro Destruct ve Anton & Irene tarafından tasarlanmıştır) sunmanın yanı sıra, hem web hem de mobil projeler için önceden oluşturulmuş şablonlara sahip kapsamlı bir ücretsiz UI Kitleri seti oluşturdular.

UI Kitleri inanılmaz derecede faydalıdır ve sizi sık kullanılan öğeleri yeniden çizmekten kurtararak önemli miktarda zaman kazandırabilir. Ancak, herhangi bir jenerik kitte olduğu gibi, bir tasarımın diğerine çok benzediği şablon odaklı bir yaklaşıma düşme tehlikesi vardır. Öğe kolajlarınızı oluştururken oluşturduğunuz görünümü ve hissi katacağınız bir başlangıç ​​noktası olarak kitinizi kullanmanız önemlidir .

Etkileşimler ve Animasyonlar Tasarlama

Ekran için tasarım ile baskı arasındaki en önemli farklardan biri, ekran için tasarım yaptığımızda akışkan bir ortam için tasarım yapıyor olmamızdır . Bu, etkileşim tasarımı ile grafik tasarım arasındaki kritik bir farktır.

Etkileşim tasarımcıları olarak statik sayfa koleksiyonları tasarlamıyoruz, bu sayfaların ve bu sayfalardaki öğelerin nasıl etkileşime girdiğini düşünüyoruz. Bu kritik bir ayrımdır ve rollerinin yalnızca daha sonra aktarılacak ve 'teknik biri tarafından' 'bir araya getirilecek' sayfa kümeleri tasarlamak olduğuna inanan bir grafik tasarımcı alt kümesi tarafından genellikle gözden kaçırılır.

'Tasarımcıların kodlaması gerekir' kutusunun başını sürekli olarak kaldıran solucan kutusunu serbest bırakma riski altında, bu ortamda çalışan tasarımcıların ortamın nasıl çalıştığını anlamaları çok önemlidir. Gerçekten unutulmaz deneyimler tasarlamak için animasyon ilkelerini öğrenmek için biraz zaman harcamak önemlidir. Neyse ki, Adobe XD gibi araçlar, sürükleyici etkileşimli deneyimler tasarlamak için geçmişte uğraşılması gereken kodun büyük bir kısmını soyutlar.

Ekranlar (doğal olarak akışkan medya) için tasarım yaparken, ekrandan ekrana geçişlerin nasıl ele alındığını ve kullanıcı arayüzü bileşenleri içinde değerli geri bildirimler sağlayarak kullanıcının tasarladığınız şeyle nasıl etkileşime gireceğini düşünmek çok önemlidir . Hem makro etkileşimleri (sayfa düzeyinde) hem de mikro etkileşimleri (nesne düzeyinde) dikkate almamız gerekiyor.

A'dan B'ye Ulaşım

Önceki makalemde, tasarımınız boyunca üst düzeyde yol haritasını çıkarmaya başlamak için kullanıcı hikayelerini nasıl kullanabileceğimizi araştırdım. Sürecin bu noktasında, kullanıcıların A → B → C'den geçerek bu ekranlar arasında nasıl hareket ettiğine odaklanmamız gerekiyor .

Geçmişte, o sırada kullandığımız cihazlarla sınırlı olarak, çok az animasyon içeren veya hiç animasyon içermeyen ekranlar arasında geçiş yapmış olabiliriz. Ancak masaüstü ve mobil cihazlarımızdaki işlem gücü arttıkça, daha sürükleyici deneyimler tasarlamamız için bize sağlanan fırsatların sayısı da arttı.

Tabii ki, bu yeni güçleri kısıtlama ile kullanmamız gerekiyor, ancak kullanıcılarımızın emrindeki donanım artık bize keyifli etkileşimler tasarlama fırsatı sunuyor. Bu nedenle, son birkaç yılda animasyona olan ilgide bir artış gördük. Tasarımcılar olarak elimizdeki araçlara yanıt veriyoruz; bu araçlar geliştikçe tasarımlarımız da gelişmeli.

Ekranlar arasında geçişler tasarlarken, aşağıdakiler de dahil olmak üzere bir dizi faktörü göz önünde bulundurmamız gerekir:

• Kullanıcı, sayfadan sayfaya geçişi nasıl tetikler?
  Bir düğmeye tıklayarak veya ekranda kaydırarak.

• Ne tür bir geçiş kullanıyoruz
  Çözer, siler, ölçekler veya diğer etkiler. Seçtiğimiz geçiş, kullanıcıyla iletişim kuracak, bu yüzden onu dikkatli seçmek önemlidir.

• Geçiş ne kadar sürer
  Hızlı mı yoksa yavaş mı?

Yolculuğu A → B → C noktasından tasarlarken yaptığımız seçimler (yani tetikleyiciler, geçişler ve zamanlamalar) anlatıyı etkileyecektir, bu nedenle bunları biraz düşünmek önemlidir. Her yolculukta olduğu gibi, keyifliyse daha sorunsuz geçer.

Tasarladığımız içeriğin türü de bu kararları etkileyecektir. Bazı durumlarda, kullanıcının olayları hızlandırmak için geçişleri ve zamanlamaları kullanarak bir anlatıda biraz daha yavaş hareket etmesini isteriz. Diğer durumlarda, geçişleri hızlandırarak yoldan çıkmak isteriz.

Apple iBooks'u ilk piyasaya sürdüğünde, kitap okurken sayfa geçişi ("sayfa kıvrılma" efekti) okuyucuları yavaşlattı. 'Sayfa kıvrılması' ilk bakışta hoştu, ancak yüzlerce kez gördüğünüzde - tek yapmak istediğiniz bir kitap okumakken - inanılmaz derecede sinir bozucu oldu. Her sayfada kullanılan mikrosaniyeler, sinir bozucu bir deneyime dönüşüyor.

Ekranlar arasında geçişler tasarlarken, temel işlevleri gözden kaçırmamak önemlidir. Günün sonunda amacımız, kullanıcılarımızı hayal kırıklığına uğratmak değil, memnun etmektir .

Animasyon elbette keyifli olabilir, ancak işlevsellik pahasına değilse. Sophie Paxton, tam da bu konuyu, gereksiz animasyonların ve aşırı animasyonlu kullanıcı arayüzlerinin, dikkatli olmazsak kullanıcıları nasıl sinirlendirebileceğini vurgulayan Your UI is not a Disney Movie başlıklı mükemmel bir makalede yazıyor. Okumaya değer.

Nesnelerle Etkileşim

Makro etkileşimlerimizle, tanımlanan sayfa düzeyinde, dikkatimizi nesne düzeyinde mikro etkileşimlere çevirmenin zamanı geldi.

Kullanıcıları sayfadan sayfaya kolaylaştırmak için toplanan tüm faktörleri göz önünde bulundurmamız gerektiği gibi, kullanıcıların sayfalarımızdaki belirli nesnelerle etkileşimlerini kolaylaştırmaya da dikkat etmek önemlidir. Bunlar, küçük bir makul animasyonun kullanıcılarımıza geri bildirim sağlamaya yardımcı olabileceği düğmeler, form alanları ve diğer öğeleri içerebilir.

Kullanıcı arayüzü tasarımında görsel geri bildirim sağlamak son derece önemlidir: Eylemlerinin onaylandığına dair bir sinyal sağlayarak kullanıcıların zihinlerini dinlendirir. 'Gerçek dünyada' bir ışık düğmesine tıkladığımda, ışığın açılıp kapanmasının sonucunun yanı sıra tatmin edici bir tıklama duyarak geri bildirim alıyorum. Bu geri bildirim, neler olduğunu bilmeme izin veriyor.

Bu dersleri gerçek dünyadan ekranların dünyasına uygulayarak kullanıcı arayüzü tasarımlarımızı geliştirebiliriz. İyi tasarlanmış bir kullanıcı arayüzü, kullanıcının eylemlerine yanıt vermeli , eylemlerinin istenen etkiye sahip olduğunu bilmelerini sağlamalı ve zihinlerini rahatlatmalıdır. Animasyonun önemli bir rol oynayabileceği yer burasıdır.

UI Hareketi gibi siteler, kullanıcı arayüzlerine uygulanan etkili animasyon örneklerini sergileyen zengin bir ilham kaynağı sağlar. Nasıl ve hangi bağlamda geri bildirim sağladığınızı düşünmek önemlidir, örneğin:

• Parola istediğinizde, kullanıcı bilgileri girerken parolanın güçlü veya zayıf olduğunu belirtmek yararlıdır (parolanın çok zayıf olduğunu ancak daha sonra öğrenmek can sıkıcıdır).

• Bir kullanıcı bir düğmeyle etkileşim kurduğunda, geri bildirim sağlamaya yardımcı olur ve kullanıcıya eylemlerinin onaylandığını bildirir.

• Tarih seçiciler ve takvimlerle etkileşim kurarken, yararlı geri bildirim sağlamak için önemli bir kapsam vardır.

Yukarıdaki senaryolar buzdağının sadece görünen kısmıdır. Kullanıcınızdan bir sayfadaki öğelerle etkileşim kurmasının istendiği her yerde, yardımcı geri bildirim sağlamak için animasyon kullanmayı düşünmeniz için bir fırsattır. Tabii ki, yukarıda belirttiğim gibi, kullanıcı arayüzünüz bir Disney filmi değil, bu yüzden aşırıya kaçmayın!

Son olarak, animasyonun herkes için olmadığını ve bazı insanlar için sorunlara yol açabileceğini belirtmekte fayda var. Vestibüler bozukluğu olan kullanıcılar için hareket baş dönmesine veya mide bulantısına neden olabilir, bu nedenle animasyonu kullanırken erişilebilirliği göz önünde bulundurmak önemlidir.

Kullanıcılara bir seçenek sunmak bir fikir olabilir ve CodePen Dünya Fuarı gibi sitelerin kullanıcıları animasyon kullanımı konusunda uyardığını ve siteye animasyonlu veya animasyonsuz devam etme seçeneği sunduğunu görmek harika. Bu tür bir düşünceyi görmek harika: Erişilebilirlik için Bravo!

Kapanışta

Kullanıcı arayüzünüzü tasarlarken, yerinde bir sisteme sahip olmanıza yardımcı olur. Bu, inşa ettiğiniz her şeyin dikkate alınmasını ve tutarlı olmasını sağlar. Bir arayüz envanteri ile başlamak - özellikle de yeniden tasarımın bir parçası olarak mevcut bir ürünü tekrar ziyaret ettiğinizde - arayüzünüzün çalışması gereken noktaları belirlemenize yardımcı olacaktır. Zamanla, tutarsızlıkların içeri sızması doğaldır; bu araç, bunları saptamak için ideal bir yol sunar.

Arayüzünüzü oluşturma zamanı geldiğinde, üzerinde düşünülmüş bir tasarım sistemi oluşturmak için biraz zaman ayırın. Bu sadece tasarımınızın tutarlı olmasını sağlamakla kalmaz, aynı zamanda ekibinizin aynı sayfada kalmasına yardımcı olur ve proje üzerinde çalışan tüm serbest çalışanlara ihtiyaç duydukları tüm rehberliği tek bir merkezi konumda sağlar.

Son olarak, etkileşimlerinizin ve animasyonlarınızın tasarımını dikkate almak önemlidir. Ekranlar için çalışan tasarımcılar olarak, tasarladığımız şeyin kullanıcıların etkileşimlerine nasıl yanıt verdiğini düşünmemiz önemlidir. Sonuçta, dövülebilir bir ortam için tasarlıyoruz, hadi bu dövülebilirliği lehimize kullanalım! Yukarıdakilerin hepsini bir araya getirerek, zamana direnecek sağlam bir kullanıcı arayüzü yaklaşımının temellerine sahip olacaksınız.

Önerilen Okuma

Maceranızda size yardımcı olacak çevrimdışı ve çevrimiçi birçok harika yayın var. Yolculuğunuza başlamak için aşağıya birkaç tane ekledim.

Alla Kholmatova, Tasarım Sistemleri üzerine şiddetle tavsiye ettiğim mükemmel bir kitap yazdı. Etkili tasarım sistemleri oluşturmanın ekipleri harika dijital ürünler yaratma konusunda nasıl güçlendirebileceğini araştırıyor.

Brad Frost, arayüz envanterlerini yürütme süreci hakkında uzun uzadıya yazdı. Etkili arayüz tasarım sistemleri oluşturmaya odaklanan Atomik Tasarım adlı çok iyi bir kitap da yazmıştır. Frost akıllı bir çerezdir ve bloguna yer işareti koymanızı şiddetle tavsiye ederim.

Etkileşimler ve animasyonlar tasarlama hakkında daha fazla bilgi edinmek istiyorsanız, Val Head'in Animasyon ve UX Kaynaklarını şiddetle tavsiye ederim. Head, atölye çalışmaları yürütür ve mükemmel bir e-posta bültenine de sahiptir.

Web ortamınızsa ve animasyon konusunda yeniyseniz, her şeyi bırakın ve Donovan Hutchinson'ın CSS Animasyon kursuna kaydolun. Bu mükemmel bir kurs ve Hutchinson'ın öğretim stili rakipsiz.

Bu makale, Adobe tarafından desteklenen UX tasarım serisinin bir parçasıdır. Adobe XD, fikirden prototipe daha hızlı geçmenizi sağladığı için hızlı ve akıcı bir UX tasarım süreci için yapılmıştır. Tasarım, prototip ve paylaşım - hepsi tek bir uygulamada. Behance'de Adobe XD ile oluşturulan daha ilham verici projelere göz atabilir ve ayrıca UX/UI tasarımına yönelik en son trendler ve içgörüler hakkında güncel kalmak ve bilgi sahibi olmak için Adobe deneyim tasarımı bültenine kaydolabilirsiniz.