Skip to main content

Web Arayüz Tasarımı

Yazılım ve Mobil Uygulamalar için
Yazılım firmaları için uygulamalarına psd, ai, xd formatında görsel arayüz tasarımı hizmeti veriyoruz. Beraber neler yapabiliriz hemen konuşalım. Bizimle iletişime geçin.
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 20 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ğlayacak tasarımlar yapıyoruz.

site haritasi

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.

User Interface Design (UI) 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.

user interface design - web arayüz tasarımı

Visual Design (Görselleştirme)

Elimizdeki içerik yerleşim planı (wireframe) üzerinden web sitesi görselleri belirlenir renklendirilir ikonlar vektörel ç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ı ya da color sheme sitelerinden de yararlanılarak belirlenir.  Mümkün olduğunca az renk kombinasyonu ile hem rahat bir gezinti hem de temiz bir görüntü oluştururuz.

html5 css3 jquery

Arayüz Kodlama HTML5 & CSS3

Temelde işimiz tasarım, kodlama konusuna eskisi kadar çok girmiyoruz. Arayüz kodlama yıllar içerisinde yeni jquery ve türevi kütüphanelerin dallanıp budaklanmasından sonra ayrıca bir uzmanlık haline geldi. WordPress için kod yazmadan sayfa oluşturmayı sağlayan pluginler bizim için oldukça kullanışlı. Ancak ihtiyaç halinde bunlara ek olarak html + css kodlama yapıyoruz. Dikkat ettiğimiz konuların en başında “ne kadar az o kadar iyi” prensibidir. Böylece hem sayfa yüklenme sürelerini azaltıyor hem de sayfada verilen içeriğin html kodlarından daha fazla yer tutmasını sağlamaya çalışıyoruz.

tarayıcı desteği

Tarayıcı ve Responsive Desteği

Tasarladığımız tüm web sitelerinde tüm modern web tarayıcıları destekler şekilde hazırlıyoruz. Bunun yanısıra her zaman web arayüz tasarımı gelişimine katkıdan ziyade zarar veren Internet Explorer gibi tarayıcılar için ekstra css kodlama gerekirse onu da yapmaktayız. Ayrıca dileyen müşterilerimiz için hazırladığımız mobil uyumlu siteler hazırlamaktayız. Böylece 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

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 baskı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.

Arayüz tasarımına mı ihtiyacınız var?
Doğru yerdesiniz. Beraber neler yapabiliriz?
Hemen konuşalım.