Tasarımcılar için Eğlenceli Çevrimiçi Oyunlarla Becerilerinizi Geliştirin

Yayınlanan: 2022-09-08

Başarılı tasarımcılar, araçlar, projeler ve disiplinler arasında kullanılan temelleri güçlendirmek için rutin olarak beceri kazanır ve yeniden beceri kazanır. Ancak, çalışma haftasında öğrenmek için fazladan zaman bulmak kolay değildir. Neyse ki, çevrimiçi oyun, UI/UX tasarımcılarının becerilerini geliştirmeleri ve yenilerini edinmeleri için eğlenceli ve eğitici bir yoldur. Etkileşimli ve sürükleyici (ve genellikle ücretsiz) çevrimiçi oyun deneyimleri sayesinde hizalama, tipografi ve renk teorisi gibi teknik becerileri geliştirebilirsiniz.

Yeni tasarım teknikleri öğrenmenin yanı sıra, çevrimiçi oyun oynamanın beni daha hafif bir ruh haline soktuğunu, yaratıcılığımı artırdığını ve temel tasarım ilkelerini daha iyi kullanmama yardımcı olduğunu keşfettim. Ne zaman boş vaktim olsa ya da inatçı bir tasarım sorunuyla karşılaşsam bu oyunlardan birini oynuyorum ve yeni bir bakış açısıyla yola çıkıyorum.

Hizalanma Duygunuzu Geliştirin

Hizalama, görsel kompozisyona rehberlik eden ve kullanılabilirliği ve okunabilirliği destekleyen temel bir tasarım ilkesidir.

Ortalanmış Bu, hizalama duygunuzu eğitmek ve boşluk hatalarını hızlı bir şekilde yakalamanıza yardımcı olmak için harikadır. Amaç, bir noktanın bir şeklin içinde ortalanıp ortalanmadığını belirlemektir. Bu basit bir kavramdır, ancak noktalar genellikle acı verici bir şekilde merkeze yakın yerleştirildiği için oyun zordur. Oyun, sizi geometriyi düşünmeye ve örtüşen ve bitişik şekillerde referans noktaları bulmaya zorlayarak kompozisyon farkındalığı oluşturur.

Tasarımcılar için çevrimiçi bir oyun olan It's Centered That'in başlangıcı. Ekranın ortasında büyük bir mavi çarpı, solda bir gülen yüz ifadesi ve sağda üzgün bir ifade var. — Ortalanmış Bu, oyunculardan bir noktanın ortalanıp ortalanmadığını belirlemelerini isteyerek hizalama hissini test eder.

Yazı Tipi Tasarım Bilginizi Genişletin

Yazı tiplerinin nüanslarını anlamak, tasarımcıların görsel hiyerarşi oluşturmasına, metnin okunaklı olmasını sağlamasına ve metnin anlamını daha iyi iletmesine yardımcı olabilir.

Serif'i çektiğim oyun, serif yazı tiplerini ne kadar hızlı tanıyabileceğinizi test ediyor. Başlamak için, size biri serif yazı tipi olan iki harf sunulur ve süreniz dolmadan üzerine tıklayarak “serifi vurmanız” gerekir. İlerledikçe, aynı anda daha fazla harf gösteriliyor ve bu da farklı serif stillerini bulmayı ve çekmeyi zorlaştırıyor.

Bu oyun sizi diken üstünde tutacak! Her hafta oynuyorum ve birkaç turdan sonra ne kadar zorlayıcı olduğuna her zaman şaşırıyorum.

Tasarımcılar için çevrimiçi bir oyun olan serif'i vurdum. Karanlık bir arka planda on iki beyaz serif ve sans-serif yazı tipi harfi. — Oyuncuların farklı serif yazı tiplerini ne kadar hızlı tanıyıp "çekebildiğini" serif zorluklarını çektim.

Typewar, farklı yazı karakterlerini tanımlama yeteneğinizi zorlayan başka bir yazı biçimi eğiticisidir. Her turda size bir glif gösterilir ve bir çift seçenek arasından doğru yazı tipi adını seçmeniz gerekir. Soruyu nasıl yanıtladığınıza göre puan kazanır veya kaybedersiniz ve sonunda kazanılan puan miktarı, aynı soruyu başka kaç oyuncunun doğru yanıtladığına bağlıdır. Anında geri bildirim, gerçek zamanlı istatistikler ve az bilinen yazı tiplerine maruz kalma, sizi öğrenmeye devam etmek için motive edecektir.

Typewar'ın başlangıcı, tasarımcılar için çevrimiçi bir oyun. Ekranın ortasında büyük bir "D" harfi var ve altında iki yazı tipi seçeneği görünüyor. — Typewar, oyuncuların farklı yazı tiplerini tanımlama yeteneklerini geliştirmelerine yardımcı olur.

Kerning için Gözünüzü Geliştirin

Dijital metnin okunabilirliğini iyileştirmenin bir yolu, etkili karakter aralığı veya karakterler arasındaki boşlukları sağlamaktır. Karakter aralığı, her yazı tipinin yazı tipi dosyalarında önceden tanımlandığından, genellikle tasarımcıların radarına girer. Ancak, karakterler arasındaki ilişki bozuk göründüğünde veya bir müşteri için ısmarlama bir logo veya yazı tipi oluşturmanız gerektiğinde karakter aralığını nasıl ayarlayacağınızı bilmek faydalıdır.

Karakter Aralığı Türü, sözcüklerin içindeki harfleri doğru şekilde yerleştirme yeteneğinizi test ederek karakter aralığı becerilerinizde ince ayar yapmanıza yardımcı olur. Aradığınız her kelime için 100 üzerinden bir puan ve üç görünüm arasında geçiş yapma seçeneği alırsınız: aralığınız, en uygun aralık ve karşılaştırma için her ikisinin bir kombinasyonu.

Bu oyuna geri dönüyorum çünkü 100 puan almak zor ve bu bana her zaman gelişmek için yer olduğunu hatırlatıyor.

Tasarımcılar için çevrimiçi bir oyun olan Kern Type'ın başlangıcı. "Bekle" kelimesi ekranın ortasındadır. — Kern Type, oyuncuların harfler arasındaki boşlukları optimize etme yeteneğini test eder.

Renk Oyununuzu Yükseltin

Renk becerilerinizi geliştirerek, çeşitli tasarım projeleri ve disiplinlerinde daha akıllı ve daha anlamlı kararlar verebilirsiniz. Renk, tamamlayıcı, benzer, üçlü ve dörtlü renk eşleşmelerinin yanı sıra tonları ve doygunluğu tanımlamanız için size meydan okuyan bir oyundur. Arayüz, ortasında vurgulanmış bir renkle etkileşimli bir renk tekerleği gösterir. Renk çarkının içindeki rengi (veya renkleri) 10 saniye veya daha kısa sürede belirlemeniz gerekir; bu görev, üçlü ve dörtlü renk şemaları için renkleri eşleştirmeye çalışırken giderek zorlaşan bir görevdir.

Tasarımcılar için çevrimiçi bir oyun olan Color'ın başlangıcı. Tamamlayıcı renkleri gösteren bir renk çarkı ve merkezde dahili bir zamanlayıcı. — Renk, oyuncuların belirli tonları, doygunluğu ve renk paletlerini belirlemelerini sağlayarak renk eşleştirme becerilerini geliştirmelerine yardımcı olur.

Vektör Tekniğinizi İyileştirin

Figma, Sketch ve Adobe Illustrator gibi vektör tabanlı araçlar, tasarımcıların, boyut olarak büyüdükçe çözünürlüğünü kaybeden piksel görüntülerinin aksine, kaliteden ödün vermeden ölçeklenen dijital grafikler oluşturmalarına olanak tanır. Ancak vektör şekillerini ve eğrilerini çizmek ve manipüle etmek zor bir süreç olabilir.

Boole Oyunu size vektör tabanlı tasarım araçlarında 2B şekilleri hızlı bir şekilde oluşturmak ve değiştirmek için kullanılan Boole işlemlerini öğretir. Oyunda size kopyalamanız gereken bir şekil gösteriliyor. Birkaç saniye sonra şekil bir anahatta dönüşür. Ekranın solunda, son şekli yeniden oluşturmak için anahatta sürükleyebileceğiniz birkaç şekil vardır. Ekranın altında dört Boole işlemi vardır: birleştirme, çıkarma, kesişme ve fark. Devam düğmesine tıklamak, seçilen Boole işlemini kullanarak şekilleri nasıl birleştireceğinizi gösteren adım adım bir animasyonu tetikler. Yanlış bir işlem seçildiğinde bu animasyon hatalarınızı görselleştirmenize yardımcı olur.

Tasarımcılar için çevrimiçi bir oyun olan Boolean'ın başlangıcı. Solda bir gezinme menüsü. Merkezde bir dizi şekil anahattı ve sağda bir dizi beyaz şekil var. — Boole Oyunu, oyunculara vektör grafiklerinde Boole işlemlerini nasıl kullanacaklarını öğretir.

Shape Type, denenecek başka bir vektör oyunudur. İçinde, oyuncuya, farklı bağlantı noktalarını sürükleyerek doğru formuna yeniden şekillendirilmesi gereken ve 100 üzerinden bir benzerlik puanı verilmesi gereken bir harf sunulur. Kern Type gibi, sonucunuzu aşağıdakilerle karşılaştırmak için üç görünüm arasında geçiş yapabilirsiniz. özgün şekil. Vektör çizim becerilerinizi geliştirmenin yanı sıra Shape Type, farklı yazı tiplerinin anatomik öğelerine yakından bakmanın harika bir yoludur.

Tasarımcılar için çevrimiçi bir oyun olan Shape Type'ın başlangıcı. Ekranın ortasında, yüzde puanı, üç geçiş seçeneği ve sağda bir İleri düğmesi olan büyük bir "B" harfi vardır. — Shape Type, oyuncuları vektör harf formlarını yeniden şekillendirme alıştırması yapmaya zorlar.

Vektör becerilerinizi geliştirmenize yardımcı olacak son bir oyun, kalem aracını kullanarak daha hassas grafikler oluşturmanıza yardımcı olan The Bezier Game'dir. Giriş eğitimleri, bağlantı noktalarını konumlandırmak ve Bezier tutamaçlarını değiştirmek için alt ve shift gibi denetimlerin nasıl kullanılacağını açıklar. Oyun size mümkün olduğunca az bağlantı noktası veya düğüm ile kalp ve araba gibi daha karmaşık şekillerle birlikte basit geometrik şekilleri nasıl çizeceğinizi öğretir. İşleri ilginç kılmak için, her seviye için belirli sayıda düğüm alırsınız ve oyun, kullanmadığınız düğümlerin sürekli bir çetelesini tutar.

Bu oyunu seviyorum çünkü bağlantı noktası yerleşimi ile bezier tutamak açıları arasındaki ilişkiyi görselleştirmeme yardımcı oluyor, bu da daha düzgün çizgiler ve eğriler sağlıyor.

Tasarımcılar için çevrimiçi bir oyun olan The Bezier Game'in başlangıcı. Bağlantı noktaları olan bir kalbin ana hatları ekranın ortasındadır. — Bezier Oyunu, oyuncuların bağlantı noktaları yerleştirme ve bezier tutamaçlarını sürükleme gibi kalemle alınan önemli becerileri geliştirmelerine yardımcı olur.

Temel Kodlamayı Yenileyin

İster kariyer gelişimi ister geliştiricilerle işbirliği için olsun, HTML ve CSS'nin temellerini anlamak, tasarımcıyı çok disiplinli ekipler için önemli bir varlık haline getirir. Ayrıca, ön uç programlama bilgisi, tasarımcıların fikirlerini gerçekçi parametrelerle geliştirmelerine yardımcı olur.

Flexbox Froggy, adım adım kodlamanın temellerini yıkıyor. Yalnızca bir veya iki satır kodla web sayfalarında hizalama kontrolü, boşluk ve sarma öğelerini etkinleştirerek UI bileşeni konumlandırmasını kolaylaştıran bir CSS3 web düzeni modeli olan CSS flexbox'ı öğretir.

Oyunda, CSS kodu satırları yazarak yaramaz bir kurbağa ve arkadaşlarının ekran boyunca zıplamasına yardımcı oluyorsunuz. Her düzeyde, kod düzenleyicinin üzerindeki mini öğretici, kullanabileceğiniz farklı komutları açıklar. Kodu ekranın sol tarafına yazarken, sağ tarafta ilgili değişiklikler meydana gelir. Kurbağa nilüfer yaprağına ulaşırsa, kod doğrudur.

Tasarımcılar için çevrimiçi bir oyun olan Flexbox Froggy'nin başlangıcı. Solda bir kod düzenleyici ve talimatlar. Sağda dört farklı renkte kurbağa animasyonu. — Flexbox Froggy, oyunculara temel CSS esnek kutu kodunun nasıl yazılacağını öğretir.

UI/UX Bilginizi Artırın

Çevrimiçi oyunlar, tasarımcıların UI/UX bilgilerini geliştirmelerine ve dönüşüm oranlarını ve yatırım getirisini artıran sorunsuz deneyimler oluşturmalarına da yardımcı olabilir.

Can't Unsee, hiyerarşi, kontrast, hizalama, tipografi ve bileşen stili gibi tasarım kavramları hakkındaki bilginizi test ederek genel UI/UX yeteneklerinizi zenginleştirir. Ekranda iki tasarım bileşeni gösterilir ve daha kullanıcı dostu seçeneği seçmeniz istenir. Bileşenler, eğitimsiz bir gözle aynı görünebilir, ancak uzman bir tasarımcı, yanlış hizalanmış metin veya düzensiz dolgu gibi öğeler arasındaki küçük farklılıkları fark ederek bunları ayırt edebilmelidir.

Tasarımcılar için çevrimiçi bir oyun olan Can't Unsee'nin başlangıcı. Hemen altında oyuncu için talimatlar içeren iki sohbet kutusu vardır. Ekranın alt kısmında bir ilerleme gösterge çubuğu belirir. — Can't Unsee, oyunculardan iki tasarımın daha kullanıcı dostu seçeneğini belirlemelerini ister.

Çevrimiçi Tasarım Oyunlarından En İyi Şekilde Yararlanın

Tasarım endüstrisinin ne kadar hızlı geliştiğine genellikle şaşırırım. Bazen, yeni araç ve tekniklere ayak uydurma baskısı bunaltıcı gelebilir ve yaratıcılığımı bastırabilir. Sorunlara çocuksu bir ruhla yaklaştığımda en iyi tasarım çalışmamı yapıyorum, bu yüzden bu oyunlardan çok zevk alıyorum: Oyun ve merak duygusunu korurken öğrenmeme ve pratik yapmama izin veriyorlar.

İster yeniden beceri kazanmak, ister yeni bir UI/UX tekniği öğrenmek isteyin, çevrimiçi tasarım oyunları sanatsal ve teknik becerilerinizi test etmenize ve geliştirmenize yardımcı olabilir. Pablo Picasso'nun bir zamanlar dediği gibi, "Nasıl yapılacağını öğrenmek için her zaman yapamadığım şeyi yapıyorum."