UI ve UX Tasarım Örnekleri
Ui-Ux (Kullanıcı Deneyimi – Kullanıcı Ara yüzü) nedir bu konuya bir önceki yazımda değinmiştim. Okumak isteyenler linke tıklayabilir. (Tıklayınız)
Varsayalım ki elinizde müşterinin istediği tasarım için tüm bilgiler mevcut. Nasıl başlayacaksınız. Şahsi tavsiyem ilk önce kağıt üzerinde denemelere başlayınız. Bu ne kadar çizim yapabileceğinizi görebilmenizi sağlar. Daha sonra ilgili ürün ya da istenen tasarım üzerinden bir kaç web sitesi ve uygulama inceleyiniz. (Örneğin; Kafe gibi bir yerin uygulamasını ve web sitesini tasarlayacaksınız dünyaca ünlü kahve satan şirketlerin web sitelerini ya da uygulamalarını inceleyebilirsiniz. Daha sonra kağıt üzerine çizdiğiniz tasarım ile karşılaştırın. Yanlışlarınız neler?, sizin düşündüğünüz renkler neler?, Onların yaptığı renkler neler?, Hangi pastel renkler hangi tonlar da kullanılmış?, Sadelik?, Ergonomiklik? vb.. Tüm bunların cevaplarını bulduktan sonra aklınızda canlandırdığınız tasarımı kağıda dökmeye çalışın. Daha sonra bu prototipi tablet ya da bilgisayar da çizmeye çalışın. Her bir şeyler çizmeye başladığınız da aklınıza gelen tasarımları katman katman ekleyin ki hangi katman ile daha uyumlu oluyor çizimler karşılaştırma yapabilin. Ayrıca müşteriye her zaman en az iki örnek ile gitmek işinizi kolaylaştırabilir ya da müşterinizin kolay karar verip onaylamasına yardımcı olabilir.
Üniversitelerin çoğunlukla bilgisayar programcılığı ya da grafik tasarım bölümlerinde photoshop dersinin yanı sıra web tasarım dersleri de olabiliyor. Bu ders Ui-Ux ‘in temel derslerindendir. Ezber sınavlarının değil de proje odaklı ders notu verilince ezber yapmak yerine dersten güzel not alabilmek için proje odaklı oluyorsunuz ve bu da sizi iş hayatına bir adım yaklaştırıyor. Şuna inanıyorum ki en güzel ezber kendi kendine deneyerek ve biraz da zorunlu olarak yapılan deneyimler daha akılda kalıcı oluyor. Üniversite de tasarladığım örneğim aşağıdadır. Biraz bunun üzerinden konuşalım;
Film Şirketi Sitesi
Homepage
Çalışma film tanıtımı ve film ile ilgili müzik, film karakterlerinin olduğu ürünleri inceleyebilmek üzerine tasarlandı. Film şirketinin adının HalloweenF olması üzerine siyah, antrasit ve turuncu renkleri kullanıldı. 3 dil şartı eklendi. Şirketin sosyal medya linkleri eklendi. Anlaşılır bir yazı tipi kullanıldı. Ergonomiklik (anlaşılır bir ara yüz) kullanıldı.
Movies
Filmler (Movies) butonuna tıkladıktan sonra yukarıdaki ekran karşımıza geliyor. Daha sonra “Hobbit” filmi seçildi, Videos kısmına tıklanıldı ve aşağıdaki ekran geldi karşımıza. Buradan film ile ilgili fragmanlar izlenebilir.
Şirkete iş başvurusu yapmak isteyenler için ise “Careers” butonuna tıklıyoruz ve aşağıdaki ekran karşımıza geliyor. Formu doldurduktan sonra başvurunuzu tamamlayabiliyorsunuz.
Eksikler ve Öneriler Nelerdir?
Gel gelelim şu an gördüğüm eksiklikler ve ödev ile ilgili başıma gelenler neler 🙂 Öğretmenimden aldığım en büyük ders şu oldu: “Web sitesi sade anlaşılır ve daha ergonomik olmalıdır.” Kendisi büyük şirketlerden bir kaçında müdürlük yapmış ve tecrübe dolu sektörden bir insandı. Katkıları paha biçilemez 🙂 Sayın Kemal Akgün hocama buradan saygılarımı gönderiyorum, çok değerli bir insandır.
Şu anda da bakınca eksiklerimi net görebiliyorum. Menü ve şirket yazı tipi bana profesyonel gelmiyor. Daha keskin yazılar olmasını tercih ederdim. Fakat asla şunu demiyorum arkadaşlar yanlış anlaşılmasın! “Bu tasarımı olmamış!”. Neden? Çünkü milyonlarca müşteri tarzı var. Bu tasarımı bir çok kişiye gösterdiğimi hatırlıyorum. Arkadaşlarım, sektörden insanlar vs. Birçok kişi beğendi. Ama herkesin de eklemem gereken önerileri oldu. Değiştirmem gereken renkleri söyleyen oldu. Bu demektir ki tasarımın eksiksiz olması sizin müşteri ile ilgili doğru iletişiminize bağlıdır. Sorularınız ne kadar çok ve net sorular olursa ve bunları güzel not alıp tasarımınızı sunarsanız müşterinin istediğine o kadar yaklaşırsınız.
Öneri sunabileceğim şeylerden biri eğer renk gözünüz yoksa hazır paletlerden yararlanın. İnternet dolu bunlarla. Pinterest kaynıyor 🙂 Web siteleri inceleyin. Çizin. Beğendiğiniz web sitelerini kayıtlayın. Siz olsanız nasıl tasarlardınız notlar alın. Tüm bunlar deneyimlerinizi artıracaktır. Aşağıda size yakın zamanda tasarladığım bir Kahve mağazasının uygulama tasarımını bırakıyorum. iPad Pro – ProCreate ile çizilmiştir.
Yazıya son noktayı bir video linki bırakarak yapıyorum o halde. Umarım yazı yeterince yararlı olmuştur. Tasarımı adım adım izlemek için link’e tıklayarak izleyebilirsiniz. (tıklayınız)