Selam, Mustafa‘nın “Otostopçunun Galaksi Rehberi”ni kullanarak öğrenciler/yeni mezunlar veya kendini UX alanında geliştirmek isteyen herkes için yol gösterici mini bir website’yi nasıl yaparız sorusuyla yola çıktık. Yazının geri kalanında Junior UX Designer’ı çok kullanacağım için JUXD olarak kısaltma kullanacağım.
Şimdi size 5 günlük maceramızden bahsedeyim, keyifli okumalar.
İlk günümüze fikir geliştirme ile başladık. Mustafa, ben ve Caner böyle bir mini siteyi nasıl görmek isterdik sorularıyla hayal gücümüzü genişletmeye ve kutunun dışına çıkmaya düşündük. Daha sonra 1 baz olmak üzere 4 farklı JUXD yolculuğu ve her yolculuğun altında 3'er baz yetenek bulunmakta.
10'larca Post-it kullanarak yapıyı kendimiz için daha görsel hale getirdik. Bu sırada “Bunu yapsak nasıl olur?” “Öğrenciyi bu şekilde yönlendiririz” gibi fikirlerlerin oluşmasını sağladık. Post-it kullanarak hem ana yapımızı oluşturmuş olduk hem de dışarıdan alacağımız desteği planlamamızda büyük rol oynadı.
Genel akışımızı çıkarttıktan sonra iş bölümlendirmemizi yapıp günü bitirmiş oldu. Sürecimiz, benim benchmark ve wireframing yapmam ile başlayıp eş zamanlı olarak Tuğba’nın hikayenin bizim ve rehberin bütünsel hikayesini yazmasıyla başlıyor. Wireframing tamamladıktan sonra Caner ile birlikte UI kararlarını vermemizle beraber ilüstrasyonları yapacak olan arkadaşımıza briefi gönderiyoruz.
Tabiiki illüstrasyonları beklerken boş durmadan direkt olarak Umut ile birlikte hazırladığımız komponentleri Webflow üzerine geçiriyoruz. Aşağıdaki görselde daha detaylı olarak inceleyebilirsiniz. Yazıya dökünce biraz karmaşık oldu :)
Biz tasarımcıların hayatını kurtaran şeylerden biri. Çünkü sayfanın yapısını tasarlarken eksik yönlerimizi görmemiz pek mümkün değil.
Üstte göreceğiniz gibi aklımda olan sayfa akışını Sketch üzerinden herhangi bir UI kararı vermeden fakat sayfanın genel akışı ve dili hakkında bilgi vermesini istediğim bir çalışma hazırladım.
Caner ve Mustafa abiyle beraber yaptığımız toplantıdan sonra sayfaya ilk girecek kişinin sayfada ne yapacağını anlamayacağını düşündüğümüz için Başlangıç senaryosunu ve altta bulunun 4'lü yapıyı bir arada verme kararı verdik.
Bu sayede kullanıcı daha belli bir yere kadar çalıştıktan sonra çıkıp geri geldiğinde kaldığı yetenek kartına ya da kariyer yoluna kolaylıkla gidebilecekti.
Bir eksik olan yer ise sayfada kullanıcıların yaptıklarını bize göndermelerini istediğimiz yapıydı. Bu rehber sürecinde kullanıcıların okuyup izledikten sonra pekiştirmesi amacıyla onlardan bir dokümanı yapmalarını ve bize göndermelerini bekliyorduk.
Ayrıca Mustafa yapılan çalışmalardan bazılarına UX Alive Berlin’e bilet hediye edecekti :)
UI kararlarını verme aşamasında illüstrasyonlarımızın nasıl gözükeceğini yetenek kartlarında ve yazılarda hangi yazı tipi dilini kullanacağımızı önceden belirledik. Çünkü Sketch üzerinde çizim yapmaya başlamadan önce bu kararların verilmesi ve Sembol’lerin oluşturulması hem yaptığımız işe hız ve sonradan bir tipografinin değişme durumdan tek tek değiştirmek yerine toplu halde değiştirmek iş yükümüzü azalttı.
Bu konuda Uber 77 Things gibi kaynakları incelemenizi tavsiye ederim.
Yukarıda gördüğünüz üzere Webflow’a geçirilirken Umut’un class yapısını kolay kurması ve elementleri tıkır tıkır eklemesi için kullandığım text renklerini ve hangi header’de hangi fontu kullanacağını göreceği bir sheet hazırladım. ~15–20 dakika alan bu çalışma developer arkadaşın daha hızlı çalışmasını sağladı.
İllüstrasyonları yapacak arkadaşımıza hangi tarzda ve hangi boyutlarda olacağı ve istediğimiz tarzı en ince detayına kadar yazıktan sonra arkadaşımızdan örnek çalışmaları bekledik.
İstediğimiz illüstrasyonu ne kadar detaylı -renkleri, konuştuğu dil gibi verebildiğimiz kadar detayı- bilgi verirsen karşılıklı daha kolay bir iletişim ve hedefimizden/planladığımız süreçten sapmamak için en verimli yöntemlerden bir tanesi.
Geldik en keyifli adımımıza; UI. Okulda ve Caner’den öğrendiğim temel tasarım yeteneklerini kullanarak konsept sitemizin final nasıl gözükeceğini tasarlamak gerçekten çok keyifliydi. Hala devam eden okul hayatımda ilk sınıflarda genelde konsept projeler gerçekleştiriyordum. Hayal gücümüzün, düşüncelerimizi ve zevklerimizi yansıttığımız projeler çıkartıyorduk. Fakat şuanda buzdolabı, çamaşır makinesi gibi sıkıcı projeler, hayata geçirilmesi için kalıbın sınırlarından çıkamadığınız projeler yapıyoruz.
İşte bu aşamada Galaksi Rehberi gibi bir konsept proje yapmak bir yandan zorlayıcı bir yandan zevkli bir süreçti.
Bu aşamada Mustafa, Caner, Umut ve ben akışın nasıl olacağı, bu rehberi takip edecek insanların nasıl dosya yükleyecekleri konusunda uzun toplantılar gerçekleştirdik.
Tasarımı Sketch üzerinden yaptım. Bir önceki Arpa Suyu çalışmamda olduğu gibi komponentlerin kullanımı ve Style Sheet’in önceden hazırlanmış olması UI sürecini büyük bir ölçüde hızlandırdı. Ben bir yandan çizerken bir yandan da Gizem Webflow üzerinden kod’a dönüştürüyordu.
Daha detaylı UI çalışması için Arpa Suyu projemi inceleyebilirsiniz.
Temel Tasarım eğitimi alırken Ersegün hocamın bana söylediği iki çift söz vardı; “Modellemeyi bilmiyorsan modellemeyeceksin” ve “Eğer tasarımını bir CAD programı üzerinden yapacaksan o programın yeterlilikleri kadar tasarlayabilirsin.” Bu sözleri duymak beni derinden yaraladığı için hayal gücümü ve tasarım yeteneklerimi öldürmemek için mümkün olduğunca eskizleri elimle yapmaya başladım.
Eğer konsept, prototip 1–10 sayfa aralında bir web sayfası yapacaksanız Webflow bu konuda elinizi çok hızlandıracaktır. Portfolio, ajans siteleri, tanıtım sayfaları gibi çok fazla bulunan template’leri kullanarak hızlı bir şekilde hayata geçirebilirsiniz. Ama Webflow üzerinden tasarım yapmak çok sancılı bir süreç ve tek tip gözüküken siteler yapacağınızı düşünüyorum.
No-Code platformlara karşı olmamakla beraber her ay bu yapıya para vermek zorunda olmak ve tasarım yeteneklerinin gelişmesini beklemek beni bu platformlardan uzak tutuyor. Ama gelecekte Framer X’in yapmaya çalıştığı sistem çalışırsa front-end’çi arkadaşlara görüşürüz demenin ya da UX/UI ünvanın altında birçok yazılımcı arkadaşımızı görüyor olacağız.
Bu süreçte Gizem’in canını en çok sıktığım kısma geldik. Yukarıda bahsettiğim gibi Webflow tasarımı %100 geçirmenizi sağlamadığı için, gün içerisinde 3–4 kere revize gönderdiğim ve Gizem’in gün içerisinde o hataları düzeltti. Aslında direkt yazılımcı arkadaş ile çalışsak 2–3 gün sürecek revize işleri Gizem ve Webflowla beraber gün içerisinde halledebiliyorduk.
Revizeleri önce defterde elimle çiziyordum. Daha sonrasında linkleri ve kullanılacak komponentleri Gizem’e gönderiyordum. Gizem’de kafasına oturmayan ya da fiziksel olarak yapılmayan işleri bana söylüyordu. Örneğin side-menu kısmını sabahtan tasarladık, öğleden sonra son revizileri yapıp tamamladık.
Başta İTÜ Endüstri Ürünleri Tasarımcısı arkadaşlar olmak üzere tüm İTÜ’lü arkadaşlarımızı kulübümüzde görmek isteriz. Entas 4. sınıf olan 7 arkadaşımız ile kurmaya çalıştığımız kulübümüzde öğrendiğimiz her şeyi -temel tasarımından araştırma yöntemlerine, arayüzlerden trendlere kadar- paylaşacağımız ve gelecekte bu sektörde çalışmayı isteyen arkadaşlar için temel bilgileri edinecekleri bir yapı kurmaya başladık.
Kulüp tüzüğü ve itüUX branding’i yazmamızda yardımcı olmak isteyen herkesin benimle iletişimde kalırsanız çok sevinirim.
Ayrıca her tasarım alanından -UX, UI, iXd, Research- profesyonel tasarımcıları da bizimle tecrübelerini paylaşmalarını çok isteriz!
Sayfaya ulaşmak için buraya tıklayabilirsiniz.
Yazımı okuduğunuz için teşekkürlerimi sunuyorum. Projede emeği geçen Mustafa Dalcı, Caner Aras, Umut Kızılışık, Tuğba Işık, Kıvılcım Çağatay, Berkan Sarıçam, Gizem Uçar ve diğer arkadaşlara sevgilerimi iletiyorum. İyi günler dilerim.
-min.jpg)
