Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Web Tasarımı

Mert Kahveci
February 03, 2013

Modern Web Tasarımı

Hasan Yalçın (hasanyalcin.com) tarafından hazırlanan Modern Web Tasarımı sunusu.

Mert Kahveci

February 03, 2013
Tweet

Other Decks in Education

Transcript

  1. 2 Modern Web Tasarımı Hasan Yalçın - 2012 GİRİŞ GEREKLİLİKLER

    ve PROJE YÖNETİMİ Tasarım Brifingi Nasıl Olmalı? ........................................................... 2 Kurumsal Web Sitesi Tasarımında Gereklilikler .............. 7 E-Ticaret Sitesi Tasarımında Gereklilikler .......................... 12 Tasarımda Gereklilikler Hiyerarşisi ........................................... 13 Blog Dünyası ....................................................................................................... 14 Tasarımcı ve Blog ...................................................................................... 15 WEB TASARIMI Kurumsal Siteler İçin Ara Yüz Tasarımı ................................ 18 E-Ticaret Siteleri İçin Ara Yüz Tasarımı ................................. 24 E-Ticaret Siteleri İçin Renk Tercihleri ................................. 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ı WEB TASARIMI TEKNOLOJİ ve TEORİLER Ara Yüz Tasarımının 10 Temel Kuralı ......................... 66 Simetri - Asimetri ........................................................................... 67 Web Tasarımında Yeni Teknolojiler ............................ 71 Ara Yüz Tasarımında Sınırlamalar ............................... 81 Renk Teorileri .................................................................................... 86 Renklerin Dili ..................................................................................... 88 Tipografi ve Web Tasarım .................................................. 103 TASARIMCI Tasarımcının Görevleri .......................................................... 109 Kendinizi Geliştirmek İçin İpuçları ............................ 111 Motivasyon ve Tasarım ......................................................... 113 Müşteri Tasarımcı İlişkisi .................................................. 120 Serbest Tasarımcılar İçin 5 Altın Kural ............... 125 Her Tasarımcı İçin 11 İpucu ............................................ 127 Tasarımcılar Üzerine Notlar ........................................... 131 Kaynakça ve Kullanım Şartları ..................................... 133
  2. 3 Modern Web Tasarımı Hasan Yalçın - 2012 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
  3. 5 Modern Web Tasarımı Hasan Yalçın - 2012 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 Tasarımı yapılacak iş ile ilgili ne istendiği ve tüm detaylı fikirler ortaya konmalıdır. Sitenin amaç ve hedefleri belirlenmeli ve bu yönde bilgiler brifinge iliştirilmelidir. Bütçe ve Zamanlama 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. Hedef Kitle ve Proje Kapsamı Web sitesinin hedef kitlesinin belirlenmesi tasarım yapılırken belirleyici bir unsur olacaktır. 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.
  4. 6 Modern Web Tasarımı Hasan Yalçın - 2012 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
  5. 7 Modern Web Tasarımı Hasan Yalçın - 2012 Yapılmayacakları Tanımlayın!

    Tasarımı yapılacak site için olmazsa olmazlar ve olursa olmazları net olarak belirlenmesini sağlayarak sonuca ulaşın. Örneğin erkek parfüm ve bakım ürünleri satan bir sitede feminen renklerin kullanılmaması önemli bir 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. 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. Bu noktada fonksiyonel olarak tasarımın skeçler halinde veya wireframe olarak 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. Bu skeçler üzerinden yapılacak tasarımların mutlaka daha sonuç odaklı ve az revize getiren çalışmalar olacağını da belirtmek gerek. Dünyaca ünlü popüler video sitesi Vimeo’nun skeç çalışmaları. “Davranışsal tasarım kontrol hissi ile ilgilidir. Bu kullanılabilirliği, algılanabilirliği, ve duygularınızı da kapsar.” Don Norman - Yazar
  6. 8 Modern Web Tasarımı Hasan Yalçın - 2012 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. Moving Brand tarafından ness için hazırlanan kurumsal marka rehberi ve hazırlanışı oldukça etkileyici.
  7. 10 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  8. 11 Modern Web Tasarımı Hasan Yalçın - 2012 Ö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.
  9. 12 Modern Web Tasarımı Hasan Yalçın - 2012 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. E-Ticaret sitesi dendiğinde her zaman akla kalabalık ve karmaşık kutular, kocaman satın al ve sepet butonları gelmemeli... 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
  10. 14 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  11. 15 Modern Web Tasarımı Hasan Yalçın - 2012 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 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. Ekstra Gelir Elde Etme Fikri Ü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. Paylaşımcı Olun 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. Bilinirlik 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.
  12. 16 Modern Web Tasarımı Hasan Yalçın - 2012 “Bugüne kadar

    hiç bir başyapıt, tembel bir sanatçı tarafından yapılmamıştır.” Salvador Dali
  13. 18 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  14. 19 Modern Web Tasarımı Hasan Yalçın - 2012 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. Erdem Holding’in kurumsal sitesi ne yazık ki çağın oldukça gerisinde kalmış, acilen yenilenmeli... “İnternet ekonomisi insanlar, şirketler ve küresel bazda ülkeler için görülmemiş büyüme fırsatları yaratmaya devam ediyor.” John Chambers - CEO Cisco Systems
  15. 20 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  16. 21 Modern Web Tasarımı Hasan Yalçın - 2012 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. 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.
  17. 22 Modern Web Tasarımı Hasan Yalçın - 2012 Aramanın Önemi

    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. 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. İletişim Bilgileri Bir kurumsal sitenin en önemli detaylarından biri, firmanın iletişim bilgilerine kolayca ulaşımdır. 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-Bülten Üyeliği 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. 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.
  18. 23 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  19. 24 Modern Web Tasarımı Hasan Yalçın - 2012 Ö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ış İyi bir vitrin tasarımı müşteriyi dükkana çekmek için şüphesiz en önemli yöntem.
  20. 25 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  21. 26 Modern Web Tasarımı Hasan Yalçın - 2012 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. “İ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ı
  22. 27 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  23. 28 Modern Web Tasarımı Hasan Yalçın - 2012 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 fa- zla ürün gösterip satış yapma ihtimalini yükseltmek estetikten daha önemlidir!
  24. 29 Modern Web Tasarımı Hasan Yalçın - 2012 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
  25. 30 Modern Web Tasarımı Hasan Yalçın - 2012 Ö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)
  26. 31 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  27. 32 Modern Web Tasarımı Hasan Yalçın - 2012 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. Ö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. Autocomplete - Otomatik tamamlama özelliği kullanıcı için kolay bir arama deneyimi sağlar...
  28. 33 Modern Web Tasarımı Hasan Yalçın - 2012 Ü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 olmayan- kullanı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 mank- enin ö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.
  29. 34 Modern Web Tasarımı Hasan Yalçın - 2012 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. İ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
  30. 35 Modern Web Tasarımı Hasan Yalçın - 2012 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. 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. Ü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.
  31. 36 Modern Web Tasarımı Hasan Yalçın - 2012 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. 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. Alışveriş sürecinde ödeme aşamasında yaklaşık vazgeçme oranı %30 seviyesinde.
  32. 38 Modern Web Tasarımı Hasan Yalçın - 2012 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;
  33. 47 Modern Web Tasarımı Hasan Yalçın - 2012 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ı...
  34. 48 Modern Web Tasarımı Hasan Yalçın - 2012 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 Sosyal medyada yer almak, ürünlerinizin satışını gerçekleştirdikten sonra da tüketicileriniz ile iletişim halinde kalmanızı sağlar. Geniş Kampanyaların Yerini Küçük Etkileşimler Alır Kurumların çok geniş kitlelere ulaşmak için kullandığı klasik medya araçlarının yerini, kullanıcı ve tüketiciler ile bire bir ilişki kurabildiği sosyal medya üzerinden kolayca ve harcama yapmadan duyurulmasını sağlar. Ş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
  35. 49 Modern Web Tasarımı Hasan Yalçın - 2012 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. Hayal edebileceğiniz en kötü kullanılabilirlik örneği :) “Bir kullanıcıyı bilmediği bir teknolojiyi öğrenmesi için zorlamak yerine, teknolojiyi onun için uyarlamak daha mantıklıdır.” Larry Deniz
  36. 50 Modern Web Tasarımı Hasan Yalçın - 2012 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ün- leri 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.
  37. 51 Modern Web Tasarımı Hasan Yalçın - 2012 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...) 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. Ü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. 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 ger- ekiyor demektir. , Eksik bilgilerin, eski ürünlerin, stok- ta kalmamış malların kullanıcının keyfini kaçıran en önemli unsurlardan olduğunu unutmayın.
  38. 52 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  39. 53 Modern Web Tasarımı Hasan Yalçın - 2012 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
  40. 54 Modern Web Tasarımı Hasan Yalçın - 2012 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, inceleyen- yorumlayan olarak, nitelendirilebilir. Konu odaklı bloglara örnek olarak yemek ya da moda blogları örnek gösterilebilir. Kişisel moda blogları günümüzde oldukça popüler.
  41. 55 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  42. 57 Modern Web Tasarımı Hasan Yalçın - 2012 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. 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 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.
  43. 58 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  44. 59 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  45. 60 Modern Web Tasarımı Hasan Yalçın - 2012 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. ntvmsnbc haber portalı nispeten iyi haber siteleri içerisinde gösterilebilir. Ancak ülkemize özgü değişiklikler, siteyi yurtdışı emsallerinin gerisinde bırakmaya zorluyor. 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 krit- erleri vardır. Şimdi bu kriterlere genel olarak göz gezdirelim.
  46. 61 Modern Web Tasarımı Hasan Yalçın - 2012 Ö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. 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. Ü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ı. Turk nokta net yıllar içerisinde çok defa tasarımını değiştirmesine rağmen seviyesini korumaya çalışan yatay bir portal.
  47. 62 Modern Web Tasarımı Hasan Yalçın - 2012 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. 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ör- sellerin ise belli bir kalite seviyesinde olması gerektiğini bilmekte fayda var.
  48. 64 Modern Web Tasarımı Hasan Yalçın - 2012 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
  49. 67 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  50. 68 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  51. 71 Modern Web Tasarımı Hasan Yalçın - 2012 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. Özellikle web tasarım, zaman içinde sık sık değişime uğrayan kendine özgü eğilimleri olan bir görsel iletişim dalı. Sık sık değişen trendler, kullanıcıya daha iyiyi ve yenisini sunmak için yapılan geliştirmeler, web tasarımında durmak bilmeyen bir süreci oluşturuyor. Web sitelerinin daha çekici, daha kullanıcı dostu ve kolay kullanılabilmesi için neredeyse her gün farklı bir kod, script ya da tasarım üretiliyor. Bir tasarımcı olarak her zaman bu konuda uyanık kalıp, yeni gelişmeleri takip etmek bir zorunluluktur. Peki önümüzdeki dönem için nasıl bir hazırlık yapmalı, birlikte göz atalım. Mobil Uygulamalar 2010 ve 2011 yılında tablet ve dokunmatik akıllı telefonların iyice hayatımıza girmesi ile, tasarımcıların yaratıcı fikirleri farklı metod ve trendlere doğru ilerlemeye başladı. 2012 yılında da yine mobil ağırlıklı tasarımların hayatımızdaki kapsama alanı artarak de- vam edecek gibi görünüyor. Yepyeni magazin stili tasarımlar, çeşitli finansal mobil uygulamalar, takvim uygulamaları, farklı popüler web uygulamalarının mobil uygulamalarını bu yıl içinde görmek mümkün olacaktır. Görsel olarak da trendin Apple stili olacağını ön görmek ise şimdiden mümkün. Ayrıca bu duruma paralel olarak da QR kodlarının patlama yapması beklenebilir. 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.
  52. 73 Modern Web Tasarımı Hasan Yalçın - 2012 Ö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.
  53. 74 Modern Web Tasarımı Hasan Yalçın - 2012 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. 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.
  54. 76 Modern Web Tasarımı Hasan Yalçın - 2012 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
  55. 78 Modern Web Tasarımı Hasan Yalçın - 2012 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ı
  56. 80 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  57. 81 Modern Web Tasarımı Hasan Yalçın - 2012 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 en- gel 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. 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.
  58. 82 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  59. 83 Modern Web Tasarımı Hasan Yalçın - 2012 Bir web

    sitesinde; ne, nasıl yapılmamalı konusunda gerçekçi bir örnek! www.arngren.net
  60. 84 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  61. 85 Modern Web Tasarımı Hasan Yalçın - 2012 “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
  62. 86 Modern Web Tasarımı Hasan Yalçın - 2012 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. 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 An- cak 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.
  63. 88 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  64. 89 Modern Web Tasarımı Hasan Yalçın - 2012 Sıcak Renkler

    Kırmızı, turuncu ve sarı gibi renkleri sıcak renkler (En azından yaygın sıcak ren- kler) 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.
  65. 90 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  66. 93 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  67. 96 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  68. 99 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  69. 103 Modern Web Tasarımı Hasan Yalçın - 2012 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. Serifsiz fontlar (Sans Serif olarak tanımlanır) ise Arial veya Verdana Myriad gibi, başı ve sonu düz biten harf- lere 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...
  70. 104 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  71. 105 Modern Web Tasarımı Hasan Yalçın - 2012 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 ara- da 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öntem- le 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.
  72. 107 Modern Web Tasarımı Hasan Yalçın - 2012 “Tipografi, insan

    dilini en iyi şekilde görsel forma uygulama zanaattır.” Robert Bringhurst - Tipografi Sanatçısı
  73. 109 Modern Web Tasarımı Hasan Yalçın - 2012 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. Ö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.
  74. 110 Modern Web Tasarımı Hasan Yalçın - 2012 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.
  75. 111 Modern Web Tasarımı Hasan Yalçın - 2012 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 Başta tasarımcının el çantasında olmak üzere eğitsel (tutorial) sitelerine bol bol göz atın işinize yaraya- cak olanları arşivleyin ve bu eğitseller üzerinden bol bol pratik yapmaya çalışın. Bu çalışmalar tekniğinizi geliştireceği gibi yeni teknikler bulmanıza da olanak sağlayacaktır. 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. Başkaları nasıl yapmış inceleyin ve siz de uygulayın. Çalışma alanınızı geliştirin Eğer standart bir ofiste çalışmıyorsanız, çalışma alanınızı geliştirerek daha motive edici hale getirmek elinizde. 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. 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. Düzenli bir ortamda çalışmak verimliliğinizi artırır.
  76. 112 Modern Web Tasarımı Hasan Yalçın - 2012 Kitaplar alın

    dergiler okuyun Mesleğinizle ilgili kitaplar ve röportajlar okumaya çalışın. 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! Blogları inceleyin 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. 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.
  77. 113 Modern Web Tasarımı Hasan Yalçın - 2012 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ı Bir tasarımcının yaptığı işlerde her zaman yaratıcı olması gerekir/beklenir. Ancak yaratıcı çözümler üretemediğinizde, bloke olup hiç bir şey yapamadığınızda kendinizi nasıl motive edersiniz ya da etmeniz gerekir? 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. 1 Çok Çalışmak Eğer yoğun projeler ile uğraşıyorsanız, (mesela 10 gün boyunca günde 10 saat çalışıp, hiç izin yapmamışsanız) bu sizin için bir sıkıntı oluşturabilir. Yoğun çalışma temposu içerisinde kendinize fazla yüklenmeniz yaratıcılığınızı olumsuz etkileyebilir. 2 Aşırı Uykusuzluk 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. Bu konuda belirtmek gerek ki, fazla uyku ve uyuşukluk da bazen yaratıcılığı öldürebilir. 3 Stres Çağımızın hastalığı olarak nitelenen stres, yaratıcılık katili bir başka unsur. 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 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. Bu tip gerginlikler yaşamamak için önce cesur olmalısınız!
  78. 115 Modern Web Tasarımı Hasan Yalçın - 2012 Bloke Olduğunuzda

    Nasıl Üstesinden Gelirsiniz! 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 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. 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. 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! Farklı Araçlar Kullanın 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. İlham Arayı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. 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.
  79. 116 Modern Web Tasarımı Hasan Yalçın - 2012 Eleştiriler İle

    Başa Çıkmak 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. İş 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.” Eleştiri Faydalıdır 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. Aynı zamanda eleştirinin nereden geldiği, kim tarafından yapıldığı da önemlidir. 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. 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.
  80. 117 Modern Web Tasarımı Hasan Yalçın - 2012 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. Zaman zaman projenizle çok ilgisi olmayan kişilerce yapılan negatif eleştirilere de maruz kalabilirsiniz. Önemli olan ise, işte tam da bu nokta da motivasyonunuzu yitirmemektir. Eleştiri Dozunu En Baştan Düşürün Müşteriniz veya proje yöneticiniz ile iş başlarken hemen her detayı, en ince ayrıntısına kadar konuşup öğrenin. Tam olarak ne istendiğini, hatta tasarımsal olarak ne beklendiğini en baştan öğrenmek, daha sonra maruz kalacağınız eleştirilerin dozunun yüksek olmamasını sağlayacaktır. 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. Onlarca saat emek harcadıkları işler için yapılan sert eleştiriler onlar için kırıcı ve yıldırıcı olabilir. Sert ve olumsuz eleştiriler karşısında yılmayın, siz de sert bir karşı tepki göstermeyin. Size söylenenleri süzüp, içinden olumlu yanlarını alıp uygulamayı deneyin. İyi bir tasarımcı olabilirsiniz ama eleştirilere gösterdiğiniz tepkiler sizi antipatik biri haline getirebilir. Size söylenenleri olgunlukla karşılayarak, bildiğiniz doğruları karşınızdakilere ifade etmeye çalışın.
  81. 118 Modern Web Tasarımı Hasan Yalçın - 2012 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. 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 bili- yor” 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 za- man en güzel işleri çıkaracağınızı biliyorsunuz. Ayrıca hala en güzel tasarımınızı yapmadınız!
  82. 119 Modern Web Tasarımı Hasan Yalçın - 2012 “Çirkinliklerle savaşmak,

    bir tasarımcının yaşam biçimidir.” Massimo Vignelli - İtalyan Tasarımcı
  83. 120 Modern Web Tasarımı Hasan Yalçın - 2012 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. Web sitesi tasarlatmaya karar veren kişi veya kurumlar, öncelikle kendilerini ifade edecek sitenin nasıl olacağına karar vermek durumundalar. Bir portal mı, kurumsal bir site mi yoksa bir e-ticaret sitesi mi? Site Tanımı Kararsızlık bir web projesindeki en büyük handikap şüphesiz. Müşteri sizin veya proje yöneticinizin yardımları ile proje konusunda daha kararlı ve keskin köşelerle belirlenmiş bir tanım listesi hazırlamalıdır. Bu listede, zaman içinde gerçekleşecek değişim ya da revizyonlar öngörülmeli ve önlem alınmalıdır. 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. Site Haritası Genel hatları ile aşağı yukarı belirmeye başlayan site hakkında tasarımcıların öncelikle bilmesi gereken öge site haritası. 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.
  84. 121 Modern Web Tasarımı Hasan Yalçın - 2012 İç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. 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!
  85. 122 Modern Web Tasarımı Hasan Yalçın - 2012 Ç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 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. Her ne kadar projenin gerçekleşmesini isteseler de, yeterince bilgi vermezler ve yol gösterici olmazlar. Hatta çoğu zaman sıkıştığınız noktalarda telefonlarınıza bile çıkmazlar. Yaptığınıız tasarımı beğenmezlerse iş daha da zorlaşır. Çünkü yeniden bir şeyler yapabilmek için gereken bilgiyi de vermezler. Proje bir şekilde sonlanıp sıra ödemeye geldiğinde…. Eh hikayenin sonunu tahmin etmişsinizdir nasılsa… Titizler Tehlikeli tiplerden biridir. Bu tipte bir profil ile çalışıyorsanız yorulmaya hazır olun. Projenin her detayı ile ilgilidirler ve bir yorumları vardır. Projeye başlamadan sizden taslaklar isteyebilirler. Demolar, detaylı ekran görüntüleri ve sahip olduğunuz her bilgiyi sizden isterler. Her aşamada titizlenip doğru yolda olup olmadıklarını sorgular. Sizden bu konularda tavsiye ister ama uymazlar. Tasarımınızdaki hemen her unsuru en az bir kere değiştirmenizi isteyip, bir de öyle görmek isterler. Kısacası hep isterler… Aceleciler Bir başka tehlikeli grup daha. İş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.
  86. 123 Modern Web Tasarımı Hasan Yalçın - 2012 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 :) 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. 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. 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ı olma- yan kişilerden seçildikleri için gerçek hayatta karşılaşmanız daha zordur.
  87. 124 Modern Web Tasarımı Hasan Yalçın - 2012 “Her çocuk

    bir sanatçıdır. Problem, büyüdüğünde de sanatçı kalıp kalmayacağıdır.” Pablo Picasso
  88. 125 Modern Web Tasarımı Hasan Yalçın - 2012 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. Paylaşımcı olun, fikirlerinizi ve işlerinizi internet ortamında paylaşmaktan kaçınmayın. Yeni moda sosyal internet ortamlarında yer alarak kendinizi tanıtın ve işlerinizi paylaşı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 kavga etmek yerine, doğru yolu göstermeye çalışın. Piyasada hakkınızda yapılan iyi yorumlar size para olarak geri dönecektir. Gereksiz yere adınızın kötü anılmasına sebep olmayın.
  89. 126 Modern Web Tasarımı Hasan Yalçın - 2012 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. 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.
  90. 127 Modern Web Tasarımı Hasan Yalçın - 2012 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 Bir blog, kitap ya da dergi fark etmez, tasarım ve tasarımcılık hakkında size ilham verecek kaynaklara ulaşıp bunları tüketin. 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. Daha sonra bu arşivi açtığınızda karşınızda eşsiz bir kaynak bulacaksınız.
  91. 128 Modern Web Tasarımı Hasan Yalçın - 2012 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ör- leyin 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.
  92. 129 Modern Web Tasarımı Hasan Yalçın - 2012 Farklı Olmaktan

    Çekinmeyin Bazen kalabalığın içerisinde ayrı olmak faydalıdır. Farklı olmaktan, farkınızı göstermekten çekinmeyin. 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. En iyi işlerinizi paylaşın. Spor Yapın! Eğer mümkünse spor yapmaya çalışın, tüm zamanınızı bilgisayar başında geçirmeyin. Açık havada biraz spor, olmadı yürüyüş ve gezinti mutlaka size iyi gelecek ve enerji verecektir. Az Çalışın Başlık sizi korkutmasın, gereğinden fazla çalışmayın. İş 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. 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. Yaşamınızı bu yönde düzenlemeye çalışın. İşkolik olmak yerine planlı olmaya çalışın.
  93. 130 Modern Web Tasarımı Hasan Yalçın - 2012 “Görsel tasarımcı,

    estetiğin planlayıcısıdır.” Bruno Munari - İtalyan Tasarımcı - 1907-1998
  94. 131 Modern Web Tasarımı Hasan Yalçın - 2012 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. 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.
  95. 132 Modern Web Tasarımı Hasan Yalçın - 2012 Ağır eleştirilere

    hazır olun. 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. 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 kaybetme- den ç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. Bol bol arkadaş edinin. Sektörünüzden herkes ile tanışın ve arkadaşlık edin. 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. Ben bu tasarım işini öğrendim di- yerek 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. 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.
  96. 133 Modern Web Tasarımı Hasan Yalçın - 2012 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. 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