GİT304U-DİJİTAL MEDYA VE ARAYÜZ TASARIMI
Ünite 4: Web ve Mobil
Giriş
Modern teknolojilerin iç içe geçmiş doğasında dijital medya ve arayüz tasarımının hedeflediği ana mecralar web ve mobildir. İnsan yaşamı ile dijital evren arasındaki sınırlar her geçen gün daha da belirsizleşirken web ve mobil, kullanıcı deneyimini zenginleştirme ve dijital içeriğin sunumu konusunda en önemli alanlar olarak ön plana çıkmaktadır.
Bir Dijital Mecra Olarak Web’in Anatomisi
Dijital medya ve UI/UX tasarımı perspektifinden bakıldığında internet, sadece teknolojik bir ağ değil aynı zamanda görsel iletişim pratiklerinin şekillendiği, yeniden tanımlandığı ve sürekli olarak genişlediği bir kültürel ve sosyal mecra olarak tanımlanabilir. Basılı ortamlardan farklı olarak dijital medya, iletişim teknolojilerinin sürekli gelişen ve evrilen sınırları dahilinde interneti, küresel ölçekte bir etkileşim platformu hâline getirir. İnternetin kendine has doğası, pek çok benzersiz özelliği ve kısıtlarımı beraberinde getirir. İnterneti tüm yönleriyle tanımak, başarılı dijital medya ve UI/UX tasarımları geliştirmenin en temel başlangıç noktasıdır.
İnternet Mi, Web Mi?
İnternet, dünya genelinde milyonlarca bilgisayarın ve iletişim cihazının birbirine bağlı olduğu geniş bir ağdır: Kullanıcılara birbirleriyle iletişim kurma, veri paylaşma ve çeşitli uygulamalara/hizmetlere erişim imkânı sağlar. Öte yandan, “World Wide Web” veya daha yaygın bilinen adıyla “web”, internet üzerinde yayınlanmış metin, görüntü, video gibi dijital içeriklerine erişebilmeyi sağlayan bir bilgi dağıtım sistemidir. HTTP (Hypertext Transfer Protocol) protokolü üzerinden erişilen web, internetin alt kümelerinden biri olarak dijital içerikleri etkileşimli bir biçimde sunma yeteneğine sahiptir. HTTPS (Hypertext Transfer Protocol Secure), HTTP’nin güvenli bir versiyonudur ve iletilen verilerin şifrelenmesi için Transport Layer Security (TLS) veya Secure Sockets Layer (SSL) protokollerini kullanır. Veri gizliliği, bütünlüğü ve kimlik doğrulaması sağlayarak web üzerindeki sunucu/istemci iletişimini daha güvenli hâle getirir.
Web Nasıl Çalışır?
Web’deki iletişimin temeli, sunucu (server) ve istemci (client) arasında gerçekleşen veri akışına dayanır. En genel hâliyle sunucu, iletişim ağları kapsamında yayın yapan bir bilgisayar olarak tanımlanabilir. İstemci ise Chrome, Edge, Firefox ve Safari gibi web tarayıcıları başta olmak bir sunucuya bağlanmak için kullanılabilen her türlü yazılımı (mobil, masaüstü) ve donanımı (IoT) ifade eder.
Favori web tarayıcınızı kullanarak bir web adresine erişmek istediğinizde istemci ve sunucu arasında aşağıdaki işlem adımları yürütülür:
• Adım 1: URL Kullanımı • Adım 2: DNS Sorgulama • Adım 3: HTTP İsteği
• Adım 4: Sunucu Yanıtı • Adım 5: İçeriğin Görüntülenmesi • Adım 6: Ek Kaynakların Yüklenmesi
Web Teknolojileri
Çağımızın en önemli bilgi ve iletişim araçlarının temelini oluşturan web teknolojileri, dijital medyanın dokuma tezgâhı gibidir. Web teknolojilerindeki inovasyonlar, bilgi toplumu içindeki etkileşimin ve iletişimin yapı taşlarıdır.
Web geliştirme, teknolojinin hızla evrimleştiği ve kullanıcı beklentilerinin sürekli olarak değiştiği dinamik bir sektördür. Sektördeki roller ve uzmanlıklar çoğunlukla ön uç (front-end), arka uç (back-end) ve tam kapsamlı (full- stack) olmak üzere üç alan altında sınıflandırılır.
HTML
İnternetin temel dili olarak kabul edilen HTML, web üzerinde yayımlanacak her türlü içeriğin kodlanmasında kullanılır. “Hiper Metin İşaretleme Dili” anlamına gelen HTML, her biri farklı amaçlarla tanımlanmış etiketler kullanılarak kodlanır ve web tarayıcıları tarafından çalıştırılır. HTML etiketleri; bir web sayfanın içindeki metinleri, resimleri, linkleri ve diğer multimedya unsurlarını düzenleyip sıralar.
CSS
CSS (Cascading Style Sheets) yani basamaklı stil şablonları, HTML ögelerinin görsel sunumunu düzenlemek için geliştirilmiş bir betik dilidir; web sayfalarının nasıl görüneceğini ve kullanıcı deneyiminin nasıl olacağını yönetmeye imkân verir. CSS’nin temel özellikleri şunlardır:
• Tasarım • Düşük Yineleme • Uyarlama ve Tepki • Animasyon ve Geçişler
Web tasarım ve geliştirme süreçlerinde çoğunlukla doğrudan CSS kodlamak yerine Ant Design, Bootstrap, Tailwind, Foundation, Semantic UI, Bulma ve benzeri tasarım sistemleri yaygın olarak kullanılır. Tasarım sistemleri; önceden hazırlanmış arayüz bileşenleri (form elemanları, menüler, butonlar, vb.) kod parçaları ve tasarım şablonları sunarak web sitesi tasarım ve geliştirme süreçlerini hızlandırır, basitleştirir.
JavaScript
JavaScript, dinamik ve etkileşimli web sayfaları oluşturmak için kullanılan bir programlama dilidir. Başlangıçta yalnızca web tarayıcılarında çalışacak şekilde tasarlanmış olsa da zamanla gelişerek sunucu tarafı uygulamalar, mobil uygulamalar, oyunlar ve hatta masaüstü uygulamalar geliştirmek için de kullanılır olmuştur. Günümüzde JavaScript, esnekliği ve geniş kullanım alanlarıyla, modern web geliştirmenin temel taşlarından biri hâline gelmiştir. JavaScript’in yaygın kullanım biçimleri ve alanları şu şekilde özetlenebilir:
• Ön Uç Geliştirme • Arka Uç Geliştirme • Mobil Uygulama Geliştirme • Oyun Geliştirme • Masaüstü Uygulama Geliştirme
Web Tasarımı
Dijital çağın mimarları olarak kabul edilen web tasarımcıları, webin nasıl şekillendirileceği konusunda kritik kararlar alır. Web tasarımı, kullanıcıların internette nasıl hareket ettiği, etkileşimde bulunduğu ve bilgiye nasıl eriştiği üzerinde derin bir etki yaratır. İnternetin ilk dönemlerinde web tasarımı; basit statik sayfalardan karmaşık, dinamik ve interaktif web deneyimlerine doğru evrim geçirdi. Bu dönüşümle web tasarımı yalnızca estetik bir disiplin olmanın ötesine geçerek kullanıcıların dijital ortamda nasıl öğrendiği, iletişim kurduğu ve etkileşime girdiği üzerinde önemli bir etkiye sahip oldu.
Web tasarımının temelinde hem görsel estetik hem de kullanıcıların siteyi kolayca gezinebilmesi, aradıkları bilgilere hızla ulaşabilmesi ve sitenin kullanımından memnun kalması yatar. Bunun sağlanabilmesi için web tasarımında pek çok farklı disiplin uyum içerisinde işe koşulur.
Web Arayüzlerinin Ayırt Edici Özellikleri
Web arayüzleri, kullanıcıların bir web sitesi veya web uygulaması ile etkileşime geçtiği noktadır ve bu etkileşim deneyimini şekillendiren birçok özellik içerir. Web arayüzlerini diğer arayüz türlerinden, özellikle geleneksel masaüstü ve mobil uygulama arayüzlerinden ayrıştıran bazı temel unsurlar şunlardır:
• Platform Bağımsızlığı • Canlı Güncellemeler • Erişilebilirlik ve Uyumluluk • Etkileşim ve Görsellik
Web Tasarım Süreci
Etkili bir web sitesi tasarlamak, yalnızca göz alıcı görsel kompozisyonlar oluşturmakla kalmaz aynı zamanda bilgi yönetimi, kullanıcı deneyimi ve kodlama gibi farklı seviyedeki becerileri bir araya getirir. Web tasarımın karmaşık yapısı, her bir detayın önemini ve bütünleşik bir yaklaşımın gücünü vurgular. Web deneyimi; kullanıcıların bir sitesiyle ya da uygulamayla etkileşim kurarken yaşadığı tüm duyguları, hisleri, algıları kapsar ve bu deneyim; kullanılabilirlik, erişilebilirlik, işlevsellik, performans ve görsel tasarım gibi birçok faktörden etkilenir.
Her ne kadar web tasarımı ve UI tasarımı süreçleri birçok ortak aşamayı paylaşsa da her birinin odaklandığı detaylar ve teknik gereklilikler farklılık gösterir. Web tasarımı, genel site yapısından ve kullanıcı deneyiminden sorumlu iken UI tasarımı kullanıcıların belirli bir arayüzle nasıl etkileşime gireceği üzerine daha detaylı çalışmalar yapar.
Duyarlı (Responsive), Uyarlanabilir (Adaptive) ve Mobil Öncelikli Tasarım
Duyarlı (responsive) tasarım, web sitelerinin farklı ekran boyutları ve çözünürlüklerdeki cihazlarda (masaüstü bilgisayarlar, dizüstü bilgisayarlar, tabletler ve akıllı telefonlar gibi) etkili bir şekilde görüntülenebilmesi için kullanılan bir web tasarım yaklaşımıdır. Kullanıcıların cihazları ne olursa olsun en iyi kullanıcı deneyimini elde etmelerini sağlamak amacıyla geliştirilmiştir. . Duyarlı tasarımın temel bileşenleri şunlardır:
• Esnek Sayfa Düzenleri • Esnek Görseller ve Medya • Medya Sorguları (Media Queries)
Mobil öncelikli (mobile-first) ve duyarlı (responsive) tasarım, modern web geliştirmede sıklıkla birlikte kullanılan iki yaklaşımdır. Her ikisi de web sitelerinin çeşitli cihazlarda ve ekran boyutlarında etkili bir şekilde çalışmasını sağlamayı amaçlar ancak farklı başlangıç noktaları ve odak noktaları ile bunu gerçekleştirirler.
Duyarlı tasarımdan farklı olarak uyarlanabilir (adaptive) tasarım, web sitelerinin farklı ekran boyutları ve cihazlara özel olarak tasarlanmış sabit düzenler kullanarak uyum sağlamasını sağlayan bir web tasarım yaklaşımıdır. Genellikle belirli ekran boyutları için önceden tanımlanmış bir dizi düzeni (layout) kullanır ve kullanıcının cihazı bu önceden belirlenmiş boyutlardan birine uyduğunda en uygun düzen seçilir ve gösterilir.
Bir Dijital Mecra Olarak Mobil Cihazlar
Günümüzde özellikle akıllı telefonlar, tabletler gibi taşınabilir cihazlarla özdeşleşmiş olan Mobilite kavramı; Latince “hareket edebilir” anlamına gelen “mobilis” kelimesinden türetilmiştir. Donanım ve yazılım inovasyonları sayesinde sürekli gelişerek evrilen mobilite, kişisel ve profesyonel iletişimimizin temelini oluşturmaktadır. Dünya nüfusunun %68’i akıllı telefon kullanmaktadır ve kullanıcıların %11’i günde yedi saatten fazla ekran karşısında vakit geçirmektedir. İnternet kullanıcılarının büyük bir çoğunluğu haberleri takip etmek, sosyal medyada etkileşimde bulunmak ve alışveriş yapmak için mobil cihazları tercih etmektedir.
Mobil Cihaz Ekosistemi
Akıllı telefonlar, tabletler ve giyilebilir teknolojilerden oluşan mobil cihaz ekosistemi; insanların dünyayla etkileşim kurma biçimlerini kökten değiştirerek bilgiye erişimde yeni ufuklar açmış ve coğrafi sınırları aşan bir iletişim ağı oluşturmuştur. Dijital medya ve arayüz tasarımı bağlamında değerlendirildiğinde mobil cihaz ekosisteminin keşfedilmeyi bekleyen sayısız deneyimsel kombinasyon barındırdığı açıktır. Bu nedenle mobil cihazları tüm yönleriyle tanımak, etkili bir kullanıcı deneyimi tasarımı için kritiktir.
Mobil İşletim Sistemleri
Mobil işletim sistemleri, kullanıcı deneyiminin her yönünü şekillendirir ve mobil cihazların nasıl algılandığını ve kullanıldığını belirler. Günümüzde mobil işletim sistemleri pazarı, esas olarak iki büyük oyuncu tarafından hakimiyet altına alınmıştır: Android ve iOS. Küresel çapta en yaygın kullanılan bu iki ekosistemdeki yenilikler, mobil teknolojilerin gelecekteki yönünü büyük ölçüde etkilemektedir.
Mobil Tasarım
Mobil tasarım, UI/UX tasarım prensiplerini kullanarak mobil cihazlar için optimize edilmiş ürünler ve hizmetler oluşturma sürecidir. Kullanıcıların küçük ekranlarda etkili bir şekilde gezinebilmesi, içeriklere kolayca erişebilmesi ve mobil cihazların benzersiz özelliklerinden etkin bir şekilde faydalanabilmesi için gerekli tüm tasarım unsurlarını kapsar.
Mobil Tasarım Sistemleri
Mobil tasarımın ana akım eğilimleri çoğunlukla cihaz ve yazılım üreticilerin benimsediği ya da kendi ürünleri için geliştirdiği tasarım sistemleri ve pratikleri kapsamında şekillenmektedir. Tasarım sistemleri, arayüz ve kullanıcı deneyimine yönelik standartlar, uygulama örnekleri ve öneriler sunarak tutarlı, kullanıcı dostu ve estetik açıdan etkileyici mobil, web ve masaüstü uygulamalar geliştirilmesine yardımcı olmaktadır. Büyük teknoloji firmalarının tasarım vizyonunu yansıtan bu sistemler; pek çok farklı açıdan kullanıcıları, sektörü ve tasarımcıları etkilemektedir:
• Standartlaşma ve Tutumluluk • İnovasyon ve Kullanıcı Deneyimi • Kullanıcı Beklentilerinin Yönlendirilmesi • Yaratıcılığın Sınırlanması
Material Design
Materyal Tasarım (Material Design), Google tasarımcıları ve geliştiricileri tarafından oluşturulan ve desteklenen bir tasarım sistemidir; Android mobil işletim sistemi, Flutter uygulama geliştirme çerçevesi ve web tasarım için derinlemesine UX rehberliği ve UI bileşenleri içerir. Tasarım sisteminin temelini oluşturan malzeme metaforu; katmanlar, dokular ve gölgeler kullanılarak kompozisyonlarda derinlik hissi ve hiyerarşi oluşturmayı mümkün kılar. Ana hedef, kullanıcıların arayüz ile nasıl etkileşime gireceklerini sezgisel olarak anlamalarına yardımcı olacak bir deneyim yaratmaktır. Material Design, pek çok UI bileşeni sunar ve bunlar arasında düğmeler, kartlar, çubuklar ve diyalog kutuları gibi tasarım ögeleri bulunur. Her bileşen kullanım kılavuzları, stil rehberleri ve en iyi uygulama örnekleriyle birlikte sunulur. Bileşenler, tasarımcılara ve geliştiricilere hızlı ve tutarlı bir şekilde kaliteli kullanıcı arayüzleri oluşturma olanağı sağlar.
Human Interface Guidelines (HIG)
Apple’ın Human Interface Guidelines yani “İnsan Arayüz Yönergeleri” adını verdiği tasarım sistemi; iOS, macOS,
watchOS ve tvOS işletim sistemlerinde uygulamalar ve dijital ürünler tasarlarken izlenmesi gereken prensipleri ve standartları belirler. Apple’ın tasarım felsefesini yansıtan bu kılavuz, tasarımcılara ve geliştiricilere kullanıcı deneyimi bağlamında kaliteli, tutarlı ve şık tasarımlar oluşturma konusunda rehberlik eder. Apple’ın tasarım felsefesi, kesinlik ve basitliğe dayanır. HIG; tasarımcıları ve geliştiricileri, kullanıcıların kolaylıkla anlayabileceği ve etkileşime girebileceği gelişmiş arayüzler oluşturmaya teşvik eder. Kullanıcı arayüzü unsurlarının aşırı karmaşıklıktan kaçınarak net ve sade bir biçimde sadece gerekli ögeleri içermesi gerektiğini vurgular. Apple, kullanıcı arayüzü bileşenlerinin tutarlı kullanımını teşvik eder, böylece kullanıcılar farklı uygulamalar arasında geçiş yaptığında öğrenme süreçlerini tekrar etmek zorunda kalmaz.
Fluent Design
Microsoft tasarımcıları tarafından oluşturulan Fluent (Akıcı) tasarım sistemi, kullanıcı arayüzlerinin daha sezgisel, etkileşimli ve çok boyutlu olmasını amaçlar. Microsoft’un kendi uygulamalarında geniş çapta kullanılmaktadır. Fluent Design’ın temeli derinlik, hareket, malzeme, ışık ve ölçek olmak üzere beş ana unsur üzerine kuruludur. Microsoft; Fluent Design’ı uygulamak için gerekli bileşen kitaplıkları, ikon setleri, tipografi rehberleri ve daha fazlasını içeren kapsamlı dokümantasyon ve geliştirme kaynakları sunmaktadır.