Ayarlar

UI Göreviniz 🎯

Merhaba, UIX101‘in #007 numaralı görevine hoş geldiniz! 😎

İlk haftanızı geride bırakıyorsunuz. Şimdiye kadar süreç sizin için nasıl gidiyor? Bize görüşlerinizi ve nasıl hissettiğinizi yazarsanız çok mutlu oluruz 😄 Bugünkü görevinizde sizden isteğimiz bir “Ayarlar” ekranı tasarlamanız olacak.

Oldukça geniş bir konu değil mi? Bir uygulamanın kullanıcıya has ayarlarından tutun da, bir e-posta listesinin abonelik ayarlarına, online bankacılık uygulamasının güvenlik ayarlarına, PC oyun ayarlarına ve hatta elektrikli araçların ayar seçeneklerine kadar çok geniş bir yelpazede düşünülebilir.

Aşağıda size birkaç olası iş / çalışma alternatifi bıraktık ama, lütfen kendinizi bunlarla sınırlamayın. Ne kadar farklı fikirler üretebildiğinizi gösterebilmeniz açısından bunu bir fırsat olarak görmenizi rica ediyoruz.

Aklınıza bir şeyler gelmeye başladı mı?

 

İlham 🎨

Örnek çalışmalara göz atın:

Dribbble için https://dribbble.com/search/UI-007
Behance için https://www.behance.net/search/projects?search=UI+007

 

Fikirler ⭐

UIX101‘de her gün bir UI yapmaya değil, “UX için UI” yapmaya yönlendiriyoruz.

Unutmayın ki; portfolyonuza ekleyeceğiniz ve UX’i, yani Kullanıcı Deneyimini, gözeterek yapacağınız çalışmalar çok daha değerli olacaktır!

Bugünkü çalışmanız aşağıdaki durumlardan biri veya birkaçı için çözüm üretebilir :

  • Bir kahve zincirinin devamlı müşterilerine puan kazandırdığı mobil uygulaması için Ayarlar sayfasını tasarlayın. Biriken puanlar, gizlilik seçenekleri, kahve fotoğrafı paylaşım gibi özellikler olduğunu varsayabilirsiniz.
  • Basit bir bilgisayar oyunu için karakter seçeneklerinin özelleştirildiği ayar sayfasını tasarlayın. Tablet veya masaüstü genişlik için düşünülebilir.
  • Twitter’ın (X) ayarlar ekranını baştan tasarlayın.
  • Modern bir akıllı ev sistemi için oda sıcaklığı, ışıklandırması ve neminin ayarlanabileceği mobil ekranı tasarlayın.
  • Görme engelli ve/veya ileri derecede görüş bozukluğu olan bireyler için sesle ve erişilebilirliği artırılmış bir TV kumandası tasarlayın. Kumanda uygulaması mobil cihazlarda tam ekran olarak kullanılacak.
  • Masaüstünde çalışacak bir alarm uygulaması için gerekli ayar ekranını tasarlayın. Ferah ve minimalist olması öncelikli tercih.

 

Günün Ücretsiz Aracı

Canva

Son dönemde adını her gün daha sık duyduğumuz, görsel tasarımı kolaylaştıran Canva’yı burada görmek sizi şaşırtmamalı.

Aslında Canva UX Tasarım için de oldukça kullanışlı bir araca dönüşmeye başladı. Özellikle son dönemde iyice kullanımı artan Visual Suite ile; Whiteboard, Prototyping, Presentations hatta Canva Live ile kullanıcı testleri bile yapmanız mümkün.

 

Paylaş ve Görünür Ol

Tasarımını Behance, Dribbble, LinkedIn veya Twitter’a #dailyui etiketi ve görev sıra numaranızla gönderin (örn. “#007 numaralı #UIX101 görevimi tamamladım. #007 #dailyui“)

Kullanıcı Profili

UI Göreviniz 🎯

Merhaba, UIX101’deki #006 numaralı görevinizde tekrar beraberiz!

Bugünkü göreviniz bir “Kullanıcı Profili” veya “Kullanıcı Kartı” tasarlamak.

Üyelik gerektiren her sitede veya uygulamada gördüğümüz, fakat belki de her zaman dikkat etmediğimiz bu ekran, bazen sadece panelde kullanıcının ayarlarını, bazen de üyeler arasında ortak sunum olarak karşımıza çıkıyor. Hangisi olursa olsun bu kartlar (sayfalar) kullanıcının, o platforma has, bilgilerinin düzenli bir şekilde sunulduğu ara-yüzler olarak karşımıza çıkıyor.

Bu görevinizde, ister kullanıcılar arası açık profili, isterseniz de kullanıcının bu ekran için verilerini girdiği ekranı (veya ikisini bir arada?) tasarlayabilirsiniz.

İlham 🎨

Örnek çalışmalara göz atın:

Dribbble için https://dribbble.com/search/UI-006
Behance için https://www.behance.net/search/projects?search=UI+006

 

UIX101‘de her gün UI yapmaya değil, “UX için UI” yapmaya yönlendiriyoruz.

Unutmayın ki; portfolyonuza ekleyeceğiniz ve UX’i, yani Kullanıcı Deneyimini, gözeterek yapacağınız çalışmalar çok daha değerli olacaktır!


Çalışmanız aşağıdaki durumlardan biri veya birkaçı için çözüm üretebilir :

  • Instagram profil sayfasını baştan tasarlamanız isteniyor. Tasarımcısı siz olsaydınız, bu profil sayfası ne kadar farklı olurdu?
  • Son teknoloji bir Araç Güvenlik Sistemi için kullanıcı profili sayfasını oluşturun. Kullanıcı Deneyimini ön planda tutarak, aracıyla ilgili bilgileri de içermesi isteniyor.
  • Bir çöpçatan uygulaması için, diğer kullanıcılara açık olacak kullanıcı profil sayfasını tasarlayın.
  • Hızlı kitap alışverişi uygulaması için mobil ve masaüstü için ayrı ayrı kullanıcı profil sayfalarını oluşturun. Burada kullanıcının son okuduğu (veya satın aldığı) kitap, beğendiği alıntılar ve bir puanlama sistemi düşünebilirsiniz.
  •  Yeni bir E-spor platformu için kullanıcı profil sayfasının masaüstü tasarımını sketch + wireframe + final hallerini tasarlayın. Mini-case study halinde sunabilirsiniz.
  •  Bir diyet uygulaması için kullanıcıların profil sayfalarını tasarlayınız. Renk olarak yumuşak tonlar tercih edilebilir.

 

 

Günün Ücretsiz Kaynakları

Bazen çalışmak üzere bilgisayarın başına oturduğumuzda veya tableti elimize aldığımızda en çok ilk adımda zorlanırız. İlham bir türlü gelmez. Böyle zamanlar veya farklı alternatiflere de bakmak istediğinizde kullanabileceğiniz 5 web sitesini sizle paylaşmak istiyoruz.

  1. appshots.design
  2. footer.design
  3. refero.design
  4. curated.design
  5. a-fresh.website

Hangisini daha faydalı buldunuz? Hangisini kullanmak daha kolay geldi? Lütfen bizi de etiketleyerek yorumlarınızı dilediğiniz sosyal platformda paylaşın 😉

 

Paylaş ve Görünür Ol

Tasarımını Behance, Dribbble, LinkedIn veya Twitter’a #dailyui etiketi ve görev sıra numaranızla gönderin (örn. “#006 numaralı #UIX101 görevimi tamamladım. #006 #dailyui“)

Hesap Makinesi

UI Göreviniz 🎯

Merhaba, #004 numaralı görevinize hoşgeldiniz!

Bugünkü göreviniz bir “Hesap Makinesi” tasarlamak. Basit  gibi gelebilir, ancak ilk defa yapanlar için güzel bakış açıları kazandıracak ve ilham verecek bir görev! Dilerseniz hem basit, dilerseniz bilimsel bir hesap makinesi tasarlayabilirsiniz ✌

Ya da belki belli bir işe özel hesaplama yapan basit bir araç da tasarlayabilirsiniz. Tamamen sizin hayal gücünüze kalmış!

 

İlham 🎨

Örnek çalışmalara göz atın:

Dribbble için https://dribbble.com/search/UI-004
Behance için https://www.behance.net/search/projects?search=UI+004

 

UIX101‘de her gün UI yapmaya değil, “UX için UI” yapmaya yönlendiriyoruz.

Unutmayın ki; portfolyonuza ekleyeceğiniz ve UX’i, yani Kullanıcı Deneyimini, gözeterek yapacağınız çalışmalar çok daha değerli olacaktır!

Çalışmanız aşağıdaki durumlardan biri veya birkaçı için çözüm üretebilir :

  • Basit işlemler için pop-up açılan bir hesap makinesi tasarımı.
  • Denizciler için Deniz Mili / Kilometre dönüşümü yapacak özel bir mesafe hesaplayıcı.
  • Kripto para birimleri arası dönüşüm yaptıran bir hesap makinesi.
  • Akıllı saatlere özel bir hesap makinesi tasarımı.

 

Kendinizi Zorlayın!

Bu tasarımı Retro Design yaklaşımıyla yapmayı deneyin!

Retro Tasarım: Retro kelimesi genellikle “bilinçli olarak yakın geçmişin akımlarını, modalarını türeten veya taklit eden tarz” olarak açıklanabilir. Bir başka tanıma göre de Retro, modası geçmiş bir stil veya yeniden moda haline gelen modadır. “Retro” kelimesi geleceğe doğru bir ilerleme yerine geçmişe doğru bir hareketi temsil eder ve tasarımlarda geriye, geçmişe yönelik nostaljik bir bakış açısı gerektirir.

 

Retro Design
Retro Design

Paylaş ve Görünür Ol

Tasarımını Behance, Dribbble, LinkedIn veya Twitter’a #dailyui etiketi ve görev sıra numaranızla gönderin (örn. “#004 numaralı #UIX101 görevimi tamamladım. #004 #dailyui“)

 

 

Açılış Sayfası

UI Göreviniz 🎯

Merhaba, #003 numaralı görevinize hoşgeldiniz!

Bugünkü göreviniz – tabii kabul ederseniz – bir “Açılış Sayfası” tasarlamak. Dilerseniz hem masaüstü, hem mobil ekranlarını beraber tasarlayabilirsiniz ✌

Bu ekran, bir satışa yönlendimek, bağış toplamak, abonelik başlatmak için bilgi vermek veya hayal edebileceğiniz herhangi bir şey olabilir.

 

Açılış Sayfası Nedir?

Dijital pazarlamada Açılış Sayfası kavramı, bir pazarlama veya reklam kampanyası için özel olarak oluşturulan bağımsız bir web sayfası için kullanılır. Açılış sayfası (Landing Page), Ziyaretçinin bir bağlantıya (e-postadan ya da Google, Bing, gibi bir arama sorgusu sonucundan veya Facebook, Instagram, Twitter gibi bir sosyal medyadan bir bağlantı veya reklama tıkladıktan sonra “indiği” yerdir.

Genellikle birçok hedefi olan ve keşfetmeyi teşvik eden web sayfalarının aksine açılış sayfaları, harekete geçirici mesaj (kısaca CTA  – Call To Action) olarak bilinen tek bir odak veya hedefle tasarlanır. Bir web sitesinin ana sayfası çok ender olarak Açılış Sayfası olabilir. Bu sayfalar belli bir amaçla, özel olarak tasarlanır.

Açılış sayfalarını pazarlama kampanyalarının dönüşüm oranlarını artırmak ve bir müşteri adayı veya satış elde etme maliyetlerini düşürmek için en iyi seçenek haline getiren de bu odak noktasıdır.

 

İlham 🎨

Örnek çalışmalara göz atın:

Dribbble için https://dribbble.com/search/UI-003
Behance için https://www.behance.net/search/projects?search=UI+003

 

UIX101‘de her gün UI yapmaya değil, “UX için UI” yapmaya yönlendiriyoruz.

Unutmayın ki; portfolyonuza ekleyeceğiniz ve UX’i, yani Kullanıcı Deneyimini, gözeterek yapacağınız çalışmalar çok daha değerli olacaktır!

Çalışmanız aşağıdaki durumlardan biri veya birkaçı için çözüm üretebilir :

  • Hazırlayacağınız Açılış Sayfası yeni çıkacak bir elektrikli araba modelinin tasarımı için olsun.
  • Bu açılış sayfasını sizden isteyen şirket İnsan Kaynakları alanında çalışıyor ve bu sayfanın yalnızca tasarımcı adaylara hizmetlerini sunmak için hazırlatıyor.
  • Online Turistik Turlar satan bir firma için Yılbaşı Turları hakkında bilgi veren ve yeni üye olanlara %50 indirim sunacak bir kampanyayı tanıtan bir sayfa olsun isteniyor.
  • Bir Müzik kursu için Mobil ve Minimalist bir açılış sayfası isteniyor. Özellikle Gitar teması isteniyor.
  • Mars kolonisine su taşımak üzerine kurulacak bir uzay girişimi için ütopik bir açılış sayfası tasarımı oluşturun. Hiç bir kurumsal logo olmayacak! CTA amacı: Bağış toplamak.
  • Savaş Karşıtı lobi faaliyetleri yürüten gönüllü bir örgüt için imza kampanyasına yönlendirecek bir Açılış Sayfası yapmanız isteniyor. Kullanılacak görsellerde kan ve çocuk kullanılması kesinlikle istenmiyor.

 

Kendinizi Zorlayın!

Bu tasarımı Flat Design yaklaşımıyla yapmayı dener misiniz?

Flat Design: Flat tasarım, basit öğelerin, tipografinin ve düz renklerin minimalist kullanımını vurgulayan bir arayüz tasarımı tarzıdır. Tasarımcılar düz tasarımı daha akıcı ve verimli olmasından dolayı tercih etmektedir. 2 Boyutlu ve açık – net bir görünüm sunan Flat Design yaklaşımında boşluk kullanımları (white space) büyük önem arz eder!

 

Flat Design
Flat Design

 

Paylaş ve Görünür Ol

Tasarımını Behance, Dribbble, LinkedIn veya Twitter’a #dailyui etiketi ve görev sıra numaranızla gönderin (örn. “#003 numaralı #UIX101 görevimi tamamladım. #003 #dailyui“)

 

Günün Ücretsiz Kaynağı

Dribbble.com/

Dribbble, dijital tasarımcılara yönelik ücretsiz bir portfolyo, kişisel tanıtım ve sosyal ağ platformudur. Site hem tasarım portfolyo platformu, hem de iş ve işe alım sitesi olarak hizmet vermekte. Dribbble ayrıca tasarımcıların çalışmalarını çevrimiçi olarak paylaşabilecekleri en büyük platformlardan biri oalrak da bilinmektedir.

Ücretsiz pakette çalışmalarınızı hızlı ve zahmetsizce paylaşabileceğiniz platform aynı zamanda İlham almak için de oldukça faydalı. Eğer Dribbble hesabınız halen yoksa, bu satırları okur okumaz ilk işiniz kendi hesabınızı açmak ve bizi de takip etmek olsun: dribbble.com/UIX101

 

Dribbble
Dribbble

 

Kredi Kartı ile Ödeme

UI Göreviniz 🎯

Merhaba, #002 numaralı görevinize hoşgeldiniz!

Bugün portfolyonuza eklemeniz için göreviniz bir “Kredi Kartı ile Ödeme” sayfası veya uygulama ekranı oluşturmak. Dilerseniz hem masaüstü, hem de mobil ekranlarını beraber tasarlayabilirsiniz.

Bu, bir etkinlik ödemesi, alışveriş sitesi ödeme ekranı, abonelik, online bilet veya hayal edebileceğiniz herhangi bir şey olabilir.

 

İlham 🎨

Örnek çalışmalara göz atın:

Dribbble için https://dribbble.com/search/UI-002
Behance için https://www.behance.net/search/projects?search=UI+002

 

UIX101‘de her gün UI yapmaya değil, “UX için UI” yapmaya yönlendiriyoruz.

Unutmayın ki; portfolyonuza ekleyeceğiniz ve UX’i, yani Kullanıcı Deneyimini, gözeterek yapacağınız çalışmalar çok daha değerli olacaktır!

Çalışmanız aşağıdaki durumlardan biri veya birkaçı için çözüm üretebilir :

  • Pop-up anında ödeme ekranı. Ürünün hemen alımını daha da hızlandıracak bir çözüm isteniyor. “Hemen Satın al” tuşuna basılınca bir pop-up çıksın ve ödeme burada halledilsin.
  • Satılan ürün pahalı bir elektronik ürün. Bilgilendirme ve satın alım şartlarının mutlaka okunmasını sağlamak istiyoruz.
  • Bu, tarihin ilk online bilet ile satın alınabilen Uzay Yolculuğu projesi için. Ödeme ekranının zarif ve uzay temalı olması isteniyor.
  •  Mobil cihazdan hızlıca Çocuk Oyun Alanı için ödeme alınabilen bir ekran isteniyor. Abonelik şartı yok fakat Veli adı, telefonu ve çocuk adının mutlaka alınması gerekiyor. Her şey tek ekranda çözülsün isteniyor.
  • Postmodern bir sergi salonunun bilet alım ekranını tasarlayın. Olabilecek en minimal tasarımı istiyorlar.
  • Ödeme ekranı sadece siyah ve beyaz renklerden oluşsun. Karanlık tema da olabilir. Tercih tasarımcıya bırakılmış.

 

Kendinizi Zorlayın!

Bu tasarımı Skeuomorphism yaklaşımıyla yapmayı dener misiniz?

Skeuomorphism: Taklit nesne olarak da bilinen “skeuomorphism”, arayüz tasarımında fiziksel dünyadaki nesnelerin özelliklerinden yararlanmaya dayanır. Skeuomorphism, kullanıcıların arayüze daha kolay alışmasına yardımcı olan bir yaklaşımdır.

Skeomorphism
Skeomorphism

Paylaş ve Görünür Ol

Tasarımını Behance, Dribbble, LinkedIn veya Twitter’a #dailyui ve görev sıra numaranızla gönderin (örn. “#002 numaralı #UIX101 görevimi tamamladım. #002 #dailyui“)

 

Günün Ücretsiz Kaynağı

Mockup.photos 

Mobil veya masaütsü tasarımlarınızın gerçek cihazlarda nasıl duracağını görüp – gösterebileceğiniz şablonlar veriyor. Mockup.photos, dünyanın her yerinden bağımsız kreatifler tarafından oluşturulan yüksek kaliteli mockup fotoğrafları için çevrimiçi bir platformudur.

 

mockup.photos
mockup.photos

 

Kayıt Ol

UI Göreviniz 🎯

Merhaba, ilk görevinize hoşgeldiniz!

Herhangi bir servise ilk adım için bir “Kayıt ol” sayfası, modal, form veya uygulama ekranı oluşturun. Dilerseniz Hem Kayıt, hem Giriş ekranlarını beraber tasarlayabilirsiniz.

Bu, bir konser etkinliği, alışveriş sitesi, sosyal medya, yarışma kaydı, bir çekiliş veya hayal edebileceğiniz herhangi bir şey olabilir.

 

İlham 🎨

Örnek çalışmalara göz atın:

Dribbble için https://dribbble.com/search/UI-001
Behance için https://www.behance.net/search/projects?search=UI+001

 

UIX101‘de her gün UI yapmaya değil, “UX için UI” yapmaya yönlendiriyoruz.

Unutmayın ki; portfolyonuza ekleyeceğiniz ve UX’i, yani Kullanıcı Deneyimini, gözeterek yapacağınız çalışmalar çok daha değerli olacaktır!

Çalışmanız aşağıdaki durumlardan biri veya birkaçı için çözüm üretebilir :

  • Kayıt olacak kullanıcıların tercihen sosyal medya hesaplarıyla (facebook, twitter, vb) kayıt sürecini başlatmaları isteniyor. Zira giriş yapılacak uygulama daha sonra aktif sosyal medya kullanıcılarına özel bir kampanya yapabilir. Örneğin bu bir arkadaş bulma uygulaması ise, sosyal medya hesabından görsel ve kişisel bilgileri çekme yetkisi isteyebilir.
  • Dışarı açık, fakat sıkı giriş kontrolleri olması istenen bir kamu projesinin kayıt ve giriş ekranını tasarlayın.
  • Biometrik giriş tercihli bir Kayıt + Giriş Ekranı tasarlayın.
  • Sadece Davet Koduyla girilebilen kapalı bir sosyal grup için Kayıt ve Giriş Ekranlarını tasarlayın.
  • Tasarım yalnız ileri yaştaki kullanıcıların kullanımına özel bir proje için olsun.
  • Bir göz hastanesinin sürekli hastaları için oluşturduğu müşteri portalının giriş ekranını oluşturun. (İpucu: Kullanıcıların görme sorunları var)

 

Kendinizi Zorlayın!

Bu tasarımı Glassmorphism yaklaşımıyla yapmayı dener misiniz?

Glassmorphism : Kelime anlamı olarak Cam Biçimlilik anlamına gelir. Tasarımda kullandığımız objenin buzlu cam görünümünü taklit etmesi olarak ifade edebiliriz.

Glassmorphism

Paylaş ve Görünür Ol

Tasarımını Behance, Dribbble, LinkedIn veya Twitter’a #dailyui ve görev sıra numaranızla gönderin (örn. “İlk #UIX101 görevimi tamamladım. #001 #dailyui“)

 

Günün Ücretsiz Kaynağı

Gridzzly.com 

Tasarımlarını kağıt kalemle yapmayı sevenlerden misin? Kareli, çizgili veya noktalı; istediğin gibi özelleştirip çıktı alabileceğin tasarım kağıdını kendin tasarla!

gridzzly.com