İnteraktif Tasarım

WebdesignerDepot Yeniden Tasarlandı!

Ve işte burada… Yoldan sonra çok fazla gecikme, sayısız sahtekarlık ve fikir, yeni {$lang_domain} sonunda burada! Bu, tüm WDD ekibi için inanılmaz derecede karmaşık bir yeniden tasarlama süreciydi, ancak sonuçlarla son derece gurur duyuyoruz ve umarım yaptığınız kadar sevmenizi umuyoruz.

Dün yeni tasarımı başlattık ve Twittersphere bize büyük geri bildirimler verdi ve bazı hataları tanımlamaya yardımcı oldu. Geçtiğimiz gün için hataları düzelttik ve hala bunu yapıyoruz. Bu nedenle, önümüzdeki günlerde karşılaşabileceğiniz bazı teknoloji hatalarını lütfen affedin.

Yeni tasarımın eski sitenin ruhunu konuşmaya devam etmesi, aynı zamanda ziyaretçilere ilham kaynağı olması ve güncel web tasarım standartları ve tekniklerini güncel tutması bizim için önemliydi.

Özellikle yeni ana sayfa, sitemize yeni ziyaretçiler sunmada daha iyi bir iş çıkarmaktadır. Navigasyon ve bilgi yapısının artık daha temiz ve daha net olduğunu göreceksiniz.

Bu yayında, WDD'nin bu yeni sürümünü size sunmak için sahnelerin arkasındaki yeni ve neyin yeni olduğuyla ilgili daha fazla ayrıntıya gideceğiz. Yani, içeri girelim!

Son birkaç yılda 40 milyon ziyaretçimizden biri (!) Olsaydınız, tasarımın, nasıl söyleyeceğinin farkına varırsınız. Radikal olarak farklı! Aslında eski tasarımların hiçbiri tutulmamıştır. Hepsini attık ve zeminden taze başladık. Bu, bir yeniden tasarımla alabildiğiniz kadar radikaldir ve sitemize, içeriğimize ve en önemlisi daha iyi bir seçim olduğuna inandığımızın lehine önceki markalaşma faydalarımızı kaybettiğimiz için bazı riskler taşır. !

Tüm bunların arkasında kimin olduğunu görmek için bazı kredilerle başlayalım…

İşte bu tasarımdaki yenilikler:

Karma düzen: Dergi ve geleneksel blog stili

Eski tasarım geleneksel bir blog düzenine sahipken, en yeni mesajların her zaman en üstte yer almasıyla, yeniden tasarlanan sürüm bir dergi stili ile geleneksel blog düzeni arasında bir melez. Bunun içeriğimiz için oldukça iyi çalıştığını görüyoruz. Daha geniş bir düzen, ana sayfaya daha fazla içerik getirmemize izin verirken, ana sayfadaki 2 sütun, içeriğin zaman zaman bunaltıcı olabileceği bazı geleneksel dergisi tarzı bloglardan daha kolay okunur.

Öne çıkan içerik

Blog yayınları üç özellikli alan ile serpiştirilir: 2 dikey ve 1 yatay. Dikey alanlar, şu anda sitede en sıcak konulardan bazılarını (duyarlı tasarım, jQuery, vb.), Yatay alan ise MightyDeals.com sitesindeki en son fırsatları göstermek için kullanılmaktadır. Toplamda, eski tasarımda kullandığımızdan, okuyucularımızı ezmeden 10 yayın daha yayınlayabiliriz.

Denge ve ağırlık

Ana Sayfa: Ağır görüntüler nedeniyle, her gönderi için yeterli önizleme metin içeriği görüntüleyerek metin ve resimler arasında dengeli bir denge kurmaya çalıştık. Asıl makale sayfalarında, resimler ve kod snippet'lerinin tam genişlikte olmasını seçtik, metin ise resimlere daha dar bir genişlikte ortalanmış olarak görüntülendi. Bu, sitenin daha hızlı ve daha kolay okunmasını (veya taramasını) sağlar ve görüntüleri maksimum etki için mümkün olan en büyük boyutlarda görüntüler. Eski yayınlardaki ve diğer daha dar resimlerdeki resimler için, HD TV'de standart bir tanım gösterimini izlerken gördüğünüz siyah çubukları anımsatan, yan taraftaki gri çubukları görüntülemeyi seçtik. Bu, eski yayınları yüzlerce gönderiyi yenilemeden sitenin yeni görüntüsüne entegre etmek için bulabileceğimiz en iyi uzlaşma oldu!

Duyarlı tasarım

Yeni site artık tamamen yanıt veriyor ve bir masaüstü bilgisayar, dizüstü bilgisayar, tablet ya da akıllı telefonda olsanız harika görünüyor. Akıllı telefon versiyonunu göründüğü gibi görün ve bir web sitesinden daha çok bir uygulama gibi hissediyorsunuz ve bunun çıktığı yoldan gerçekten gurur duyuyoruz. Çok hızlı yükler!

Retina grafikleri

Apple daha fazla retina cihazını kullanıma sunarken, daha yüksek çözünürlüklü ekranlar web siteleri için daha alakalı hale geliyor. Yeni WDD, mümkün olan her yerde retina grafiğini sunuyor. Sitenin tasarımı retina cihazlarında mükemmel net görünüyor. İleride, mümkün olan yerlerde tüm yazılarımızda retina optimizasyonlu grafiklerimiz olacak. Bu, web'in epey retina henüz hazır olmadığı için yapıldığından daha kolay olduğu söylenebilir, aslında çok az sayıda site bu sırada yüksek çözünürlüklü grafikler sunuyor. Son yazılarımızdan bazıları zaten kısmen retina hazır ve bazıları bunu gelecekte de taşıyacak. Ayrıca retina reklamlarının gelecekte çok uzak olabileceğini de duyduk.

Gelişmiş navigasyon

Makaleleri görüntülerken tarayıcınızın sağ tarafında (mobil cihazlarda değil) bir artı işareti göreceksiniz. Tıklandığında, e-kitabın içeriğine göz atmak gibi geçerli makalede gezinmenizi sağlayan bir mini tarayıcı açılır. Güncel makaleyi mini tarayıcıdan da paylaşabilir ya da ilgili makaleleri görebilir, sonraki ve önceki yazıları okuyabilirsiniz.

Sanat

Yeni sitemizin sanatını yapmak için über yetenekli çizer Radim Malinic ile bir kez daha işbirliği yaptık. Radim, Londra, İngiltere merkezli bir ödüllü sanat yönetmeni ve grafik tasarımcısıdır. Adı altında Marka Nu önde gelen ev markalarıyla çalışıyor. Orijinal WDD web sitesi tasarımından bu yana Goldman Sachs, Bacardi, Blistex, Londra Film Müzesi ve daha birçoğu ile çalışmaya devam etti. Onun çalışma tarzı, sektördeki en çeşitliliğidir. Cesur ve renkli tasarımları onları gören çok insanlara ilham veriyor. Radim'in tasarımını bu kez çevrelere odaklamasını istedik, çünkü bu, güncel web sitesi tasarımlarında son derece popüler ve tercih edilen zamansız bir şekil.

Paralaks

Başlığın yeni sanatı ve logosu, web sitesinin başlık bölümünde 5 katmanlı paralaks etkisi (farklı oranlarda hareket etmek) ile hayata geçiriliyor. Görmek için farenizi başlık alanında gezdirin (mobil cihazlarda değil). Oldukça havalı görünüyor ve siteye eğlence unsuru katıyor! [UPDATE] Paralaks efekti çoğu tarafından sevildi, ancak bazı insanlar bundan hoşlanmadı, bu yüzden efekt alanını sağ tıklatarak kapatmak için seçeneği ekledik.

Logo

Her ne kadar eski logo bize iyi hizmet etti ve iyi bir şekilde yeniden tasarlandı, çünkü bu tam bir yeniden tasarımdı, yeni bir logo vardı! Bu kez birlikte çalıştık Steven Bonner logomuzu yeniden tasarlamak. İskoçya'da bulunan ve dünyanın en büyük markalarından bazıları için kıskanılacak tipte illüstrasyonlara sahip çok yetenekli bir tipograf. Biz harika görünüyor ve aynı zamanda profesyonel ve cilalı bakarken siteyi kişisel bir elle çizilmiş dokunuşla iyi dengeler.

matbaacılık

Sonunda eski sıkıcı sistem fontlarını, site genelinde özel olarak kullanılan Typekit web fontları lehine aldık. Kullanırız Kulturista harika görünüyor ve güzel bir kişilik ve benzersiz bir his var tüm başlıklar için. Seçtiğimiz gövde metni için Proxima Nova mükemmel okunabilirliğe sahip ve büyük metin parçaları için harika. Başlıklar için de dikkate aldık Adelle ve vücut metni için de Museo Sans'ı düşündük, Adelle Sans , Sayısız ve Helvetica .

Pictos Simgesi yazı tipi

Bu yeni tasarımda birçok simge kullanıyoruz. Simgeler harikaların bir parçası Pictos simge yazı tipi tarafından dizayn edilmiştir Drew Wilson . Sitenin altındaki animasyonlu sosyal ikonlarımız için bile kullanıyoruz.

Alt Bilgi

Sitenin alt kısmında 2 footer alanı var. İlki vurgulamak için önemli olduğunu düşündüğümüz bazı alanları vurgular ve daha sonra çoğunlukla metin bağlantıları ve bazı hareketli sosyal simgeleri ile en altta daha geleneksel bir altbilgiye sahip olursunuz.

Sosyal bütünleşme

Okuyucularımızı daha büyük bir şekilde sergilemek istedik, bu yüzden yeni WDD öncekinden çok daha sosyal. Artık yorumlarınızı ve retweetlerinizi, ana sayfada her bir gönderinin altında yer alıyoruz. Yani, biraz şöhret istiyorsan, şimdi tüm dünyanın görmesi için avatarını oraya götürebilirsin! Şey, bu biraz abartı!

Daha az reklam

Tamam, bazı iyi ve bazı kötü haberler. Bazı reklamlarımız büyüdü, ancak sitede yayınlanan reklamların sayısını da azalttık. Yıllar geçtikçe sitemizin reklamlarla biraz şişirildiğini itiraf ediyoruz, bu yüzden işleri temizlemek için harika bir fırsattı. Bu, düzenini daha temiz ve daha estetik olarak gezinmeyi sevindirirken, yine de kirayı ödeyebildiğimiz için - tür sponsorlarımızı desteklemeyi unutmayın :)

Depot.ly

Bu aslında bir kaç haftalıktır: tweet'lerimiz için depot.ly kısa URL'sini kullanmaya başladık, bu yüzden kullandığınız herhangi bir sosyal kanalda yayınlarımızı tanıyabilirsiniz. Oldukça faydalı düşünürüz!

Daha fazla içerik

Fark ettiğin gibi, her geçen gün daha fazla makale göndermeye başladık. Editöryal yayınlar içeriğimizin özü olmasına rağmen, sitemizi ziyaret eden tasarımcılar ve geliştiriciler için uygun olacak ilgili haberleri ve mini yayınları da kapsamaktadır. Sitenin şu anda dünyadaki olaylarla daha güncel ve iletişim halinde olduğunu düşünüyoruz, şu anda her gönderi için tam bir yazıya başvurmadan.

Bu tasarımı tüm tarayıcılarda ve cihazlarda çalışmak için çok sayıda sorunla karşılaştık (ve hala yapıyoruz!). Aslında, yaşadığımız son dakika gecikmelerinin sebebi buydu. Geçen hafta başlatmamız gerekiyordu, ancak birçok tarayıcı sorunu bizi yavaşlattı. Bunun için özür dilerim! Firefox özellikle zorluydu, ancak IE 8 kodlayıcılarımız için birçok baş ağrısının ve hayal kırıklığının daha kötü ve sebebi olduğunu kanıtladı. Dünkü lansmanımızdan bu yana, hala çözülmesi gereken sorunların Twitter yoluyla çok fazla ek bilgi aldık. Bunları ele alırken sabrınız için teşekkür ederiz.

Bugün gördüğünüz şey yeni tasarım, ama hepsi bu değil. Yakında yeni şeyler eklemeyi planlıyoruz. Bu konuda önümüzdeki haftalarda daha fazla bilgi edineceksiniz.

Hepimiz yeni tasarımı seviyoruz ve geri bildirimlerinize bağlı olarak gelişmeye devam etmesini bekliyoruz. Bizi iyileştirmemizi istediğiniz bir şey hakkında bizi bilgilendirebilirseniz gerçekten takdir edeceğiz. Ayrıca, herhangi bir tarayıcı uyumluluğu sorunu veya kullandığınız herhangi bir mobil cihazla ilgili sorunları hızlı bir şekilde ele alabilmemiz için lütfen bize bildirin.

Her zaman olduğu gibi, tüm bu yıllar boyunca WDD'yi desteklemek için hepinize çok ve minnettarız. WDD'deki tüm ekipten, her birinize büyük bir teşekkür ve bu yeni tasarımın size ilham vermesini ve sitemizi gezerken size iyi hizmet vermesini umuyoruz.

Yeni WDD yeniden tasarımı hakkında ne düşünüyorsunuz? Görüşlerinizi bekliyoruz!

duyarlı tasarım web tasarımı yeniden tasarlamak WDD retina grafikleri webdesignerdepot