Web Tasarımının Tarihi: İlk Web Sitesinden Kurumsal Sitelere

CERN’deki ilk web sitesinden bugünün kurumsal sitelerine; bağlantı, içerik ve kullanıcı yolculuğunun değişimini öğrenin.

CERN arşivinden ilk WorldWideWeb tarayıcısının görüntüsü

Yazının tamamını kopyalayabilir veya dinleyebilirsiniz.

Bugün bir web sitesi açtığımızda görseller, menüler, formlar, kartlar ve hareketli öğeler bekliyoruz. Buna rağmen temel bir ihtiyaç değişmedi: bir bilgiye ulaşmak ve oradan ilgili başka bir bilgiye geçmek. Web tasarımının tarihine bakmak, bu basit ilişkinin zamanla nasıl farklı arayüzler ve görevler taşıdığını düşünmemizi sağlar. Tarih yalnız eski ekran görüntülerinden oluşan nostaljik bir liste değildir; bugünkü kararların nedenlerini anlamak için bir araçtır.

Bir şirketin sitesinde hangi animasyonun kullanılacağından önce şu soru sorulabilir: ziyaretçi neyi öğrenmek ve ne yapmak istiyor? İlk web sitesinin bilgi ve bağlantı odağı, bu soruyu yeniden hatırlatır. Elbette bugünün kurumsal sitesi geçmişteki bir bilimsel belge sayfasıyla aynı şey değildir. Kullanıcı beklentileri, cihazlar ve işletme ihtiyaçları değişmiştir. Ancak içerik ilişkilerinin açık olması hâlâ tasarımın temel görevlerinden biridir.

CERN’de başlayan bilgi paylaşımı

CERN’in tarih anlatımına göre Tim Berners-Lee, web fikrini kurumda çalışırken geliştirdi. İlk web sunucusu ve tarayıcı 1990’da oluşturuldu; web 1991’de daha geniş çevreye açıldı. Bu tarihler, ilk geliştirme ile kamusal erişimin aynı olay olmadığını gösterir. CERN’in koruduğu info.cern.ch sayfası ilk web sitesinin içeriğine ulaşmak için resmi bir başlangıç noktasıdır.

İlk sitenin bilgi yapısı, web projesinin ne olduğunu ve ilgili kaynaklara nasıl ulaşılacağını anlatır. Bu örnekten çıkarılabilecek çağdaş ders, gösterişli arayüzün gereksiz olduğu değildir. Daha temel bir ilişki vardır: sayfanın bir görevi ve başka sayfalara bağlanan bir anlamı olmalıdır. Bugün bir hizmet sayfası da yalnız kendi içinde güzel görünmekle yetinmez; örnek işlere, açıklayıcı içeriklere ve iletişim yoluna bağlanır.

CERN arşivinden ilk WorldWideWeb tarayıcısının görüntüsü
CERN / WorldWideWeb tarayıcı arşivi. Orijinal kaynak.

Web ile internet aynı şey değildir

İnternet, farklı ağların iletişim kurduğu daha geniş altyapıdır; web bu altyapı üzerinde bağlantılı sayfa ve kaynaklarla kullanılan sistemlerden biridir. Gündelik konuşmada ikisi sıkça aynı anlamda kullanılır. Tasarım bakımından bu ayrım, web sitesinin yalnız bağlantı kurulmuş bir teknik ortam değil, içeriğin ve etkileşimin düzenlendiği belirli bir deneyim olduğunu anlamaya yardım eder.

Bir şirketin alan adı alması ve sunucu kurması, ziyaretçiye anlaşılır bir site sunduğu anlamına gelmez. Altyapı sayfaların erişilebilir olmasını sağlar; içerik mimarisi ve arayüz ziyaretçinin bu sayfalardan yararlanmasını kolaylaştırır. Bu yüzden web projesi teknoloji, metin, görsel ve kullanıcı davranışı arasında kurulmalıdır. Yalnız bir alanın iyi olması diğerlerinin otomatik olarak çözüldüğü anlamına gelmez.

Bağlantıdan gezinme sistemine

Bir bağlantı, kullanıcıya ilgili başka bir yere geçme imkânı verir. Çok sayıda içerik olduğunda bu ilişkiler menü, kategori, arama veya içerik içi linklerle düzenlenir. Bir şirket sitesinde hizmetler, sektörler ve proje örnekleri farklı sınıflandırmalar oluşturabilir. Kullanıcının hangi ayrımı anlamlı bulduğunu düşünmeden yalnız kurum içindeki departman yapısını menüye taşımak, gezinmeyi zorlaştırabilir.

Örneğin ziyaretçi “ambalajımı yeniletmek istiyorum” diye düşünürken menüde yalnız “yaratıcı çözümler” görmek ihtiyacını karşılamayabilir. Daha somut hizmet isimleri ve ilgili örnekler yolculuğu açıklar. Başlıkların ilginç olması değerli olabilir; ancak anlaşılabilirliğin yerini almamalıdır. Menü dili, kullanıcının ihtiyacı ile markanın kendini anlatma biçimi arasında bir köprü kurar.

Bilgi, Bağlantı, Gezinme, Görev ilişkisini açıklayan şema
Şema: Bilgi · Bağlantı · Gezinme · Görev. Onur Demircan tarafından hazırlanmış temsili açıklama.

Kurumsal site zamanla hangi görevleri üstlendi?

Kurumsal bir site tanıtım, bilgi paylaşımı, örnek iş gösterimi ve iletişim gibi görevler taşıyabilir. Bazı sitelerde ürün kataloğu, başvuru, rezervasyon veya müşteri hesabı da bulunur. Bu çeşitlilik, tek bir “kurumsal web sitesi” kalıbının her işletmeye uymamasının nedenidir. Tasarımın yapısı, işletmenin hangi görevleri gerçekten çevrimiçi sunmak istediğine göre değişmelidir.

Bir danışmanlık firması için uzmanlığın açıklanması ve hizmet kapsamının anlaşılması öncelikli olabilir. Üretici bir firma ürün varyantlarını karşılaştırmak ve teknik dokümanlara ulaştırmak isteyebilir. Tasarım portfolyosunda ise görsel örneklerin doğru bağlamla sunulması önemlidir. Bu sitelerin hepsine aynı ana sayfa şablonunu uygulamak hızlı görünse de içeriklerinin farklı görevlerini zayıflatabilir.

Görseller web deneyiminde neyi değiştirir?

Görsel bir ürünü, mekânı veya yapılan işi metinden farklı biçimde gösterir. Ancak bir fotoğrafın varlığı, onun doğru görevi üstlendiği anlamına gelmez. Hizmetin somut sonucunu gösteren proje görseliyle yalnız atmosfer kuran stok fotoğraf farklı katkılar sağlar. Görselin altındaki açıklama, ziyaretçinin neye baktığını ve örneğin hangi kapsamı temsil ettiğini anlamasına yardımcı olabilir.

Görsellerin performans tarafı da vardır. Çok büyük dosyalar ve gereksiz medya, sayfanın yüklenmesini zorlaştırabilir. Boyut, sıkıştırma, farklı ekranlara uygun sürümler ve yükleme davranışı birlikte değerlendirilmelidir. Estetik görünüm ile dosya ağırlığı arasında düşünülmüş bir denge gerekir. Bir kapak yalnız masaüstünde etkileyici diye her cihaza aynı büyük dosyayla gönderilmek zorunda değildir.

Ana sayfa, Hizmet, Örnek iş, İletişim ilişkisini açıklayan şema
Şema: Ana sayfa · Hizmet · Örnek iş · İletişim. Onur Demircan tarafından hazırlanmış temsili açıklama.

Mobil kullanım tasarım kararlarını nasıl etkiler?

Dar ekran, içerik ilişkilerinin daha açık kurulmasını gerektirir. Masaüstünde yan yana görülen alanlar mobilde sırayla görünür. Bu sıra rastgele olduğunda kullanıcı açıklamayı görmeden butona, bağlamı anlamadan proje görseline ulaşabilir. Mobil uyarlama yalnız sütunları alt alta koymak değil, sayfanın okuma ve görev sırasını yeniden kontrol etmektir.

Dokunma davranışı, form alanları ve menü de küçük ekranda incelenmelidir. Uzun açılır listeler, küçük bağlantılar veya gizlenen temel bilgiler ziyaretçinin görevini zorlaştırabilir. Tasarımda cihazın sınırı kadar kullanım bağlamı da önemlidir. Kullanıcı masa başında ayrıntılı inceleme yapıyor olabilir; hareket hâlinde yalnız telefon veya adres arıyor da olabilir. Her durumda temel bilginin ulaşılabilir olması değerlidir.

Sayfadan kullanıcı yolculuğuna geçmek

Bir ana sayfanın güçlü olması, sitenin tamamının iyi çalıştığını göstermez. Ziyaretçi bir blog yazısından, hizmet sayfasından veya paylaşılan proje bağlantısından giriş yapabilir. Her giriş noktası kendi bağlamını açıklamalı ve ilgili devam yollarını sunmalıdır. Ana sayfaya dönmeden hangi hizmeti incelediğini ve nasıl iletişim kuracağını anlayabilmek, içerik mimarisinin önemli bir görevidir.

Bu düşünce blog ile hizmet sayfası arasındaki ilişkiyi de açıklar. Bir rehber, okuyucunun sorusunu cevaplar. Hizmet sayfası kapsamı ve çalışma biçimini anlatır. Proje örneği bu yaklaşımın somut görünümünü sunar. İletişim alanı ise ihtiyacın paylaşılmasını sağlar. Her sayfanın aynı satış cümlesini tekrarlaması yerine farklı görevleri tamamlaması daha anlamlı bir yapı oluşturur.

İçerik, Responsive yapı, Hız, Erişilebilirlik ilişkisini açıklayan şema
Şema: İçerik · Responsive yapı · Hız · Erişilebilirlik. Onur Demircan tarafından hazırlanmış temsili açıklama.

Site güncellemesi neden tasarımın parçasıdır?

Bir web sitesi yayınlandığı günün içerikleriyle kalacaksa yönetim ihtiyacı sınırlı olabilir. Ancak hizmetler, ekip, projeler ve yazılar değişiyorsa güncelleme yöntemi önem kazanır. Yeni bir içerik eklendiğinde düzenin korunması gerekir. Bu nedenle tasarım, yalnız mevcut birkaç örneğe göre değil, gelecekte farklı uzunluk ve sayıda içerik geldiğinde nasıl davranacağına göre de düşünülmelidir.

İçerik yönetimi ile tasarım kontrolü arasında bir sınır kurulabilir. Editör metni ve görseli değiştirebilir; ancak bütün renk, boşluk ve yerleşimleri serbestçe değiştirmesi gerekmeyebilir. Bu sınır, güncellemeyi kolaylaştırırken marka tutarlılığını koruyabilir. Yönetim paneli ihtiyacı, “CMS olsun” cümlesiyle değil, gerçek güncelleme senaryolarıyla tarif edilirse daha doğru kapsam çıkar.

Eski sitenizde neyi korumalı, neyi değiştirmeli?

Yenileme kararı yalnız görünümün eskimesine dayanmak zorunda değildir. Ziyaretçiler doğru hizmeti bulabiliyor mu, içerikler güncel mi, form çalışıyor mu, mobilde temel bilgiler açık mı? Bu soruların cevapları farklı sorunları ortaya çıkarabilir. Bazı durumlarda içerik ve gezinme düzenlemesi yeterli olabilir; bazı durumlarda tasarım ve altyapının birlikte ele alınması gerekir.

Korunacak içerikleri, sayfa adreslerini ve işleyen özellikleri önceden belirlemek yararlıdır. Mevcut bütün yapıyı düşünmeden silmek, ziyaretçilerin alıştığı yolları veya anlamlı içerik ilişkilerini kaybettirebilir. Yenileme, yalnız yeni görünüm üretmek değil, işe yarayan tarafları yeni ihtiyaçlarla birlikte taşımaktır. Bu karar için mevcut siteyi içerik, deneyim ve teknik durum üzerinden incelemek gerekir.

İlk web fikrinden bugünkü bir şirket sitesine

Bağlantılı bilgi düşüncesini basit bir hizmet yolculuğunda deneyebiliriz. Ana sayfa şirketin ne sunduğunu açıklar. İlgili hizmet sayfası kapsamı ayrıntılandırır. Bir portfolyo kaydı gerçek çalışmayı gösterir. İletişim sayfası ise ihtiyacın paylaşılmasını sağlar. Bu dört sayfa bağımsız afişler gibi tasarlanırsa ilişkileri kullanıcıya görünmeyebilir.

Her geçişte küçük bir açıklama gerekir. “Projeler” düğmesi genel bir koleksiyonu açabilir; belirli hizmetin içindeki örnek iş bağlantısı ise daha dar bir ihtiyaca cevap verir. Bağlantının çevresindeki metin, kullanıcıya neden oraya gideceğini anlatabilir. Web’in belge ilişkisi, bugünkü arayüzde somut gezinme kararlarına dönüşür.

Tarihsel tarayıcı görüntüsüne bakarken bugünün ekran beklentilerini geriye taşımamak gerekir. Görselin kendi dönemindeki belge ve araç düzeni incelenebilir. Güncel bir kurumsal sitede ise farklı cihaz, içerik miktarı ve etkileşim koşulları bulunur. Tarih, aynı görünümü tekrarlamak için değil temel ilişkiyi düşünmek için yararlıdır.

Bu nedenle web yenilemesi yalnız yeni renk ve hareket eklemekle başlamayabilir. Önce içerik haritasına bakılır. Hangi sayfa hangi soruyu cevaplıyor? Hizmetler net mi, örnekler bulunabiliyor mu, iletişim adımı açık mı? Ardından görsel yön ve teknik ihtiyaçlar planlanır. İçerik düzeniyle arayüz birlikte geliştirilir.

İlk web sayfasının bugünkü kopyası tarihsel tarayıcıyla aynı şey mi? Hayır; sayfa içeriği ile onu gösteren araç farklı öğelerdir. CERN arşivindeki tarayıcı görüntüsü kendi kaydıyla sunulur. İlk siteyi gösteren güncel adres ise belgeyi incelemek için ayrı bir kaynaktır. Bu ayrım, ekran görüntüsünün tarihsel bağlamını korur.

Kurumsal sitede çok fazla animasyon gerekli mi? Hareketin hangi işi yaptığı değerlendirilmelidir. Bir bilgiyi açıklıyorsa yararlı olabilir; içeriğe ulaşmayı geciktiriyorsa yeniden düşünülür. Sitenin görevi, görsel etkisiyle birlikte kullanıcının aradığı bilgiye ulaşmasıdır. Her sayfa aynı yoğunlukta hareket istemeyebilir.

Eski siteyi tamamen değiştirmek gerekir mi? Önce çalışan ve zorlanan alanlar incelenebilir. İçerik yapısı uygunken arayüz yenilenebilir; başka bir projede altyapı değişikliği gerekebilir. Mevcut durumu görmeden bütün site için tek karar vermek, gerekli kapsamı belirlemeyi zorlaştırır.

Web tarihi yeni proje için ne kazandırır? Araçlar değişirken bazı ihtiyaçların sürdüğünü görmeyi sağlar. Açık bilgi, anlaşılır bağlantı ve bulunabilir içerik bugün de değerlidir. Yeni özelliklerin bu ihtiyaçlara nasıl katkı verdiği sorulabilir. Böylece proje, yalnız güncel görünen öğelerin listesi yerine belirli kullanıcı görevlerine dayanır.

Tanıtım, Kanıt, Güncelleme, Devamlılık ilişkisini açıklayan şema
Şema: Tanıtım · Kanıt · Güncelleme · Devamlılık. Onur Demircan tarafından hazırlanmış temsili açıklama.

Tarihten bugünkü projenize

Web’in ilk dönemine bakmak, modern bir sitenin sade görünmek zorunda olduğunu söylemez. Daha kullanışlı bir düşünce sunar: her görsel, bağlantı ve etkileşim bir bilgi veya görev ilişkisini desteklemelidir. Gösterişli bir giriş görseli markanın hikâyesine katkı sağlayabilir. Aynı karar hizmete ulaşmayı zorlaştırıyorsa bağlamına göre yeniden değerlendirilmelidir. Tasarımın değeri kullanılan öğe sayısından çok kurulan ilişkide ortaya çıkar.

Web tasarım ve yazılım hizmetimde sayfa türlerini, içerik yapısını ve teslim ihtiyacını birlikte planlıyorum. Bir yenileme düşünüyorsanız mevcut sitenizi ve ziyaretçinin yapmasını istediğiniz temel görevleri benimle paylaşabilirsiniz. Tasarım ile geliştirme kapsamını ayırmak için web tasarımı ve web yazılımı farkı rehberine de bakabilirsiniz.

Kaynaklar

Kapak görseli: CERN / WorldWideWeb tarayıcı arşivi. Görselin orijinal kaynağı.