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

18 Şubat 2019 Pazartesi (13:27) tarihinde, Editörün Seçimi, Kişisel, Kullanıcı Deneyimi, Tasarım altına eklendi.

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 ➡

Bu gönderinin faydalı olabileceğini düşünüyorsanız paylaşabilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


Bunlar da İlginizi Çekebilir


Hulu ile Video Lisansının Suyunu Çıkarmak Friends'ten sonra severek takip ettiğim Jennifer Aniston'ın Facebook'ta gezinirken denk geldiğim "çılgın sabah rutini" videosunu merak ettim, o an... 31 Mart 2016 Perşembe günü eklendi.
Yaratıcı Fikir: Eski Haritalar Üzerine Monokrom Tükenmez Kalem Çizimleri Mark Powell'ın bayıldığım işine bakmadan geçmeyin. Eski haritaları olabilecek en iyi şekilde değerlendirmiş abimiz. Diğer iyi alternatif de... 7 Mart 2016 Pazartesi günü eklendi.
Zuckerberg’in Kapsül Gardrobu Mark'ın bir süre önce Facebook profilinde "Babalık izninden sonra ilk gün. Ne giysem? Kararsızım." açıklamasıyla paylaştığı... 8 Mart 2016 Salı günü eklendi.
Daha fazlası için tıklayınız →

Numan Çebi Merhaba! Ben Numan. Henüz tanışmadıysak, bir tasarımcıyım. Basit tabirle, kullanıcı-merkezli web siteleri ve mobil uygulama arayüzleri tasarlıyorum. İşim hakkında daha fazla bilgiyi portföyümden edinebilirsiniz. → Görüntülemekte olduğunuz bu blogda sosyal ağlarda kaybolup gitmesini istemediğim konularda, 2007'den beri yazmaya devam ediyorum. Aşağıdaki sosyal ağlar üzerinden ve merhaba@numancebi.com adresinden bana ulaşabilirsiniz. RSS
Öne Çıkarılanlar
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... 18 Şubat 2019 Pazartesi günü eklendi.
Apple ile “Akışkan Arayüzler Tasarlamak” Üzerine, Ders Niteliğinde Sunum 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... 8 Haziran 2018 Cuma günü eklendi.
Neden Venezüela’ya Taşınmıyoruz? 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... 24 Mayıs 2018 Perşembe günü eklendi.
UXistanbul 2017 ve Karl Gilis’in “İlk Buluşma Prensibi” 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... 11 Mayıs 2017 Perşembe günü eklendi.
UX Alive 2017’den “UX Ne ki?” Diyenleri de İlgilendiren Notlarım ve Konferans Günü Özeti 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... 3 Mayıs 2017 Çarşamba günü eklendi.
Blogumda Google ile hızlı arama yapabilirsiniz.

Bu sitede yer alan gönderiler izinsiz kopyalanamaz, kaynak belirtilmeksizin alıntılanamaz. (Gerektiği durumda lütfen e-posta ile bildiriniz.) Hassasiyetiniz icin teşekkür ederim.

2007-2019 © blog.numancebi.com