user exprerience design - kullanıcı deneyimi tasarımı

User eXperience (UX)

Kullanıcı deneyimi olarak türkçeye çevirebileceğimiz bu kavram birçok sektörde kullanıcı ile etkileşim sağlayan her ürün yada hizmette kullanılmaktadır. Web tasarımında ise kullanıcı deneyimi kavramı kullanıcılarınızın web sitenizde kaybolmamaları aradıklarını rahatlıkla bulmaları öne çıkarmak istediğiniz içerikleri okumalarını yada özellikle satışını arttırmak istediğiniz ürünlere yönlendirilmesi gibi bir çok konuda kullanıcı tepkilerinin neler olabileceğini ölçmek ve buna uygun tasarımlar üretmekle ilgilidir.  Sektörde geçirdiğimiz 15 yılın ardından tasarımlarımızı yaparken bu sayfada yazan tüm kuralları dikkate alarak hazırladığımız web arayüz tasarımı ile kullanıcılarınızın sitenize güven  duymalarını, vakit geçirmelerini eğer bir satış sitesi ise satın alma oranlarını arttırmanızı sağlıyoruz.

Site Haritası

Site Haritası

Bir web projesine başlarken ilk olarak bir temel atılması gerekmektedir. Bu temel web sitenizin içeriğinin belirlenmesi içeriklerin bir araya getirilmesi ile başlar. Web sayfası yada projesinde var olan tüm sayfalar bu etapta müşterilerimiz ile beraber olarak belirlenir.  Projede yer alan tüm ana başlıklar ve bunlara bağlı sayfa ve alt sayfalar belirlenir. Bunların yazılı hale getirilmesi üzerinde düzenlemeler yapılması açısından oldukça önemlidir. Bir site haritası oluşturarak başlanan her proje başarı sağlamak adına sağlam bir adım atmış demektir.

Workflow (site içi iş akışı)

Workflow (site içi iş akışı)

Site içi iş akışı, site harıtası oluşumundan sonra web projesindeki her bir sayfanın içeriğinin ve sitenin amacına uygun olarak kullanıcıların davranışlarının neler olması gerektiğinin kabaca şekillendirildiği aşamadır. Her bir sayfadaki elemanların önem derecelerinin belirlenmesi o sayfadaki en önemli kısmın ne olduğu ve bir linke tıklandığında örneğin kullanıcıların yorum yapmalarını yada bir ürün satın almalarını sağlamak için geçilecek aşamaların neler olduğunun belirlendiği aşamadır.

Wireframe & Mockup (taslak çizimi

User Interface Design (UI) Wireframe & Mockup (taslak çizimi)

Site Haritası ve iş akışları ardından starter wireframe yani kabataslak elle çizim aşamasına geçeriz. Elle çizimde atlanabilecek noktaları  mockup programları kullanarak net çizimler ile elde ederiz. Sizler ile üzerinde tartışıp son haline getirdiğimiz mockup ile artık web sitenizin bölümleri şekillenmiş ve içerik yerleşimlerinin nasıl olacağına dair bir net bir çizim oluşur. Bu aşamadan sonra görsel tasarım daha rahat bir şekilde ilerleyerek farklı bir tasarım çıkmasının önüne geçilmiş olur.

Visual Design (Görselleştirme)

Visual Design (Görselleştirme)

Elimizdeki içerik yerleşim planı (wireframe) üzerinden web sitesi görselleri belirlenir renklendirilir ikonlar vektörerel çizimler oluşturularak yerleşimleri sağlanır. Firmanın kurumsal renkleri yada o proje belirlenmiş renkler en uygun kombinasyonda kullanılır. Kontrast renkler ara renkler sezgisel tecrübemize dayalı yada color sheme sitelerinden de yararlanılarak belirlenir.  Mümkün olduğunca az renk kombinasyonu ile hem rahat bir gezinti hemde temiz bir görüntü oluştururuz.

Arayüz Kodlama HTML5 & CSS3

Arayüz Kodlama HTML5 & CSS3

Arayüz Kodlama (Front-End Development) konusunda dikkat ettiğimiz konuların en başında “ne kadar az o kadar iyi” prensibidir. Böylece hem sayfa yüklenme sürelerini azaltırız hem de sayfada verilen içeriğin html kodlarından daha fazla yer tutmasını sağlarız. Bu prensip SEO (arama motorları optimizasyonu) açısından en önemli konu başlıklarından biridir. Ayrıca her browserda mobil ciihazlarda tabletlerde hatta hala IE8 kullanan ziyaretçilerinizin ekranlarında da görünümün stabil kalmasını sağlamak için css ve javascriptlerin optimizasyonunu sağlayarak gerekirse farklı versiyonlarını kodlayarak herkes için web projenizin arayüzünü kodlarız.

Tarayıcı ve Responsive Desteği

Tarayıcı ve Responsive Desteği

Tasarladığımız tüm web sitelerinde tüm modern web tarayıcıları destekler şekilde CSS kodlamaktayız. Bunun yanısıra her zaman web arayüz tasarımı gelişimine katkıdan ziyade zarar veren Internet Explorer tarayıcıları için ekstra css kodlama yapmaktayız. Evet IE6 için bile. (Not: IE6’nın ömrümüzü yemişliği vardır.) Ayrıca dileyen müşterilerimiz için hazırladığımız tüm sayfaları responsive mobil uyumlu olarak da kodlamaktayız. Böyle tüm akıllı telefon ve tabletler için ayrıca bir uygulamaya gerek duymadan web sitenizin her platformdan erişimini kolaylaştırıyoruz.

Accessility (Erişilebilirlik)

Accessility (Erişilebilirlik)

Tüm alanlarda her zaman her hizmeti yarım alan yada alamayan görme engelliler için text browserlar yada arama motorları botları için web siteniz düzgün bir şekilde kodlanmış mı? Resim alt etiketleri ve başlıkları yazılmış mı? Yazıldı ise bir sayfa da 10 resim var ise hepsinin açıklamaları aynı mı? İşte tüm bunlara dikkat ederek kodladığımız arayüzler yukarda bahsettiğimiz tüm platform ve görme engelliler için faydalı bir websitesi haline gelir. Section 508 testleri ile de sayfanın erişilebilirlik düzeyi test edilerek engelleri aşmanızı sağlarız.

Print CSS (Sayfa Yazıcı Görünümü)

Print CSS (Sayfa Yazıcı Görünümü)

Diyelimki çok acil bir teklif vereceksiniz. Ürününüzün o henüz basılı bir broşürü de yok. Ne yaparsınız. Eğer web sayfanızın baszkıya uyumlu hali kodlanmadı ise yazıcıdan aldığınız çıktı gerçekten de hiç profesyonel durmayabilir. Prestijinizin sarsılmasına ve o işi alamamanıza bile neden olabiilr. İşte tam burada eğer web sayfanızın basılı ortam için de uygun versiyonunu kodlatırsanız browser kapasiteleri dahilinde web sayfanızın gereksiz her bölümü çıktıktan sonra ürün adı açıklaması ve resmini içeren bir çıktıyı rahatlıkla teklifinizin arasına koyabilirsiniz.