ModernWebTasarimi v1

1
Modern Web Tasarm
Hasan Yaln - 2012
Modern Web Tasarm

GR
Tasarm Brifingi Nasl Olmal? Blog Dnyas
GEREKLLKLER ve PROJE YNETM
Kurumsal Web Sitesi Tasarmnda Gereklilikler E-Ticaret Sitesi Tasarmnda Gereklilikler Tasarmda Gereklilikler Hiyerarisi Tasarmc ve Blog WEB TASARIMI
........................................................... 2 .............. 7
Ara Yz Tasarmnn 10 Temel Kural Simetri - Asimetri Renk Teorileri Renklerin Dili TASARIMCI Web Tasarmnda Yeni Teknolojiler Ara Yz Tasarmnda Snrlamalar Tipografi ve Web Tasarm Tasarmcnn Grevleri Motivasyon ve Tasarm
WEB TASARIMI TEKNOLOJ ve TEORLER

......................... 66 ........................................................................... 67 ............................ 71 ............................... 81
.......................... 12
........................................... 13
....................................................................................................... 14 ...................................................................................... 15
.................................................................................... 86
..................................................................................... 88 .................................................. 103
Kurumsal Siteler in Ara Yz Tasarm E-Ticaret Siteleri in Ara Yz Tasarm E-Ticaret Siteleri in Renk Tercihleri
................................ 18 ................................. 24 ................................. 38
Sosyal Medya Entegrasyonu ................................................................ 47
Efektif bir E-Ticaret Sitesi in pular .................................... 49 Nasl Bir Tasarm sterdiniz? .............................................................. 63
Modern Web Tasarm
Kendinizi Gelitirmek in pular ............................ Mteri Tasarmc likisi Serbest Tasarmclar in 5 Altn Kural Her Tasarmc in 11 pucu Tasarmclar zerine Notlar Kaynaka ve Kullanm artlar
.......................................................... 109 111
......................................................... 113 .................................................. 120 ............... 125
AIDA Modeli .......................................................................................................... 52
Kiisel Bloglar in Tasarm .................................................................. 54 Portal Tasarmlar ........................................................................................... 60
............................................ 127 ........................................... 131 ..................................... 133
Hasan Yaln - 2012
GR
lkemizde nternetin aktif olarak kullanlmaya balad, ticari ve kurumsal sitelerin de yava yava boy gsterdii 1996-97 yllarndan itibaren grafik tasarm yeni bir dal ile tant, daha sonra dijital ara yz tasarm olarak evrimleecek olan web tasarm.
Teknolojinin geliimi, nternet hzlarnn ykselerek internetin kendisinin hayatmzn bir paras haline gelmesi srecinde hep ekranlarda bir butonun ya da basit bir metin linke tklamann peinde kotuk. Bu E-Kitapta; modern web tasarmndaki gereklilikleri, iyi bir ara yz tasarmnn hangi yollar izleyerek yaplabileceini ve gnmz trendlerinin yan sra, bir tasarmcnn iine yarayabilecek kimi ipularna da birlikte gz atacaz. Umarm keyif alarak tketirsiniz. Hasan Yaln Tasarmcnn El antas www.hasanyalcin.com
Profesyonel olarak ierisinde bulunduum bu 15 yllk srete, web ara yz tasarmlarnn da geirdii evrim, gnmz modern web tasarmnn temel yap talarn oluturdu.
Modern Web Tasarm
Hasan Yaln - 2012
Modern Web Tasarm
Hasan Yaln - 2012
Tasarm Brifingi Nasl Olmal? Bir tasarmc iin en nemli ncelik, elinde tasarmn yapaca i iin sahip olmas gereken bilgilerin bir arada ve anlalr ekilde bulunmasdr.
Gerek fonksiyonel gerekse ierik asndan toparlanm bilgiye brifing diyoruz. Sayfa kurgular ve sre ynetimi brifing zerinden planlanr. yi bir brifing iin gerekli prensipler aadaki gibi sralanabilir. Ama ve Hedeflerin belirlenmesi Tasarm yaplacak i ile ilgili ne istendii ve tm detayl fikirler ortaya konmaldr. Sitenin ama ve hedefleri belirlenmeli ve bu ynde bilgiler brifinge ilitirilmelidir. Bte ve Zamanlama Hedef Kitle ve Proje Kapsam Web sitesinin hedef kitlesinin belirlenmesi tasarm yaplrken belirleyici bir unsur olacaktr. Bebek sitesi ile elektronik para reticisi firmann sitesi grsel olarak elbette farkl unsurlar ierecektir. Proje kapsamn detaylandrmay unutmayn, zel zmler gerektiren aralar, ara yz tasarmna farkl yansr.
Projenin btelendirmesi ve sre ynetimi hassas konulardr, mutlaka nceden netletirilmeli ve sre planlar yaplmaldr.
nceden yaplan planlama hem proje sahibini hem de projeyi reten kii ya da kurumun daha serbest almasn salar.
Modern Web Tasarm
Hasan Yaln - 2012
Grsel Malzeme ve Stil Belirleme
Sitesi hazrlanacak kurumun ya da projenin grsel malzemesini mutlaka temin edin. Site iin belirlenecek stil konusunda mterilerinizle ya da yneticiniz ile ortak bir fikir oluturun. Daha sonra oluturacanz stil iin gerekli malzemeleri toparlayarak yapacanz almay kafanzda oluturun.
Web sitelerinde illstrayon veya doku ve fra kullanmak farkl birer stildir, bu iki rnekte stil oluturmak asndan ilham alabileceiniz detaylar barndrmakta.
Tasarm kltrleri oluturur. Kltr deerleri ekillendirir. Deerler geleceinizi belirler.

Robert L. Engin Modern Web Tasarm Hasan Yaln - 2012
Yaplmayacaklar Tanmlayn!
Tasarm yaplacak site iin olmazsa olmazlar ve olursa olmazlar net olarak Bu noktada fonksiyonel olarak tasarmn skeler halinde veya wireframe olarak belirlenmesini salayarak sonuca ulan. tasarmcya iletilmesi de, genel olarak projenin ekranlarn kurgulanmas ve tasarlanmas aamasnda ok ciddi zaman kazandracak bir unsur olacaktr. rnein erkek parfm ve bakm rnleri satan bir sitede feminen Bu skeler zerinden yaplacak tasarmlarn mutlaka daha sonu odakl ve az renklerin kullanlmamas nemli bir revize getiren almalar olacan da belirtmek gerek. detaydr, yine benzer ekilde bir havayolu firmas sitesinde toprak ve yeryzn andran renklerin kullanmnda sorun kmas olduka muhtemel bir durumdur.
Tm bu balklar altnda belirlenecek ve netletirilecek tasarm brifingi, tasarmcnn proje srecinde baucu kitab olacaktr.
Davransal tasarm kontrol hissi ile ilgilidir. Bu kullanlabilirlii, alglanabilirlii, ve duygularnz da kapsar.
Don Norman - Yazar Modern Web Tasarm
Dnyaca nl popler video sitesi Vimeonun ske almalar. Hasan Yaln - 2012
Kurumsal Web Sitesi Tasarmnda Gereklilikler Kurumsal web siteleri; firmalarn, kurumlarn yapt ileri ve kendilerini anlatp ifade ettikleri alanlardr.
Kurumsal site tasarmlar iin gereklilikler, aslnda tasarm brifinginin zn oluturacak bilgileri ierir. Kurumsal bir web sitesi tasarlayacak tasarmc, firmann tm kurumsal kimliine hakim olmaldr. Baz firmalarn kendileri iin oluturduklar marka rehberleri (Brand Guideline) vardr. Bu rehberler ierisinde, markann kendisini grsel olarak ifade eden her unsur detayl ve kullanm rnekleri ile birlikte yer alr.
Tasarmclar firmann kurumsal ve grsel kimlii hakknda maksimum bilgi ve malzemeye sahip olmaldr.
Moving Brand tarafndan ness iin hazrlanan kurumsal marka rehberi ve hazrlan olduka etkileyici.
Modern Web Tasarm
Hasan Yaln - 2012
Modern Web Tasarm
Hasan Yaln - 2012
10
Eer firmann byle bir rehberi varsa, tasarmcnn iini kolaylaaca gibi, kurumsal bir kimlik oluturmak iin harcanacak ekstra zaman kayb da nlenecektir.
Bu malzemelerin eliinde, firma ile ilgili fotoraf, eer tantlmas isteniyorsa rn fotoraflar, kurum fotoraflar ve metin ieriklere de ihtiya duyulacaktr.
Modern Web Tasarm
Hasan Yaln - 2012
zellikle metin ierik rnekleri, tasarmcnn yerleim almalar yaparken iine yarayacak unsurlardan biridir. Bir birini tekrar eden sayfalarda her ne kadar dolgu metinler (Lorem Ipsum) kullanlsa da, orijinal sayfalarn yerleimini doru ayarlamak iin gerekte sitede yer alacak metinlerin kullanlmas daha faydal olacaktr. Tm bunlarn yannda brifingde belirtilen (Eer isteniyorsa...) grsel stil bilgisi ile kurumsal bir siteyi hazrlamak zere tm gereksinimlerini karlamsnz demektir.
11
Modern Web Tasarm
Hasan Yaln - 2012
12
E-Ticaret Sitesi Tasarmnda Gereklilikler E-Ticaret siteleri dier sitelerden farkl olarak, rn odakl siteler olduu iin, tasarm ncesinde ve tasarm aamasnda kurumsal sitelerdekine ek olarak farkl gereklilikler ihtiva ederler.
Marka kimliinin yan sra sitede yer alacak rnler ile bilgiler, aksiyon (Vitrin, rn detay, sepet ve deme) sayfalarndaki yerleim ve stil, nceden belirlenerek dz bir hat zerinde ilerlenmelidir. Farkl rn gamlarnda, farkl kullanc trlerine (Cinsiyet, Lokasyon, Ya v.b) hizmet veren e-ticaret siteleri, tasarmlarnda bu detayn zerine gitmeli ve grsel olarak sitelerinde yanstmaldrlar.
te yandan E-Ticaret sitesinin trne gre, zgn bir stilin tasarm ncesinde belirlenmesi de baka bir gerekliliktir.
letiim, hem toplumun hem de elektronik ticaretin kalbidir.

Meg Whitman Bakan - CEO Hewlett-Packard Modern Web Tasarm
E-Ticaret sitesi dendiinde her zaman akla kalabalk ve karmak kutular, kocaman satn al ve sepet butonlar gelmemeli... Hasan Yaln - 2012
13
Modern Web Tasarm
Hasan Yaln - 2012
14
Blog Dnyas Bloglar kurumsal ve e-ticaret sitelerinden farkl olarak daha gncel ve nispeten arlkl olarak daha metin ieriklere sahip web platformlardr.
Bloglar gncel haberler ve firmalarn i dnyasndan haberleri paylatklar kurumsal bloglar olabilecei gibi, kiisel de olabilirler.
Bloglarda en nemli unsur, ister kurumsal isterse kiisel olsun, kendini ifade edebilen sade ve temiz tasarmlara sahip olmalardr. Ayrca bloglar, zellikle kurumsal ise firmann bilinirliini artrmak ve arama sonularnda kendine iyi bir yer edinmesi asndan zellikle nem tarlar. Bloglar kurumsal ise, yine ait olduklar firmann kurumsal kimliine uygun grseller ile oluturulmaldr.
te yandan bir ara yz tasarmcs olarak kiisel bir blog sahibi olmann bir ok avantaj olduunu da dile getirmek lazm.
Modern Web Tasarm
Hasan Yaln - 2012
15
Tasarmc ve Blog Tasarm iiyle urap bir site ya da blog sahibi olmayan bir ok profesyonel mevcut. Peki Bir tasarmc neden blog sahibi olmaldr? sorusuna yant bulmak gerekirse, aadaki maddeleri listelemek mmkn. Prestijinizi Dnn
Ne kadar yle olmadn iddia edenler olsa da, blog tutmak ve bunu kamu ile paylamak prestijiniz asndan getirisi olan bir alma olacaktr. Kendinizi tantacanz bir blog, mterilerinizin yaptklarnz ve yapabileceklerinizi alglamas asndan size en kolay zm sunacaktr.
Paylamc Olun
Ekstra Gelir Elde Etme Fikri
Sahip olduunuz blog sayesinde ilerinizi, o ilere ait baar hikayelerini ve kullandnz teknikleri, hatta edindiiniz piyasa tecrbelerinizi meslektalarnzla paylaabilir, bilmeyenlere yol gsterebilirsiniz.
lkemizde hayli zor olmakla birlikte, yksek trafie sahip bir siteye sahip olursanz, kendiniz iin siteniz zerinden farkl gelir modelleri de gelitirebilirsiniz. Sponsorluk, advertorial ya da farkl yollar ile reklam geliri elde edebilirsiniz.
Bilinirlik
Sahip olduunuz blog sayesinde piyasadaki bilinirliinizi artrabilir, site sayesinde farkl topluluk ya da kiiler ile tanarak i ilikilerinizi gelitirebilirsiniz. Sonuta rettiiniz yaratc iler ve onun altndaki imza size ait. Bu anlamda insanlarn o ii kimin yaptn bilmeleri gerek!
Yetenek Geliimi
Site zerinde yeteneklerinizi geliterecek uygulamalarda bulunabilirsiniz. Elinizi altrmak iin yaptnz bir men bar veya zerinde altnz ancak kullanmayacanz bir buton setini sitenizde paylaabilirsiniz. Bu egzersizleriniz iin bir yol halini alarak sizi yaratc tutmaya devam edebilir.
Hasan Yaln - 2012
Modern Web Tasarm
16
Bugne kadar hi bir bayapt, tembel bir sanat tarafndan yaplmamtr.

Salvador Dali Modern Web Tasarm Hasan Yaln - 2012
17
Modern Web Tasarm
Hasan Yaln - 2012
18
Kurumsal Siteler in Ara Yz Tasarm Daha nce de belirttiim gibi kurumsal web siteleri, firmalarn kendilerini ifade ettii, varsa rettikleri rnlerin tantmlarn yaptklar, tketici ile iletiim halinde olabildikleri alanlardr.
E-Ticaret sitelerini maaza ya da maazalar zincir olarak nitelendirirsek, kurumsal siteleri bu maazalarn ana ofisi, ya da yazhanesi gibi deerlendirmek daha akla yatkn bir anlatm biimi olsa gerek...
Aslnda kurumsal site kavramn olduka geni bir ereve kapsamnda tutmakta fayda var.
nk kurumsal siteleri sadece belli zelliklere sahip ticari kurumlar iin deil, ayn zamanda okul, devlet, kamu kurumlar ve hatta orduya ait siteler iin de kullanabiliriz.
zellikle holdinglerin siteleri ierisinde barndrdklar bir ok kurum olduundan genel olarak kurumsal site tanmna en yatkn oluumlardr.
ukurova Holdingin kurumsal sitesi sz edilen hemen her zellii tayor.
Modern Web Tasarm
Hasan Yaln - 2012
Kurumsal siteler cmlesindeki ayrmann z ise o sitede bir rn ya da hizmet satlmad, ancak o rn ve hizmeti reten kurumlar hakknda bilgi verici platformlar olmasdr. Bu noktada iki ii ayn anda yapan oluumlar olduu gereini de gz ard etmeden, bunlarn istisnai durumlar olduunun altn izmek gerekir.
19
Yani hem rettii mal internet zerinden satan hem de o markay reten firmalar hakknda bilgi sahibi olabileceiniz sitelere de rastlamanz mmkndr.
nternet ekonomisi insanlar, irketler ve kresel bazda lkeler iin grlmemi byme frsatlar yaratmaya devam ediyor.
John Chambers - CEO Cisco Systems Modern Web Tasarm
Tanm bu ekilde yaptktan sonra kurumsal siteler iin yaplacak ara yz almalarnda hangi tercih ve eilimlerde bulunmak daha sonuca ynelik olur birlikte inceleyelim.
Erdem Holdingin kurumsal sitesi ne yazk ki an olduka gerisinde kalm, acilen yenilenmeli...
Hasan Yaln - 2012
20
Ana Sayfa Oluturma
Sitenin ana sayfasnda yer alacak bilgilerin ve ieriin mutlaka doru ekilde konumlanmas gerekir. eriin homojen olarak yaylm olmas, firma hakknda ilk bilgilerini almak zere olan kullancnn akln kartrmadan, kolay anlalr bir ekilde sunulmaldr. Kolay anlalabilir bir navigasyon, kullanclarn sitede bulmak istedikleri iin iyi bir balang noktas oluturmaldr.
Modern Web Tasarm
Hasan Yaln - 2012
21
Marka Bilinci Oluturma
Kurumsal siteler, ait olduklar kurumun imajn web zerine tayan platformlardr.
Bir markann ncelikle logosunun aklda kalc olmas gerekir.
Markann grsel iletiimini oluturacak dier unsurlarn da (Fotoraf, tipografik yap v.b) logosu ile bir btnlk ierisinde yine aklda kalc olmas beklenir.
Tketici ya da kullanclar daha sonra gerek internet zerinde, gerekse farkl mecralarda bu elementlerden biriyle karlatnda, hi dnmeye gerek kalmadan, grsel alglar ile rastladklar grsel unsurun o markaya ait olduunu anlamaldrlar. Bu algy yaratmak iin gerek renk, gerekse tipografik almalara nem vermeli, ayn zamanda firmann kurumsal kimliinde yer alan; ekil, maskot ve figrler iin zel almalar yaplmaldr.
Modern Web Tasarm Pizza Hut Pizza Kulbesi demektir, krmz apka olarak algladmz grsel, kulbesinin ats olmasna ramen nerede grsek aklmza Pizza Hut ve pizza gelir. Hasan Yaln - 2012
22
Aramann nemi
Eer kurumsal site bir ka sayfadan oluan siteler deil de geni ieriklere sahip byk bir site ise mutlaka arama zellii eklenmelidir. Aramada yer alacak autocomplete (Otomatik tamamlama) zelliinin faydalarn ilerleyen blmlerde inceliyor olacaz.
letiim Bilgileri
Karmak ve dolu bir ierik arasnda kullancnn diledii bilgiye ulamas, phesiz en nemli unsurlardan biridir.
Bir kurumsal sitenin en nemli detaylarndan biri, firmann iletiim bilgilerine kolayca ulamdr.
E-Blten yelii
Otomatik olarak kullanc mesajn ileten bir alan, ak adres, kroki, harita, telefon numaralar, e-posta bilgileri bu alann en etkin ekilde kullanmn salar. zellikle bu blme eklenecek Google haritalarnn akll telefon kullanclar iin nemli bir ayrnt olacan unutmamak gerekir.
Eer zerinde allan kurumsal site geni bir kitleye hitap eden ve gncel haber ve duyurulara ska yer veren bir kuruma aitse, E-Blten yelii de siteye entegre edilerek, kullanclarn dzenli olarak bilgilendirilmesi salanabilir. E-Ticaret sitelerinde ise, E-Blten birer pazarlama arac olarak kabul edilirler. Bu amala daha fazla E-Blten yesi kazanmak iin, abone olanlara ufak armaanlar, hediye ekleri ve ya kupon kodlar vermek mantkl bir yntemdir.
Modern Web Tasarm
Hasan Yaln - 2012
23
E-Ticaret Siteleri in Ara Yz Tasarm E-ticaret siteleri kurumsal sitelerin aksine, bir rn ya da hizmetin satld, parasnn on-line olarak tahsil edildii web uygulamalardr.
Her ne kadar pratikte yle olmasa da, teorik olarak baktmzda E-Ticaret sitelerini birer fiziksel maaza olarak dnerek ie balamak, ya da yle alglamak, tasarm aamasnda ileri kolaylatracak bir yntem olabilir.
Modern Web Tasarm
Hasan Yaln - 2012
rnein, tekstil rnleri satan gerek bir maazada neler olduunu hayal edelim.
24
ncelikle maazann vitrini ve vitrin tasarm vardr. Mankenlere giydirilmi, tketicinin ilgisini en ok ekebilecek rnler vitrinde yer alr. Ayrca bu tketiciyi maaza ierisine ekmek iin nemli bir yntemdir.
Srf bu yzden iyi vitrin tasarmclar hem ok kymetli ve zor bulunan kiilerdir, hem de gerekten ok iyi para kazanrlar. Mterinizi ieri aldktan sonra ilgisini eken rnleri ve mmknse onunla alakal dier rnleri de mteri yetkilisi sunarak, ieri giren mteriyi satn alma srecine doru ynlendirmeye alr. Eer mteri hayalindeki rne ulap bunu satn alm, stelik de yannda benzer zelliklerde, fazladan bir rn daha satn almsa, ok baarl bir al
Modern Web Tasarm
yi bir vitrin tasarm mteriyi dkkana ekmek iin phesiz en nemli yntem. Hasan Yaln - 2012
Vitrin konusunda bir baka nemli konu da ana sayfa yerleiminde seilen rnlerin; ilgi ekici, uygun fiyatl ve sitenin hedef kitle yelpazesindeki herkese hitap etmesidir. Bu noktada yaplan en nemli yanllardan biri vitrinde eski-tarihi gemi ve stokta olmayan rnleri gstermektir.
25
Sadece vitrinde yer alan deil, sitenin tamamnda tkenmi rnleri gsteriyor olmak kullanc zerinde negatif bir etki yaratacaktr.
Bir alveri sitesi iin en kt senaryo, kullanclar zerinde o sitede nasl olsa yoktur ya da kalmamtr fikri oluturmaktr.
Sanal maazalarn tam bu mantkla altn sylemek mmkn. Mteriniz sitenize gelir, vitrininize bakar, ilgisini eken bir ey bulduunda ise ieri girer. te bu noktada hem gelen mteriyi site iine almak bir maharet olduu gibi, bu aama sonrasnda ona alveri yaptrmak ve baarl bir deme sreci yaatmak da farkl bir marifettir.
Modern Web Tasarm
Hasan Yaln - 2012
Bu noktada doru yaplanm bir kurgu eliinde, doru ara yz tasarm tercihlerinde bulunarak baarl bir E-Ticaret sitesi ortaya karmak mmkn.
26
Bir alveri sitesi iin en nemli unsurun kullanlabilirlik olduunu syleyebiliriz. Kullanc, alverii dz bir hat zerinde, kafas karmadan, hata yapmadan ve sorunsuzca sonlandrmaldr. Tasarm, bu dz ve sorunsuz hatt oluturan grsel eler olarak tanmlanabilir.
nternet zerinde satlar baladktan sonra, insanlarn alveri alkanlklar deiti. Bu karl iin zerine gidilmeli.
William Daley Eski Amerikan Ticaret Bakan-Yatrmc
Modern Web Tasarm
Hasan Yaln - 2012
Alveri yapacak kullancy ynlendirmek bu noktada tasarmn yklenecei grevdir.
27
yi yaplandrlm bir navigasyon, sorunsuz alan bir arama ki arama fonksiyonu iin gelitirilmi bir auto complete (Otomatik tamamlama) ile beslenmi olmas tercih sebebi olur- siteye gelen kullancy arad rne en hzl ve hatasz ekilde ulamasn salayacak unsurlardr.
Sade tasarmlar, kullancya yol gsteren ynergeler, kolay anlalan kontrast renklerde aksiyona ar (Call to action) butonlar, siteye gelen kullancnn zerinde kolay alveri yapma algsn oluturarak sata ynlendirmelidir.
Otomatik tamamlama modern web sitelerinde aramay kolaylatran bir uygulamadr. Modern Web Tasarm Hasan Yaln - 2012
Dnm m, estetik mi? E-Ticaret siteleri iin en nemli olgu elbette ki conversion yani dnm, dier bir deyile, siteyi ziyaret eden kullancnn alveri yaparak siteden ayrlmasdr.
Dnm, zaman zaman tasarmclarn hite istemedikleri durumlar beraberinde getirebilir. Daha skm aralklar, dar alanlarda daha fazla ierik gstermek, arama motoru optimizasyonuna uygun metin kutular, sitenin genel kimliine aykr aksiyon butonlar ve daha fazlas... E-Ticaret sitelerinde daha yaln ve estetik adan kaliteli tasarmlar oluturmak, tasarmcnn bu istekleri bir potada eriterek, nispeten simetri kurallarndan faydalanmas ile bir zme ulatrlabilir.
28
Skk ierikler eit ve dzgn aralklar verilerek mmkn olduunca ferah bir ekilde kullancya sunulabilir.
Her ey ok mu skk? Olsun, kullancya daha fazla rn gsterip sat yapma ihtimalini ykseltmek estetikten daha nemlidir! Modern Web Tasarm Hasan Yaln - 2012
Kurumsal sitelerdeki rahat alanlar, serbest tipografik yaklamlar, hacimli fotoraf ve grafik kullanm, istisnalar haricinde E-Ticaret sitelerinin tasarmnda unutulmas, hatta hi hatrlanmamas gereken unsurlardr. yi bir dnm oran yakalamak iin zerinde durulmas gereken be tayc sayfann mevcut olduundan sz etmemiz mmkn. ncelikle beklediiniz zere sitenin ana sayfas bunlardan biri deil. Bu be sayfay u ekilde sralamak mmkn. Kategori sayfas, arama sonu sayfas, rn detay sayfas, sepet ve deme (Checkout) sayfalar. Kullanc bu sayfalar zerinden ilerledii przsz hat zerinde alveriini tamamlamal ve ziyareti nakite dnmelidir. Peki bu sayfalarda dikkat edilmesi gereken zellikler neler olmal gz atalm. Ana sayfay daha ok yukarda sz geen vitrin mant ile konumlandrmak gerekir. nk asl satn alma sreci ierdeki sayfalarda balar.
29
Eer en iyi yz ticari kuruluu incelemeye kalkarsanz, eminim byk bir ounluunun baarsnn zgn ve yeniliki sat metodlarnda gizli olduunu farkedeceksiniz.
W. Alton Jones
Modern Web Tasarm
Hasan Yaln - 2012
30
ncelikle kategori sayfas bir rn grubunun farkl zelliklerdeki mallarnn listelendii sayfa olarak tanmlanabilir.
Bu noktada genel olarak geerli ve kullanclarn klie alkanlklarna hizmet eden senaryo; sayfa iinde yer alan rn grubu ierisinde filtreleme yapabilme olana salamasdr.
Bu filtreleme ile oluacak etiketler ile kullancnn bir bakma kendi zgn navigasyon birimini oluturmas, ekmek krnts (Bread Crumb) olarak tabir edilen men sistemi ile sayfalar aras balant, rnlerin diledii ekilde listeleme (En yeni, en ucuz, en popler v.b) imkan vermesi. Ayrca bu filtrelemeye farkl fonksiyonlar ekleyerek, kullancnn daha detayl ekilde arad rne ulamas da salanabilir. (Renk, nce bitecekler v.b)
Modern Web Tasarm
Hasan Yaln - 2012
31
1999 ylndan bu yana yaynda olan E-Ticaret sitesi Zapposun rn listeleme sayfalar bir ok giriim iin model oluturuyor. Filtreleme, kullancnn kendi oluturduu kiisel navigasyon ve rnleri eitli kriterlere gre listeleme seenekleri kullanc iin en kolay yol gibi gzkyor. Modern Web Tasarm Hasan Yaln - 2012
Elbette bu noktada anahtar ilevi grecek durum; bu mallarn sayfa iinde kolay anlalabilir, alveri sepetine eklenebilir, simetrik ve birbirlerinden kopuk olmayan sabit bir dzen ierisinde yer almalardr.
32
Arama sonu sayfasnn aslnda listeleme asndan kategori sayfasndan tremi bir baka versiyon olduu kabul edilebilir. Tamamen ayn ya da benzer zellikleri zerinde tar. Burada kilit nokta bu sayfann grnmnden ziyade hizmet ettii amatan sz edilebilir. yi bir arama altyapsna sahip olan sitede, doru rne ulamak en ksa ve hzl ekilde gerekleecei iin, dnme katks da yksek oranda olacaktr.
Autocomplete - Otomatik tamamlama zellii kullanc iin kolay bir arama deneyimi salar...
te yandan arama kutusunun yerleimi ve daha nce sz geen arama yaparken otomatik tamamlama (Autocomplete) zellii ile kullanc yol ald sanal hat zerinde hataya imkan vermeden ynlendirmek te mmkn olacaktr.
Modern Web Tasarm
Hasan Yaln - 2012
rn detay sayfasna geldiimizde nce dikkat edilmesi gereken zellik tahmin edebileceiniz zere, sade ve anlalr bir stilde olmasdr.
33
rnn net ve ak ekilde sergilenen, bir ya da birden fazla fotoraf, rn adet seimi, aksiyonu gerekletirecek ve mmknse kontrast bir Sepete Ekle butonu, -ok uzun olmayankullancnn sorunsuzca, hzl bir ekilde anlayabilecei rn aklamalar eliinde sayfaya yerleimi rn detay sayfas iin gerekli ana balklar olarak tanmlanabilir.
Bunlarn dnda baka fonksiyonel zmler, sayfa ii eklenti ve uygulamalar da, rn detay sayfasnda konumlandrmak mmkndr. Tekstil rnleri satan bir site iin fotorafta rn sergileyen mankenin lleri, bir ayakkab sitesi iin ise ayakkab numaralar katalou gibi kk ve bilgilendirici eklentileri sayfa iine yerletirmek olasdr.
Modern Web Tasarm
Hasan Yaln - 2012
Sepet, genelde deme ilemlerinden nceki son adm olarak deerlendirilebilir.
34
Elbette sepet iin yaplacak yorum aslnda sitenin geneli iin yaplacaklardan farkl deildir.
Anlalr ve fonksiyonel olmas kullancnn kolayca ilem yapabilmesi, iyi bir alveri sepeti iin ne kan unsurlar olarak kabul edilebilir. Daha etkileimli, farkl ara yz elementleri kullanlsa da, asl olarak sepetin grevinin kullancy deme ilemine ynlendirmek olduunu unutmamak gerekir.
Sepet stili, gelien web teknolojileri ile farkl ekillerde de gelitirilebilir.
Bildiimiz ekliyle en klasik haliyle bir alveri sepeti. Modern Web Tasarm
nternet ve e-ticaret irketimizin hayati bir parasdr ve bu yeni organizasyon bize maaza, marka ve katalog gcmz ykseltmekte en byk yardmc olacaktr.
Jerry Storch - Toys R Us Ceosu Hasan Yaln - 2012
Bir E-Ticaret sitesi iin, deme sayfalar phesiz en nemli sayfalardr. Buradaki her ilemin sorunsuz ve dzgn bir akla ilemesi, gerekleecek olan dnmn ana yapta olacandan, dikkat edilmesi gereken bir ok husus vardr. Bu noktada sadece lkemize zg, ayn zamanda tasarmclar iin ba ars yaratan bir problemden sz etmeden gemek olmaz. Yurtdndaki alveri sitelerindeki kolay ve hzl alveri srecinin, ne yazk ki lkemizde gereklemesi mevcut deme sistemleri ve finansal programlar yznden yznden zor gzkmektedir.
35
lkemizde deme srasnda bir ok farkl parametre devreye girerken, yurtdnda deme ilemi tek bir harekette ve olanca kolay ekilde zlyor.
zellikle lkemize zg taksit sistemleri ve bonus-parapuan programlarna bir de satc firmalarn hediye ve kupon kodu gibi promosyon almalar eklenince, alveri sitelerinin deme sayfalar neredeyse bilmece haline dnyor.
Modern Web Tasarm Hasan Yaln - 2012
Bu durum her ne kadar kullanclar zerinde alkanlk yaratsa da, deme sayfasnda vazgeen, yolunu kaybeden kullanclar olduu gereini deitirmiyor. Bu aamada yaplacak iyiletirme ve dzenlemelerin dnme katks olduka fazla olacaktr.
36
Tabloya bu ekilde baktmzda deme sayfalar ile ilgili farkl modeller kullanlabilir. Burada ak ve aksiyon butonlarnn algs, ilemin tek sayfada dikey bir ekilde mi, yoksa her admda baka bir sayfada ilem yaparak ve de bunu bir ilerleme ubuu ile grselletirerek kullancya sunulaca genelde proje sahibinin tercihi olmaktadr.
Alveri srecinde deme aamasnda yaklak vazgeme oran %30 seviyesinde.
Modern Web Tasarm
Her iki yntemin arasnda belirgin bir fark olmasa da tek sayfada tamamlanan deme (Checkout) ilemi modelinin, kullancnn bulunduu sayfadan kopmadan ilemini tamamlamas asndan nemli olduu kabul edilebilir.
Hasan Yaln - 2012
37
Modern Web Tasarm
Hasan Yaln - 2012
38
E-Ticaret Siteleri in Renk Tercihleri Renkleri sevme durumu genel olarak kiisel bir tercih gibi dursa da, kiilerin renkleri nasl alglad konusu E-Ticaret sitelerinin tasarmnda zaman zaman nemli bir hal alabilir.
Genel hatlar ile ana renk tonlarn ticari bir bak as ile incelediimizde ortaya kan sonu ortalama olarak u ekilde;
39
Modern Web Tasarm
Hasan Yaln - 2012
40
Modern Web Tasarm
Hasan Yaln - 2012
41
Modern Web Tasarm
Hasan Yaln - 2012
42
Modern Web Tasarm
Hasan Yaln - 2012
43
Modern Web Tasarm
Hasan Yaln - 2012
44
Modern Web Tasarm
Hasan Yaln - 2012
45
Modern Web Tasarm
Hasan Yaln - 2012
46
Modern Web Tasarm
Hasan Yaln - 2012
47
Sosyal Medya Entegrasyonu E- Ticaret sitelerinin gerek bilinirliinin artrmas, gerekse halkla ilikiler almalarnn bir blmn yrtmek, ayn zamanda markasnn hayranlarn oluturmak amacyla sosyal medya sitelerinde markalar ile ilgili faaliyetlerde bulunmas, gnmzde vazgeilmez bir gereklilik halini alm durumda.
Tasarmcnn bu konuda da entegrasyonu salamak zere yeni ufuklar amas gerekmektedir.
zelletirilebilir Facebook hayran kutular, dinamik Twitter eklentileri, beeni ve paylam kutular ve ikonlar bu entegrasyonun vazgeilmez unsuru.
eitli sosyal medya entegrasyon uygulamalar...
Modern Web Tasarm
Hasan Yaln - 2012
Sosyal Medya entegrasyonunun faydalar. Bir mal-rn, ya da hizmet satyor, geni kitlelere hitap ediyorsanz, kurumunuzun sosyal medyada yer alma vakti gelmi demektir.
Sat sonras iletiim Sosyal medyada yer almak, rnlerinizin satn gerekletirdikten Kurumlarn ok geni kitlelere ulamak iin kulland klasik medya aralarnn sonra da tketicileriniz ile iletiim yerini, kullanc ve tketiciler ile bire bir halinde kalmanz salar. iliki kurabildii sosyal medya zerinden kolayca ve harcama yapmadan duyurulmasn salar. Geni Kampanyalarn Yerini Kk Etkileimler Alr effaflk Firmalarn tketicilerine ulatrmak istedii genel ve kontroll mesajlarn yerini, effaf bir firma yaps, her konuda bilgi veren-alan etkileimli bir model alr.
48
Ayrca Sosyal Medyay firmanz adna etkin kullanmak her alanda ulalabilir olmanz salar
Modern Web Tasarm
Hasan Yaln - 2012
49
Bu noktada kullanclarn keyifli bir alveri deneyimi yaamas iin ncelikle arayz tasarmnn gl olmas gerekir.
Efektif Bir E-Ticaret Sitesi in pular Bir e-ticaret sitesini gelitirirken, eitli eler hakknda iyi dnmek ve iyi hazrlk yapmak gerekir. E-Ticaret sitelerinde nceliin mterilerle yaratlan etkileim olduunu unutulmamaldr.
Kullanlabilirlik kurallarn unutmadan hazrlanacak, iyi ve kolay alglanabilir bir tasarm ile mterilerin alveri deneyimi kalitesi kolayca artrlabilir. Kullanlabilirlik Bir E-Ticaret sitesine gelen kullanclarn esas odak noktas elbette ki sitede sunulan rn veya rnler olmaldr. Kullancnn akln kartrmadan, sabit bir dzen iinde rnleri sunarak, iyi yaplandrlm navigasyon eleri ile kolayca yolunu ve istediini bulabilecei bir tasarm, phesiz satlar krkleyen bir etken olacaktr. Ksacas bir E-Ticaret sitesinde kullancya sunulacak en nemli seenek kolay alveri yapabilme algsdr.
Bir kullancy bilmedii bir teknolojiyi renmesi iin zorlamak yerine, teknolojiyi onun iin uyarlamak daha mantkldr.
Larry Deniz Modern Web Tasarm
Hayal edebileceiniz en kt kullanlabilirlik rnei :)
Hasan Yaln - 2012
50
Vitrin
E-Ticaret sitelerini de birer ticari iletme olarak kabul edebiliriz, bir i yerinin nasl en nemli ve can alc yeri vitrini ise, bir al veri sitesinin de en nemli alan vitrinidir. Bu noktada dikkat edilmesi gereken ayrntlar; rnleri doru semek, iyi vurgulamak, temiz ve anlalr fotoraflar kullanmak, stokta olmayan rnleri vitrinde gstermemek, potansiyel mterileri bunaltmamak iin benzer zelliklere sahip rnleri art arda sunmamak gibi zellikler sralanabilir.
Dier yandan kampanya, indirim ve duyurularnz iin de siteniz zerinde ayracanz alanlarn, kullanclarnzn kolayca grebilecei ve anlayabilecei ekilde ayarlanmaldr.
Eer bir kullanc bir rn peinde sizin sitenize kadar gelmise, gzel bir sunumla o rn ona satabilirsiniz.
Ykleme Zamanlar
Potansiyel mterilerinizi hayal krklna uratmann en nemli yollarndan biri de hzl ykleme zamandr.
Yani kapnza kadar gelmi olan mteriyi karmamak iin hzl yklenen ve stabil alan bir steye sahip olmanz gerekir. Kullanc adeta gerek bir markette gezinircesine kolay ve hzl bir ekilde onun iin hazrladnz reyonlar gezmelidir.
Kullanclarn hzl ve sorunsuz bir ekilde arama yaparak, dzenli ve iyi listelenmi sonulara ulamasn salayarak, satlarnz olumlu ynde etkileyeceini unutmayn. Hzl Alveri Sreci statistiklere gre E-Ticaret sitelerinde kullanclarn %30dan fazlas, satn almay son aamada tamamlamadan vazgeiyorlar. Bu sebeple sz geen sreci en hzl ekilde tamamlamak yine satlar etkileyecek bir etken olacaktr. yelik formlar, onay sreleri gibi admlarn saysn mmkn olduu kadar azaltmak, gereksiz olanlar tamamen kaldrmak, kolay anlalabilir arayz ve buton tasarmlar ile mterinizi hzlca kasaya ynlendirip demesini almak, en ncelikli ama olmaldr. Bu noktada kullancnn kafasn kartrp satn alma yolunu tkayacak detaylardan kanmak gerekir.
51
Taze erik
Sitenizde raf mrn tketmi eski model mallar, artk gncelliini yitirmi rnler eer vitrininizde yer alyorsa bunlar kaldrp, ayn alan en yeni ve ilgi ekici rnler ile donatmanz gerekiyor demektir. , Eksik bilgilerin, eski rnlerin, stokta kalmam mallarn kullancnn keyfini karan en nemli unsurlardan olduunu unutmayn.
Ykleme zamanlarn hzlandrmak iin ise al veri sitenizin iyi optimize edilmi olmas gerekir. Arama Arama fonksiyonu bir E-Ticaret , sitesinin en nemli elementlerinden biridir.
Arama kutusunun kolay ulalabilir bir alanda ve gerekiyorsa birden fazla sayda olmas ileri kolaylatracaktr. (Hem hedaerda, hem footerda...)
Modern Web Tasarm
Hasan Yaln - 2012
52
AIDA Modeli Aslnda klasik pazarlama ilkelerinin ksaltlm olan AIDA modeli pekala E-Ticaret siteleri iin de geerli biimde uygulanabilir.
Bu modelde nce mterinin / kullancnn dikkati ekilir, ardndan ona sunduunuz rne ilgi duymas salanr. lgisini ekip incelemesini saladktan sonra ise ona ihtiya duymasn salayacak unsurlar yerine getirip harekete gemesi ile sonulandrlr. E-Ticaret siteleri iin sitenin eitli katmanlarnda (ana sayfa, rn detay sayfalar v.b) bu ilkeler yerine getirelerek, kullancnn alverie ynelmesi salanabilir.
Bu model, biraz daha gelimiine ise NAIDAS ad veriliyor. Henz var olmayan bir rne ihtiya duymakla balayan model yine E-Ticaret sitelerine iin uygun fikirler gelitirmek iin ufkunuzu aabilir.
NAIDAS modelinde ise sre kiinin ilgili rne ihtiya duymas ile balar.
53
Bu ihtiyalar gz nne alarak tketiciye sunduunuz rn ile onun dikkatini ekip, devamnda ilgi duymasn salayacak unsurlar yerine getirerek, onu istemesini salamak gerekir. rne istek duymaya balayan tketicinin hareket etmesini salayarak (E-Ticaret siteleri iin bu aama uygun fiyat seenekleri, kampanyalar, taksit ve farkl deme seenekleri sunularak gerekletirilebilir.), rn satn alp, tatmin duygusuna erimesi ile, tamamlanr.
Bu modeller gz nne alnarak yaplacak tasarm, iyi bir proje ynetimi ile birlikte ortaya ok daha ilevsel ve kar getiren bir site ortaya karacaktr.
Mteriler kendi sebeplerinden dolay alr, sizin sebeplerinizden dolay deil.

Anonim Modern Web Tasarm Hasan Yaln - 2012
54
Kiisel Bloglar in Tasarm Son zamanlarda saylar olduka artan kiisel bloglar, genel ya da bir konu hakknda derinlemesine bilgi veren web oluumlar haline dnt.
Kiisel bloglar iin aslnda klielemi denilebilecek tasarm kriterleri mevcuttur.
Bloglar temelde, aslnda tasarmdan ve estetik deerlerden daha nemli olan gncel ve zgn ierik sahibi olmaldr. Ancak bu unsurlarn yan sra temiz ve gzel tasarlanm bir blogun tekrar tekrar ziyaret edilmemesi iin hi bir sebep yoktur.
Kiisel bloglar eitlerine gre ayrtrmak gerekirse genel bilgi verenler , daha ok gnlk gibi kullanlanlar, gncel yaama dair deneyimlerin aktarld veya bir konuya odaklanm ve o konu hakknda derinlemesine bilgiler veren, inceleyenyorumlayan olarak, nitelendirilebilir. Konu odakl bloglara rnek olarak yemek ya da moda bloglar rnek gsterilebilir.
Modern Web Tasarm
Kiisel moda bloglar gnmzde olduka popler. Hasan Yaln - 2012
55
Dnyadaki nemli yemek boglarndan biri. Rahatsz etemeyen bir tasarm ve basit bir estetikle, kullancya istedii tm bilgileri sunuyor. Modern Web Tasarm Hasan Yaln - 2012
56
Bloglarn Genel Mimari Yaps
Modern Web Tasarm
Hasan Yaln - 2012
Bloglarn genel olarak yaplar bir nceki sayfada grdnz gibidir.
Genelde siteye girilen en son ierii gsteren bir ana sayfa, hakknda sayfas, iletiim formu, kategoriler ve blog yazlarndan oluur. Ancak elbette bu yap talarnn yanna, bir de iyi alan bir arama motorunu da eklemek lazm. Bir blog almasnda kategorileri iyi semek ve fazla datmadan devam etmek nemli unsurlardan biridir.
Blog tasarmnda dikkat edilmesi gerekenler
57
Bir blog tasarmn hazrlarken nem verilmesi, gzden karlmamas gereken gelere birlikte gz atalm.
Resim ve fotoraflar her zaman sitenizi zengin gsterir ve deyim yerinde ise satar. Mmkn olduunca byk ve kaliteli fotoraflar kullann, kullanacanz grsellerin eninin en az 500 piksel olmasna zen gstermelisiniz.
Gereinden fazla kategoride karmak bilgiler retmeye balamak, bir sre sonra artan ierik ile birlikte blog bir portal haline gelebilir.
Bloglar, herkes iin internet eriimi olan heryerde, kullanlabilir bilgi yaratyor.
George Siemens Modern Web Tasarm Hasan Yaln - 2012
Bloglar ou zaman sosyal medya aktivitelerinin odak noktas olurlar. Bir blog tasarlarken sosyal medya entegrasyonu atlanmamas gereken unsurlardan biridir.
58
Bylelikle hem blog sahibinin kullanc saysn arttraca gibi, ierik hakknda da yorumlar ile katk salanm olur.
Tm bu dzenlemeleri yaparken Facebook entegrasyonunu da unutmamak gerekir. Yazdnz, paylatnz yazlarn Facebook profilinizde dzgn olarak grntlene bildiinden emin olun.
Modern Web Tasarm
Hasan Yaln - 2012
Genel olarak monitr znrlkleri ykselmi olsa da yapacanz blog tasarmnda hala 1024x768 piksellik bir alan zerinde almanz, eriim asndan daha iyi sonu almanz salayacaktr.
59
Mobil cihazlar ve tablet kullanarak sitenize erienler bylelikle ieriinize sorunsuz olarak ulaacaklardr.
Kolay anlalabilir bir navigasyon, konu odakl yazyorsanz o konu ile ilgili, genel ve kiisel bir blog sahibi iseniz kiiliinizi yanstan bir renk seimi faydal olacaktr. Bloglarn bireyler tarafndan yazlp yaynlandn dnrsek; bir de fotorafnz eklemeniz, kullanclar da zevkle okuduklar yazlarn sahibini kafalarnda canlandrabilir. Sade, ferah kolay alglanabilir tasarmlar, ierii arlkl olarak yazlardan oluan bloglarn daha kolay tketilmesine yardmc olacak unsurlardr.
Modern Web Tasarm
Hasan Yaln - 2012
60
Portal Tasarmlar 2000li yllarda neredeyse fenomen olan portallar, imdilerde etkisini yitirmi gibi gzkseler de kendi kulvarlarnda yollarna devam ediyorlar.
Portal kelimesinin szlk anlam byk giri kaps olarak tanmlanabilir. nternet zerinde ise, bir ok farkl ierii bnyelerinde barndran ve kullanclarna sunan web sitelerine portal deniyor.
Portallar trlerine gre dikey veya yatay olarak ikiye ayrlrlar. Yatay portallar ierisinde bir ok farkl kanal ve kategori altnda bilgiye eriim salarken, dikey portallar tek bir konu bal altnda (rnein Spor, Magazin, Moda, Yaam) farkl kategoriler ve kapsaml ierikleri ile kullanclarn beslerler. imdi bu kriterlere genel olarak gz gezdirelim.
Modern Web Tasarm
Portal tasarmlarnn da tpk portallar gibi kendine zg tasarm kriterleri vardr.
ntvmsnbc haber portal nispeten iyi haber siteleri ierisinde gsterilebilir. Ancak lkemize zg deiiklikler, siteyi yurtd emsallerinin gerisinde brakmaya zorluyor.
Hasan Yaln - 2012
ncelikle portal tasarmlarnda en nemli ayrnt siteyi adeta srtnda tayacak olan navigasyon elerinin iyi ve anlalr ekilde tasarlanmasdr. Dikey veya yatay olsun, portallarda okunabilirlii artrmak iin, ana tema rengi olarak beyaz rengin tercih edilmesi, yazlar iin de kontrast koyu renkler kullanlmas nerilebilir.
61
Kt bir navigasyon tasarm kullancy hi tercih etmeyecei ya da istemedii yerlere gtrebilir.
stte iyi bir navigasyon rnei, aada ise kt bir navigasyon rnei mevcut. kiside ayn ierie sahip olmasna ramen alglanabilirlikleri olduka farkl.
Baz zel durumlarda bu kural deikenlik gsterebilir. Kimi yaam stili, mzik ya da magazin portallarnda koyu renk kullanlmas, daha uygun olmakla birlikte mmkn olduu kadar kanmak daha faydal olacaktr.
Bu tip sitelerde 2 ana renk ve onlara yardmc olmak zere bu renklerin bir ka ton ak ya da koyusunun kullanlmas tasarmda ve pratikte daha iyi sonular verecektir.
Modern Web Tasarm
Turk nokta net yllar ierisinde ok defa tasarmn deitirmesine ramen seviyesini korumaya alan yatay bir portal. Hasan Yaln - 2012
Portal tasarmlarnda dikkat edilmesi gereken bir dier zellik ise, grsel yapnnn mmkn olduu kadar modler ve akkan ekilde hazrlanmasdr.
62
Benzer ya da ayn boydaki ierik kutucuklar, barlar, butonlar ksaca ara yz adna tam ve eksiksiz bir UI kit oluturup, bunu sitenin farkl kanal ve ieriklerinde rahata, yeniden boyutlandrmadan ve eklini deitirmeden kullanmal ve bu ekilde tam bir grsel btnlk salanmaldr.
Farkl boylarda ve renklerde, simetrik olmayan, birbirleri ile uzaklklar farkl ierik elementleri, ekranda karmakla sebep vererek, zaten hzl tketmeye alkn olan kullancnn siteden ayrlmasna neden olacaktr. Son olarak portal ieriinde grsel yaz dengesini iyi ayarlayarak, kullancya ierii hem grsel hem de yaz olarak eit arlkta sunmann iyi bir yntem olduunu, genel olarak kullanlan grsellerin ise belli bir kalite seviyesinde olmas gerektiini bilmekte fayda var.
Modern Web Tasarm
Lig Tv sitesi dikey portallar iin iyi bir rnek tekil etse de bu tasarmla ne yazk ki snfta kalyor. Detaylardaki saysz hata, siteyi karmaklatryor. Hasan Yaln - 2012
63
Modern Web Tasarm
Hasan Yaln - 2012
64
Ben bakan olmadan nce st dzey bilim adamlar bile interneti duymamt. imdi kedimin, hatta orabmn bile bir web sitesi var!
Bill Clinton , Amerika Birleik Devletleri Eski Bakan -1996 Modern Web Tasarm Hasan Yaln - 2012
65
Modern Web Tasarm
Hasan Yaln - 2012
66
Modern Web Tasarm
Hasan Yaln - 2012
67
Simetri - Asimetri Genel olarak web ara yz tasarmnda ferahlk ve sadelik, web sitelerinin alglanabilirliini artrmakta, kullanm ise kolaylatrmaktadr.
Bir ara yz tasarmnda ki bunun mutlaka bir web sitesi olma zorunluluu yok ferahl ve basitlii en kolay ekilde simetriden yararlanarak ortaya karmanz mmkn. Ekran zerinde yer alan objelerin birbirine uzaklklar, birbirleri arasndaki uzaklklar veya objelerin iini kapsayan ieriklerin, yine obje kabuuna uzaklklar eit oranda olmaldr. Bu hem dzgn tasarmlar ortaya karmanz, hem de yarattnz tasarmlar belli bir ahenk ierisinde ekrana yanstmanz salar.
Bu eleman ve objelerin birbirlerine olan uzaklklar fazla abartmamak kayd ile olduka geni braklabilir. Gnmz trendlerine 10ar piksellik aralklar yerine, artk 20er piksellik boluklar daha sk tercih edilmekte.
Modern Web Tasarm
Hasan Yaln - 2012
Simetriden sz etmiken Grid sisteminden bahsetmemek olmaz. Grid sistemi ya da Trkesi ile zgara sistemi yeni nesil web sitelerinde kullanlan bir hizalama yntemi denebilir.
68
Eit aralklarla blnm, farkl znrlklere uygun klavuz izgileri ile ayrlm zgara sistemi ierisinde tasarm yapmak, hem tasarmclarn iini kolaylatrmakta (ortaya gayet simetrik ve dzgn almalar kmakta) hem de bu sistemle hazrlanm kod dosyalarna sahip ara yz gelitiricilerinin de kolay ve standart kodlama yapma imkan tanmaktadr. Bir ara yz almasndaki simetrik unsurlar, ok geni bir alandan, sitenin en ufak unsuruna kadar uygulamak mmkndr. 960 Grid System (http://960.gs/) bu tip zgara sistemleri ierisinde en popler olanlardan biridir. Tasarmlarnz bu zgaralar zerine oturtursanz, hata yapma ansnz da en aza indirgermi olursunuz.
Modern Web Tasarm
Hasan Yaln - 2012
69
Modern Web Tasarm
Hasan Yaln - 2012
70
Modern Web Tasarm
Hasan Yaln - 2012
71
Web Tasarmnda Yeni Teknolojiler Gnlk hayatmzda son derece hzl gelien teknoloji, bizlere bir ok yenilik sunuyor. Web Tasarm dnyasnda da durum farkl. Yeni gelien teknoloji ve deien trendler, tasarmcnn gncel kalma gerekliliini bir kez daha hatrlatyor...
Kiisel fikrim; tasarm benim iin bir moda dngsdr. 2010 ve 2011 ylnda tablet ve zellikle web tasarm, zaman iinde dokunmatik akll telefonlarn iyice sk sk deiime urayan kendine zg hayatmza girmesi ile, tasarmclarn eilimleri olan bir grsel iletiim dal. yaratc fikirleri farkl metod ve trendlere doru ilerlemeye balad. 2012 ylnda Sk sk deien trendler, kullancya daha da yine mobil arlkl tasarmlarn hayatmzdaki kapsama alan artarak deiyiyi ve yenisini sunmak iin yaplan gelitirmeler, web tasarmnda durmak vam edecek gibi grnyor. bilmeyen bir sreci oluturuyor. Yepyeni magazin stili tasarmlar, eitli finansal mobil uygulamalar, takvim Web sitelerinin daha ekici, daha kullanc dostu ve kolay kullanlabilmesi uygulamalar, farkl popler web uygulamalarnn mobil uygulamalarn iin neredeyse her gn farkl bir kod, bu yl iinde grmek mmkn script ya da tasarm retiliyor. olacaktr. Bir tasarmc olarak her zaman bu Grsel olarak da trendin Apple stili konuda uyank kalp, yeni gelimeleri olacan n grmek ise imdiden takip etmek bir zorunluluktur. mmkn. Ayrca bu duruma paralel olarak da QR kodlarnn patlama Peki nmzdeki dnem iin nasl bir hazrlk yapmal, birlikte gz atalm. yapmas beklenebilir.
Modern Web Tasarm
Mobil Uygulamalar
Tabletler iin gelitirilen arayzler, ara yz tasarmnda farkl bir uzmanlamaya doru yol alrken, tasarm kalitesinin artmasna, ayn zamanda web arayzlerinin de gelimesine sebep oluyor.
Hasan Yaln - 2012
72
Modern Web Tasarm
Hasan Yaln - 2012
nceki sayfada bir iPad uygulamas iin gerekli tm elementleri tek bir dosyada toplanm halini grdnz. Bu noktada bir tasarmcnn ara yz adna hemen her farkl uygulama iin alma yapma esnekliinin bulunmas gerektiini, rnein kiosk ekranlarnn tasarmlar konusunda da bilgi ve deneyim sahibi olmas gerektiini hatrlayalm.
73
Bu ve benzeri almalar kaynak dosyas olarak internet zerinde bulabilirsiniz.
Kiosklar da gerek kullanm ekli, gerekse uygulama mant asndan mobil uygulama tasarm kategorisinde deerlendirmek mmkn.
Aslnda tablet, akll telefon, kiosk gibi ekran uygulamlarnda bilinmesi gereken detay, ara yzn elle, parmak ya da stylus tarz yardmc kalemlerle kullanlmas gerektiidir. Bu tasarm alan iin Fiziksel Arayz Tasarm eklinde, genel bir tanmlama yapmak mmkndr.
74
Responsive (Duyarl) Web Tasarm
Duyarl tasarmlar, kullancnn ekran znrl ve seeneklerine gre hareket ederek, eriimde platform farkn ortadan kaldryor...
zellikle son dnemlerde sk sk duyduumuz Responsive (Duyarl) Web tasarm kavram, eninde sonunda bir web standard haline gelecek gibi gzkyor. Duyarl tasarmlar farkl tarayc ve znrlk seeneklerinden bamsz olarak, kullancya ierii ayn sayfa ve stilde sunulmasn ngryor.
Reveal bir wordpress temas. Yeni nesil duyarl tasarm olarak tasarlanp gelitirilmi. Yuklarda temann tam znrlkteki hali, yanda ise minimum znrle indirgenmi versiyonu gzkmekte. Her iki versiyonda da tm ierie eksiksiz, ancak farkl bir akla ulamanz mmkn.
Her cihaz ve tarayc iin farkl versiyonlarda sayfalar retmek; sunucu masraflar, tasarm giderleri gibi bir ok skntnn nn kesebilecek duyarl web tasarm anlay, nmzdeki yl daha ok karmza kacak gibi grnyor. Duyarl tasarmlar tarayc tabanl mobil uygulamalarn vazgeilmezi olabilir.
Modern Web Tasarm
Hasan Yaln - 2012
75
Modern Web Tasarm
Hasan Yaln - 2012
76
Css3, Html5 & Animasyonlar
Kodlama dnyasndaki gelime ve iyilemeler, tasarmcnn yaratcln artracak yollar ayor...

Kod yazlm teknolojisindeki gelimeler, yaknda Flash uygulama ve animasyonlarn sonunu getirecek gibi gzkyor. Bu srecin nmzdeki dnemde daha da hzlanacan n grebiliriz.
Artk Flash teknolojisi ile yaplan hemen her ey hatta daha fazlasn HTML5 teknolojisi ile yapmak mmkn olacak. te yandan Css3 ile daha gelimi, tasarmcnn daha yaratc ara yzler gelitirebilecei kod alt yaplar rahata oluturulabiliyor.
Gelitirilen kodlama teknolojilerinde css3 tasarmcdan, html5 programcdan rol alyor!

Fatih Hayriolu - Arayz gelitirici Modern Web Tasarm
Hasan Yaln - 2012
77
Modern Web Tasarm
Hasan Yaln - 2012
78
Dinamik Tipografi
Bir sredir web sitelerinde web-safe dediimiz webe uygun sistem fontlarn kullanmak zorunda deiliz. Bu u anlama geliyor; artk tasarmlarnzda tipografik olarak dilediiniz kadar olmasa da eskisinden kat be kat zgrsnz.
FontFace, Google Web fonts gibi uygulamalar ile artk tasarladnz web sitelerinde dilediiniz fontu kullanabilir, bylelikle tasarmlarnz sekin bir hale getirebilirsiniz. Tipografinin tasarm zerindeki etkili gcn de en etkin ve grsel biimde kullanabilirsiniz.
Tipografinin ncelikli ve asl amac yazl bilgileri ulatrmaktr. Hibir argman veya sebep bu gerei deiteremez...
Emil Ruder - Tipografi Sanats Modern Web Tasarm Hasan Yaln - 2012
79
Modern Web Tasarm
Hasan Yaln - 2012
80
Sabit Navigasyonlar ve Modal Pop-Uplar
nmzdeki dnemde web uygulamalarnda ska grnmesi beklenen uygulamalardan biri de sayfaya sabitlenmi navigasyonlar.
Sayfay ne ekilde hareket ettirirseniz ettirin, her durumda eriilebilir ekrana sabitlenmi navigasyonlar, hzla bir moda haline dnebilir.
te yandan bir ok sitede artk daha sk grdmz modal pop-up, dier bir deyile light box uygulamarna da daha sk rastlyoruz. Bu tasarmc iin yer kazanmak anlamna gelirken, kullanc iin daha fazla ierie daha dar bir alanda erimek anlamna geliyor. ye girileri, eitli hesaplama ve bilgi ekranlar, galeriler, bulunduunuz ekrandan kopmadan tm bu ve benzeri uygulamalar grntlemenizi salayan pencere sistemleri, phesiz internetin usuz bucaksz okyanusunda srf yaparken ileri kolaylatran unsurlardan biri.
Modern Web Tasarm
Hasan Yaln - 2012
81
Ara Yz Tasarmnda Snrlamalar Web teknolojileri ne kadar geliirse gelisin, tasarm tarafnda, gerek teknik gerekse yaratc adan bir takm snrlama ve engellemeler mevcuttur.
Bir web ara yz tasarmcs elbette alrken snrsz derecede zgr olmak, yaratc grsellerini ekrana rahata tamak ister. nternet ve webin kendine zg baz kurallar zaman zaman bu duruma engel tekil eder. Tasarm dnyasnda hemen hemen en ok kstlamaya maruz kalan dal web ara yz tasarmdr. Renk Snrlamalar ncelikle bir web ara yz tasarmnda tutarllk nemlidir. Bu noktada Kullanacanz renkler iin de aynsnn geerli olduunu kabul edebiliriz.
Ancak bu kstlamalar, gerek yaratc alanda grsel, gerekse ilevsel ve kullanlabilirlik alanlarnda son kullancnn gerekli ekranlara en salkl ekilde ulamas iin, nem arz ederler. Sonu olarak iin z bu kstlamalar, kullanc ile doru iletiimi salamak ve veriyi eksiksiz aktarmak iindir. Unutmayn ki, iyi tasarm herkese ayn mesaj ileten tasarmdr.
Modern Web Tasarm
Genel olarak tasarmn yaptnz firma, iin kurumsal kimliine uygun bir ya da iki ana renk seerek, ayn palet zerinde bu renkleri destekleyen veya siyah-gri-beyaz lsnden birini de yannza alarak tasarmnz srdrebilirsiniz. Renk seimlerinizi etkileyecek bir baka unsurda platformlardr. Setiiniz renklerin ortalama olarak hemen her ekran tipinde birbirine yakn sonu vermesi tercih edilmelidir. Renk says azaldka tutarllk ykselir. Yaptnz tasarmlarn anlalabilirlii artar, tasarm sadeleir ve basitleir.
Hasan Yaln - 2012
82
Renkleri kt kullanmann da bir snr var. Bu rnekte o snr biraz alm sanki! Site eski olabilir ama bu kt renk seimleri yapmanz ve uygulamanz iin bir bahane deil. Modern Web Tasarm Hasan Yaln - 2012
83
Bir web sitesinde; ne, nasl yaplmamal konusunda gereki bir rnek! www.arngren.net Modern Web Tasarm Hasan Yaln - 2012
84
Tipografide Snrlamalar
Dinamik Tipografi blmnde de grlecei zere, aslnda web zerinde tipografik snrlamalar konusunda getiimiz 5 ylda olduka geni bir yol katedildi.
Daha nce yksek imaj boyutlarn gze alarak, tasarma eklenen resim-fontlarn yerini imdilerde Flash veya Javascript ieren sIFR , Cufon veya @ font-face , Typekit ve FontDeck gibi yeni farkl alternatifler ald. Dinamik fontlarn kullanlaca yerlerde, artk daha estetik ve tasarmcnn o tasarm iin uygun grd zel fontlar devreye girerek, daha yaratc ekranlar oluturulabiliyor.
Btn bu gelimeler elbette tasarmcnn nn, ufukunu aan almalardr.
Tasarmcnn alt projeye uygun, farkl boy ve tipte font kullanmamas, en bandan beri dikkat etmemiz gereken sadelik ve alglanabilirlik kurallarn atlamadan seimler yapmas gereklidir.
Modern Web Tasarm
Hasan Yaln - 2012
85
Tasarm, bir biimi ve ierii birlikte ortaya koyma yntemidir. Tasarmn, tpk sanat gibi, birden fazla tanm vardr; tek bir tanm yoktur. Tasarm sanat olarak, estetik olarak tanmlanabilir. Tasarm bu kadar karmak olduu iin ok basittir.
Paul Rand - 1914-1996 - Amerikal Modernist Modern Web Tasarm Hasan Yaln - 2012
86
Renk Teorileri Aslna bakarsanz renk teorileri zerine sayfalar, ciltler dolduracak kadar konuulabilir, yazlabilir. Asl iimiz olan web ara yz tasarm iin basit renk teorilerine gz atalm...
Gerek dnyada gzmzn alglayabildii toplam renk says, kaba bir hesapla yaklak 10.000.000dur. Bir bilgisayar ise 16.8 milyon renk gsterebilme kapasitesine sahiptir. Sir Isaac Newton 1666 ylnda renklerin ilk dairesel diyagramn gelitirdi. O zamandan beri bilim adamlar ve sanatlar bu kavram hakknda saysz varyasyonlar oluturdu ve tasarlad. Zaman zaman tartmalara yol asa da renk emberleri ana renklerin yanna mantksal bir dizi ile oturtulmu yan renkleri ierirler.
Ancak renkleri plak gzle grmenin ve alglamann, k, hava koullar ve eitli evresel artlarn da etkilediini hesaba katarsak, aslnda bu rakam sonsuza ulaabilir. Renkler konusu ok derin olmakla birlikte tabloya uzaktan baktnzda karnza kacak olan ey, renk emberleri olacaktr.
Sar, krmz ve mavi renklere dayal bir renk emberi, sanat alannda gelenekseldir. Hem gnmzde hem de yaptmz iin zelinde biz tasarmclar iin de bu ana renk emberi elbette vazgeilmezdir.
Modern Web Tasarm
Kimileri bu emberlerdeki dzenin yaratcl snrladn iddia etse de, genel olarak bir tasarmcnn alaca tasarm hakknda renk paletleri oluturmak, bu emberler iin olduka faydaldr.
Baa dnecek olursak renkler hakknda saysz fikir retebiliriz Ancak sonu itibariyle renkler, kiinin algsna ve duygularna gre deiiklik gsterebileceini de unutmamak gerek.
1776 ylnda Moses Harris tarafndan hazrlanan prizmatik renk emberi renklerle ilgili alma yapanlar iin bir dnem esiz faydalar salasa da, aslnda ana renkler ile ilgili hatal bir dizilime sahiptir. Hasan Yaln - 2012
87
Modern Web Tasarm
Hasan Yaln - 2012
88
Renklerin Dili Renklere tek bana baktnzda bir anlam ifade etmezler. Ancak kltrel, sosyolojik ve zaman zaman da corafik etkenler renklere anlamlar ykler ve algmz deiir.
Renklerin bize anlattklarn ele aldmzda, her biri iin evrensel bir tanmlama olmasa bile, bulunduumuz corafya ve kltrn o renge ykledii anlam nedeniyle bak amz farkllk gsterebilir.
rnein krmz renk, Avrupa kltrnde tehlike, dikkat, ak gibi anlamlar tarken, in corafyasnda evlilik, iyi ans, Japonyada hayat, Hindistanda ise safl temsil etmektedir. Beyaz ise Avrupa kltrnde evlilik, bar gibi deerleri temsil ederken Japonyada yas, inde ise lm temsil eder. te bu yzden renklerin anlamlarn evrensel olarak kabul edemeyiz. Ancak iimiz ara yz tasarm, konumuz da renkler olduuna gre genel olarak renklerin kiinin algsndaki genel etkilerini yok sayamayz.
Modern Web Tasarm
Hasan Yaln - 2012
89
Scak Renkler
Krmz, turuncu ve sar gibi renkleri scak renkler (En azndan yaygn scak renkler) olarak tanmlamak mmkndr. Genel olarak birbirleriyle uyumlu olan bu renklerin dikkat ekmeye ynelik ve davetkar olduunun da altn izmek lazm.
Scak renklerin daha sklkla tutku, enerji, drtsellik, mutluluk, rahatlk ve konfor ile ilikili olduunu syleyebiliriz.
Souk Renkler
Yeil, mavi ve mor gibi renkler souk renkler olarak tanmlanabilir. Bu renkler, su grubu renkleridir. Genel olarak bu paletteki renklerin de, birbirleriyle uyumlu olduunu ve ierisinde gven ve profesyonellii de barndrdn belirtmek gerek.
Modern Web Tasarm
Scak renklerin daha sklkla sakinlik, gven ve profesyonellik ile ilikili olduunu syleyebiliriz. Ayn zamanda ierisinde biraz hzn ve melankoli de barndrrlar.
Hasan Yaln - 2012
90
Krmz
Kan ve atein rengidir. Ayn zamanda duygusal younluu yksek bir renktir. Genel olarak drtsel eylemler iin tercih edilebilir. (Aksiyon butonlar, navigasyon v.b)
Krmz byk oranda enerji ile ilikili, sava, tehlike, g, kuvvet, kararllk, aksiyon, gven, cesaret, canllk, tutku, arzu ve ak gibi olgular ierisinde barndrr. Tm bunlarn bir araya gelmesi bile kalbinizi hzlandrmaya yetebilir!
Sar
Sar gnein rengidir. Dikkat datc gibi dursa da, parlak sar her zaman dikkat eken bir renk olmutur. Sar; nee, mutluluk, bilgelik ve entelektel enerji ile ilikilidir, zihinsel aktiviteleri uyaran enerjik bir renktir. Sar, karlaldnda scak bir etki verir, nee uyandrr ve ou zaman ho duygular uyandrmak iin kullanlr.
91
Modern Web Tasarm
Hasan Yaln - 2012
92
Modern Web Tasarm
Hasan Yaln - 2012
93
Mavi
Gkyz ve denizin rengidir. Nispeten krmz ile ters bir etkiye sahiptir ve metabolizma, solunum ve kalp hz yavalar. Mavi genelde erkeksi bir renk olarak grlmtr.
Mavinin gven, sadakat, bilgelik, zeka, uzmanlk, gven, istikrar ile ilikili olduu kabul edilir. Bu rengin sakinletirici bir etkisi vardr. Genellikle ciddi kurumsal sitelerde tercih edilir.
Turuncu
Sarnn mutluluu ile krmznn enerjisinin birletii renktir. Krmz kadar agresif deildir. tahl bir renk olarak kabul edilebilir.
Modern Web Tasarm
Turuncu; sevin, gne, tropik, coku, mutluluk, bylenme, yaratclk, azim, cazibe, baar, cesaret verme, tevik ve gc ile ilikilidir.
Hasan Yaln - 2012
94
Modern Web Tasarm
Hasan Yaln - 2012
95
Modern Web Tasarm
Hasan Yaln - 2012
96
Yeil
Doann rengidir. Genelde byme, umut, tazelik ve bereketi simgeler. ABD gibi parann yeil olduu lkelerde, mali zenginlik dncelerini artrr. Yeil; ifa, denge, dayankllk, uyum, gvenlik, yaam ve refah ile ilikilidir.
Genellikle ila reklamlarnda ve tbbi rnlerin gvenlii belirtmek iin kullanlr.
Mor
Mavinin istikrar ile krmznn enerjisini birletirir. Zaman zaman zenginlik ve lks ifade eder. Mor; g, asalet, lks ve hrs sembolize eder. Ayn zamanda bilgelik, onur, bamszlk, yaratclk, gizem ve by ile ilikilidir. Kadns bir tarz vardr. Mor, doada az bulunan bir renk olduu iin biraz yapay olduu kabul edilebilir.
97
Modern Web Tasarm
Hasan Yaln - 2012
98
Modern Web Tasarm
Hasan Yaln - 2012
99
Beyaz
Beyaz; k, iyilik, masumiyet, saflk ile ilikilendirilebilir. Genellikle olumlu armlar vardr. Temiz ve gvenli olarak grlmektedir. Siyah
G, zarafet, resmiyet, kt ve gizem ile ilikilidir. G ve otoriteyi temsil eder. Resmi ve zarif olarak grlebilir. Gri Hznl bir renktir, izolasyon rengi olarak deerlendirilir. Gei rengi olarak uygundur. Kahverengi Toprak rengidir, dnyann rengi olarak ta tanmlanabilir.
Kahverengiyi kullanarak salam ve salkl mesajlar verebilirsiniz.
Modern Web Tasarm
Hasan Yaln - 2012
100
Modern Web Tasarm
Hasan Yaln - 2012
101
Modern Web Tasarm
Hasan Yaln - 2012
102
Modern Web Tasarm
Hasan Yaln - 2012
103
Tipografi ve Web Tasarm Tipografi, Yunancada typos (form) ve graphia (yazmak) szcklerinden tremi olan typographia szcnn Trke halidir. Kavram; forma uygun yazmak demektir. (Wikipedia)
Aslnda grafik tasarmda tipografi iin, grafiklerinizi harfleri kullanarak ifade etme yntemidir denebilir. Serifsiz fontlar (Sans Serif olarak tanmlanr) ise Arial veya Verdana Myriad gibi, ba ve sonu dz biten harflere verilen adlardr.
Tipografi hakknda genel bilgilere sahip olmann yannda, yaratclnda byk nemi vardr. Web tasarmnda tipografi ise aslnda dier dallardan biraz da olsa ayrlan bir alan olarak deerlendirilebilir. Web tasarmnda tipografiye gemeden nce, konu hakknda genel bir ka bilgi edinmekte fayda var. Serifli ve Serifsiz Fontlar Serifli fontlar Times New Roman, Georgia gibi ucunda okumay kolayltrd iddia edilen kk trnakklar bulunan fontlardr.
Modern Web Tasarm
Serifli fontlarn daha iyi ve kolay okunabildii, ancak serifsiz olanlarn ok daha modern bir grnme sahip olduu kans yaygndr. Bu yzden genelde gazete ve dergilerde serifli fontlar kullanlr. B konuda kesin bir kaynak olmamak ile birlikte, bir insan gznn en iyi alglad okuma biiminin beyaz (Ak Renk) zemin zerine siyah (Koyu Renk) serifli fontlar ile hazrlanm dkmanlar olduu sylenir. Serifli ve Serifsiz fontlar iin rnek vermek gerekirse...
Hasan Yaln - 2012
104
Kerning ve Tracking nedir?
Css kod yazanlarn letter-spacing komutu ile aina olduu harflerin arasndaki boluklara kerning denir. Tracking ise, bir kelime ya da cmle grubunda bulunan harf aralklarn dzenleme iidir.
Bu terim iin ksaca harflerin arasndaki boluklar ayarlama sanat da denilebilir. Tracking, kerning ile birlikte kullanlr.
Tracking, tipografik almalar iin nemli bir unsurdur. Anlatmak istediklerinizi harflerle ifade etmeye altnz zamanlarda bloklar oluturmak, bir cmle grubunu daha estetik gstermek iin her zaman trackinge ihtiya duyacaksnz.
Bu her iki teknii, zellikle de trackingi kullanarak daha kaliteli ve gze ho gelen eserler retmeniz mmkndr.
Modern Web Tasarm
Hasan Yaln - 2012
Tipografik almalarda fazla sayda font kullanm zaman zaman kafa kartrc olabilir. Tpk web sitelerinin renklerinde olduu gibi bir ana font ve ona yardmc olacak en fazla iki fontla alma kotarlmaldr. Dnlenin aksine tipografide serifli ve serifsiz fontlarn bir arada kullanlmasnda estetik deerler kaybolmadka bir saknca yoktur. Ancak tm bu elemanlarn bir dzen ve estetik ierisinde sunulmas gerekir.
105
Web sitelerinde tipografi bir ka yntemle gerekleebilir. Web Safe fontlar kullanarak, font-face benzeri servisler yardm ile veya direkt imaj kullanarak tipografik sunumlar yapmanz mmkn. Tipgrafik almalarda kullanlan harf renklerinin zemin rengi ile kontrast olmas gerekliliini unutmamak gerek. Ayn zamanda bu almalarn bir mesaj verdiini ve bu mesajn kullanc tarafndan net bir ekilde alnmas gerektiini ve karmaadan uzak almalarn derdini daha iyi anlattnn da altn izmek gerekir.
Modern Web Tasarm
Hasan Yaln - 2012
106
Modern Web Tasarm
Hasan Yaln - 2012
107
Tipografi, insan dilini en iyi ekilde grsel forma uygulama zanaattr.

Robert Bringhurst - Tipografi Sanats Modern Web Tasarm Hasan Yaln - 2012
108
Modern Web Tasarm
Hasan Yaln - 2012
109
Tasarmcnn Grevleri Bir tasarmcnn asl grevi retken olmak ve bunu bir yaam biimi olarak benimsemektir. Ancak i hayatnda bir tasarmcnn neler yapmas gerektiini 4 maddede toplayabiliriz.
Web prodksiyonu konusunda kendini gelitirmek zgn tasarmlar retmek nternet ve web ortamn bilmek, prodksiyon teknolojilerini detayl ekilde renmek. Tasarm ekip iidir, ancak bireysel yetenekler alarak geliir. Egzersiz yaparak kendini gelitirmek.
Konsantasyon
retecei eser iin iyi konsantre olmak, aratrma yaparak konuya kendini hazrlamak.
Motivasyon
Yeni web siteleri ve internet konusunda yeni kaynaklar bularak incelemek, kendi iin ilham yaratacak siteler zerinde almak. Prodksiyonun her ayanda ve uygulamasnda etkin rol almak. Hzl dnmek, sorun deil zm odakl olmak. Problemleri zerek sonuca ulamak.
Modern Web Tasarm
Motive olmak, kendine gvenmek ve zor ilerin bile altndan kolayca kalkabileceine inanmak.
ine ballk
disiplininden taviz vermemek, iini severek yapmak. stemeyerek yaplan hi bir iten verim beklenemez. saatleri ve proje bitim tarihlerine maksimum zen gstermek.
Hasan Yaln - 2012
110
Yeni teknoloji ve trendleri takip etmek.
Srekli gelien nternet ve web ortamnda yeni medya teknolojilerini takip ederek renmek ve uygulamak. Hemen her sene gelien ve modas deien yeni tasarm trendlerini takip etmek, bilmek ve uygulamak. Bu konuda kaynaklar bulmak ve dzenli olarak takip ederek yeni kriterleri tasarmlarnda uygulamak. Kullanlabilirlik ve web standartlarn renmek ve uygulamak.
Bir web sitesi tasarmnn amacna ulamas iin nndeki en byk hedef kullanlabilir olmasdr.
Kullanc tercihlerini bilmek ve ona gre tasarmlar gelitirmek.
Gelien ve dnyaca kabul edilmi web standartlar hakknda bilgi sahibi olarak tasarmlarn bu ynde gelitirmek.
Modern Web Tasarm
Hasan Yaln - 2012
111
Kendinizi Gelitirmek in pular! Tasarmclar her zaman yenilie ak ve kendini gelitirebilen, en azndan renen, tecrbelerinden dersler karabilen kiilerdir. Kendinizi iyi gelitirmek yine sizin elinizdedir.
Eitsellere nem verin Bata tasarmcnn el antasnda olmak zere eitsel (tutorial) sitelerine bol bol gz atn iinize yarayacak olanlar arivleyin ve bu eitseller zerinden bol bol pratik yapmaya aln. Bu almalar tekniinizi gelitirecei gibi yeni teknikler bulmanza da olanak salayacaktr. alma alannz gelitirin Eer standart bir ofiste almyorsanz, alma alannz gelitirerek daha motive edici hale getirmek elinizde.
Kim ne yapyorsa siz de yapn Elinizdeki projelerde eer tkanyorsanz, neyi nereye koyacanz bilemiyorsanz, yaptnz i ile uygun ve benzer baka ilerden ilham almaya aln. Bakalar nasl yapm inceleyin ve siz de uygulayn.
Modern Web Tasarm
Ben kendi adma bir tasarmc iin her zaman ift monitr neriyorum. Bu, zellikle tasarm yaparken photoshopu efektif kullanma asndan faydal olduu gibi, size bir ok ite zaman kazandracak bir unsurdur. Ayrca basit bir uygulama ile alma masanz renkli ve elenceli bir hale getirmeniz de mmkn. Masanz en sevdiiniz ancak kafanz kartrmayacak kap katlar ile kaplayn ve sevdiiniz figrleri masanza dizin. Dzenli bir ortamda almak verimliliinizi artrr.
Hasan Yaln - 2012
112
Kitaplar aln dergiler okuyun Mesleinizle ilgili kitaplar ve rportajlar okumaya aln.
Bloglar inceleyin
Tasarm dergileri, sanatsal dergiler de sizin ufkunuzu aacaktr. Yeni bir eyler renmek iin okumann vazgeilmez bir yol olduunu unutmayn. Sosyal olun
Sadece yeni mteriler bulabilmek iin deil, meslektalarnzla da tanmak ve yeni eyler renmek iin sosyal olun. Kendinizi kapatmayn, sosyal alar verimli ekilde kullanmaya bakn. Bir moleskine edinin
Mmkn olduu kadar mesleki bloglar takip etmeye aln. Tasarm ve tasarmc bloglar mutlaka bilgilerinize yenilerini katacaktr. Bloglar fiziksel olarak takip etmeseniz bile ilginizi ekenleri mutlaka rss listenize ekleyin. Gnlerinizi planlayn
Aklnza gelenleri not alp izebileceiniz bir moleskine edinin.
ok faydasn greceksiniz. Hem organize olmanza hem de notlar almanz salayarak hayatnz kolaylatracaktr. stelik ara sra bir eyler de izebilirsiniz!
Modern Web Tasarm
Ajandanzn gnlerini doldurun ve buna uymaya aln. Her gn iin kendinize program ve i plan karn ve o gn iin planladklarnz ayn gn iinde tamamlamaya aln. Bylece son teslim srelerine kolayca uyabileceiniz gibi (geciken ileriniz olmayacandan) kendiniz iin ayrdnz zel zamanlar da efektif olarak kullanabilirsiniz. Yeni yazlmlar deneyin Her zaman kullandklarnzn aksine yeni, daha nce hi denemediiniz yazlmlar, programlar denemeye ve bir eyler retmeye aln.
Hasan Yaln - 2012
113
Motivasyon ve Tasarm Hayatnzda iyi iler yapmanz iin gereken en nemli ey motivasyon. Bu blmde bloke olan tasarmc nasl motive olur ve eletiriler ile baa kmann yollarn inceleyeceiz.
Bloke Olan Tasarmcnn Motivasyon Yollar Eer youn projeler ile urayorsanz, Bir tasarmcnn yapt ilerde her (mesela 10 gn boyunca gnde 10 saat zaman yaratc olmas gerekir/beklenir. alp, hi izin yapmamsanz) bu sizin iin bir sknt oluturabilir. Youn Ancak yaratc zmler alma temposu ierisinde kendinize retemediinizde, bloke olup hi bir ey fazla yklenmeniz yaratclnz yapamadnzda kendinizi nasl motive olumsuz etkileyebilir. edersiniz ya da etmeniz gerekir? Tasarmcnn Bloke Olma Sebepleri 2 Ar Uykusuzluk Kendi kendini motive etme yntemlerine bakmadan nce, bir tasarmc neden bloke olur olabilir sorusuna yant aramak belki daha mantkldr. Yorgunluk ve uykusuzluk yaratcln ba dmandr. Gnde 8 saat uyumaya aln, en azndan ihtiyacnz olduu kadar uyuyun ve dinlenin. 1 ok almak 3 Stres amzn hastal olarak nitelenen stres, yaratclk katili bir baka unsur. Stresten mutlaka uzak durmanz, mmknse egzersiz ve meditasyon teknikleri ile kendinizi rahatlatarak stresle baa kmanz mmkndr. 4 Korku
Bu konuda belirtmek gerek ki, fazla uyku ve uyuukluk da bazen yaratcl ldrebilir.
Size garip gelebilir ama baz projelerde son teslim tarihine yetitirememe, yeterince yaratc olamama gibi endieleriniz kronik bir korkuya dnerek yaratclnz engelleyebilir.
Bu tip gerginlikler yaamamak iin nce cesur olmalsnz!

Hasan Yaln - 2012
Modern Web Tasarm
114
Modern Web Tasarm
Hasan Yaln - 2012
115
Bloke Olduunuzda Nasl stesinden Gelirsiniz! Yukardakilerden biri ya da bilinmedik bir sebepten dolay bloke olmusanz, aada sizler iin yeniden motive olmann en iyi yollar var. Bakalm nelermi bunlar? Bir Mola Verin
Farkl Aralar Kullann
Youn almalarnza ara verip, projeden uzaklan. rnein baka bir proje ya da konu zerinde alp tekrar esas iinize dnn. Projeden uzaklap tekrar geri dnmeniz, tabloya farkl bir gzle bakmanz salayabilir. ekerleme Yapn
Her projede tekrar tekrar ayn aralar kullanmayn. Sadece ekran banda kullandnz deil, evrenizde kullandnz kalem, kat, bloknot gibi malzemeleri de zaman zaman deitirebilirsiniz. lham Arayn Bir projede tkandysanz ve aklnza yapacak, retecek bir ey gelmiyorsa ayn konudaki baka projeleri inceleyerek vakit geirin.
Yry Yapn
Eer bir kurumda deil, serbest alyorsanz ok tkandnz anlarda birazck ekerleme yapn. Bu size iyi gelecektir. Hem uyku ihtiyacnz karlayacak hem de ekran bana daha diri dnmenizi salayacaktr.
Modern Web Tasarm
Dar karak 10 dakikalk bir yry yapn. Temiz hava, ekrandan uzaklamak, hareket etmek size iyi gelecektir.
Bu, hem aklnza yeni eyler gelmesini salayacak, hem de sizi rahatlatacaktr. Kendinizi Glendirin Bazen sktnzda bunun stesinden gelmenin tek yolu, bu durumun stesinden tek banza gelebilmektir. Gl olun ve kendinizi telkin edin.
Hatta bir kafeye oturup en sevdiinizi iecei sipari edin. Gnlk gazetelere gz atn - olmad gelene geene bakn.
Daha din, rahatlam bir kafayla ekran bana dneceksiniz!
Hasan Yaln - 2012
Eletiriler le Baa kmak
Eletirinin tasarmcnn hayatndaki kapsad alann olduka geni olduunu kabul etmek gerek. Yaptmz i tamamen kiisel beenilere ynelik ve estetik deerleri ilgilendirdii iin, siz ne kadar ho bir tasarm yapsanz da, harika bir renk skalas yakaladnz ya da yaratc bir grsel oluturduunuzu dnseniz de, iin sonucunda size gelen geri dn pek hayal ettiiniz gibi olmayabilir. hayatnda u replii duymayan bir tasarmc var mdr acaba? Offf, ne kadar alngansn sen byle ? Biraz eletiriye ak ol! Oysa eletirinin gerek anlamn bilen bir kii asla byle bir cmle kurmaz. Zira eletiri vgnn de bir parasdr. Bakn TDK szl ne diyor eletirinin anlam iin : Bir insan, bir eseri, bir konuyu doru ve yanl yanlarn bulup gstermek amacyla inceleme ii.
Modern Web Tasarm
Eletiri Faydaldr
Eletiri gerek anlamda deerlendirildiinde, yani konu hem olumlu hem de olumsuz ynleri ile ele alnyorsa faydaldr. Ayn zamanda eletirinin nereden geldii, kim tarafndan yapld da nemlidir. Fikirlerine sayg duyduunuz, size ve yarattklarnza deer katacana yeni yollar gstereceine inandnz birinden gelen eletiriler, olumsuz da olsa cannz skmayacaktr.
Ancak genelde sadece uzmanlar, iin/ projenin detaylarn ileyiini bilen, olgun ve vizyon sahibi kiiler bu disipline sahiptir.
116
Eletiri size ve ortaya kan rne deer katt srece sorun yoktur.
Ancak ii bilmeyen, herhangi bir altyaps olmadan sizi eletirenler, hem projenizin gidiatn etkiler, hem de motivasyonunuzu kaybetmenize neden olabilir. Eletiri Yapc Olmal Yapc eletirilerden dersler karmak aslnda ho bir deneyim olabilir.
Hasan Yaln - 2012
Eletiri Mesleimizin Paras
unu kabul etmeliyiz ki eletiri bizim mesleimizin iinde olan, vazgeilmez bir ge.
Yaptmz iin bir ok farkl zevk ve bak asna hitap ettiini dnrsek, herkesin konu hakknda bir fikri olmas normal karlanabilir. Ne yazk ki bu kiilerin hepsinden tasarm ve renk kurallarn, iin detayn bilmelerini beklememiz mmkn deil.
kalacanz eletirilerin dozunun yksek Size sylenenleri olgunlukla olmamasn salayacaktr. karlayarak, bildiiniz dorular karnzdakilere ifade etmeye aln. Aslnda biz tasarmclar iin mteriye sorabileceiniz kilit soru Hangi site ve tasarmlar beeniyorsunuz? olmas, yine ileri kolaylatran bir etken olabilir. Eletirilere Kar Tepkinizi Kontrol Edin Tasarmclar genelde duygusal ve krlgandr.
117
Zaman zaman projenizle ok ilgisi olmayan kiilerce yaplan negatif Onlarca saat emek harcadklar iler iin eletirilere de maruz kalabilirsiniz. yaplan sert eletiriler onlar iin krc nemli olan ise, ite tam da bu nokta da ve yldrc olabilir. motivasyonunuzu yitirmemektir. Sert ve olumsuz eletiriler karsnda Eletiri Dozunu En Batan Drn ylmayn, siz de sert bir kar tepki gstermeyin. Mteriniz veya proje yneticiniz ile i balarken hemen her detay, en ince Size sylenenleri szp, iinden olumlu ayrntsna kadar konuup renin. yanlarn alp uygulamay deneyin. Tam olarak ne istendiini, hatta tasarmsal olarak ne beklendiini en batan renmek, daha sonra maruz
Modern Web Tasarm
yi bir tasarmc olabilirsiniz ama eletirilere gsterdiiniz tepkiler sizi antipatik biri haline getirebilir.
Hasan Yaln - 2012
Eletirileri Anlamak
Yaptnz ileri deerlendirenler iyi de olsa kt de olsa sonunda size teekkr bile etmiyor olabilir. Karmak anlamadnz ya da anlamak bile istemeyeceiniz bir dille sizi eletiriyor olabilirler. Bunlara kar yine psikolojik olarak ylmadan, ilerinizi de aksatmadan kar durabilmeniz gerekir. Her ey aslnda sakince dnp deerlendirme yapabilmekte sakldr. Eer gerekten iyi bir eyler ortaya koymak istiyorsanz, sizin iin en ykc olan eletirilerden bile pay karabilirsiniz. Poplerlik Eletirileri
Sizden daha iyi olmayan, sizin daha iyi olmanz istemeyen kiilerin yapt eletirilere kulak tkamak en iyisi.
118
Elbette bu ok kolay deil. Kendinizi kantlama istei, yorumlarn yanl olduunu ispat arzusu da duysanz bir sonraki iinizde bu gereksiz kiiler yine karnza kacaktr. Onun iin siz en iyi bildiiniz ii yaparak mesleinizi gnlnzce icra edin. Byle durumlarda Beni zaten bilen biliyor diyerek dnp gemek, bazen en mantkl seim olabilir. Bunu aklnzdan karmayn. Sonu olarak bir tasarmc olarak belki de bir sava pilotu kadar sinirlerine hakim ve akll olmak gerekir. Sakn Unutmayn! Siz iyi bir tasarmcsnz ve sizi hi bir eletiri yldramaz. Zaten istediiniz zaman en gzel ileri karacanz biliyorsunuz. Ayrca hala en gzel tasarmnz yapmadnz!
Sz edeceimiz tr aslnda bir tasarmcy en ok skan eletiri olsa gerek. Bilinen, iinde uzman, saygn, tannan ve sevilen bir tasarmc iseniz sadece bu yzden bile kt ve garip eletiriler alabilirsiniz.
Modern Web Tasarm
Hasan Yaln - 2012
119
irkinliklerle savamak, bir tasarmcnn yaam biimidir.

Massimo Vignelli - talyan Tasarmc Modern Web Tasarm Hasan Yaln - 2012
120
Mteri Tasarmc likisi ster serbest tasarmc olun, ister bir tasarm ofisi alan, her zaman sizinle iletiimde olan mterileriniz olacaktr. Bunlar kurumlar da olabilir, proje yneticileri de...
Aslnda bir tasarm iinin iyi kmas adna mteri (proje sahibi veya yneticisi) tarafnda da yaplacak bir o kadar i ve sorumluluk var. Bu iletiimi iyi kurmak her zaman projenin ve sizin yararnza olacaktr. Site Tanm Kararszlk bir web projesindeki en byk handikap phesiz. Site Haritas Genel hatlar ile aa yukar belirmeye balayan site hakknda tasarmclarn ncelikle bilmesi gereken ge site haritas.
Mteri sizin veya proje yneticinizin yardmlar ile proje konusunda daha kararl ve keskin kelerle belirlenmi Web sitesi tasarlatmaya karar veren kii bir tanm listesi hazrlamaldr. veya kurumlar, ncelikle kendilerini ifade edecek sitenin nasl olacana Bu listede, zaman iinde gerekleecek karar vermek durumundalar. deiim ya da revizyonlar ngrlmeli Bir portal m, kurumsal bir site mi yoksa ve nlem alnmaldr. bir e-ticaret sitesi mi? Daha sonra eklenen veya vazgeilen her unsur, proje srecini olumsuz etkileyecei gibi tasarmcnn motivasyonunu da bozacaktr. Genel hatlar ile site ierii ve tanm hazrlandktan sonra, sra dier malzemelerin hazrlna geliyor.
Navigasyon yapsn ve tasarmn, kullanlabilecek teknik ve teknolojileri uygulamak iin ncelikle site haritasnn (mmknse daha sonra deimeyecek ekilde) hazrlanmas gerekiyor. Tasarmc bu haritaya gre sitenin atsn kurar ve eklini belirlemeye balar. Bu ada ie net olarak belirlenmi bir ak emas ile balamak faydal olacaktr. Site haritas ayn zamanda tasarmcnn yol haritas ve bu tasarm iin planlayaca sreleri de belirler.
Modern Web Tasarm
Hasan Yaln - 2012
erik ya da rnek erik
Yukardaki maddelerin ardndan mterinin eksiksiz olarak hazrlayarak size sunmas gereken en nemli ge ierik. Sitenin yaps ve eklini belirleyecek olan ieriin en iyi ekilde hazrlanarak tasarmcya teslim edilmesi gerekir. erikte daha sonra yaplacak deiiklikler, yada hi teslim edilmemi, yerine idareten ierikler ile doldurulmu tasarmlar, zaman zaman tehlikeli sonular dourabilir.
Hazrladnz taslaklara 6 hafta sonra gelecek yorumlar, hem iin gecikmesine hem de cannzn sklmasna sebep olacaktr.
121
Bu noktada mteriye den grev, en ksa srede ve salkl bir ekilde geri dn vermesi olacaktr. Proje Finali ve Test Sreci
Mterinin daha sonra iini doldururuz sylemlerini pek umursamadan, en iyi rnek ierii edinmek en salkl sonucu douracaktr. Onay Sreci Bir projenin salkl ve zamannda yrmesinde en nemli ayrntlardan biri de onay sreci. Yaplan tasarmlar hakknda gelen yorum ve revizelerin ksa bir srede tamamlanmas ok nemli bir ayrntdr.
Modern Web Tasarm
Projenin sonuna gelindiinde ise, yine mteri ile son testleri birlikte yaparak ve eksik kalan detaylar hzl bir ekilde tamamlamal ve i teslim edilmelidir. Bu noktada sreci hzlandrmak yine i sahibine dyor tabii. Bir hzla ve hevesle tamamlanp, aylarca almayan bir sitenin kimseye faydas olmayaca aikar.
Sonu olarak siz ne kadar iyi bir arayz tasarmcs olursanz olun, yukardaki listeler salanmad, sreler salkl yaanmad srece bir web projesinin altndan hzlca ve temiz bir ekilde kalkmanz zordur!
Hasan Yaln - 2012
122
almak stemeyeceiniz Mteri Tipleri Serbest tasarm ii yapanlar ou zaman piyasann zorluklarndan dert yanarlar. Alacaklar demelerdeki skntlar, mteriler ile yaadklar problemler bir ok projede tasarmclara hayat zindan eder.
lgisizler Aslnda iine karlmasndan ok holanmayan tasarmclar iin belki biraz ekici bir tip olabilir. Ancak bu tip mteriler ile bir projenin yrmesi olduka zordur. Titizler Tehlikeli tiplerden biridir. Aceleciler Bir baka tehlikeli grup daha.
Her ne kadar projenin gereklemesini isteseler de, yeterince bilgi vermezler ve Projeye balamadan sizden taslaklar isteyebilirler. Demolar, detayl ekran yol gsterici olmazlar. grntleri ve sahip olduunuz her Hatta ou zaman sktnz noktalarda bilgiyi sizden isterler. telefonlarnza bile kmazlar. Her aamada titizlenip doru yolda olup olmadklarn sorgular. Sizden bu Yaptnz tasarm beenmezlerse i konularda tavsiye ister ama uymazlar. daha da zorlar. nk yeniden bir eyler yapabilmek iin gereken bilgiyi de Tasarmnzdaki hemen her unsuru en vermezler. az bir kere deitirmenizi isteyip, bir de Proje bir ekilde sonlanp sra demeye yle grmek isterler. Ksacas hep isterler geldiinde. Eh hikayenin sonunu tahmin etmisinizdir naslsa
Modern Web Tasarm
Bu tipte bir profil ile alyorsanz yorulmaya hazr olun. Projenin her detay ile ilgilidirler ve bir yorumlar vardr.
leri sizden o kadar ksa srelerde isterler ki, yaratclnz daha balamadan biter. Saatler, dakikalar size yetmez olur. Genelde size telefon aar ve kapsaml bir tasarm ayn gn iinde istediklerini sylerler.
Hasan Yaln - 2012
Evet, belki ileri yetitirebilirsiniz ama, bu tip mteriler iin yaptnz hi bir ii portfynze koyamazsnz. nk acele etmekten hi ince alamamsnzdr. Gerekten a kalmadysanz ya da kendinize hz/kalite konusunda gvenmiyorsanz uzak durun
Karanlar
Titizler grubunun biraz daha gelimi versiyonudurlar.
Her tasarm esi hakknda bir fikirleri vardr. Sizi dinlemez, dinlese bile hak vermezler. Durmadan kendi fikirlerini size empoze etmeye alr, yanl bile olsa uygulamanz isterler. Bu tip mteriler karsnda yaratc ruhunuzdan fazlasyla dn vermek zorunda kalabilirsiniz.
Sonu olarak evet piyasa artlar zor, gnlnze gre mteri seme ansnz ou zaman yok. Tabi burada yazl olan ou ey proje yneticileri iinde geerli. Ancak genelde proje yneticileri kurumsal kiiler olduklar ve byle huylar olmayan kiilerden seildikleri iin gerek hayatta karlamanz daha zordur.
123
Ancak, en azndan bu tip profilleri fark ettiinizde uzak durmaya alrsanz en azndan sizin iin faydal olacaktr.
Cimriler ncelikleri pazarlk yapmak zerine kurulmu mteri profilidir.
Projenin banda, sonunda, her aamasnda sizinle pazarlk yaparlar. Bu ou zaman yaptnz ii kmsemelerinden de kaynakldr. Onlara gre yaptnz basit izimler neden bu kadar deerlidir anlamak zordur. Bu tip bir profil ile karlatnzda en iyisi pek taviz vermemek, fiyat krmamaktr. Brakn darda sizin fiyatnzn ok daha ucuzuna yaptrsnlar. Naslsa fark anlamalar ge olmayacaktr :)
Modern Web Tasarm
Bir ekilde proje tamamlansa bile, doal olarak kendinize ait hissetmezsiniz. Bu durumda bir tasarmc iin ileri oluruna brakmak bazen en mantkl seim olarak gzkebilir. Kendi ruh salnz asndan rahat olup, ne isteniyorsa yaparak daha fazla zaman kaybetmeden projeyi teslim ederek nnzdeki yeni i ve projelere yelken amak daha iyi olacaktr.
Hasan Yaln - 2012
124
Her ocuk bir sanatdr. Problem, bydnde de sanat kalp kalmayacadr.

Pablo Picasso Modern Web Tasarm Hasan Yaln - 2012
125
Serbest Tasarmclar in 5 Altn Kural Herhangi bir firma veya kuruma bal olarak almayan, kendi iini zgrce yrten tasarmclar iin gz ard edilmesi mmkn olmayan kurallar birlikte inceleyelim.
Portfynz Gelitirin Freelance tasarmclarn kendini ifade edebilmesinin en nemli yolu phesiz portfyleridir. Portfy sayfanz olabilecek en iyi ve gsterili biimde tasarlayn ve ierisine en iyi en sevdiiniz ileri yerletirin. Portfynzde gezen mterilerin yeteneinizi, sizdeki cevheri kolayca alglamasn salayn. nnz Artrn sminizin ve yaptnz ilerin bilinirliini artrn. Tasarm forumlar ve serbest i yapanlarn bulunduu sitelere ye olun. Adnzn bu gibi yerlerde anlmasn salayarak, bilinirliinizi artrmak iin aba gsterin. Mterilerinizi yi Sein, yi Geinin Trkiye piyasas iin pek kolay olmasa da, mteri seiminde mmkn olduu kadar ince eleyip sk dokumaya bakn.
Projelerinizde hem siz onlara, hem de onlar size deer katsn. Mterilerinizle tartmaya girmekten kann. Onlarla Paylamc olun, fikirlerinizi ve ilerinizi kavga etmek yerine, doru yolu gstermeye aln. internet ortamnda paylamaktan Piyasada hakknzda yaplan iyi kanmayn. Yeni moda sosyal internet ortamlarnda yorumlar size para olarak geri yer alarak kendinizi tantn ve ilerinizi dnecektir. Gereksiz yere adnzn kt paylan. anlmasna sebep olmayn.
Modern Web Tasarm
yi i yapabileceinize inandnz firma, kurum yada kiiler ile aln.
Hasan Yaln - 2012
126
Fiyatnz Drmeyin, Bedava Yapmayn
Profesyonel Olun
Fiyat stratejinizi iyi ayarlayn. Gereksiz yere (zaman zaman paradan kymetli deerler olsa da) fiyatnz drmeyin. Yaptnz iin kalitesi ile edeer fiyatlandrma yapn. Unutmayn ok kymetli bir i yapyorsunuz ve bunun bir karl olmal.
Freelance tasarmc olmak, tatil yapmak deildir. Aksine haftann her gn ve her saati almak demektir. alma saatlerinizi, proje ynetiminizi disiplinli bir kurumda alyormu gibi dzenli bir ekilde organize edin. Proje gerei ayn ile ilgili alacanz dier profesynellere sayg gsterin. Verdiiniz szleri tutun. zellikle zamanlama ve son teslim tarihleri ile ilgili olanlar... Bu sayede hem piyasada sayg duyulan, hem de sznn eri biri olarak anlrsnz. Bu anlamda ne kadar iyi bir hret sahibi olursanz, kazancnzda ayn oranda artacaktr.
Elbette rekabete ak olun, ancak deerinizi drmeyin. Dzgn fiyatlandrmann yannda, mmkn olduu kadar her proje iin szleme yapn. Projenin snrlarn yapacanz szleme ile izmezseniz, o proje asla bitmeyecektir. Bir snrlandrma olmad iin doyumsuz mteriler srekli ekleme ve karmalar ile hayatnz zindana evirebilir.
Modern Web Tasarm
Hasan Yaln - 2012
127
Her Tasarmc in 11 Temel pucu Genelde bir tasarmcnn her zaman motive, yaratc ve hazr olmas iin bir ok ayrntnn bir arada olmas gerekir. Buradaki birbiriyle balantl ipular, sizin hem gncel hem de profesyonel hayatnzda ok iinize yarayacak
renmekten Vazgemeyin Ne kadar profesyonel olursanz olun, hayatta her zaman mesleiniz adna reneceiniz yeni eyler mutlaka vardr. renmeye hi ara vermeyin. Bir program tamamen rendiinizi ve size yeteceini dnseniz bile, reneceiniz, kendinizi gelitereceiniz yeni program ve mesleki dallar olduunu unutmayn. Tasarm hakknda okuduklarnz size yeni yollar gsterecek, zihninizi aacak ve kendinize yeni yollar yaratmanz salayacaktr. Ayrca eer grsel arlkl kaynaklar tketmiseniz; bu, sizin yaratclnz artrarak, ilham verecek yeni tasarmlarnzda sizin iin yol gsterici olacaktr.
Hounuza Giden Kaynaklar Saklayn
Bol bol okuyun, takip edin, aratrn ve kendinizi gelitirin. Tasarm Hakknda Yazlar Okuyun
Bir blog, kitap ya da dergi fark etmez, tasarm ve tasarmclk hakknda Daha sonra bu arivi atnzda size ilham verecek kaynaklara ulap karnzda esiz bir kaynak bulacaksnz. bunlar tketin.
Modern Web Tasarm
zellikle internet zerinde rastladnz hounuza giden kaynaklar mutlaka favorilerinize ekleyin, saklayn. Kendinize bir ariv oluturun. Bunu yaparken, kaynaklarnz gruplamay ihmal etmeyin.
Hasan Yaln - 2012
128
Bir Fikriniz mi Var? Not Aln!
Aklnza bir yeni ve yaratc bir fikir geldiinde hatrlamak iin hemen bir yerlere not aln. Unutmayn, sz uar, yaz kalr! Organize Olun
Mmkn olduu kadar dzenli ve tertipli olmaya aln. hayatnzda bu olduka nemli. Daha sonra aradnz eyleri kolayca bulmak iin ilerinizi, favori sitelerinizi dzenleyin, klasrleyin ve isimlendirin. Eer gerekiyorsa sosyal imleme sitelerinden de faydalann. Sosyal Alar Kullann Hem deiik bir ok bilgi ve kaynaa ulamak, hem de kendinizi ifade etmek ve gstermek iin popler olan sosyal alardan faydalann. Bu hem kendinizi gelitirmenize yarayacak, hem de bylelikle ilerde potansiyel mterilerin size ulama ansn arttracaktr.
Modern Web Tasarm
Hasan Yaln - 2012
129
Bazen kalabaln ierisinde ayr olmak faydaldr. Farkl olmaktan, farknz gstermekten ekinmeyin. Kendinizi Dnyaya Gsterin nce kendinize sizi tantan ve ifade eden bir blog amakla ie balayabilirsiniz.
Farkl Olmaktan ekinmeyin
Az aln
Balk sizi korkutmasn, gereinden fazla almayn.
zamanlarnz ve proje srelerini iyi ayarlayarak, doru alma zamannz yaratn. ler yetiecek diye kendinize eziyet etmemeye aln. Gn Yaayn Bir hayatnz olduunu unutmayn. Yaamnz bu ynde dzenlemeye aln. kolik olmak yerine planl olmaya aln.
Sonra sitenizde yaptnz ileri tantan bir portfy alan ekleyebilirsiniz. deviantart.com veya behance.net gibi sitelerde ilerinizi gsterebilir tantabilirsiniz. En iyi ilerinizi paylan. Spor Yapn! Eer mmknse spor yapmaya aln, tm zamannz bilgisayar banda geirmeyin.
Hereyin i olmadn, yllar sonra aklnza gelince imdiki yanza dnmek iin can atacanz dnn.
Ak havada biraz spor, olmad yry ve gezinti mutlaka size iyi gelecek ve enerji verecektir.
Modern Web Tasarm
Hasan Yaln - 2012
130
Grsel tasarmc, estetiin planlaycsdr.

Bruno Munari - talyan Tasarmc - 1907-1998 Modern Web Tasarm Hasan Yaln - 2012
131
Tasarmclar in Notlar...
Diplomanz i bulmanz salamaz! Dnyann en iyi grafik okulundan bile mezun olmu olsanz, bu size i imkan salayacak anlamna gelmez. yi bir i sahibi olmak iin mutlak gereken iyi bir portfy sahibi olmaktr. Portfynzde yer alan kaliteli iler, sizi profesyonel dnyada bir adm ne karacaktr. Siz iyi bir tasarm yapmak iin ne kadar fazla sreye ihtiya duyarsanz, mteri ya da patronunuzda o derece hzl i karmanz ister.
yi tasarmlar zaman alr, son teslim tarihinizi ksa almayn.
Bu salkl bir yaklam deil elbette, proje zamanlamalarnz iyi hesap edin. yi bir i iin size gereken sreyi almak iin uran. Hzl olmak adna gereki olmayan teslim tarihleri vermeyin.
Modern Web Tasarm
Mteri/Patronunuz sizin sanat olduunuzu dnmez. Zaten onlarn sizi anlamas gibi bir beklenti iine de girmeyin.
Onlar sadece projelerin bir an nce paraya dnmesini arzularlar.
inizi en iyi ekilde yaparak tasarm kalitenizi bozmadan i hayatnza devam edin.
Hasan Yaln - 2012
132
Ar eletirilere hazr olun.
Daha nce de bir ok defa konusu gemiti. zellikle bu lkede eletiri yapmay, kritik etmeyi bilmeyen insanlar arasnda sinirden kendinizi yememek iin, nceden kendinizi bu ve benzeri ar durumlara hazrlayn.
Bol bol arkada edinin.
Sektrnzden herkes ile tann ve arkadalk edin.
Sadece yetenekle iyi tasarmc olunmaz.
Kimsenin yaptnz ii beenip vgler yadrmasn beklemeyin. nce kendiniz beenin ve yolunuza devam edin. Kendinizi bu tip kritiklere kar koyarak motivasyonunuzu kaybetmeden almay srdrmek adna telkin edin. klasrnz sk sk yedekleyin. Herkesin bana mutlaka gelmitir. Gemie dnk ilerinizin bulunduu klasrlerin mutlaka dzenli olarak yedeini aln.
Dostluklarnz sanal sosyal ortamlarda kalmasn.
Onlar gerek hayatnza da tayn. Bylece hem piyasada bilinirliiniz artar hem de banz sktnda yardmnza koan ok olur. Ben bu tasarm iini rendim diyerek bir keye ekilip, size yksek maalar denmesini hayal ediyorsanz, yanlyorsunuz demektir. Tasarmclk sonu olan bir sre deildir.
Yetenekleriniz ne kadar kuvvetli olursa olsun, kimi zamanlar bu iyi bir tasarmc olduunuza iaret etmeyebilir.
yi bir tasarm alan olmak iin bu yeteneklerin yan sra; iletiim gc, i ahlakna ve pratik zekaya sahibi olmak, alacanz yerlerde uyumlu olmak gibi... ekstra zelliklere de sahip olmanz gerekir.
Hatta mmknse 2 farkl yerde yedek bulundurmak, banza istemediiniz bir durum geldiinde sizi kurtaracaktr.
Modern Web Tasarm
Tasarm bir yaam biimidir. Bir ba ve sonu yoktur. Yaadnz srece tasarm renmeye, gelitirmeye ve tecrbe edinmeye devam edersiniz. Onun iin tasarm adna kendinizi gelitirecek ne varsa yapmaktan ekinmeyin.
Hasan Yaln - 2012
133
Kaynaka ve Kullanm artlar

Bu elektronik kitapta yer alan bilgiler Hasan Yaln tarafndan yazlm ve derlenmitir.
Konu ile ilgili mesleki yurt d sitelerin yan sra kaynak olarak arlkl ekilde hasanyalcin.com adresindeki makalelerden faydalanlmtr. Yurtd kaynaklarn balcalar; 1stwebdesigner.com webdesignerdepot.com 1wd.co CretiveNerds.com designreviver.com
Bu E-Kitabn ieriinin deitirilerek de olsa herhangi bir ekilde kopyalanmas, tekrar yaynlanmas veya tekrar datlmas yasaktr.
Hasan Yalcin, ierikteki hi bir yanllktan ya da bunlarla ilikili olarak oluabilecek durumlardan tr sorumluluk kabul etmez.
Grseller ve markalar ilgili kurumlarn kendilerine aittir ve sz edilen konuya ilikin rnek oluturmak amacyla kullanlmtr.
hasanyalcin.com twitter.com/hasanyalcin
Modern Web Tasarm 2012 Hasan Yaln
Modern Web Tasarm
Hasan Yaln - 2012

ModernWebTasarimi v1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ModernWebTasarimi v1

Uploaded by

Copyright:

Available Formats

1

Modern Web Tasarm

Hasan Yaln - 2012

Modern Web Tasarm

Tasarm Brifingi Nasl Olmal? Blog Dnyas

GEREKLLKLER ve PROJE YNETM

WEB TASARIMI TEKNOLOJ ve TEORLER

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

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

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

.......................................................... 109 111

......................................................... 113 .................................................. 120 ............... 125

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

Kiisel Bloglar in Tasarm .................................................................. 54 Portal Tasarmlar ........................................................................................... 60

............................................ 127 ........................................... 131 ..................................... 133

Hasan Yaln - 2012

Modern Web Tasarm

Hasan Yaln - 2012

Modern Web Tasarm

Hasan Yaln - 2012

Hasan Yaln - 2012

Grsel Malzeme ve Stil Belirleme

Tasarm kltrleri oluturur. Kltr deerleri ekillendirir. Deerler geleceinizi belirler.

Modern Web Tasarm

Hasan Yaln - 2012

Modern Web Tasarm

Hasan Yaln - 2012

Modern Web Tasarm

Hasan Yaln - 2012

Modern Web Tasarm

Hasan Yaln - 2012

letiim, hem toplumun hem de elektronik ticaretin kalbidir.

Modern Web Tasarm

Hasan Yaln - 2012

Hasan Yaln - 2012

Ekstra Gelir Elde Etme Fikri

Modern Web Tasarm

Bugne kadar hi bir bayapt, tembel bir sanat tarafndan yaplmamtr.

Modern Web Tasarm

Hasan Yaln - 2012

Modern Web Tasarm

Hasan Yaln - 2012

Hasan Yaln - 2012

Ana Sayfa Oluturma

Modern Web Tasarm

Hasan Yaln - 2012

Marka Bilinci Oluturma

Modern Web Tasarm

Hasan Yaln - 2012

Modern Web Tasarm

Hasan Yaln - 2012

Hasan Yaln - 2012

Modern Web Tasarm

Hasan Yaln - 2012

Alveri yapacak kullancy ynlendirmek bu noktada tasarmn yklenecei grevdir.

Modern Web Tasarm

Hasan Yaln - 2012

Hasan Yaln - 2012

Modern Web Tasarm

Hasan Yaln - 2012

Hasan Yaln - 2012

Sepet, genelde deme ilemlerinden nceki son adm olarak deerlendirilebilir.

Sepet stili, gelien web teknolojileri ile farkl ekillerde de gelitirilebilir.