Kapatmak için Esc tuşuna basın

Bir Tasarımın Anatomisi: Alkışlarla Yaşıyorum

Geçtiğimiz günlerde yeni tasarımı ile yayına giren alkislarlayasiyorum.com’un tasarımının perde arkasını incelemeye ne dersiniz?

Aralık ayının sonlarına doğru bünyesinde bulunduğum MYK Medya bünyesine katılan Alkışlarla Yaşıyorum sitesinin yeni tasarımı için kolları derhal sıvadık.

Öncelikle ihtiyacımız olan sitenin konseptine uygun retro bir logo idi.  Hayal ettiğim logoyu üretmek ve üzerinden bir kaç ufak revizyon ile final hale getirmek çok zor olmadı. Tam da sitenin havasına uygun, eğlenceli ve bir dönemin tasarım öğelerini taşıyan bir logo olmuştu.

aylogo

Logo onaylandıktan sonra, deyim yerinde ise saha çalışması başladı. Aklımda sitenin içerik ve konseptine uygun olarak, belli bir dönemi yansıtacak retro-vintage stilinde bir tasarım yapmak vardı. Zaten genel olarak MYK ve Alkışlarla ekibinin de eğilimi bu yönde olduğu için biraz kaynak araştırması yapmakla başladım işe.

Bu site aradığım sorulardan bir kaçına yanıt oldu, burası da yine ilgi çekici bir kaynak oldu, buraya bayıldım, burası ve bu site de fikirlerimi geliştirmeme yardımcı oldu.

Tamamen retro içeriğe sahip bu blog müthiş bir kaynak, buradan fikir almak amacı ile sayısız retro desene ulaştım, burada ise o döneme ait bir çok reklam içeriğine ulaştım.

Bu adreste rastladığım robot koleksiyonu farklı ilhamlar verdi, flickrdaki bu set ise yine dönem reklamları ile igili çok iyi bir kaynak oldu. Bu araştırmada karşıma çıkan siteler tabii ki bu örneklerle sınırlı değil, size fikir vermesi açısından bir kısmını paylaşmak istedim.

Bu kaynaklar beynimin bir yanını kurcalamaya devam ederken, bir yandan da dünya üzerinde yayında olan isim yapmış ya da ilgi çekici video paylaşım sitelerinin listesini çıkartıp, kağıda dökerek üzerinde analizler yapmaya başladım. Bu çalışmanın sonunda artık bir toplantı vakti gelmiş, analiz ve notlarımı MYK ekibi ile paylaşmak üzere demli çaylarımızla birlikte toplantı masasının başındaki yerimizi almıştık.

aytoplanti

Amacımız sadece tasarım olarak değil fonksiyonel olarak da alkışlarla yaşıyorum’a ne katabiliriz, ne tip yeni fonksiyonlar ekleyebilir, ya da mevcut öğeleri nasıl iyileştirebiliriz sorularına yanıt bulmaktı.

Bu çalışmanın ardından boş bir photoshop belgesi ve hazırlanmış yeni alkışlarla logosu ile tasarıma start verdim.

ayretro

Anlaşılan bu retro havayı en iyi eskimiş kağıt efektlerinin yanı sıra yine özel dönem objeleri ile vermek kullanıcı açısından, hem havaya girme hem de kolay anlaşılır olması açısından iyi bir çözüm olacaktı. Buradaki obje seçeneklerim ise tam 70-80’li yılları anımsatacak Atari 800xl, Atari oyun kolu, bir Mintax kutusu, Volkswagen kaplumbağa, bir teyp kasedi ve biraz daha 60’lara kayarak gökkuşağı oldu. Bunun üzerine bir dönemin unutulmazı Polaroid kartlar içerisinde manşet alanımızı ekleyince, header altı alanımız kendini buldu.

aymanset

Bu arada navigasyon ve site içinde yine amacına uygun olarak SuperDelicious fontunu seçtim, aynı zamanda logoya hayat verende bu font oldu.

Side barda yer alacak kutuların arka planı için o dönemlerde özellikle bir çok evin mutfağının vazgeçilmez perde desenini kullandım. Bu benim içinde nostaljik bir an oldu.

ayperde

Bu konsantrasyon, aslında sizi yarattığınız proje ile yaşatıyor bazen. Bu işleri yaparken itiraf etmeliyim ki bol bol ABBA dinledim. Çok faydalı oldu doğrusu!

Banner alanına gelince şirin retro bir robot tasarımda yerini aldı. Reklamın arkasında hınzırca kullanıcıya bakmasının bu detayı yakalayanlar açısından hoş olduğunu düşünüyorum.

ayreklamban

Ana sayfanın içerik listelemesini yine eskimiş kağıt parçaları ile uygulamayı düşündüm, bu aslında farklı kategorilerdeki içeriklerin gösterimi için zor olsa da onlarıda kendine özgü birer ikon hazırlayarak üstesinden gelmeye çalıştım.

aycontent

Bu gibi durumlarda bir tasarımcının sadece kendi işini değil css kodlama ve yazılım ekibini de düşünmesi gerekiyor. Zira değişken içerikli bir sitede tasarım adına uçmanız hem css kodlamayı zora sokar, hem de canlı yayına geçince birbirinden farklı içeriklerin uzunluk yada kısalıklarına göre tasarımınızın patlama ihtimali artar.

Site içeriklerinde son dönemin moda fontu olan ve bir çok kişi fark etmese de en kolay okunabilen fontlardan biri olan Georgia fontunu tercih ettim.

Sayfalamayı da bu tadda hazırladıktan sonra, sitenin alt kısmı olan footer’ı tamamladım. Burada sosyal medya bağlantılarını yine şirin retro bir robotçuk ile kotardım.

ayfooter

Site içeriği ile eşsiz olduğu için kullanıcının aklına gelebilecek her detaya hızlıca ulaşması açısından hem tepede hem de alt kısımda arama alanları oluşturmayı ihmal etmedim.

aylove

İçerikleri oylama konusunda bir zamanlar çok moda olan I Love rozetleri ile, alkışlar ile yaşayan bir site olarak, alkışlayan el ikonu koymak arasında kararsız kaldık. Yaptığımız ikon çalışmalarının kendini o alanda yeterince ifade edemediğini görünce benimde aslında favorim olan rozetlerde karar kıldık.

ayplay

Alt sayfalara sıra geldiğinde, o sayfalarda yer alacak  elementleride yine aynı konsepte uygun olarak çalıştım tüm tasarımı tamamlayarak css kodlaması için teslim ettim.

ayicerik2

Alkışlarla Yaşıyorum bu yeni tasarımı ile geçen hafta yayına girdi, zaman içerisinde giderilecek bazı eksikleri elbette var. Ancak eski halini hatırlayacak olursak, attığımız adımın ne kadar ciddi olduğuda gerçek.

ayeski

Tüm süreç göz önüne alındığında aslında burada paylaştıklarım çok kısa kalıyor olsa da, yeni tasarımcılar için bir projede yaşanan süreçler açısından fena bir örnek olmadığını düşünüyorum.

Bu süreçte bol bol beyin fırtınası yaşadığımız başta Serdar Kuzuloğlu, tüm MYK Ekibindeki çok değerli iş arkadaşlarıma ve uykusuz gecelerin css üstadı Fatih Hayrioğlu’na, bu işte emeği, fikri geçen herkese gönülden teşekkürler.

Yorumlar (33)

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir