Web Sitesi Yeniden Tasarımının Temelleri – Bir Vaka Çalışması

Bir web sitesi yeniden tasarım projesini yalnızca geriye bakıp "Bugün bildiklerimi bilseydim her şeyi daha farklı yapardım" diye düşünmek için bitirmek alışılmadık bir şey değildir.

Hepimiz oradaydık. Yeni bir proje için heyecanlanırız, müşteriyle şakalaşırız, sözleşmeler imzalarız ve prototipleri taklit etmeye başlarız. Hayat güzel görünüyor ama proje temelleri sarsılmış durumda.

Kaçınılmaz olarak, revizyonlar ve kapsam kayması, ilk tasarım konsepti sunulur sunulmaz içeri sızmaya başlar ve oradan yokuş aşağıdır. İletişim bozulur, hiçbir şey planlandığı gibi gitmez ve nihayetinde yeni tasarlanan web sitesi, düzeltmek için tutulduğunuz canavarı andırır.

Birinci sınıf tasarım ve kullanıcı deneyimi güzel bir modelle başlamaz; stratejik planlama ve şirket hedeflerine odaklanan bir tasarım vizyonu üzerine kuruludur. Birincil amaç, “Daha güzel bir web sitesi yapalım” olamaz.

Web sitesi tasarımcıları, kullanıcı deneyiminden (UX) ve kullanıcı arayüzünden (UI) sorumludur. Kullanıcıların tasarladığımız arayüzlerle etkileşimde en iyi deneyimi yaşamalarını sağlamak bizim işimiz. Bu, bir projenin konseptinden itibaren kapsamlı bir planlama gerektirir.

Bu makale, bir sonraki web sitenizi yeniden tasarlamanızın sağlam bir temel üzerine inşa edilmesini sağlamaya yardımcı olacak güvenilir bir süreci özetlemektedir.

Web Sitesi Yeniden Tasarım Ön Proje Araştırmasının Değeri

Süreci göstermek için, Amerika Birleşik Devletleri'nin güneybatısındaki arkeolojik alanları araştıran ve koruyan kar amacı gütmeyen bir kuruluş olan Archeology Southwest için tamamlanan bir web sitesinin yeniden tasarımının aşamalarını inceleyelim.

Müşterinin alanı ve rekabeti hakkında bir ön araştırmadan sonra, mevcut olan her web sitesi varlığını yakından inceleyin. Bu analiz ayrı olarak faturalandırılır ve bir proje teklifi yazılmadan önce gerçekleşir. Bu şekilde çalışmak, web tasarımcıları bir projede daha sonra yüzeye çıkabilecek sorunları hesaba katmaya çalıştığında ortaya çıkan belirsiz veya abartılı tahminleri önler.

Güneybatı Arkeolojisi söz konusu olduğunda, çok dikkat edilmesi gereken bir siteyle karşı karşıya kaldım - eski bir CMS portalında dağlar ve dağlar karmaşık içerik. Kötüydü, ben de düzen oluşturmaya koyuldum.

Adım 1: İçeriğe Aşina Olun

Bir evi yeniden şekillendirirken, yıkım gününden önce değerli malzemeleri denemek ve kurtarmak önemlidir. Aynı prensip web sitesi tasarımı için de geçerlidir. Siteyi sayfa sayfa gezmeniz ve tüm içeriği çıkarmanız gerekir. Tasarımcılar olarak, hangi içeriğin benzersiz bir gönderi türü olmayı hak ettiğini ve hangi sayfaların statik olduğunu bulmalıyız.

Bu başarıldığında, her şeyi nasıl organize edeceğinize dair bir strateji oluşturun, ancak hangi içeriğin kalması gerektiğine ve neyin kaldırılması gerektiğine karar vermeyin. Neden?

Gerçek dünyadaki işletmeler ve kuruluşlarla uğraşırken, bir sitenin içeriğinden sorumlu birkaç farklı kişi vardır ve mevcut içeriğin miktarı şaşırtıcı olabilir. En iyi yaklaşım, önce her şeyi sınıflandırmaktır.

Genelde ana navigasyonla başlarım ve sayfa sayfa giderim. Bu şekilde, ilk müşteri toplantısından önce bilgi mimarisini ve site haritasını indireceğim.

Ne yazık ki, Archeology Southwest'in sitesi tipik değildi. Çoğu bağlantıya üst gezinme yoluyla erişilemedi ve içerik içinde gizlendi. Projeyi yalnızca navigasyona dayalı olarak alıntılasaydım, kötü bir sürprizle karşılaşırdım.

Müşterinin ekibindeki çeşitli kişilerle konuşarak projenin kapsamını daha iyi anlayabildim ve müşteriyle görüştükten sonra web sitesi odağını, iş akışını, içeriğini ve özelliklerini belirleyebildim. Oradan, aşağıdaki temel içerik türlerini bulduk (bazıları yeni, bazıları mevcut):

Adım 2: Odak Oluşturun. Basitleştirin. Düzenlemek.

Tüm içerik etiketli kutular halinde organize edildikten sonra, içeriği en iyi haliyle sergileyecek yeni bir yapı için plan geliştirmenin zamanı geldi. Ama önce, odak oluşturmamız gerekiyor.

Archeology Southwest'e göre, insanlar devam eden projeler hakkında bilgi araştırmak, yaklaşan etkinlikler hakkında bilgi edinmek ve aylık bir dergi okumak için web sitelerini ziyaret ediyor. Bu etkinlikler, “İnsanlar sitede ne yapıyor?” sorusuna cevap veriyor. ama ilk etapta insanların siteyi neden ziyaret ettiğini açıklamayın.

“ Neden ” web sitesinin odak noktasıdır. Odağı bulmak için organizasyonun özüne bakın.

Bu durumda, Güneybatı Arkeolojisinin kalbi olarak “yer” belirledim. Konum olmadan arkeolojik alanlar, kalıntılar ve kesinlikle müzeler veya sergiler olmazdı. Arkeolojideki her şey konumla ilgilidir.

Belirlenen bir odakla, basitleştirebilir ve organize edebiliriz. Güneybatı Arkeolojisi için içeriği, ekip sayfaları ve yıllık raporlar gibi konumlarla ilgili olmayan kategorilere ayırarak başladım. Biraz toparladıktan sonra, şu kaba haritayı buldum:

Yukarıdaki resim, ortaya çıkan iki temel alanı temsil etmektedir: Yapılacak Şeyler ve Konumlar . Yapılacak Şeyler (solda), siteye gelen bir ziyaretçinin öğrenebileceği ve yapabileceği etkinlikleri kapsar. Konumlar (sağda), belirli konumlarla ilgili site içeriğine odaklanır. Neden bu şekilde yapılandırın?

Buradaki fikir, ortalama bir kullanıcının bir videonun veya projenin adını bilmeyebileceği, ancak muhtemelen bir yerin adını bileceğidir. Bu şekilde, ziyaretçiler konumla ilgili içeriği bulabilirler.

Ayrıca, Konumlardaki her renk bloğu benzersiz bir gönderi türünü temsil eder. Organizasyonel bir bakış açısından, sergiler, sınıflar ve çevrimiçi sergilerin tümü farklı nitelikteki etkinliklerdir.

Eski Arkeoloji Güneybatı sitesinde, bir dergi ve ziyaretçilerin dergiyi satın alabilecekleri bir çevrimiçi mağaza için ayrı statik sayfalar vardı. Satın almayı kolaylaştırmak için dergi şablonuna bir satın alma seçeneği ekledim.

Kalan organizasyon yapısı basitti:

• Kuruluş hakkında daha fazla bilgi edinmek için bir "Hakkında" sayfası
• "Mağaza" sayfasına doğrudan bağlantı
• Bir "Bağış" sayfası
• Yeni bir "Güncellemeler" sayfası

Mağaza ve bağış sayfaları para kazanma amaçlıdır, bu nedenle ana navigasyona dahil edilmeleri çok önemliydi.

Organizasyon planı tamamlandıktan sonra, gerçek içeriği bağlamanın zamanı geldi.

3. Adım: Müşteriyi Dahil Edin

Site haritası, sayfa türlerini içerir, ancak içeriğin eşlenmesini içermez. Deneyimli web tasarımcıları, çoğu sorunun bir müşteri sitelerine içerik eklemeye başladığında ortaya çıktığını bilir. Bu sorunu önlemek için, istemciyi en baştan devrede tutun.

Güneybatı Arkeolojisi için site haritasını içeren bir Google Dokümanı oluşturdum ve müşteriden eski içeriğini yeni yapıyla eşleştirmesini istedim.

Bir şey tam olarak uymadıysa, daha sonra ele aldık. Bu kritik bir adımdır. Niye ya? Müşteriyi sürece dahil etmenin yanı sıra, uygulama başlamadan önce yapıyla ilgili sorunları ortaya çıkarır.

Bu durumda, site haritası menü öğelerinin bazıları değiştirildi ve müşterinin birden fazla bağış sayfası olduğundan, sadece bunun için benzersiz bir gönderi türü oluşturmak mantıklıydı.

Tel Çerçeveleme ile Görsel Yapı Oluşturun

Bu adımda esere görsel bir yapı kazandırmaya başlıyorum. Sistemin iyi çalışmasını sağlamak ve “her şey konumla ilgilidir” kavramını başarılı bir şekilde entegre etmek için yazı tipleri arasında çift yönlü bir ilişki yarattım.

Temel fikir şu: Ziyaretçiler Archeology Southwest web sitesine gelip Büyük Kanyon'u seçtiklerinde, o konumla ilgili bilgileri görecekler, ancak aynı zamanda projeler, etkinlikler, sergiler ve site yöneticilerinin konum olarak işaretlediği diğer her şeyle ilgili bilgileri de bulacaklar. özel.

Bağlantı çift yönlü olduğundan, ziyaretçiler bir proje sayfasını ziyaret ederek Büyük Kanyon'a da ulaşabilirler. Sonunda, bununla bitirdim:

Konum dizini sayfası, en yenileri en üstte olacak şekilde tüm konumları gösterir. Arama çubuğu, kullanıcının sayfaya geldiğinde gördüğü ilk şeydir. Google haritası ekranın yaklaşık yüzde 80'ini kaplayacak. Bu, kullanıcıların harita üzerinde noktalar seçmesine olanak tanır ve kaydırma veya arama yaptıklarında liste ızgarası görüntülenir.

Tek bir konum sayfasında, en önemli bilgi olduğu için ana gövde soldadır. İlgili meta bilgiler ikincildir, dolayısıyla sağdadır. İyi dengelenmiş bir düzen elde etmek için birinci, ikinci ve üçüncü eleman blokları arasında belirgin bir hiyerarşiye sahip olmak çok önemlidir. Bu, gözün bölümler arasında zahmetsizce hareket etmesini sağlar.

Archeology Southwest düzeninde, kullanıcının gözü başlıkla başlar, ardından içerik bloğuna geçer ve son olarak sağ kenar çubuğuna gider. İlgili içeriğin her bir parçası, alaka düzeyine göre görüntülenir. Örneğin, kullanıcı Büyük Kanyon hakkında bir şeyler okuyorsa, bu içeriği muhtemelen fotoğraflar ve bir harita izleyecektir.

Burası esas olarak bir eğitim sitesi olduğundan, “Bu Konumla İlgili” seçeneğinin olması önemlidir. Ancak, her konumla benzersiz bir şekilde ilişkilendirilen çok fazla içerik yok, bu yüzden nadiren kullanılan (ancak ilgili) içeriği gövdenin altındaki tek bir blokta birleştirdim.

Dergi ve video başparmaklarını ilgili içeriğin altına yerleştirmek, ek görsel öğeler ekler ve kullanıcıları “Satın Al” sayfasına yönlendirir. İlgili yerler gösterilerek sayfa tamamlanır. Bu, kullanıcıları siteyi daha fazla keşfetmeye ikna etmenin harika bir yoludur. Bir sonraki adım, diğer gönderi türleri için bu yapıya devam etmektir.

Ana Sayfaya Net Bir Hedef Sunun

Yerinde yazı türleri için genel bir model ile ana sayfaya odaklanabilirim. İlk adım, ana sayfanın hedefini bulmaktır; bu, kullanıcı arayüzü tasarımının önemli bir parçasıdır. Müşterinin araştırması, birçok kullanıcının sitenin ne olduğunu tam olarak anlamadan siteye rastladığını gösterdi. Bu nedenle, kullanıcıların gördüğü ilk şey bir giriş ve karşılama metni olmalıdır.

Yeni çekirdek odak, ikincil konum bloğu etrafında döner. Bunu, archaeologysouthwest.org'da (mevcut dergi, blog, etkinlikler, haber bülteni vb.) olan her şey izler. İşte yerleşim sürecinin yinelemesi:

V1 (solda) ile orijinal ana sayfaya benzeyen temel bir düzen tasarladım. Çok fazla hiyerarşi yok. Kullanıcıların gördüğü ilk şey, öne çıkan konumdur, ancak oradan büyük olasılıkla sütunlarda kaybolacaklar.

V2 (ortada) için gözün takip etmesi daha kolay olan ayrı bir sütun oluşturdum. Ancak yine de geliştirilebilir. Bu, içerik bilgisinin önemli bir rol oynadığı yerdir. Archeology Southwest'in aynı anda ikiden fazla etkinlik yapmadığını biliyorum, bu nedenle ana sayfada birkaç etkinlik için yer olması mantıklı değil.

V3'te (sağda), yaklaşan etkinliklere odaklandım. Herhangi bir nedenle ikiden fazla olay varsa, kullanıcı bir "Diğer" düğmesine tıklayabilir ve gerisini görebilir. Ayrıca, müşterinin para kazandırıcısı olduğu için mevcut dergiye ek vurgu yapıyorum. Kullanıcılar en baştan başlar ve bir F modelinde aşağı doğru ilerler. Göz akışı:

Öne Çıkan Konum > Hoş Geldiniz > Dergi > Etkinlikler > Haberler

Görsel bir tel kafes ve sitenin yapısı yerinde olduğunda, özellikleri ve işlerin nasıl yürüyeceğini sağlamlaştırmak çok daha kolay. Bu noktada, her ikisi de bu aşamada çok daha net olan işlevsellik ve kullanıcı etkileşimi akışını gözden geçirmek için müşteriyle başka bir toplantım var.

Daha sonra hala revizyonlar olacak mı? Evet, ancak bunlar ince ayar olacak, tüm süreç değişiklikleri değil. En önemlisi, sürpriz olmayacak.

Marka Stil Rehberini Dahil Edin

Şimdi heyecan verici kısım geliyor - tel çerçeveleri insanların kullanacağı ve deneyimleyeceği bir şeye dönüştürmek. Bu proje için marka renkleri ve tipografi uygulayarak yazılı içeriği kolay anlaşılır hale getirmeyi amaçladım.

Tipografi Kombinasyonları ile Deneme

Tipografi, iyi web tasarımının ayrılmaz bir parçasıdır, bu nedenle tip şemamızı erkenden çözmeliyiz. Arkeoloji Güneybatı kimliğinin çoğu, Univers Condensed Light ve Adobe Caslon yazı tipini kullanır. Adobe Caslon'un ne zaman kullanılacağına dair bir kural yoktu, ancak Univers kadar sık ​​kullanılmadığını fark ettim.

Profesyonel bir kâr amacı gütmeyen kuruluş için hangi eşleşmelerin en iyi hissi yarattığını görmek için küçük bir yazı tipi çalışması yaptım. Bununla birlikte, tip şemamın müşterinin pazarlama teminatından çok farklı görünmesini de istemedim.

Font karşılaştırmaları yaptıktan sonra, başlık fontunun Adobe Caslon olması gerektiği ve altyazılar için Univers'ın kullanılacağı anlaşıldı. Ana başlıkların cümle halinde ayarlanması markaya daha kişisel bir his verirken, tüm büyük harfler daha çok kurumsal bir hava yaratır.

Web Sitesinin Görünümünü ve Hissini Parlatın

Kullanıcıların Archeology Southwest'in hem ulaşılabilir hem de son derece yetkin olduğunu hissetmeleri için hafif ve açık bir deneyim yaratmak için yola çıktım. Analitik verilere dayanarak, ziyaretçilerin çoğu masaüstü tarayıcılar kullanır (muhtemelen çoğu kişi siteyi araştırma için ziyaret ettiğinden). Bu nedenle, ilk odak noktam masaüstü kullanıcıları için tasarım yapmaktı.

Masaüstü bilgisayarlardan gelen ziyaretçilerin, öne çıkan konumu, karşılama metnini ve yaklaşan etkinlikleri ve ardından dergi başlığının bir kısmını hemen görmelerini istedim. Bu şekilde, insanlar önce şirketin neyle ilgili olduğunu ve neyi teşvik ettiğini görürler.

Mobil cihazlarda öncelikler biraz farklıdır. Kullanıcılar hareket halindeyken bilgilere eriştiğinden, olaylar daha önemlidir, bu nedenle listede daha üst sıralarda yer alırlar.

Ayrıca alt bilgideki bağış butonunu da butondan cümleye çevirerek daha samimi olması için güncelledim.

Güçlü Bitirici: Ayrıntılara Dikkat Edin

Kullanıcıların ayrıntılar sayfasına gelmesinin iki nedeni vardır; ya bir yer işareti hakkında daha fazla bilgi edinmek isterler ya da bir konum hakkında zaten bilgi sahibi olurlar ve ek bilgi (yol tarifi, telefon numarası vb.) ararlar. Bu nedenle, kullanıcıların arama yapmasına gerek kalmaması için her iki seçeneği de hemen sunmak önemlidir.

Daha fazla ağırlık vermek ve sayfayı daha ilginç hale getirmek için ayrıntılar sütununu içerik alanından ayırmaya karar verdim. Bu, kompozisyon hiyerarşisi oluşturmaya yardımcı olur, böylece bir ziyaretçi sayfaya geldiğinde, önce sayfa başlığını, ardından küçük bir resim galerisi ve ardından ayrıntılar sütununu görür.

Bu tasarım türü, kullanıcıların bir konumun ek ayrıntılarını hemen fark etmelerini sağlar. Sütunu çevreleyen biraz ekstra dolgu, gözlerin odaklanmasını sağlar ve bilgileri taramayı kolaylaştırır.

Mobil görünüm beklendiği gibi çöküyor. Önce içerik silinir ve ardından meta bilgiler gelir. Mobil kullanıcılar için en az önemli oldukları için videoları ve dergileri mobil sayfaya en son yerleştirdim. Diğer sayfalar, tutarlı bir akış ve deneyim oluşturmak için aynı yapıyı takip eder.

Web Yeniden Tasarımı, Dikkatli Planlama Temeli Üzerine İnşa Edildi

Web sitesi yeniden tasarım sürecine bakıldığında, zamanın büyük bir kısmının düzenleme ve planlamaya ayrıldığı açıktır. Projenin sadece yüzde 30'u siteyi tasarlamak için harcandı.

Çoğu zaman, tasarımcılar çalışmalarını sergilediklerinde, iletişimin püf noktalarına ne kadar zaman ayrıldığını iletemezler, bu da deneyimsiz tasarımcıların doğrudan maketlere atlamasına neden olur. Sonuç? Raydan çıkmış projeler ve mutsuz müşteriler.

Bir web sitesinin yeniden tasarımının başarılı olması için ayrıntılı planlama yapılmalıdır. Proje öncesi araştırma yapmak, mevcut içeriğe aşina olmak ve müşteriyi dahil etmek için zaman ayırmak çok önemli adımlardır.

Sonuçta, bunun bir yolu yok; Şaşırtıcı web sitesi tasarımına ve profesyonel güvene giden yol, proje organizasyonuna metodik bir yaklaşımla döşenmiştir.