Web Sitemi Yeniledim: Nedeni, İzlediğim Yol, Güncellemenin Kapsamı ve Performans Test Sonuçları

En son 2017 yılında, yani bundan tam 2 yıl önce güncellediğim portföyümü, 2-3 günlük sıkı ve detaylı bir planla yeniledim. Bu yazımda, yenileme nedenime değineceğim, yenilerken nelere dikkat ettiğimi ve izlediğim yolu da sizlerle paylaşacağım.

Şu sıralar kendi web sitesini güncellemek isteyenlere veya sıfırdan bir “kişisel” web sayfası hazırlayıp işlerini ve geçmişte neler yaptığını hem iş verenlere göstermek, hem de -freelance ise- müşterilerinin anlayacağı dilden becerilerini sunabilmek için nelere dikkat etmeleri gerektiğini anlatacağım.

Neden?

Üzerinden 2 yıl geçtiği için ve zaten hemen hemen 2 yılda bir güncellediğimden dolayı, zamanı gelmişti ve sayfamda yer alan bilgileri yeterli ve anlaşılır bulmamaya başladım. (Önceki güncellemeler 2017, 2015, 2014, 2011, 2008 yıllarında olmuştu. Yani bu web sitemin 7. sürümü diyebiliriz.)

Google’da “UX designer” araması yapıldığında web sitemin ilk sayfada, makalelerin arasında tek “şahıs” sitesi olarak çıktığını fark ettiğimden beri de “UX’ci ne iş yapar?” sorusuna “gerçek hikayelerle” yanıt veren bir web sitesi olması gerektiğine de düşünüyordum. Çünkü kullanıcı deneyimi tasarımcısı aramak için değil, bazen de kullanıcı deneyimi tasarımcısı neler yapar sorusuna yanıt bulabilmek için insanların arama sonucundan web siteme tıkladığını düşünmeye başladım (Google Analytics verileri ve siteme gelinen arama terimleri bana bunu düşündürdü).

Nasıl bir yol izledim?

Sırasıyla ve her bir göreve yaklaşık olarak ne kadar vakit ayırdığımla birlikte paylaşayım.

Öncelikle, “örnek web sayfalarını” inceledim, dünya genelinde diğer arayüz tasarımcılar neler yapmış diye baktım. Bunun için önerebileceğim güzel bir site var. Çeşitli tasarımcı gruplarından kategoriler halinde portföyleri designerhunt.io adresinde bulabilirsiniz.

Hoşuma giden detayları not ettim ve web sitemde hangi kısımlar olacağına karar verdim. Tek sayfadan oluşacağından emin olduktan sonra baştan sona hangi bilgilerden söz edeceğimi kararlaştırdım (bu kutuların sıralaması tasarım sürecinde birkaç kez değişti).

Sitemde ne tarz bir dil ve görseller kullanacağımı belirledim. Samimi olmasına dikkat ettim. CV gibi hissettirmeyecekti ama web sitem görüntülendikten sonra CV’mi de incelemiş gibi olacaktı ziyaretçi. Bunlar toplamda 3 saatimi aldı.

Aynı günün devamında 5-6 saatte (tabi arada mola vererek), kararlaştırdığım tasarımı Sketch’te tasarladım. Yazı tipine de (font) bu aşamada karar verdim, beğendiğim birkaç yazı tipi arasından web siteme uygun olacağını düşündüğüm fontu (sert hatlara sahip olmayan ama çok da cıvık görünmeyen) kullandım.

Bir gün ara verdim ve başladığım günden 2 gün sonra, tasarımı tekrar alıcı gözle biraz seyrettim. Ufak tefek “daha iyi olabilirdi” dediğim kısımları değiştirdim (yaklaşık yarım saat).

Günün geri kalanında 3-4 saat gibi bir sürede web sitemin tasarımını HTML’e döktüm ve mobil cihazlarla da uyumlu olsun diye responsive modunu da hazırladım.

HTML’e aktardığım sayfada örnek çalışmalarımın görünmesi gereken yerlere görselleri yerleştirmek ve metinlerle ilgili ufak tefek güncellemeler de toplamda 2-3 saatimi aldı.

Artık web sitem tasarımdaki gibi tarayıcıda da görünüyordu ama daha performans ve SEO için dikkat etmem gereken detaylar vardı. Bir gün sonra onları da bir saat gibi bir sürede halledip, son olarak izleme kodlarımı (Analytics, Metrica, Hotjar gibi) yerleştirdim, performans test araçlarından da geçer not aldıktan sonra siteyi yayına aldım. (Performans konusuna aşağıda detaylıca değineceğim.)

Portföyümdeki ana bölümler ve nedenleri

En tepede görevimin tanımı, bulunduğum konum ve e-posta adresim dışında hiçbir detay bulunmuyor. Önceki web sitemde bir navigasyon vardı, yenisinde özellikle bu yok çünkü ziyaretçilerin içeriği sırayla görüntülemesini istiyorum.

Devamında mevcut iş yerimle ilgili bilgiler, birlikte çalıştığım bazı markalar ve şu anda çalıştığım şirkete son dönemde yaptığım işlerin nasıl bir katkısı olduğunun raporunu paylaştım.

Örneğin: “Şu güncellemeyi yaptık, sonucunda da böyle bir olumlu yansımasını gördük” gibi cümle formunda, sıkmadan ve ekran görüntüleriyle başlangıç için iki başarılı kullanıcı deneyimi raporumuzu ekledim.

Bu UX çalışmalarını yaparken nasıl bir yol izlediğime kısaca değindim ve bazı örnek arayüz çizimlerinin ilk aşamalarını ekledim.

Devamında freelance çalışırken kimlerle çalıştığımı ve neler yaptığımı yine üsttekine benzer bir şekilde gösterdim.

Ardından “ilk tam zamanlı işimden” de bahsettim. Portföyde buraya kadar kaydıranlar, bu makalede değinmediğim diğer ara açıklamalarla (sitede görebilirsiniz) aslında CV’mi de görüntülemiş oldular.

Daha fazla çalışma görüntülemek isteyenleri Dribbble ve Behance sayfalarıma yönlendirdim.

Sayfanın sonuna doğru blogumdan bazı tasarım makalelerine yer verdim ve çizim hobimden de bahsetmeden geçmedim.

En alttaki iletişim kısmında kısa bir mektup ile sayfayı sonlandırdım.

Siteyi ziyaret edenler böylece tam olarak ne iş yaptığımı, yaptığım işle ne fayda sağladığımı öğrenmiş oldular ve gerek duyduğu taktirde kolayca iletişime geçebileceğini gördüler. Tek taraflı tanışmış olduk.

Kaydırarak görüntülenebilen ve 3-5 dakikada gezilebilen bu sayfanın “aslında bir sunum gibi olmasının” akılda kalıcılığı da artıracağını düşünüyorum.

Performans Testleri

Site Google PageSpeed Insights testinden 100 üzerinden 100 alarak geçti. Masaüstü sürümü Google’a göre hatasız olan sayfa, mobilde “önbelleklemeye ihtiyaç duymadığım için” 98 puan aldı. Neden ihtiyaç duymadığımı aşağıda açıklayacağım.

Resim ve dosya optimizasyonları, kusursuz bir HTML kod ve CSS biçimlendirmesi ile sayfanın yanıt ve yüklenme süresi gibi detaylar bu puanı en çok etkileyen unsurlardan.

PageSpeed Insights Masaüstü

PageSpeed Insights Mobil

PageSpeed Insights Denetimleri

WebPageTest Sonuçları

Statik içeriği önbelleklemek dışında tüm test kategorilerinden A puan alarak geçen sayfada ön belleğe ihtiyaç duymama sebebim; kişisel sitelere (portföy) giren bir kişi yakın zamanda tekrar ziyaret etme ihtiyacı hissetmez, bu nedenle ön belleğin neredeyse hiç önemi yok ve sayfa zaten statik olduğu için veri tabanına bağlanma ve bekleme gibi bir durum da yok.

Performans İncelemesi

Canlı Sayfayı Görüntüleyin

Web sitemin canlı halini masaüstü ve mobil cihazınız ile ziyaret edebilirsiniz, yukarıda değinmediğim diğer detayları da web sitemi inceleyerek görebilirsiniz.

Makale umarım faydalı olmuştur.

http://numancebi.com’a git ➡

18.2.19 tarihinde blog.numancebi.com adresinde yayımlanmış olan "Web Sitemi Yeniledim: Nedeni, İzlediğim Yol, Güncellemenin Kapsamı ve Performans Test Sonuçları" başlıklı bu yazı izinsiz kopyalanamaz, kaynak belirtilmeksizin alıntılanamaz. Gerektiği durumda lütfen e-posta ile izin isteyiniz. Hassasiyetiniz icin teşekkür ederim. Web ve uygulama arayüz tasarımı, UX danışmanlığı veya başka bir tasarımsal ihtiyacınız varsa kişisel siteme göz atın.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak.


Blog Hakkında:

Bu bloga, sosyal ağlarda kaybolmasını istemediğim yazılarımı ve paylaşımlarımı ekliyorum. Ben ve işlerim hakkında bilgi edinmek için kişisel siteme ve portfolyoma göz atın.
İş Bağlantıları: Kişisel Site (Hakkımda) Portfolyo (Çalışmalarım) Tasarım Talep Formu Sosyal Medya Hesaplarım: LinkedIn Profilim X (Twitter) Hesabım Blog Yansımaları: Medium (Tasarım Ağırlıklı) Medium (in English) RSS Beslemesi Kısayollar: Tasarım Hk. Sıkça Sorulanlar Film ve Dizi Tavsiyelerim İlk Blog Gönderim Blogda arama:
2007-2024 © blog.numancebi.com