Modern Web tasarimi

1

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

2

Modern Web Tasarımı GİRİŞ GEREKLİLİKLER ve PROJE YÖNETİMİ

WEB TASARIMI TEKNOLOJİ ve TEORİLER

Tasarım Brifingi Nasıl Olmalı?

Ara Yüz Tasarımının 10 Temel Kuralı

........................................................... 2

Kurumsal Web Sitesi Tasarımında Gereklilikler E-Ticaret Sitesi Tasarımında Gereklilikler Tasarımda Gereklilikler Hiyerarşisi Blog Dünyası

.............. 7

.......................... 12

........................................... 13

....................................................................................................... 14

Tasarımcı ve Blog

...................................................................................... 15

E-Ticaret Siteleri İçin Ara Yüz Tasarımı E-Ticaret Siteleri İçin Renk Tercihleri

Web Tasarımında Yeni Teknolojiler Ara Yüz Tasarımında Sınırlamalar Renk Teorileri Renklerin Dili

............................ 71 ............................... 81

.................................................................................... 86

..................................................................................... 88 .................................................. 103

TASARIMCI ................................ 18 ................................. 24 ................................. 38

Sosyal Medya Entegrasyonu ................................................................ 47

Efektif bir E-Ticaret Sitesi İçin İpuçları .................................... 49

AIDA Modeli .......................................................................................................... 52

Kişisel Bloglar İçin Tasarım .................................................................. 54 Portal Tasarımları ........................................................................................... 60 Nasıl Bir Tasarım İsterdiniz? .............................................................. 63 Modern Web Tasarımı

........................................................................... 67

Tipografi ve Web Tasarım

WEB TASARIMI

Kurumsal Siteler İçin Ara Yüz Tasarımı

Simetri - Asimetri

......................... 66

Tasarımcının Görevleri

.......................................................... 109

Kendinizi Geliştirmek İçin İpuçları ............................

Motivasyon ve Tasarım

111

......................................................... 113

Müşteri Tasarımcı İlişkisi

.................................................. 120

Serbest Tasarımcılar İçin 5 Altın Kural Her Tasarımcı İçin 11 İpucu

Tasarımcılar Üzerine Notlar

............... 125

............................................ 127 ........................................... 131

Kaynakça ve Kullanım Şartları

..................................... 133

Hasan Yalçın - 2012

3

GİRİŞ Ülkemizde İnternetin aktif olarak kullanılmaya başladığı, ticari ve kurumsal sitelerin de yavaş yavaş boy gösterdiği 1996-97 yıllarından itibaren grafik tasarım yeni bir dal ile tanıştı, daha sonra dijital ara yüz tasarımı olarak evrimleşecek olan web tasarımı.

Teknolojinin gelişimi, İnternet hızlarının yükselerek internetin kendisinin hayatımızın bir parçası haline gelmesi sürecinde hep ekranlarda bir butonun ya da basit bir metin linke tıklamanın peşinde koştuk.

Profesyonel olarak içerisinde bulunduğum bu 15 yıllık süreçte, web ara yüz tasarımlarının da geçirdiği evrim, günümüz modern web tasarımının temel yapı taşlarını oluşturdu.

Bu E-Kitap’ta; modern web tasarımındaki gereklilikleri, iyi bir ara yüz tasarımının hangi yolları izleyerek yapılabileceğini ve günümüz trendlerinin yanı sıra, bir tasarımcının işine yarayabilecek kimi ipuçlarına da birlikte göz atacağız.

Umarım keyif alarak tüketirsiniz.

Hasan Yalçın

Tasarımcı’nın El Çantası www.hasanyalcin.com

Modern Web Tasarımı

Hasan Yalçın - 2012

4

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

5

Tasarım Brifingi Nasıl Olmalı?

Bir tasarımcı için en önemli öncelik, elinde tasarımını yapacağı iş için sahip olması gereken bilgilerin bir arada ve anlaşılır şekilde bulunmasıdır.

Gerek fonksiyonel gerekse içerik açısından toparlanmış bilgiye brifing diyoruz. Sayfa kurguları ve süreç yönetimi brifing üzerinden planlanır. İyi bir brifing için gerekli prensipler aşağıdaki gibi sıralanabilir.

Amaç ve Hedeflerin belirlenmesi

Hedef Kitle ve Proje Kapsamı

Tasarımı yapılacak iş ile ilgili ne istendiği ve tüm detaylı fikirler ortaya konmalıdır.

Web sitesinin hedef kitlesinin belirlenmesi tasarım yapılırken belirleyici bir unsur olacaktır.

Sitenin amaç ve hedefleri belirlenmeli ve bu yönde bilgiler brifinge iliştirilmelidir.

Bütçe ve Zamanlama

Bebek sitesi ile elektronik parça üreticisi firmanın sitesi görsel olarak elbette farklı unsurlar içerecektir.

Proje kapsamını detaylandırmayı unutmayın, özel çözümler gerektiren araçlar, ara yüz tasarımına farklı yansır.

Projenin bütçelendirmesi ve süreç yönetimi hassas konulardır, mutlaka önceden netleştirilmeli ve süreç planları yapılmalıdır.

Önceden yapılan planlama hem proje sahibini hem de projeyi üreten kişi ya da kurumun daha serbest çalışmasını sağlar.

Modern Web Tasarımı

Hasan Yalçın - 2012

6

Görsel Malzeme ve Stil Belirleme Sitesi hazırlanacak kurumun ya da projenin görsel malzemesini mutlaka temin edin. Site için belirlenecek stil konusunda müşterilerinizle ya da yöneticiniz ile ortak bir fikir oluşturun.

Daha sonra oluşturacağınız stil için gerekli malzemeleri toparlayarak yapacağınız çalışmayı kafanızda oluşturun.

Web sitelerinde illüstrayon veya doku ve fırça kullanmak farklı birer stildir, bu iki örnekte stil oluşturmak açısından ilham alabileceğiniz detayları barındırmakta.

“Tasarım kültürleri oluşturur.

Kültür değerleri şekillendirir.

Değerler geleceğinizi belirler.”

Robert L. Engin Modern Web Tasarımı

Hasan Yalçın - 2012

7

Yapılmayacakları Tanımlayın!

Tüm bu başlıklar altında belirlenecek ve netleştirilecek tasarım brifingi, tasarımcının proje sürecinde başucu kitabı olacaktır.

Tasarımı yapılacak site için olmazsa olmazlar ve olursa olmazları net olarak Bu noktada fonksiyonel olarak tasarımın skeçler halinde veya wireframe olarak belirlenmesini sağlayarak sonuca ulaşın. tasarımcıya iletilmesi de, genel olarak projenin ekranların kurgulanması ve tasarlanması aşamasında çok ciddi zaman kazandıracak bir unsur olacaktır. Örneğin erkek parfüm ve bakım ürünleri satan bir sitede feminen Bu skeçler üzerinden yapılacak tasarımların mutlaka daha sonuç odaklı ve az renklerin kullanılmaması önemli bir revize getiren çalışmalar olacağını da belirtmek gerek. detaydır, yine benzer şekilde bir havayolu firması sitesinde toprak ve yeryüzünü andıran renklerin kullanımında sorun çıkması oldukça muhtemel bir durumdur.

“Davranışsal tasarım kontrol hissi ile ilgilidir.

Bu kullanılabilirliği, algılanabilirliği, ve duygularınızı da kapsar.”

Don Norman - Yazar Modern Web Tasarımı

Dünyaca ünlü popüler video sitesi Vimeo’nun skeç çalışmaları.

Hasan Yalçın - 2012

8

Kurumsal Web Sitesi Tasarımında Gereklilikler Kurumsal web siteleri; firmaların, kurumların yaptığı işleri ve kendilerini anlatıp ifade ettikleri alanlardır.

Kurumsal site tasarımları için gereklilikler, aslında tasarım brifinginin özünü oluşturacak bilgileri içerir.

Kurumsal bir web sitesi tasarlayacak tasarımcı, firmanın tüm kurumsal kimliğine hakim olmalıdır.

Tasarımcılar firmanın kurumsal ve görsel kimliği hakkında maksimum bilgi ve malzemeye sahip olmalıdır.

Bazı firmaların kendileri için oluşturdukları marka rehberleri (Brand Guideline) vardır. Bu rehberler içerisinde, markanın kendisini görsel olarak ifade eden her unsur detaylı ve kullanım örnekleri ile birlikte yer alır.

Modern Web Tasarımı

Moving Brand tarafından ness için hazırlanan kurumsal marka rehberi ve hazırlanışı oldukça etkileyici.

Hasan Yalçın - 2012

9

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

10

Eğer firmanın böyle bir rehberi varsa, tasarımcının işini kolaylaşacağı gibi, kurumsal bir kimlik oluşturmak için harcanacak ekstra zaman kaybı da önlenecektir.

Bu malzemelerin eşliğinde, firma ile ilgili fotoğraf, eğer tanıtılması isteniyorsa ürün fotoğrafları, kurum fotoğrafları ve metin içeriklere de ihtiyaç duyulacaktır.

Modern Web Tasarımı

Hasan Yalçın - 2012

11

Özellikle metin içerik örnekleri, tasarımcının yerleşim çalışmaları yaparken işine yarayacak unsurlardan biridir.

Bir birini tekrar eden sayfalarda her ne kadar dolgu metinler (Lorem Ipsum) kullanılsa da, orijinal sayfaların yerleşimini doğru ayarlamak için gerçekte sitede yer alacak metinlerin kullanılması daha faydalı olacaktır.

Tüm bunların yanında brifingde belirtilen (Eğer isteniyorsa...) görsel stil bilgisi ile kurumsal bir siteyi hazırlamak üzere tüm gereksinimlerini karşılamışsınız demektir.

Modern Web Tasarımı

Hasan Yalçın - 2012

12

E-Ticaret Sitesi Tasarımında Gereklilikler E-Ticaret siteleri diğer sitelerden farklı olarak, ürün odaklı siteler olduğu için, tasarım öncesinde ve tasarım aşamasında kurumsal sitelerdekine ek olarak farklı gereklilikler ihtiva ederler.

Marka kimliğinin yanı sıra sitede yer alacak ürünler ile bilgiler, aksiyon (Vitrin, ürün detay, sepet ve ödeme) sayfalarındaki yerleşim ve stil, önceden belirlenerek düz bir hat üzerinde ilerlenmelidir.

Öte yandan E-Ticaret sitesinin türüne göre, özgün bir stilin tasarım öncesinde belirlenmesi de başka bir gerekliliktir.

Farklı ürün gamlarında, farklı kullanıcı türlerine (Cinsiyet, Lokasyon, Yaş v.b) hizmet veren e-ticaret siteleri, tasarımlarında bu detayın üzerine gitmeli ve görsel olarak sitelerinde yansıtmalıdırlar.

“İletişim, hem toplumun hem de elektronik ticaretin kalbidir.”

Meg Whitman Başkan - CEO Hewlett-Packard Modern Web Tasarımı

E-Ticaret sitesi dendiğinde her zaman akla kalabalık ve karmaşık kutular, kocaman satın al ve sepet butonları gelmemeli...

Hasan Yalçın - 2012

13

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

14

Blog Dünyası Bloglar kurumsal ve e-ticaret sitelerinden farklı olarak daha güncel ve nispeten ağırlıklı olarak daha metin içeriklere sahip web platformlarıdır.

Bloglar güncel haberler ve firmaların iç dünyasından haberleri paylaştıkları kurumsal bloglar olabileceği gibi, kişisel de olabilirler.

Bloglarda en önemli unsur, ister kurumsal isterse kişisel olsun, kendini ifade edebilen sade ve temiz tasarımlara sahip olmalarıdır.

Ayrıca bloglar, özellikle kurumsal ise firmanın bilinirliğini artırmak ve arama sonuçlarında kendine iyi bir yer edinmesi açısından özellikle önem taşırlar.

Bloglar kurumsal ise, yine ait oldukları firmanın kurumsal kimliğine uygun görseller ile oluşturulmalıdır.

Öte yandan bir ara yüz tasarımcısı olarak kişisel bir blog sahibi olmanın bir çok avantajı olduğunu da dile getirmek lazım.

Modern Web Tasarımı

Hasan Yalçın - 2012

15

Tasarımcı ve Blog Tasarım işiyle uğraşıp bir site ya da blog sahibi olmayan bir çok profesyonel mevcut. Peki “Bir tasarımcı neden blog sahibi olmalıdır?” sorusuna yanıt bulmak gerekirse, aşağıdaki maddeleri listelemek mümkün.

Prestijinizi Düşünün

Paylaşımcı Olun

Ekstra Gelir Elde Etme Fikri

Bilinirlik

Ne kadar öyle olmadığını iddia edenler olsa da, blog tutmak ve bunu kamu ile paylaşmak prestijiniz açısından getirisi olan bir çalışma olacaktır.

Kendinizi tanıtacağınız bir blog, müşterilerinizin yaptıklarınızı ve yapabileceklerinizi algılaması açısından size en kolay çözümü sunacaktır. Ülkemizde hayli zor olmakla birlikte, yüksek trafiğe sahip bir siteye sahip olursanız, kendiniz için siteniz üzerinden farklı gelir modelleri de geliştirebilirsiniz. Sponsorluk, advertorial ya da farklı yollar ile reklam geliri elde edebilirsiniz.

Modern Web Tasarımı

Sahip olduğunuz blog sayesinde işlerinizi, o işlere ait başarı hikayelerini ve kullandığınız teknikleri, hatta edindiğiniz piyasa tecrübelerinizi meslektaşlarınızla paylaşabilir, bilmeyenlere yol gösterebilirsiniz.

Sahip olduğunuz blog sayesinde piyasadaki bilinirliğinizi artırabilir, site sayesinde farklı topluluk ya da kişiler ile tanışarak iş ilişkilerinizi geliştirebilirsiniz. Sonuçta ürettiğiniz yaratıcı işler ve onun altındaki imza size ait. Bu anlamda insanların o işi kimin yaptığını bilmeleri gerek!

Yetenek Gelişimi

Site üzerinde yeteneklerinizi gelişterecek uygulamalarda bulunabilirsiniz. Elinizi alıştırmak için yaptığınız bir menü barı veya üzerinde çalıştığınız ancak kullanmayacağınız bir buton setini sitenizde paylaşabilirsiniz.

Bu egzersizleriniz için bir yol halini alarak sizi yaratıcı tutmaya devam edebilir.

Hasan Yalçın - 2012

16

“Bugüne kadar hiç bir başyapıt, tembel bir sanatçı tarafından yapılmamıştır.”

Salvador Dali Modern Web Tasarımı

Hasan Yalçın - 2012

17

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

18

Kurumsal Siteler İçin Ara Yüz Tasarımı Daha önce de belirttiğim gibi kurumsal web siteleri, firmaların kendilerini ifade ettiği, varsa ürettikleri ürünlerin tanıtımlarını yaptıkları, tüketici ile iletişim halinde olabildikleri alanlardır.

E-Ticaret sitelerini mağaza ya da mağazalar zincir olarak nitelendirirsek, kurumsal siteleri bu mağazaların ana ofisi, ya da yazıhanesi gibi değerlendirmek daha akla yatkın bir anlatım biçimi olsa gerek...

Aslında kurumsal site kavramını oldukça geniş bir çerçeve kapsamında tutmakta fayda var.

Çünkü kurumsal siteleri sadece belli özelliklere sahip ticari kurumlar için değil, aynı zamanda okul, devlet, kamu kurumları ve hatta orduya ait siteler için de kullanabiliriz.

Özellikle holdinglerin siteleri içerisinde barındırdıkları bir çok kurum olduğundan genel olarak kurumsal site tanımına en yatkın oluşumlardır. Çukurova Holding’in kurumsal sitesi söz edilen hemen her özelliği taşıyor.

Modern Web Tasarımı

Hasan Yalçın - 2012

19

Kurumsal siteler cümlesindeki ayrışmanın özü ise o sitede bir ürün ya da hizmet satılmadığı, ancak o ürün ve hizmeti üreten kurumlar hakkında bilgi verici platformlar olmasıdır.

Bu noktada iki işi aynı anda yapan oluşumlar olduğu gerçeğini de göz ardı etmeden, bunların istisnai durumlar olduğunun altını çizmek gerekir.

Yani hem ürettiği malı internet üzerinden satan hem de o markayı üreten firmalar hakkında bilgi sahibi olabileceğiniz sitelere de rastlamanız mümkündür.

Tanımı bu şekilde yaptıktan sonra kurumsal siteler için yapılacak ara yüz çalışmalarında hangi tercih ve eğilimlerde bulunmak daha sonuca yönelik olur birlikte inceleyelim.

“İnternet ekonomisi insanlar, şirketler ve küresel bazda ülkeler için görülmemiş büyüme fırsatları yaratmaya devam ediyor.”

Erdem Holding’in kurumsal sitesi ne yazık ki çağın oldukça gerisinde kalmış, acilen yenilenmeli...

John Chambers - CEO Cisco Systems Modern Web Tasarımı

Hasan Yalçın - 2012

20

Ana Sayfa Oluşturma Sitenin ana sayfasında yer alacak bilgilerin ve içeriğin mutlaka doğru şekilde konumlanması gerekir. İçeriğin homojen olarak yayılmış olması, firma hakkında ilk bilgilerini almak üzere olan kullanıcının aklını karıştırmadan, kolay anlaşılır bir şekilde sunulmalıdır.

Kolay anlaşılabilir bir navigasyon, kullanıcıların sitede bulmak istedikleri için iyi bir başlangıç noktası oluşturmalıdır.

Modern Web Tasarımı

Hasan Yalçın - 2012

21

Marka Bilinci Oluşturma

Kurumsal siteler, ait oldukları kurumun imajını web üzerine taşıyan platformlardır.

Bir markanın öncelikle logosunun akılda kalıcı olması gerekir.

Markanın görsel iletişimini oluşturacak diğer unsurların da (Fotoğraf, tipografik yapı v.b) logosu ile bir bütünlük içerisinde yine akılda kalıcı olması beklenir.

Tüketici ya da kullanıcılar daha sonra gerek internet üzerinde, gerekse farklı mecralarda bu elementlerden biriyle karşılaştığında, hiç düşünmeye gerek kalmadan, görsel algıları ile rastladıkları görsel unsurun o markaya ait olduğunu anlamalıdırlar.

Bu algıyı yaratmak için gerek renk, gerekse tipografik çalışmalara önem vermeli, aynı zamanda firmanın kurumsal kimliğinde yer alan; şekil, maskot ve figürler için özel çalışmalar yapılmalıdır.

Modern Web Tasarımı

Pizza Hut “Pizza Kulübesi” demektir, kırmızı şapka olarak algıladığımız görsel, kulübesi’nin çatısı olmasına rağmen nerede görsek aklımıza Pizza Hut ve pizza gelir.

Hasan Yalçın - 2012

22

Aramanın Önemi

İletişim Bilgileri

E-Bülten Üyeliği

Eğer kurumsal site bir kaç sayfadan oluşan siteler değil de geniş içeriklere sahip büyük bir site ise mutlaka arama özelliği eklenmelidir.

Bir kurumsal sitenin en önemli detaylarından biri, firmanın iletişim bilgilerine kolayca ulaşımdır.

Eğer üzerinde çalışılan kurumsal site geniş bir kitleye hitap eden ve güncel haber ve duyurulara sıkça yer veren bir kuruma aitse, E-Bülten üyeliği de siteye entegre edilerek, kullanıcıların düzenli olarak bilgilendirilmesi sağlanabilir.

Karmaşık ve dolu bir içerik arasında kullanıcının dilediği bilgiye ulaşması, şüphesiz en önemli unsurlardan biridir.

Aramada yer alacak autocomplete (Otomatik tamamlama) özelliğinin faydalarını ilerleyen bölümlerde inceliyor olacağız.

Modern Web Tasarımı

Otomatik olarak kullanıcı mesajını ileten bir alan, açık adres, kroki, harita, telefon numaraları, e-posta bilgileri bu alanın en etkin şekilde kullanımını sağlar. Özellikle bu bölüme eklenecek Google haritalarının akıllı telefon kullanıcıları için önemli bir ayrıntı olacağını unutmamak gerekir.

E-Ticaret sitelerinde ise, E-Bülten birer pazarlama aracı olarak kabul edilirler.

Bu amaçla daha fazla E-Bülten üyesi kazanmak için, abone olanlara ufak armağanlar, hediye çekleri ve ya kupon kodları vermek mantıklı bir yöntemdir.

Hasan Yalçın - 2012

23

E-Ticaret Siteleri İçin Ara Yüz Tasarımı E-ticaret siteleri kurumsal sitelerin aksine, bir ürün ya da hizmetin satıldığı, parasının on-line olarak tahsil edildiği web uygulamalarıdır.

Her ne kadar pratikte öyle olmasa da, teorik olarak baktığımızda E-Ticaret sitelerini birer fiziksel mağaza olarak düşünerek işe başlamak, ya da öyle algılamak, tasarım aşamasında işleri kolaylaştıracak bir yöntem olabilir.

Modern Web Tasarımı

Hasan Yalçın - 2012

24

Örneğin, tekstil ürünleri satan gerçek bir mağazada neler olduğunu hayal edelim.

Öncelikle mağazanın vitrini ve vitrin tasarımı vardır. Mankenlere giydirilmiş, tüketicinin ilgisini en çok çekebilecek ürünler vitrinde yer alır. Ayrıca bu tüketiciyi mağaza içerisine çekmek için önemli bir yöntemdir.

Sırf bu yüzden iyi vitrin tasarımcıları hem çok kıymetli ve zor bulunan kişilerdir, hem de gerçekten çok iyi para kazanırlar.

Müşterinizi içeri aldıktan sonra ilgisini çeken ürünleri ve mümkünse onunla alakalı diğer ürünleri de müşteri yetkilisi sunarak, içeri giren müşteriyi satın alma sürecine doğru yönlendirmeye çalışır.

Eğer müşteri hayalindeki ürüne ulaşıp bunu satın almış, üstelik de yanında benzer özelliklerde, fazladan bir ürün daha satın almışsa, çok başarılı bir alış Modern Web Tasarımı

İyi bir vitrin tasarımı müşteriyi dükkana çekmek için şüphesiz en önemli yöntem.

Hasan Yalçın - 2012

25

Vitrin konusunda bir başka önemli konu da ana sayfa yerleşiminde seçilen ürünlerin; ilgi çekici, uygun fiyatlı ve sitenin hedef kitle yelpazesindeki herkese hitap etmesidir.

Bu noktada yapılan en önemli yanlışlardan biri vitrinde eski-tarihi geçmiş ve stokta olmayan ürünleri göstermektir.

Sadece vitrinde yer alan değil, sitenin tamamında tükenmiş ürünleri gösteriyor olmak kullanıcı üzerinde negatif bir etki yaratacaktır.

Bir alışveriş sitesi için en kötü senaryo, kullanıcıları üzerinde “o sitede nasıl olsa yoktur ya da kalmamıştır” fikri oluşturmaktır.

Sanal mağazaların tam bu mantıkla çalıştığını söylemek mümkün. Müşteriniz sitenize gelir, vitrininize bakar, ilgisini çeken bir şey bulduğunda ise içeri girer. İşte bu noktada hem gelen müşteriyi site içine almak bir maharet olduğu gibi, bu aşama sonrasında ona alışveriş yaptırmak ve başarılı bir ödeme süreci yaşatmak da farklı bir marifettir.

Modern Web Tasarımı

Hasan Yalçın - 2012

26

Bu noktada doğru yapılanmış bir kurgu eşliğinde, doğru ara yüz tasarımı tercihlerinde bulunarak başarılı bir E-Ticaret sitesi ortaya çıkarmak mümkün.

Bir alışveriş sitesi için en önemli unsurun kullanılabilirlik olduğunu söyleyebiliriz.

Kullanıcı, alışverişi düz bir hat üzerinde, kafası karışmadan, hata yapmadan ve sorunsuzca sonlandırmalıdır.

Tasarım, bu düz ve sorunsuz hattı oluşturan görsel öğeler olarak tanımlanabilir.

Modern Web Tasarımı

“İnternet üzerinde satışlar başladıktan sonra, insanların alışveriş alışkanlıkları değişti.

Bu karlı işin üzerine gidilmeli.”

William Daley Eski Amerikan Ticaret Bakanı-Yatırımcı

Hasan Yalçın - 2012

27

Alışveriş yapacak kullanıcıyı yönlendirmek bu noktada tasarımın yükleneceği görevdir.

İyi yapılandırılmış bir navigasyon, sorunsuz çalışan bir arama –ki arama fonksiyonu için geliştirilmiş bir auto complete (Otomatik tamamlama) ile beslenmiş olması tercih sebebi olur- siteye gelen kullanıcıyı aradığı ürüne en hızlı ve hatasız şekilde ulaşmasını sağlayacak unsurlardır.

Sade tasarımlar, kullanıcıya yol gösteren yönergeler, kolay anlaşılan kontrast renklerde aksiyona çağrı (Call to action) butonları, siteye gelen kullanıcının üzerinde kolay alışveriş yapma algısını oluşturarak satışa yönlendirmelidir.

Otomatik tamamlama modern web sitelerinde aramayı kolaylaştıran bir uygulamadır.

Modern Web Tasarımı

Hasan Yalçın - 2012

28

Dönüşüm mü, estetik mi?

E-Ticaret siteleri için en önemli olgu elbette ki “conversion” yani dönüşüm, diğer bir deyişle, siteyi ziyaret eden kullanıcının alışveriş yaparak siteden ayrılmasıdır.

Dönüşüm, zaman zaman tasarımcıların hiçte istemedikleri durumları beraberinde getirebilir.

Daha sıkışmış aralıklar, dar alanlarda daha fazla içerik göstermek, arama motoru optimizasyonuna uygun metin kutuları, sitenin genel kimliğine aykırı aksiyon butonları ve daha fazlası...

E-Ticaret sitelerinde daha yalın ve estetik açıdan kaliteli tasarımlar oluşturmak, tasarımcının bu istekleri bir potada eriterek, nispeten simetri kurallarından faydalanması ile bir çözüme ulaştırılabilir.

Sıkışık içerikler eşit ve düzgün aralıklar verilerek mümkün olduğunca ferah bir şekilde kullanıcıya sunulabilir.

Her şey çok mu sıkışık? Olsun, kullanıcıya daha fazla ürün gösterip satış yapma ihtimalini yükseltmek estetikten daha önemlidir!

Modern Web Tasarımı

Hasan Yalçın - 2012

29

Kurumsal sitelerdeki rahat alanlar, serbest tipografik yaklaşımlar, hacimli fotoğraf ve grafik kullanımı, istisnalar haricinde E-Ticaret sitelerinin tasarımında unutulması, hatta hiç hatırlanmaması gereken unsurlardır. İyi bir dönüşüm oranı yakalamak için üzerinde durulması gereken beş taşıyıcı sayfanın mevcut olduğundan söz etmemiz mümkün. Öncelikle beklediğiniz üzere sitenin ana sayfası bunlardan biri değil.

Ana sayfayı daha çok yukarıda sözü geçen vitrin mantığı ile konumlandırmak gerekir. Çünkü asıl satın alma süreci içerdeki sayfalarda başlar.

Bu beş sayfayı şu şekilde sıralamak mümkün.

Kategori sayfası, arama sonuç sayfası, ürün detay sayfası, sepet ve ödeme (Checkout) sayfaları. Kullanıcı bu sayfalar üzerinden ilerlediği pürüzsüz hat üzerinde alışverişini tamamlamalı ve ziyareti nakite dönüşmelidir.

Peki bu sayfalarda dikkat edilmesi gereken özellikler neler olmalı göz atalım.

Eğer en iyi yüz ticari kuruluşu incelemeye kalkarsanız, eminim büyük bir çoğunluğunun başarısının özgün ve yenilikçi satış metodlarında gizli olduğunu farkedeceksiniz.

W. Alton Jones

Modern Web Tasarımı

Hasan Yalçın - 2012

30

Öncelikle kategori sayfası bir ürün grubunun farklı özelliklerdeki mallarının listelendiği sayfa olarak tanımlanabilir.

Bu noktada genel olarak geçerli ve kullanıcıların klişe alışkanlıklarına hizmet eden senaryo; sayfa içinde yer alan ürün grubu içerisinde filtreleme yapabilme olanağı sağlamasıdır.

Bu filtreleme ile oluşacak etiketler ile kullanıcının bir bakıma kendi özgün navigasyon birimini oluşturması, ekmek kırıntısı (Bread Crumb) olarak tabir edilen menü sistemi ile sayfalar arası bağlantı, ürünlerin dilediği şekilde listeleme (En yeni, en ucuz, en popüler v.b) imkanı vermesi.

Ayrıca bu filtrelemeye farklı fonksiyonlar ekleyerek, kullanıcının daha detaylı şekilde aradığı ürüne ulaşması da sağlanabilir. (Renk, önce bitecekler v.b) Modern Web Tasarımı

Hasan Yalçın - 2012

31

1999 yılından bu yana yayında olan E-Ticaret sitesi Zappos’un ürün listeleme sayfaları bir çok girişim için model oluşturuyor. Filtreleme, kullanıcının kendi oluşturduğu kişisel navigasyon ve ürünleri çeşitli kriterlere göre listeleme seçenekleri kullanıcı için en kolay yol gibi gözüküyor.

Modern Web Tasarımı

Hasan Yalçın - 2012

32

Elbette bu noktada anahtar işlevi görecek durum; bu malların sayfa içinde kolay anlaşılabilir, alışveriş sepetine eklenebilir, simetrik ve birbirlerinden kopuk olmayan sabit bir düzen içerisinde yer almalarıdır.

Arama sonuç sayfasının aslında listeleme açısından kategori sayfasından türemiş bir başka versiyon olduğu kabul edilebilir.

Tamamen aynı ya da benzer özellikleri üzerinde taşır. Burada kilit nokta bu sayfanın görünümünden ziyade hizmet ettiği amaçtan söz edilebilir. İyi bir arama altyapısına sahip olan sitede, doğru ürüne ulaşmak en kısa ve hızlı şekilde gerçekleşeceği için, dönüşüme katkısı da yüksek oranda olacaktır.

Autocomplete - Otomatik tamamlama özelliği kullanıcı için kolay bir arama deneyimi sağlar...

Modern Web Tasarımı

Öte yandan arama kutusunun yerleşimi ve daha önce sözü geçen arama yaparken otomatik tamamlama (Autocomplete) özelliği ile kullanıcı yol aldığı sanal hat üzerinde hataya imkan vermeden yönlendirmek te mümkün olacaktır.

Hasan Yalçın - 2012

33

Ürün detay sayfasına geldiğimizde önce dikkat edilmesi gereken özellik tahmin edebileceğiniz üzere, sade ve anlaşılır bir stilde olmasıdır.

Ürünün net ve açık şekilde sergilenen, bir ya da birden fazla fotoğrafı, ürün adet seçimi, aksiyonu gerçekleştirecek ve mümkünse kontrast bir Sepete Ekle butonu, -çok uzun olmayankullanıcının sorunsuzca, hızlı bir şekilde anlayabileceği ürün açıklamaları eşliğinde sayfaya yerleşimi ürün detay sayfası için gerekli ana başlıklar olarak tanımlanabilir.

Bunların dışında başka fonksiyonel çözümler, sayfa içi eklenti ve uygulamaları da, ürün detay sayfasında konumlandırmak mümkündür.

Tekstil ürünleri satan bir site için fotoğrafta ürünü sergileyen mankenin ölçüleri, bir ayakkabı sitesi için ise ayakkabı numaraları kataloğu gibi küçük ve bilgilendirici eklentileri sayfa içine yerleştirmek olasıdır.

Modern Web Tasarımı

Hasan Yalçın - 2012

34

Sepet, genelde ödeme işlemlerinden önceki son adım olarak değerlendirilebilir.

Elbette sepet için yapılacak yorum aslında sitenin geneli için yapılacaklardan farklı değildir.

Anlaşılır ve fonksiyonel olması kullanıcının kolayca işlem yapabilmesi, iyi bir alışveriş sepeti için öne çıkan unsurlar olarak kabul edilebilir.

Sepet stili, gelişen web teknolojileri ile farklı şekillerde de geliştirilebilir.

Daha etkileşimli, farklı ara yüz elementleri kullanılsa da, asıl olarak sepetin görevinin kullanıcıyı ödeme işlemine yönlendirmek olduğunu unutmamak gerekir.

Bildiğimiz şekliyle en klasik haliyle bir alışveriş sepeti.

Modern Web Tasarımı

İnternet ve e-ticaret şirketimizin hayati bir parçasıdır ve bu yeni organizasyon bize mağaza, marka ve katalog gücümüzü yükseltmekte en büyük yardımcı olacaktır.

Jerry Storch - Toys ‘R’ Us Ceo’su Hasan Yalçın - 2012

35

Bir E-Ticaret sitesi için, ödeme sayfaları şüphesiz en önemli sayfalardır.

Buradaki her işlemin sorunsuz ve düzgün bir akışla işlemesi, gerçekleşecek olan dönüşümün ana yapıtaşı olacağından, dikkat edilmesi gereken bir çok husus vardır.

Bu noktada sadece ülkemize özgü, aynı zamanda tasarımcılar için baş ağrısı yaratan bir problemden söz etmeden geçmek olmaz.

Ülkemizde ödeme sırasında bir çok farklı parametre devreye girerken, yurtdışında ödeme işlemi tek bir harekette ve olanca kolay şekilde çözülüyor.

Yurtdışındaki alışveriş sitelerindeki kolay ve hızlı alışveriş sürecinin, ne yazık ki ülkemizde gerçekleşmesi mevcut ödeme sistemleri ve finansal programlar yüzünden yüzünden zor gözükmektedir.

Özellikle ülkemize özgü taksit sistemleri ve bonus-parapuan programlarına bir de satıcı firmaların hediye ve kupon kodu gibi promosyon çalışmaları eklenince, alışveriş sitelerinin ödeme sayfaları neredeyse bilmece haline dönüşüyor.

Modern Web Tasarımı

Hasan Yalçın - 2012

36

Bu durum her ne kadar kullanıcılar üzerinde alışkanlık yaratsa da, ödeme sayfasında vazgeçen, yolunu kaybeden kullanıcılar olduğu gerçeğini değiştirmiyor. Bu aşamada yapılacak iyileştirme ve düzenlemelerin dönüşüme katkısı oldukça fazla olacaktır.

Tabloya bu şekilde baktığımızda ödeme sayfaları ile ilgili farklı modeller kullanılabilir. Burada akış ve aksiyon butonlarının algısı, işlemin tek sayfada dikey bir şekilde mi, yoksa her adımda başka bir sayfada işlem yaparak ve de bunu bir ilerleme çubuğu ile görselleştirerek kullanıcıya sunulacağı genelde proje sahibinin tercihi olmaktadır.

Alışveriş sürecinde ödeme aşamasında yaklaşık vazgeçme oranı %30 seviyesinde.

Modern Web Tasarımı

Her iki yöntemin arasında belirgin bir fark olmasa da tek sayfada tamamlanan ödeme (Checkout) işlemi modelinin, kullanıcının bulunduğu sayfadan kopmadan işlemini tamamlaması açısından önemli olduğu kabul edilebilir.

Hasan Yalçın - 2012

37

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

38

E-Ticaret Siteleri İçin Renk Tercihleri Renkleri sevme durumu genel olarak kişisel bir tercih gibi dursa da, kişilerin renkleri nasıl algıladığı konusu E-Ticaret sitelerinin tasarımında zaman zaman önemli bir hal alabilir.

Genel hatları ile ana renk tonlarını ticari bir bakış açısı ile incelediğimizde ortaya çıkan sonuç ortalama olarak şu şekilde; Modern Web Tasarımı

Hasan Yalçın - 2012

39

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

40

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

41

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

42

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

43

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

44

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

45

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

46

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

47

Sosyal Medya Entegrasyonu E- Ticaret sitelerinin gerek bilinirliğinin artırması, gerekse halkla ilişkiler çalışmalarının bir bölümünü yürütmek, aynı zamanda markasının hayranlarını oluşturmak amacıyla sosyal medya sitelerinde markaları ile ilgili faaliyetlerde bulunması, günümüzde vazgeçilmez bir gereklilik halini almış durumda.

Tasarımcının bu konuda da entegrasyonu sağlamak üzere yeni ufuklar açması gerekmektedir.

Özelleştirilebilir Facebook hayran kutuları, dinamik Twitter eklentileri, beğeni ve paylaşım kutuları ve ikonları bu entegrasyonun vazgeçilmez unsuru.

Çeşitli sosyal medya entegrasyon uygulamaları...

Modern Web Tasarımı

Hasan Yalçın - 2012

48

Sosyal Medya entegrasyonunun faydaları.

Bir mal-ürün, ya da hizmet satıyor, geniş kitlelere hitap ediyorsanız, kurumunuzun sosyal medyada yer alma vakti gelmiş demektir.

Satış sonrası iletişim

Geniş Kampanyaların Yerini Küçük Etkileşimler Alır

Sosyal medyada yer almak, ürünlerinizin satışını gerçekleştirdikten Kurumların çok geniş kitlelere ulaşmak için kullandığı klasik medya araçlarının sonra da tüketicileriniz ile iletişim yerini, kullanıcı ve tüketiciler ile bire bir halinde kalmanızı sağlar. ilişki kurabildiği sosyal medya üzerinden kolayca ve harcama yapmadan duyurulmasını sağlar.

Modern Web Tasarımı

Şeffaflık Firmaların tüketicilerine ulaştırmak istediği genel ve kontrollü mesajların yerini, şeffaf bir firma yapısı, her konuda bilgi veren-alan etkileşimli bir model alır.

Ayrıca Sosyal Medyayı firmanız adına etkin kullanmak her alanda ulaşılabilir olmanızı sağlar

Hasan Yalçın - 2012

49

Efektif Bir E-Ticaret Sitesi İçin İpuçları Bir e-ticaret sitesini geliştirirken, çeşitli öğeler hakkında iyi düşünmek ve iyi hazırlık yapmak gerekir. E-Ticaret sitelerinde önceliğin müşterilerle yaratılan etkileşim olduğunu unutulmamalıdır.

Bu noktada kullanıcıların keyifli bir alışveriş deneyimi yaşaması için öncelikle arayüz tasarımının güçlü olması gerekir.

Kullanılabilirlik kurallarını unutmadan hazırlanacak, iyi ve kolay algılanabilir bir tasarım ile müşterilerin alışveriş deneyimi kalitesi kolayca artırılabilir.

Kullanılabilirlik

Bir E-Ticaret sitesine gelen kullanıcıların esas odak noktası elbette ki sitede sunulan ürün veya ürünler olmalıdır. Kullanıcının aklını karıştırmadan, sabit bir düzen içinde ürünleri sunarak, iyi yapılandırılmış navigasyon öğeleri ile kolayca yolunu ve istediğini bulabileceği bir tasarım, şüphesiz satışları körükleyen bir etken olacaktır.

Kısacası bir E-Ticaret sitesinde kullanıcıya sunulacak en önemli seçenek kolay alışveriş yapabilme algısıdır.

“Bir kullanıcıyı bilmediği bir teknolojiyi öğrenmesi için zorlamak yerine, teknolojiyi onun için uyarlamak daha mantıklıdır.”

Hayal edebileceğiniz en kötü kullanılabilirlik örneği :)

Larry Deniz Modern Web Tasarımı

Hasan Yalçın - 2012

50

Vitrin E-Ticaret sitelerini de birer ticari işletme olarak kabul edebiliriz, bir iş yerinin nasıl en önemli ve can alıcı yeri vitrini ise, bir alış veriş sitesinin de en önemli alanı vitrinidir.

Bu noktada dikkat edilmesi gereken ayrıntılar; ürünleri doğru seçmek, iyi vurgulamak, temiz ve anlaşılır fotoğraflar kullanmak, stokta olmayan ürünleri vitrinde göstermemek, potansiyel müşterileri bunaltmamak için benzer özelliklere sahip ürünleri art arda sunmamak gibi özellikler sıralanabilir.

Diğer yandan kampanya, indirim ve duyurularınız için de siteniz üzerinde ayıracağınız alanların, kullanıcılarınızın kolayca görebileceği ve anlayabileceği şekilde ayarlanmalıdır.

Eğer bir kullanıcı bir ürün peşinde sizin sitenize kadar gelmişse, güzel bir sunumla o ürünü ona satabilirsiniz.

Modern Web Tasarımı

Hasan Yalçın - 2012

51

Yükleme Zamanları Potansiyel müşterilerinizi hayal kırıklığına uğratmanın en önemli yollarından biri de hızlı yükleme zamanıdır.

Yani kapınıza kadar gelmiş olan müşteriyi kaçırmamak için hızlı yüklenen ve stabil çalışan bir steye sahip olmanız gerekir. Kullanıcı adeta gerçek bir markette gezinircesine kolay ve hızlı bir şekilde onun için hazırladığınız reyonları gezmelidir.

Yükleme zamanlarını hızlandırmak için ise alış veriş sitenizin iyi optimize edilmiş olması gerekir.

Arama

Arama fonksiyonu bir E-Ticaret , sitesinin en önemli elementlerinden biridir.

Arama kutusunun kolay ulaşılabilir bir alanda ve gerekiyorsa birden fazla sayıda olması işleri kolaylaştıracaktır.

(Hem hedaer’da, hem footer’da...)

Modern Web Tasarımı

Kullanıcıların hızlı ve sorunsuz bir şekilde arama yaparak, düzenli ve iyi listelenmiş sonuçlara ulaşmasını sağlayarak, satışlarınızı olumlu yönde etkileyeceğini unutmayın.

Hızlı Alışveriş Süreci

İstatistiklere göre E-Ticaret sitelerinde kullanıcıların %30′dan fazlası, satın almayı son aşamada tamamlamadan vazgeçiyorlar.

Bu sebeple sözü geçen süreci en hızlı şekilde tamamlamak yine satışları etkileyecek bir etken olacaktır.

Taze İçerik Sitenizde raf ömrünü tüketmiş eski model mallar, artık güncelliğini yitirmiş ürünler eğer vitrininizde yer alıyorsa bunları kaldırıp, aynı alanı en yeni ve ilgi çekici ürünler ile donatmanız gerekiyor demektir. , Eksik bilgilerin, eski ürünlerin, stokta kalmamış malların kullanıcının keyfini kaçıran en önemli unsurlardan olduğunu unutmayın.

Üyelik formları, onay süreçleri gibi adımların sayısını mümkün olduğu kadar azaltmak, gereksiz olanları tamamen kaldırmak, kolay anlaşılabilir arayüz ve buton tasarımları ile müşterinizi hızlıca kasaya yönlendirip ödemesini almak, en öncelikli amaç olmalıdır.

Bu noktada kullanıcının kafasını karıştırıp satın alma yolunu tıkayacak detaylardan kaçınmak gerekir.

Hasan Yalçın - 2012

52

AIDA Modeli Aslında klasik pazarlama ilkelerinin kısaltılmışı olan AIDA modeli pekala E-Ticaret siteleri için de geçerli biçimde uygulanabilir.

Bu modelde önce müşterinin / kullanıcının dikkati çekilir, ardından ona sunduğunuz ürüne ilgi duyması sağlanır. İlgisini çekip incelemesini sağladıktan sonra ise ona ihtiyaç duymasını sağlayacak unsurları yerine getirip harekete geçmesi ile sonuçlandırılır.

E-Ticaret siteleri için sitenin çeşitli katmanlarında (ana sayfa, ürün detay sayfaları v.b) bu ilkeler yerine getirelerek, kullanıcının alışverişe yönelmesi sağlanabilir.

Bu model, biraz daha gelişmişine ise NAIDAS adı veriliyor. Henüz var olmayan bir ürüne ihtiyaç duymakla başlayan model yine E-Ticaret sitelerine için uygun fikirler geliştirmek için ufkunuzu açabilir.

Modern Web Tasarımı

Hasan Yalçın - 2012

53

NAIDAS modelinde ise süreç kişinin ilgili ürüne ihtiyaç duyması ile başlar.

Bu ihtiyaçları göz önüne alarak tüketiciye sunduğunuz ürün ile onun dikkatini çekip, devamında ilgi duymasını sağlayacak unsurları yerine getirerek, onu istemesini sağlamak gerekir. Ürüne istek duymaya başlayan tüketicinin hareket etmesini sağlayarak (E-Ticaret siteleri için bu aşama uygun fiyat seçenekleri, kampanyalar, taksit ve farklı ödeme seçenekleri sunularak gerçekleştirilebilir.), ürünü satın alıp, tatmin duygusuna erişmesi ile, tamamlanır.

Bu modeller göz önüne alınarak yapılacak tasarım, iyi bir proje yönetimi ile birlikte ortaya çok daha işlevsel ve kar getiren bir site ortaya çıkaracaktır.

Müşteriler kendi sebeplerinden dolayı alır, sizin sebeplerinizden dolayı değil.

Anonim Modern Web Tasarımı

Hasan Yalçın - 2012

54

Kişisel Bloglar İçin Tasarım Son zamanlarda sayıları oldukça artan kişisel bloglar, genel ya da bir konu hakkında derinlemesine bilgi veren web oluşumları haline dönüştü.

Kişisel bloglar için aslında klişeleşmiş denilebilecek tasarım kriterleri mevcuttur.

Bloglar temelde, aslında tasarımdan ve estetik değerlerden daha önemli olan güncel ve özgün içerik sahibi olmalıdır.

Ancak bu unsurların yanı sıra temiz ve güzel tasarlanmış bir blogun tekrar tekrar ziyaret edilmemesi için hiç bir sebep yoktur.

Kişisel blogları çeşitlerine göre ayrıştırmak gerekirse genel bilgi verenler , daha çok günlük gibi kullanılanlar, güncel yaşama dair deneyimlerin aktarıldığı veya bir konuya odaklanmış ve o konu hakkında derinlemesine bilgiler veren, inceleyenyorumlayan olarak, nitelendirilebilir.

Konu odaklı bloglara örnek olarak yemek ya da moda blogları örnek gösterilebilir.

Modern Web Tasarımı

Kişisel moda blogları günümüzde oldukça popüler.

Hasan Yalçın - 2012

55

Dünyadaki önemli yemek boglarından biri. Rahatsız etemeyen bir tasarım ve basit bir estetikle, kullanıcıya istediği tüm bilgileri sunuyor.

Modern Web Tasarımı

Hasan Yalçın - 2012

56

Blogların Genel Mimari Yapısı

Modern Web Tasarımı

Hasan Yalçın - 2012

57

Blog’ların genel olarak yapıları bir önceki sayfada gördüğünüz gibidir.

Genelde siteye girilen en son içeriği gösteren bir ana sayfa, hakkında sayfası, iletişim formu, kategoriler ve blog yazılarından oluşur.

Ancak elbette bu yapı taşlarının yanına, bir de iyi çalışan bir arama motorunu da eklemek lazım.

Blog tasarımında dikkat edilmesi gerekenler

Bir blog tasarımını hazırlarken önem verilmesi, gözden kaçırılmaması gereken ögelere birlikte göz atalım.

Resim ve fotoğraflar her zaman sitenizi zengin gösterir ve deyim yerinde ise satar.

Mümkün olduğunca büyük ve kaliteli fotoğraflar kullanın, kullanacağınız görsellerin eninin en az 500 piksel olmasına özen göstermelisiniz.

Bir blog çalışmasında kategorileri iyi seçmek ve fazla dağıtmadan devam etmek önemli unsurlardan biridir.

Gereğinden fazla kategoride karmaşık bilgiler üretmeye başlamak, bir süre sonra artan içerik ile birlikte blog bir portal haline gelebilir.

Bloglar, herkes için internet erişimi olan heryerde, kullanılabilir bilgi yaratıyor.

George Siemens Modern Web Tasarımı

Hasan Yalçın - 2012

58

Bloglar çoğu zaman sosyal medya aktivitelerinin odak noktası olurlar. Bir blog tasarlarken sosyal medya entegrasyonu atlanmaması gereken unsurlardan biridir.

Böylelikle hem blog sahibinin kullanıcı sayısını arttıracağı gibi, içerik hakkında da yorumlar ile katkı sağlanmış olur.

Tüm bu düzenlemeleri yaparken Facebook entegrasyonunu da unutmamak gerekir. Yazdığınız, paylaştığınız yazılarn Facebook profilinizde düzgün olarak görüntülene bildiğinden emin olun.

Modern Web Tasarımı

Hasan Yalçın - 2012

59

Genel olarak monitör çözünürlükleri yükselmiş olsa da yapacağınız blog tasarımında hala 1024x768 piksellik bir alan üzerinde çalışmanız, erişim açısından daha iyi sonuç almanızı sağlayacaktır.

Mobil cihazlar ve tablet kullanarak sitenize erişenler böylelikle içeriğinize sorunsuz olarak ulaşacaklardır.

Kolay anlaşılabilir bir navigasyon, konu odaklı yazıyorsanız o konu ile ilgili, genel ve kişisel bir blog sahibi iseniz kişiliğinizi yansıtan bir renk seçimi faydalı olacaktır.

Blogların bireyler tarafından yazılıp yayınlandığını düşünürsek; bir de fotoğrafınızı eklemeniz, kullanıcılar da zevkle okudukları yazıların sahibini kafalarında canlandırabilir.

Sade, ferah kolay algılanabilir tasarımlar, içeriği ağırlıklı olarak yazılardan oluşan blogların daha kolay tüketilmesine yardımcı olacak unsurlardır.

Modern Web Tasarımı

Hasan Yalçın - 2012

60

Portal Tasarımları 2000’li yıllarda neredeyse fenomen olan portallar, şimdilerde etkisini yitirmiş gibi gözükseler de kendi kulvarlarında yollarına devam ediyorlar.

Portal kelimesinin sözlük anlamı büyük giriş kapısı olarak tanımlanabilir. İnternet üzerinde ise, bir çok farklı içeriği bünyelerinde barındıran ve kullanıcılarına sunan web sitelerine portal deniyor.

Portallar türlerine göre dikey veya yatay olarak ikiye ayrılırlar. Yatay portallar içerisinde bir çok farklı kanal ve kategori altında bilgiye erişim sağlarken, dikey portallar tek bir konu başlığı altında (Örneğin Spor, Magazin, Moda, Yaşam) farklı kategoriler ve kapsamlı içerikleri ile kullanıcılarını beslerler.

Portal tasarımlarının da tıpkı portallar gibi kendine özgü tasarım kriterleri vardır. Şimdi bu kriterlere genel olarak göz gezdirelim.

Modern Web Tasarımı

ntvmsnbc haber portalı nispeten iyi haber siteleri içerisinde gösterilebilir. Ancak ülkemize özgü değişiklikler, siteyi yurtdışı emsallerinin gerisinde bırakmaya zorluyor.

Hasan Yalçın - 2012

61

Öncelikle portal tasarımlarında en önemli ayrıntı siteyi adeta sırtında taşıyacak olan navigasyon öğelerinin iyi ve anlaşılır şekilde tasarlanmasıdır.

Kötü bir navigasyon tasarımı kullanıcıyı hiç tercih etmeyeceği ya da istemediği yerlere götürebilir.

Üstte iyi bir navigasyon örneği, aşağıda ise kötü bir navigasyon örneği mevcut. İkiside aynı içeriğe sahip olmasına rağmen algılanabilirlikleri oldukça farklı.

Dikey veya yatay olsun, portallarda okunabilirliği artırmak için, ana tema rengi olarak beyaz rengin tercih edilmesi, yazılar için de kontrast koyu renkler kullanılması önerilebilir.

Bazı özel durumlarda bu kural değişkenlik gösterebilir. Kimi yaşam stili, müzik ya da magazin portallarında koyu renk kullanılması, daha uygun olmakla birlikte mümkün olduğu kadar kaçınmak daha faydalı olacaktır.

Bu tip sitelerde 2 ana renk ve onlara yardımcı olmak üzere bu renklerin bir kaç ton açık ya da koyusunun kullanılması tasarımda ve pratikte daha iyi sonuçlar verecektir.

Modern Web Tasarımı

Turk nokta net yıllar içerisinde çok defa tasarımını değiştirmesine rağmen seviyesini korumaya çalışan yatay bir portal.

Hasan Yalçın - 2012

62

Portal tasarımlarında dikkat edilmesi gereken bir diğer özellik ise, görsel yapınının mümkün olduğu kadar modüler ve akışkan şekilde hazırlanmasıdır.

Benzer ya da aynı boydaki içerik kutucukları, barlar, butonlar kısaca ara yüz adına tam ve eksiksiz bir UI kit oluşturup, bunu sitenin farklı kanal ve içeriklerinde rahatça, yeniden boyutlandırmadan ve şeklini değiştirmeden kullanmalı ve bu şekilde tam bir görsel bütünlük sağlanmalıdır.

Farklı boylarda ve renklerde, simetrik olmayan, birbirleri ile uzaklıkları farklı içerik elementleri, ekranda karmaşıklığa sebep vererek, zaten hızlı tüketmeye alışkın olan kullanıcının siteden ayrılmasına neden olacaktır.

Son olarak portal içeriğinde görsel yazı dengesini iyi ayarlayarak, kullanıcıya içeriği hem görsel hem de yazı olarak eşit ağırlıkta sunmanın iyi bir yöntem olduğunu, genel olarak kullanılan görsellerin ise belli bir kalite seviyesinde olması gerektiğini bilmekte fayda var.

Modern Web Tasarımı

Lig Tv sitesi dikey portallar için iyi bir örnek teşkil etse de bu tasarımla ne yazık ki sınıfta kalıyor.

Detaylardaki sayısız hata, siteyi karmaşıklaştırıyor.

Hasan Yalçın - 2012

63

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

64

Ben başkan olmadan önce üst düzey bilim adamları bile interneti duymamıştı. Şimdi kedimin, hatta çorabımın bile bir web sitesi var!

Bill Clinton , Amerika Birleşik Devletleri Eski Başkanı -1996 Modern Web Tasarımı

Hasan Yalçın - 2012

65

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

66

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

67

Simetri - Asimetri Genel olarak web ara yüz tasarımında ferahlık ve sadelik, web sitelerinin algılanabilirliğini artırmakta, kullanımı ise kolaylaştırmaktadır.

Bir ara yüz tasarımında –ki bunun mutlaka bir web sitesi olma zorunluluğu yok – ferahlığı ve basitliği en kolay şekilde simetriden yararlanarak ortaya çıkarmanız mümkün.

Ekran üzerinde yer alan objelerin birbirine uzaklıkları, birbirleri arasındaki uzaklıkları veya objelerin içini kapsayan içeriklerin, yine obje kabuğuna uzaklıkları eşit oranda olmalıdır.

Bu hem düzgün tasarımlar ortaya çıkarmanızı, hem de yarattığınız tasarımları belli bir ahenk içerisinde ekrana yansıtmanızı sağlar.

Bu eleman ve objelerin birbirlerine olan uzaklıkları fazla abartmamak kaydı ile oldukça geniş bırakılabilir. Günümüz trendlerine 10’ar piksellik aralıklar yerine, artık 20’şer piksellik boşluklar daha sık tercih edilmekte.

Modern Web Tasarımı

Hasan Yalçın - 2012

68

Simetriden söz etmişken Grid sisteminden bahsetmemek olmaz. Grid sistemi ya da Türkçesi ile ızgara sistemi yeni nesil web sitelerinde kullanılan bir hizalama yöntemi denebilir.

Eşit aralıklarla bölünmüş, farklı çözünürlüklere uygun kılavuz çizgileri ile ayrılmış ızgara sistemi içerisinde tasarım yapmak, hem tasarımcıların işini kolaylaştırmakta (ortaya gayet simetrik ve düzgün çalışmalar çıkmakta) hem de bu sistemle hazırlanmış kod dosyalarına sahip ara yüz geliştiricilerinin de kolay ve standart kodlama yapma imkanı tanımaktadır.

Bir ara yüz çalışmasındaki simetrik unsurları, çok geniş bir alandan, sitenin en ufak unsuruna kadar uygulamak mümkündür.

960 Grid System (http://960.gs/) bu tip ızgara sistemleri içerisinde en popüler olanlardan biridir.

Tasarımlarınızı bu ızgaralar üzerine oturtursanız, hata yapma şansınızı da en aza indirgermiş olursunuz.

Modern Web Tasarımı

Hasan Yalçın - 2012

69

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

70

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

71

Web Tasarımında Yeni Teknolojiler Günlük hayatımızda son derece hızlı gelişen teknoloji, bizlere bir çok yenilik sunuyor. Web Tasarımı dünyasında da durum farklı. Yeni gelişen teknoloji ve değişen trendler, tasarımcı’nın güncel kalma gerekliliğini bir kez daha hatırlatıyor...

Kişisel fikrim; tasarım benim için bir moda döngüsüdür.

Mobil Uygulamalar

2010 ve 2011 yılında tablet ve Özellikle web tasarım, zaman içinde dokunmatik akıllı telefonların iyice sık sık değişime uğrayan kendine özgü hayatımıza girmesi ile, tasarımcıların eğilimleri olan bir görsel iletişim dalı. yaratıcı fikirleri farklı metod ve trendlere doğru ilerlemeye başladı. 2012 yılında Sık sık değişen trendler, kullanıcıya daha da yine mobil ağırlıklı tasarımların hayatımızdaki kapsama alanı artarak deiyiyi ve yenisini sunmak için yapılan geliştirmeler, web tasarımında durmak vam edecek gibi görünüyor. bilmeyen bir süreci oluşturuyor.

Yepyeni magazin stili tasarımlar, çeşitli finansal mobil uygulamalar, takvim Web sitelerinin daha çekici, daha kullanıcı dostu ve kolay kullanılabilmesi uygulamaları, farklı popüler web uygulamalarının mobil uygulamalarını için neredeyse her gün farklı bir kod, bu yıl içinde görmek mümkün script ya da tasarım üretiliyor. olacaktır.

Bir tasarımcı olarak her zaman bu Görsel olarak da trendin Apple stili konuda uyanık kalıp, yeni gelişmeleri olacağını ön görmek ise şimdiden takip etmek bir zorunluluktur. mümkün. Ayrıca bu duruma paralel olarak da QR kodlarının patlama Peki önümüzdeki dönem için nasıl bir hazırlık yapmalı, birlikte göz atalım. yapması beklenebilir.

Modern Web Tasarımı

Tabletler için geliştirilen arayüzler, ara yüz tasarımında farklı bir uzmanlaşmaya doğru yol alırken, tasarım kalitesinin artmasına, aynı zamanda web arayüzlerinin de gelişmesine sebep oluyor.

Hasan Yalçın - 2012

72

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

73

Önceki sayfada bir iPad uygulaması için gerekli tüm elementleri tek bir dosyada toplanmış halini gördünüz.

Bu ve benzeri çalışmaları kaynak dosyası olarak internet üzerinde bulabilirsiniz.

Bu noktada bir tasarımcının ara yüz adına hemen her farklı uygulama için çalışma yapma esnekliğinin bulunması gerektiğini, örneğin kiosk ekranlarının tasarımları konusunda da bilgi ve deneyim sahibi olması gerektiğini hatırlayalım.

Kiosk’ları da gerek kullanım şekli, gerekse uygulama mantığı açısından mobil uygulama tasarımı kategorisinde değerlendirmek mümkün.

Aslında tablet, akıllı telefon, kiosk gibi ekran uygulamlarında bilinmesi gereken detay, ara yüzün elle, parmak ya da stylus tarzı yardımcı kalemlerle kullanılması gerektiğidir.

Bu tasarım alanı için “Fiziksel Arayüz Tasarımı” şeklinde, genel bir tanımlama yapmak mümkündür.

Modern Web Tasarımı

Hasan Yalçın - 2012

74

Responsive (Duyarlı) Web Tasarımı

Duyarlı tasarımlar, kullanıcının ekran çözünürlüğü ve seçeneklerine göre hareket ederek, erişimde platform farkını ortadan kaldırıyor... Özellikle son dönemlerde sık sık duyduğumuz Responsive (Duyarlı) Web tasarımı kavramı, eninde sonunda bir web standardı haline gelecek gibi gözüküyor.

Duyarlı tasarımlar farklı tarayıcı ve çözünürlük seçeneklerinden bağımsız olarak, kullanıcıya içeriği aynı sayfa ve stilde sunulmasını öngörüyor.

Her cihaz ve tarayıcı için farklı versiyonlarda sayfalar üretmek; sunucu masrafları, tasarım giderleri gibi bir çok sıkıntının önünü kesebilecek duyarlı web tasarım anlayışı, önümüzdeki yıl daha çok karşımıza çıkacak gibi görünüyor.

Duyarlı tasarımlar tarayıcı tabanlı mobil uygulamaların vazgeçilmezi olabilir.

Modern Web Tasarımı

Reveal bir wordpress teması. Yeni nesil duyarlı tasarım olarak tasarlanıp geliştirilmiş.

Yuklarıda temanın tam çözünürlükteki hali, yanda ise minimum çözünürlüğe indirgenmiş versiyonu gözükmekte.

Her iki versiyonda da tüm içeriğe eksiksiz, ancak farklı bir akışla ulaşmanız mümkün.

Hasan Yalçın - 2012

75

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

76

Css3, Html5 & Animasyonlar

Kodlama dünyasındaki gelişme ve iyileşmeler, tasarımcının yaratıcılığını artıracak yollar açıyor...

Kod yazılım teknolojisindeki gelişmeler, yakında Flash uygulama ve animasyonların sonunu getirecek gibi gözüküyor. Bu sürecin önümüzdeki dönemde daha da hızlanacağını ön görebiliriz.

Artık Flash teknolojisi ile yapılan hemen her şey hatta daha fazlasını HTML5 teknolojisi ile yapmak mümkün olacak. Öte yandan Css3 ile daha gelişmiş, tasarımcının daha yaratıcı ara yüzler geliştirebileceği kod alt yapıları rahatça oluşturulabiliyor.

“Geliştirilen kodlama teknolojilerinde css3 tasarımcıdan, html5 programcıdan rol çalıyor!”

Fatih Hayrioğlu - Arayüz geliştirici Modern Web Tasarımı

Hasan Yalçın - 2012

77

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

78

Dinamik Tipografi Bir süredir web sitelerinde web-safe dediğimiz web’e uygun sistem fontlarını kullanmak zorunda değiliz.

Bu şu anlama geliyor; artık tasarımlarınızda tipografik olarak dilediğiniz kadar olmasa da eskisinden kat be kat özgürsünüz.

FontFace, Google Web fonts gibi uygulamalar ile artık tasarladığınız web sitelerinde dilediğiniz fontu kullanabilir, böylelikle tasarımlarınızı seçkin bir hale getirebilirsiniz. Tipografinin tasarım üzerindeki etkili gücünü de en etkin ve görsel biçimde kullanabilirsiniz.

“Tipografinin öncelikli ve asıl amacı yazılı bilgileri ulaştırmaktır.

Hiçbir argüman veya sebep bu gerçeği değişteremez...”

Emil Ruder - Tipografi Sanatçısı Modern Web Tasarımı

Hasan Yalçın - 2012

79

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

80

Sabit Navigasyonlar ve Modal Pop-Up’lar Önümüzdeki dönemde web uygulamalarında sıkça görünmesi beklenen uygulamalardan biri de sayfaya sabitlenmiş navigasyonlar.

Sayfayı ne şekilde hareket ettirirseniz ettirin, her durumda erişilebilir ekrana sabitlenmiş navigasyonlar, hızla bir moda haline dönüşebilir.

Öte yandan bir çok sitede artık daha sık gördüğümüz modal pop-up, diğer bir deyişle light box uygulamarına da daha sık rastlıyoruz. Bu tasarımcı için yer kazanmak anlamına gelirken, kullanıcı için daha fazla içeriğe daha dar bir alanda erişmek anlamına geliyor. Üye girişleri, çeşitli hesaplama ve bilgi ekranları, galeriler, bulunduğunuz ekrandan kopmadan tüm bu ve benzeri uygulamaları görüntülemenizi sağlayan pencere sistemleri, şüphesiz internetin uçsuz bucaksız okyanusunda sörf yaparken işleri kolaylaştıran unsurlardan biri.

Modern Web Tasarımı

Hasan Yalçın - 2012

81

Ara Yüz Tasarımında Sınırlamalar Web teknolojileri ne kadar gelişirse gelişsin, tasarım tarafında, gerek teknik gerekse yaratıcı açıdan bir takım sınırlama ve engellemeler mevcuttur.

Bir web ara yüz tasarımcısı elbette çalışırken sınırsız derecede özgür olmak, yaratıcı görsellerini ekrana rahatça taşımak ister. İnternet ve web’in kendine özgü bazı kuralları zaman zaman bu duruma engel teşkil eder.

Tasarım dünyasında hemen hemen en çok kısıtlamaya maruz kalan dal web ara yüz tasarımıdır.

Ancak bu kısıtlamalar, gerek yaratıcı alanda görsel, gerekse işlevsel ve kullanılabilirlik alanlarında son kullanıcının gerekli ekranlara en sağlıklı şekilde ulaşması için, önem arz ederler.

Sonuç olarak işin özü bu kısıtlamalar, kullanıcı ile doğru iletişimi sağlamak ve veriyi eksiksiz aktarmak içindir.

Unutmayın ki, iyi tasarım herkese aynı mesajı ileten tasarımdır.

Modern Web Tasarımı

Renk Sınırlamaları Öncelikle bir web ara yüz tasarımında tutarlılık önemlidir. Bu noktada Kullanacağınız renkler için de aynısının geçerli olduğunu kabul edebiliriz.

Genel olarak tasarımını yaptığınız firma, işin kurumsal kimliğine uygun bir ya da iki ana renk seçerek, aynı palet üzerinde bu renkleri destekleyen veya siyah-gri-beyaz üçlüsünden birini de yanınıza alarak tasarımınızı sürdürebilirsiniz.

Renk seçimlerinizi etkileyecek bir başka unsurda platformlardır. Seçtiğiniz renklerin ortalama olarak hemen her ekran tipinde birbirine yakın sonuç vermesi tercih edilmelidir.

Renk sayısı azaldıkça tutarlılık yükselir.

Yaptığınız tasarımların anlaşılabilirliği artar, tasarım sadeleşir ve basitleşir.

Hasan Yalçın - 2012

82

Renkleri kötü kullanmanın da bir sınırı var. Bu örnekte o sınır biraz aşılmış sanki! Site eski olabilir ama bu kötü renk seçimleri yapmanız ve uygulamanız için bir bahane değil.

Modern Web Tasarımı

Hasan Yalçın - 2012

83

Bir web sitesinde; ne, nasıl yapılmamalı konusunda gerçekçi bir örnek! www.arngren.net Modern Web Tasarımı

Hasan Yalçın - 2012

84

Tipografide Sınırlamalar Dinamik Tipografi bölümünde de görüleceği üzere, aslında web üzerinde tipografik sınırlamalar konusunda geçtiğimiz 5 yılda oldukça geniş bir yol katedildi.

Daha önce yüksek imaj boyutlarını göze alarak, tasarıma eklenen resim-fontların yerini şimdilerde Flash veya Javascript içeren sIFR , Cufon veya @ font-face , Typekit ve FontDeck gibi yeni farklı alternatifler aldı.

Bütün bu gelişmeler elbette tasarımcının önünü, ufukunu açan çalışmalardır.

Dinamik fontların kullanılacağı yerlerde, artık daha estetik ve tasarımcının o tasarım için uygun gördüğü özel fontlar devreye girerek, daha yaratıcı ekranlar oluşturulabiliyor.

Tasarımcının çalıştığı projeye uygun, farklı boy ve tipte font kullanmaması, en başından beri dikkat etmemiz gereken sadelik ve algılanabilirlik kurallarını atlamadan seçimler yapması gereklidir.

Modern Web Tasarımı

Hasan Yalçın - 2012

85

“Tasarım, bir biçimi ve içeriği birlikte ortaya koyma yöntemidir.

Tasarımın, tıpkı sanat gibi, birden fazla tanımı vardır; tek bir tanımı yoktur.

Tasarım sanat olarak, estetik olarak tanımlanabilir.

Tasarım bu kadar karmaşık olduğu için çok basittir.”

Paul Rand - 1914-1996 - Amerikalı Modernist Modern Web Tasarımı

Hasan Yalçın - 2012

86

Renk Teorileri Aslına bakarsanız renk teorileri üzerine sayfalar, ciltler dolduracak kadar konuşulabilir, yazılabilir. Asıl işimiz olan web ara yüz tasarımı için basit renk teorilerine göz atalım...

Gerçek dünyada gözümüzün algılayabildiği toplam renk sayısı, kaba bir hesapla yaklaşık 10.000.000’dur.

Bir bilgisayar ise 16.8 milyon renk gösterebilme kapasitesine sahiptir.

Ancak renkleri çıplak gözle görmenin ve algılamanın, ışık, hava koşulları ve çeşitli çevresel şartların da etkilediğini hesaba katarsak, aslında bu rakam sonsuza ulaşabilir.

Renkler konusu çok derin olmakla birlikte tabloya uzaktan baktığınızda karşınıza çıkacak olan şey, renk çemberleri olacaktır.

Sarı, kırmızı ve mavi renklere dayalı bir renk çemberi, sanat alanında gelenekseldir. Hem günümüzde hem de yaptığımız işin özelinde biz tasarımcılar için de bu ana renk çemberi elbette vazgeçilmezdir.

Modern Web Tasarımı

Sir Isaac Newton 1666 yılında renklerin ilk dairesel diyagramını geliştirdi. O zamandan beri bilim adamları ve sanatçılar bu kavram hakkında sayısız varyasyonlar oluşturdu ve tasarladı.

Zaman zaman tartışmalara yol açsa da renk çemberleri ana renklerin yanına mantıksal bir dizi ile oturtulmuş yan renkleri içerirler.

Kimileri bu çemberlerdeki düzenin yaratıcılığı sınırladığını iddia etse de, genel olarak bir tasarımcının çalışacağı tasarım hakkında renk paletleri oluşturmak, bu çemberler için oldukça faydalıdır.

Başa dönecek olursak renkler hakkında sayısız fikir üretebiliriz Ancak sonuç itibariyle renkler, kişinin algısına ve duygularına göre değişiklik gösterebileceğini de unutmamak gerek.

1776 yılında Moses Harris tarafından hazırlanan prizmatik renk çemberi renklerle ilgili çalışma yapanlar için bir dönem eşsiz faydalar sağlasa da, aslında ana renkler ile ilgili hatalı bir dizilime sahiptir.

Hasan Yalçın - 2012

87

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

88

Renklerin Dili Renklere tek başına baktığınızda bir anlam ifade etmezler. Ancak kültürel, sosyolojik ve zaman zaman da coğrafik etkenler renklere anlamlar yükler ve algımız değişir.

Renklerin bize anlattıklarını ele aldığımızda, her biri için evrensel bir tanımlama olmasa bile, bulunduğumuz coğrafya ve kültürün o renge yüklediği anlam nedeniyle bakış açımız farklılık gösterebilir.

Örneğin kırmızı renk, Avrupa kültüründe tehlike, dikkat, aşk gibi anlamlar taşırken, Çin coğrafyasında evlilik, iyi şans, Japonya’da hayat, Hindistan’da ise saflığı temsil etmektedir.

Beyaz ise Avrupa kültüründe evlilik, barış gibi değerleri temsil ederken Japonya’da yas, Çin’de ise ölümü temsil eder. İşte bu yüzden renklerin anlamlarını evrensel olarak kabul edemeyiz. Ancak işimiz ara yüz tasarımı, konumuz da renkler olduğuna göre genel olarak renklerin kişinin algısındaki genel etkilerini yok sayamayız.

Modern Web Tasarımı

Hasan Yalçın - 2012

89

Sıcak Renkler Kırmızı, turuncu ve sarı gibi renkleri sıcak renkler (En azından yaygın sıcak renkler) olarak tanımlamak mümkündür.

Sıcak renklerin daha sıklıkla tutku, enerji, dürtüsellik, mutluluk, rahatlık ve konfor ile ilişkili olduğunu söyleyebiliriz.

Genel olarak birbirleriyle uyumlu olan bu renklerin dikkat çekmeye yönelik ve davetkar olduğunun da altını çizmek lazım.

Soğuk Renkler Yeşil, mavi ve mor gibi renkler soğuk renkler olarak tanımlanabilir. Bu renkler, su grubu renkleridir.

Sıcak renklerin daha sıklıkla sakinlik, güven ve profesyonellik ile ilişkili olduğunu söyleyebiliriz. Aynı zamanda içerisinde biraz hüzün ve melankoli de barındırırlar.

Genel olarak bu paletteki renklerin de, birbirleriyle uyumlu olduğunu ve içerisinde güven ve profesyonelliği de barındırdığını belirtmek gerek.

Modern Web Tasarımı

Hasan Yalçın - 2012

90

Kırmızı Kan ve ateşin rengidir. Aynı zamanda duygusal yoğunluğu yüksek bir renktir.

Kırmızı büyük oranda enerji ile ilişkili, savaş, tehlike, güç, kuvvet, kararlılık, aksiyon, güven, cesaret, canlılık, tutku, arzu ve aşk gibi olguları içerisinde barındırır. Tüm bunların bir araya gelmesi bile kalbinizi hızlandırmaya yetebilir!

Genel olarak dürtüsel eylemler için tercih edilebilir. (Aksiyon butonları, navigasyon v.b)

Sarı Sarı güneşin rengidir. Dikkat dağıtıcı gibi dursa da, parlak sarı her zaman dikkat çeken bir renk olmuştur.

Sarı; neşe, mutluluk, bilgelik ve entelektüel enerji ile ilişkilidir, zihinsel aktiviteleri uyaran enerjik bir renktir.

Sarı, karşılaşıldığında sıcak bir etki verir, neşe uyandırır ve çoğu zaman hoş duygular uyandırmak için kullanılır.

Modern Web Tasarımı

Hasan Yalçın - 2012

91

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

92

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

93

Mavi Gökyüzü ve denizin rengidir. Nispeten kırmızı ile ters bir etkiye sahiptir ve metabolizma, solunum ve kalp hızı yavaşlar. Mavi genelde erkeksi bir renk olarak görülmüştür.

Mavi’nin güven, sadakat, bilgelik, zeka, uzmanlık, güven, istikrar ile ilişkili olduğu kabul edilir.

Bu rengin sakinleştirici bir etkisi vardır. Genellikle ciddi kurumsal sitelerde tercih edilir.

Turuncu Sarı’nın mutluluğu ile kırmızı’nın enerjisinin birleştiği renktir. Kırmızı kadar agresif değildir.

Turuncu; sevinç, güneş, tropik, coşku, mutluluk, büyülenme, yaratıcılık, azim, cazibe, başarı, cesaret verme, teşvik ve gücü ile ilişkilidir. İştahlı bir renk olarak kabul edilebilir.

Modern Web Tasarımı

Hasan Yalçın - 2012

94

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

95

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

96

Yeşil Doğanın rengidir. Genelde büyüme, umut, tazelik ve bereketi simgeler. ABD gibi paranın yeşil olduğu ülkelerde, mali zenginlik düşüncelerini çağrıştırır.

Yeşil; şifa, denge, dayanıklılık, uyum, güvenlik, yaşam ve refah ile ilişkilidir.

Genellikle ilaç reklamlarında ve tıbbi ürünlerin güvenliği belirtmek için kullanılır.

Mor Mavi’nin istikrarı ile kırmızı’nın enerjisini birleştirir. Zaman zaman zenginlik ve lüksü ifade eder.

Mor; güç, asalet, lüks ve hırsı sembolize eder. Aynı zamanda bilgelik, onur, bağımsızlık, yaratıcılık, gizem ve büyü ile ilişkilidir.

Kadınsı bir tarzı vardır. Mor, doğada az bulunan bir renk olduğu için biraz yapay olduğu kabul edilebilir.

Modern Web Tasarımı

Hasan Yalçın - 2012

97

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

98

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

99

Beyaz Beyaz; ışık, iyilik, masumiyet, saflık ile ilişkilendirilebilir. Genellikle olumlu çağrışımları vardır. Temiz ve güvenli olarak görülmektedir.

Siyah

Güç, zarafet, resmiyet, kötü ve gizem ile ilişkilidir. Güç ve otoriteyi temsil eder.

Resmi ve zarif olarak görülebilir.

Gri

Hüzünlü bir renktir, izolasyon rengi olarak değerlendirilir. Geçiş rengi olarak uygundur.

Kahverengi Toprak rengidir, dünyanın rengi olarak ta tanımlanabilir.

Kahverengiyi kullanarak sağlam ve sağlıklı mesajlar verebilirsiniz.

Modern Web Tasarımı

Hasan Yalçın - 2012

100

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

101

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

102

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

103

Tipografi ve Web Tasarımı Tipografi, Yunanca’da “typos” (form) ve “graphia” (yazmak) sözcüklerinden türemiş olan typographia sözcüğünün Türkçe halidir. Kavram; forma uygun yazmak demektir. (Wikipedia) Aslında grafik tasarımda tipografi için, grafiklerinizi harfleri kullanarak ifade etme yöntemidir denebilir.

Tipografi hakkında genel bilgilere sahip olmanın yanında, yaratıcılığında büyük önemi vardır.

Web tasarımında tipografi ise aslında diğer dallardan biraz da olsa ayrılan bir alan olarak değerlendirilebilir.

Web tasarımında tipografiye geçmeden önce, konu hakkında genel bir kaç bilgi edinmekte fayda var.

Serifli ve Serifsiz Fontlar

Serifli fontlar Times New Roman, Georgia gibi ucunda okumayı kolaylıştırdığı iddia edilen küçük tırnakçıklar bulunan fontlardır.

Modern Web Tasarımı

Serifsiz fontlar (Sans Serif olarak tanımlanır) ise Arial veya Verdana Myriad gibi, başı ve sonu düz biten harflere verilen adlardır.

Serifli fontların daha iyi ve kolay okunabildiği, ancak serifsiz olanların çok daha modern bir görünüme sahip olduğu kanısı yaygındır.

Bu yüzden genelde gazete ve dergilerde serifli fontlar kullanılır.

Bı konuda kesin bir kaynak olmamak ile birlikte, bir insan gözünün en iyi algıladığı okuma biçiminin beyaz (Açık Renk) zemin üzerine siyah (Koyu Renk) serifli fontlar ile hazırlanmış dökümanlar olduğu söylenir.

Serifli ve Serifsiz fontlar için örnek vermek gerekirse...

Hasan Yalçın - 2012

104

Kerning ve Tracking nedir?

Css kod yazanların letter-spacing komutu ile aşina olduğu harflerin arasındaki boşluklara kerning denir.

Bu terim için kısaca harflerin arasındaki boşlukları ayarlama sanatı da denilebilir.

Tracking ise, bir kelime ya da cümle grubunda bulunan harf aralıklarını düzenleme işidir.

Tracking, kerning ile birlikte kullanılır.

Tracking, tipografik çalışmalar için önemli bir unsurdur. Anlatmak istediklerinizi harflerle ifade etmeye çalıştığınız zamanlarda bloklar oluşturmak, bir cümle grubunu daha estetik göstermek için her zaman tracking’e ihtiyaç duyacaksınız.

Bu her iki tekniği, özellikle de tracking’i kullanarak daha kaliteli ve göze hoş gelen eserler üretmeniz mümkündür.

Modern Web Tasarımı

Hasan Yalçın - 2012

105

Tipografik çalışmalarda fazla sayıda font kullanımı zaman zaman kafa karıştırıcı olabilir. Tıpkı web sitelerinin renklerinde olduğu gibi bir ana font ve ona yardımcı olacak en fazla iki fontla çalışma kotarılmalıdır.

Düşünülenin aksine tipografide serifli ve serifsiz fontların bir arada kullanılmasında estetik değerler kaybolmadıkça bir sakınca yoktur.

Ancak tüm bu elemanların bir düzen ve estetik içerisinde sunulması gerekir.

Web sitelerinde tipografi bir kaç yöntemle gerçekleşebilir. Web Safe fontları kullanarak, font-face benzeri servisler yardımı ile veya direkt imaj kullanarak tipografik sunumlar yapmanız mümkün.

Tipgrafik çalışmalarda kullanılan harf renklerinin zemin rengi ile kontrast olması gerekliliğini unutmamak gerek.

Aynı zamanda bu çalışmaların bir mesaj verdiğini ve bu mesajın kullanıcı tarafından net bir şekilde alınması gerektiğini ve karmaşadan uzak çalışmaların derdini daha iyi anlattığının da altını çizmek gerekir.

Modern Web Tasarımı

Hasan Yalçın - 2012

106

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

107

“Tipografi, insan dilini en iyi şekilde görsel forma uygulama zanaattır.”

Robert Bringhurst - Tipografi Sanatçısı Modern Web Tasarımı

Hasan Yalçın - 2012

108

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

109

Tasarımcının Görevleri Bir tasarımcının asıl görevi üretken olmak ve bunu bir yaşam biçimi olarak benimsemektir.

Ancak iş hayatında bir tasarımcının neler yapması gerektiğini 4 maddede toplayabiliriz.

Web prodüksiyonu konusunda kendini geliştirmek İnternet ve web ortamını bilmek, prodüksiyon teknolojilerini detaylı şekilde öğrenmek.

Tasarım ekip işidir, ancak bireysel yetenekler çalışarak gelişir.

Egzersiz yaparak kendini geliştirmek.

Yeni web siteleri ve internet konusunda yeni kaynaklar bularak incelemek, kendi için ilham yaratacak siteler üzerinde çalışmak.

Prodüksiyonun her ayağında ve uygulamasında etkin rol almak.

Hızlı düşünmek, sorun değil çözüm odaklı olmak. Problemleri çözerek sonuca ulaşmak.

Modern Web Tasarımı

Özgün tasarımlar üretmek

Konsantasyon Üreteceği eser için iyi konsantre olmak, araştırma yaparak konuya kendini hazırlamak.

Motivasyon

Motive olmak, kendine güvenmek ve zor işlerin bile altından kolayca kalkabileceğine inanmak.

İşine bağlılık

İş disiplininden taviz vermemek, işini severek yapmak. İstemeyerek yapılan hiç bir işten verim beklenemez. İş saatleri ve proje bitim tarihlerine maksimum özen göstermek.

Hasan Yalçın - 2012

110

Yeni teknoloji ve trendleri takip etmek.

Sürekli gelişen İnternet ve web ortamında yeni medya teknolojilerini takip ederek öğrenmek ve uygulamak.

Hemen her sene gelişen ve modası değişen yeni tasarım trendlerini takip etmek, bilmek ve uygulamak.

Bu konuda kaynaklar bulmak ve düzenli olarak takip ederek yeni kriterleri tasarımlarında uygulamak.

Kullanılabilirlik ve web standartlarını öğrenmek ve uygulamak.

Bir web sitesi tasarımının amacına ulaşması için önündeki en büyük hedef kullanılabilir olmasıdır.

Kullanıcı tercihlerini bilmek ve ona göre tasarımlar geliştirmek.

Gelişen ve dünyaca kabul edilmiş web standartları hakkında bilgi sahibi olarak tasarımlarını bu yönde geliştirmek.

Modern Web Tasarımı

Hasan Yalçın - 2012

111

Kendinizi Geliştirmek İçin İpuçları!

Tasarımcılar her zaman yeniliğe açık ve kendini geliştirebilen, en azından öğrenen, tecrübelerinden dersler çıkarabilen kişilerdir. Kendinizi iyi geliştirmek yine sizin elinizdedir.

Eğitsellere önem verin

Çalışma alanınızı geliştirin

Başta tasarımcının el çantasında olmak üzere eğitsel (tutorial) sitelerine bol bol göz atın işinize yarayacak olanları arşivleyin ve bu eğitseller üzerinden bol bol pratik yapmaya çalışın.

Eğer standart bir ofiste çalışmıyorsanız, çalışma alanınızı geliştirerek daha motive edici hale getirmek elinizde.

Kim ne yapıyorsa siz de yapın Elinizdeki projelerde eğer tıkanıyorsanız, neyi nereye koyacağınızı bilemiyorsanız, yaptığınız iş ile uygun ve benzer başka işlerden ilham almaya çalışın.

Ayrıca basit bir uygulama ile çalışma masanızı renkli ve eğlenceli bir hale getirmeniz de mümkün. Masanızı en sevdiğiniz ancak kafanızı karıştırmayacak kap kağıtları ile kaplayın ve sevdiğiniz figürleri masanıza dizin.

Bu çalışmalar tekniğinizi geliştireceği gibi yeni teknikler bulmanıza da olanak sağlayacaktır.

Başkaları nasıl yapmış inceleyin ve siz de uygulayın.

Modern Web Tasarımı

Ben kendi adıma bir tasarımcı için her zaman çift monitör öneriyorum. Bu, özellikle tasarım yaparken photoshop’u efektif kullanma açısından faydalı olduğu gibi, size bir çok işte zaman kazandıracak bir unsurdur.

Düzenli bir ortamda çalışmak verimliliğinizi artırır.

Hasan Yalçın - 2012

112

Kitaplar alın dergiler okuyun

Blogları inceleyin

Mesleğinizle ilgili kitaplar ve röportajlar okumaya çalışın.

Mümkün olduğu kadar mesleki blogları takip etmeye çalışın. Tasarım ve tasarımcı blogları mutlaka bilgilerinize yenilerini katacaktır.

Blogları fiziksel olarak takip etmeseniz bile ilginizi çekenleri mutlaka rss listenize ekleyin.

Tasarım dergileri, sanatsal dergiler de sizin ufkunuzu açacaktır. Yeni bir şeyler öğrenmek için okumanın vazgeçilmez bir yol olduğunu unutmayın.

Sosyal olun

Sadece yeni müşteriler bulabilmek için değil, meslektaşlarınızla da tanışmak ve yeni şeyler öğrenmek için sosyal olun.

Kendinizi kapatmayın, sosyal ağları verimli şekilde kullanmaya bakın.

Bir moleskine edinin

Aklınıza gelenleri not alıp çizebileceğiniz bir moleskine edinin.

Çok faydasını göreceksiniz. Hem organize olmanıza hem de notlar almanızı sağlayarak hayatınızı kolaylaştıracaktır. Üstelik ara sıra bir şeyler de çizebilirsiniz!

Modern Web Tasarımı

Günlerinizi planlayın

Ajandanızın günlerini doldurun ve buna uymaya çalışın. Her gün için kendinize program ve iş planı çıkarın ve o gün için planladıklarınızı aynı gün içinde tamamlamaya çalışın.

Böylece son teslim sürelerine kolayca uyabileceğiniz gibi (geciken işleriniz olmayacağından) kendiniz için ayırdığınız özel zamanları da efektif olarak kullanabilirsiniz.

Yeni yazılımlar deneyin

Her zaman kullandıklarınızın aksine yeni, daha önce hiç denemediğiniz yazılımları, programları denemeye ve bir şeyler üretmeye çalışın.

Hasan Yalçın - 2012

113

Motivasyon ve Tasarım Hayatınızda iyi işler yapmanız için gereken en önemli “şey” motivasyon. Bu bölümde bloke olan tasarımcı nasıl motive olur ve eleştiriler ile başa çıkmanın yollarını inceleyeceğiz.

Bloke Olan Tasarımcının Motivasyon Yolları

1 Çok Çalışmak

3 Stres

Eğer yoğun projeler ile uğraşıyorsanız, Bir tasarımcının yaptığı işlerde her (mesela 10 gün boyunca günde 10 saat zaman yaratıcı olması gerekir/beklenir. çalışıp, hiç izin yapmamışsanız) bu sizin için bir sıkıntı oluşturabilir. Yoğun Ancak yaratıcı çözümler çalışma temposu içerisinde kendinize üretemediğinizde, bloke olup hiç bir şey fazla yüklenmeniz yaratıcılığınızı yapamadığınızda kendinizi nasıl motive olumsuz etkileyebilir. edersiniz ya da etmeniz gerekir?

Çağımızın hastalığı olarak nitelenen stres, yaratıcılık katili bir başka unsur.

Yorgunluk ve uykusuzluk yaratıcılığın baş düşmanıdır. Günde 8 saat uyumaya çalışın, en azından ihtiyacınız olduğu kadar uyuyun ve dinlenin.

Size garip gelebilir ama bazı projelerde son teslim tarihine yetiştirememe, yeterince yaratıcı olamama gibi endişeleriniz kronik bir korkuya dönüşerek yaratıcılığınızı engelleyebilir.

Tasarımcının Bloke Olma Sebepleri

Kendi kendini motive etme yöntemlerine bakmadan önce, bir tasarımcı neden bloke olur – olabilir sorusuna yanıt aramak belki daha mantıklıdır.

Modern Web Tasarımı

2 Aşırı Uykusuzluk

Bu konuda belirtmek gerek ki, fazla uyku ve uyuşukluk da bazen yaratıcılığı öldürebilir.

Stresten mutlaka uzak durmanız, mümkünse egzersiz ve meditasyon teknikleri ile kendinizi rahatlatarak stresle başa çıkmanız mümkündür.

4 Korku

Bu tip gerginlikler yaşamamak için önce cesur olmalısınız!

Hasan Yalçın - 2012

114

Modern Web Tasar覺m覺

Hasan Yal癟覺n - 2012

115

Bloke Olduğunuzda Nasıl Üstesinden Gelirsiniz!

Farklı Araçlar Kullanın

Yukarıdakilerden biri ya da bilinmedik bir sebepten dolayı bloke olmuşsanız, aşağıda sizler için yeniden motive olmanın en iyi yolları var. Bakalım nelermiş bunlar?

Bir Mola Verin

Her projede tekrar tekrar aynı araçları kullanmayın. Sadece ekran başında kullandığınız değil, çevrenizde kullandığınız kalem, kağıt, bloknot gibi malzemeleri de zaman zaman değiştirebilirsiniz.

Yoğun çalışmalarınıza ara verip, projeden uzaklaşın. Örneğin başka bir proje ya da konu üzerinde çalışıp tekrar esas işinize dönün.

Bir projede tıkandıysanız ve aklınıza yapacak, üretecek bir şey gelmiyorsa aynı konudaki başka projeleri inceleyerek vakit geçirin.

Projeden uzaklaşıp tekrar geri dönmeniz, tabloya farklı bir gözle bakmanızı sağlayabilir. Şekerleme Yapın

Eğer bir kurumda değil, serbest çalışıyorsanız çok tıkandığınız anlarda birazcık şekerleme yapın.

Bu size iyi gelecektir. Hem uyku ihtiyacınızı karşılayacak hem de ekran başına daha diri dönmenizi sağlayacaktır.

Modern Web Tasarımı

İlham Arayın

Yürüyüş Yapın Dışarı çıkarak 10 dakikalık bir yürüyüş yapın. Temiz hava, ekrandan uzaklaşmak, hareket etmek size iyi gelecektir.

Hatta bir kafeye oturup en sevdiğinizi içeceği sipariş edin. Günlük gazetelere göz atın - olmadı gelene geçene bakın.

Daha dinç, rahatlamış bir kafayla ekran başına döneceksiniz!

Bu, hem aklınıza yeni şeyler gelmesini sağlayacak, hem de sizi rahatlatacaktır.

Kendinizi Güçlendirin

Bazen sıkıştığınızda bunun üstesinden gelmenin tek yolu, bu durumun üstesinden tek başınıza gelebilmektir.

Güçlü olun ve kendinizi telkin edin.

Hasan Yalçın - 2012

116

Eleştiriler İle Başa Çıkmak

Eleştiri Faydalıdır

Eleştirinin tasarımcının hayatındaki kapsadığı alanın oldukça geniş olduğunu kabul etmek gerek. Yaptığımız iş tamamen kişisel beğenilere yönelik ve estetik değerleri ilgilendirdiği için, siz ne kadar hoş bir tasarım yapsanız da, harika bir renk skalası yakaladığınızı ya da yaratıcı bir görsel oluşturduğunuzu düşünseniz de, işin sonucunda size gelen geri dönüş pek hayal ettiğiniz gibi olmayabilir.

Eleştiri gerçek anlamda değerlendirildiğinde, yani konu hem olumlu hem de olumsuz yönleri ile ele alınıyorsa faydalıdır.

İş hayatında şu repliği duymayan bir tasarımcı var mıdır acaba?

“Offf, ne kadar alıngansın sen böyle ?

Biraz eleştiriye açık ol!”

Oysa eleştirinin gerçek anlamını bilen bir kişi asla böyle bir cümle kurmaz.

Zira eleştiri övgünün de bir parçasıdır.

Bakın TDK sözlüğü ne diyor eleştirinin anlamı için : “Bir insanı, bir eseri, bir konuyu doğru ve yanlış yanlarını bulup göstermek amacıyla inceleme işi.”

Modern Web Tasarımı

Aynı zamanda eleştirinin nereden geldiği, kim tarafından yapıldığı da önemlidir.

Ancak genelde sadece uzmanlar, işin/ projenin detaylarını işleyişini bilen, olgun ve vizyon sahibi kişiler bu disipline sahiptir.

Eleştiri size ve ortaya çıkan ürüne değer kattığı sürece sorun yoktur.

Fikirlerine saygı duyduğunuz, size ve yarattıklarınıza değer katacağına yeni yollar göstereceğine inandığınız birinden gelen eleştiriler, olumsuz da olsa canınızı sıkmayacaktır.

Ancak işi bilmeyen, herhangi bir altyapısı olmadan sizi eleştirenler, hem projenizin gidişatını etkiler, hem de motivasyonunuzu kaybetmenize neden olabilir.

Eleştiri Yapıcı Olmalı

Yapıcı eleştirilerden dersler çıkarmak aslında hoş bir deneyim olabilir.

Hasan Yalçın - 2012

117

Eleştiri Mesleğimizin Parçası Şunu kabul etmeliyiz ki eleştiri bizim mesleğimizin içinde olan, vazgeçilmez bir öge.

Yaptığımız işin bir çok farklı zevk ve bakış açısına hitap ettiğini düşünürsek, herkesin konu hakkında bir fikri olması normal karşılanabilir. Ne yazık ki bu kişilerin hepsinden tasarım ve renk kurallarını, işin detayını bilmelerini beklememiz mümkün değil.

kalacağınız eleştirilerin dozunun yüksek Size söylenenleri olgunlukla olmamasını sağlayacaktır. karşılayarak, bildiğiniz doğruları karşınızdakilere ifade etmeye çalışın.

Aslında biz tasarımcılar için müşteriye sorabileceğiniz kilit soru “Hangi site ve tasarımları beğeniyorsunuz?” olması, yine işleri kolaylaştıran bir etken olabilir.

Eleştirilere Karşı Tepkinizi Kontrol Edin Tasarımcılar genelde duygusal ve kırılgandır.

Zaman zaman projenizle çok ilgisi olmayan kişilerce yapılan negatif Onlarca saat emek harcadıkları işler için eleştirilere de maruz kalabilirsiniz. yapılan sert eleştiriler onlar için kırıcı Önemli olan ise, işte tam da bu nokta da ve yıldırıcı olabilir. motivasyonunuzu yitirmemektir.

Sert ve olumsuz eleştiriler karşısında Eleştiri Dozunu En Baştan Düşürün yılmayın, siz de sert bir karşı tepki göstermeyin.

Müşteriniz veya proje yöneticiniz ile iş başlarken hemen her detayı, en ince Size söylenenleri süzüp, içinden olumlu ayrıntısına kadar konuşup öğrenin. yanlarını alıp uygulamayı deneyin.

Tam olarak ne istendiğini, hatta tasarımsal olarak ne beklendiğini en baştan öğrenmek, daha sonra maruz Modern Web Tasarımı

İyi bir tasarımcı olabilirsiniz ama eleştirilere gösterdiğiniz tepkiler sizi antipatik biri haline getirebilir.

Hasan Yalçın - 2012

118

Eleştirileri Anlamak Yaptığınız işleri değerlendirenler iyi de olsa kötü de olsa sonunda size teşekkür bile etmiyor olabilir.

Karmaşık anlamadığınız ya da anlamak bile istemeyeceğiniz bir dille sizi eleştiriyor olabilirler.

Bunlara karşı yine psikolojik olarak yılmadan, işlerinizi de aksatmadan karşı durabilmeniz gerekir. Her şey aslında sakince düşünüp değerlendirme yapabilmekte saklıdır.

Eğer gerçekten iyi bir şeyler ortaya koymak istiyorsanız, sizin için en yıkıcı olan eleştirilerden bile pay çıkarabilirsiniz.

Popülerlik Eleştirileri

Söz edeceğimiz tür aslında bir tasarımcıyı en çok sıkan eleştiri olsa gerek. Bilinen, işinde uzman, saygın, tanınan ve sevilen bir tasarımcı iseniz sadece bu yüzden bile kötü ve garip eleştiriler alabilirsiniz.

Modern Web Tasarımı

Sizden daha iyi olmayan, sizin daha iyi olmanızı istemeyen kişilerin yaptığı eleştirilere kulak tıkamak en iyisi.

Elbette bu çok kolay değil.

Kendinizi kantılama isteği, yorumların yanlış olduğunu ispat arzusu da duysanız bir sonraki işinizde bu gereksiz kişiler yine karşınıza çıkacaktır.

Onun için siz en iyi bildiğiniz işi yaparak mesleğinizi gönlünüzce icra edin.

Böyle durumlarda “Beni zaten bilen biliyor” diyerek düşünüp geçmek, bazen en mantıklı seçim olabilir. Bunu aklınızdan çıkarmayın. Sonuç olarak bir tasarımcı olarak belki de bir savaş pilotu kadar sinirlerine hakim ve akıllı olmak gerekir.

Sakın Unutmayın!

Siz iyi bir tasarımcısınız ve sizi hiç bir eleştiri yıldıramaz. Zaten istediğiniz zaman en güzel işleri çıkaracağınızı biliyorsunuz.

Ayrıca hala en güzel tasarımınızı yapmadınız!

Hasan Yalçın - 2012

119

“Çirkinliklerle savaşmak, bir tasarımcının yaşam biçimidir.”

Massimo Vignelli - İtalyan Tasarımcı Modern Web Tasarımı

Hasan Yalçın - 2012

120

Müşteri Tasarımcı İlişkisi İster serbest tasarımcı olun, ister bir tasarım ofisi çalışanı, her zaman sizinle iletişimde olan müşterileriniz olacaktır. Bunlar kurumlar da olabilir, proje yöneticileri de...

Aslında bir tasarım işinin iyi çıkması adına müşteri (proje sahibi veya yöneticisi) tarafında da yapılacak bir o kadar iş ve sorumluluk var.

Bu iletişimi iyi kurmak her zaman projenin ve sizin yararınıza olacaktır.

Site Tanımı

Site Haritası

Kararsızlık bir web projesindeki en büyük handikap şüphesiz.

Genel hatları ile aşağı yukarı belirmeye başlayan site hakkında tasarımcıların öncelikle bilmesi gereken öge site haritası.

Müşteri sizin veya proje yöneticinizin yardımları ile proje konusunda daha kararlı ve keskin köşelerle belirlenmiş Web sitesi tasarlatmaya karar veren kişi bir tanım listesi hazırlamalıdır. veya kurumlar, öncelikle kendilerini ifade edecek sitenin nasıl olacağına Bu listede, zaman içinde gerçekleşecek karar vermek durumundalar. değişim ya da revizyonlar öngörülmeli Bir portal mı, kurumsal bir site mi yoksa ve önlem alınmalıdır. bir e-ticaret sitesi mi?

Daha sonra eklenen veya vazgeçilen her unsur, proje sürecini olumsuz etkileyeceği gibi tasarımcının motivasyonunu da bozacaktır.

Genel hatları ile site içeriği ve tanımı hazırlandıktan sonra, sıra diğer malzemelerin hazırlığına geliyor.

Modern Web Tasarımı

Navigasyon yapısını ve tasarımını, kullanılabilecek teknik ve teknolojileri uygulamak için öncelikle site haritasının (mümkünse daha sonra değişmeyecek şekilde) hazırlanması gerekiyor.

Tasarımcı bu haritaya göre sitenin çatısını kurar ve şeklini belirlemeye başlar.

Site haritası aynı zamanda tasarımcının yol haritası ve bu tasarım için planlayacağı süreçleri de belirler.

Bu açıda işe net olarak belirlenmiş bir akış şeması ile başlamak faydalı olacaktır.

Hasan Yalçın - 2012

121

İçerik ya da Örnek İçerik Yukarıdaki maddelerin ardından müşterinin eksiksiz olarak hazırlayarak size sunması gereken en önemli öge içerik.

Sitenin yapısı ve şeklini belirleyecek olan içeriğin en iyi şekilde hazırlanarak tasarımcıya teslim edilmesi gerekir. İçerikte daha sonra yapılacak değişiklikler, yada hiç teslim edilmemiş, yerine idareten içerikler ile doldurulmuş tasarımlar, zaman zaman tehlikeli sonuçlar doğurabilir.

Müşterinin daha sonra içini doldururuz söylemlerini pek umursamadan, en iyi örnek içeriği edinmek en sağlıklı sonucu doğuracaktır.

Onay Süreci

Bir projenin sağlıklı ve zamanında yürümesinde en önemli ayrıntılardan biri de onay süreci. Yapılan tasarımlar hakkında gelen yorum ve revizelerin kısa bir sürede tamamlanması çok önemli bir ayrıntıdır.

Modern Web Tasarımı

Hazırladığınız taslaklara 6 hafta sonra gelecek yorumlar, hem işin gecikmesine hem de canınızın sıkılmasına sebep olacaktır.

Bu noktada müşteriye düşen görev, en kısa sürede ve sağlıklı bir şekilde geri dönüş vermesi olacaktır.

Proje Finali ve Test Süreci

Projenin sonuna gelindiğinde ise, yine müşteri ile son testleri birlikte yaparak ve eksik kalan detayları hızlı bir şekilde tamamlamalı ve iş teslim edilmelidir.

Bu noktada süreci hızlandırmak yine iş sahibine düşüyor tabii. Bir hızla ve hevesle tamamlanıp, aylarca açılmayan bir sitenin kimseye faydası olmayacağı aşikar.

Sonuç olarak siz ne kadar iyi bir arayüz tasarımcısı olursanız olun, yukarıdaki listeler sağlanmadığı, süreçler sağlıklı yaşanmadığı sürece bir web projesinin altından hızlıca ve temiz bir şekilde kalkmanız zordur!

Hasan Yalçın - 2012

122

Çalışmak İstemeyeceğiniz Müşteri Tipleri Serbest tasarım işi yapanlar çoğu zaman piyasanın zorluklarından dert yanarlar. Alacakları ödemelerdeki sıkıntılar, müşteriler ile yaşadıkları problemler bir çok projede tasarımcılara hayatı zindan eder. İlgisizler

Titizler

Aceleciler

Aslında işine karışılmasından çok hoşlanmayan tasarımcılar için belki biraz çekici bir tip olabilir. Ancak bu tip müşteriler ile bir projenin yürümesi oldukça zordur.

Tehlikeli tiplerden biridir.

Bir başka tehlikeli grup daha.

Bu tipte bir profil ile çalışıyorsanız yorulmaya hazır olun. Projenin her detayı ile ilgilidirler ve bir yorumları vardır.

Her ne kadar projenin gerçekleşmesini isteseler de, yeterince bilgi vermezler ve Projeye başlamadan sizden taslaklar isteyebilirler. Demolar, detaylı ekran yol gösterici olmazlar. görüntüleri ve sahip olduğunuz her Hatta çoğu zaman sıkıştığınız noktalarda bilgiyi sizden isterler. telefonlarınıza bile çıkmazlar.

Her aşamada titizlenip doğru yolda olup olmadıklarını sorgular. Sizden bu Yaptığınıız tasarımı beğenmezlerse iş konularda tavsiye ister ama uymazlar. daha da zorlaşır. Çünkü yeniden bir şeyler yapabilmek için gereken bilgiyi de Tasarımınızdaki hemen her unsuru en vermezler. az bir kere değiştirmenizi isteyip, bir de Proje bir şekilde sonlanıp sıra ödemeye öyle görmek isterler. Kısacası hep isterler… geldiğinde…. Eh hikayenin sonunu tahmin etmişsinizdir nasılsa…

Modern Web Tasarımı

İşleri sizden o kadar kısa sürelerde isterler ki, yaratıcılığınız daha başlamadan biter. Saatler, dakikalar size yetmez olur. Genelde size telefon açar ve kapsamlı bir tasarımı aynı gün içinde istediklerini söylerler.

Hasan Yalçın - 2012

123

Evet, belki işleri yetiştirebilirsiniz ama, bu tip müşteriler için yaptığınız hiç bir işi portföyünüze koyamazsınız. Çünkü acele etmekten hiç ince çalışamamışsınızdır.

Gerçekten aç kalmadıysanız ya da kendinize hız/kalite konusunda güvenmiyorsanız uzak durun…

Cimriler Öncelikleri pazarlık yapmak üzerine kurulmuş müşteri profilidir.

Projenin başında, sonunda, her aşamasında sizinle pazarlık yaparlar. Bu çoğu zaman yaptığınız işi küçümsemelerinden de kaynaklıdır.

Onlara göre yaptığınız basit çizimler neden bu kadar değerlidir anlamak zordur.

Bu tip bir profil ile karşılaştığınızda en iyisi pek taviz vermemek, fiyat kırmamaktır.

Bırakın dışarda sizin fiyatınızın çok daha ucuzuna yaptırsınlar. Nasılsa farkı anlamaları geç olmayacaktır :) Modern Web Tasarımı

Karışanlar Titizler grubunun biraz daha gelişmiş versiyonudurlar.

Her tasarım öğesi hakkında bir fikirleri vardır. Sizi dinlemez, dinlese bile hak vermezler.

Durmadan kendi fikirlerini size empoze etmeye çalışır, yanlış bile olsa uygulamanızı isterler.

Bu tip müşteriler karşısında yaratıcı ruhunuzdan fazlasıyla ödün vermek zorunda kalabilirsiniz.

Sonuç olarak evet piyasa şartları zor, gönlünüze göre müşteri seçme şansınız çoğu zaman yok.

Ancak, en azından bu tip profilleri fark ettiğinizde uzak durmaya çalışırsanız en azından sizin için faydalı olacaktır.

Tabi burada yazılı olan çoğu şey proje yöneticileri içinde geçerli. Ancak genelde proje yöneticileri kurumsal kişiler oldukları ve böyle huyları olmayan kişilerden seçildikleri için gerçek hayatta karşılaşmanız daha zordur.

Bir şekilde proje tamamlansa bile, doğal olarak kendinize ait hissetmezsiniz.

Bu durumda bir tasarımcı için işleri oluruna bırakmak bazen en mantıklı seçim olarak gözükebilir.

Kendi ruh sağlığınız açısından rahat olup, ne isteniyorsa yaparak daha fazla zaman kaybetmeden projeyi teslim ederek önünüzdeki yeni iş ve projelere yelken açmak daha iyi olacaktır.

Hasan Yalçın - 2012

124

“Her çocuk bir sanatçıdır.

Problem, büyüdüğünde de sanatçı kalıp kalmayacağıdır.”

Pablo Picasso Modern Web Tasarımı

Hasan Yalçın - 2012

125

Serbest Tasarımcılar İçin 5 Altın Kural Herhangi bir firma veya kuruma bağlı olarak çalışmayan, kendi işini özgürce yürüten tasarımcılar için göz ardı edilmesi mümkün olmayan kuralları birlikte inceleyelim.

Portföyünüzü Geliştirin Freelance tasarımcıların kendini ifade edebilmesinin en önemli yolu şüphesiz portföyleridir.

Portföy sayfanızı olabilecek en iyi ve gösterişli biçimde tasarlayın ve içerisine en iyi en sevdiğiniz işleri yerleştirin. Portföyünüzde gezen müşterilerin yeteneğinizi, sizdeki cevheri kolayca algılamasını sağlayın. Ününüzü Artırın

İsminizin ve yaptığınız işlerin bilinirliğini artırın.

Tasarım forumları ve serbest iş yapanların bulunduğu sitelere üye olun.

Adınızın bu gibi yerlerde anılmasını sağlayarak, bilinirliğinizi artırmak için çaba gösterin.

Müşterilerinizi İyi Seçin, İyi Geçinin

Türkiye piyasası için pek kolay olmasa da, müşteri seçiminde mümkün olduğu kadar ince eleyip sık dokumaya bakın.

İyi iş yapabileceğinize inandığınız firma, kurum yada kişiler ile çalışın.

Projelerinizde hem siz onlara, hem de onlar size değer katsın. Müşterilerinizle tartışmaya girmekten kaçının. Onlarla Paylaşımcı olun, fikirlerinizi ve işlerinizi kavga etmek yerine, doğru yolu göstermeye çalışın. internet ortamında paylaşmaktan Piyasada hakkınızda yapılan iyi kaçınmayın.

Yeni moda sosyal internet ortamlarında yorumlar size para olarak geri yer alarak kendinizi tanıtın ve işlerinizi dönecektir. Gereksiz yere adınızın kötü paylaşın. anılmasına sebep olmayın.

Modern Web Tasarımı

Hasan Yalçın - 2012

126

Fiyatınızı Düşürmeyin, Bedava İş Yapmayın Fiyat stratejinizi iyi ayarlayın. Gereksiz yere (zaman zaman paradan kıymetli değerler olsa da) fiyatınızı düşürmeyin.

Yaptığınız işin kalitesi ile eşdeğer fiyatlandırma yapın. Unutmayın çok kıymetli bir iş yapıyorsunuz ve bunun bir karşılığı olmalı.

Elbette rekabete açık olun, ancak değerinizi düşürmeyin. Düzgün fiyatlandırmanın yanında, mümkün olduğu kadar her proje için sözleşme yapın.

Projenin sınırlarını yapacağınız sözleşme ile çizmezseniz, o proje asla bitmeyecektir.

Bir sınırlandırma olmadığı için doyumsuz müşteriler sürekli ekleme ve çıkarmalar ile hayatınızı zindana çevirebilir.

Modern Web Tasarımı

Profesyonel Olun Freelance tasarımcı olmak, tatil yapmak değildir. Aksine haftanın her günü ve her saati çalışmak demektir. Çalışma saatlerinizi, proje yönetiminizi disiplinli bir kurumda çalışıyormuş gibi düzenli bir şekilde organize edin.

Proje gereği aynı işle ilgili çalışacağınız diğer profesynellere saygı gösterin.

Verdiğiniz sözleri tutun. Özellikle zamanlama ve son teslim tarihleri ile ilgili olanları... Bu sayede hem piyasada saygı duyulan, hem de sözünün eri biri olarak anılırsınız.

Bu anlamda ne kadar iyi bir şöhret sahibi olursanız, kazancınızda aynı oranda artacaktır.

Hasan Yalçın - 2012

127

Her Tasarımcı İçin 11 Temel İpucu Genelde bir tasarımcının her zaman motive, yaratıcı ve hazır olması için bir çok ayrıntının bir arada olması gerekir. Buradaki birbiriyle bağlantılı ipuçları, sizin hem güncel hem de profesyonel hayatınızda çok işinize yarayacak… Öğrenmekten Vazgeçmeyin Ne kadar profesyonel olursanız olun, hayatta her zaman mesleğiniz adına öğreneceğiniz yeni şeyler mutlaka vardır. Öğrenmeye hiç ara vermeyin. Bir programı tamamen öğrendiğinizi ve size yeteceğini düşünseniz bile, öğreneceğiniz, kendinizi geliştereceğiniz yeni program ve mesleki dallar olduğunu unutmayın.

Bol bol okuyun, takip edin, araştırın ve kendinizi geliştirin.

Tasarım Hakkında Yazılar Okuyun

Tasarım hakkında okuduklarınız size yeni yollar gösterecek, zihninizi açacak ve kendinize yeni yollar yaratmanızı sağlayacaktır.

Ayrıca eğer görsel ağırlıklı kaynaklar tüketmişseniz; bu, sizin yaratıcılığınızı artırarak, ilham verecek yeni tasarımlarınızda sizin için yol gösterici olacaktır.

Hoşunuza Giden Kaynakları Saklayın Özellikle internet üzerinde rastladığınız hoşunuza giden kaynakları mutlaka favorilerinize ekleyin, saklayın.

Kendinize bir arşiv oluşturun. Bunu yaparken, kaynaklarınızı gruplamayı ihmal etmeyin.

Bir blog, kitap ya da dergi fark etmez, tasarım ve tasarımcılık hakkında Daha sonra bu arşivi açtığınızda size ilham verecek kaynaklara ulaşıp karşınızda eşsiz bir kaynak bulacaksınız. bunları tüketin.

Modern Web Tasarımı

Hasan Yalçın - 2012

128

Bir Fikriniz mi Var? Not Alın!

Aklınıza bir yeni ve yaratıcı bir fikir geldiğinde hatırlamak için hemen bir yerlere not alın. Unutmayın, söz uçar, yazı kalır!

Organize Olun

Mümkün olduğu kadar düzenli ve tertipli olmaya çalışın. İş hayatınızda bu oldukça önemli. Daha sonra aradığınız şeyleri kolayca bulmak için işlerinizi, favori sitelerinizi düzenleyin, klasörleyin ve isimlendirin.

Eğer gerekiyorsa sosyal imleme sitelerinden de faydalanın.

Sosyal Ağları Kullanın

Hem değişik bir çok bilgi ve kaynağa ulaşmak, hem de kendinizi ifade etmek ve göstermek için popüler olan sosyal ağlardan faydalanın.

Bu hem kendinizi geliştirmenize yarayacak, hem de böylelikle ilerde potansiyel müşterilerin size ulaşma şansını arttıracaktır.

Modern Web Tasarımı

Hasan Yalçın - 2012

129

Farklı Olmaktan Çekinmeyin

Az Çalışın

Bazen kalabalığın içerisinde ayrı olmak faydalıdır. Farklı olmaktan, farkınızı göstermekten çekinmeyin.

Başlık sizi korkutmasın, gereğinden fazla çalışmayın.

Kendinizi Dünyaya Gösterin

Önce kendinize sizi tanıtan ve ifade eden bir blog açmakla işe başlayabilirsiniz.

Sonra sitenizde yaptığınız işleri tanıtan bir portföy alanı ekleyebilirsiniz. deviantart.com veya behance.net gibi sitelerde işlerinizi gösterebilir tanıtabilirsiniz.

İş zamanlarınızı ve proje süreçlerini iyi ayarlayarak, doğru çalışma zamanınızı yaratın. İşler yetişecek diye kendinize eziyet etmemeye çalışın.

Günü Yaşayın

Bir hayatınız olduğunu unutmayın.

En iyi işlerinizi paylaşın.

Herşeyin iş olmadığını, yıllar sonra aklınıza gelince şimdiki yaşınıza dönmek için can atacağınızı düşünün.

Eğer mümkünse spor yapmaya çalışın, tüm zamanınızı bilgisayar başında geçirmeyin.

İşkolik olmak yerine planlı olmaya çalışın.

Spor Yapın!

Açık havada biraz spor, olmadı yürüyüş ve gezinti mutlaka size iyi gelecek ve enerji verecektir.

Modern Web Tasarımı

Yaşamınızı bu yönde düzenlemeye çalışın.

Hasan Yalçın - 2012

130

“Görsel tasarımcı, estetiğin planlayıcısıdır.”

Bruno Munari - İtalyan Tasarımcı - 1907-1998 Modern Web Tasarımı

Hasan Yalçın - 2012

131

Tasarımcılar İçin Notlar...

Diplomanız iş bulmanızı sağlamaz!

Dünyanın en iyi grafik okulundan bile mezun olmuş olsanız, bu size iş imkanı sağlayacak anlamına gelmez. İyi bir iş sahibi olmak için mutlak gereken iyi bir portföy sahibi olmaktır.

Portföyünüzde yer alan kaliteli işler, sizi profesyonel dünyada bir adım öne çıkaracaktır.

İyi tasarımlar zaman alır, son teslim tarihinizi kısa almayın.

Siz iyi bir tasarım yapmak için ne kadar fazla süreye ihtiyaç duyarsanız, müşteri ya da patronunuzda o derece hızlı iş çıkarmanızı ister.

Bu sağlıklı bir yaklaşım değil elbette, proje zamanlamalarınızı iyi hesap edin. İyi bir iş için size gereken süreyi almak için uğraşın.

Hızlı olmak adına gerçekçi olmayan teslim tarihleri vermeyin.

Modern Web Tasarımı

Müşteri/Patronunuz sizin sanatçı olduğunuzu düşünmez.

Onlar sadece projelerin bir an önce paraya dönüşmesini arzularlar.

Zaten onların sizi anlaması gibi bir beklenti içine de girmeyin.

İşinizi en iyi şekilde yaparak tasarım kalitenizi bozmadan iş hayatınıza devam edin.

Hasan Yalçın - 2012

132

Ağır eleştirilere hazır olun.

Bol bol arkadaş edinin.

Daha önce de bir çok defa konusu geçmişti. Özellikle bu ülkede eleştiri yapmayı, kritik etmeyi bilmeyen insanlar arasında sinirden kendinizi yememek için, önceden kendinizi bu ve benzeri ağır durumlara hazırlayın.

Sektörünüzden herkes ile tanışın ve arkadaşlık edin.

Kimsenin yaptığınız işi beğenip övgüler yağdırmasını beklemeyin. Önce kendiniz beğenin ve yolunuza devam edin.

Kendinizi bu tip kritiklere karşı koyarak motivasyonunuzu kaybetmeden çalışmayı sürdürmek adına telkin edin. İş klasörünüzü sık sık yedekleyin.

Herkesin başına mutlaka gelmiştir.

Geçmişe dönük işlerinizin bulunduğu klasörlerin mutlaka düzenli olarak yedeğini alın.

Hatta mümkünse 2 farklı yerde yedek bulundurmak, başınıza istemediğiniz bir durum geldiğinde sizi kurtaracaktır.

Modern Web Tasarımı

Dostluklarınız sanal sosyal ortamlarda kalmasın.

Onları gerçek hayatınıza da taşıyın.

Böylece hem piyasada bilinirliğiniz artar hem de başınız sıkıştığında yardımınıza koşan çok olur.

Tasarımcılık sonu olan bir süreç değildir.

Sadece yetenekle iyi tasarımcı olunmaz.

Yetenekleriniz ne kadar kuvvetli olursa olsun, kimi zamanlar bu iyi bir tasarımcı olduğunuza işaret etmeyebilir.

İyi bir tasarım çalışanı olmak için bu yeteneklerin yanı sıra; iletişim gücü, iş ahlakına ve pratik zekaya sahibi olmak, çalışacağınız yerlerde uyumlu olmak gibi... ekstra özelliklere de sahip olmanız gerekir.

Ben bu tasarım işini öğrendim diyerek bir köşeye çekilip, size yüksek maaşlar ödenmesini hayal ediyorsanız, yanılıyorsunuz demektir.

Tasarım bir yaşam biçimidir. Bir başı ve sonu yoktur. Yaşadınız sürece tasarım öğrenmeye, geliştirmeye ve tecrübe edinmeye devam edersiniz.

Onun için tasarım adına kendinizi geliştirecek ne varsa yapmaktan çekinmeyin.

Hasan Yalçın - 2012

133

Kaynakça ve Kullanım Şartları Bu elektronik kitapta yer alan bilgiler Hasan Yalçın tarafından yazılmış ve derlenmiştir.

Konu ile ilgili mesleki yurt dışı sitelerin yanı sıra kaynak olarak ağırlıklı şekilde hasanyalcin.com adresindeki makalelerden faydalanılmıştır.

Yurtdışı kaynakların başlıcaları; 1stwebdesigner.com webdesignerdepot.com 1wd.co CretiveNerds.com designreviver.com

Görseller ve markalar ilgili kurumların kendilerine aittir ve söz edilen konuya ilişkin örnek oluşturmak amacıyla kullanılmıştır.

Modern Web Tasarımı

Bu E-Kitabın içeriğinin değiştirilerek de olsa herhangi bir şekilde kopyalanması, tekrar yayınlanması veya tekrar dağıtılması yasaktır.

Hasan Yalcin, içerikteki hiç bir yanlışlıktan ya da bunlarla ilişkili olarak oluşabilecek durumlardan ötürü sorumluluk kabul etmez.

Modern Web Tasarımı 2012 Hasan Yalçın

hasanyalcin.com twitter.com/hasanyalcin

Hasan Yalçın - 2012