Web Tasarım ve Dijital Tasarımın Temelleri 2 | Harika Bir Arayüz Tasarlamak İçin 5 Altın Kural

Web tasarım ve dijital tasarımın temelleri serisinin ikinci ve son bölümüne hoş geldiniz. Eğer henüz ilk bölümü izlemediyseniz web siteleri nasıl çalışıyor, nasıl tasarlanıyor gibi soruların cevabını almak için bu linkten videoyu bulup izleyebilirsiniz.

Bu bölümde ise harika bir arayüz tasarlamak için 5 altın kuraldan konuşacağız.

1- IŞIK YUKARIDAN GELİR

İlk kuralımız ışığın yukarıda geldiğini hatırlamak.

Işık öylesine istikrarlı bir şekilde yukarıdan gelir ki biz onun hiç neden öyle olduğunu düşünmeyiz bile. Bulunduğunuz odada ışık genellikle tavanda olur, gündüzleri Güneş bizi yukarıdan aydınlatır. Yani işin doğalı budur, ışık hep yukarıdan gelir ama önemli olan bunu hatırlayıp, tasarımlarınıza yansıtabilmenizdir. Işık yukarıdan geldiği için nesneler üzerinde bazı gölgeler ve aydınlık yerler oluşur. Bu kısımlar ile karşıdaki nesneyi daha iyi tanımlayabiliriz. Yüzeyinin ne kadar pürüzlü ya da pürüzsüz olduğunu, hatta bazen yumuşalık sertlik gibi özellikleri bile ona dokunmadan ışığın yarattığı etkilerle anlayabiliriz.

Yukarıda basit mavi bir buton tasarımı var değil mi? Fakat bu butonun alt kısmında kullanılan koyu bir çizgi ve gölgesi ile beynimiz bu butonu çıkıntılı bir nesne olarak algılıyor. Bu butona tıkladığımızda ise butonun tamamı gölgede kalmış durumda yani içine göçük bir buton algısı yaratılıyor.

Bir sonraki örneğim Apple firmasının IOS4 tasarımından geliyor. Butonların önden görünümleri size tanıdık geliyordur. Bu yıllarda glass icon denilen cam gibi parlayan ikonlar çok modaydı ve apple da arayüz tasarımlarında bol bol kullandı. Solda bulunan mini ikonlara bakacak olursak yine ışık yukarıdan gelmiş cam gibi üst kısımları parlatmış ve alt kısımlarda bir gölge oluşmuş, tam ortada parlaklık oval bir şekilde kesiliyor bu bize ikonların bombeli bir yapıda olduğunu algılatıyor. Yani beynimizde oluşan resim tam olarak sağ alttaki görüntü.

Açma kapatma için kullanılan kaydırmalı butona gelecek olursak işler biraz karışık görünüyor. Hani ışık yukarıdan gelirdi de üstü aydınlatırdı? Evet üst kısım gölgeli ise beynim bunu şöyle düzeltecek çünkü ışık yukarıdan gelir kuralını varsayılan olarak düşünüyor. Bu buton demekki içeri doğru göçük bir şekilde o yüzden çıkıtı yukarıda kalmış ve gölgeyi bu şekilde düşürmüş. Yine beynimiz sağ üstteki görüntü ile bize bu butonu algılatıyor.

Siz de tasarımlarınızda gölgeleri ustaca kullanmak için bol bol gözlem yapın etrafınıza daha dikkatli bakın oluşan gölge ve yansımaları tanımlamaya çalışın ve tasarımlarınıza uygulayın.

2- ÖNCE RENKSİZ TASARLA

Baskıya aşina bir tasarımcıysanız matbaanız ile aranızda mutlaka renk muhabbeti geçmiştir. Matbaalara göre ne siyah ne de beyaz renkten sayılmaz. Beyaz kağıdın rengidir yani renksiz renk, yani hiç bir rengin baskı sırasında renk püskürtülmeyeceği renk… Biliyorum konuya vakıf olmayanlara çok yabancı geldi bu söylediğim. Gazetelerde hiç bembeyaz bir renk gördüğünüz oldu mu? Hafızanızı zorlayın biraz; beyaz renk yerine o gri gazete kağıdının rengini görürsünüz yani o kısım aslında renksizdir. Siyaha gelecek olursak onu da renkten saymaz matbaalar. Tek renk bir tasarım derseniz siyah beyaz haricinde bir renk daha var diye algılayacaklardır. Siyah anahtar renktir. Yani zaten var olması gereken bir renk gibi davranırlar, ekstradan sayılmaz. O yüzden burada söyleyeceklerim kafanızı karıştırmasın. Önce renksiz tasarla derken asıl demek istediğim siyah beyaz ve grinin tonları dışında renk kullanma!!! demek istiyorum. Konu renge gelmişken Bir Renk Tut adında bir video daha çekmiştim. Tasarımlarda kullanılacak renkler ve renklerin oluşumu ile ilgili daha ayrıntılı bilgilere o videodan/yazıdan ulaşabilirsiniz.

Siyah-Beyaz çalışmak sizi öncelikli olarak tasarımın ana hatlarına odaklayacaktır. Renksiz tasarlamak sizi; aralıklar, ölçüler ve sayfa düzeni gibi şeyler üzerinde düşünmeye zorlar. Bu da temiz ve sade tasarımın temelidir.

Renksiz tasarım daha henüz üzerinde herhangi bir rengi yokken bile çok güzel görünüyorsa, zaten tasarım bu haldeyken bile bir albenisi varsa siz bu işi çözmüşsünüz demektir.

Eskiz çizmenin önemini anlata anlata bitiremedim biliyorum ama cidden çok önemli. Tasarım dünyaya gelmeden evvel çizdiğiniz bu eskizler sayesinde tasarım planınız tıkır tıkır işler ve daha sağlam adımlarla ilerlersiniz. Eskiz çizmek renksiz tasarlamanın adımlarından ilkidir.

Renksiz tasarladıktan sonra tasarımınıza renk eklemek çok daha kolay. Bir renk tut videosunda bahsettiğim konulardan biriydi ama hızlıca burada da bahsetmek istiyorum. Siyah beyaz tasarıma ek olarak bir renk ya da aynı rengin tonlarından oluşan renkler eklemek çok daha basit. Bu rengi de tabi kafamıza göre seçmiyoruz. Ekleyeceğiniz rengi bir amaca hizmet edecek şekilde seçmek lazım. Firmanın ciddi bir duruşu varsa mavi, yeşil gibi soğuk renkler kullanabilir ya da daha eğlenceli bir duruşları varsa sıcak renklerden yararlanabilirsiniz. Ya da soldaki tasarım gibi logodaki kurumsal kimlik renklerini kullanabilirsiniz.

Bu renkleri arayüzde dikkat çekmek istediğiniz yerlere yerleştirmelisiniz. Üye Ol butonu, satın al butonu gibi…

Her zaman sadece tek renk kullanacaksınız diye bir kaide yok. Renksiz tasarlamanın da önemini anlamanız adına şu örneğe bir bakalım. Bu online kahve siparişi verebileceğiniz bir uygulama. Gördüğünüz gibi tüm adımlar tek tek renksiz olarak tasarlanmış. Program hataya düşerse  dahi hangi sayfa yeniden yönlendirme yapacak şimdiden belli. Giriş sayfası, üyelik sayfası, satın alma sayfası ve bu sayfaların birbirleri ile  ilişkileri açık bir şekilde planlanmış durumda. Artık herşey açıkça belli olduğuna göre renklerinizi de ekleyebilirsiniz.

Tasarımın son hali iki ana renkten ve o renklerin tonlarından oluşuyor. Dikkat ederseniz yumuşak renkler kullanılmış yani doğadan renkler. Tasarıma nar çiçeği ve çikolata kahvesi hakim. Bu renklerin daha koyu ve açık tonları ise gölgelendirme ve yansıma için bölgelerinde. Sonuç gerçekten çok profesyonelce ve kullanışlı duruyor.

3- BEYAZ ALANI İKİ KATINA ÇIKART

Diğer kuralımız müşterilerin hani o hiç hoşlanmadıkları beyaz, boş alanlar hakkında.

– Bu tasarım biraz boş mu kalmış sanki! Ne dersiniz biraz şuralara resim yazı falan mı eklesek?-

Hayır efendim eklemeyelim. Biraz tasarımcıya güvenin ve bırakın o boşluklar boşluk olarak kalsın. Hele bir arayüz tasarımı yapıyorsanız mutlaka boşluklardan bol bol yararlanın.

Yukarıdaki tasarımlara daha dikkatli bakarsanız boşlukların çok ustaca kullanıldıklarını görebilirsiniz. Tipografik ögeleri ve  öge gruplarını birbirinden ayırmak için kullanın boşlukları. Hatta satır aralarını normalinden daha uzak yaparak okumayı bile kolaylaştırmış bu boşluklar. Boşlukları kullanırken elinizi korkak alıştırmayın hatta iki katına çıkartın.

4- GÖRSEL METİN FONT KOMBİNASYONLARI

Özellikle web arayüz tasarımlarında sadece yazılar ve yazı grupları yok aynı zamanda görsellerde var, bu görseller ile yazıları doğru kombinasyonlarla kullanmak gerek, değilse yazısı okunamayan bir arayüz ortaya koymanız olası.

Yazıya da yazı deyip geçmemek lazım fontların gücünden yararlanarak daha güçlü tasarımlar yapabiliriz.

Fontlara geçmeden evvel yazı ve görsel kombinasyonlarına değinelim.

Yazıları görsellerin üzerinde okunurluluğunu bozmadan kullanmak için bir kaç yöntem var.

1- Bunlardan ilki resmi tüm arkaplana yaymak ve üzerinde kullanacağınız yazının rengine göre zıt renkli bir filtre uygulamak. Eğer yazınız siyahsa beyaz, beyazsa siyah gibi. Bu websitedeki arkaplan resminde aslında siyah renkli %40 transparan bir filtre kullanılmış. Böylece masadaki beyaz kağıtların üzerine gelen beyaz yazılar hala okunaklı durumdadır.

2- İkinci yöntem yazıları renkli bir kutu içerisinde yazmak böylece arkaplan resmine hiç bir filtre uygulamaya gerek kalmadan yazıyı okunaklı hale getirebilirim. Burada kullanılan metin kutusunun rengi yarısaydam seçilmiş fakat siz tasarımınıza göre dilerseniz %100 opak bir renk de seçebilirsiniz.

3- Bir diğer yöntem ise görseli bulanıklaştırmak. Bu yöntemi Apple iPhone ve iPad’lerde flat tasarıma geçtikten sonra sık sık kullanmaya başladı.  Görsel üzerinde kullanılan yazıları daha okunaklı yapabilmek için, yazının altına bir bulanıklaştırma filtresi uygulamanız yeterli.

4- Bahsedeceğim son yöntem ise zemin karartma yöntemi. Bunun için resmin tamamıma bir filtre uygulamak yerine yazıya gelen kısma alttan yukarı ya da tersi yukarıdan aşağı doğru gradyenli bir filtre uygulanır. Dikkat ederseniz elastica websitesinin kullandığı yöntem de benzer. Alttan resmin merkezine doğru açılan (yani transparanlığı artan) bir filtre uygulanmıştır. Resmin en altı daha koyu iken ortaya doğru o koyuluk kaybolmaktadır. Aynı işlem menünün olduğu bölge olan en üstte de kullanılmıştır.

Şu anda size sağdaki fontalar bir anlam ifade etmiyor olabilir ya da hepsi birbirine benziyor gibi gelebilir ama inanın bir font bir sitenin tüm görünümünü değiştirebilir. Yani bir font, tasarımınızı vezir de edebilir rezil de… Fakat bilmeniz gereken daha önemli bir konu var ki o da fontların telif hakları kapsamında kullanıldığıdır. Diyelim ki internetten bilmediğiniz bir siteden font indirdiniz ve siteniz için kullandınız. Eğer fontunuz creative common (yani kamuya açık) lisans değilse font sahibinin sizi mahkemeye verme ve tazminat isteme hakkı bulunur. Hatta bazı durumlarda hapis cezası bile verilebilir. Creative Common ile ilgili ayrıntılı türkçe bilgi almak için creativecommons.org.tr adresini kullanabilirsiniz.

Lisans sorunu çıkmadan font kullanabileceğiniz web siteleri ise şunlar: gönül rahatlığı ile Google Fonts, Font Squirrel ya da Typekit kullanabilirsiniz. Bu font siteleri size 100% ücretsiz lisanslı kullanım sunar.

Web sitelerinde en çok kullanılan tırnaksız fontlar ise Ubuntu, Open Sans, Montserrat, Raleway, Cabin, Lato, PT Sans gibi fontlardır.

5- SANATÇI GİBİ ARAKLAYIN

Bu bölümün başlığı, çok severek okuduğum bir kitabın adından alıntı. Austin Kleon’un ‘‘Bir Sanatçı Gibi Araklayın’’ kitabını türkçe olarak da bulabilirsiniz. Kesinlikle tavsiye ederim çok eğlenceli ve elinize alıp aynı gün bitirebileceğiniz türden, tasarımlara farlı açıdan bakmayı öğretecek bir kitap.

Eğer okursanız, araklayın derken ne demek istediğimi daha iyi anlayacaksınız. Gözünüz sürekli yeni tasarımlarda olsun. Her gün en az yarım saat sadece piyasada çıkmış yeni işleri izleyerek geçirin bu size zengin bir bakış açısı katacaktır. Ve unutmayın ki yeni bir tasarımcıysanız taklit etmeden daha iyisini yapamayacaksınız! Önce beğendiğiniz işin aynını ortay koymaya çalışın. Bunu kendiniz için yapın, paylaşmayın ya da paylaşırsanız orijinal işe ve sanatçıya atıfta bulunun. Değilse gerçekten birinin tasarımını çalmış muamelesi görebilirsiniz. Siz o işin aynını yaptıktan sonra ancak, üzerine bişeyler koyabilir hale geleceksiniz. O tasarımı taklit ederken yeni fikirler ile donanacaksınız ve buna kendiniz bile inanamayacaksınız.

Sanatçı gibi araklamak, var olan bir tasarımdan ilham alarak tamamen yeni bir tasarım ortaya koymaktır. Bir tasarımın aynını kopyalamayın ama bu tasarımdan esinlenmekten çekinmeyin. Beats, Uber, Paypal, Airbnb gibi markaların logolarının bile benzersiz olmadığını, bir yerlerden esinlenerek yaratıldıklarını söylesem!!! O yüzden siz de benzersiz olmak için çok kasmayın derim.

Kendinizi geliştirmek için Dribbble, PTTRNS ve Awwwards gibi web sitelerine üye olun ve bol bol yeni tasarımlara bakın.

Bu anlattıklarımdan sonra hiç bir tasarıma eskisi gibi bakamayacağınızı biliyorum. Artık gözünüzle gölgeleri, yazıları okutmak için kullanılmış teknikleri ayıklayıp duracaksınız. Hatta bazen bir yerlerde birbirine çoook benzeyen tasarımlar görmeniz bile mümkün…

Videomu beğendiyseniz beğen butonuna basmayı, sosyal medyada paylaşmayı ve henüz abone değilseniz abone olmayı unutmayın. Bana instagramdan ulaşmak için @gamzegenccelik adresi kullanabilirsiniz.

Sonraki yazıda görüşmek üzere…