Illüstrasyon: Yeşim Paktin

Arayüz Tasarımında Keşifler- Yeni ATÖLYE Websitesi

Bariz olanı çıkarıp, anlamlı olanı ekleyebiliyor muyuz?

ATÖLYE
ATÖLYE
Jul 24, 2017 · 6 min read

Yazarlar: engin ayaz, Kurucu Ortak ve Tasarım Direktörü, Emre Erbirer, İletişim Yöneticisi

Kendi kendimizin müşterisi olduğumuz her projeyi, deneyim için harika bir fırsat olarak görüyoruz. Bu yüzden, Ekim 2016’da, web sitemizi yeniden tasarlamaya başladığımız zaman, sadece daha iyi bir içerik sentezi yaratmak için değil, aynı zamanda web sitesi kullanıcılarını hem şaşırtacak hem de memnun bırakacak stratejik tasarım öğeleri geliştirmek için yola çıktık. John Maeda’nın izini takip ederek, kendimize sürekli şu soruyu sorduk:

“Bariz olanı çıkarıp, anlamlı olanı ekleyebiliyor muyuz?”

Yetenekli bir tam teşekküllü tasarımcı ve geliştirici olan Can Usta ile çalışarak, ATÖLYE ekibinden bir tasarım araştırmacısı, bir kullanıcı deneyimi tasarımcısı, bir stratejist, bir iletişim uzmanı ve çok disiplinli bir tasarımcının da içinde bulunduğu bir takım oluşturduk. Dört ay boyunca, içerik ve ihtiyaçları rafine etme çalışmalarının yanı sıra, geniş çaplı geliştirme süreci ve bir düzine arayüz tasarım sistemleri üzerinden geçtik. Uygun kullanıcı geri bildirimini almak için, ilgili üçüncü kişilerle ve komünitemizle üç farklı geri bildirim seansı düzenledik.

Sonuç olarak, platformumuzla birlikte dijital kimliklerimizi de geliştirmemize olanak veren, içerik odaklı ve hareket merkezli minimal web sitemizi oluşturduk.

Temel yenilikler açısından, aşağıdaki sorularla karşılaştık:

  • Vizyonumuza dair genel hissiyatı vermenin yanı sıra, güncellemelere yer veren bir ana sayfada nasıl geniş bir alan yaratabiliriz?
  • Her sayfada yeterli içerik sağlarken, akışkan bir slayt gösterisini nasıl oluşturabiliriz?
  • Tüm site boyunca kolayca keşfedilebilen bir aksiyon çağrısı (CTA) sistemini nasıl geliştirebiliriz?
  • Çevrimiçi ve çevrimdışı mecralarda marka kimliğinin tutarlılığını form ve renkleri kullanarak nasıl sağlarız?

Ürettiğimiz çözümler ise aşağıdaki gibi.

Hero Header=Menü

Menü ve hero header, web sitelerinde genellikle, hem görsel hem de kavramsal olarak tamamen ayrışıyor. Menü, sayfanın üstbilgi (header) ve altbilgi (footer) kısımları arasında karmaşık bir bölüme dönüşürken, hero header, gerekli içerik desteği olmadan çok soyut ve jenerik kalıyor.

Menünün, bariz olanı çıkararak, hero header’daki belirli sözcüklerin uzantısı hâline geldiği bir senaryo ile, bu iki elementi birleştirdik. Ziyaretçi menü butonuna tıkladığında, hero header’daki her bir sözcüğün yanında menünün alt öğelerinin olduğunu keşfediyor.

  • Disiplinlerötesi: Geniş disipliner bir tabanın, beceri setlerinin ve karakterlerin benzersiz bir şekilde şekillendiği sistemin arkasındaki yapıyı anlatıyor. Komünite, hem web sitesinde hem de mekânda ikinci sırada yer alıyor, onu ekip takip ediyor.
  • İnovasyon: Proje geliştirmeye olan yaklaşımımızı, ekibin yürüttüğü projeler ve komünite ile gerçekleştirilen işbirlikleri üzerinden tanımlıyor.
  • Platform: Her şeyi bir arada tutan ve olanak sağlayan etmen. Yoğun bir takvimi olan etkinlik mekânından, Makerlab’den ve çalışma alanından oluşuyor.

Geçici Başlıklar & Logo

Çoğu zaman, web sitelerindeki başlık yazıları ve logolar ya fazla yer kaplıyor ya da arkalarındaki resimlerle birlikte görsel bir karmaşa içinde oluyor. Bu duruma karşılık olarak, başlık yazısının ve logonun, içeriği sunmak için yeterli bir süre boyunca kaldığı ve daha sonra yok olduğu bir davranış modeli geliştirdik.

Başlığın yok olması, sayfanın üst alanının, hem sağ hem sol tarafına tıklanarak kontrol edilebilen doğal bir slayt gösterisine dönüşmesini sağlıyor.

Bu sistem, genellikle sadece sembolü ile kullanılan ATÖLYE logosu için de işliyor ve logonun yazılı kısmı, sadece sayfa ilk yüklendiğinde görülüyor. Aşağıya kaydırıldığında, logonun yeri içeriğe alan açmak için sola doğru kayarken, logonun yazılı kısmı kayboluyor. Bu, tüm site içinde logonun görsel hafızadaki yerini güçlendirirken, görsel karışıklığı da en aza indirgiyor.

Bağlamsal ve Kişisel Aksiyon Çağrısı

Aksiyon çağrısı, tüm web siteleri için önemli bir öğedir, fakat çoğu zaman, statik bir hâlde bulunur. Kaydırma işlemi ile hareket ediyor olsa bile, eylem çağrısının içeriği, sitedeki farklı sayfalar boyunca aynı kalır. (Örn.: Chat butonları)

Aksiyon çağrısı butonunun, ekranın sağ alt köşesinde yer almasına karar verdik. Bu butonun içeriği ve bağlantısı her sayfada değişiyor, fakat hareketi aynı kalıyor. Sayfalar yüklendiğinde görünebiliyor ve aşağı kaydırıldığında, üç nokta ve ince bir yeşil çerçeveden oluşan bir daire olarak kalıyor. Sayfanın sonunda ise aksiyon çağrısı kendini altbilgi (footer) ile uyumlu hale getirerek yeniden ortaya çıkıyor.

Ana sayfada ise kullanıcının tüm olası eylemlerinin bir özetini sağlayan, sofistike bir aksiyon çağrısı sistemi de planlandı. Her bir aksiyon, ekipteki belirli bir kişiyle bağlantılı olması ile kişisel dokunuşu sağlıyor, ve kullanıcı daha sonra arka planda işleyen bir içerik yönetim sistemindeki özelleştirilmiş formlara yönlendiriliyor.

Tutarlı Yazı, Form ve Renk

Birçok mevcut web sitesinde, davranış ve içerik açısından bakıldığında detaylı bir renk ve form haritası bulmak kolay değil. Bağlantılar, çoğu zaman altı çizili ya da farklı renkte yazılarla gösteriliyor ve renkler, ilgili içerik tipleri ile nadiren doğrudan eşleşiyor. Yazı tipi de site içerisinde farklılık gösteriyor ve baskıda kullanılan yazı ile örtüşmüyor.

Yazıyı, formu ve rengi kapsayarak hem çevrimiçi hem de çevrimdışında tutarlı bir marka kimliği sağlayan, sadelik esaslı bir tasarım mantığı uyguladık.

Yazı: Optimo’nun keskin fakat eğlenceli PX Grotesk’ fontunu ana font olarak kullanarak, logo, ana metin, başlıklar ve gövde metinde tutarlılığı koruyarak görsel sistemi kolaylaştırdık.

Görsel tekbiçimlilik ve sadelik, birçok etkinlik, workshop ve projenin senkronize bir biçimde gerçekleştiği, komünite merkezli bir platformda tutarlılığa ulaşmanın kolay bir yolunu sağlıyor. Yazı, belirli bir görsel karakter katarken, içeriğin ve görsellerin ortaya çıkmasını sağlıyor ve geri planda kalıyor.

Form: Tüm web sitesinde, dört sütunluk bir ızgara (grid) sistemi kullanılıyor. Bu sistem, içeriğin modüler şekilde düzenlenmesi için sabit bir temel oluşturuyor. Kutular, bağlantılar veya post-it notları olarak kullanıldığı ve görsellerin, yatay ve dikey formatta olduğu gibi kare şeklinde de sıralanabiliyor.

Bölümler dışında ikinci bir farklılaşma noktası, kenar uygulaması ile ortaya çıkıyor. Statik içerikler, keskin kenarlı kutulara yerleştirilirken, bağlantı içeriklerinin farklılaşmak adına yuvarlak köşeleri var. Belirsiz bir gölge animasyonu, bağlantılara uygulanıyor.

Renk: ATÖLYE’nin üç ana rengi kırmızı, açık yeşil ve safran sarısı. Bu renklerden her biri, farklı kavramsal sağlayıcılıklara sahip ve site boyunca düzenli bir biçimde kullanılıyor.

Kırmızı, gösterge noktaları için uygulanıyor. Bu, içeriği ortaya çıkarmayı sağlarken, soluk açık mavi tarayıcı standardını görmeye alışkın günlük kullanıcılar için de küçük bir sürpriz yaratıyor. Kırmızı rengi ayrıca, Girişim vs. Müşteri Projesi veya Etkinlik vs. Durum Çalışması gibi etiketler için de düzenli formlarda kullanılıyor.

Tüm bağlantıların, çok baskın olmadan öne çıkmalarını sağlayan sitenin bir diğer ana rengi ise açık yeşil. Bu renk aynı zamanda, tasarımdaki tutarlılığı güçlendirerek, ATÖLYE’nin fiziksel mekânında da kullanılıyor.

Safran sarısı, post-it efekti sağlayan bir statik vurgu rengi olarak kullanılıyor. Ayrıca, renk kompozisyonunda yeşil rengi dengeleyerek, bir sıcaklık ortaya çıkarıyor.

Sosyal Medya & Basılı Materyaller: Tutarlı tasarım prensiplerini kullanarak, sosyal medya gönderilerimizi ve basılı materyallerimizi yeniden düzenlendik. Temel formların yanı sıra, yazı tipinin, imgelerin ve tutarlı renk kullanımının, web sitesi ile baskıyı karşılıklı birbirini tamamladığı ve beslediği bir sistem sağlıyor.

Sonuç

Web sitemiz için özenli bir tasarım dili kurarak, yenilikçi hareketler ile birlikte yepyeni bir görünüme ve hisse kavuşan bir model yarattık. Arayüz trendlerinin mevcut hızı göz önünde bulundurulduğunda, web sitesinin ne zamana kadar geçerli kalacağını öngörmek zor; ancak, çözümümüzün, minimal fakat etkili öğeleri ile, gelecek yıllarda da etkisini koruyacağına inanıyoruz.

Lütfen yorumlarınızı bizimle paylaşın.

ATÖLYE İçgörüler

Disiplinlerötesi inovasyon platformu

ATÖLYE

Written by

ATÖLYE

Disiplinlerötesi inovasyon platformu // Transdisciplinary innovation platform

ATÖLYE İçgörüler

Disiplinlerötesi inovasyon platformu

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade