
Adobe XD'de arayüz tasarımına başlamadan önce hangi türden cihazları seçebileceğimizi ve tasarımımızın şekline göre nasıl bir ızgara sistemi kullanabileceğimizi bu videoda anlattım.
Arayüz tasarımında tipografi ve doğru yazı karakteri kullanımı hayati önem taşımaktadır. Bu noktada gerek Google Fonts gerekse bilgisayarımızda yer alan diğer yazı karakterleri üzerine birtakım açıklamaları bu videoda anlattım. Ayrıca bir haber sitesi tasarladığımız için okuma deneyimine katkı sağlayacak oldukça önemli tipografi bilgilerine yer verdim.
Bir haber sitesini ziyaret ettiğiniz zaman yüzlerce fotoğrafla etkileşim kurmaya başlarsınız ve bu fotoğraflar haber başlığı niteliğindedir. Ağırlıklı olarak fotoğraflar üzerinden hareket ederiz ve bu noktada okuma deneyimine katkı sağlayacak doğru fotoğraf kullanımı oldukça önem arz eder. Bu derste arayüz tasarımlarının sunumlarında ne tür fotoğrafları tercih etmemiz gerektiğine dair önemli bilgilere yer verdim.
Header tasarımın en üst noktasıdır logo ve yan menülerin yer aldığı şerit olarak bilinir. Sitenin tüm navigasyonu bu şerit üzerinden gerçekleşmektedir.
Manşet ya da Slider alanı bir haber sitesini ziyaret ettiğimizde karşımıza çıkan en dikkat çekici alandır. Bu alan sitenin diğer alanlarına göre hiyerarşik olarak daha fazla öne çıkmakta ve okuyucuyu buradan yakalamaktadır.
Birçok haber sitesinin yazar kadrosu vardır. Arayüz tasarımında yazarların fotoğraflarının net olması, ünvanları ve son yazdıkları yazılar gibi önemli detaylar yer almaktadır.
Haber listesi standart bir haber dizisidir. Sitenin genelinde bu oluşturduğumuz listeleme şekli kullanılır.
Fotoğraf ve Video Galerileri haber sitelerinde hiyerarşik olarak genellikle manşetlerden sonra en çok dikkat çeken alan olarak bilinir. Videolu haberler ya da sadece fotoğraflardan oluşan haberler bu kategoriler altında listelenmektedir. Multimedya öğeleri içerdiği için birçok haber sitesi fotoğraf ve video sunumlarında koyu arkaplanları tercih etmektedir.
Footer alanları sitenin bittiği noktayı temsil etmektedir. Sitenin künyesi, kategorileri, abonelikleri ve çeşitli iletişim bilgilerinin yer aldığını alandır.
Yan menü mobil uygulamaların ve mobil arayüz tasarımlarının vazgeçilmezidir. Kategorileri alt alta dizip yer kaplamak yerine onları bir menü içerisine yerleştirmek kullanıcı deneyimini destekler niteliktedir. Sitenin genel navigasyonu yan menüler vasıtasıyla gerçekleştirilir.
Haber detay sayfası bir haber sitesinin bel kemiğidir. Ziyaretçi haber sitesini taradıktan sonra nihayet haberini okumaya karar verir ve bu sayfaya yönelir. Bu sayfada okuma deneyimi, paylaşma ve yorum yapma gibi çok önemli detaylar yer almaktadır.
Yorum Yapma ve Okuma alanları ziyaretçilerin site ile etkileşim kurduğu özel bir yerdir ve bu noktada iletinin kaliteli gerçekleştirilebilmesi için son derece sade ve okunaklı bir alan tasarlanmalıdır.
Fotoğraf galerisi ve video içeren haberlerin detay sayfalarını tek videoda toplayarak tasarladım. Özellikle fotoğraf galerisindeki ikili haber örneği bu dersin önemli konularından bir tanesidir.
Bu derste tasarladığımız tüm sayfaların butonlarını biribrine bağlanması suretiyle aktif hale getiriyor ve finalde de prototipimizi deneyimliyoruz.
— Bu kurs tam olarak program öğrenme kursu mudur?
Hayır. Bu kurs Adobe XD programı vasıtası ile arayüz tasarımı ilkelerini dikkate alarak bir tasarımın nasıl ortaya çıktığını görebileceğiniz, kullanıcı deneyimi ve tipografi arasındaki okuma deneyimi hassasiyetlerini en ince ayrıntısına kadar deneyimleyebileceğiniz çok önemli bilgiler içeren ve aynı zamanda programın da tüm özelliklerini kullanarak size tam anlamıyla Adobe XD'yi kavratan bir kurstur.
— Photoshop ve Illustrator varken niçin Adobe XD'yi tercih etmeliyim?
Adobe XD'nin ortaya çıkmasıyla birlikte Adobe programlarında arayüz tasarımında bir prototip furyası ortaya çıktı. Artık tasarladığımız sayfaları sadece .JPEG ya da .PNG olarak görmüyor aynı zamanda bu sayfalar arasında rahatlıkla gezip butonları aktif hale getirebiliyoruz. Elbette programın tek avantajı prototip oluşturabilmesi değil aynı zamanda arayüz tasarımında işimize yarayacak mükemmel araçları da barındırıyor olması.
Adobe XD'den önce arayüz tasarımları Adobe Photoshop ve Adobe Illustrator vasıtasıyla yapılabilmekteydi. Fakat bu programlar tamamiyle arayüz tasarımı için hazırlanmadığından dolayı içerisindeki birçok karmaşıklık ve bir şeyi yapmanın birden fazla yolu olması, arayüz tasarımını hem sıkıcı hem de hantal hale getiriyordu. Adobe XD ise tamamen arayüz tasarımına yönelik hazırlanmış bir programdır ve bu yüzden içerisinde sizi meşgul edecek ya da kafanızı karıştırıp ne işe yaradığını anlayamayacağınız araçlar barındırmamaktadır. Üstelik tasarımınızı sonlandırdığınızda karşı tarafa görsel gönderimi yapmaksızın Adobe hesabınızla link oluşturup bu link üzerinden tasarımlarınızı kitlelere deneyimletebilirsiniz.
— Peki normal bir kurumsal site yerine niçin haber sitesi arayüzü tasarlıyoruz?
Arayüz tasarımı denildiği zaman yapılması en zor olan şeylerden bir tanesi bir haber sitesi arayüzü tasarlamaktır. Haberlerin okutulmasından galerilerin gezilmesine, manşet alanlarının oluşturulmasından site içerisindeki navigasyonu belirlemeye kadar çok ince detaylar içermektedir. Bu detayların üstesinden gelebilen tasarımcılar için kurumsal ya da bireysel sitelerin arayüz tasarımını hazırlamak hiç de zor değildir. Üstelik haber siteleri birçok sayfa içermektedir. Yoğun sayfa trafiğinin arasında navigasyonu sağlayabilmek de bu noktada oldukça önemlidir. Bu kurs sayesinde Adobe XD'ye tamamıyla hakim olacak ve sonrasında hayal gücünüz ile baş başa kalacaksınız.