Web Arayüz Tasarımı
İş yapan kaliteli ve kurumsal web siteleri 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 yada hizmette kullanılmaktadır. Web Arayüz 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ö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ımı ile ziyaretçi ve kullanıcılarınızın sitenize güven duymalarını, sitenizde vakit geçirmelerini eğer bir satış sitesi ise satın alma oranlarının artmasını sağlayacak şekilde yönlendiren tasarımlar yapıyoruz.
#web-arayüz-tasarımı #web-sitesi-arayüz-tasarımı
Site Haritası
Bir web arayüz tasarımı 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ı web sitesi görsel tasarımına geçilmeden yapılması oldukça önemlidir. Bir site haritası oluşturarak başlanan her proje, başarı sağlamak adına atılmış sağlam bir adım demektir.
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 belirlenmesi 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 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)
Site Haritası ve iş akışlarının netleşmesi ardından ardından starter wireframe yani kabataslak elle çizim aşamasına geçeriz. Elle çizimde atlanabilecek noktaları mockup yazılımları Figma Adobe XD vb. uygulamaları kullanarak net çizimler ile 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 bir 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.
Görsel Tasarım
Elimizdeki içerik yerleşim planı (wireframe-mockup) üzerinden web sitesinde kullanılacak görseller belirlenir bölümler başlıklar renklendirilir ikonlar vektörel çizimler oluşturularak yerleşimleri plana uygun olarak yapılır. Firmanın kurumsal renkleri yada 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 sheme uyguları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.
Arayüz Kodlama
Temelde işimiz tasarım, kodlama konusuna eskisi kadar 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 eklentiler bizim için oldukça kullanışlı. Ancak ihtiyaç halinde bunlara ek olarak CSS JS ve PHP kodlamalar 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. Nihayetinde görsel tasarımı web uygulamalarının zorluğuna göre %90 ve üzeri başarı ile oluşturuyoruz.
Tarayıcı ve Responsive Desteği
Tasarladığımız web sitelerini 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 artık müşterilerimiz için hazırladığımız tüm web sayfaları mobil uyumludur. Web sitelerinizi artık sadece 3 değil en az 8 ekran ölçüsünde 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 gezilebilior ve her yerde düzgün görünen bir tasarıma sahip oluyor.
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 yukarıda bahsettiğimiz tüm platform ve görme engelliler için faydalı bir websitesi haline gelir. Section 508 ve Lighthouse 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ü)
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 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. Tüm bu hizmetlerimizden faydalanmak için bizimle iletişime geçin.
WEB ARAYÜZ TASARIMI
işlerimiz
Profesyonel ve Kurumsal Web Sitesi Tasarımı İşlerimizden Örnekler
Profesyonel Tasarım
Hizmetine mi ihtiyacınız var?