Görsel Kitaplığınızı Oluşturun: Tasarım İpuçları ve Zorluklar

Yayınlanan: 2020-12-17

Deneyimli bir tasarımcı ile genç bir tasarımcı arasındaki en büyük farklardan biri, oluşturduğu görsel kitaplıktır.

Görsel Kütüphane Nedir?

UI öğeleri ve UX uygulamaları söz konusu olduğunda kafanızdaki şey budur. Ne inşa ettiniz ve nasıl çalıştığını anladınız. Kitaplığınız ne kadar zengin olursa, yerinde çözümlere o kadar hızlı ulaşabilirsiniz.

Bir örnek verelim: Bir tasarımcı olarak, yeni bir web sitesi oluşturmakla görevlendirildiniz.

Ne web sitesi? Sorabilirsiniz. Eh, sahip olduğunuz tüm gereksinimler bu. Bir iş arkadaşınızdan gelen bir meydan okuma. Oh, ayrıca, yapmak için bir saatin var. Bu, DevriX'te yaptığımız bir zorluk ve işte 3600 saniye sonra sonuçlardan biri:

Tasarım Alex Dimitrov

Konuyu düşünmek için fazla zaman yoktu, bu yüzden başlığa geldi. Bir başlık hangi bileşenlere sahiptir?

  • Kesinlikle bir başlık
  • Navigasyon
  • Arama çubuğu
  • Bazı sosyal bağlantılar
  • Bazı eylem düğmeleri, özellikle kayıt olmak ve / veya bir hesap oluşturmak için
  • İlginç hale getirmek için biraz gezinme

Bütün bunlar nereden geldi? Önceden boş bir sayfaydı. Başlamak için bir konu bile yoktu. Her şey, web siteleri, uygulamalar ve etrafındaki her şeyi inşa ettiği yıllar boyunca tasarımcının zihninde yaratılan görsel kütüphane sayesinde oldu.

Bir başlık tasarlamanın kaç yolu vardır? Yüzlerce yol. Pek çok farklı türde öğe, topografya, renk, katman, düğme, öğe ve çok daha fazlası vardır. Yapılması ilginç bir deney.

Görsel Kitaplık Nasıl Oluşturulur

En basit cevap “daha ​​fazla tasarım yapmak” olsa da, pek de tatmin edici bir cevap değil çünkü çok daha fazlası var. Daha da önemlisi çeşitliliktir. Farklı tasarımlar inşa etmek. Buna yaklaşmanın doğrudan bir yolu, büyük sitelerin yeniden tasarlanması olabilir.

İşte birkaç örnek:

Facebook:

Görüntü Kaynağı: Dribbble

Gmail:

Görüntü Kaynağı: Dribbble

Twitter:

Görüntü Kaynağı: Dribbble

Çok fazla örnek var. Tasarım ne kadar karmaşıksa, o kadar hızlı ilerlersiniz. Ama tam olarak nasıl çalışıyor?

Örnek olarak bir listeye bakalım. Bir liste, onu adlandıran bir başlığa sahip olabilir, renkli, tasarım açısından benzer veya tasarım açısından farklı simgelere sahip olabilir. Ayrıca daha büyük bir başlığa ve alt başlığa, belki de bir numaraya sahip bir etikete sahip olabilir. Ardından, üzerine gelme durumları, seçilebilen veya devre dışı bırakılabilen öğeler vb. Ekleyebilirsiniz. Tüm bu varyasyonlarla çok çeşitli liste tasarımları yapabilirsiniz.

Görüntü Kaynağı: Dribbble

Bu kadar çok konfigürasyon ve düzen bulabilmek, iyi bir görsel kütüphaneye sahip olmaktır. Bu şekilde yapabileceğini bilmek için. Bu, yanınızda "Bana bir kutu çizin" diyen ve ardından "Bir başlık ekleyin" diyen birinin olması gibi ve bunu düşünmeden yapıyorsunuz. Tüm bu kararlar, daha önce yaptığınız için verilir. Aslında, tasarım temellerini de takip eder, ancak her zaman notlarınıza veya kitaplarınıza ulaşamazsınız. Bu bir yapay zekayı eğitmek gibidir - "başarılı bir öğe sıralaması" kullanarak kalıplar oluşturmanız gerekir.

Tüm Görsel Sanatçıların Kitaplıklar Oluşturması Gerekiyor

Bunun kesin bir örneği, herhangi bir perspektifi kullanarak gerçekçi sanat eserleri yapabilen bir dahi olan Kim Jung Gi'dir.

Kim Jung Gi'nin Sanatı

Bir röportajda, hayatı boyunca etrafındaki tüm nesnelere nasıl baktığını, şekillerini anlamaya ve farklı bir perspektiften çizmeye çalıştığını söylüyor. Bu beceriyle, yukarıdaki resimde gördüğünüz her şeyi, herhangi bir referans olmadan sadece beyaz bir kağıt parçasından başlayarak çizebilir.

Ya da daha doğrusu - referansları kafasında olduğu için ulaşabileceği referanslar olmadan - görsel kütüphanesi. Bu, bir tasarımcı için çabalamak için büyük bir hedef olan bir usta çalışmasının örneğidir.

Web tasarımcılarının düğmeler, listeler, kartlar, giriş alanları, açılır pencereler ve çok daha fazlasını öğrendiği gibi, dijital sanatçılar da malzemeler, ışıklandırma, silüetler, kasların nasıl çalıştığını, yerçekiminin sizi nasıl aşağı çektiğini ve sizi nasıl zorladığını öğrenir. vücut vb.

Suzanne Helmigh tarafından grafik

Bu, dijital sanatçıların çeşitli malzemeleri bir küreye uygulamaya çalışarak nasıl öğrendiklerinin bir örneğidir. Magma, odun, kürk, şarap, yumurta, peynir, her şey geçerlidir. Bunu öğrenmek, ellerinizi kullanarak yapmak, yavaş yavaş beyninize işler. Ve bu malzemeyi gerçek bir resme uygulama zamanı geldiğinde, artık nasıl çalıştığını ve nihai sonucun gerçekçi bir şekilde nasıl görünmesi gerektiğini daha iyi anlıyorsunuz.

İşte cilt, deri, metal ve saçın çok iyi görünen bir nihai ürün üretmek için kullanıldığı bir örnek. Bu malzemelerin temel anlayışının olmaması, metalin plastik, deri benzeri kağıt vb. Görünmesine neden olabilir.

Görüntü Kaynağı: Artstation

Web Tasarım Bileşenleri Zorlukları

Şimdi, web tasarımında sıklıkla kullanacağınız bazı ortak bileşenlere ve yapılacak bazı uygulamalara tekrar göz atalım:

1 - Düğmeler

Bir web sitesindeki en temel bileşenlerden biri. Düğmeler tüm şekil ve boyutlarda olabilir. Degradeler ayarlayabilir, renkleri değiştirebilir, metin-gölge ekleyebilir, kenarlıklar ekleyebilir (birden fazla), parlak stil ekleyebilir, ana hatlarını çizebilir, şekillerini değiştirebilir (kare, yuvarlak köşeler, daire), bazıları simgelerle birlikte gelir, diğerlerinde birbirinden ayrılmış simgeler vardır alt tıklanabilir alan.

Görüntü Kaynağı: Dribbble

Görev : 20 farklı stilde bir düğme tasarlayın. Aralarındaki fark ne kadar büyükse o kadar iyidir. Her biri için kontrast, denge vb. Açısından en iyi tasarım uygulamalarını takip etmeye devam edin.

2 - Kartlar

Kartlar veya kutular başka bir süper yaygın bileşendir. Bazı ortak öğeler üstbilgi / altbilgi + ana içerik olabilse de, her tür içeriği tutabilir.

Görüntü Kaynağı: Dribbble

Görev : İçeriği kullanarak yukarıdaki kartları oluşturun, ideal olarak olabildiğince farklı 10 varyasyon tasarlayın. Stili değiştirin, yeni öğeler ekleyin, döndürün, degradeler, gölgeler, simgeler ve çizimler kullanın. Onunla çıldırmaya çalışın.

3 - Yorumlar

Hemen hemen tüm blogların bir tür yorum sistemi vardır. Ancak yorum bileşeninin gerçekten gerçek bir yorum içermeyip daha çok bir "durum" değişikliği gibi olabileceğini düşündünüz mü?

Görüntü Kaynağı: Dribbble

Görev: Yukarıdaki örnek tam da bunu göstermektedir. Şimdi, bir yorum bileşeniyle ilgili herhangi bir şey bulmaya çalışın - kullanıcılardan gelen yorumlar, görev güncelleme durumları (yorumlar alanındadır), sohbete benzer yorumlar vb. 7-10 varyasyon arasında herhangi bir şey iyi bir sayı olacaktır. Yine - hepsini farklı tutmaya çalışın. Daha fazla araştırın, fikir bulun, sitelere göz atın.

Bu alıştırmaların amacı, ortak öğeleri daha önce bilmediğiniz yeni yollarla yapmanın yollarını bulmaktır .

4 - Kaydırıcılar

Kaydırıcılar, birçok ön uç geliştiricinin yarattıkları büyük miktarda sorun ve arka planda çalışan ağır JavaScript nedeniyle nefret ettiği bileşenlerden biridir. Ancak bu, bir tane yapmanıza gerek olmayacağı anlamına gelmez.

Görüntü Kaynağı: Dribbble

Görev: Farklı düzenler ve yaklaşımlar hakkında daha fazla bilgi edinmek için web'e ve çeşitli tasarımlara göz atın. Belki neye sahip olduklarını görmek için slayt yaptıkları JS kitaplıklarına bir göz atın. Oradan sürgüler için 10-15 farklı tasarım tasarlayın. Yine - her tasarımı bir öncekinden olabildiğince farklı yapmaya çalışın, sadece ufak geliştirmeler kullanmayın.

5 - Giriş formları

Giriş formları, hemen hemen her web sitesinin başka bir temel parçasıdır. Onlarla ilginç olan, bir çıktı yerine bilgi almalarıdır.

Görüntü Kaynağı: Dribbble

Görev: Buradaki işiniz, bir web sitesinde ihtiyaç duyulabilecek en tuhaf bilgi türlerini bulmaktır. Bir PDF veya PSD yükleyin (birini seçin), kredi kartı bilgileri yükleyin, çerezler için bir tarif ekleyin, boya karıştırma oranlarını hesaplayın, bir araba bayi konfigüratörü oluşturun. Akla gelen her şey, ne kadar eşsizse o kadar iyidir. Gerçek çözümleri görmek için yine web sitelerine göz atmaya devam edin. Benzersiz tasarımlarla en az 10 farklı benzersiz form tasarlayın.

Özet

Bir tasarımcı olarak bir tasarım kitaplığı oluşturmak, iş akışınızı iyileştirmek, tasarımları hızlı bir şekilde üretmek, müşterileriniz için sorunları çözmek ve kullanıcı deneyimini iyileştirmek için benzersiz ve dahice yollar bulmak için en önemli adımlardan biridir. Web'deki her bir öğeye göz atmaya ve yakından bakmaya başladığınızda, kullanıcının eylemlerini, gördüklerini ve bunun nasıl geliştirilebileceğini düşünmeye başlarsınız.

Yukarıdaki görevleri ev ödevi olarak kullanmak portföyünüzü doldurmanıza yardımcı olur . Kendinizi sadece belirtilen 5 görevle sınırlamayın, oraya gidin, web sitelerine göz atın, yeniden tasarlayın, üzerinde çalışın ve tasarım duyularınızı geliştirmeye ve kendi görsel kitaplığınızı oluşturmaya devam edin!