1 Modern Web Tasarımı Hasan Yalçın - 2012 2 Modern Web Tasarımı GİRİŞ GEREKLİLİKLER ve PROJE YÖNETİMİ WEB TASARIMI TEKNOLOJİ ve TEORİLER ........................................................... 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