Web Arayüz Tasarımı
İş yapan kaliteli ve kurumsal web siteleri ve yazılımlarınız için doğru yöntemlerle web arayüz tasarımı hazırlıyoruz.
Web Sitesi Arayüz Tasarımı Hizmetlerimiz
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 ya da hizmette kullanılmaktadır. Web sitesi arayüz tasarımında kullanıcı deneyimi kavramı ise kullanıcılarınızın web sitenizde kaybolmamaları aradıklarını rahatlıkla bulmaları öne çıkarmak istediğiniz içerikleri okumaları ya da özellikle satışını arttırmak istediğiniz ürünlere yönlendirilmeleri gibi birçok konuda kullanıcı tepkilerinin neler olabileceğini ölçmek ve buna uygun tasarımlar üretmekle ilgilidir.
Ankara web tasarım sektöründe geçirdiğimiz 25 yılı aşkın sürenin getirdiği tecrübe ile tasarımlarımızı yaparken bu sayfada yazan tüm kuralları titizlikle uygularız. Sizler için hazırladığımız web arayüz tasarımları ile ziyaretçi ve kullanıcılarınızın sitenize güven duymalarını, sitenizde vakit geçirmelerini, iletişime geçmelerini, eğer bir satış sitesi ise satın alıma yönlendirici tasarımlar yapıyoruz.
Site Haritası
Bir web sitesi arayüz tasarımı projesine başlarken ilk olarak bir temel atılması gerekmektedir. Bu temel web sitenizin içeriğinin belirlenmesi ve içeriklerin bir araya getirilmesi ile başlar. Web sitesinde var olan tüm sayfaları bu etapta müşterilerimiz ile birlikte belirleriz. Projede yer alan tüm ana başlıklar ve bunlara bağlı sayfa ve alt sayfalar belirlenir. Bunların yazılı ve son haline getirilmesi web sitesi görsel tasarımına geçilmeden tamamlanması oldukça önemlidir. Bir site haritası oluşturarak başlanan her proje, başarı sağlamak adına atılmış en sağlam adımdır.
Workflow (site içi iş akışı)
Site içi iş akışı, web arayüz tasarımı kapsamında site haritası oluşumundan sonra 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 belirlendiği, o sayfadaki en önemli bölümün ne olduğu ve bir linke tıklandığında örneğin kullanıcıların yorum yapmalarını, iletişim sayfasına yönlendirilmelerini ya da 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)
Site Haritası ve iş akışlarının netleşmesinin ardından starter wireframe yani kabataslak elle çizim aşamasına geçeriz. Elle çizimde atlanabilecek noktaları mockup yazılımları Adobe XD, Photoshop ve Illustrator vb. uygulamaları kullanarak tamamlar ve net çizimler elde ederiz. Sizler ile üzerinde istişare ettiğimiz ve son haline getirdiğimiz kabataslak mockup ile artık web sitenizin bölümleri şekillenmiş, içerik yerleşimlerinin ve akışın nasıl olacağına dair net bir çizim oluşmuştur. Bu aşamadan sonra görsel tasarım daha rahat bir şekilde ilerler ve mockuptan farklı bir tasarım çıkmasının önüne geçilir. Dilerseniz bu mockupları tıklanabilir bir prototipe dönüştürebilir, ziyaretçinizin ana sayfadan iletişime ya da satın almaya kadar izleyeceği yolu temel tıklamalarla deneyebileceğiniz bir şekilde de sunabiliriz.
Görsel Tasarım
Elimizdeki içerik yerleşim planı (wireframe-mockup) üzerinden web sitesinde kullanılacak görseller belirlenir, bölümler ve başlıklar renklendirilir, ikonlar ve vektörel çizimler oluşturularak yerleşimleri plana uygun olarak yapılır. Firmanın kurumsal renkleri ya da o proje için belirlenmiş renkler en uygun kombinasyonda kullanılır. Kontrast, zıt ve ara renkleri, konsepte uygun sezgisel tecrübemize dayalı veya color scheme uygulamalarından da faydalanarak netleştirir, site renk tipografi ve görsel dilini belirleriz. Web sitesi tasarımlarımızda mümkün olduğunca az renk kullanımı ile hem rahat bir gezinti hem de temiz bir görüntü oluştururuz.
Modern Web Arayüz Kodlama
Temelde işimiz tasarım, arayüz kodlama yıllar içerisinde yeni jquery ve türevi next.js angular vb. 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 eklentiler bizim için oldukça kullanışlı. Ancak ihtiyaç halinde bunlara ek olarak yazılımlarınızın arayüzleri için kontrollü ve her adımda testlerini yaparak yapay zeka destekli CSS JS vb. yazarak son çıktıyı sizlere teslim ediyoruz. Dikkat ettiğimiz önemli konulardan biri de “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. Nihayetinde görsel tasarımı web uygulamanızın uyarlama zorluğuna göre %90 ve üzeri tasarıma sadık kalarak koda giydiriyoruz.
Tarayıcı ve Responsive Desteği
Tasarladığımız web sitelerini tüm modern web tarayıcılarında düzgün çalışacak ş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 hazırladığımız her web sayfası telefonda sadece görüntülenmekle kalmıyor, elinizdeki bir uygulama kadar akıcı ve parmağınızla rahatça gezebildiğiniz bir kıvamda çalışıyor. Web sitelerinizi artık sadece 3 değil en az 8 ekran ölçüsüne uygun olarak hazırlıyoruz. Böylece tasarladığımız web sayfaları tüm akıllı telefon, tablet, TV vb. için ayrıca bir uygulamaya gerek duymadan rahatlıkla gezilebiliyor ve her yerde düzgün görünen bir tasarıma sahip oluyor.
Accessibility (Erişilebilirlik)
Tüm alanlarda her zaman her hizmeti yarım alan ya da alamayan görme engelliler için text browserlar ya da arama motorları ve yapay zeka arama 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 sayfada 10 resim var ise hepsinin açıklamaları aynı mı? İşte tüm bunlara dikkat ederek kodladığımız arayüzler yukarıda bahsettiğimiz tüm platform ve görme engelliler için faydalı bir web sitesi haline gelir. Section 508, Lighthouse ve Google PageSpeed testleriyle sayfanızın erişilebilirlik düzeyini ölçer, yapay zekanın da okuduğu ARIA etiketlerini denetler, her şeyin doğru olmasına özen gösteririz. Böylece sayfanız hem görme engelli ziyaretçiye hem de arama ve yapay zeka botlarına aynı netlikte okunur.
Print CSS (Sayfa Yazıcı Görünümü)
Diyelim ki çok acil bir teklif vereceksiniz. Ürününüzün 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 olabilir. Opsiyonel olarak hazırladığımız web sayfanızın basılı ortam için de uygun olan versiyonu ile browser kapasiteleri dahilinde web sayfanızın gereksiz bölümler çıkarıldıktan sonra ürün adı, açıklaması ve resmini içeren bu çıktıyı rahatlıkla teklifinizin arasına koyabilirsiniz. Tüm bu hizmetlerimizden faydalanmak için bizimle iletişime geçin.
Arayüz Test Aşaması
Gerek test aşamasında gerekse yayına aldıktan sonraki o ilk günlerde ve haftalarda her butona basıp her formu doldurarak linklerin, formların ve butonların çalıştığından tek tek emin oluyoruz. Ne kadar iyi tasarlarsanız tasarlayın canlıda her zaman “şurası şöyle olsa, burası böyle dursa” denen küçük revizyonlar çıkar, bu çok normaldir. Tasarımı bozmayacak ufak tefek taşımaları ve yer değiştirmeleri, hazırladığımız web sitelerinin modüler altyapısı sayesinde rahatlıkla yapmaktayız. Kimi zaman daha doğru bir yol varsa size onu öneriyoruz, kimi zaman da tam istediğinizi uyguluyoruz.
WEB ARAYÜZ TASARIMI
işlerimiz
Profesyonel ve Kurumsal Web Sitesi Tasarımı İşlerimizden Örnekler
Web Arayüz Tasarımı Hakkında Sıkça Sorulan Sorular
UX ile UI arasındaki fark nedir?
Kısaca UX ziyaretçinin sitede yaşadığı deneyimin bütünü, UI ise bu deneyimi oluşturan görsel arayüzdür. UX "ziyaretçi aradığını kolayca bulabiliyor mu, satın almaya rahat ulaşıyor mu" sorusuyla ilgilenir. UI ise renk, buton, yazı tipi ve yerleşim gibi gözle gördüğünüz her şeydir. İyi bir web arayüz tasarımında ikisi birbirinden ayrılmadan, aynı anda düşünülür.
Tasarımı onaylamadan koda ya da yayına geçiyor musunuz?
Hayır. Önce sizinle sitenin haritasını ve akışını çıkarıyor, ardından kabataslak mockup üzerinde anlaşıyoruz. Siz görsel tasarımı onaylamadan kodlamaya geçmiyoruz. Çünkü bir yerleşim yanlışını mockup aşamasında düzeltmek çok kolaydır, ama aynı yanlışı site yayına girdikten sonra fark ederseniz düzeltmesi daha uğraştırıcı olur.
Hazır tema ya da şablon mu kullanıyorsunuz?
Hayır. Her arayüzü o markaya özel sıfırdan tasarlıyoruz. WordPress'i yalnızca altyapı olarak kullanıyoruz, tasarım hazır bir şablondan gelmiyor. Hazır tema ucuz ve hızlı görünse de aynı temayı kullanan yüzlerce siteyle benzeşme riski taşır.
Sadece mevcut sitemin arayüzünü yeniler misiniz?
Yeniliyoruz. İçeriğiniz ve altyapınız dururken yalnız arayüzü elden geçirebiliriz. Ancak eski tasarımdaki uzun yatay görseller gibi mobilde bozulan öğelerin yeniden tasarlanması gerekebilir. Çoğu zaman en sağlıklısı, benzer çizgide sıfırdan mobil uyumlu bir arayüz tasarlamaktır. Fakat burada kodunuza entegrasyon işlemini sizin veya yazılımcınızın yapması gerekiyor.
Görme engelliler ve erişilebilirlik için ne yapıyorsunuz?
Resim alt etiketleri, doğru başlık hiyerarşisi ve text tarayıcılarda düzgün okunan bir yapı hazırlıyoruz. Section 508 ve Lighthouse testleriyle sayfanın erişilebilirlik düzeyini ölçüyoruz. Bu hem görme engelli ziyaretçiler hem de arama motoru botları için sitenizi okunur kılıyor.
Web arayüz tasarımı SEO'yu etkiler mi?
Doğrudan etkiler. Hızlı açılan, mobilde rahat kullanılan ve ziyaretçiyi sitede tutan bir arayüz, arama motorlarının da ödüllendirdiği şeydir. Bu yüzden web arayüz tasarımını en baştan hafif kod ve doğru sayfa düzeniyle ele alıyor, ziyaretçiyi kaçırmayan bir deneyim sunuyoruz.
Yazılım ya da uygulama arayüzü de tasarlıyor musunuz?
Tasarlıyoruz. Yönetim panelleri ya da uygulama arayüzlerini de tasarlıyoruz. Elinizde bir uygulama olmasa bile konuyu anlattığınızda uygulama arayüzünüzü tasarlıyoruz.
Sitedeki ikon ve illüstrasyonları hazır mı alıyorsunuz, siz mi çiziyorsunuz?
İkisi de olabiliyor. Bütçeniz uygunsa özel ikonları ve illüstrasyonları genelde biz çiziyoruz, böylece siteniz size özel ve tutarlı bir görsel dile kavuşuyor. Bütçeniz kısıtlıysa ücretsiz hazır ikon setlerinden ve hazır vektörlerden uygun olanları kullanıyoruz.
Arayüzü önce mobile göre mi masaüstüne göre mi tasarlıyorsunuz?
İkisini birden düşünerek, masaüstünü çizerken mobili de hesaba katıp ardından mobil ekranı ele alıyoruz. Ama mobili küçültülmüş bir masaüstü gibi görmüyoruz. Gerektiğinde bir sekmeyi mobilde gizliyor, bir bölümü telefonda farklı bir düzene sokuyor, uygulama tadında ve parmakla rahat kullanılan ekranlar tasarlıyoruz.
Tasarım dosyalarını bize veriyor musunuz?
Arayüz tasarımını Adobe XD Photoshop veya Illustrator ile hazırlıyoruz. Yalnızca arayüz tasarımı hizmeti alıyorsanız tasarım dosyalarını size teslim ediyoruz, bunda bir sıkıntı yok.
Web sitemizi yönetirken arayüz tasarımını bozar mıyım?
Web sitenizi teslim ettikten sonra içeriği panelden kendiniz girersiniz, ama tasarımı bozabilecek düzenlemeleri en baştan engelliyoruz. Yeni bir sayfa, ürün ya da haber eklediğinizde renkler, başlık boyutları ve butonlar ilk günkü düzeninde kalır. Gerektiğinde tasarımı dağıtabilecek alanları teknik olarak da kilitleyebiliriz ama çoğu zaman buna gerek kalmaz, çünkü kimse kendi sitesini bozmak istemez.
Profesyonel Tasarım
Hizmetine mi ihtiyacınız var?