cyber-warrior’dan Sh4iN yaptığımız söyleşi:

—————————————————

Konu linki: http://www.cyber-warrior.org/Forum/arayuz-tasarimi-ve-bilinmesi-gerekenler_463137,0.cwx

—————————————————

“Web Arayüz Tasarımcısı” Turgay Çakır’a GW Akademisi ve Gövde Gösterisinde gördüğüm arayüz tasarımlarındaki eksikliklerden yola çıkarak sizleri bu konuda bilgilendirmek için sizler adına sorular sordum.

Başlayalım..

1-) Web arayüz tasarımına başlamadan önce hangi programlardan yararlanabiliriz?
Photsohop, Fireworks, ColorPic, Illustrator

2-) Web arayüz tasarımına başlamadan önce çalışma boyutları nasıl olmalıdır? 960 Grid System nedir?
Tercihlere göre değişebiliyor. Mümkün olduğunca geniş ekranda çalışmak artık gereklilik oldu. 1800 *768 boyutları standart çalışma alanımı oluşturur. Fakat içerik alanının genişliği 960 px aralığında olma zorunluluğu hala bir sorun olsa da şuan için vazgeçilmez bir unsur. Göz ardı etmememiz gereken diğer bir konuda site eğer 560 px yükseklikten daha uzun olacaksa bu durumda ilk karşılama ekranını 560 px yükselikte görebileceğini hesaplamak ve site bölümlerini buna uygun konumlandırmak. (16,5″ lik laptop ekranları)

3-) Web arayüz tasarımında (renk uyumlulukları vb) nelere dikkat etmeliyiz?
Renk uyumluluğu zamanla kazanılabilecek bir alışkanlık aslında. Önemli olan her zaman yeniliklere ve değişikliklere hazırlıklı olmalısınız. Üzerinde çalıştığınız proje çok aykırı renklerin kullanımı gerektirebilir veya tam tersi standart renklerle çalıştığınız bir işi siz çeşitli parlama ve gölge oyunları ile farklı bir konuma taşıyabilirsiniz. Renkler konusunda genel bir standartım yok aslında sadece benim beğendiğimi genelde karşı tarafta beğeniyor demem doğru olur. Tasarımda vazgeçilmezlerimden olan aslında brush + overlar + softlight birleşimi: Tasarladığım butonun yüzeyine brush la rastgele açık koyu efekleri verip layer özelliğini overlay veya soft light olarak kullanırım sık sık. Standart renk kullanımlarına bağlı kalmak ilk zamanlar size yetecektir bunun için devaintart, behance gibi sitelere üye olup popüler tasarımları inceleyip renk kombinasyonları hakkında bir fikir alabilirsiniz. Fontlar, renkler, objeler, görseller, dokular, hepsi bir uyum içinde olmalı, Son zamanlarda dokular oldukça önem kazandı. Standart düz renk veya gradientli arkaplanları geride bırakacağımız günler yaklaştı diyebilirim. Dokuları bir çok şekilde oluşturabilirsiniz. Photoshopta pattenler, çeşitli sitelerden bulabileceğiniz textureler veya herhangi bir fotoğrafın blur ve noise filitrelerinden geçilirmiş hali… seçenekler dahada arttırılabilir.

4-) Web arayüz tasarımında font uyumlulukları ve yazı tipleri nasıl olmalıdır?
Font konusunda çok sıkıntı yaşıyorum ben. Nedeni ise daha önce yaptığım gibi binlerce fontu windowsta kullanmak aşırı yavaşlamaya sebebiyet veriyor. Bu yüzden çok sık yeni fontları arşivime katmadığım için kısıtlı sayıda fontla uzun zaman geçirmiş oluyorum. Bu da sizi bir süre sonra tasarım yönünden olumsuz etkiliyor. Uyumluluk bu konuda biraz seçici olmaya dayanıyor. Basit kullanım hataları yapmamak, çok fazla font çeşitliliğinden kaçmak ve tasarım akışını bomamak dikkat etmeniz gerekenler. Web arayüzlerde aslında düşündüğünüz kadar fazla font seçeneğiniz yok sadece olanı iyi kullanmak şuan için yeterli.

5-) Web arayüz tasarımında ikonların önemi?
Diğer her şey gibi ikonsal anlatımda gerektiği yerlerde kullanılmalıdır. Eskilerden gelen bir alışkanlık standart menü ikonları değil tabi bahsettiğim. Daha çok içeriğin önem arzeden kısımlarında sıklıkla kullanmak gerekiyor. Çoğu zaman standart ikonlar tasarımı anlatmakta güçlük çeker bir şekilde düzenleyip gerektiği yerde mümkünse fireworks ta kendi ikonlarınızı çizip tasarımlarımınızda kullanmanız ciddi bir fark yaratır. Son zamanlarda iphone, ipad ve diğer mobil cihazlardan sonra ikonsal kullanım biraz daha önem kazandı. Tasarıma uygun kendi ikonlarınızı yapmak aslında çok basittir ama çoğu zaman daha kolay yöntem olan iconfinder veya google aramalarını tercih edebiliyoruz.

6-) Kurumsal bir firmanın arayüz tasarımı estetik konusunda nasıl olmalıdır? Nelere dikkat edilmelidir?
Özellikle internet sitesini kartvizit olarak kullanan kurumsal şirketlerin en çok dikkat ettikleri şey kendilerini kısa yoldan, iyi şekilde anlatmak oluyor. Bu yüzden normalde çalıştığınız yöntemi biraz değiştirip müşterinin isteğini çok iyi anlamak ve yorumlamak gerekiyor, ekstra katacağınız çeşitli görsel düzenlemeler de yine çok fazla sivrilmeden, ön planda asıl yapmanız gereken işi tutmalısınız. Sadelik sizi sonuca götürecek bir yol. Biraz işin tasarım yönünden uzaklaşıp pazarlamasına odaklanırsak aslında burada sizi zorlayacak olan firmanın istediği, sizin hayal ettiğiniz ile çoğu zaman uyuşmaz. Kurumsal arayüz tasarımında müşterinin varsa renk beklentileri alternatiflerini öğrenmek, rakip firmaları iyi incelemek ve önem arzeden içerik bilgilerini göz önünde bulundurmak. Gerisi sadelik ve sizin hayal gücünüze kalıyor.

7-) Web arayüz tasarımına başlamadan önce müşteriden hangi bilgiler alınmalıdır?
Daha önceki soruda kısaca açıklamasını yapmıştım ama bu konu daha detaylı ve farklı başlıklar altında ele alınabilir. Müşteri profiline göre değişken bir konu ama sizi besleyecek ana başlıklar bellidir. Öncelikle yapacağınız projenin benzer tarzda örnekleri olup olmadığı ilk isteyeceğiniz bilgiler arasında. Varsa eğer detaylı olarak örnek siteleri inceleyip ekstra içerik beklentilerini öğrenebilirsiniz. Bu örnek siteler için müşteriden yorumlar alıp yapmanız veya yapmamanız gereken şeyleri kısmen öğrenmiş olursunuz. Sonrasında tasarımsal kurgusal beklentileri öğrenip, varsa renk seçenekleri hakkında fikirleri alınabilir..
Eğer çalışacağınız projede benzer tarzda bir site yoksa iş biraz karışıyor. Yeni daha önce uygulanmamış bir işte sizin üzerinde çalışabileceğiniz detaylı bir site haritası gerekiyor. Sonrasında ana sayfada kullanılacak modüllerin listesi (manşet bölümü, haber bölümü, içerikler vs.) ve yerleşimi hakkında kısa özet bilgiler edinecekleriniz arasında olmalı. Müşterinin beklentileri sizi daha fazla bref almaya yöneltebilir, örnek olarak beğenilen tasarım tarzlar, sayfa konumlandırılması için panit’te yapılacak basit çizimler vs.

Özetlersek:
1. Örnek siteler.
2. Sade veya daha komplike bir tasarım isteyip istemedikleri
3. Renk beklentileri (genel bu açık veya koyu renk bir tasarım isteyip istemediklerini anlatır size)
4. Site haritası
5. Ana sayfada kullanılacak modüller
6. Tercihe göre anasaydaki modüllerin yerleşimine örnek olabilecek basit bir çizim, bu taslağa bağlı kalmasanız da yine size fikir vermesi açısından önemlidir.

> WEB TASARIM NOTLARI
Web tasarım emin olun benim anlattıklarımdan çok daha farklı bir iş ve sektör. Siz ne kadarını anlayabilirseniz o kadarı görünüyor. Ben iyi bir tasarımcı olduğum iddasını kabul etmem hiçbir zaman. Yaptığım şey müşterilerimi anlayıp ihtiyaçlarına yönelik en uygun tasarımları üretmek. İş yoğunluğumun çoğunu freelancelar oluşturmaktadır. Bu yüzden tasarım konusundaki deneyimlerimi arttırmaya çalışırken ayrıca pazarlama, müşteri ilişkileri ve planlama yada önem vermem gerekiyor. 1 – 2 senelik iyi planlanmış bir eğitim süreci, yoğun çalışma temposu ile bu sektöre duyduğunuz ilgi sizi arayüz tasarımı konusunda iyi bir noktaya getirebilir. Sonrasında adımlarınızı atmak biraz daha zorlaşacaktır. İşin emekleme döneminde yapacağınız yüzlerce tasarım öğrenmek için iyi bir başlangıç.
İyi bir tasarımcı olmak, flash, action script, css/html, jquary, gibi uygulama alanlarına hakim olmayı ve bunun yanında logo, afiş, banner, flash animasyon uygulamaları ve çeşitli karakter çizimlerini de yapmanıza yetecek bilgiye sahip olmanız gerektiğini unutmayın.
Anlatılabilecek çok fazla detay olsa da işin hikaye kısmına girmek biraz yorabilir o yüzden devamlı uygulama yapmak size anlatacaklarımdan daha fazlasını katacaktır.

Bildiklerimin bir kısımını dahi aktarabildiysem ne mutlu bana.

Kolay gelsin.
Turgay Çakır
www.1renk.com

Arayüz tasarımı yaparken size ilham kaynağınız olması için örnek arayüz tasarımlarını incelemeniz sizlerin yararınıza olacaktır.