Table Of Content1
Modern Web Tasarımı Hasan Yalçın - 2012
2
Modern Web Tasarımı
GİRİŞ
GEREKLİLİKLER ve PROJE YÖNETİMİ WEB TASARIMI TEKNOLOJİ ve TEORİLER
........................................................... 2 ......................... 66
.............. 7 ........................................................................... 67
Tasarım Brifingi Nasıl Olmalı? Ara Yüz Tasarımının 10 Temel Kuralı
.......................... 12 ............................ 71
Kurumsal Web Sitesi Tasarımında Gereklilikler Simetri - Asimetri
........................................... 13 ............................... 81
E-Ticaret Sitesi Tasarımında Gereklilikler Web Tasarımında Yeni Teknolojiler
....................................................................................................... 14 .................................................................................... 86
Tasarımda Gereklilikler Hiyerarşisi Ara Yüz Tasarımında Sınırlamalar
...................................................................................... 15 ..................................................................................... 88
Blog Dünyası Renk Teorileri
.................................................. 103
Tasarımcı ve Blog Renklerin Dili
WEB TASARIMI TASARIMCI
Tipografi ve Web Tasarım
................................ 18 .......................................................... 109
................................. 24 ............................ 111
Kurumsal Siteler İçin Ara Yüz Tasarımı Tasarımcının Görevleri
................................. 38 ......................................................... 113
E-Ticaret Siteleri İçin Ara Yüz Tasarımı Kendinizi Geliştirmek İçin İpuçları
................................................................ 47 .................................................. 120
E-Ticaret Siteleri İçin Renk Tercihleri Motivasyon ve Tasarım
.................................... 49 ............... 125
Sosyal Medya Entegrasyonu Müşteri Tasarımcı İlişkisi
.......................................................................................................... 52 ............................................ 127
Efektif bir E-Ticaret Sitesi İçin İpuçları Serbest Tasarımcılar İçin 5 Altın Kural
.................................................................. 54 ........................................... 131
AIDA Modeli Her Tasarımcı İçin 11 İpucu
........................................................................................... 60 ..................................... 133
Kişisel Bloglar İçin Tasarım Tasarımcılar Üzerine Notlar
.............................................................. 63
Portal Tasarımları Kaynakça ve Kullanım Şartları
Nasıl Bir Tasarım İsterdiniz?
Modern Web Tasarımı Hasan Yalçın - 2012
3
GİRİŞ
Ülkemizde İnternetin aktif olarak kullanılmaya başladığı, ticari
ve kurumsal sitelerin de yavaş yavaş boy gösterdiği 1996-97
web
yıllarından itibaren grafik tasarım yeni bir dal ile tanıştı, daha
tasarımı.
sonra dijital ara yüz tasarımı olarak evrimleşecek olan
Teknolojinin gelişimi, İnternet hızlarının yükselerek internetin
kendisinin hayatımızın bir parçası haline gelmesi sürecinde hep
ekranlarda bir butonun ya da basit bir metin linke tıklamanın
peşinde koştuk.
Profesyonel olarak içerisinde bulunduğum bu 15 yıllık süreçte,
web ara yüz tasarımlarının da geçirdiği evrim, günümüz modern
web tasarımının temel yapı taşlarını oluşturdu.
Bu E-Kitap’ta; modern web tasarımındaki gereklilikleri, iyi bir
ara yüz tasarımının hangi yolları izleyerek yapılabileceğini ve
günümüz trendlerinin yanı sıra, bir tasarımcının işine
yarayabilecek kimi ipuçlarına da birlikte göz atacağız.
Umarım keyif alarak tüketirsiniz.
Hasan Yalçın
Tasarımcı’nın El Çantası
www.hasanyalcin.com
Modern Web Tasarımı Hasan Yalçın - 2012
4
Modern Web Tasarımı Hasan Yalçın - 2012
5
Tasarım Brifingi Nasıl Olmalı?
Bir tasarımcı için en önemli öncelik, elinde tasarımını yapacağı iş için sahip olması gereken
bilgilerin bir arada ve anlaşılır şekilde bulunmasıdır.
Gerek fonksiyonel gerekse içerik açısından toparlanmış bilgiye brifing diyoruz. Sayfa kurguları ve süreç yönetimi brifing
üzerinden planlanır. İyi bir brifing için gerekli prensipler aşağıdaki gibi sıralanabilir.
Amaç ve Hedeflerin belirlenmesi Hedef Kitle ve Proje Kapsamı
Tasarımı yapılacak iş ile ilgili ne Web sitesinin hedef kitlesinin belirlenmesi tasarım yapılırken belirleyici bir unsur
istendiği ve tüm detaylı fikirler ortaya olacaktır.
konmalıdır.
Bebek sitesi ile elektronik parça üreticisi firmanın sitesi görsel olarak
Sitenin amaç ve hedefleri elbette farklı unsurlar içerecektir.
belirlenmeli ve bu yönde bilgiler
brifinge iliştirilmelidir. Proje kapsamını detaylandırmayı unutmayın, özel çözümler gerektiren araçlar, ara
Bütçe ve Zamanlama
yüz tasarımına farklı yansır.
Projenin bütçelendirmesi ve süreç
yönetimi hassas konulardır, mutlaka
önceden netleştirilmeli ve süreç
planları yapılmalıdır.
Önceden yapılan planlama hem proje
sahibini hem de projeyi üreten kişi ya
da kurumun daha serbest çalışmasını
sağlar.
Modern Web Tasarımı Hasan Yalçın - 2012
6
Görsel Malzeme ve Stil Belirleme
Sitesi hazırlanacak kurumun ya da
projenin görsel malzemesini mutlaka
temin edin. Site için belirlenecek stil
konusunda müşterilerinizle ya da
yöneticiniz ile ortak bir fikir oluşturun.
Daha sonra oluşturacağınız stil için
gerekli malzemeleri toparlayarak
yapacağınız çalışmayı kafanızda
oluşturun.
Web sitelerinde illüstrayon veya doku ve fırça kullanmak farklı
birer stildir, bu iki örnekte stil oluşturmak açısından ilham
alabileceğiniz detayları barındırmakta.
“Tasarım kültürleri oluşturur.
Kültür değerleri şekillendirir.
Değerler geleceğinizi belirler.”
Robert L. Engin
Modern Web Tasarımı Hasan Yalçın - 2012
7
Yapılmayacakları Tanımlayın!
Tüm bu başlıklar altında belirlenecek ve netleştirilecek tasarım brifingi,
tasarımcının proje sürecinde başucu kitabı olacaktır.
Tasarımı yapılacak site için olmazsa
olmazlar ve olursa olmazları net olarak Bu noktada fonksiyonel olarak tasarımın skeçler halinde veya wireframe olarak
belirlenmesini sağlayarak sonuca ulaşın. tasarımcıya iletilmesi de, genel olarak projenin ekranların kurgulanması ve
tasarlanması aşamasında çok ciddi zaman kazandıracak bir unsur olacaktır.
Örneğin erkek parfüm ve bakım
ürünleri satan bir sitede feminen Bu skeçler üzerinden yapılacak tasarımların mutlaka daha sonuç odaklı ve az
renklerin kullanılmaması önemli bir revize getiren çalışmalar olacağını da belirtmek gerek.
detaydır, yine benzer şekilde bir
havayolu firması sitesinde toprak ve
yeryüzünü andıran renklerin
kullanımında sorun çıkması oldukça
muhtemel bir durumdur.
“Davranışsal tasarım
kontrol hissi ile ilgilidir.
Bu kullanılabilirliği,
algılanabilirliği, ve
duygularınızı da kapsar.”
Dünyaca ünlü popüler video sitesi Vimeo’nun
skeç çalışmaları.
Don Norman - Yazar
Modern Web Tasarımı Hasan Yalçın - 2012
8
Kurumsal Web Sitesi Tasarımında Gereklilikler
Kurumsal web siteleri; firmaların, kurumların yaptığı işleri ve kendilerini anlatıp ifade
ettikleri alanlardır.
Kurumsal site tasarımları için
gereklilikler, aslında tasarım brifinginin
özünü oluşturacak bilgileri içerir.
Kurumsal bir web sitesi
tasarlayacak tasarımcı, firmanın tüm
kurumsal kimliğine hakim olmalıdır.
Tasarımcılar firmanın kurumsal ve
görsel kimliği hakkında maksimum bilgi
ve malzemeye sahip olmalıdır.
Bazı firmaların kendileri için
oluşturdukları marka rehberleri
(Brand Guideline) vardır. Bu rehberler
içerisinde, markanın kendisini görsel
olarak ifade eden her unsur detaylı ve
Moving Brand tarafından ness için hazırlanan kurumsal marka rehberi ve hazırlanışı oldukça etkileyici.
kullanım örnekleri ile birlikte yer alır.
Modern Web Tasarımı Hasan Yalçın - 2012
9
Modern Web Tasarımı Hasan Yalçın - 2012
10
Eğer firmanın böyle bir rehberi varsa, tasarımcının işini kolaylaşacağı gibi, kurumsal bir kimlik oluşturmak için harcanacak
ekstra zaman kaybı da önlenecektir.
Bu malzemelerin eşliğinde, firma ile ilgili fotoğraf, eğer tanıtılması isteniyorsa ürün fotoğrafları, kurum fotoğrafları ve metin
içeriklere de ihtiyaç duyulacaktır.
Modern Web Tasarımı Hasan Yalçın - 2012
