29 Mart 2016 - No Comments!

Arayüz Tasarımı Temelini Oluşturan 3 Madde

Arayüz tasarımı yani global'daki tanımıyla User Interface (UI) website tarayıcısından kullanıcıya görünen ve etkileşimini sağlayan her türlü element olarak tanımlanmaktadır.

Arayüz tasarımı aslında hayatımızın her yerindedir. Yazılımın olduğu her noktada kullanıcı ile bağı sağlayan ve nasıl çalıştığını tanımlayan en önemli kısımlardan birisidir.

Bir web sayfasında arayüz tasarımı yaparken dikkat edilmesi gereken bir çok başlık vardır, şimdi sizlere bunları ayrıntılı bir şekilde tanımlayacağız.

1) Arayüz Tasarımında Tipografi

Günümüz tasarımlarında tipografi olarak eskiye nazaran çok daha özgür bir ortam yaşanmaktadır. Önceleri web-safe dediğimiz web'e uygun sistem fontlarını kullanırken şimdi birçok uygulama sayesinde tasarıma özgü farklı fontlar kullanılmaktadır. Web tasarımında tipografi tasarımı destekleyen ve onu güçlendiren önemli bir unsurdur.

font-kullanimi-arayuz-tasarim
Site içinde başarılı bir tipografi kullanımı içeriği daha dikkat çekici hale getirebilir. Öyle ki hedef kitlenin şekillenmesi üzerinde bile etki yaratabilmektedir. Ayrıca tasarımda kullanılan farklı fontlar farklı şeyler ifade edebilmektedir. Bu yüzden hedef kitleye uygun font kullanılmalı mümkün olduğunca farklı fontlardan kaçınılmalıdır.
Web tasarımında bir diğer önemli özellik ise site içinde kullanılan fontların kurumsal kimliğe de hitap etmesidir. Çünkü gerektiğinde kullanılacak fontlar özel kurumlar için farklı seçilebilir, çocuk siteleri için farklı kullanılabilmekte, anaokulları siteleri için farklı kullanılabilmektedir. Anaokulu sitelerinde comic sans fontunun sık sık kullandığı görülmektedir.

Okunabilirlik

Hedef kitlemiz doğrultusunda font seçerken okunurluluğu göz ardı etmemeliyiz. Hiçbir kullanıcı sayfada ki yazıları okumak için monitöre olması gerekenden fazla yaklaşmamalıdır. Kolay okunan fontlar tercih edilmelidir. Gereğinden fazla uzun metinler tercih edilmemelidir.

readability-letter-spacing

Letter Spacing Kullanarak En Okunabilir İçeriğin Belirlenmesi

Fontlar serifli, serifsiz ve dekoratif karakterli fontlar olmak üzere sayfa tasarımının özelliğine göre kullanılmaktadır.  Web’ de kolay algılanabilen fontlar kullanılmalıdır. “Ekranda görünen yazı ile basılı malzemelerde yer alan yazı farklılıklar gösterir. Ekrandaki yazının okunulabilirliği daha düşüktür. Erişilirlik açısından web sitelerinizde sans-serif (tırnaksız) yazı tiplerini kullanmanız okunurluk açısından olumlu sonuç verecektir. Bir diğer hatırda tutmaya değer bilgi ise metin sütunlarının genişliğinin okunulabilirlik açısından önemidir. 45 ile 75 karakterden oluşan sütunların diğerlerine göre daha okunaklı oldukları söyleniyor”.
Ayrıca sitede kullanılacak yazı tipi çeşitliliği şu şekilde olmalıdır: “Sitenizde bir, en fazla iki çeşit yazı tipi kullanın. CSS tanımında siteniz için en özgün olandan en genel yazı tipi ailesine doğru bir kaç yazı tipi bildirin”. Web sitelerinde yazının büyüklüğü iyi ayarlanmalıdır. Demircan’a (2001) göre, yazının boyutu ve satır aralığı ile ilgili araştırma denemelerinde; Tek, 1,5, ve çift olmak üzere üç çeşit satır aralığı ve 10,12,14 olmak üzere üç farklı punto metin kullanılmıştır. 10 punto yazının okunurluluğunun oldukça düşük olduğu gözlenmiştir. Tek ve 1,5 aralıklı okumalarda 14 punto, çift aralıklı okumalarda ise 12 punto ile en iyi sonuç alınmıştır.

we-heart-it-evoking-emotion-through-typography-19-638
Web sayfa tasarımında sürekli okuma gerektiren metinlerde kalın biçem kullanılmamalı, kalın biçem genelde vurgu amaçlı kullanılmalıdır. Ayrıca web sayfalarında sürekli okuma gerektiren metinlerde baştan sona büyük harf kullanmak da rahat okumayı engelleyecektir.
Bir diğer detay ise font ve zemin arasında kullanılan zıt renkler okunurluluğu kolaylaştırdığı için tercih sebebi olmalıdır. Rengi kullanırken diğer öğelerle uyum içinde olmasına dikkat etmemiz gerekmektedir. Özellikle zemin rengi seçerken kullanıcının gözünü yoran parlak veya göz alıcı renklerden uzak durulması gerekmektedir. Zeminde mat renkler tercih edilmelidir. Bu okunurluluğu daha da kolaylaştırmaktadır.

contrast

Tipografik tasarımın metinlerin yer aldığı alanlarla uygun ve rahat bir boşluk ilişkisi içinde düzenlenmesi önemlidir. Alanlar kalabalıklaştırmak yerine tersine rahatlatılmalı ve onların nefes alması sağlanmalıdır. Çünkü ‘az ve öz’ işlevin temel yasasıdır.
Site içinde kullanılan tüm öğelerin birbirinden farklı özellikleri vardır ve hepsi oldukça önemlidir çünkü tüm öğeler oluşan bütünün birer parçaları şeklindedirler.

Faydalı Linkler:

Hangi fontun kaç websitesinde kullanıldığı gösteren bir websitesi : http://www.fontreach.com

Birbiriyle uyumlu fontları görüntülemenizi sağlayan güzel bir blog yazısı: http://designmodo.com/great-font-combinations/

Ücretsiz olarak kullanabileceğiniz binlerce Türkçe uyumlu web fontları: https://www.google.com/fonts

Binlerce ücretli fontu Adobe Creative Cloud kapsamında ücretsiz olarak kullanabileceğiniz servis: https://typekit.com/

2) Arayüz Tasarımında Renk Kullanımı

Renk etkili bir iletişim aracıdır çünkü dikkat çekebilir ve bazı şeylerin öne çıkmasını ve daha çekici görünmesini sağlayabilir. Rengin başarılı ve idareli kullanımı tasarımı geliştirir ihtiyaç duyulan yerde istenilen etkiyi yaratabilir. Bu yüzden tasarım içinde renk kullanırken oldukça dikkatli olunmalıdır. Renkleri bilinçsiz bir şekilde kullanmak site içinde karmaşaya,  dikkat dağılmasına sebep olabilirken, istenilen mesajın iletilmesine engel olabilmektedir.

flatuicolors
Özellikle web tasarımı yaparken kullandığımız rengin, bilgisayar ekranında kullandığımız standart renk modeli olan RGB olmasına dikkat edilmesi gerekmektedir.

Renklerin İşlevleri

1.    Dikkat çekmek,
2.    Dikkati sürekli kılmak,
3.    Bilgiyi sürekli kılmak,
4.    Bilgiyi akılda kalıcı kılmak.

Web sayfalarında dikkati çeken en önemli ögelerden biri renktir. Renk bütün içinde herhangi bir uzaklıkta şekil, kelime ve desenden daha önce algılanabilmektedir. Bu yüzden işlevlerini yerine getirebilmek için hangi rengin daha doğru ve etkili olacağını önceden planlamak gerekmektedir.

Ekran ve Renk Özellikleri

Renk web sayfa tasarımcıları açısından karışıklığa neden olmaktadır. Çünkü ekranda görülen renk her bilgisayarın kullandığı standart renk ayarına göre değişiklik göstermektedir. Bu karışıklığın giderilmesi içinde Web’e özel renk paleti geliştirilmiştir. Web sayfasına özel renkler RGB renklerinden oluşmaktadır.

uicolors
RGB; Yeşil, kırmızı ve mavi renkleri içermektedir.
Renk seçerken dikkat edilmesi gereken en önemli özelliklerden biri seçilen rengin hemen hemen her ortamda birbirine en yakın sonucu verebilir olmasıdır. Bu yüzden ya mümkün olduğunca az renk kullanılmalı ya da world wide web için geliştirilen renk paleti kullanılmalıdır. WWW renk paleti, RGB renk değerlerine bağlı olarak geliştirilmiştir. Burada kullanılan 256 renk, her renk paletinde olumlu sonuçlar verebilmektedir.
Renkleri kullanırken bazı detayları da gözden kaçırmamak gerekir. Tasarımda tutarlılık önemlidir. Bu tutarlılık renkler içinde geçerlidir. Tasarımı yapılan kurumun, kurumsal kimliğinden bir ya da iki ana renk seçilerek bu renkleri destekleyen renk tonları ile tasarım yapmak web sitesini kurumu temsil eder özelliğe ulaştırır.

Renklerin Görevleri ve Psikolojisi

renklerin-psikolojik-etkileri-markalar

Çok sayıda farklı rengin fazlaca bir arada kullanımı kullanıcıyı olumsuz etkiler. Renk kullanmadan önce tasarımı yapılan kurum göz önüne alınmalı ve kurumun kimliğinde yer alan renkler öncelikli tercih edilmelidir.
Kullanılan renk genelde hedef kitleye ve kişisel tercihlere bağlı olarak uygulansa da renklerin görevleri bilinmeli ve tasarım yapılırken bu detaylar göz ardı edilmemelidir.

Flat tasarım renklerini kullanmak istiyorsanız buraya diğer popüler renk paletlerini bu siteye tıklayarak ulaşabilirsiniz.

3) Arayüz Tasarımında İçerikler

Fotoğraf ve Resim

cover-hue

Doğru fotoğraf ya da resim kullanımı ile website arayüz tasarımı önemli ölçüde değişebilmektedir. Bu yüzden doğru fotoğraf seçimi arayüz tasarımı için çok önemlidir. Çoğu tema websitesini ziyaret ettiğinizde görürsünüz ki muhteşem fotoğraflar ile kurgulanmış bir internet sitesi. Fakat temayı satın aldığınızda kendi fotoğraflarınızla düzenlediğinizde ise websitesi tam bir hayal kırıklığı olabilir. Bu yüzden tasarım yapılırken mutlaka gerçek kullanılacak fotoğraflar ve resimler üzerinden gidilmelidir.

Büyük boyutlu ve yer kaplayan resimler ya da fotoğraflar hem tasarım içinde fazlalık yaratabilirken hem de kullanıcıyı sayfa içinde beklemeye itebilir. Burada kullanıcıyı beklemek zorunda bırakan etken grafik ögelerin çözünürlülüğüdür. Sayfa içinde kullanılan grafik ögelerinin çözünürlülüğü ne kadar yüksek olursa görüntü kalitesi de o derece artarken, dosya büyüklüğünün de artması anlamına gelmektedir. Bu sebeple büyük resim, fotoğraf vb. kullanmak hızı yavaşlatırken kullanıcıyı beklemek zorunda bırakabilir.
Resimlerin boyutu maximum 200 KB olmalıdır daha büyük boyutlu resimler ya da fotoğraflar sayfanın yüklenme süresini uzatmaktadır.

Faydalı Linkler

Ücretsiz stok fotoğrafları edinebileceğiniz websitesi: https://visualhunt.com

İlham alabileceğiniz tasarımları ve fotoğrafları barından Google Görsel Arama'dan sonra en geniş arşive sahip olan portal: http://www.pinterest.com

 

 

Film, Video, Animasyon ve Ses

Tanımlayıcı Videolar Websitelerin Anlaşılması İçin Büyük Önem Taşır

Tanımlayıcı Videolar Websitelerin Anlaşılması İçin Büyük Önem Taşır

Sayfa içinde film, video ya da animasyon kullanılması gerektiği durumlarda abartıdan uzak durulmalıdır. Çünkü fazla kullanılan bu öğeler kullanıcının dikkatinin dağılmasına sebep olabilmektedir. Ayrıca ses, animasyon, video ve film gibi çoklu ortam araçları mutlaka içeriği destekler nitelikte olmalıdır.

Faydalı Linkler

Ücretsiz cover video arşivi sağlayan site: http://www.coverr.co

Ücretsiz stock video footage sağlayan servis: http://www.videvo.net

Ücretli lakin kaliteli hizmet sağlayan video stock sitesi: https://www.videoblocks.com

Website Tasarımında Doğru İçerik Kullanımı

Web site tasarımlarında içerik düzenlemesi kullanıcı açısından büyük önem taşımaktadır. İçerik ile sitenin amacı ortaya konulmalı kullanıcı ile aktif etkileşim sağlanmalıdır.
Web sitesinin amacı hedef kitlenin ihtiyaçlarına göre saptanmalıdır. Ele alınan örnek sitelerin amacı bilgilendirme ve bilgi paylaşımı olduğu düşünülürse bu doğrultuda tipografi ve görseller amaca yönelik tasarlanmalıdır. Ayrıca site içinde yeteri kadar bilgiye yer verilmelidir çünkü fazla bilgi okunmayacaktır. Bunun karşılığında metini azaltalım diye de eksik bilgi girilmesinden kaçınılmalıdır. Hedef kitlenin siteye girdiği zaman görmek istediği tüm içerik gerekli ve yeterli ölçüde verilmelidir.

Güncellik

guncel-ui-tasarim

Site ile kullanıcıların aktif etkileşimini sağlamak için, siteyi güncel ve dinamik tutmak gerekmektedir. Kullanıcının site içinde doyuma ulaşıp tekrar siteyi ziyaret etmesini sağlamak gerekmektedir.
Bu yüzden web siteleri belirli zaman dilimlerinde güncellenmelidir. Kullanıcılar ziyaret ettikleri web sitelerini belirli zaman sonra tekrar ziyaret ettiklerinde aynı içeriği görürlerse ya siteyi ziyaret etmeyi bırakırlar ya da başka sitelere yönelebilirler. Bu yüzden arayüz tasarımlarında sürekli güncellenebilir alanlar geliştirilerek tasarıma dinamik bir kısım mutlaka eklenmelidir.

Güncellenen blogları sürekli olarak tek bir platform üzerinden feedly ile takip edebilirsiniz.

Kullanılabilirlik (UX)

ux-yonergeleri

Kullanışlılık siteyi ziyaret eden kişiler için oldukça önemlidir. Çünkü kullanımı zor olan bir siteyi kullanıcı en kısa sürede terk etmektedir. Bu sebeple kurumun ana sayfasında hedef kitlenin en kolay yoldan ulaşabileceği özellikler ana başlıklarıyla yer almalıdır.
Kurumun ismi, logosu, kurumun fotoğrafı, bağlantı butonları, iletişim bilgileri ve hedef kitleyi ilgilendiren diğer butonlar yer almalıdır. Çünkü kullanıcı sadece web sitesinin nasıl göründüğü ve ne hissettirdiğiyle ilgilenmemektedir onun için sitenin kullanımındaki kolaylık da oldukça önemlidir.

Yaratıcılık

yaratici-website-tasarimi

Web siteleri belli başlı özellikleriyle birbirini anımsatmaktadır. Bu açıdan göz önüne alındığında güncelliği ve kullanışlılığı ile beraber gelişen teknoloji ile de verilen hizmetlerini arttırarak hem tasarım açısından hem de kullanışlılığı ile yaratıcı olmalı ve bu şekilde kullanıcılarını çekmekle beraber elinde tutabilme özelliğine de sahip olabilmelidir.
Web sitesi tasarlanırken unutulmaması gereken bir şey vardır ki tek web sitesi sahibi kendilerinin olmadığıdır.

Faydalı Linkler

Dünyadaki en yaratıcı tasarımcıların tasarım aşamlarında kareleri paylaştığı sosyal platform: http://dribbble.com

Tasarımcıların portfolyolarının sunumu yaptığı website: http://behance.net

Denge (Altın Oran)

golden-ratio

‘Tabiatta her şey karşıtlıklar içersindedir. Bu karşıtlıklar bütünde bir denge unsurunu oluşturur. Simetride durağanlık ve kasılma, asimetride ise hareket ve gevşeme duygusu vardır’  tasarımlarda da bu asimetri ve simetri kullanılarak bir denge yakalanabilmektedir.
Denge tasarımda kullanılan tipografi, renk ve diğer tasarım elemanlarının boyutu ve tasarım ögelerinin birbiri ile olan ilişkisi dengeyi oluşturur.

Font boyutlarında altın oran uyumunu yakalayabilmeniz için yapmanız gereken heading yani büyük başlık fontunu elde etmek için sabit yazı fontunu 1.618 ile çarpmanız gerekir.

Örneğin: 19 punto bir içerik yazısı için başlık boyutu 19 x 1.618= 30.74 yani 30 boyutunda olmalıdır.

Golden Ratior hakkında detaylı ingilizce bilgi için bu websayfasını ziyaret edebilirsiniz.

 

 

Leave your vote

0 points
Upvote Downvote

Total votes: 6

Upvotes: 3

Upvotes percentage: 50.000000%

Downvotes: 3

Downvotes percentage: 50.000000%

Published by: admin in Tasarim

Leave a Reply

css.php

Hey there!

Forgot password?

Forgot your password?

Enter your account data and we will send you a link to reset your password.

Your password reset link appears to be invalid or expired.

Close
of

Processing files…