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.

Son Yazılar
Yorum ( 33 )
  1. oztecnic
    2 Nisan 2009 at 11:33 pm

    Çok başarılı…

    Projenin en azından tasarım aşaması sonlanana kadar nasıl geliştiğini göstermesi bakımından çok önemli faydalı bir paylaşım…

    İdeali bu olmasına rağmen her koşulda süreçler bu şekilde gelişmiyor ne yazık ki; bu ise başka bir tartışma konusu…

    Değerli paylaşımınız için teşekkür ederim…

  2. Yücel YILMAZ
    2 Nisan 2009 at 11:59 pm

    Süper…

    Tam istediğim yazı olmuş. Benzer yazıların devamının gelmesini dilerim.

  3. Erkan
    3 Nisan 2009 at 1:31 am

    Tasarım her yönüyle gerçekten mükemmel olmuş. Bu yazıyı kaleme almanız da ayrıca bir güzellik tabi. İçeriğine ise diyecek laf bulamıyorum!

  4. Sinan Serez
    3 Nisan 2009 at 1:55 am

    Bu sitenin tasarım aşamasının bukadar zahmetli olabileceğini hiç düşünmüyordum, alkışlarlayaşıyorum ekibinin kalitesini yansıtan bir tasarım olmuş, sizi tebrik ediyorum Hasan Bey, ayrıca bu sitede emeği geçen herkese de sonsuz şükranlarımı sunuyorum.Lütfen kalitenizden hiçbir zaman ödün vermeden yola devam edin.Saygılar.

  5. Sinan İŞLER
    3 Nisan 2009 at 8:43 am

    gerçektende çok yararlı ve eğlenceli bir yazı olmuş elinize sağlık üşenmeyip bizlerle paylaştığınız için…

  6. Şevket
    3 Nisan 2009 at 9:30 am

    Sayenizde hepimiz yeni tasarımın nasıl oluşturulduğunu biliyoruz. Sanki hepimiz projede görev almış gibi. Ellerinize sağlık.

  7. serhat celep
    3 Nisan 2009 at 11:17 am

    hasan abicim ellerine sağlık. müthiş bir tasarım ve yine müthiş bir yazı olmuş. limonata tadındaki eski sitesi geldi yazıyı okurken bir an gözümün önüne de, -ki zaten yazının sonuna da çakmışsın imajı- katedilen yol inanılmaz. Eğer altın öcümük yarışmasına katılırsanız, ve 1. seçilmezseniz altın öcümüğünde “sezarın hakkı sezara” politikasını savunduğundan ciddi anlamda şüphe duymaya başlıycam. “Ellerine sağlık, hadi durma kutla bu zafer senin” adlı şarkı sözleriyle de yazıma son vericem.

  8. Berk Gün
    3 Nisan 2009 at 12:30 pm

    Eline sağlık yazı ve tasarım için. listeleme seçeneklerinin olduğu tırtıklı bölüm dışında çok hoşuma gitti

  9. @li
    3 Nisan 2009 at 2:30 pm

    Çok güzel olmuş, tebrikler.

  10. Kadir GÜNAY
    3 Nisan 2009 at 6:12 pm

    Sonuna kadar zevkle okudum. Tasarım anlamında nelere dikkat edilmesi gerektiği konusunda faydalı bilgiler öğrendim.

    Teşekkürler Hasan abi. Ve tebrikler.

  11. Serdar Demireren
    3 Nisan 2009 at 7:17 pm

    alkislarlayasiyorum.com u nasıl olduysa benim de keşfetmem 1 hafta öncesine dayanıyor MYK ekibi olarak gerçekten güzel bir tasarım ve güzel bir içerik hazırlamışsınız (:

    ayrıca site içindeki içerikler kesinlikle çok sağlam, oyunlar, yazılar, videolar… hepsi birbirinden eglenceli zamanında görüp şimdi unuttuğumuz, yada mumla aradığımız belgeler…

    son olarak MYK bünyesinde barınan her sitenin birbirini bu kadar iyi desteklemesi gerçekten güzel. Bu siteleri gezerken sanki tek bir sitenin alt sayfalarında geziyormuş gibi bir bütünlük var..

    Kesinlikle başarılı bir tasarım elinize sağlık (:

  12. Alkislarlayaşıyorum.com Logosu Tarzı Logo =) | İnTeRNeTTurK
    4 Nisan 2009 at 11:41 am

    […] olduğunu öğrendim.Logosu gayet hoşuma gitti.Bende böle bi logo yapmak istedim her ne kadar hasanyalcin kadar başarılı olamasamda güzel bir logo […]

  13. yakuter
    4 Nisan 2009 at 3:21 pm

    Tasarımcının El Çantası için daha faydalı bir makale olamazdı. Ellerine sağlık Hasan usta. Ne kadar teşekkür etsek azdır.

  14. eddie
    4 Nisan 2009 at 3:54 pm

    abi tebrik ederim bende kendi blogumu geliştirmeye başladım.
    burada paylaştığın işlem aşamaları bana tasarımımda yardımcı olacak gibi. çok teşekkürler.
    son olarak ilk halinden çok farklı bir yapıyya sahip olmuş.
    gerçektan güzel bir dizayn.

  15. Burak Özdemir
    4 Nisan 2009 at 9:22 pm

    Çok güzel iş çıkarmışsınız sahiden. Tebrikler.

  16. Emre EĞRİ
    5 Nisan 2009 at 2:36 pm

    Güzel bir tasarım anlayışı içerisinde yol katedilmiş. Siteyi incelemem sonucunda Görsellik yanında kullanışlığıda dikkatimi çekti. Böyle güzel tasarımlarınız ile nice ödüllere. Tebrik ederim.

  17. Emre Savaş
    5 Nisan 2009 at 9:24 pm

    Yeni tasarımı görünce kısa süreli şok geçirdim. Yapılan retro tarzı tasarım türkiyede parmakla gösterilecek türden bir iş. Tek kelime ile muhteşem.

  18. ahmet alp balkan
    11 Nisan 2009 at 1:04 am

    Gerçekten ellere sağlık, mükemmel :)

  19. Can Ürek
    13 Nisan 2009 at 2:46 pm

    Hem anlatım hem de site harika olmuş. Elinize sağlık.

  20. Özkan Evin
    18 Nisan 2009 at 3:32 pm

    Güzel tasarım ama dosya indir butonunun olmaması büyük eksiklik :/

  21. Barış Özcan
    24 Nisan 2009 at 6:51 am

    Sitenin tasarımını zaten beğeniyordum. Perde arkasını görmek ve yapım aşamalarını okumak çok faydalı oldu. Teşekkürler.

  22. Tasarımda Espri Anlayışı | UltraKoxp,Koxp 1731,Koxp 1732
    27 Nisan 2009 at 1:29 pm

    […] en iyi bütünleştiren sitelerin başında gelir. Hasan Yalçın bu tasarımın anatomisini anlatırken sitede dikkat etmediğimiz, gözümüzden kaçan tüm esprileri açıklamış ve bize tam bir fikir […]

  23. Tasarımda Espri Anlayışı | UltraKoxp,Koxp 1731,Koxp 1732.
    28 Nisan 2009 at 4:06 am

    […] en iyi bütünleştiren sitelerin başında gelir. Hasan Yalçın bu tasarımın anatomisini anlatırken sitede dikkat etmediğimiz, gözümüzden kaçan tüm esprileri açıklamış ve bize tam bir fikir […]

  24. Haber HaberStandi.Com Haber, haberler, gazete haberleri, son dakika haberi » Blog Archive » Tasarımda Espri Anlayışı
    28 Nisan 2009 at 1:07 pm

    […] en iyi bütünleştiren sitelerin başında gelir. Hasan Yalçın bu tasarımın anatomisini anlatırken sitede dikkat etmediğimiz, gözümüzden kaçan tüm esprileri açıklamış ve bize tam bir fikir […]

  25. murathan
    4 Mayıs 2009 at 10:01 am

    eline sağlık gayet güzel bir tasarım olmuş merak ettiğim konu tasarımın genel olarak bitmesi ne kadar zaman aldı.

  26. Cihan Aksu
    9 Mayıs 2009 at 9:19 pm

    Yazı o kadar güzel ki, gerçek olmasına şaşırdım.Umarım devamı gelir, ve bize en azından fikir bazlı bir katkı sağlar.Yeni tasarım şahane olmuş acaba kim yapmış diyordum ve ben bi şekilde bu yazıyla karşılaştım.

  27. | GÜNCEL HABER DUNYA EĞITIM GUNDEM HABERLER SAGLIK
    14 Mayıs 2009 at 6:56 pm

    […] en iyi bütünleştiren sitelerin başında gelir. Hasan Yalçın bu tasarımın anatomisini anlatırken sitede dikkat etmediğimiz, gözümüzden kaçan tüm esprileri açıklamış ve bize tam bir fikir […]

  28. Tasarımda Espri Anlayışı « Blog Katalog
    18 Mayıs 2009 at 8:01 pm

    […] en iyi bütünleştiren sitelerin başında gelir. Hasan Yalçın bu tasarımın anatomisini anlatırken sitede dikkat etmediğimiz, gözümüzden kaçan tüm esprileri açıklamış ve bize tam bir fikir […]

  29. Ömer
    23 Mayıs 2009 at 9:10 pm

    Tek kelimeyle müthiş, üç kelimeyle; tek kelimeyje müthiş.

  30. Bir Tasarımın Anatomisi: Yahoyt.com | Tasarımcının El Çantası | Hasan Yalçın
    26 Mayıs 2009 at 12:00 am

    […] tamamlanarak yayına girdi. Daha önce AlkışlarlaYaşıyorum projesinde paylaştığım bilgiler hayli ilgi çekip, rağbet görünce, benzer bir çalışmayı da Yahoyt için yapmak […]

  31. Tasarımda Espri Anlayışı - Sorbize.com
    6 Haziran 2009 at 12:16 pm

    […] en iyi bütünleştiren sitelerin başında gelir. Hasan Yalçın bu tasarımın anatomisini anlatırken sitede dikkat etmediğimiz, gözümüzden kaçan tüm esprileri açıklamış ve bize tam bir fikir […]

  32. Mehmet
    6 Eylül 2010 at 2:17 pm

    Tabi sizin ki kod gibi değil. Yaptınız mı taklit edilse hemen anlaşılır. Kod öyle mi, fikrini kapan götürüyor, telif ödeyende yok. Ben şimdi kod yazarken ürettiğim fikri açıklasam heme çalarlar bi teşekkürde etmezler. Zerre de kıskanmadım zaten tasarımı. Hiç ama. Kötü bile tühh kaka :P

    Elinize sağlık “hocam”.

  33. güncel blog
    3 Şubat 2011 at 5:55 pm

    çok başarılı olmuş , paylaşım için teşekkürler başarılarının devamını dılıyorum

Bir cevap bırakın
Captcha Captcha güncellemek için resime tıkla