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.
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.
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.
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.
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.
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.
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.
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.
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.
İç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.
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.
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.
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)
oztecnicdiyor ki:
2 Nisan 2009 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…
Yücel YILMAZdiyor ki:
2 Nisan 2009 11:59 pmSüper…
Tam istediğim yazı olmuş. Benzer yazıların devamının gelmesini dilerim.
Erkandiyor ki:
3 Nisan 2009 1:31 amTasarı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!
Sinan Serezdiyor ki:
3 Nisan 2009 1:55 amBu 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.
Sinan İŞLERdiyor ki:
3 Nisan 2009 8:43 amgerçektende çok yararlı ve eğlenceli bir yazı olmuş elinize sağlık üşenmeyip bizlerle paylaştığınız için…
Şevketdiyor ki:
3 Nisan 2009 9:30 amSayenizde hepimiz yeni tasarımın nasıl oluşturulduğunu biliyoruz. Sanki hepimiz projede görev almış gibi. Ellerinize sağlık.
serhat celepdiyor ki:
3 Nisan 2009 11:17 amhasan 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.
Berk Gündiyor ki:
3 Nisan 2009 12:30 pmEline 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
@lidiyor ki:
3 Nisan 2009 2:30 pmÇok güzel olmuş, tebrikler.
Kadir GÜNAYdiyor ki:
3 Nisan 2009 6:12 pmSonuna kadar zevkle okudum. Tasarım anlamında nelere dikkat edilmesi gerektiği konusunda faydalı bilgiler öğrendim.
Teşekkürler Hasan abi. Ve tebrikler.
Serdar Demirerendiyor ki:
3 Nisan 2009 7:17 pmalkislarlayasiyorum.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 (:
Alkislarlayaşıyorum.com Logosu Tarzı Logo =) | İnTeRNeTTurKdiyor ki:
4 Nisan 2009 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 […]
yakuterdiyor ki:
4 Nisan 2009 3:21 pmTasarı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.
eddiediyor ki:
4 Nisan 2009 3:54 pmabi 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.
Burak Özdemirdiyor ki:
4 Nisan 2009 9:22 pmÇok güzel iş çıkarmışsınız sahiden. Tebrikler.
Emre EĞRİdiyor ki:
5 Nisan 2009 2:36 pmGü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.
Emre Savaşdiyor ki:
5 Nisan 2009 9:24 pmYeni 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.
ahmet alp balkandiyor ki:
11 Nisan 2009 1:04 amGerçekten ellere sağlık, mükemmel :)
Can Ürekdiyor ki:
13 Nisan 2009 2:46 pmHem anlatım hem de site harika olmuş. Elinize sağlık.
Özkan Evindiyor ki:
18 Nisan 2009 3:32 pmGüzel tasarım ama dosya indir butonunun olmaması büyük eksiklik :/
Barış Özcandiyor ki:
24 Nisan 2009 6:51 amSitenin tasarımını zaten beğeniyordum. Perde arkasını görmek ve yapım aşamalarını okumak çok faydalı oldu. Teşekkürler.
Tasarımda Espri Anlayışı | UltraKoxp,Koxp 1731,Koxp 1732diyor ki:
27 Nisan 2009 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 […]
Tasarımda Espri Anlayışı | UltraKoxp,Koxp 1731,Koxp 1732.diyor ki:
28 Nisan 2009 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 […]
Haber HaberStandi.Com Haber, haberler, gazete haberleri, son dakika haberi » Blog Archive » Tasarımda Espri Anlayışıdiyor ki:
28 Nisan 2009 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 […]
murathandiyor ki:
4 Mayıs 2009 10:01 ameline sağlık gayet güzel bir tasarım olmuş merak ettiğim konu tasarımın genel olarak bitmesi ne kadar zaman aldı.
Cihan Aksudiyor ki:
9 Mayıs 2009 9:19 pmYazı 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.
| GÜNCEL HABER DUNYA EĞITIM GUNDEM HABERLER SAGLIKdiyor ki:
14 Mayıs 2009 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 […]
Tasarımda Espri Anlayışı « Blog Katalogdiyor ki:
18 Mayıs 2009 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 […]
Ömerdiyor ki:
23 Mayıs 2009 9:10 pmTek kelimeyle müthiş, üç kelimeyle; tek kelimeyje müthiş.
Bir Tasarımın Anatomisi: Yahoyt.com | Tasarımcının El Çantası | Hasan Yalçındiyor ki:
26 Mayıs 2009 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 […]
Tasarımda Espri Anlayışı - Sorbize.comdiyor ki:
6 Haziran 2009 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 […]
Mehmetdiyor ki:
6 Eylül 2010 2:17 pmTabi 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”.
güncel blogdiyor ki:
3 Şubat 2011 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