Web sitelerin temel amacı bilgi sağlamaktır. Fakat bu bilgiyi edinmek için siteleri ziyaret eden insanlar veri işlemcileri değillerdir. Duygusaldırlar ve görsel düşünürler. Dolayısıyla ana bilgi, görsellik kullanılarak belirli bir önem sırasında ve farklılaştırılarak sunulmalıdır. Farklılaştırma; yerleşim sırası, hizalama, renk, kontrast, boşluk, gruplama, boyut, tipografi, stil gibi özellikler kullanılarak gerçekleştirilir.

Bu özelliklerin ayrı ve birlikte kullanımları ile sayısız farklılaştırma biçimi uygulanabilir.

Tabi duygulara hitap etmeyi de unutmamak gerekir.

Bir restauranta gittiğinizde iyi bir yemekten daha fazlasını beklersiniz. Ortam dekorasyonunun, yemeğin sunumunun yani genel ambiyansın iyi olmasını istersiniz. Arayüz tasarımı farklı değildir. Örneğin bir restaurant  markası için  arayüz tasarlıyorsanız, ziyaretçi tıpkı fiziksel ortamdaki gibi rahat hissetmeli, güven duymalı, beğenmeli ve etkilenmelidir.

Örneğin; İskender İskenderoğlu için geliştirdiğim tasarımda, markanın tarihinden ve kültürel mirasından dolayı özelikle “duygulara hitap etmesini”  sağlamaya çalıştım.

İnsan gözü otomatik olarak belirli ilgi noktalarına çekilir. Bunlardan bazıları kişiye bağlı olsa da, çoğunluk, bir web sayfasını görüntüleme biçimi de dahil olmak üzere belirli bir eğilimi takip eder.

Web sitelerde genel olarak ana sayfa yerleşim sıralaması; en üstte ana kategoriler, ortada öne çıkan içerikler ve altbilgide ayrıntılı kategoriler yer almalıdır. Benzer öğeler gruplandırılmalı ve gruplar ayrıştırılmalıdır.

Amaç kullanışlı ve keyifli bir deneyim sunmaktır,

Örneğin, Themeforest’ta yer alan Orva isimli kurumsal arayüz tasarımım, kullanışlı ve keyif verici bir kurumsal site örneğidir.

Akışa dikkat ederseniz, bir şirket ile ilgili önemli bilgileri içeren alanların düzgünce sıralandığını ve ilgili bölümlerin önce çıkarıldığını görebilirsiniz.

Çok sevdiğim sitelerden biri olan Lexusls‘de hem ihtiyacınız olan bilgiye kolay ulaşabildiğiniz hem de bunu yaparken keyif aldığınız bir yapıya sahip.

Arayüz tasarımınız mutlaka şu üç soruya kolayca yanıt vermelidir.
1. Kullanışlı mısın?
2. Nasıl kullanılıyorsun?
3. Neden seni tercih etmeliyim?

Bu sorulara objektif ve olumlu cevaplar alabildiğinizde görsel hiyerarşi konusunu çözmüşsünüz demektir.

WEB TASARIMDA GÖRSEL HİYERARŞİ yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

Not: Siteye eklerken çözünürlük düşürülmüştür.

ORVA – THEMEFOREST KURUMSAL ARAYÜZ yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

Yorumları okumadan önce üstteki site bağlantılarına tıklayarak ilgili siteyi açınız ve biraz inceleyiniz.

Böyle  tasarımlar yapsaydık müşterilerimizin yorumları yaklaşık şöyle olacaktı (biraz abartabilirim);

http://melanie-f.com

” Ya arka plandaki şekiller falan çok göz yoruyor onları kaldıralım. Ürünler de kaydırmalı olmasın, yanyana en az 8-10-12 ürün yerleştirelim. Müşteri bakınca 29383958 ürünü aynı anda şakadanak görsün.  Menü de  olmamış gibi onu da yukarı alıp bar haline getirip sabitleştirelim. Ayrıca yine yukarıya bizim telefon, numaramızı, adresimizi, yedi ceddimizin seceresini yazalım. Müzik de pek uymamış, mevcut müziği ‘Pınarın başında gördüm onu, siyahtır şalvarı pembedir donu’ türküsü ile değiştirelim. ”

http://www.interactivesites.com

” Öncelikle site çok uzun olmuş. Menülere tıklandığında aşağı kaymasın da ilgili sayfa açılsın.En tepedeki yuvarlakları anlayamadım oraya slayt yapalım ve benim amuda kalkarkenki fotomu koyalım. Sonra arkaplandaki o kalın çizgiyi kaldıralım çünkü  yazılar ile karışıyor. Tasarım genel olarak çok renksiz olmuş lütfen çingene pembesi, yavru ağzı, b*k kahverengisi ve cırtlak kurbağa yeşili kullanarak biraz hareket katalım. En alttaki fotoğrafı da kaldırıp linklerin olduğu bir site tabanı ekleyelim üstteki menülerin aynısı orada da olsun. ”

http://www.symodd.com

” Site geç açılıyor sanki. Site açılırkenki o yükleme şeysini kaldıralım. Aşağı doğru kaydırırken yazılar resimlerin üstüne geliyor arkadaki resimler iyi görünmüyor. Team menüsündeki resimleri büyütelim çünkü arkadaşların kainat güzeli suratları küçük görünüyor. İletişime de kafam kadar bir Google haritası ekleyelim. Sosyal medya şeyleri solda belli olmuyor onları tam ortaya koyalım.

http://myst.gr

” Logo alanını daha da büyütelim en az fil mabadı ölçülerinde olsun. Aşağıdaki resimlerin üstleri gelindiğinde sağa sola kaymasın öyle sinirim bozuluyor. Instagram fotolarından sadece en çok likelananlar gelsin. Referanslar da logoların kendi renklerinde olsun şu an çok renksiz içim daralıyor. ”

http://standardfilms.tv/

” İlk çıkan video birkaç saniye sonra ters dönüyor hep düz devam etsin. Ayrıca videolar tam ekran olmasın böyle kare kare bi sürü bi milyon tane olsun ve altlarında filmlerin isimleri yazsın.  Filmin adına tıklandığında da pop up reklam çıksın. Biz de 3-5 para kazanalım değil mi?”

http://nojdigmedmer.tele2.se/en

” Video çok hareketli baş döndürüyor daha yavaş bir video koyalım . Enter experience’ye tıklandığında oyuncuların fotoğrafları isimlerinin arkasında kalıyor isim altta, fotoğraf üstte olsun. Fotoğraf altta, isim üstte de olabilir. Ya da fotoğrafı yatay kesip arasına yazıyı koyabilirsiniz. Bi de oyuncu fotoğrafları çok garip hareket ediyor öyle olmasın sabit olsun”.

http://www.thekiteresidences.com

” Neresine tıklayacağımı çözemedim. Menü görünür olsun lütfen.”

http://coneflowercreamery.com

” Üst kısım çizgifilm gibi görünüyor oraya bizim dükkanın dıştan çekilmiş fotoğrafını yerleştirelim. Ürün resimleri yuvarlak olmasın yanlış anlaşılabilir. Yazılardaki harflerin araları çok açık iyice daraltalım birbirine girsin, lamabada yapsın hatta o derece yani. “

YARATICI TASARIMLARI MAHVEDEN MÜŞTERİ YORUMLARI yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

1. YÖNLENDİRME (NAVİGASYON)

Yönlendirme kullanışlılık açısında önemli bir öğedir.  Kullanıcı hızlı ve kolay bir biçimde aradığını bulabilmelidir.  Daha önce yapılan çalışmalarda kullanıcıların karmaşık yapıları kullanmaya istekli olmadığını göstermiştir.

Yapılmaması gereken navigasyon hataları şunlardır;

Bulunması zor yönlendirme:  Menü başlıkları, sekmeler, banner alanları görünür olmalıdır. Çünkü kullanıcı bunları bulmak için bir Indiana Jones macerası yaşamaya hevesli değildir.

Garip kısaltmalı bağlantı isimleri: Bağlantı başlıklarını alandan kazanmak için kısaltmamak gerekir. Bize göre anlaşılır olan bir kısaltma kullanıcıya anlamsız gelebilir.

Çok fazla sayıda alt menü: Sanılanın aksine alt menüler çoğu zaman kullanıcı düşmanıdır. Bazen menü ağacı, sarmaşık haline gelir fakat kullanıcı Tarzan değildir.  Onu sitede tutmanın yolu açılır menü gruplarını sadeleştirmektir. Hatta kategorileri doğrudan açılan sayfada göstermektir.

Arama kutusu olmaması: Siteniz başarılı bir yönlendirme düzenlemesine sahip değilse arama kutusu işleri biraz daha kolaylaştırır. O da yoksa kullanıcıya yardımcı olması için bir turist rehberiyle anlaşmalısınız.

2. OKUNABİLİRLİK

Okunabirlik kullanıcı dostluğu açısından diğer bir önemli faktördür.  Kullanıcının sitenizdeki içeriği hızlıca ve kolayca kavraması gerekmektedir. Nielsen Norman Group araştırmasına göre ziyaretçi bir web sitedeki içeriğin sadece %28’ini okumaktadır.  Okumasını zorlaştırarak bu oranı daha da düşürmeyin. Okunabilirlik için en önemli tasarım faktörleri;

Renk: Yazı fontunun rengi, arkplanla kontrast oluşturmalıdır. Örneğin beyaz bir arkaplan üzerine yazılacak yazının beyaz, açık gri gibi tonlarda olması kullanıcının gözlerini bozmak dışında bir işe yaramaz.

Font: Kolay okunabilir ve anlaşılabilir olmalıdır. Özellikle uzun yazıların bulunduğu alanlarda el yazısı türü fontlar kullanılmamalıdır. Serif ve Sans Serif yazı fontları tasarımlar için idealdir. Örneğin ben Open Sans’a bayılırım. Üşenmesem adımı Open Sans olarak değiştireceğim. O derece yani…

Biçimlendirme:  Okunabilirliğin yüksek olması için renk ve font dışında yazıyı nasıl kullandığımızda önemlidir.  Başlıklar kalın ve büyük, satır araları ne çok geniş ne çok dar, vurgulanan alanlar altı çizili ya da farklı renkte olmalı. Paragraf boşlukları vermek de önemli.

3. SİTE HIZI

Bu maddeyi daha önceki yazılarımda belirtmiştim. Günümüzde hızın önemi oldukça yüksek.  Eğer sitenizin yüklenmesi 5 saniyeden uzun sürüyorsa tasarımınızın acayip şahane olmasının ya da kullanışlı olmasının pek fazla önemi kalmıyor. Çünkü ziyaretçi otobüs bekler gibi beklemiyor.   Ayrıca siteniz yavaş yükleniyorsa Google’da sizi ciddiye almıyor.  Bu yüzden yüklemeyi yavaşlatan video arkaplan gibi artistlik hareketlerden, hava durumu vb. gereksiz widgetlerden kaçınmanızı ve resimlerini jpeg mini ya daa tiny png gibi uygulamalarla kayıpsız sıkıştırdıktan sonra siteye yüklemenizi öneriyorum.  Google Page Speed Tool’da resimleri sıkıştırıyor fakat bunu yaparken resimlerin kalitesini bozduğu ve boyutlarını küçülttüğü için  pek bir işe yaramıyor.

4. MOBİL UYUMLULUK

Artık her web site mobil cihazlara da uyumlu olmak zorundadır.  Mobilde yüksek performans için esnek (responsive) yapı kullanmak gerekmektedir.  Esnek web sitelerin tasarımları da sade ve kullanışlı olmak zorundadırlar.  Flat style bu ihtiyaçlara cevap vermektedir.  Fakat ülkemizde  hala realistik akımın “dallı güllü, kabartmalı, gölgeli renk geçişli ” tasarımları sevildiği için bu stili tamamıyla uygulayamıyoruz. Bu yüzden ortasını bulmaya çalışıyoruz.  Mobilde biçimlenen arayüzün kullanıcıyı yormaması gerekmektedir. Masaüstü ekranda görünen bazı bölümleri mobilde kapatabillirsiniz. Ne de olsa menü aracılığıyla bu bölümlere ulaşılabilmektedir.  Kullanıcı çok fazla tıklama yapmadan sayfalar arasında gezinebilmelir.  Site mutlaka farklı marka telefon işletim sistemi, tablet ve tarayıcıda test edilmelidir. Çünkü kendi cihazımızda düzgün görünen arayüz diğer cihazlarda berbat görünebilir. Ayrıca en küçük font boyutu 14px olmalıdır. En önemli konulardan biri de formlardır.  Mobilde form doldurmak kullanıcı için işkencedir. Bu yüzden doldurulması gereken form alanları çok daha az olmalıdır.

” Kullanıcı dostu web tasarım ” kulağa güzel gelen bir kelime. Ancak arayüzünüz gerçekten kullanıcı dostu değilse ziyaretçiler sitenizi tanımlamak için güzel sözler kullanmazlar. Daha da kötüsü,  dönmemek üzere giderler .

Serdar SEZER

KULLANICI DOSTU WEB TASARIMIN 4 PÜF NOKTASI yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

Web tasarım şirketi olarak müşterinizle iş yaparken kendi sözleşmenizi kullanmayın.  Böylelikle ödeme alma konusunda yasal güvenceniz kalmaz. İşin tam olarak hangi tarihte biteceği ile ilgili bir kesinliğe de sahip olmazsınız. Sözleşmesiz olarak yaptığınız her işi ticari hayatınız boyunca sırtınıza binecek bir angarya yük olacaktır.  Özellikle vücudunuza güveniyorsanız ve hamallık alanında da kariyer yapmak istiyorsanız aynen böyle devam edin.

2. ÜCRETİN YARISINI PEŞİN ALMAYIN

İş için anlaştığınız ücretin yarısını almadan hemen işe başlayın. Öyle parça parça para ile uğraşmayın. Ne de olsa iş bitince hepsini alırsınız. Siz işi yaparken müşterinizin vazgeçmesi, daha uygun fiyat veren bir yer ile anlaşması, iflas etmesi, hayatını kaybetmesi gibi olasılıkları asla düşünmeyin. Dünya güzel, hava güneşli, pembe gözlükler de insanı hayli rahatlatıyor.  Sakın aklınıza kötü şeyler getirmeyin.

3. PİYASAYI KIRIN

Müşterilere en ucuz en dip fiyatları verin ki iş size kalsın.  Sonra haftalarca, aylarca bu işleri tamamlamak için uğraşıp keseden yiyin. İşi teslim ettikten sonra paraları topladığınızda bir “ohhh” çekeceksiniz. Ta ki aklınıza “vergi gelene kadar”. Umarım %18 KDV’yi fiyata eklemeyi unutmuşsunuzdur.  Ha bir de web işi “hizmet” sayıldığı  için ek olarak %20 verginiz daha var.  Etti mi %38? Tebrikler batışa giden yolda önünüz açık ! Ucuz fiyat politikasına aynen devam.

4. PLANLARINIZI ALACAKLARINIZ ÜZERİNE KURUN

Gelecek planlarınızı piyasadaki alacaklarınıza güvenerek yapın. Kasanıza girmemiş paraya sahip olmanın hazzını yaşayın ve üzerinden bol bol harcama yapıp yatırım gerçekleştirin. Elbette alacaklarınızı tahsil edeceksiniz. Belki on yıl sonra, belki on yıldan da yakın.

5. MÜŞTERİNİZE MODÜL DETAYLARINI SORMAYIN

Müşterinizle yapacağınız sözleşmede modüllerin isimleri olması yeterlidir.  Zaten işi biliyorsunuz detaya gerek yok. Aynı zamanda da zihin okuma uzmanı olduğunuzdan müşterinizin aklından geçenlere uygun bir iş yapacağınızdan eminsiniz. Proje termin tarihine yetişti. Beta versiyonu sundunuz tebrikler fakat müşteri modül özelliklerinin geliştirilmesini istedi. Detay konuşmadığınız ve bunları sözleşmeye eklemediğiniz için yeni iş yüküyle karşı karşıyasınız.  Hayırlı olsun !

6. REFERANSI,  ÜCRETTEN DAHA DEĞERLİ GÖRÜN

Her 5 müşteriden 6’sı   ” bize uygun fiyat verin çevrem geniş size iyi referans olurum”  ya da “şirketim köklü ve sektör lideridir. Bize uygun birşeyler yapın bizimle çalışan tüm firmalar size gelir” der. Bu sözlere yürekten inanın ve böyle iyi kalpli müşterilerinize zararına fiyat verin. Çünkü referans kazanmak, para kazanmaktan çok daha önemlidir. Öyle ya kredi kartı borcunuzu referansla ödeyebiliyorsunuz ya da yine referans sayesinde sevdiklerinizle güzel bir akşam yemeği yiyebiliyorsunuz sonuçta. Ne gerek var paraya?

7.  EKSTRA GELİŞTİRME VE DÜZENLEMELERİ ÜCRETSİZ YAPIN

Web siteyi yapıp teslim ettiniz fakat birkaç ay sonra müşteri bazı bölümleri “keyfe keder” değiştirmek istedi. Saatlerinizi harcayıp istediği tüm değişiklikleri yapın ve bu işleri faturalandırmayın.  Böylelikle hem müşterinizi sizi sürekli olarak geliştirmeye zorlama yolunda motive etmiş hem de memnuniyetini kazanmış olursunuz. Hatta arada bir yanına giderek sırtına masaj yaparsanız kendini daha da iyi hissedecektir.

8.  ÖZGÜN TASARIM DİYE HAZIR TEMA SATIN

Özgün tasarım isteyenlere hazır temaları düzenleyip satın.  Ne de olsa müşteri bu işlerden anlamaz ve kendini kandırdığını tespit edip dava açmaz ya da sizi piyasada rezil edip adınızı çıkarmaz. Ticari başarıyı da rastgele yakalmıştır zaten.

9. SİTE KAPATMAYI “GARANTİ” OLARAK GÖRÜN

” Benim kimsede param kalmaz. Ödemeyi yapmayanın sitesini kapatırım.”  diyorsunuz. Muhteşem bir yöntem ama kanun olaya yaklaşmıyor. Özetle kanun; ” Alacağını tahsil edemiyorsan hukuki yollara başvur. Bir şirketin web sitesini kapatmak ticari faaliyetine engel olmaktır.” diyor.

10.  AR-GE YAPMADAN PROJEYE GİRİŞİN

Web site yapmaktan bıktınız ve kendi web projenizi hayata geçirip yırtmayı planlıyorsunuz. Bunun için de aklınızda muhteşem bir fikir ve biraz da birikmiş paranız var.  Ne gerek var araştırmaya? Haydi kolları sıvayın. Neden sizde bir tazedirekt.com olmayasınız?  (Not:  tazedirekt.com zarar ettiği için kapandı.)

Serdar SEZER

WEB TASARIM ŞİRKETİ BATIRMANIN 10 YOLU yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

WEB TASARIM KONTROL LİSTESİ yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

Uygulama sırasında bahsettiğim ücretsiz fotoğraf, ikon vb. materyalleri sunan siteleri, psd şablonlarını ve konuya ilişkin önceki anlatımları videonun hemen altında bulabilirsiniz.

FONT AWESOME PHOTOSHOP İLE NASIL KULLANILIR?

1170px Grid sistemi buradan indirebilirsiniz.

Tamamlanmış tasarım dosyasını buradan indirebilirsiniz.

Web Icon Sitesi

fontawesome.io
Telifsiz Fotoğraf siteleri

gratisography.com

imcreator.com/free

unsplash.com

pixabay.com

TEK SAYFA (ONE PAGE) WEBSİTE ARAYÜZ TASARIMI yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

Flat 2.0 kullanımı artacak

Artık flat stilinin aşırı sadeleğinden bunalan tasarımcılar, projelerinde flat 2.0 kullanımını arttıracak. Biraz daha gölgeli ve renk geçişli tasarımlar görmeye başlayacağız. Böylelikle eski ve terkedilmiş realizm akımının bazı stilleri, onu tahtından eden tasarım akımı sayesinde tekrar dirilecek. Yılın ilk yarısında hafif kabartma ve hareket kazandıran css animasyonları ile flat bir kere daha evrilecek. Belki de 3.0 versiyonuna tanık olacağız.

Daha çok katman

Bu yıl parallax kaydırmalı sitelerde patlama yaşandı. Genellikle de iki katman kullanımı yaygın. Fakat çok daha fazla sayıda katman kullanılarak yapılan kaydırmalı siteler azınlıkta kaldı. 2016’da bu tarz projelerin daha da artacağını umut ediyorum. İşte en beğendiklerimden biri;

Hikayeciliğin yükselişi

Son birkaç yıldır web arayüz tasarımı sadece “iş görsün” mantığıyla yapılmıyor. Artık reklamcılığın, marka-ürün bilinirliğinin ve etkileşimin de önemli bir parçası. Son teknikler sayesinde 2016’da, görsel kurgular kullanılarak oluşturulan ve hikayesini etkileyci bir biçimde sunan web sitelerde de hatırı sayılır bir artış göreceğiz.

Tipografi yine yedek klübesinde

Özetle tipografi için harfleri görsel bir sanata dönüştürme tekniği diyebiliriz. Tasarımlardaki ağırlığının gözle görülür biçimde artmasına rağmen hala ” başlık resimlerinin yerine geçmek gibi ” bütünüyle fethedemeyeceği kaleler var. Artan sadelik yaklaşımına rağmen başlıklarda resim-imaj kullanımı, bir süre daha yaygın biçimde tercih edilmeye devam edecek.

Sadeliğin altın yılı

Yavaş ve emin adımlarla realizmi tahtından eden ve geçtiğimiz yıllar boyunca kendini kabullendiren sadelik akımı “daha da sade” olmaya yöneliyor. Örneğin dikey ve yatay liste menülerin yerini hamburger menüler alacak. Bu menüleri daha çok tasarımların mobil formlarında görmeye alışkınız fakat artık masaüstü ve dizüstü bilgisayarlarımızın ekran çözünürlüklerine uygun formlarında da  göreceğiz.

Kart Düzenleri ile daha organize içerik

Pinterest’in öncülüğünü yaptığı, bu organize yerleşim stilini özelllikle haber, magazin hatta blog  ara yüzlerinde daha çok göreceğiz.  Gönderi kapak resmi, başlığı, tarihi bazen de  bir cümlelik özet yazı içeren kartlar sayesinde kısıtlı alanlarda daha iyi değerlendirebilmek ayrıca da görsel zenginliği arttırabilmek mümkün. Örnek olarak kendi bloğumdaki kart düzenini gösterebilirim.

Daha Animatif Siteler

Sadeleşen tasarımlarımızı hareketlendirmek için çeşitli animasyonlar kullanıyoruz. CSS3 ile sayesinde java ya da flash’a gerek kalmadan çeşitli efektler oluşturabiliyoruz.  Eğer yazmayı bilmiyorsanız hazır kodlarına buradan ulaşabilirsiniz;
https://daneden.github.io/animate.css/
Geçen yıl özellikle kayma ve yerleşim efektleri öne çıkmıştı. 2016’da ek olarak çeşitli yaratıcı hover efektlerinin kullanımı artacak. Bunlardan biri de 3D hover efekt olacak.

İşte örnek bir 3d hover efekt uygulaması;
http://codepen.io/sebastianekstrom/pen/jDmKo

Video Slaytlar

Sanırım web tasarımlarda yeterince imaj slayt kullandık. Artık hareketli görüntülere geçme zamanı.  Yabancı sitelerde video slayt örnekleri bir hayli çoğaldı Türkiye’de ise yeni yeni başladı diyebiliriz.  Belki şuna evrilebilir; ileride aralıksız kart düzenine uygun, sırayla birkaç saniye oynayan video slaytlar görebiliriz. .Video slayt için, arayüzünü tasarladığım bir  web tasarım firmasının kurumsal web sitesini örnek gösteriyorum;

Serdar SEZER

2016 WEB TASARIM TRENDLERİ yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

CEDAR RESTAURANT SİTESİ ARAYÜZÜ yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

Bİr Web Tasarım Nasıl Olmalı? yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.