Web Tasarım Nedir? A’dan Z’ye Web Sitesi Tasarımı Rehberi

Tebrikler, web tasarımının geleceği artık senin elinde!

Bir zamanlar internet ağı sadece uzmanların çalışma alanı idi.

O zamanlarda kendine bir bilgisayar almak demek kendi programlarını kendin yazmaya başlayacaksın anlamına geliyordu.

Bir aplikasyona, uygulamaya bakan ve ardından bu uygulamanın çalışmasını sağlayan koda bakan insanlar, bu görünüşü hazırlayan tasarımcının yarattığı harika yapıya daha az ilgi gösteriyordu.

Bunu yapanlar bir kodu, karşılıklı diyalogta konuşulan Türkçe’den daha iyi ve akıcı bir şekilde anlayabilen insalardır.

İyi ki o günler de geçti.

İnternet dünyasını yöneten aynı dehalar bu günlerde bizimde bu eğlenceye katılabilmemiz için yeni araçlar geliştirmeye başladılar.

Bunların hepsi LiveJournal’larla (LiveJournal, merkezi san Francisco da bulunan bir sosyal medya tabanlı günlük tutma sitesidir diyebiliriz) ve bloggerlar ile başladı. Bu kitle, HTML ile yazılmış olan bu araçları bir metin haline getirip yayınlıyorlardı.

2016 yıllarında doğru web tasarımı, biraz daha sezgisel işlemler yapan araçlar olarak ortaya çıkmaya başladı. Bu araçlar sınırsız sayıda çeşitlilik gösteriyordu, ancak hepsinin ortak bir özelliği, kodları soyutlamaya çalışmaktan daha çok somut ve görsel bir hale çevirmeye çalışıyorlar idi.

İşte bu rehberi oluşturmaya başlama nedenimiz açıkçası bu yolculukta doğru adımları atabilmene yardımcı olmaktan başka bir şey değil. Başka hiçbir tasarım disiplini bizim disiplinimiz gibi metin üstüne olan bir soyutlamayı kullanarak yaratıcı ve görsel bir ürün ortaya koymak için çalışmıyor. Biz aslında zamanın bunu çok uzun bir süre önce değiştirdiğini düşünüyoruz.

Web tasarımı 101 dersi ile öğrenemeyeceğin ve web tasarımı ile ilgili bütün teknik bilgileri içeren toplu bir rehberdir bu. Bazı konuları ayrı rehberler olarak internet sitemizde bulabileceğin gibi hepsini bir arada görmek istiyorsan bu rehber tam da aradığın şey olacak.

Web Tasarımcıları İçin Bilinmesi Gereken, Önemli İlkeler

İnsan beyninin görsel bilgiyi nasıl yorumladığını ve bunları web sitelerinde nasıl kullanabileceğini keşfet!

Her tasarım, farklı öğeler arasında bir birlik duygusu yaratmayı ya da belirli bir hareketi teşvik etmek için bu birliği yaratıcı bir şekilde kullanmayı amaçlamaktadır. Burada bahsettiğimiz ilkelerin ikisini de yapabilmen için sana yardımcı olacağız.

İyi ki tasarım oluşturma, tasarım parçalama ve tasarımları birleştirme ile ilgili internet bir sürü, kolay anlaşılır kılavuz bulunmakta. Ve bunlar için Gestalt psikolojisilerine teşekkür etmemiz gerekli.

Eğer Gestalt kelimesine aşina değilsen, bu tanım sana bu kelimenin ne anlama geldiğini anlamanda yardımcı olacaktır.

Yani basit bir dille anlatacak olursak, Gestalt psikolojistleri insanların kaotik bir dünyada anlamlı (ve/ veya aldatıcı) algılara nasıl ulaştığını açıklamanın bir yolunu arıyorlar. Bu uğraşları sonucunda insan beyninin görsel veriyi nasıl yorumladığına dair 4 temel ilke buldular.

Bu 4 temel ilke, akılda kalıcılık bakımdan daha iyi, daha düzgün tasarımlar yaratabilmemiz için, insanların da görsel tecrübelerine dayalı olarak 13 spesifik(farklı) kurala ayrılıyor.

1.Ortaya Çıkış

Ortaya çıkış yapma ile ilgili olan bu ilke, sitedeki parçaları anlamaya çalışmadan öncesinde bu siteyi bir bütün olarak anlamayı denediğimizi belirtir.

Ne zaman bir obje görürsek ilk olarak dış görünüşü üstüne düşünürüz. Daha öncesinde gördüğümüz objeye benzeyen başka bir obje görmüş müydük hiç? Eğer aklımızı taradığımızda bu objeyi bir şeye benzetirsek, bu objenin ne olduğunu bildiğimizi düşünmeye başlarız ve belki bunun üstüne o objeyi oluşturan elemanları analiz ederek bütünün ne olduğunun peşine düşeriz. Eğer bu objeye benzeyen bir şeyi daha önce hiç görmemişsek belki bütün parçalarını teker teker analiz etmek ve bu objenin ne işe yaradığını çözmek isteyebiliriz.

Ortaya çıkış ilkesi tasarım için ne anlam ifade eder?

Bunu sana söylemekten pek hoşlanmıyorum fakat ortaya çıkış ilkesinin temel kuralı insanların bildiği bir şeye benzetmek ve basitçe hatırlanabilecek şeyler yapmaktır.

Yani yapacağın tasarımı ne kadar çılgınca bir iş yapmış olsan bile senin için en iyi olacak şey insanların bildiği stiller üzerine gitmen olacaktır. Açık bir şekilde görülen ve etiketli kutular, sonlarında “gönder” kutusu bulunan tasarımlar diğer yaratıcı tasarımlara göre daha çok akılda kalıcı oluyorlar.

Fakat öncesinde bir dur. Bu demek değildir ki bu tarz makaleleri okumayı bırakmalısın ya da yaratıcı tasarımlar yapmayı bırakmalısın.

İşte burası işlerin karışıklaştığı nokta. Ortaya çıkış ilkesi görsel objeler arasında bir hiyerarşi olduğunu bize gösterir: Önce bir bütün ile başlarız, ardından bölümlere odaklanırız. Bunun anlamı hemen anlaşılabilir bir format olması suretiyle tekil format elementlerimi kullanarak tasarımda yaratıcı olabileceğindir.

Ortaya çıkma ilkesi, minimalizm için çekici bir argüman sunar: Basit bir formun anlaşılması karışık olandan daha kolaydır.

Öyleyse tasarımımız basit olması gerekmektedir.

2.Yeniden Birleştirme İlkesi

Yeniden birleşme ilkesi bizim aklımızın objeleri, boşlukları görsel bilgiler kullanarak bir objeye benzetmesi üzerinedir. Bu bir şeyin ne olduğunu anlaman için o objeyi tamamen görmene gerek olmadığını gösterir. Daha sert, basit ve geniş bir objenin tek seferde anlaşılması, bölüm bölüm incelenip anlaşılabilecek olan o objeden daha rahat hatırlanır.

Bu demektir ki aşağıdaki bu görselde hangi objenin veya sembolün yer aldığını görselin tamamını görmeden bileceğindir:

Burada, objenin ne olduğunu anladın 😀

Peki, yeniden birleştirme ilkesi tasarım için ne anlam ifade ediyor?

Yeniden birleştirme ilkesi bir resmi ya da objeyi hatırlayabilmemiz için bu şeyin görselinin tamamını görmemize gerek olmadığını söyler. Bu ilkeyi tasarımın sırasında bulundukları bu slaytta sonraki bölümün içeriğini göstermek için fazladan boş alanlar bırakarak, “Yeniden Bekleriz” diyebilmek için yapacağın sayfayı çok daha açık, çok daha cazip bir hale getirebilirsin.

Gördüğün gibi bu sayfa yeniden birleştirme ilkesini kullanarak kendi web sitelerini hazırlamışlar.

3.Çoklu Stabillik

Bu anlatması diğerlerinden biraz daha zor ve değişik bir şey, ama hadi başlayalım: Çoklu stabillik ilkesi vazo ile yapılmış bir görsel illüzyon bulundan bu ünlü fotoğrafta neden her birinde sadece bir tanesini görebildiğimizi ve neden aynı anda iki şeyi de göremediğimizi açıklar.

Yüzler mi yoksa vazo mu? Multi stabillik demek her bakışında bu ikisinden yalnızca bir tane göreceksin demektir.

İnsan beyni kararsız kalmayı pek sevdiği söylenemez, gördüğün gibi, bu yüzden olabilecek alternatiflerin birine odaklanır sadece.

Büyüleyici değil mi? Bu sizi de türlü politikalar hakkında düşündürtmüyor mu? Neyse biz konumuza devam edelim.

Multi-stabillik tasarım için ne anlam ifade eder?

Multi stabillik bir tasarıma efektif bir şekilde eklenmesi zor olan bir şeydir. Çünkü beynimiz, kafamızın karışması yerine anlamaya katkıda bulunmaya daha çok eğilimdir(ki bu bizim görsel tasarım hedefimizdir).

Tabii, binlerce logo ne kadar güçlü olabileceğini yıllar içinde kanıtladı, sen multi-stabilliği akılda kalıcı ve hoş sürprizli tasarımlar yapmak için, aynı FedEx logosunun da yaptığı gibi kullanabilirsin. Oradaki ok işaretini görebilirsen (E harfi ile x harfi arasında) onu görmemek bundan sonra çok zor olacaktır.

Multi-stabillik o ok işaretini görünce bir daha unutamayacaksın demektir.

4.Değişmezlik İlkesi

Değişmezlik ilkesi bizim benzerlikleri ve farklılıkları hatırlamak konusunda çok iyi olduğumuzu gösterir. Bu, bir şeyleri benzer nesnelerin kalabalığından ayırt etmenin gerçekten kolay olduğu anlamına gelmektedir.

Matrix filmindeki kırmızı elbiseli bayanı hatırlıyor musun? Peki ya Shindler’s List filmindeki kırmızı elbiseli kızı hatırlıyor musun? Bu ikisi çok göz önünde bulunuyordu ve aynı zamanda çok akılda kalıcıydı çünkü arka tarafta oynayan siyah-beyaz formata göre bu açık kırmızı rengi “ben buradayım diye” bağırıyor gibiydi. Bu renkler o karakterleri kafamızda anlamlı ve buna istinaden önemli olarak göstererek ilgimizi çekiyordu.

Peki ya değişmezlik ilkesi tasarım için ne ifade eder?

Tasarım alanında değişmezlik ilkesi, farklı bir homojen öğe grubuna öğe getirildiğinde güçlü sonuçlar üretebilir.

Bunun uygulandığını görebileceğin bir alan ise ürünlerin fiyatlandırma sayfalarıdır, her bir sütun fiyatlandırma tablosunda bulunan ve geri kalan bütün sütunlardan boyut olarak veya renk olarak farklı olur.

Sence en çok dikkat çeken sütun hangisi?

Echo’nun fiyatlandırma sayfası insanların ilgisini çekmek ve gözünü farklı sütunlara kaydırmak amaçlı bir sürü farklı ayarlamalar yapmış. Burada bulunan sütunların her birinde farklı tonlarda mavi tonları kullanılmış, hazırlanmış olan özel sütunun parlak mavi renginde kaybolup gidiyorlar değil mi ?

Bunu ayrıca, web tasarımcılarının, tasarımcıların kalabalıktan öne çıkan parlak bir renk veya değişken bir tasarıma sahip olmalarını sağlayan ana gezinme sistemlerinde de göreceksin.

MailChimp’in tasarımcıları gözünü “Ücretsiz Üye Ol” düğmelerine çekmek için değişmezlik kullanıyor.

Bu kullanıcıya hangi eylemi gerçekleştirmek istediğine dair seçenek sunuyor ve bu sunulan seçenek sizin kullanıcı deneyiminizi berraklaştırıyor. MailChimp örneğinde iki ana CTA’daki aynı tasarım ve dil, her iki bağlantının da seni aynı yere götüreceğini açıkça ortaya koyuyor.

Daha temel ilkeler konusunda kendini bir uzman gibi hissetmiyor musun? Süper. Hadi biraz daha derinlere dalalım.

Gestalt ilkelerinin Web Tasarımı Üzerindeki Uygulamaları

Genel olarak Gestalt ilkeleri bizim, insanların görsel bilgiyi nasıl yorumladığını anlamamıza bu iki yol ile yardımcı oluyor:

1. Bir bütün olarak başlayıp sonrasında bölüm bölüm ayırmak veya
2. Basitleştirilmiş elementlerin kullanımı ile kafa karışıklığını kökten gidermeye çalışmak

Başka bir deyişle, iş görsel uyarıcıların yorumlanmasına gelince bizler her zaman bir şeyi anlayabilmek için en basit yola bakarız, başvururuz.

Gestalt psikolojistleri buna:

“Law of Prägnanz”(yani “iyi bir figür kanunu” ya da “basitlik kanunu”) der.

İnsanlar belirsiz veya karmaşık görüntüleri mümkün olan en basit biçim veya biçimler olarak yorumlar.

Bu yüzden olimpiyat logosunun tasarımını bir demet kesik daire ve yaprak şekli olarak görmek yerine, sadece birbirine geçen halkalardan oluşan bir düzen içinde görüyoruz.

Prägnanz Yasası uyarınca, Olimpiyat logosunu bir sürü anlamsız veya karışık şekil yerine(sağdaki), birbirine geçen halkalar(yani soldaki) olarak görüyoruz.

Çok işlevlilik prensibine göre, daha karmaşık düzenlemeleri görmeye çalışabileceğinizi ancak daha fazla çaba harcayacağınızı, gözlerinizin ve beyninin genellikle daha basit bir deseni görmek istediğini unutma.

Tasarım için bunun anlamı ne olabilir? Bir bütün olarak basitçe anlaşıldığı sürece bu basit şekilleri kullanarak yaratıcı ve kompleks tasarımlar yapabilirsin. Temel olarak Georges Seurat’ın nokta bakış açıcı tablolarıyla yaptığı şey buydu:

Seurat, bu nokta bakış açısı ile yaptığı resimlerinde şekiller görebileceğimizi biliyordu.

Bu bizi doğrudan kapatma ilkesine yöneltir.

Kapatma İlkesi

Bizler her zaman kaosa anlam ve düzen getirmeye çalışıyoruz ( önceki ilişkilerinden bahsetmiyoruz 😀 ), ve gözlerimiz bunu yeniden birleşme ilkesi yardımıyla gerçekleştiriyor: gördüğümüz bir şeyi anlamak için eksi verileri dolduruyoruz kafamızda.

Bunun yapılışını Mike Erickson’un yaptığı OneFund tasarımında görebiliriz, namı değer Logomotive. (çoğunlukla gördüğün bu minimal tasarımlardan bahsetmiyorum.)

Burada, F harfini oluşturmak için ihtiyaç duyduğumuz tüm görsel bilgiler verilmiyor fakat harfi oluşturmak için gölgelerin sağladığı eksik bilgileri tahmin edebiliyor beyinlerimiz. Beyinlerimiz bu işi yapıyor çünkü aksi takdirde görüntü bu resimde görülen birkaç tane ve tipte siyah rastgele görünen bloklar halini alır.

Kapatma ilkesi temel olarak tüm minimal logoların beyinde nasıl işlendiğini gösterir.

Simetri ve Düzen

İnsanların nesnelerde düzen aramak eğiminde olması pek de şaşırtıcı değildir ve simetri bunun yapmanın yollarından biridir. Bundan ötürü simetri bizi bu konularda tatmin edebiliyor: Bu temelinde basit bir iş, insanların düzen ve doğruluk algılarını harmoni(uyumluluk) ilkesi ile nakletmeye yarar.

Muhtemelen bu simetrinin neden dünya çapındaki bütün hükümet binalarının tasarımında popüler bir hal aldığını gösterir bizlere. Ve aynı zamanda 3 sütunlu tasarımların neden moda olduğunu da bize gösterir. Araştırmalar bize kişilere göre olan standart güzelliğin özellikle simetriye dayalı olduğunu göstermektedir.

Simetrik şekiller insanları tatmin etse bile bu simetrik uyumluluktan dolayı biraz fazla statik ve bayat görülebilme ihtimalleri bulunur. Bazen bu durumlarda dinamik mantığa fazlasıyla uyumsuz olabiliyorlar.

Bu problem tasarımcının kendisine yani sana bir seçenek sunuyor: Eğer eğer simetrik bir tasarıma, bu tasarıma uygun olmayacak yani dengesiz bir element ekleyecek olursan, bu eklediğin dengeyi bozan elemente ilgiyi çekmiş olacaksın. Harekete geçme çağrın için mükemmel bir yer, mükemmel bir vurgu noktası olabilir mi sence?

Şekil/Zemin

İnsanlar nesneleri şekil(yani odak noktası) veya zemin ( arka plan) olarak görürler.

Birkaç nesne yan yana geldiğinde doğal olarak açık görsel işaretler olmasa bile, aralarında bir mekânsal ilişki duygusu yaratırız. Bu çok basit nesne düzenlemelerinin bile bir ilişki duygusu ve dolayısıyla bir anlatı ipucu oluşturmak için kullanabileceği anlamına gelmektedir.

Bunu yapabilmemizin bir yolu 2 objeyi(veya daha fazla objeyi) birbiri ile boyut karşılaştırması yapmaktır, otomatik olarak resimdeki boyut olarak küçük olan objeyi yargılamaya başlarız ve beynimiz büyük olan diğer objeyi arka plan olarak görmeye başlar. Yukarıdaki resime bakarak beynimizin bu işlemi aynı bu şekilde gerçekleştirdiğini görebilirsiniz. Rengi ne olursa olsun küçük olan figürü görür, diğer büyüm figürü ise arka plan olarak görürüz.

Bizler aynı zamanda öncesinde edindiğimi tecrübelerimiz yardımı ile bu tarz ilişkileri oldukça yaratıcı şekilde yorumlama eğiliminde bulunmaktayız. Örnek olarak, yukarıdaki resimde kendime hakim olmaya çalışmama rağmen oradaki küçük dikdörtgeni bir insan olarak algılıyor ve bu insanın karanlık bir gökyüzündeki görünüşüne baktığım hissiyatına kapılıyorum.

Bunun gibi küçük elementleri büyük elementler ile ilişki kurdurarak, Bu  web sitesi tasarımınızda kullandığınız bu küçük elementi odak noktası olarak kullanıp büyük elementi arka plan olarak verebilme şansına sahipsiniz. Bu tamamen taşmayan bir görüntünün üstüne konan bir kopya artı düğme bölümünde düğmenin dikkat çekmesinin ana nedenlerinden biridir.

Evernote, bu Sign Up düğmesine göz atmak için şekil / zemin kullanır.

Farklı öğeler arasındaki uzamsal ilişkileri netleştirmek için alt gölgeler gibi görsel ipuçlarını da kullanabilirsin. Bu yüzden Google’un malzeme tasarım kurallarında çok fazla gölge bulman mümkündür.

Düzgün Bağlantı

Görsel ilişki olarak bağlanmış, Bağlantısı olmayan elemanlardan daha çok ilişkili olan unsurları görmemiz demektir.

Soldaki şekiller, sağdakilerden daha ilişkili  görünüyor. Üstelik şekillerin aynı olduğu yerlerde bile!

Yukarıdaki resimde, büyük mavi dikdörtgen ve soldaki küçük mavi daire, sağdaki şekillerden daha ilişkili görünüyor değil mi? Mavinin dairenin tekrarı da bir bağlantıya işaret ediyor gibi sanki.

Bağlantı elemanının (yukarıdaki küçük dikdörtgen) bu ilişki duygusunu oluşturmak için aslında diğer nesnelere dokunması gerekmediğini unutma. Bu, aşağıdaki resimde görebileceğin gibi okların neden bir görüntüye metin bağlamak için sıklıkla kullanıldığını açıklar.

Oklar, grafiğin mesajını daha iyi anlamak için kopya ve görüntüyü birleştirmemize yardımcı olur.

Oklar olmadan, “burada ve burada iyi görünüyor” ifadesini ilgili görüntülere bağlamak mümkündür, ancak bu, “burada” birinin tablete, diğerinin telefona atıfta bulunduğunu anlamak için izleyicinin bazı çıkarımlarını gerektirir. Oklar, metin ile görüntü arasındaki bağlantıları daha net hale getirir ve her şeyin kolayca işlenmesini sağlar.

Ortak Bölgeler

Öğeleri, aynı bölgeye alınmışlarsa grubun bir parçası olarak görürsün.

Bu görsel numarayı her zaman kullanan web siteleri görüyorsun. Aslında, çoğu insanın web tasarımının artan homojenliği olarak karar verdiği özelliklerden biri haline geldi bu bölgeler. Ancak, bu, tekniğin çeşitli tasarım öğeleri grupları arasındaki ilişkileri netleştirmedeki gücünü azaltmaz.

Ortak bölgeler ilkesi, manşet, vücut kopyası ve görüntüyü bir hikayeye bağlamamıza yardımcı olur.

Yukarıdaki ekran görüntüsünde (Google’ın Now sitesinden alınmış), tasarımcı, başlık, resim ve paragrafın birbiriyle ilişkili olduğunu anlamamıza yardımcı olmak için dev kartlar kullanıyor. Hemen “doğru zamanda doğru bilgi” nin hem görüntünün hem de aşağıdaki kopyanın konusunu tanımladığını  ve  “günün her saati yardımın” yeni bir unsurlar grubunu getirdiğini anlıyoruz.

Yakınlık

Birbirine yakın objeleri birbirinden daha uzak olan objelerden daha fazla ilişkili olarak görüyoruz.

Görsel olarak mesafe, ilişkiyi tanımlar. Birbirine yakın olan nesneler birbirleriyle ilişkili olarak görülürken, birbirinden çok uzak olan nesneler o şekilde görünmezler…

Örneğin, aşağıdaki Google’ın Now sitesini ziyaret edin. “Spotify” metni, aşağıdaki karttaki tüm içeriklerle açıkça ilişkilidir ve kartın içinde olmasa da – karta “OpenTable” ifadesinden daha yakındır.

Yakınlık, bu görüntüdeki karmaşık ilişkileri oyunda düz tutmamıza yardımcı olur.

Devam

Bir çizgi veya eğri üzerindeki öğeleri, çizgi veya eğri üzerinde bulunmayan öğelerden daha fazla ilişkili olarak görüyoruz.

Bu üç noktanın devam nedeniyle ilişkili olduğunu biliyoruz.

Subaru’nun Zero Landfill sitesinde gösterildiği gibi, çizgiler ve eğriler de ilişkileri anlamamıza yardımcı olur. Yukarıdaki ekran görüntüsünde de görebileceğiniz gibi, bu kaba halkanın üzerindeki noktaların birbirleriyle yakından ilişkili olduğu açıktır – en azından sayfanın diğer bölümlerindeki metinden çok daha fazla açık olduğunu söyleyebiliriz.

Ortak Kader (Senkronize)

Aynı yönde hareket eden, durağan veya farklı yönlere hareket eden öğelere göre daha fazla hareket eden elementler görüyoruz.

Tekne ortak kader ile ilgili görüntü ve metni tutar.

Hem bir fırtınanın kaotik atılımlarını hem de anlattığı hikayenin ileri momentumunu iletmek için Paralaks kaydırma kullanan The Boat’da ortak kader oyununun güzel drama ile ortaya çıktığını görebilirsin.

Tüm bu hareket devam ederken, yukarıdaki ekranın ortasındaki metnin aralarında oturduğu iki ön plan görüntüsü ile ilgili olduğu gerçeğini kaçırdığınız için affedilirsin. Ancak, tekne ve fırtına atımlı dalgalar genellikle ekranın sağına doğru hareket ettikçe, ön plan metni ve görüntüler arasındaki ilişki netleşir, çünkü ekranı yukarı taşırlar. Tasarımcılar, kaydırma yaparken metin ve görüntünün eğilmesini ve kaydırılmasını sağlayarak dram eklediler.

Paralellik

Paralel elemanları paralel olmayan elemanlardan daha çok ilişkili olarak görüyoruz.

Paralellik eylemde görmek için, İtalyan Fütürist FT Marinetti’nin klasik görsel şiiri “Özgürlüğündeki Parole” (“Özgür kelimeler” veya “Özgürlük içindeki kelimeler”) den daha iyi bir örnek düşünemiyorum.

Paralel metnin satırları bu karmaşık harf karmaşasını anlamamıza yardımcı olur.

Bu kaotik metin karmakarışıklığının ortasında, Marinetti, birbirine paralel birkaç satırlık çizgi oluşturarak (göreceli) açıklık ve ilişkiye sahip aralıklar sunar. Bu paralel çizgiler aksi halde dağınık metinler ile gerginlik yaratır, ancak normal bir okuma deneyimini dinamik kompozisyona anlık olarak geri yükleyerek rahatlama sağlar.

Benzerlik

Özellikleri paylaşan unsurlardan daha fazla özellik taşıyan unsurları görüyoruz.

Eylem halindeki benzerlikten birkaç örnek daha önce gördün (homojen bağlantı bölümüne bak ve MailChimp’in tasarımında değişmezlik bölümüne de bak). Ancak biraz daha yakınlaştırmak için, ‘in bu tasarıma bir göz atabilirsin:

Dairesel simge, iki Site Tasarım yazısının ilişkili olduğunu anlamamıza yardımcı olur (yani aynı yazı tipi).

Burada, sarı arka plana sahip web sayfası simgesi, iki Site Tasarımı gönderisini birbirine bağlayarak aynı gönderi türünün açık olduğunu gösterir. Aynı rengin sağdaki Abone Ol düğmesinde görünmesi, bunun bir şekilde ilişkili olduğunu düşünmenize neden olabilir, ancak farklı şekil ve metin onu ayırt etmenize yardımcı olur.

Odak Noktaları

İlgi noktaları, vurgu veya fark noktaları dikkatimizi çeker ve tutar.

Odak noktaları, web tasarımının pek çok unsurunun anahtarını oluşturuyor ve neredeyse işaret etmek neredeyse garip geliyor. Ancak bu merkezci tutum, zekice ve belli bir amacı bulunan vurgu ve farkları uygulamanın daha da önemli olmasını sağlar, sonuçta, “her şeyin üzerinde durulursa, hiçbir şey olmaz” diyor.

Tabii ki, aşağıdakiler de dahil olmak üzere bir tasarımda vurgu oluşturmanın her türlü yolu vardır:

• Dramatik renk değişimleri , örneğin bir CTA düğmesine veya başka bir bağlantıya yüksek kontrastlı bir renk verildiğinde
• 72 punto’ya ayarlanmış bir kahraman başlığı gibi dramatik boyut değişiklikleri
• Kalın, italik, tümü büyük harf gibi Tipografik vurgu
• Dramatik boşluk , tıpkı diğer elemanlardan toplam izolasyona odak noktası yerleştirdiğinizde olduğu gibi

Ve çok daha fazlası.

Geçmiş Tecrübeler

Olayları geçmiş deneyimlerimiz açısından algılıyoruz.

Tamam, işte gerçekten zor bir olay buna denir. Burada tartıştığımız diğer tüm görsel tasarım ilkelerinden farklı olarak, bir insanın geçmiş deneyimlerini kontrol etmenin bir yolu yoktur.

Burada yapabileceği en iyi hitap, hedeflediğimiz olan ortalama geçmiş deneyim, tecrübedir. Örneğin, çoğu insan dondurmayı her türlü sıcak, bulanık hisle ilişkilendirir. Ama lezzetliliğinden gelen temel zevkten bahsetmez. Dondurma külahının görüntüsü, çocukluğun sonsuz yaz günlerinde nostaljiyi ya da bir aile yemeğinden sonra servis edilen geleneksel dondurma kaselerinden bir beraberlik hissi uyandırabilir.

Veya, bir kişi laktoz intoleransından muzdarip olabilir. Dondurma imajını sonsuza dek… tatsızlık ilişkileriyle işaretlenmiş halde bırakmış olabilir bu kişi.

Ayrıca, izleyicilerinizdeki farklılıkları göz önünde bulundurmanız gerekir. Uluslararası bir izleyici kitlesi için web siteleri veya ürünler tasarlarsanız – hatta farklı yaşlardan bir izleyici kitlesi – bazı görüntülerin veya tasarım öğelerinin duygusal ve deneysel rezonanslarının bölümler arasında farklılık gösterebileceğini aklınızda tutmanız gerekir.

Web Tasarım Rehberi : Renk Teorisi

Bir websiteyi tasarlarken kullanabileceğin 16.8 milyon adet renk seçeneğin olduğunu biliyor musun?

Bir de bunları palet oluşturmak için birleştirmeye başlarsan ne olur? Basit bir dille anlatacak olursak hazırlayacağın dizilerin sayısı sonsuz olur diyebiliriz.

Buna başlamak için öncelikle şu başlıkları açıklaman gerekir.

Tasarımda Renk Seçimine Neden Önem Vermen Gerekir

Eğer birisi sana tamamıyla bedavaya hayalindeki arabayı ve anahtarını verirse sevinçten havalara uçmaz mıydın? Zevkten dört köşe olurdun değil mi? En azından ben olurdum. (Vermek isteyen varsa yoruma yazabilir 🙂 )

Fakat düşün ki bedavaya aldığın hayallerini süsleyen arabaya bakıyorsun ve senin en tiksindiğin renklerden biri ile boyanmış, ya da araçta bulunan her bir panel (bütün araç boyunca) birbirine uymayan farklı renklerde boyanmış. Ya da iç kısmı kireç yeşili ile inşaat sarısı renkleri ile boyanmış.

Daha az mutlu oldurdun heralde değil mi?

Renklerin anlamları vardır. Yazı tiplerindede olduğu gibi her bir rengin bir tonajı, bir duygusal etkisi bulunur, renklerdeki işte bu özellik renkleri tasarım konusunda çok güçlü kılıyor.

Renk Terimleri

Teoriye direk geçmeden öncesinde ilk olarak aşağıdaki başlıklarda anlatılan temel bilgileri bilmen gerekiyor.

Ana Renkler

Resimde diğer renklerin hepsini yaratmayı sağlayan 3 ana renk gösterilmiştir

Ana renkler diğer bütün renkler ve tonajların temelini oluşturmaktadır. İnsanlar 3 baz rengi algılar bunlar: Eflatun, Camgöbeği ve Sarı. Gördüğümüz diğer bütün renkler bu 3 ana rengin belli miktarlardaki kombinasyonlarından, Parlaklıklarından, tonlarından ve izlerinden oluşur.

Geleneksel olarak bizler 3 ana rengi kırmızı, mavi ve sarı olarak sayarız fakat araştırmalar Eflatun, Camgöbeği ve Sarı renklerinin bizlerin renk tecrübelerine daha uygun olduğunu göstermektedir.

İkincil Renkler

İkincil renkler, yukarıda listelenen üç ana renkten herhangi birinin birleştirilmesiyle oluşturulan renklerdir.

Yukarıdaki renk teorisi modeline göz atalım bir daha. Her ikincil rengin üç ana renkten ikisi tarafından nasıl desteklendiğini gördünüz mü?

Üç tane ikincil renk vardır: turuncu, mor ve yeşil. Her birini üç ana renkten ikisini kullanarak oluşturulabilen renklerdir. İkincil renk yaratmanın genel kuralları ise şunlardır:

• Kırmızı + Sarı = Turuncu
• Mavi + Kırmızı = Mor
• Sarı + Mavi = Yeşil

Yukarıdaki renk karışımlarının yalnızca her bir ana rengin en saf formunu kullandığınızda çalıştığını unutmayın.

Bu saf form bir rengin tonu olarak bilinir ve bu tonların aşağıdaki renk tekerleğindeki her rengin altındaki varyantlarla nasıl karşılaştırıldığını göreceksiniz.

Üçüncül Renkler

Üçüncül renkler, birincil rengi ikincil renkle karıştırdığınızda oluşturulur.

Buradan, renk biraz daha karmaşıklaşıyor.

Uzmanların tasarımlarında nasıl renk seçtiklerini öğrenmek istiyorsanız, önce rengin diğer tüm bileşenlerini anlamanız gerekir.

Üçüncül renklerin en önemli bileşeni, üçüncül bir renk oluşturmak için her ana rengin ikincil bir renkle eşleşememesidir.

Örneğin, kırmızı yeşil ile uyum içinde karışamaz veya mavi turuncu ile uyum içinde karışamaz.

Her iki karışım da hafif kahverengi bir renge neden olur. Tabii ki aradığınız şey bu değilse elinizde istemediğiniz ve tahmin edemediğiniz bir renk oluşacaktır.

Bunun yerine, ana renkler aşağıdaki renk tekerleğinde yanına gelen ikincil bir renkle karıştığında üçüncül renkler oluşturulur. Bu gereksinime uyan altı üçüncül renk vardır:

• Kırmızı + Mor = Kırmızı-Mor (Eflatun)
• Kırmızı + Turuncu = Kırmızı-Turuncu (Vermillion)
• Mavi + Mor = Mavi-Mor (Menekşe)
• Mavi + Yeşil = Mavi-Yeşil (Deniz Mavisi)
• Sarı + Turuncu = Sarı-Turuncu (Amber)
• Sarı + Yeşil = Sarı-Yeşil (Açık Yeşil)

RGB(Red-Green-Blue) ve Altıgen

İnternet sitelerinde renkleri sunmak için bizler RGB(Red-Green-Blue) yani kırmızı, yeşil ve mavi renkleri ve altıgen değerlerini kullanıyoruz.

RGB renk sistemi gelebilecek bütün renkleri sadece bu 3 ana rengi farklı şekillerde birleştirerek tanımlayabiliyor: belli bir tonajda kullanılmış kırmızı, yine belli bir tonajdaki yeşil ve yine belli bir tonajdaki mavi.

Yani:

• RGB(59,89,154) değeri Facebook logosundaki o meşhur mavisi
• RGB(0,0,0) siyah demek
• RGB(255,255,255) beyaz demek

Altıgen renk sistemi her bir değeri 16lık değerlere (Hexadeciam) çevirerek bizlere sunmaktadır. Buna göre;

• #3b599b Facebook mavisi
• #000000 Siyah
• #ffffff beyaz

Burada gelen 6 karakterlerden her ikisi bir tonaj demektir. Örnek olarak Facebook mavisine bakarsak burada 3b R yani kırmızı için girilen değer, 59 G yani yeşil içi girilen değer ve 9b ise B yani mavi için girilen değerdir.

Sıcak Ve Soğuk Renkler

Renklerin sıcaklığı vardır ve bunların tonajlarının hepsi sıcak veya soğuk olarak sınıflandırılabilir.

Sıcak renkler sarı ve kırmızı renklerini genellikle daha çok barındırırlar. Yapılan bir tasarımda sıcaklık ve tutku hissiyatı oluşturmaları mümkündür. Bunlar aynı zamanda fazlasıyla agresif veya cesur hissettirebilirler. Misal uluslararası dur tabelasını-levhasını bir hatırla. İşte kırmızı bu yüzden sık sık hata mesajlarında da kullanılmaktadır.

Soğuk renkler ise genellikle fazlasıyla mavi rengi içermektedir. Bu renkler genellikle soğuk iklimler, buz, kış, su, gece, ölüm ve üzüntü hissiyatlarını uyandırmaktadır. Yalnızlık, soğukluk ve korku çağrışımları taşıyabilirler. Soğuk renkler aynı zamanda daha az agresif ve çok daha rahatlatıcı. Mavi bir gökyüzünü veya bir plajda kristal berraklığında mavi suları düşün.

Rahatlayabildin mi?

Sıcaklık

Bir görüntünün  sıcaklığını  artırmak, turuncu seviyelerini yükseltmek anlamına gelir. Genellikle, görüntünün daha sıcak ve mutlu görünmesini sağlar, güneş turuncu üzerine parladığında dünyanın nasıl mutlu göründüğüne benzer. Buna karşılık, görüntünün sıcaklığını düşürmek, bulutlu bir gün gibi daha soğuk ve daha az davetkâr görünmesini sağlar.

Renk Tonları Ve Gölgeler

Bir renk tonuna beyaz eklediğinde rengin tonunu elde edersin. Bunun yanı sıra eğer renge siyah eklersen gölgesini yani koyu tonunu elde edebilirsin. Renk tonları ve gölgeler, temel renge değişen seviyelerde beyaz ve siyah ekleyerek tek renkli renk şemaları oluşturmana olanak sağlar.

Örneğin, temel rengin aşağıdaki resimde görüldüğü gibi # 8dbdd8 (açık mavi) ise, iki renk tonu (iki parlak mavi) ve iki renk tonu (iki koyu mavi) seçerek tek renkli bir şema oluşturabilirsin.

Doygunluk, Ton ve Hafiflik

Doygunluk  bir rengin yoğunluğunu açıklar. Doygunluğu artırmak, rengi daha zengin ve daha koyulaştırırken, doygunluğu azaltmak ise soluk ve açık görünmesini sağlar. “Açık mavi” veya “koyu yeşil” dediğimizde, doygunluktaki değişiklikleri açıklıyoruz.

Ton, bir rengin kırmızı, turuncu, sarı, yeşil, mavi, çivit mavisi ve menekşe (gökkuşağının renkleri) ile benzer veya farklı olarak tanımlanabileceği dereceyi tanımlar. Yani bir rengi “yeşilimsi mavi” olarak tanımladığınızda, onu iki ton olarak tanımlarsın.

Değer veya ton olarak da bilinen hafiflik, bir rengin algılanan parlaklığını saf beyaza kıyasla tanımlar.

Renk Tekerleği

Temel renk tekerleği, renk şemaları oluşturmak için kullanılan 12 standart rengi içerir. Pastanın her dilimi, farklı doygunluklar, tonlar, tonlar, gölgeler ve komşu renklerin karışımları ile elde edilebilecek bir renk ailesini temsil eder. Kombinasyon renkleri (örneğin sarı-turuncu), baz tonların (sarı ve turuncu) eşit miktarda karıştırılmasından kaynaklanır.

Ana renkler kırmızı, sarı ve mavidir. Menekşe, turuncu ve yeşil ikincil renklerdir. Geriye kalan her şey üçüncül renk, birincil ve ikincil renklerin karışımıdır.

Tasarımlar, dört renkten oluşan renk şemalarını seçmek için renk tekerleğini kullanır.

4 Çeşit Renk Şeması

Tasarımcılar, renk çarkından birden fazla renk ailesini eşleştirerek renk şemaları oluşturur. Bu, aşağıdaki modellerden birini uyguladığınızda en iyi sonucu verir.

1. Tek Renkli

Tek renkli bir renk şeması, tek bir temel rengin çeşitli renk tonlarından, gölgelerinden ve doygunluklarından oluşur. Çok yapışkanlar ama monoton olma riski taşıyorlar.

2. Tamamlayıcı

Tamamlayıcı şemalar renk tekerleğinin karşıt taraflarından iki renge dayanmaktadır. İki ton çılgınca farklı olacağından, bu tür programlar çok etkili ve dikkat çekici olabilir.

3. Benzer

Benzer şemalar, renk tekerleğinde yan yana oturan üç renge sahiptir. Ton benzerlikleri nedeniyle, bu şemalar, tek renkli şemaların monotonluğu olmadan çok yapışkan, birleşik bir his yaratabilir.

4. Üçlü

Üçgenli bir renk şeması yapmak için renk tekerleğine eşkenar bir üçgen (üç tarafın üçünün aynı uzunlukta olduğu bir üçgen) çizin ve üçgenin noktalarından üç rengi seçin. Bu, farklı, ancak dengeli bir şema yaratır.

Renk Psikolojisi

Her rengin kendine özgü tonları ve anlamları vardır. Renklerini dikkatlice seçerek, bir sitenin genel mesajını güçlendirebilirsin.

• Kırmızı

Bu canlı, agresif renk, içeriğe bağlı olarak çeşitli anlamlar taşıyabilir, ancak hepsini güç ve yetenekle yapar. Eril için siyahla birleştirin, spor otomobiller için mükemmel, agresif bir his verir. Beyazlar ve altınlarla eşleştirin, sevgi ve tutkudan bahseder. Kızıl ayrıca tehlikeyi temsil eder. Birçok tehlike uyarı tabelasında bu rengi görmemizin nedeni de bu’dur.

• Turuncu

Sıcak, ancak kırmızıdan daha az agresif olan turuncu renklerin kaçırılması zordur; bu da inşaat, güvenlik ve av araç gereçlerinde kullanımını açıklar. Aynı zamanda neredeyse sonbaharda turuncu renginin tonları her bir yeri doldurur. Turuncunun sıcaklığı eğlenceli ve enerjik bir atmosfer uyandırabilir.

• Sarı

Sarı güneşi, sıcaklığı ve yaz mevsimini temsil eder. Aynı zamanda, spektrumdaki en görünür renk, bu yüzden gerçekten size atlıyor.

Güvenlik ekipmanlarında, okul otobüslerinde ve taksilerde görüldüğü gibi beyaz veya siyahla birleştirildiğinde özellikle dikkat çekicidir. Yine de, dikkatli olun, çünkü birçok insan onu rahatsız edici buluyor.

• Mavi

Mavi gök, tropikal ve garip bir şekilde profesyonelleri uyandırır. Su ile uzun süreli ilişkisi göz önüne alındığında, mavinin canlandırıcı ve temizleyici olduğunu düşünüyoruz. Mavinin koyu tonları, ancak üzüntü uyandırabilir.

Sonuçta buna “blues” dememizin bir nedeni var.

• Yeşil

Bitki yaşamının çoğunun rengi olan yeşil, organik, çevre dostu ve sağlıklı ürünler için mükemmel olan, büyüme ve sağlık duygusu taşır. Doğayı yakalamak için maviler ve kahverengilerle birleştirin. Yeşil ayrıca birçok yerde de servet ve finansı temsil eden bir renktir.

• Kahverengi

Web tasarım alanında çok fazla kahverengi görmezsin, çünkü muhtemelen kirlilik anlamına gelen bu rengi web tasarımcılar pek kullanmaz. Ancak, belki de sofistike bir moda sitesi için, dünyevi ve lüks hissi yaratmak istiyorsan bu renk mükemmeldir.

• Mor

Eski Roma’da, yalnızca zenginler mor renk alabiliyordu (boya salyangoz kabuğundan yapılmış). Bu birliktelik, tüm bu yüzyıllar boyunca güçlü kalmaya devam ediyor ve moru lüks markalar için ideal bir renk tonu yapıyor. Kırmızı ile birleştirildiğinde, samimi ve romantik hissedebilirsiniz. Beyazlar ve pembeler ile eğlenceli ve çocuksu olur.

• Beyaz

Beyaz tamamen saflık, masumiyet ve kısırlıkla ilgilidir. Düğün, sağlık, bilim ve maneviyat odaklı siteler göreceksiniz. Ayrıca, taze yıkanmış ve katlanmış çarşaflar gibi bir temizlik ve tazelik duygusu ifade eder.

• Siyah

Siyah güç, lüks, kötülük, ölüm ve bilinmeyeni ima eder. İyilik ile kötülük arasındaki savaş siyahla beyaz olarak temsil edilir. Sadece Darth Vader ve Luke Skywalker’ın akla kazınan kostümlerine bak. (Star Wars hayranlarına selam buradan 🙂 )

Renk Araçları ve Kaynakları

Renk teklifleriyle tasarlanan tüm karmaşıklık ve esneklik tasarımlarıyla, tasarımcıların sürece yardımcı olacak bir dizi araç ürettikleri şaşırtıcı değildir. İşte bizim favorilerimizden sadece birkaçını bu başlık altında toplamaya karar verdik.

Renk Şeması

İki favori palet oluşturucu, her bir rengi manuel olarak seçmene veya bir veya iki renge göre otomatik olarak oluşturmana izin verir.

Colourcode, tek renkli ve tamamlayıcı gibi şema türleri için önceden ayarlanmış modlar özelliği vardır ve burada .scss, .less, bir görüntü olarak şemalarını dışa ya da sadece kendisine permalink edebilirsin. Aynı zamanda eğlenceli bir keşif aracı, faren ekranda hareket ettikçe gölgeler de güncellenecektir.

Eskiden “Kuler” olan Adobe Color CC, aynı zamanda şema türü ön ayarları da içeriyor, ancak COLOURCODE’un sahip olmadığı iki harika özelliği de ekliyor. Birincisi, Renk yerleşik bir sosyal katmana sahiptir, böylece başkalarının paletlerini keşfedebilirsiniz. İkincisi (ve çok daha üstün), bir görüntüden bir renk şeması çıkarma yeteneğidir.

Renk Paleti İlham Siteleri

Mükemmel renk kombinasyonları için ilham kaynağına mı ihtiyacın var? Aşağıdaki siteler, farklı renklerin birlikte nasıl çalıştığını göstermek için görüntüleri ve tasarımları kullanır. Seçimlerine rehberlik etmek için bunları kullanabilirsin.

COLOURLovers , renkler, paletler, desenler ve renklerle ilgili makaleler paylaşan bir renk fanatiği topluluğuna ev sahipliği yapıyor.

Design Seeds, tasarımlarına ilham vermek için renk paletlerinin yanı sıra natürmort ve doğa fotoğrafları sunar. Paletlerini doldurmana yardımcı olmak için ayrıca renge göre de arama yapabilirsin.

Renk Kullanımı İlham Siteleri

Diğer tasarımcılardan ilham almak mı istiyorsun? O zaman bu sitelere kesinlikle göz gezdirmen gerekiyor.

Awwwards, web üzerindeki en iyi tasarımların bazılarının küratörlü örneklerini bir araya getiren inanılmaz bir sitedir.

Dribbble  ve  Behance ise tipografi, illüstrasyon, ürün tasarımı, mimarisi ve web tasarımı arasında değişen tasarım portföy siteleridir. Buralarda muhtemelen daha önce bir hesap açıp kendi tasarımlarını da eklemişsindir. Eklemediysen hemen şimdi elindeki o kahve fincanını bırak  ve gidip bu sitelere üye ol.

Bayanlar Baylar, Renklendirmeye Başlıyoruz

Çık ve tasarımlarını renklendirmek için yeni renk bilgini kullan. Renk, konuklarına belirli bir ruh hali ya da his vermek için güçlü bir araçtır ve marka bilinirliğini arttırmak için kullanılabilir. Muhtemelen bir Coca-Cola işaretini sadece rengiyle, ikonik metnini bırakmadan bile tanıyacaksın.

Renk o kadar önemlidir ki, Starbucks gibi franchise’lar, franchise alanlarının her biri için renk sapmalarına karşı son derece düşük toleranslara sahiptir. Her bir franchise alanın onaylanmış renkler listesinden seçim yapması gerekir. Kafeye açılan kapılar açılmadan önce, merkez ofisinden bir temsilci duvara uygulanan rengin katı toleranslara uyduğundan emin olmak için gelir.

Rengi doğru kullan, siten daha doğal ve bir araya gelecektir. Şimdi temelleri çözdüğüne göre, seni renk teorisine doğru ilerlemeye devam etmeni öneriyorum. Fakat hepsinden önemlisi, doğru kullanılan güzel renk örneklerine baktığından ve pratik yaptığında, uyguladığından emin ol.

Renkli dünyalara doğru yola çık hadi durma!

Web Tasarım Rehberi : Web Tipografisi Hakkında Bilmen Gereken Her Şey

İnternet sitesi tasarımındaki tipografi kullanımı ile ilgili hızlıca anlaşılabilecek bir giriş yapmam gerekirse bir cümle yeterli olacak.

Tipografi(yazı tipi) önemli.

Klasik Tipografik Tarzın Unsurları kitabının yazarı Robert Bringhurst, tipografiyi “insan dilini dayanıklı bir görsel formla donatmak zanaat” olarak tanımlar.

Çoğu durumda, bu görsel formun okunabilir, anlaşılabilir olması ve doğru tonu ayarlaması gerekir. Tipografin bir metni okumayı zorlaştırır veya düpedüz imkansız hale getirirse, ne kadar şaşırtıcı olursa olsun işe yaramaz.

Örneğin kutsal kitaplar… Mavi bir zemin üzerine yeşil Indie Flower fontu ile yazılmış olsaydı düşünsene nasıl bir etki verebilirdir.

Ya da çok etkili bir romanın önemli bir sözünü yazarken…

Ya da ünlü ve herkesi etkileyen bir şiirin bu tarzda yazılmış olduğunu düşün.

İnsanların bunu ciddiye alacağından emin değilim. Bırak etkileneceğinden bile emin değilim.

Bu da bizi tipografide üç temel kavrama getiriyor: ton, okunabilirlik ve açıklık!

• Ton, tipografinin görsel olarak ilettiği, içeriğin kendisinden farklı olan ruh hali veya hissidir. Ton, bir spektrumda gayri resmi ve resmi arasında değişir. Tipografinin mesaj ve marka için doğru tonu ayarladığından emin olmak istersin. Yukarıdaki dizgi bunu güzel bir şekilde göstermektedir. Yazı tipinin genç, eğlenceli hissi, teklifin gravitasyonunu destekleyemez.
• Okunabilirlik, bireysel harf formları (harflerin şekilleri) arasında ayrım yapmanın ne kadar kolay olduğunu tanımlar ve kullanıcı arabirimlerindeki türün ayarlanması için hayati bir husustur.

Örneğin, bazı fontlar büyük I ve küçük l arasında ayrım yapmayı zorlaştırır. (Ne demek istediğimi biliyorsun değil mi?)

Bu genellikle yazı tipi tasarımının bir işlevidir, ancak harf aralığını çok yüksek veya düşük ayarlamak veya tüm büyük harflerde metin ayarlamak gibi belirli tasarım seçenekleri okunabilirliği etkileyebilir.

Okunabilirlik paragraf içeriğini okumanın ne kadar kolay olduğunu tanımlar. Yazı tipinin tasarımı ve boyutlandırma, aralık ve renk dahil olmak üzere kendi tasarım seçenekleriniz tarafından belirlenir.

Tüm bu yönleri daha ayrıntılı olarak ele alacağım, ancak en önemli kararlardan biriyle başlayalım: yazı tiplerinin kendileri.

Milyonlarca Yazı Tipi Var

Tipograflar yazı tiplerini birçok farklı şekilde kategorilere ayırır, ancak aşağıdaki kategoriler web tipografi dünyasında en yaygın olanlardır:

Serif – Basılı içeriğin tartışmasız kralı olan serif yazı tipleri, tek tek harflerin uçlarında (veya “terminalleri”) “serifs” adı verilen küçük satırlara sahiptir.

Örnekler: Times New Roman, Georgia, Droid Serif

Sans Serif – Adından da anlaşılacağı gibi, sans serif yazı tiplerinde serif yok. Web için standart haline geldiler, çünkü erken bilgisayar ekranlarında serifleri keskin bir şekilde oluşturmakta zorlandı.

Örnekler: Arial, Verdana, Droid Sans

Tek Aralıklı – Tek aralıklı yazı tipindeki her karakter aynı genişliği alır. Daktiloların hepsi öfke olduğunda ortaya çıkan bu yazı tipleri, metin editörlerinde kullanımlarından dolayı bir rönesans yaşadı.

Örnek: Inconsolata

Cursive – Cursive yazı tipleri el yazısını taklit eder. Okunabilirlik konusundaki görsel ilgiyi vurgulama eğilimi gösterirler, bu da başlıklar ve başlıklar için vücut metninden daha uygundur.

Örnekler: Indie Flower, Great Vibes

Display – Display yazı tipleri büyük ve kalın veya ince ince olma eğilimindedir ve genellikle oldukça karmaşık harf formlarına sahiptir. Dikkat çekici etkileri nedeniyle, en iyi başlıklarda kullanılırlar.

Örnek: Changa One

Kitaplarda, belgelerde ve web sayfalarında gördüğünüz yazı tiplerinin büyük çoğunluğu serif veya sans serif’dir. (Bu yazı tipografiye yalnızca bir giriş olduğundan, bu ikisine odaklanacağız.)

Her fontun kendine ait bir sesi vardır. Bahsetmeye çalıştığımız yegane şey de budur.

Her fontun profesyonel, eğlenceli, klasik veya agresif bir tonu vardır. Bu, yanlış fontu yanlış yerde kullanmak aptalca sonuçlara yol açabileceği anlamına gelir.

Elbette, belirli bir yazı tipinin özelliği veya kümesi o yazı tipinin tonunu belirlemez. Daha çok bakarken veya okurken duyduğunuz bir his olarak düşünün. Bu nedenle, tipografi araştırmalarınızı birkaç farklı seçenekle başlatmak ve her bir seçeneği bir bağlam içinde test etmek en iyisidir. Her numune için ayrı ayrı kendinize şu soruları sorun: Bu font aradığım tonu veriyor mu? Bu ton içerikle ve yazı tipiyle eşleşiyor mu? Ayrıca kullandığın bu yazı tiplerini hedef kitlen arasında bulunan arkadaşların ile, meslektaşların ve farklı insanlarla da denemek isteyeceksin.

Eşleştirici  Oynamak: Mükemmel Font Eşleşmesini Oluşturmak

Bir sayfada birden fazla yazı tipi kullandığında, nasıl, ne şekilde eşleştirildiğini tahmin etmeye çalışman senin için iyi olacaktır. Bazı fontlar çakışacak, diğerleri ise birlikte (ve bazen kelimenin tam anlamıyla kullanılmış gibi) kullanılmış gibi görünecektir.

Yazı tipi eşleştirmesi (içerik ile yazı tipi eşleştirilmesine denir)  hakkında daha fazla bilgi için, siten için en iyi yazı tipini nasıl seçeceğini düşün ve düşünce tarzınızı incele. Aksi halde, tasarımlarında birkaç farklı eşleştirmeyi dene ve birlikte nasıl göründüklerine bir bak. ‘Typegenius’  bunun için süper kullanışlı olabilir.

Yazı tipi eşleştirme çalışmalarından uzak durma: tasarımlarında en fazla üç farklı yazı tipi kullan. Daha fazlası, insanların görsel mantığını daha fazla meşgul edecektir ve kullanıcıları hiyerarşin hakkında kafalarını karıştırır.

Yararlı Yazı Tipi Kaynakları

Aradığın yazı tiplerini bulmak için birçok kaynağı kullanabilirsin. İnternette şu anda hem ücretsiz hem de ücretli bir şekilde tüm fontları bulabileceğiniz çok fazla yer var. Bunlar arasında en çok sevdiklerimi senin için listeledim.

Typekit

Bu hizmet, web siteleri için çok sayıda premium yazı tipi barındırır ve sunar. Birçok websitesi sistemine çok kolay bir şekilde entegre edilebilir yazı tipleri vermektedir.

Google Fonts

Google Fonts, ücretsiz yazı tipi koleksiyonu, dürüst paylarını içerir, ancak Open Sans ve Alegreya gibi güzel ve esnek mücevherlere de sahiptir. Daha önce de incelediğimiz bu kaynak inanılmaz bir hizmet sunmaktadır. Eğer bu kaynak hakkında detaylı bilgi edinmek istiyorsan yazdığım rehbere bakmak isteyebilirsin.

İlginizi Çekebilir

Google Font Aileleri Hakkında Bilmen Gereken Her Şey

Behance ve Dribbble

Birçok tasarımcı, ücretsiz indirmeniz için kendi harika yazı tiplerini oluşturur ve paylaşır.

Tipografi İçin İlham Alabileceğin Yerler

Typewolf

Bu listede en çok gittiğim kaynak büyük ihtimalle burasıdır.

Typewolf, günlük ilham ve işaretçiler sunarak web tasarımcılarına ve geliştiricilere tipografi konusunda yardımcı olmayı amaçlamaktadır. Büyük, ölçeklendirilmemiş ekran görüntüleri, her tasarımda kullanılan yazı tiplerini açıkça gösterir ve kullanışlı bir şekilde, gerçek web sitelerinde kullanılan yazı tiplerini ve ayrıca yazı tipi hakkında arka plan bilgilerini ve benzer yazı tipleri için kişisel önerileri gösterir.

Typostrate

Tipografi her yerde ve çoğu reklam öğesi gibi, onu tüm görkemiyle görmeyi seviyoruz. Typostrate, tür ve onunla yapabileceğin sonsuz şeyler hakkında bir blogdur. Tipografinin tutkusunu ve gücünü sergileyen blogların içeriği ve resimleri Christian Goldemann ve Michael Zeller tarafından yapılmaktadır.

Fonts.com

Fonts.com, tipografik sanatlar hakkında yararlı ve alakalı bilgiler sağlayan özel bir öğrenme bölümüne sahiptir, ancak artık eskisi kadar düzenli olarak güncellenmemektedir. Burada, türün ve pratik kullanımların temellerinden sayılar, işaretler ve semboller ile yazım teknolojisinin temellerine kadar her şeyi öğrenebilirsin.

Commercial Type

Commercial Type, tasarımcılar Paul Barnes ve Christian Schwartz tarafından kuruldu.

İkili, 2004’ten beri, özellikle ödüllü Guardian Egyptian gibi çeşitli yazı tipi projelerinde birlikte çalıştı. Commercial Type’da Barnes and Schwartz, personeli ve dışarıdaki ortak çalışanlar tarafından geliştirilen çok sayıda yazı tipi tasarımını görüntüleyebilir ve satın alabilirsin.

Beautiful Type

Beautiful Type, 2010 yılında aynı tipografi tutkusunu paylaşan iki web tasarımcısı Francis Chouqet ve Aurélien Foutoyet tarafından başlatıldı.

Bu muhteşem Tumblr bloğu teneke üzerinde söylediklerini tam olarak yapıyor ve inanılmaz tipografi çizimlerini ve web’den ilham verici videoları sergiliyor. Ayrıca harika tasarım ve tür ilgili kitaplara adanmış bir sayfası da var.

Typeverything

Bu sitenin adı gerçekten her şeyi söylüyor. Typeverything, bir avuç yetenekli sanatçı tarafından her şekil ve boyutta, renkte ve stilde yazı yazısı içeren mükemmel bir blog.

Site temiz, düzenli ve kullanımı kolaydır. Yüzlerce ilham verici görüntüleri çekmek için aşağı kaydır.

We Love Typography

Bu tipografi cennetini gerçekten çok ama çok seviyorum.

Tür ile ilgili içeriğin parlak, küratörlüğünde bir galeri olan site, John Boardley ( tipografiyi seviyorum ) ve Kari Pätilä arasındaki bir işbirliğidir. Muhteşem tipografinin birden fazla sayfasıyla, burada ilham bulacağından emin olabilirsin.

WhatTheFont

Hepimiz bir noktada harika bir tasarıma baktık ve hangi yazı tiplerinin kullanıldığını çözemedik. Ve yazı tiplerini tanımlamaya yardımcı olan birkaç site olsa da, MyFonts ‘WhatTheFont uzun zamandır bizim favorimiz oldu; basitçe bir resim yükle, tanımlamak istediğin yazı vurgula ve sana en iyi tahminlerini özetleyerek, satın alma bağlantıları ile tamamlanacaktır.

Hand-picked tales from Aesop’s Fables with hand-picked type from Google Fonts

İsmi çok uzun gelen bu site tüm kaynakların içinde en sanatsal olanıdır.

İsminden de anlayacağın gibi Ezop Masallarından seçilmiş tüm yazı tiplerini Google Fonts kaynağıdan bulmanı sağlayan bu internet sitesi mükemmel bir ilham kaynağıdır. Ara ara girip ilham almayı sevdiğim bir kaynaktır.

Karşıtlık

Belli nedenlerden ötürü, metin ve arka planı arasındaki kontrast okunaklılık için kritik öneme sahiptir.

Ancak okunabilirlik için en iyi renk kombinasyonunun açık gri bir arka plan üzerinde koyu gri metin olduğunu, (saf beyaz (# 000)) saf beyaz üstüne siyahın(#fff) olmadığını öğrenmek sizi şaşırtabilir. Bunun nedeni, sade beyaz zemin üzerine siyah metin, renklerin yansıtıcı ve emici özellikleri nedeniyle ince bulanıklığa ve renklerin karışmasına neden olmasıdır. Ve yüzleşelim, saf beyaz bir süre sonra gözleri zorlayabilir.

Sol: Beyaz zemin üzerine siyah metin. Sağ: Açık gri arka plan üzerinde koyu gri metin.

Sağdaki metni gözlerde biraz daha keskin ve kolay buluyorum.

Cazip olsa da, uzun pasajlar için karanlık bir arka plan üzerine açık metin ayarlamaktan kaçın. Açık renkli metin ışığı yansıtarak hafif bulanıklaşmasına neden olurken, siyah renkli metin ışığı emerek daha canlı hale getirir.

Sağ: Siyah bir arka plan üzerinde beyaz metin. Sağdaki metin sadece biraz bulanıklaştırmakla kalmaz, aynı zamanda biraz retina yakar.

Koyu bir arka plan üzerinde açık tip ayarlamak konusunda ısrar ediyorsan veya bir görüntünün üzerinde metin görüntülüyorsan, arka planı olabildiğince koyu hale getir ve pop yapmak için beyaz metne hafif bir metin gölgesi eklemeyi düşün. Ve göz yorgunluğunu sınırlamak için bu tür geçitleri kısa tut.

Sağdaki metinde hafif bir metin gölgesi eklenmiş ve görüntüyü koyulaştırdım. Soldaki metinden daha iyi, ama yine de harika değil.

• Hat uzunluğuna dikkat et

Satır uzunluğu, metin satırı başına karakter sayısını ölçer. Masaüstü monitörler 30 inç veya daha büyük boyutlara ulaştığından, bu durum giderek artan bir endişe haline gelmiştir.

Ne kadar uzun?

Dizüstü bilgisayar ekranının veya masaüstü monitörünün tüm genişliğini kapsayan bir kitap okumak rahat olur mu? Bence olmaz. Bir yer iminin genişliği olan bir kitabı okumak da rahat olmaz.

Üç satır uzunluğunun karşılaştırması: 45 karakter, 80 karakter ve 120 karakter.

Genel olarak, satır uzunluğunuzu satır başına 45-60 karakterle sınırla; ancak birçok tipograf satır başına 80 karaktere kadar kabul edilebilir.

Bundan daha az olduğunu düşündüğünde okuyucuların satırlar boyunca ileri geri sıçramaktan yorulur. Daha fazla bir şey ve okuyucu yerlerini kaybedebilir. Bir satırın sonundan diğerinin başına giden mekik sistemi gibi düşünebilirsin.

Referans olarak, Google Dokümanlar’da 11 piksel olarak ayarlanan Arial, bu makaledeki gövde metninde olduğu gibi satır başına yaklaşık 80 karaktere kadar çalışır.

Cihaz boyutlarında okunabilirliği korumak, yazı tipi boyutu ile satır uzunluğu arasında bir denge kurulmasını gerektirir. Yazı tipini ne kadar büyük ayarlarsan, satır başına o kadar az karakter alırsın. Küçük cihazlarda, bu satır başına çok az karaktere yol açabilir.

• Yazı tipi ağırlığını izle

Yazı tipi ağırlığı, her bir harfin kalınlığını (veya kalınlığını) tanımlar. Varsayılan yazı tipi ağırlığı 400, kalın yazı tipi ise 700’dür. Çoğu yazı tipinin 100’lük artışlarla 100’den 900’e kadar ağırlıkları vardır, 100’ü süper incedir ve 900’ü süper kalındır.

‍Exo 2, 100 ile 900 arasında değişen ağırlıklara sahiptir. Örnekler Google Fonts’tan alınmıştır

İlginizi Çekebilir

Banner Ads : Dikkatleri Üstünüze Çekmek İçin İpuçları

• Birimlerini doğru yap

Basılı uygulamalarda, insanlar genellikle yazı tipi boyutlarından “noktalar” olarak bahseder, ancak web’de piksel (px) kullanmaya meyillidir. Benzer bir kavramdır aslında.

Ancak duyarlı tasarımlarla, aslında tüm boyut ve boşluk özelliklerini piksel gibi mutlak birimler yerine ems ve yüzdeler gibi göreceli birimleri kullanarak ayarlamak en iyisidir.

Bir em bir ölçü göreceli birimidir (paragrafların 16px varsayılan) Söz konusu HTML öğesinin geçerli yazı tipi boyutunu eşittir. Yani, 2em bu boyutun iki katı olacaktır (varsayılan paragraf için 32 piksel).

Neden mi?

İki nedenden dolayı: İlk olarak, yazı tipi boyutları değiştikçe boşluk aralığı da değişir. Yazı tipi 16 piksel olarak ayarlandığında 24 piksellik bir satır yüksekliği güzel bir şekilde çalışabilir, ancak 32 piksel yüksekliğinde bu yükseklik çok fazla sıkışık olur.

Sol: 16 piksel yazı tipi boyutu, 25 piksel çizgi yüksekliği. Sağ: Yazı tipi boyutu 32 piksel, satır yüksekliği 25 piksel. Aralık gereksinimi yazı tipi boyutuna göre değişir.

İkincisi, göreceli birimler, duyarlı tasarımı (çeşitli cihazları barındırmak için düzeni ve stili değiştirerek) biraz daha kolaylaştırır. Her şeyi temel yazı tipi boyutuna göre tasarlarsan, o temel yazı tipi boyutunu satırın aşağısına değiştirebilirsin ve sitenin geri kalanı otomatik olarak ayarlanır ve sana çok fazla manuel ayar yapmanı sağlar.

Piksel boyutları cihazlarda çılgınca değiştiği için kesinlikle ince ayar yapman gerekecek.

Örneğin, bir iPhone, bir Macbook’ta 16 piksellik bir yazı tipinin yaklaşık % 60 büyüklüğünde 16 piksellik bir yazı tipi görüntüleyebilir; bu da okumayı çok zorlaştırır.

• Web tipografisinde boşluk kullanma

Düzgün boşluk bırakılması içeriği çok daha kolay okunur hale getirir. Yetersiz boşluk, satırların, harflerin veya kelimelerin birlikte bulanıklaşmasına neden olarak sıkışık bir his yaratabilir. Okunabilirliği en üst düzeye çıkarmak için ilgilenmen gereken üç boşluk türü harf aralığı (izleme), satır yüksekliği (satır aralığı) ve sözcük aralığıdır (bunun süslü bir terimi yoktur).

• Harf aralığı (Tracking)

Harf aralığı (veya yazdırma tasarımında izleme ), bir sözcükteki her harf arasındaki mesafeyi tanımlar ve metninin okunabilirliğini artırabilir veya azaltabilir. Tracking (harf aralığı), tüm harfler arasında tek bir mesafe ayarlaması nedeniyle karakter aralığından farklı olduğunu, karakter aralığı ise farklı harfler arasında özel boşluk bırakmayı mümkün kıldığını unutma.

Sol: Varsayılan izleme. Orta: –2px izleme. Sağ: + 3 piksel tracking.

• Kelime Aralığı

Sözcük aralığı, bir cümledeki sözcükler arasındaki mesafeyi belirler. En iyi kelime aralığı, gözü aralarında çok fazla hareket etmeye zorlamadan farklı kelimeleri açıkça ayırt eder.

• Çizgi yüksekliğinden en iyi şekilde yararlanma

Satır yüksekliği ( baskı tasarımında önde gelen ), metnin her satırı arasındaki dikey boşluğu tanımlar ve satır taban çizgisinden satır taban çizgisine (aşağıdaki resimlerdeki kırmızı çizgi) artan ve azalanları yok sayarak ölçülür.

Metin üst ve kırmızıyla gösterilen uzantılarıdır. Yatay kırmızı çizgiye taban çizgisi denir.

Yetersiz liderlik sadece klostrofobik hissetmekle kalmaz, aynı satırı tekrar tekrar okumanızı da sağlayabilir. Hepimiz oradaydık. Buna karşılık, çok fazla liderlik içeriğinizin ayrık görünmesini sağlayabilir.

• Boyut önemlidir

Yazı tipi boyutu göreceli önem taşır, drama oluşturur ve okunabilirliği belirlemede büyük rol oynar.

Büyük şeyler dikkatimizi küçük olanlardan daha fazla çeker. Özellikle de beklenenden daha büyük olduğunda. Normal büyüklükte bir Alman çoban dikkatini çekmeyecektir. Ama küçük bir at büyüklüğünde bir Alman çoban? Kısa sürede Instagram’ın arasında çoğalacaktır.

Okunabilirliği artırır

Hiç 6pt yazı tipinde bir kitap okumaya çalıştın mı? Ben çalıştım.

Kralın Dönüşü: Yüzüklerin Efendisi’ni bu şekilde okudum, inanabiliyor musun?

Gözlerimi her bir satırda o kadar zorladı ki ve ideal aydınlatma dışında bir şey okumak imkansızdı. Neyse ki, 20 yaşındaydım ve gözlüklere ihtiyacım yoktu, ama sevgili büyükanneniz ya da şu an benim yaşamda bir insanın onu okumaya çalışması tam bir işkence olacaktır. Gözlerimin durumunu söylemiyorum bile.

İnternetin paragrafları için varsayılan yazı tipi boyutu 16 pikseldir, ancak internette kullanılan en yaygın boyutlar 12 piksel, 13 piksel ve 14 pikseldir. Daha az şey zor okuma için yapabileceğinden, gövde metni için asla 14 pikselin altına gitmemeni öneririm.

Şimdi tipografinin temellerini biliyorsun.

Herhangi bir harika tipografi örneği yaptın mı? Veya sanatı üzerinde herhangi bir sorun var mı? Onları aşağıdaki yorumlarda görelim ve söz veriyorum bunları dikkate alacağım.

Web Tasarım Rehberi : Öğe Aralığı Nasıl Çalışır?

Web tasarımının en önemli yönü boşlukları anlamaktır.

Bu başlangıç ​​kılavuzunda, eleman aralığının web tasarımı konusunda nasıl çalıştığını öğren. Web tasarımının nüanslarını anlamaya çalışan tasarımcılar bu konsepti rahat bir şekilde kavrayabilme konusunda daha avantajlıdır.

Kutu modeli, sayfadaki tüm öğelerin yapısını, düzenini ve boyutlarını belirleyen şeydir. Bu yüzden birçok site, en çok kodlama uygulamalarını kutu modelini anlamak üzerine inşa etmiştir. HTML ve CSS üzerinde ustalaşmayı düşünmesen bile bu konular hakkındaki düşüncelerini büyük ölçüde değiştirecek ve anlayışını derinleştirecek birçok kaynak internetin her yerinde web tasarımı başlıkları altında görünüyor.

Yararları da bir hayli fazladır: Daha iyi yapılandırılmış sitelerin kodlamaları sayesinde daha iyi yapılandırılmış olması ile sonuçlanır. Daha iyi kod, sırayla, tasarımı kolaylaştırır, çünkü  duyarlı olacak  unsurları mobil cihaz ekranlarının boyutlarına karşılık gelen çeşitli “mola noktaları” oluşturmak, daha doğal ve beklenildiği gibi davranışlar yaratır.

Ancak, bir tasarım uzmanıysan, her şeyden önce zanaatını doğru anlamak, bilmek istersin değil mi?

Hadi başlayalım.

Kutu Modeli

Öyleyse, “kutu modeli” tam olarak nedir? Kısacası, kutu modelinin etkisi, bir web sayfasında gördüğün her şeyin bir  dizi kutudan oluşmasıdır.

Evet, kesinlikle her şey. Yuvarlak köşeli düğmeler bile. Ki bunlar sadece kenarlık yarıçaplı kutulardır!

CSS kutu modeli, belge ağacındaki öğeler için oluşturulan ve görsel biçimlendirme modeline göre düzenlenen dikdörtgen kutuları olarak açıklanır.

Bunun seni korkutmasına sakın izin verme. Bunlar sadece kulağa hoş geliyor diye kullandım. Bu tanımı basit bir Türkçe ile yeniden incelersek:

• Bir web sayfasındaki her öğe (döküman ağacı) dikdörtgen bir kutu olarak düşünülür.
• Bu dikdörtgen kutuların her biri farklı yüksekliğe ve genişliğe sahip olur.
• Bulunabilecek web sayfalarında bu kutuların yan yana nasıl düzenli yerleştirildiğini anlatan kurallar (görsel biçimlendirme modeli) vardır.

Ana sayfandaki gezinti çubuğu bir kutu olabilir mi?

Evet bu bir kutu. Gezinme çubuğundaki bireysel bağlantılara de demeli? Bunlar ayrıca üst kutuda (gezinme öğesi) bulunan kutulardır.

Başlığındaki kahraman imgesi kutu mu? Evet bu bir kutu.

Resmin altındaki resim yazısı? Bu da aynı zamanda bir kutu, kutuların köşelerini görmemenize rağmen, sadece kutunun içeriğini (altyazı metni gibi) görüyorsun.

Ancak, başlık kutusunun yanına başka bir öğe yerleştirip düz bir arka plan rengi vereceksen, bu öğelerin her ikisinin de şekillerinin görünmez kutular tarafından tanımlanan şekiller olduğunu görürsün.

Tamam, anladın: Her şey bir kutu. Hadi bunun ne anlama geldiğini keşfedelim!

Kutu Model Alanları

Her kutu birbirinin üzerine geçen dört ana alandan oluşur. Aşağıda, en içte kalan alanlardan başlayarak en dıştaki  alanlara kadar bunları tanımlayabiliriz:

• İçerik alanı:  Yukarıdaki resme bakalım. Bu, içerik tarafından doğal bir şekilde kullanılan alan, bir elementi oluşturan içeriktir, örneğin bir cümle içindeki kelimeler, bir resim veya bir ana öğenin içinde yer alan alt öğeler gibi içerik tarafından doğal olarak tüketilen alandır. Başka bir deyişle,  içerik alanı  bir elementin ana unsurudur diyebiliriz.
• Dolgu alanı:  Her kutu, isteğe bağlı olarak içerik alanını çevreleyen dolguyu içerebilir. Bu dolgu maddesi, içerik alanı ile elemanın şeklini belirleyen kutunun görünmez sınırı arasında bir mesafeyi zorlar. Örneğin, öğenizde düz bir arka plan renginiz varsa ve öğenin dolgusunu artırdıysanız, içerik alanınızın kenarlarında daha fazla renk dolu alanlar görürsünüz. Başka bir deyişle, arka plan renginin daha fazlası içeriğin bulunduğu alanının dışına taşacaktır.
• Kenarlık alanı:  Kutuyu çevreleyen dış çizginin yani kenarlığın boyutuna denir. Neden düğmelerin bazılarının çizgileri kalın fakat bazılarının çizgileri ince olduğunu biliyor musun? Bu ana hatlara elementin sınır bölgesi denir. Başka bir deyişle, sınırlar, ana içeriğin bulunduğu alana kendini ekleyip belli bir alan kaplar; Kenarlıklar ise bir elemanın genel boyutlarını genişletir.
• Marj alanı:  Kutuyu, komşu elementlerinden ayıran kutunun dışındaki  şeffaf beyaz alandır  . Marj, bir eleman ile çevresi arasındaki boşluğu belirlediği için, marjı elemanları  birbirinden uzağa itmekten sorumlu olduğunu düşünebilirsin. Örneğin, alt kenar boşluğu 20 piksel olan bir eleman, altındaki elemandan 20 piksel uzağa yerleştirilecektir. Negatif marjlar da kullanılabilir ve beklediğin gibi davranırlar: çevreleyen elemanları negatif marjı içeren elemana yaklaştırırlar.

Aşağıda her bir alanın görselleştirilmesi verilmiştir. Bu iç içe geçmiş kutular dizisinin bir web sayfasında görebileceğin normal bir düğme öğesi gibi olduğunu hayal et:

Marjalanı, siparişalanı, Dolgualanı, Içerikalanı

Dolgu alanının hala elemanın içinde olduğuna dikkat et . Elemanın arka planı dolgu alanını  içerecek şekilde uzanacaktır. Buna karşılık,  sınır alanı  ve  marj alanını genişletmek arka plan rengi tanımlanır bu noktayı geçer. Bu kutu modelinin özel bir davranışıdır.

Display

Bir kutunun boyutlarına ek olarak tarayıcı, her bir öğenin yakındaki öğelere göre nasıl görüntüleneceğini de bilmelidir. Bir öğenin CSS kullanmaya ayarlayabileceği dört popüler  görüntüleme türü vardır.

İşte buradalar:

• Blok: Bloğun görüntülenen değerlerine sahip olan bir element yeni bir satırdan başlayarak o satırın bütün genişliğini almasıdır.
• Satır içi:  Öğenin etrafındaki öğelerle aynı çizgide görünür ve yalnızca içeriği, dolgusu ve kenarlık alanlarının ihtiyaç duyduğu kadar yer kaplar. Bir blok görüntüsüne sahip olan bir elementin içerik alanında bloğun değeri, bloğun ana elementinin değerinin %100’ü kadar olmalıdır.
• Satır içi blok:  Yukarıdakiyle aynıdır, ancak öğeye düz satır içi görüntüleme özelliği uygulamanın mümkün olmadığı, keyfi olarak tanımlanmış kutu alanı değerleri verilme özelliği vardır. Bu eklenen yeteneğin değeri, kendi çizgisine zorlamak istemediğiniz elemanlar için dolgu ve kenar boşluğunu tanımlayabilmektir.
• Yok (olmayan şey, ingilizcesi none olarak geçiyor):  Öğe görünmez ve hangi boyutlara ayarladığınızdan bağımsız olarak sayfada boş yer bırakmaz. Bu aslına bakılırsa bir elementin sayfadan silinmesinin elementin tamamen yok olmadığı ve sitenin kodlarında varlığını sürdürdüğünü işaret eder.

Temel kavramları tam olarak kavradığımızdan emin olmak için bu kilit noktaları yeniden tekrarlayalım:

Ekranlı elemanlar : Blok, genişliklerinin ne olduğuna bakılmaksızın, her zaman kendi satırlarına yerleştirilir. Blok elemanları genellikle kaplar, paragraflar, listeler ve başlıklar gibi büyük yapısal / içerik parçalarıdır.

Bu, blok seviyeleri bulunan bir öğenin içindeki içeriğe denir.

Ekranlı elemanlar : Satır içi, paragraftaki sözcüklermiş gibi düşünülebilir. Diğer satır içi elemanlarla satır içi akarlar. Satır içi öğelerin genişlik ve yükseklikleri, iç içeriğine göre tarayıcı tarafından otomatik olarak hesaplanır; satır içi öğenin genişliğini veya yüksekliğini ayarlayamazsınız. Satır içi öğeler genellikle diğer satır içi öğelerin ve metnin yanı sıra bir blok öğesinin içine sığan daha küçük içerik parçalarıdır. Örnekler arasında bağlantılar, resimler ve metin açıklıkları bulunur.

Ekranlı elemanlar : Satır içi blok ayrıca satır içi olarak da görünür; Bununla birlikte, fark bu olup, olabilir bir satır içi blok elemanının genişliği, yüksekliği kenar boşluklarını ve dolgu alanlarını tanımlar. Genel olarak, satır içi blok  yerine  satır içi seçimi yapmanın bir nedeni yoktur, ancak satır içi , web’deki birçok öğenin varsayılan davranışıdır, bu nedenle çoğu tasarımcı, özellikle kutu alanlarını daha fazla tanımlamak zorunda olmadıkça bunu yapmaz.

Genişlik ve Yükseklik

Web için öğeleri boyutlandırma, Photoshop veya Illustrator gibi statik tasarım ortamındaki öğeleri boyutlandırma ile aynı şey değildir. Bir web sayfasındaki öğeler, yalnızca kullanıcının tarayıcı penceresinin boyutuna bağlı olarak boyutlarını değiştirmez, ancak bir öğenin konumunu ve yakındaki öğelerin konumunu da etkileyebilir! Bu kavramı biraz daha inceleyelim.

Ağ üzerinde, bir elemanın boyutları  ana  elemanına göre veya  açıkça ifade edilebilir. İşte fark:

Bir  göreli boyutlandırma  üst elemanın genişliğinin% 50 kadar alacak% 50 kadar bir genişliği olan bir eleman, örneğin, ana genişliğine bağlıdır. Ebeveyn genişliği değişirse, çocuğun genişliği de otomatik olarak değişir!

Bir  açık boyutlandırma (örneğin, bir piksel değeri olarak tanımlamak) ana genişliğine göre ve tam olarak statik değildir. Asla değişmez. Ana öğesinin boyutları değişse veya tarayıcı penceresi yeniden boyutlandırılsa bile değişmez.

Bu  iki tür boyutlandırma için kısıtlamalar koymak da mümkündür. Bunu yapmak için, bir elemanın minimum  ve  maksimum genişliğini ve/veya yüksekliğini belirtirsiniz. Bu, genellikle bir elemanın çok uzun veya çok geniş olmamasını sağlamanın bir yolu olarak göreceli boyutlarla birleştirilir.

Örneğin, bir kutunun ana kutunun boyutunun % 50’sini aldığını, ancak bu değerin 500 pikseli geçmediğini söyleyebilirsiniz. Bu nedenle, 500 piksele ulaşıldığında, genişlemeye devam etmez demektir.

Bu eleman ana elemanın % 50 genişliğine ayarlanmıştır.Bu eleman 300px genişliğe ayarlanır. Bu eleman ana elemanın % 50 genişliğine ayarlanır. Ayrıca 300px minimum genişliğe sahiptir. Tarayıcı pencereni yeniden boyutlandırmayı dene!

Bir öğenin genişlik veya yükseklik değerlerini ayarlamazsanız, öğenin içindeki içeriğe ( içerik alanı ) dayalı olarak değerleri otomatik olarak hesaplanır. Bununla birlikte, blok seviyeli elemanlar için genişliğin varsayılanın ana bloğun kutusunun % 100’ü olduğunu unutma.

Koddaki Kutu Modeli

CSS, web sayfası öğelerinin kutu modeli özelliklerini tanımlamak için kullanılan dilin ismidir. Şimdiye kadar tartıştığımız her şey CSS kullanılarak tanımlandı. Asıl öğelerin kendisi HTML kullanılarak tanımlanır, ancak bu kısa bir süre sonra ele alacağımıza söz verdiğimiz farklı bir makale için bir konudur 🙂

Daha önce belirtildiği gibi, bunlar en yaygın dört görüntüleme özelliğidir:

Kod örneklerimizle devam edelim. Aşağıda, bir eleman için genişlik ve yükseklik boyutlarının nasıl ayarlanacağına örnekler verilmiştir:

Web Tasarım Rehberi : UI Tasarımı Esasları

Bir web sitesi, linkler ile bağlanmış bir grup sayfadan çok daha fazlasıdır. Arayüz, farklı şeylerin, bu durumda bir insan ve bir şirketin veya bir bireyin internetteki varlığının birbiriyle etkileşime girdiği, iletişim kurduğu ve etkilediği bir alan diyebiliriz. Bu etkileşim, ziyaretçi için bir deneyim oluşturur ve bir web tasarımcısı olarak, bu deneyimin olabildiğince iyi bir şekilde ilerlemesini sağlamak sizin görevinizdir bunu unutma.

Ve bunun anahtarı, her şeyden önce ve her zaman öncelikli olarak kullanıcı gibi düşünmekten geçer.

Neyse ki, web tasarımı nispeten yeni bir şey olsa dahi, web tasarımı insan-bilgisayar etkileşimi (HCI) bilimsel çalışmalarına çok şey borçludur. Ayrıca, doğrudan HCI araştırmalarından elde edilen bilgiler ile hazırlanan bu 9 pratik kılavuz, web sitelerini ve uygulamaları tasarlarken kullanıcılarınıza odaklanmana ve onların bakış açısından düşünmene yardımcı olacaktır.

Arayüzlerin işlevselliği düzenine odaklanan arayüz tasarımı, büyük resme odaklanan bir kullanıcı deneyimi tasarımının alt kümesidir: yani sadece arayüz değil, deneyimin tamamı önemlidir bunu unutmayın.

1. Kullanıcılarını Tanı

Her şeyden önce, kullanıcılarının kim olduğunu içeriden ve dışarıdan olmak üzere bilmek zorundasın. Bu, analitik uygulamanın kullanıcılar üzerinde uygulayabileceği tüm demografik verileri bilmek anlamına gelir. Fakat daha önemlisi, neye ihtiyaçları olduğunu ve hedeflerine ulaşmalarının önünde neyin durduğunu bilmek anlamına gelir.

Bu empati seviyesine ulaşmak, istatistiklerin dikkatli bir şekilde analiz edilmesinden fazlasını gerektirir. Web siteni kullanan kişileri tanıman gerekir. Onlarla yüz yüze konuşmak, ürününü (ve belki başka şeyleri) kullanmalarına izin vererek kullanım şekillerini izlemek ve onlara “Bu tasarım hakkında ne düşünüyorsun?” sorusundan daha derine inen ve daha güzel analiz yapabilmeni sağlayacak soruları sormak anlamına gelir.

Hedefleri neler olabilir? Bu hedeflere ulaşmalarının önünde duran nedir? Bir web sitesi zorlandıkları konuları bulup, bu zorlukların üstesinden gelmelerinde veya bu zorlukları çözmelerinde nasıl yardımcı olabilir?

Kullanıcılarınızın senden ne istediğini bilmek zorunda değilsin. Bundan daha derine inmen ve neye ihtiyaçları olduğunu öğrenmen gerekmektedir. Sonuç olarak, arzular sadece ihtiyaçların fazlasıdır bunu bil. Bir kullanıcının derinlemesine gereksinimini karşılayabilirsen, daha temel gereksinimleri de yerine getirirken isteklerini de karşılamış olacaksın.

Elde ettiğin verileri analiz etmekten ve kullanıcılarla konuşmaktan edineceğin bilgiler, insanların arabirimini nasıl kullandıklarından tut, o arabirimde hangi tür içeriği vurgulaman gerektiğine kadar verdiğin her kararın sonucunu, etkisini sana bildirir.

2. İnsanların Hazırlamış Olduğunuz Arayüzün Nasıl Kullandığını Tanımla

Arayüzünü tasarlamadan önce, insanların onu nasıl kullanacağını bilmen anlaman gerekir.  Dokunmatik tabanlı cihazların artan yaygınlığı ile, arayüz tasarımı işi düşündüğünden daha önemli bir endişe kaynağıdır. Sadece Tinder’a bak: Uygulamanın kullanıcı deneyimi tam anlamıyla basit bir tokatlamanın kolaylığı (sağa ve sola kaydırmak gibi) ve dürtüsel olaylar ile tanımlanır.

İnsanlar web sitelerini ve uygulamalarını iki şekilde kullanır: doğrudan (ürünün bir öğesiyle etkileşime girerek) ve dolaylı olarak (ürünün dışındaki bir öğe ile etkileşime geçerek).

Doğrudan Etkileşime Örnekler

• Bir düğmeye dokunarak
• Bir kart kaydırarak(pos cihazları)
• Bir öğeyi parmak ucuyla sürükleyip bırakmak

Dolaylı Etkileşime Örnekler

• Bir fare ile işaret etme ve tıklama
• Anahtar komutları/kısayolları kullanma
• Form alanına yazı yazma
• Wacom tablete çizim (Wacom bir grafik tablet markasıdır. Burada bahsedilmek istenen şey ise grafik tabletin bilgisayara bağlanması ile bilgisayar ile etkileşime girmeden grafik tablete tabletin kalemi ile yaptığın hareketleri kullanarak resim çizmendir. Yani bir ayıgıt doğruydan değil de dolaylı olarak, arada bir araç olarak kullanabilme olarak tanımlanabilir.)

Bazen bir etkileşim fazlasıyla kolay olabilir.

Kullanıcılarının kimler olduğu ve hangi cihazları kullandıkları burada kararlarını derinden etkilemeli, yeri geldiğinde değiştirebilmelidir. El becerisi sınırlı olan kişiler, yani yaşlılar veya başkaları için tasarlıyorsan, kaydırmaya dayanmak istemezsin.

Öncelikli olarak klavye kullanılarak uygulamalarla etkileşimde bulunan yazarlar veya kodlayıcılar için tasarım yapıyorsan, fare ile çalışma süresini en aza indirmek için tüm genel klavye kısayollarını desteklemek istersin, aynı şey çevirmenler için de geçerlidir.

3. Beklentileri Belirlemek

Bir site veya uygulama ile kurulan etkileşimin birçok sonucu vardır: bir düğmeye tıklayarak para harcamak gibi, bir web sitesini istemeden silmek veya büyükannenin doğum günü pastası hakkında aşağılayıcı bir yorum yapmak anlamına gelebilir. Ve ne zaman sonucun bunun gibi olma ihtimali var ise, kaygının da var olduğunu unutmamak gerekir.

Bu yüzden, kullanıcıların bu düğmeye veya düğmelere tıklamadan önce, tıkladıkları zaman ne gibi şeylerin olabileceğine dair bilgi vermeyi sağlaman gerekir. Bunu tasarım ve/veya kopya ile yapabilirsin.

Tasarımla Beklentileri Belirleme

• İstediğin işleme karşılık gelen düğmenin düzgün bir biçimde vurgulanması
• Yaygın olarak anlaşılan bir sembolün kullanılması (örneğin, bir silme düğmesi için bir çöp tenekesi, bir şey eklemek için bir artı işareti veya arama için bir büyüteç gibi) kullanılması
• İlgili anlamı olan bir renk seçmek (“git” düğmesi için yeşil, “durdur” için kırmızı, başlat tuşu yeşil)
• Metin ile beklentileri belirleme
• Temizle düğmesini metin yazma, örnekleme
• Boş durumlarda yönlendirme / teşvik edici metin-örnekleme sağlanması
• Uyarı vermek ve onay istemek

Geri dönüşü olmayan sonuçları olan eylemler için, örnek olarak bir şeyi kalıcı olarak silmek gibi, insanlara emin olup olmadıklarını sormak kesinlikle mantıklı  bir seçim olur.

4. Hataları tahmin edin

Hata insandır; affetmek, ilahi.

Alexander Pope, “Eleştiri Üzerine Bir Deneme” demiştir.

İnsanlar hata yaparlar, ama sonuçlarına katlanmak zorunda kalmamalıdırlar. İnsan hatasının etkisini azaltmanın iki yolu vardır:

• Hataları gerçekleşmeden önce önleyin
• Onları olduktan sonra düzeltmek için yollar sağlayın

E-ticaret ve form tasarımında birçok hata önleme tekniği görüyorsunuz. Tüm alanları doldurana kadar düğmeler devre dışı kalır. Formlar, bir e-posta adresinin düzgün girilmediğini algılar. Pop-up’lar, alışveriş sepetinizi gerçekten terk etmek isteyip istemediğinizi sorar.

Hataları tahmin etmek, olaydan sonra bunları düzeltmeye çalışmaktan daha az sinir bozucudur. Çünkü ortaya çıkmadan önce tatmin edici bir tamamlanma duygusu ile gelip “İleri” ya da “Gönder” butonuna tıklayabilirsiniz.

Bununla birlikte, bazen kazaların gerçekleşmesine izin vermek zorundasınız. İşte o zaman ayrıntılı hata mesajları gerçekten kendiliğinden gelir.

Hata mesajları yazarken, iki şey yaptıklarından emin olun:

Sorunu açıklayın. Örneğin, “İnsanların kolonileşmediği Mars’ta doğduğunu söylemiştin. Hala.”

Nasıl düzeltileceğini açıklayın. Örneğin, “Lütfen buraya Dünya’da bir doğum yeri girin.”

Hata olmayan durumlar için aynı kitaptan bir sayfa alabileceğinizi unutmayın. Örneğin, bir şeyi silersem, ancak geri yüklemek mümkünse, “Çöp Kutunuza gidip Geri Yükle’yi tıklayarak her zaman silinen öğeleri geri yükleyebilirsiniz.”

Kullanıcı hatası öngörme ilkesine poka-yoke ilkesi denir. Poka-yoke, “hata geçirmezlik” anlamına gelen Japonca bir terimdir.

5. Geri bildirimde Bulun

Gerçek dünyada, çevre bize geri bildirimde bulunur. Konuşuyoruz ve diğerleri yanıt veriyor (genellikle). Bir kediyi kaşıyoruz ve mırıldanıyor veya tıslıyor (huysuzluğuna ve kedi tırmalamasında ne kadar emdiğimize bağlı olarak).

Çoğu zaman, dijital arayüzler çok fazla geri vermiyor ve sayfayı yeniden yüklemememiz, dizüstü bilgisayarı yeniden başlatmamız veya sadece en yakın pencereden fırlatmamızı merak ediyor.

Bu yükleme animasyonunu bana ver. Düğmeye bastığında patlayıp geri dönen bir animasyon yap ama çok yüklenme. Sonrasında da ikimizde iyi bir şey olduğuna inandığımızda virtual bir beşlik çak! (Teşekkürler, MailChimp.)

MailChimp, bir e-posta planladığınızda veya gönderdiğinizde geri bildirim ve teşvik sunar.

MailChimp, bir e-posta planladığınızda veya gönderdiğinizde geri bildirim ve teşvik sunar.

Her şeyin hızlı gerçekleştiğinden emin olun. Usability.gov, 1 saniyenin üzerindeki gecikmeleri kesinti olarak tanımlar. 10 saniyeden fazla bir kesintidir bu. Ve ikincisi cömertlik: ABD nüfusunun yaklaşık yarısı için, sıçramaya neden olmak için 3 saniye yeterlidir.

Bir sayfa 5 saniyenin altında yüklenirse, yükleme süresini daha uzun göstereceği için ilerleme çubuğu görüntülemeyin. Bunun yerine, Mac’in meşhur “ölüm fırıldakı” gibi ilerleme anlamına gelmeyen bir görselleştirme kullanın. Sitenizde ilerleme çubukları kullanıyorsanız, yükün daha hızlı görünmesi için bazı görsel püf noktaları denemeyi düşünün.

6. Eleman Yerleşimi ve Boyutu Hakkında Dikkatlice Düşün

İnsan-bilgisayar etkileşiminin (HCI) temel ilkesi olan Fitts Yasası şunları belirtmektedir:

Başka bir deyişle: bir şey ne kadar yakın ve / veya büyükse, imlecinizi (veya parmağınızı) o kadar hızlı koyabilirsiniz. Bunun, etkileşim ve UI Design teknikleri için her türlü etkisi vardır, ancak en önemlilerinden üçü şöyledir:

Düğmeleri ve diğer “tıklama hedeflerini” (simgeler ve metin bağlantıları gibi) kolayca görüp tıklayacak kadar büyük yapın. Bu, tipografi, menüler ve diğer bağlantı listeleri için özellikle önemlidir, çünkü yetersiz alan insanları tekrar tekrar yanlış bağlantılara tıklatacaktır.

En yaygın eylemlerin düğmelerini daha büyük ve daha belirgin hale getirin.

Gezinmeyi (ve arama çubukları gibi diğer yaygın etkileşimli görsel öğeleri) ekranın kenarlarına veya köşelerine yerleştirin. Bu sonuncusu mantıksız görünebilir, ancak doğruluk ihtiyacını azalttığı için işe yarar: bir kullanıcının tıklama hedeflerini aşma konusunda endişelenmesine gerek yoktur.

Öğe yerleştirmeyi ve boyutu düşünürken, etkileşim modelinizi daima aklınızda bulundurun. Siteniz dikey kaydırma yerine yatay kaydırma gerektiriyorsa, kullanıcıları bu olağandışı etkileşim türüne nerede ve nasıl yönlendireceğinizi düşünmeniz gerekir.

7. Standartları Yok Sayma

Son derece yaratıcı türler olan tasarımcılar, şeyleri yeniden keşfetmeyi sevme eğilimindedir; ancak bu her zaman en iyi fikir değildir.

Neden mi?

Bilindik bir etkileşimin veya arayüzün yenilenmiş bir versiyonu “bilişsel yük” eklediğinden, insanların daha önce öğrendikleri bir süreç hakkında tekrar düşünmelerini sağlar. Açıkçası, tekerleği istediğiniz gibi yeniden keşfedebilirsiniz. Ancak sadece tasarımı geliştirirse bu olacaktır.

Bu temel kural, Google Dokümanlar’ın menü çubuğunun neden Vista’dan önceki Microsoft Word’lerle hemen hemen aynı seçeneklere sahip olduğunu açıklıyor:

Microsoft Word’ün Vista’dan önceki menü çubuğu.

Google Dokümanlar menü çubuğu, 2015

Ayrıca Pocket’in birkaç yıl önce Android uygulamalarındaki arşiv düğmesinin yerini neden değiştirmek zorunda kaldığını açıklıyor.

Tek bir düğmeyi Android’in tasarım desenleriyle daha tutarlı olacak şekilde değiştirmek, yeni kullanıcıların % 23 daha fazla Pocket kullanmaya devam etmesini sağladı.

2013 sonbaharına kadar arşiv düğmesi ekranın sol üst köşesindeydi. Android tasarım özelliklerinin “Yukarı” düğmesinin olması gerektiğini söylediği yerdir. Pocket, insanları okuma deneyimine odaklamak ve mevcut bir donanım kontrolünü çoğaltmak istemedi, ancak tutarsız yerleştirme, yeni kullanıcıların, bekledikleri gibi okuma listelerine dönmek yerine, okudukları makaleyi yanlışlıkla kapatmasına ve arşivlemesine neden oldu.

Bu küçük değişiklik ile:  “[yeni kullanıcıların] Pocket’i bu noktadan itibaren % 23 oranında artırma olasılığını artırdı.”

8. UI Design İle Öğrenmeyi Kolaylaştır

Basitlik söz konusu olduğunda, insanlar genellikle Harvard psikoloğu George Miller tarafından “Büyülü Sayı Yedi, Artı veya Eksi İki: Bilgi İşleme Kapasitemize İlişkin Bazı Sınırlar” adlı bir makaleden bahsediyorlar. Makale, insanların sadece 5 ila 9 tutabileceğini öne sürüyor. Herhangi bir güvenilirlik ile kısa süreli bellekte olan şeylerden bahsedilmektedir. Miller kendisi bunu tesadüf olarak nitelendirdi, ama bu kimsenin onu alıntı yapmasını engelleyecek gibi görünmüyor.

Bununla birlikte, daha basit bir şeyin kısa vadede hatırlanması daha kolay olduğu mantıklıdır. Bu nedenle, mümkün olduğunda, bir kişinin UI Design konusunda verimli ve etkili bir şekilde kullanmak için hatırlaması gereken şey sayısını sınırlayın. Bunu, bilgiyi parçalayarak, yani küçük, sindirilebilir parçalara bölerek kolaylaştırabilirsiniz.

Bu fikir, UI tasarımcılarının arayüzlerini olabildiğince basit hale getirmesi gerektiğini belirten Tesler’in Karmaşıklığı Koruma Yasası ile ilgilidir. Bu, mümkün olduğunda basitleştirilmiş bir UI Design arkasındaki uygulamanın karmaşıklığını maskelemek anlamına gelebilir. Bu yasaya uymayan bir ürünün popüler bir örneği Microsoft Word’dür.

Çoğu insan Word’de sadece birkaç şey (örneğin, yazarak) yaparken, diğerleri bunu her türlü güçlü şeyi yapmak için kullanabilir. Ancak dünyanın her yerinde herkes, aynı UI ile aynı Word sürümünü açar ve güçlü bir kullanıcı olmayan ortalama Joe’nuzu muhtemelen hiç kullanmayacakları çeşitli seçeneklerden bunalmış olarak bırakır.

Bu, gelişmiş özelliklerin ikincil UI Design içine gizlendiği ilerici açıklama adı verilen bir konsepte yol açtı. Bunu genellikle, kısa kopya parçalarının bir ürün veya özellik tanıttığı web sitelerinin ana sayfalarında görür ve ardından kullanıcıların daha fazla bilgi edinebilecekleri bir sayfaya bağlanırsınız. (Bu aynı zamanda, güçlü navigasyonun her zaman zorlu olduğu mobil tasarım için en iyi uygulamadır.)

9. Karar Vermeyi Basitleştir

İnternetin çok büyük bir kısmı bize haykırıyor: “Banner’lar” aniden tam ekran reklamlar olacak şekilde genişliyor. Yardımcı Fiiller ortaya çıkıyor ve henüz okuma şansımız olmayan bloglara abone olmanızı ister. Video geçiş reklamları bizi raylarımızda durdurarak, değerli saniyeleri yavaşça işaretlememize zorlar.

Bazen daha sakin bir ağ isterim ve Hicks Yasası bize bir tane oluşturmak için bir sebep verir. Fikir nihai sonuç kadar basittir: bir kullanıcıyı ne kadar çok UI Design seçeneği sunarsanız, karar vermeleri o kadar zorlaşır.

Bu neredeyse inşa ettiğimiz her şeyi etkiler:

• Genel düzenler
• Gezinme menüleri
• Fiyatlandırma sayfaları
• Blog dizinleri
• İçerik özet akışları

Liste böylece devam ediyor.

Ancak sonuç şu ki: Tasarımlarımızı ne kadar basit yaparsak, kullanıcıların karar vermelerini istediğimiz kararları vermeleri o kadar hızlı ve kolay olur. Bu yüzden açılış sayfalarının ve bülten dışı e-postaların yalnızca bir harekete geçirici mesajı olmalıdır.

10. UI Design Sayesinde Verileri Dinle

Hepimiz tasarımlarımızın sadece sanatsal değerlerine göre değerlendirilmesini isteyebiliriz, ancak gerçek şu ki, tasarımınızı amacına uygun şekilde optimize etmek de aynı derecede önemlidir.

Hepimiz tasarımlarımızın sadece sanatsal değerlerine göre değerlendirilmesini isteyebiliriz, ancak gerçek şu ki, tasarımınızı amacına uygun şekilde optimize etmek de aynı derecede önemlidir.

Kullanıcı araştırması ve testi, tasarım kararlarınızı sitenizin hedefine ulaşmaya yönlendirmede inanılmaz derecede yardımcı olabilirken, lansmandan sonra toplanan veriler paha biçilmez kalmaktadır.

Bu nedenle siteniz için analizler oluşturun ve bunları düzenli olarak analiz edin. Orada bir dizi farklı analiz aracı var, ancak proje türüne bağlı olarak Google Analytics veya Mixpanel’i öneriyoruz.

Mixpanel etkinliklere odaklanır, bu nedenle bir ziyaretçinin sitenizde gerçekleştirdiği işlemlere dayalı olarak veri toplarken, Google Analytics daha davranışlıdır ve oturum süreleri, trafik kaynakları vb. Verir. Her iki araç da her iki veri biçimini sunsa da, odak alanlarını seçin, bu yüzden ihtiyaçlarınıza en uygun olanı seçin.

Tamam, temelleri oturttun.

Şimdi ilerle ve muhteşem, kullanışlı arayüzler yap. Web tasarım, dünya çapındaki yorumlarında, gördüğün UI tasarım örneklerini en iyi ve en kötü şekilde paylaşmaktan çekinme.

Web Tasarım Rehberi : Mobil Cihazlar İçin Tasarım

İnternetin mobile yönelmeye başladığını hepimiz biliyoruz. Bunun çok önemli olduğunu inkar etmek fazlasıyla kolaydır. ComScore’un hakkında araştırma yapıp bize sunduğu bu sayıları, asıl noktaya yönlenmemiz için bize yardımcı olur:

• Milyonlarca insanın % 21’i  çevrimiçi olmak için  artık masaüstü bilgisayar kullanmaya ihtiyaç duymuyor.
• Akıllı telefonlara harcanan zaman 2010 yılının sonundan 2014 yılının sonuna kadar % 394 oranında arttı.
• Tabletlere harcanan zaman aynı dönem aralıklarında % 1,721 oranında artış gösterdi.
• Amerikalıların % 75’inden fazlası interneti birden fazla cihazda kullanmaya başladı bile

Pew Araştırma Merkezi’nin 2015 raporuna göre:

• Amerikalıların % 15’inin internete  akıllı telefonlarının dışında pek fazla erişme yolunun olmadığını gösterdi.
• % 10’u evde telefonlarının dışında hiç yüksek hızlı internete sahip değil.

İnsanlar ihtiyaç duydukları anda internette sadece websitelerde, uygulamalarda geziyolar- ne zaman ve nerede uygunsa, bunu yapmayı ihmal etmiyorlar. Bazen de yapmak zorunda kalıyorlar çünkü yapmak  zorundalar. Özellikle web kullanışlı bir telefon ile bir bilgisayara göre çok daha kolay kullanıldığını kanıtlamış bulunmakta gelişmekte olan ülkelerde.

Bu, artık cihazdan bağlam veya niyet çıkartamayacağımız anlamına gelir. Tabi eğer yapabilirsek. Bu yüzden biz tasarımcıların, cihazlarına bakmaksızın insanların ihtiyaçlarını karşılayan web siteleri oluşturmamız gerekiyor.

Tüm platformlardaki tutarlı tasarım ve içerik stratejileri ile insanlara kesintisiz bir deneyim sunabilirsin.

Şimdi, bunun kolay bir şey olduğunu söylemeye çalışmıyorum. Ancak bu ipuçlarını sana yardımcı olsun diye veriyorum.

Duyarlı ve Uyarlanabilir Tasarım

Bu mobil dünyaya uyarlayacağımız bir tasarıma başlarken ilk tercihin şudur: Duyarlı mı yoksa uyarlanabilir bir tasarım mı kullanmalıyız.

Fark ne? Aslında iş her birinin isminde bolca anlam bulunmasında bitiyor.

Duyarlı Tasarım

Yanıt veren web tasarımı (veya RWD), web sitenin görüntülenmekte olduğu cihaza yanıt vermesini sağlamak için yüzde ve ems (veya değer) gibi göreceli ölçümleri kullanır. Başka bir deyişle, web siten aynı kalır, daha iyi bir mobil deneyim için içeriği yeniden yapılandırıldı, yeniden düzenlendi ve yeniden boyutlandırıldı.

Duyarlı olmak, iyi bir iş akışı seçimi yapmamızı sağlar, çünkü esas olarak siten için bir düzen tasarlar, ardından farklı ekran boyutlarını ayarlarsın. Son kullanıcılar için, hangi cihazı kullandıklarına bakılmaksızın aynı siteyi görmeleri de iyidir. Bu nedenle, masaüstü siteden bekledikleri tüm içerik ve işlevler mobil cihazlarında kullanılabilir durumda kalır.

Duyarlı siteler ayrıca altı veya daha fazla kez değil, yalnızca bir kez içerik ve düzen değişikliği yapman gerektiğinden bakımı ve güncellemeleri kolaylaştırır. Ayrıca, duyarlılık gelecek için daha kolaydır, çünkü yeni bir ekran genişliği popüler hale gelirse yeni bir tasarım oluşturman gerekmez.

Bununla birlikte, görüntü optimizasyonu ve medya sorguları gibi şeylere dikkat etmezsen, kendini akıllı telefon kullanıcılarına fazlasıyla gecikmeli bir deneyim sunarken bulabilirsin.

Duyarlı Tasarımın Avantajları

• Cihazlar arasında tutarlı bir deneyim
• Daha kolay bakım
• Gelecek dostu

Duyarlı Tasarımın Dezavantajı

• Uyarlanabilir sitelerden daha yavaş olabilir

Uyarlanabilir Tasarım

Farklı cihazlara cevap vermek yerine, uyarlanabilir web tasarımı (AWD), farklı ortak ekran genişlikleri için benzersiz tasarımları yaratmak için hizmet eder. Dolayısıyla her tasarım, temel deneyiminin bir uyarlaması gibidir (ne olursa olsun).

Birisi siteni görüntülemek için kullandığı cihaza akıcı bir şekilde cevap vermek yerine, AWD kullanıcının hangi tasarımı göreceğine karar vermek için “kesme noktalarını” kullanır. Bu, sitenizi farklı bağlamlar için özelleştirmene olanak tanıyarak sana daha fazla esneklik sunabilir. Ancak, kullanıcıların istedikleri hakkında yanlış varsayımlarda bulunma tehlikesi her zaman vardır. Analytics burada çok değerli olduğunu kanıtladı.

Uyarlanabilir Tasarımın Avantajları

• Hızlı performans
• Farklı cihazlar için özelleştirilebilme özelliği

Uyarlanabilir Tasarımın Dezavantajı

• Hesaplanması gereken çok fazla sayıda cihaz çeşidi var
• Gelecekte destekleyemez(cihazlardaki bir sonraki büyük gelişmeye karşı, ekran büyüklüğü, ekran çözünürlüğündeki artış vs gibi)

Daima Test Et

Hangi rotaya giderseniz gidin, cihaz için en iyi deneyimi sunduğunu asla varsayma. Gerektiği gibi görünüp performans gösterdiğinden emin olmak için tasarımlarını geniş bir cihaz yelpazesi kullanarak kontrol et. Ve, aynı derecede önemli olarak, bunun için tanımladığın hedefleri yerine getirmesi gerektiğini unutma.

Mobil Kullanıcılar İçin İçerikle İlgili Dikkat Edilmesi Gereken Notalar

Çünkü insanlar mobil interneti çok aktif olarak kullanıyor ve çok sık bir şekilde kullanıyor, işleri yapmak için içeriğini mobil yönden de düşünmek zorundasın.

İşte burada mobil ilk zihniyet ile içerik tasarlarken ve yaratırken aklınızda bulundurman gereken birkaç şey:

Gezinmeyi ve Gezinti Çubuğunu Basit Tut

Cep telefonunda mega menülere yetecek yer yok(ekranları küçük) ve her açıdan çalışması için düşüceli, uyum sağlayabilen bir uygulamaya ihtiyaçları var. Bu nedenle, en fazla içeriği en küçük alana sığdırmak için verilen bu zamana uygun çözümler hızlı ve “hoşça kal, güle güle” garantisi verebilir.

Çözüm: basit tut.

Ana navigasyonunda sitenin en hayati yönlerini vurgula ve ana sayfa içeriğin üzerinden insanlara başka sayfalara yönelmelerini sağlayabilecek seçenekler ver.

Hizmet olarak bir yazılım (SaaS) şirketi için tasarım yapıyorsan, ana navigasyonun şunları içerebilir: Özellikler, Ürünler, Fiyatlandırma / Planlar ve Blog, Öğrenim gibi içerik odaklı bir sayfa.

Hakkında veya Görev veya İşler gibi diğer sayfalar ana içerik alanından bağlanabilir veya altbilgindeki bir bağlantı listesine atanabilir. Bir restoran sitesi mi inşa ediyorsun? Sitenin inşaası Ardından, Menü ve Konum / Saat bilgilerinizi vurguladığınızdan emin ol. Ve lütfen, lütfen menünü PDF olarak sunma.

Büyük bir mağaza inşa ediyorsan, ana navigasyonunu (yol gösterici çubuğu) en soyut kategorilere (örneğin, Erkekler, Kadınlar ve Çocuklar) odaklamak ve insanların alt sayfalarda daha derine inmesine izin vermek isteyeceksin. Ayrıca, araştırmayı belirgin bir seçenek haline getir.

Navigasyonunu basit tutarak, yalnızca daha iyi bir mobil deneyim oluşturmakla kalmaz, siteni her kullanıcı için de basitleştirirsin. Ve bu, temel mesajına ve gerçekten insanlardan aradığın davranışlara odaklanmana yardımcı olacaktır.

Ayrıca düğmelerini parmak dostu bir boyutta tutmayı ve metin bağlantılarının çevresinde yeterli boşluk bırakmayı unutma.

İçeriğini Tutarlı Tut

Dizüstü bilgisayarınızda bir makale başlatıp ardından telefonuna geçmekten çok daha büyük sıkıntılar çekebileceğin şeyler var. Yalnızca içeriğin orada erişilebilir olmadığını keşfetmek için olmalı.

Ve ciddiyim bu “insanlar cep telefonunda okumuyor” laflarından endişe etme. Hiç kimse içeriğini mobil cihazda okumuyorsa, kitleni veya kullandıkları cihazı suçlamadan önce içeriğini suçlamalısın.

Bana inanma BuzzFeed, okuyucuların  mobil cihazlarında uzun süreli hikayeleri okumak için masaüstünde olduğundan daha fazla zaman harcadığını  buldu. Gelişmekte olan ülkelerdeki bir UNESCO mobil okuma çalışması, “Kuzey Amerika’da veya kırsal Etiyopya’da, insanların mobil okumadan hoşlandıklarını, çünkü cihazlarının ‘her zaman orada olduğunu’ ‘- yani heryerde istedikleri zamanda uygun olduğunu buldu.

Şimdi, bir pazarlama sayfasında, herhangi bir özellik veya hep aynı ürün hakkında sonsuza dek devam etmek istemezsin. Bu sadece potansiyel bir müşteriyi kaybetme riskini açığa çıkarır. Bunun yerine, her ürünün veya özelliğin neyi sağladığını hızlı ve net bir şekilde açıklaman, ardından daha fazla bilgi edinmek için bir bağlantı sunman daha iyi olacaktır. İlgilenenler sunduğun bu bağlantıya dokunacak diğerleri kaymaya devam edecek.

Ve tüm bu çalışmaların kitap okumak ve diğer uzun biçimli içerikleri okumakla ilgili olduğunu itiraf etmeden önce. Ancak telefonlarımızda uzun metinler okuyarak daha rahat büyürüz yani telefonlardan yapılacak her türlü okuma ile daha rahat olacağız, daha rahat büyüme imkanı bulacağız.

Mobil Özelliklerden Yararlan

İnsanların ne yaptıkları ya da akıllı telefonlarının tarayıcılarını kullandıkları zaman nerede oldukları hakkında hızlı ve kolay varsayımlar yapamasak da, dışarıdayken de hayatlarını biraz daha kolaylaştırabiliriz.

Mağazaya sahip şirket (örneğin ziyaret edilebilir yerler) için bir site oluşturuyorsan, telefonun konum bilincini kullanarak şunları vurgulayabilirsin:

• En yakın yer
• Açık saatler (özellikle şu anda açık olup olmadığı)
• Güncel teklifler / özel / kuponlar

Açılır pencereler. Ezici çoğunluk olarak onlardan nefret ediyoruz. Yine de her yerdeki pazarlama ekipleri onları seviyor çünkü belki de sadece ne kadar sinir bozucu oldukları bilindiği halde, iyi bir performans göstermeye devam ediyorlar.

Ancak, hepimiz için daha kolay ölçülebilen hedeflerimiz üzerinde kullanıcı deneyimimiz için bir seçim yapma zamanı geldi:

Pop-up’ları öldür.

Telefonunuzda daha önce bir tane Pop-up ile karşılaştıysanız ve daha sonra sizin canınızı sıkmaması için kapatmak amacıyla kaydırmaya çalıştıysan bir deneyim kırıcı açılır pencerenin mobil cihazda ne olduğunu bilirsin. Bu şeyler yüzünden okumak istediğim makaleleri içeren sekmeleri kapatmaya başladım.

Mobil cihazlar için tasarım yaparken neye öncelik veriyorsun?

Web Tasarım Rehberi : Efektif Etkileşimler Nasıl Tasarlanır

Bir web sitesi statik bir broşür diyemeyiz. Animasyon ve etkileşim için her türlü fırsatı bizlere sunar. Ama sadece her şeyi animasyon haline getirebilmen, bunu her zaman yapman gerektiği anlamına gelmez.

İnternet, şimdiye kadar oluşturduğumuz en hızlı gelişen şerlerden biri olan tamamen farklı bir medya biçimidir. Sadece Space Jam gibi bir 90’lar dönemi web sitesi yüklemek ile şu anda bulunduğun, bu yazıyı okuduğun siteyle karşılaştır bakalım.

Çok büyük farklılıklar var değil mi?

Muhtemelen beyaz alanların, tipografi kullanımının, renk ve görüntü kullanımının zaman içinde büyük ölçüde değiştiği ve arttığını fark edeceksin. İyi ki bunlar kullanılmaya başlandı.

İlk bakışta fark edemeyebilirsin ki internet sitelerine hareketli şeyler eklenmeye başlandı. Sayfa öğeleri yerine yerleştirilir. Bağlantılar renkleri değiştirir. Ve düğmeler büyür, parlar ve üzerlerinde gezerken gider ve hareket eder gibi.

Dinamikliğin Gücü

Grafik tasarımcıların çalışmalarından farklı olarak, tasarımların statik değil. Dinamiktir ve insanların kendileriyle nasıl etkileşimde bulundukları ile şekillenir. Web tasarımını farklı kılan şey budur.

Şimdi bu dinamik güce sahip olduğumuza göre, her şeyi döndürmeye, sarsmaya, zıplatmaya ve renklerini değiştirmeye başlamalı mıyız? Kesinlikle hayır. Bu, Powerpoint’teki her slayt ve vurgu noktasına yeni bir ses ve geçiş efekti eklemek gibidir, fazlası can sıkar. Kimse bunu yapan adamı da sevmez genelde.

Asıl soru şudur: Tasarımlarımıza animasyonları ve etkileşimleri nasıl etkili bir şekilde ekleyebiliriz, kullanabiliriz? Hadi bulalım.

Etkili web sitesi animasyonları ve etkileşimleri hakkında bilmen gerken 5 önemli kalite unsuru bulunur.Bunlar:

1. İncelik- Animasyonlar siteyi domine etmemeli, ince olmalı. Ziyaretçiler bu animasyonun gerçekleştiğini zar zor fark etmelidir.
2. Doğal- Animasyonlar, robotik ve sarsıcı olmamalı, müşterilere doğal görünmeli ve hissetmelidir.
3. Bilgilendirici- Tasarımlarını her zaman açık bir şekilde yapmak için her zaman çaba sarf etmek zorunda olsan da, yeni bir şey denediğinde animasyonlar ile bir şeyler arasında ilişki kurmayı sağlamak için ince ipuçları verebilirsin ziyaretçilerine.
4. Nadir- Her şey etrafta dolaşıyor ve dikkat istiyorsa, dikkat çekmeye çalışıyorsa bu hiçbir işe yaramayarak siteyi kapatmalarına sebep olacaktır, fazla ilgi insanı uzaklaştırır.
5. Hızlı- Yavaş animasyonlar, insanların bir sitenin bozuk veya yanıt vermediğini, vermeyeceğini düşünmesine neden olabilir, animasyon hızlarını düzgün bir şekilde ayarla.

Bu noktaların her birini daha ayrıntılı olarak inceleyelim, böylece animasyonlarından ve etkileşimlerinden en iyi şekilde yararlanabilirsin.

Hafifçe Canlandır

İyi tasarım açıktır ve nettir. Harika tasarım ise şeffaf. – Joe Sparano

Tam doğru düzgün olması için yapılan ince ayarları saatlerce süren bir şeyin, bir işin saniyeler içinde sindirilebiliyor olması beni her zaman şaşırtıyor ve şaşırtmaya devam ediyor.

“Bu harika. Ne zaman başlatabiliriz? ”

Saatler harcanan o işe sadece baktılar ve saniyeler içinde beğendiler bile. Düşünmelerini gerektirmedi, onlarca saate birkaç saniye…

Ancak bu, saatler harcanan o tasarımın ideal sonucudur.  Harika bir tasarım incedir, inceliklidir. İnsanlar hazırladığın o animasyonları bilinçli olarak farketmemelidir bile.

Öyleyse insanların onları farketmesi gerekmiyorsa neden animasyonlar ekleyesin, boşa uğraşmış olmaz mısın?

Anahtar kelime ‘bilinç’dir. Çünkü ziyaretçilerinizin bilinçaltı, zihinleri kesinlikle animasyonları fark eder. Etkili ve ince animasyonlar sitenizin daha iyi hissettirmesini ve daha mantıklı olmasını sağlar. Animasyonlar, içeriği aşırı güçlendirmeden etkileşimi geliştirmelidir sadece.

En iyi tasarımlar insanların yapmaları gerekeni en kolay şekilde yapmalarını sağlamak için yoldan çekilir.

Etkileşimler sitenin, tasarımının tonuyla, estetiği ile eşleşmelidir.

Animasyonların her zaman oluşturduğun sitenin estetiği ve tonuyla eşleşmelidir. Çocuklar için bir site oluşturuyorsan, daha gösterişli ve kabarık, eğlenceli olabilirsin (olmalısın da, hedef kitlene göre düşün). Lüks bir saat markası için ise, ince ve zarif olunması daha fazla müşteri çekecektir.

Hangi animasyonun bir e-ticaret sitesi veya danışmanlık işi için daha iyi olduğunu düşünüyorsun?

Animasyonlar asla doğrusal olmamalıdır. Doğrusal animasyonlar düzensiz, saçma ve garip dururlar. İnsanlara robotları ve makineleri hatırlatıyorlar, yani doğal olmayan her şeyi. Bu tarz animasyonları izlemek aslına bakılırsa biraz rahatsız edici olabiliyor.

Bunun yerine, animasyonlarını ve etkileşimlerini pürüzsüzleştir (animasyonlar kayıp gidiversin) ve sakinlemelerine, gevşemelerine (zaman içindeki hızlarını) izin verin, bunları doğal yap. Örneğin, “Rahat-içeri”(rahat-hazır ol gibi düşünün) bir yavaşlama, yavaşça başlar ve sonuna doğru hızlanarak gider. Bir “rahat-dışarı” gevşemesi aniden, absürt bir şekilde başlar ve ancak sonuna doğru düzgün bir biçimde yavaşlar(doğrusal yavaşlar-lineer). Doğrusal hareketler, animasyon boyunca eşit olarak artan veya azalan bir hıza sahiptir.

“Kolay-içeri-sinüs” gibi daha karmaşık olan animasyonları kullanmak yerine “Rahat-dışarı”, “Rahat-içeri” gibi daha doğal ve akıcı animasyonları kullanın ve onu doğal tut.

Az Miktarda Canlandır

Her şeyin bir çeşit animasyonu varsa, incelikli veya bilgilendirici olamazsın. Bu, her bir animasyonu benzersiz yapman durumunda özellikle geçerli olan bir şeydir.

Örneğin, bir sayfayı aşağı kaydırırken sayfa öğelerini hareket ettirecek animasyonlar yaparsanız, ilkini solmaya başlayan, ikinciyi kayan, üçüncüyü taklalar atan, dördüncüyü de bir dama tahtası yapma.

Hepsini aynı yapman yeterli olacaktır. Eğer çeşitlilik eklemek istersen örnek olarak sayfanın sol tarafından kayarak yine sol tarafta kalacak şekilde elementlerin gelmesini ve başka elementleri de aynı şekilde sağ tarafa uyarlayabileceğini unutma. Benzer unsurları benzer şekilde canlandırman daha iyi olacaktır.

Ve yalnızca insanların bir öğeyle bir şeyler yapabileceklerini düşündükleri olan o öğeye vurgulu bir etkileşim, bir animayson ekleyebilirsin. Bekletilen animasyonlar tıklanmıyor ise, sürükleyemiyor veya o animasyonla bir şey yapamıyorsan kafa karıştırıcı olabiliyor.

Başka bir deyişle, yalnızca ziyaretçilerine gerçekten yardımcı olacağını düşündüğün bir animasyon veya animasyonlar ekle.

İnsanları Sakın Bekletme

İnsanların internette sabrı yok. Sayfa yükleme gecikmesindeki her saniye, müşteri memnuniyetini % 16 azaltır ve  satışları % 7 azaltır. İnsanları bekletmek sitenin karlılığına, kararlılığına zarar verebilir.

Ve site yüklendikten sonra insanlar daha fazla sabırlı olmazlar.

Animasyonların ve etkileşimlerin için bunun anlamı nedir? Hızlı olmalılar, insanları bekletmemeliler.

Ne de olsa, rollover efekti ne kadar çarpıcı olursa olsun, kimse 2 saniye boyunca bir düğmenin üzerine imleci getirip beklemeyecektir.

Tamam, belki bazıları ilk defa olduğu için yapacaktır. Peki ya üçüncü kez yaparlar mı? Veya yirminci kez? O zaman yavaş bir animasyon için hala takdir ve sabır sahibi olacaklarını mı düşünüyorsun?

Aynı durum, Flash kullanılan günlerde oluşturduğumuz karmaşık, çok aşamalı yükleme animasyonları ve tanıtımları için de geçerlidir. Kimse bunların arasından geçmek istemiyor. İnsanlar, ihtiyaç duydukları bilgileri veya istedikleri ürünü bulmak için web’i kullanır ve ardından yaşamlarına devam eder.

Şimdi öğrendiklerin uygulamaya başla ve bir şeyleri canlandır!

Mevcut projelerinden birini açın ve animasyonlarını ve etkileşimlerini geliştirmek için bu ipuçlarını kullanmaya başla. Bir fark yaratacaktır (insanların fikrini almayı unutma).

Doğru yapılan etkileşimler gerçekten de bir siteyi iyi bir durumdan harika bir duruma getirebilir. Daha gerçek ve ilgi çekici hale getirerek web sitelerinin basılı medya üzerindeki üstün gücünden faydalanırlar. Müşteriler ve ziyaretçiler de onları gerçekten sever.

Web Tasarım Rehberi : Yüksek Performanslı Web Sitesi Kurma

Sitenin yeterince hızlı yüklenmediğinden dolayı sitenin umduğun kullanıcıların kaydolmadığını hissettiğin, düşündüğün oldu mu veya bunu düşündün mü?

Ziyaretçilerinin % 47’si sitenin iki saniye boyunca yüklenmesi için bekler ve üçüncü saniyeden sonrasında uzun sürdü diye % 40’ı ayrılır. Her saniye gecikmesi müşteri memnuniyetini yaklaşık % 16  azaltır ve satışlarını % 7 azaltır.

Açıkça söylemek gerekirse, performans bir web sitesi şaha kaldırabilir veya yok edebilir.

Sitenizin hızını arttırmanın ve bu sayede müşteri memnuniyetini, elde etme ve geri bildirimleri iyileştirmenin iki kusursuz yolu vardır:

Hazırladığın sitenin boyutunu azalt, daha büyük bir sitenin indirilmesi haliyle daha uzun sürer.

Daha hızlı hosting kullan; daha hızlı ve daha iyi yanıt veren bir sunucu, enter tuşuna basıldığında (veya bir bağlantıyı tıklatarak) ziyaretçinin tıklaması ile yüklenme arasındaki toplam süreyi azaltır.

Bu makalenin asıl amacı sana hazırladığın sitenin toplam dosya boyutunu nasıl azaltacağını ve kaydırma performansını nasıl artıracağını öğretmek.  Web performansı söz konusu olduğunda ele alabileceğimiz birçok potansiyel teknik bulunur, ancak biz tasarımcılar için en büyük etkiye sahip olanlara odaklanacağız. Neyse ki, bu gelişmeler 30 dakikadan daha kısa bir sürede yapılabilir.

Mevcut tekniğin ve uzmanlığın ne olursa olsun, bu basit kılavuzu okumak, sitenin yüklenme hızını ve ziyaretçilerini elde tutma oranını belli bir miktarda artırmana yardımcı olacaktır. Hadi başlayalım.

Sitenin Boyutunu Küçültme

Bir web sayfasını hızlandırmak için en önemli tek teknik onu sahip olduğu veriler bakımından daha küçük hale getirmektir. Daha az içeriğe sahip olmaktan değil, sitenizin içeriğinin kullandığı kilobayt sayısını, akan verileri azaltmaktan bahsediyorum.

Bir web sayfasını görüntülemek için, bilgisayarının tarayıcı yardımıyla görüntülenecek öğeleri indirip, ilgili tüm dosyaları kullandığın tarayıcıda gösterebilmesi gerekir. Bir kullanıcının indirmesi gereken kilobayt ne kadar fazla olursa, haliyle siteyi yüklemek o kadar uzun sürer.

Sitenin dosyalarının boyutunu nasıl azaltırsın? Görüntüleri optimize ederek, metin dosyalarını en aza indirerek ve siten daha küçük ekran boyutlarında görüntülenmesi için daha küçük resimler kullanarak. O zaman siteni gereksiz verileri temizleyen bir diyete sokmanın zamanı geldi demektir.

Görüntüler (Resimler)

Görüntüler, sitenin dosya boyutu kullanımının büyük çoğunluğunu oluşturur ve boyutlarını azaltmak için görüntüleri optimize etmek, sitenin birkaç kat daha hızlı yüklenmesini sağlayabilir. Performans optimizasyon çabalarının çoğuna odaklanman gereken yer burası olmalıdır.

Fotoğraflarını maksimum kalitede ve 5000 piksel genişliğinde tutmak istediğini biliyorum, çünkü modelinin yüzündeki tek tek gözenekleri böyle görebiliyorsun ancak bu dosya 10 MB’nin üzerinde ve bu nedenden ötürü sitenin yavaşlamasına neden oluyor.

Sayfanın tamamında bulunan bir arka plan görüntüsü için bile, görüntünün kalitesini %1 veya %2 düşürerek veriden tasarruf edip yinede neredeyse yine muhteşem gözükmesini sağlayabilirsin. Örneğin, bu gönderinin başlık resmi (üstte bulunan resim) yalnızca 15Kb’dır.

Peki resimlerimin boyutunu nasıl azaltabilirim?

Birinci adım, görsellerini Photoshop’ta açmak ve ardından Dosya> Web İçin Kaydet tuşuna basmaktır. Bu, görsellerini daha düşük dosya boyutları için optimize etmek amacında, yapılması gereken her şeyi içeren özel bir panel açar. ( Aşağıdaki JPEG bölümündeki örnek bir fotoğrafa  bak.)

Görselinin çözünürlüğünü, sitede göstereceği boyutları resme atayarak başla. Görüntüyü yalnızca 600 piksel genişliğinde görüntülersen, neden 1600 piksel de tutmaya devam edesin?

Görsel, kesin ve boyut avantajlarını yararlanmaya başla; genişliğinin yarısı kadar olan bir resimin sahip olduğu veri, boyutunun yarısından daha az olacaktır. Resimlerinin yüksek çözünürlüklü ekranlarda (Retina, 4K, vb.) keskin görünmesini sağlamak için boyutu iki katına çıkarabilirsin (Retina, 4K, vb.), Ancak daha yükseğe gitmene gerek yok.

Benden sonra tekrar et: Çözünürlük arttıkça dosya boyutu da artar! Asıl konu bu!

Görselin çözünürlüğünü düşürmenin yanı sıra, dosya boyutunu başka nasıl azaltabiliriz?

Birincil yol, görüntüyü iş için en iyi dosya biçimine dönüştürmek ve  ardından görüntü netliğini önemli ölçüde feda etmeden görüntünün kalitesini düşürmektir (hala resmin veri kullanımını azaltmaya çalışıyoruz). Bunları sadece birkaç fare tıklamasıyla yapman oldukça kolaydır.

JPEG, GIF, PNG ve SVG, internette kullanılan dört ana resim dosyası formatıdır ve her birinin kendine özgü kullanım alanları vardır. Onları gözden geçirelim ve onları nasıl optimize edeceğimizi öğrenmeye çalışalım.

• JPEG

JPEG, dijital kameraların kullandığı ana dosya türüdür. “Kayıplı” bir görüntü formatıdır, yani görüntünün dosya boyutunu büyük ölçüde azaltmak için görüntü verilerinde basitleştirmeler yapılır ve resmin boyutu azaltılır. Bu yapılırken tabii ki görüntü kalitesi de düşer (ayarlarınızın ne olduğu pek önemli değildir). Boyut ve netlik arasında denge kurmak için, görüntünün kalitesini 1-100 arasında bir ölçekte ayarlama seçeneğin vardır.

(JPEG için) Web paneli için Photoshop’un Dosya biçimini, kalitesini, çözünürlüğü ve bulanıklığı ayarlayın ve ardından yapılacak optimizasyondan sonra nasıl görüneceğini önizle.

Akıllıca uygulanan kayıpları nedeniyle, JPEG dosyalarının diğer formatlara göre dosya boyutu avantajları olarak önemli bir yeri vardır, bu yüzden JPEG’leri sitenin görsellerinin % 90’ı için kullanabilirsin (bence kullanmalısın). PNG’ler ve GIF’ler, yalnızca renk sayısını ciddi şekilde sınırladığında daha küçük olur.

Bununla birlikte, yine de güzel görünen ve kabul edilebilir çözünürlükte olan resimleri kullanmak istediğini unutma; bu nedenle kalite çizgin konusunda fazla çılgına dönme. Genellikle 30 ila 60 arasında bir JPEG kalite yüzdesinin görüntü netliğini ve dosya boyutunu güzelce dengelediğini tespit ettim. Yardımcı programları kullanarak resimleriniz ile oynayın ve kendi resimleriniz için en iyi olanı gör.

JPEG’ler maalesef şeffaflığa, saydamlığa izin vermiyor. Ne anlama geliyor? Örneğin, bir görüntünün arka planının saydam olmasını, böylece arkasındaki alanın, resmin, arka planın renginin gözükmesini istediğini söyle. Bunu JPEG ile yapman mümkün olmazdı. Bunun yerine,  JPEG dosyalarında logonun arkasındaki boşluk varsayılan olarak beyaz yapılır. Saydam bir arka plana sahip olmak için, bir PNG veya GIF kullanman gerekir. Bu nedenle şirket logoları genellikle PNG ve GIF dosya formatlarında kaydedilir.

Gri arka plana karşı iki görüntü aşağıdadır:

Üstteki resim saydam bir arka plana sahip bir PNG’dır, böylece gri arka plan logo etrafında görülebilir. Sağdaki resim saydamlığı olmayan bir JPEG. Arka planının varsayılan olarak beyaz olduğuna dikkat et.

• GIF

GIF aynı zamanda kayıpsız bir formattır (yaratılırken hiçbir görüntü bilgisi kaybolmaz) ve forumlar arasında ve İnternet notları boyunca her yerde bulunur. GIF şeffaflığa izin verir, ancak en büyük avantajı animasyonlara izin vermeleridir(uzun süreli olmamak kaydıyla sürelerle). GIF’ler en çok komedi veya açıklayıcı amaçlarla “mini videolar”(Türkiye’de ise hareketli resimler) olarak kullanılır:

“Mini videolar” terimini kullanırken kendimi biraz tuhaf hissediyorum, ancak bunu en iyi şekilde nasıl tanımlayacağımı bilemiyorum.

GIF’ler genellikle grenli ve garip renkte görünür, çünkü tasarımcılar genel olarak toplam GIF renk sayısını 2 ile 256 arasında sınırlandırmıştır. Renk sayısının azaltılması dosya boyutu açısından büyük tasarruf sağlayabilir. Bu nedenle, GIF oluştururken, görüntünün netliği çok fazla önemli değilse, dosya boyutunu azaltmak için renk sayısını olabildiğince azalt!

• PNG

PNG kayıpsız bir formattır ve tüm web görüntü formatlarının en yüksek görüntü kalitesine sahiptir. Daha önce belirtildiği gibi, PNG’ler şeffaflığı destekler ve bu onları sitende belli başlı yerlerde kullanmak istemenin temel nedeni olacaktır.

PNG’ler iki alt formatta ile gelebilir: PNG-24 ve PNG-8. PNG-24 en yüksek kaliteki PNG resmidir, PNG-8’ler de GIF’lerde olduğu gibi görüntünün renk sayısını azaltarak resmi daha küçük boyutlara indirger,yani boyut düşürmeye izin verir. Bu nedenle, bir resmin oluşturulması için sadece birkaç renk gerekiyor ise (örneğin, çiçeğin ayrıntılı bir fotoğrafının yerine basit bir şirket logosu) PNG-8 kullanmanız resmin boyutunu azaltman için daha iyi olacaktır.

Renk miktarını göze çarparak zaman geçirmek yerine, TinyPNG gibi basit sürükle ve bırak araçlarını kullanabilirsin. TinyPNG, PNG resmini otomatik olarak PNG-8’e dönüştürür ve görüntünün pek kullanmadığı renkleri resimden kaldırır. Bu işlem, saydamlık veya görüntü kalitesinden ödün vermeden PNG’lerin boyutunu % 80’e kadar azaltabilir(bu çok büyük bir oran). Ziyaretçileriniz aynı güzel resimleri görmeye devam edecek, ancak daha hızlı indirecekler (performans↑↑) .

• SVG

SVG, aslında vektör grafikleri olduğu için diğer üç biçimden tamamen farklı bir kategoridedir. Dosya türü tasarımcıları genellikle Adobe Illustrator veya  Sketch uygulamasında birlikte çalışır.

Onları diğer uygulamalardan farklı kılan nedir? Bir SVG’yi orijinal boyutunun birkaç katı kadar genişletebilirsin ve orijinali kadar keskin olacaktır. Ayrıca dosya boyutu olarak inanılmaz derecede küçükler, yüksek çözünürlüklü (örneğin Retina veya 4K) ekranlarda mükemmel şekilde görüntüleniyorlar ve hatta CSS kullanarak bunları özelleştirebilirsiniz bile! Onları buyara tıklayarak nasıl kullanacağın hakkında daha fazla bilgi edin.

Bütün bunlar nasıl mümkün olabilir? Özel olarak tanımlanmış piksellerden oluşan diğer görüntülerin aksine, vektör grafikleri (SVG’ler), XML’de (HTML benzeri bir işaretleme dili) oluşturulan bir dizi şekilden oluşur. Tipik bir görüntüyü ölçeklemek, altta bulunan pikselleri tamamen çirkin görkemleriyle ortaya çıkarır, ancak bir SVG’yi ölçeklendirmek temel şekilleri, pikselleri mükemmel bir şekilde korur.

Ancak her görüntü için mükemmel bir çözüm değildir. SVG’ler genellikle bir şirket logosu, bir UI simgesi veya basit bir çizim gibi, kullanım durumlarına göre değişebilen, sadece birkaç rengin kullanıldığı görseller olarak basitleştirilebilir. Dolayısıyla, sizler bu SVG formatını fotoğraflar için kullanamazsınız, ancak bu formatı kullanarak çok havalı, hareketli arayüz elementleri oluşturabilirsiniz çünkü onlar CSS ve JavaScript programlama  dilleri yardımı ile kontrol edilebilir resim türleridir!

Bir SVG oluşturmak için Adobe Illustrator  veya  Sketch gibi bir vektör grafik tasarım programı kullanman gerekir. Bir SVG görüntünün dosya boyutunu Illustrator’un yapabileceğinin üstünde ve ötesinde küçültmek için SVG Doktoru gibi akıllı bir araçları kullanmayı ihmal etme.

Farklı Cihazlar İçin Farklı Görsel Boyutları Kullanma

Keskin görünmesi için 3 inçlik bir telefonun 32 inç monitör kadar büyük bir görüntüye sahip olması gerektiğini düşünüyor musun?

Cevap hayır! Kesinlikle hayır. Muhtemelen telefona sunulan görüntünün çözünürlüğünü önemli ölçüde azaltabilir, ancak yine de keskin görünmesine sağlaman mümkün ve bunu yapman ile dosya boyutu tasarrufun çok büyük olacaktır.

Mobil cihazlar genellikle nispeten yavaş olan 3G / 4G bağlantılarına dayanır; bu nedenle, dosya boyutu tasarrufu çalışmaların, siteni mobil cihazlarda ziyaret eden kişilerin yaklaşık % 50’si için çok daha önemli hale gelir. Ve unutma, bu ziyaretçiler muhtemelen sınırlı veri planları ile de çalışıyorlar.  500Mb sınırını geçme, bir takım elbise giymiş bir köpek fotoğrafı tamı tamına 10Mb’dır!

CSS medya sorgularını kullanarak, sitene erişilen çeşitli cihaz ekranı boyutları için aslında farklı bir arka plan görüntüsü sunabilirsin. Bu, görsellerin birkaç farklı boyutta kaydetmen gerektiği anlamına gelir. Bu işlem fotoğraf başına sadece birkaç saniye daha sürüyor.

CSS ve JavaScript’i Küçült

Görüntüler, diyete dahil edilebilecek tek tasarım öğesi türü değildir; küçültme yoluyla sitenin metin dosyalarının boyutunu da önemli ölçüde azaltabilirsin.

Küçültme, bir dosyadaki karakter sayısını azaltma işlemidir (bu yalnızca CSS ve JS dosyaları için geçerlidir). Dahili olarak, küçültme motorları boşlukları kaldırarak (boşluklar ve satır sonları) ve daha uzun sözcükleri daha kısa sözcüklerle değiştirerek çalışır. Bunu, kodunuzun son davranışını değiştirmeyecek şekilde yapar.

Oldukça temiz. Minifiers genellikle dosya boyutu küçültmede % 60’ın üzerinde bir performans gösterir, yani dosyalarınızı optimize etmeni sağlar.

Daha Hızlı Barındırma

Bir siteyi küçültmenin ötesinde, bir sitenin yükleme hızını arttırmanın iki yolu vardır:

• Daha hızlı bir internet bağlantısı olan siteyi ziyaret et
• Siteyi daha hızlı bir hosting sağlayıcısında ev sahipliği yap

Tüm site ziyaretçilerinin İnternet bağlantılarını yükseltmek gibi bir gücün olmadığı için, daha hızlı bir hosting sağlayıcısı bulmak zorunda kalırsın.

Sana teknik bir söylemden kurtarmak için işte özeti: Ziyaretçilerinin yaşadığı alanlarda stratejik olarak dağıtılan hızlı sunucular istiyorsun. Niye olabilir sence? Sunucu ziyaretçilerine ne kadar yakınsa siten o kadar hızlı yüklenir (mesafe hızı etkiler). Bu nedenle, müşterilerin dünya çapındaysa, sunucuların da öyle olmalıdır.

Bu amaçla en iyi barındırma sağlayıcılarından biri, dünya genelinde 11 bölgeye dağılmış yüksek performanslı sunucular sunan Amazon AWS’dir. AWS’ye muhteşem bir rakip olarak DigitalOcean gelir(daha az bölgeye sahip olmalarına rağmen). Hem Amazon hem de DigitalOcean, daha küçük butik web sunucularına göre çok daha hızlı ve daha iyi dağıtılmıştır, ancak web sitelerinin kurulumunda daha fazla teknik uzmanlık gereklidir.

Bonus: Yerinde Optimizasyonlar

Performans bulmacasının sayfa indirme hızı ile ilgisi olmayan ve site içi sayfa performansı ile ilgisi olan son bir bölümü daha var ve bu bölüm diğerleri kadar önemli. Siteni birisi kullanmaya çalıştığında, sitenin anında yüklenip yüklenmemesi veya titremesi önemli değildir. Asıl sinir bozucu olan şey yükleme hızıdır. Yükleme hızı yalnızca ilk başta can sıkıcıdır, ancak gecikmelerin bolca olduğu bir göz atma sayfası tüm gezinme deneyimi boyunca can sıkıcıdır, sinir bozucudur.

Sayfa yüklendikten sonra bile sayfanı nasıl düzgün tutabilirsin? Hepsi bilgisayarın yapması gereken işlem miktarını sınırlamakla ilgili. Öncelikli olarak bu, animasyonları sınırlandırmak ve kullanıcı arayüzünü geliştirmek demektir:

Animasyonlarda çok ağırlık verme. Animasyonlar çok fazla işlem ve grafik gücü gerektirir ve ciddi gecikmelere neden olabilir.

Görüntüleri olabildiğince canlandırmaktan kaçın. Onları oraya serpebilirsin, ama lütfen bu işi de abartma. Animasyonlar çok fazla çalışma gücü gerektirir ve animasyonlu resimler katlanarak daha fazla çalışma gücü gerektirir! Özellikle mobil cihazlarda olmak üzere, tarayıcıların bu tür işleri toplu olarak  yapmaları onları zorlanmaları demek olabilir, yani gecikmeler demek olabilir.

Çok fazla arka plan malzemesi kullanma, kutu gölgesi ve metin gölgesi eklerken dikkatli ol. Bunlar, tarayıcının çalıştırması için aynı derecede yoğun olan “sahte görüntüler” formlarıdır.

Beni yanlış anlama. Ben demiyorum ki animasyonları kullanma. Demek istediğim sadece onların kullanımını çok abartmak konusunda dikkatli olman.

Şimdi ileri git ve ‘Hız Seninle Olsun’!

Şimdi, web sitelerinin hızını geliştirmek için en iyi yöntemlerle donatılmış bulunuyorsun, ancak ileri gidip onları uygulamaya geçirmediğin sürece, bir şeye uyarlayıp denemediğin sürece her şey yolunda gitmeyebilir! Deneyip öğrenmen gerekir!

Web Tasarım Rehberi : Dönüştürülebilen Açılış Pencereleri Nasıl Tasarlanır

İşte sonunda başardın. Bilgisayar başında uğraş verilen onca ay sonunda asgari düzeyde uygulanabilir bir ürünle oluşturdun. İşte şimdi bu ürünü Dünya’ya salma zamanı.

Siteyi başlattın ve pazarlama makinesini ateşledin. Tweet attın. Paylaştın. “ Etkileyici unsurları” e-posta ile gönderirsin artık. Facebook, Twitter, LinkedIn ve Adwords için reklamlar düzenlersin!

Ve hiçbir şey. Çıt çıkmıyor. Senin kullandığın analitik programından gördüğün kadarıyla 10 000 ziyaretçi arasından sadece 5 yeni kullanıcı olduğunu gördün.

Ne olmuş olabilir? Ne yanlış gitmiş olabilir? Merak etmeye başladın. İnsanlar ürününden kesinlikle yararlanabilir, işlerine yarayabilir bir ürün bu, ancak siteye kayıt olmuyorlar.

Cevap, açılış sayfanda saklı. Belki kafa karıştırıcı, sıkıcı veya düpedüz korkutucu. Sebep ne olursa olsun, bu işini bozdu. Bakalım nasıl düzeltebilirsin.

Başarılı Açılış Sayfalarının 7 Öğesi

Hiç kimse muhteşem ürününün web sitesine kaydolmuyorsa, sorun açılış sayfanda yatmaktadır. Neyse ki, binlerce şirket tarafından oluşturulan ve dikkatli analizle eşleştirilen milyonlarca açılış sayfası, başarı için bir formül oluşturdu.

Yüksek dönüşüm sağlayan açılış sayfalarının öğeleri şunlardır:

1. Ayrıntılı, ama özlü örnekleme- ürününün ne olduğu, yaptığı, neden önemli olduğu ve ziyaretçilerine nasıl yardımcı olacağı konusunda net ol. İnsanlar anlamadıkları bir şey için para ödemeyecekler. Ama para ödeyecekleri bir şey için bile olsa öncesinde bir makale okumak zorunda kalmak istemiyorlar.
2. Harekete geçirme çağrılarını (CTA’lar) temizle – harekete geçirme  çağrıların (düğmeler ve bağlantılar) hem görsel olarak belirgin olmalı hem de anlam açısından net olmalıdır, böylece insanlar ne yapmayı beklediğini bilir.
3. Hakiki ton – Kulağa aynı bir anahtar kelime robotunun insanları korkutarak uzaklaştırarak ürününün ucuz görünmesini sağlamak gibi gelebilir. Konuştuğun gibi yaz lütfen.
4. İçeriği ilgi çekici hale getirmek  – insanlar büyük metin bloklarından sıkılır ve bunlardan korkarlar. İlgi çekici ve okunması kolay kopyalar, listeler, görüntüler ve veri görselleştirmelerini kullanmak konusunda dikkat et.
5. Sosyal kanıt  – acaba büyük bir şirket ismin var mı ya da memnun müşterilere sahip misin? Onları göster. Kimse kimsenin kullanmadığı bir uygulamayı kullanmak istemez.
6. Dikkatlice fiyatlandırılmış olarak düşünülmüş  – doğru fiyatlandırma ekranı insanların karar vermesini engelleyebilir.
7. Mantıksal ilerleme  – en inandırıcı argümanlar kesin zamanlamaya dayanır. Faydaları değinmeden önce fiyatlara dalarsanız, insanları korkutabilirsiniz. Bununla birlikte, eğer ücretsiz bir denemeniz veya fiyatınız varsa, rekabetinizden büyük bir fark yaratması için erkenden bahsetmeye değer.

Geri dönüş sağlamadığı sürece, kaç ziyaretçinin açılış sayfalarına baktığının bir önemi yoktur. Öyleyse muhteşem bir açılış sayfasının bu öğelerinin her biri için daha derine dalalım, böylece ücretleri almak için sıraya girecek tüm müşterilerin üyeliklerini aktifleştirmeye başlayabilirsin.

1. İnsanlara Ne Sunduğunu Söyle

Bu günlerdeki açılış sayfalarının çoğu, ürünün tam olarak ne yaptığını çözmeyi  bizler için imkansız hale getirir fakat bunun farkına varmaz. Sadece netlik üzerindeki duyguyu vurgulayan özlü, genel ifadelerle doludurlar sitelerini.

“Fakia iş yapma biçiminizde devrim yaratacak!” Gibi bir manşeti kaç kez gördün? Ben bu başlığı görünce aynen şöyle düşündüm:

Güzeeel. Ama nasıl?

Sitenin ziyaretçilerinin böyle bir soruyu sormalarını kesinlikle istemezsin. İşinin ne olduğunu ve ne yaptığını biliyorsun, ancak müşterilerinin işin hakkın hiçbir fikri yok. Öyleyse bunu onlara açıkla:

• Ürünün / hizmetin nedir : Bu bir masaüstü uygulaması mı, bir mobil uygulama mı, yoksa bir sosyal ağ mı?
• Ne yapar : iş kolunuzda devrim yaratabilecek bir şey olsa dahi spesifik olmalısın
• Kimin için : Tasarımcılar için mi, avukatlar için mi, yoksa aç insanlar mı, EBM’ler olabilir mi?
• Neden önemlidir : Piyasada bulunan benzeri ürünlerden ne gibi farkları var?

Açıklayıcı, açıklayıcı ve özlü ol. Ürününün ne yaptığı hakkında hiçbir fikri olmayan biriyle konuşuyormuş gibi yaz, çünkü zamanlarının % 99’u sensin.

Jargon Hakkında Bir Kelime

Çoğu durumda, ürününü günlük dili kullanarak mümkün olduğunca açıklamak istersin. Ancak, bir niş hedef kitleye satış yapıyorsan sektöre özel terimleri kullanmak sorun değil. Sayfanı ziyaret eden herkesin neden bahsettiğini bileceğini varsayma.

Örneğin, bir “doğal dilde arama optimizasyon platformu” ürününün bulunduğunu söylemek yerine, “Gerçekten kullandıkları arama terimlerini kullanarak daha fazla insanı web sitenize getirin” gibi bir şey diyebilirsin.

2. Harekete Geçirici Çağrıları Belirgin ve Net Kullan (Tabii Genellikle.)

Bir ekranda, kaydolmak için iki yol var.

İnsanların bültenine kaydolmasını veya ürününü satın almasını istiyorsan, bir sonraki adıma geçmeleri için onlara açık bir yol vermen gerekir.

Bu nedenle, harekete geçirme çağrılarının (CTA) sayfanın geri kalanından farklı olduğundan emin ol. Düz metin bağlantısı yerine, bir düğme kullan. Ardından güçlü, yüksek kontrastlı bir renk ile o düğmeyi donat.

Ayrıca aramalarınızı sayfa boyunca eyleme geçirdiğinden emin ol. Sonuçta, bazı insanlar direk işin içine tam olarak dalmak isteyecek, bazılarında ise tüm sayfayı kaydırman gerekecektir. Bazıları sayfanı bile kontrol eder, daha sonra geri dönmek ve dönüştürmek için yorumları veya sosyal medya sohbetini aramaya gider, yani araştırmaya gider. Bu nedenle, en az iki eylem çağrısı yap; biri “katlamanın üstünde” diğeri de sayfanın altında. Ayrıca, insanları sayfayı aşağı kaydırdıklarında takip eden “yapışkan” bir CTA yapmayı da deneyebilirsin. İşte bu yüzden dönüştürmelerin asla kolay bir yolu olduğunu düşünmüyorum.

3. Bir Tanıtımcı Olma

Dollar Shave Club herhangi bir tasarım ödülü kazanmıyor olabilir, ancak normal bir erkek gibi ses çıkardıklarından emin olabilirler.

Spam olmaktan kaçın, aksi takdirde insanları korkutacak ve markanı ve ürününü ucuz göstereceksin. “Spam” nedir? Kullanılmış bir araba satıcısı gibi geliyor. Ya da bir tanıtımcı.

Yani insanlara bağırma, zorlama gibi. Tüm büyük harfleri rastgele kopyalama (özellikle “ücretsiz” kelimesini kullan) veya teslim edemeyeceğin şeyler için söz verme. Gerçekçi ol. Bir insan gibi konuş. Ürününü annene, önemli bir diğer akrabana veya en iyi arkadaşına açıklıyormuş gibi yaz. İnsanlarla gerçekseniz, sen ve onlara söylediklerine güvenmeleri çok daha olası, çok daha kolay olacaktır.

Ve lütfen pop-up olmasın, devralma olmasın, flaş ışığı olmasın. Bunlar sadece insanları çıldırtır, sinirlerini bozar. Ve kızgın insanlar müşterin olmaktan kaçınır.

4. İnsanları Meşgul Tut

İnsanlar sıkılırsa veya kaybolurlarsa, sevimli yavru kedi GIF’lerini kontrol etmek için zıplarlar. Kitlenin sayfa yükünden dönüşüm aşamasına geçmesini sağlamanın birkaç yolu:

Açık ol.  İçeriğinin net ve okunması kolay olduğundan emin ol, aksi halde insanlar sinirlenir. Düşünsene berbat bir günün ya da uzun ve kafa yoran bir ayın sonunda bilgisayara geçmiş internette sörf yapacaksın, sitelerin her birinde olmasa aralarında sinir bozucu spamları olan, açık olmayan yazıları olan siteler var.

Yorgun bir beyin ile bunları okumaya çalışır mıydın? Ben şahsen çalışmazdım. Yani beni direk kaybetmiş oldular bunu yapan siteler.

Görsel içerik kullan. İnsanlar kafalarında uzun metin blokları okumayı bir angarya iş haline getirebilir. Bu yüzden, metin, örneklendirme mermi listeleri, resimler ve grafikler ve infografikler gibi veri görselleştirmeleriyle sindirilebilir parçalara böl. Bu sadece insanların okumaya devam etmesini sağlamayacak, aynı zamanda görseller aracılığıyla daha iyi öğrenenleri de yardımcı olacaktır.

Eğlenceli ol. İnsanları gülümsetirsen okumaya devam etmeleri daha muhtemel hale gelir. Garip şakayı insanların önüne at. Ama çok da garip olmasın bu şaka (Abartma).

Kullanıcılara onlara yakın olduğunu hissettir. Hedef kitlenin zorlukları ve hedefleri ile konuş. Yalnızca sorunlarının farkında değil, aynı zamanda onları çözmeyi hedefliyor gibi geliyorsa okumaya devam edecekler.

5. Sosyal Kanıtı Unutma

Hiç boş olduğu için hoş görünümlü bir restorana gitmekten kaçındın mı? Ya da sadece neyin peşinde olduklarını görmek için bir kalabalığın içinde dolaştın mı? Hepimiz bu gibi dürtülere sahibiz.

Diğer insanlar bir şeyin eğlenceli veya faydalı olduğuna karar vermişlerse, denememiz daha muhtemel bir hale gelir. Ödevimizi kendimiz yapmak zorunda kalmamıza neden oluyorlar (sağlıyorlar da denebilirdi ama ödev benim açımdan olumsuz bir şey).

Bu yüzden, halihazırda ürününden zevk alan alıntıları, referansları, Facebook beğenilerini ve hatta vaka çalışmalarını kullanan insanları vurgula. Gerçek insanları, daha etkili ve güvenilir kılmak için işlerin arka planlarınıda göster. Adları, yüzleri ve şirket logolarını ekle (bir işletme ürünü satıyorsan). Ayrıca, mesajınla eşleşen referansları seç, böylece yalnızca ürününün şaşırtıcı olduğunu söylemezsin.

İlk önce bu kişilerin onayını aldığından emin ol. Hiç onaylamadığında bir web sitesinde yüzüne ya da kelimelerine laf atarsa işler tökezlemekten daha tuhaf bir hal alabilir.

Son olarak, Fortune 500 şirketleri veya ünlüleri gibi yüksek profilli müşterilerin varsa, bunları vurgulayıp vurgulayamayacağını o kişilere sor. Facebook ya da en sevdiğin ünlü ürününü kullanıyorsa, insanlar ona güvenmeye daha yatkın olacaktır.

6. Fiyatlandırma İle Oyna

Fiyatlandırma yalnızca işletmenin sağlığı için değil, geri dönüş oranın için de anahtardır. Ve bu sadece fiyatların ne olduğuyla ilgili değil, onları nasıl gösterdiğinle de ilgilidir unutma.

Örneğin, muhtemelen 19,99 Dolarlık hilenin farkındasın. Ama daha az heceli bir fiyat ne olacak? İster inan ister inanma,  daha hızlı söyleyebileceğin bir fiyat daha ucuz geliyor.

Bir fiyatın göreceli büyüklüğü ve konumu bile insanları etkileyebilir. Daha küçük bir yazı tipi boyutu, fiyatın daha küçük görünmesini sağlar. Fiyatı sağ üst kutudan ziyade kutunun sol altına koymak da algıyı etkiler.

Fiyatlandırma psikolojisi devasa bir listeyi hak ediyor ve neyse ki başka biri zaten bunları bir liste halinde bir araya getirdi:  kontrol et  ve mükemmel fiyatlandırma stratejinizi geliştir.

İnsanlara Seçenekler Ver

Hiç herhangi bir mağazaya fazlasıyla almak istediğin bir ürünün son derece düşük fiyatlı bir şekilde satıldığını gördüğün için girdin mi, o zaman biraz daha fazla para için çok daha fazlasını alabileceğini mi öğrendin? Bazen harcamak istediğinin iki katını harcamış durumda bulabilirsin kendini, ancak ekstraları kurtardığın için kendini iyi hisset.

İşte bu yüzden pek çok başlangıç ​​ve bir hizmet olarak yazılım (SaaS) şirketleri ücretsiz aşamalar ve denemeler sunuyor, ancak güç özelliklerini premium katmanlarla sınırlandırıyor. Ucuz seçenek, insanları sıraya sokuyor ve yarı yarıya yatırım yaptıklarında onları satmak çok daha kolay oluyor.

Unutma ki, bazı insanlar en iyinin en iyisini elde etmeyi sever. Premium bir sürüm sun ve fırsatlar ver, atladıklarını gör. Sadece çok fazla seçenek sunma, ya da insanları analiz yaparken sersemlelerine sebep olursun. Seçim için çok fazla şey yapmaktan kaynaklanan bir seçim yapamamaya, onları mahsur bırakırsın.

7. Hepsini Doğru Sırayla Yap

Birisi şu anda sana doğru yürüdü ve senden “Fakia” adlı bir şey için kaydolmanı istedi ve “sadece ayda 5 ₺ tutuyor” dedi bu konuda bir şey yapmaz mıydın?

Hayır. Bu nedenle açılış sayfanın yalnızca bilgilendirici olması değil, aynı zamanda doğru sırayla da bilgilendirilmesi gerekir. Bir şeyler satmak, iyi hazırlanmış ve mükemmel zamanlanmış bir saldırı planı gerektirir:

1. Sorunu ayarla. Bir sayfa kendini açıklamakta yavaş kalırsa, insanlar yavaş yüklerse olduğu gibi o sayfayı kapatır, başka sayfaya zıplar. Bu yüzden onları, ürününün hangi sorunu çözdüğünü ve bir çözüm sunduğunu açıkça gösteren ilginç bir başlık ve görüntü birleşimiyle bağla. İlgilerini çek.
2. Çözümü detaylandır. Ürününün veya hizmetinin nasıl düzeltildiğini, sistemini tam olarak nasıl kurduğunu ve sorunu ürününün ne şekilde çözeceğini açıkla.
3. Sosyal kanıtını kullan. Memnun kalmış ya da ünlü müşterilerden (fikirlerini pek bilmesen dahi) birkaç şey sallayıver.
4. Fiyatlandırmayı tanıt. Sürece para dahil etmeden öncesinde insanların ürününü istemeye başlamalarını sağla.
5. Düşünmelerini sağla. Okuyucular henüz ikna olmadıysa, daha sonra geri gelmeleri için akıllarında kalacak bir nokta yarat.

Şimdi İlerle ve Dönüştür

Şimdi bu bilgiyi işe koymanın zamanı geldi. Açılış sayfalarından birini yayınla ve şu anda yalnızca bir değişiklik yap; sekmeyi kapatma ve daha sonra yapacağını söyle.

Açılış sayfalarından en iyi şekilde yararlanmak için, insanları, en iyi şekilde dönüştüren kelime, resim, renk ve mizanpaj kombinasyonunu bulmak için A / B testleri yapmaya başla.

Son olarak, dönüşüm oranını izlemene ve iyileştirilecek alanları tanımlamana yardımcı olması için analitik yazılımını kullan. İnsanların tam olarak nereye dönüştüğünü belirlemek için her bir harekete geçirme ifadesinin performansını izlemeni de öneririm.

İlhama ihtiyacın var mı?  Güzel örnekler için Land Book’a göz at derim.

Web Tasarım Rehberi : Web Tasarım Sürecin Neden Bir İçerik İle Başlamalıdır

Eğer web dizayn dünyasının içinde birazda olsa bulunduysan, “önce içerik” konseptini duymuşsundur. Bu makalede “önce içerik” kavramının ne olduğunu, neden bir web tasarım yaparken içeriklerden başlaman gerektiğini derinlemesine inceleyelim dedim.

O zaman hadi bakalım!

Önce İçerik Sonra Web Tasarımı Niye?

Önce içerik, web tasarım yapım aşamasının önemli filozofik bakış açılarındandır. Bu konsept A List Apart’ın kurucusu Jeff Zeldman tarafından 2008’te ortaya atılmıştır ve konsepte göre, bir proje için düzgün dizayn yapmak için dizayna başlamadan önce içeriğinin ne olduğunu bilmen gereklidir.

Mantıklı değil mi? Sonuç olarak, bir editör bir kitap yazılmadan o kitabı düzenleyemez veya bir mimar plan çizeceği binanın amacını bilmeden plan çizemez. Bu iki meslektede, form fonksiyona uygun olmalı ve çoğu internet sitesi için fonksiyona giden yol içerikten geçer.

Bariz bir şekilde görülebileceği gibi içerik sadece nüsha değildir. İçerik birçok kitle-iletişim araçları içermektedir. Bunlardan bazıları grafik, video, ses ve belki de süper cazip kelimeler.

Kısaca, önce içerik dizaynı tamamen dizaynın amacının ne olduğunu bilmekte ve o amaca nasıl ulaşılacağını, dizayna başlamadan bilmekte.

İdeal bir dünyada web tasarım aşamasına başlamadan elinde içerik bulunmalı ama aslında olmasa da olur, hatta ne tür içeriğe ihtiyacın olacağını planlamak (Örneğin içerik stratejisi dizaynlamak) bu adımı atlamaktan daha sağlıklıdır.

Önce İçerik Web Tasarım Modeli Yararları

Önce içerik yaklaşımı daha iyi bir dizayn vizyonundan tut, web tasarım problemleri yakalamaya kadar bir sürü sorunu, sorun olmadan görmeni sağlar.

Peki neden önce içerik sonra web tasarım aşamaları diyorsan?

• Mantıklı bir veri mimarisi oluşturma: Elindeki içeriğin ne olduğunu bildiğinde veya hangi içeriğe ihtiyacın olduğunu bildiğinde, site haritasını oluşturmak ve mantık hiyerarşi kurmak çok daha kolay.
• İçeriği optimize etmek için dizayn: Eğer müşterinin kullanıcıları alıntı yapmayı seviyorsa, alıntıları güzel bir şekilde sergilemek için bir sürü yol dizayn yapabilirsin. Belkide kullanıcılar liste yapmayı seviyor, sen de listeler için galeri temelli bir dizayn yapabilirsin.
• Site çapında istikrar sağlar(ve kodunuzu hafiflet): Eğer yaptığın sitenin blog kısmına, yardım merkezine ve pazarlama sayfalarına ihtiyacı olacağını biliyorsan, tip hiyerarşini bu üç alandada çalışacak şekilde dizayn edebilirsin. Bu şekilde daha istikrarlı ve daha kolay öğrenilebilen bir arayüz oluşturabilir ve birbirine karışmış bir sürü sınıf yapısıyla uğraşmak zorunda kalmazsın.
• Sonu gelmeyen ilteişimden kaçındırır: Genelde dizayn içerik olmadan başladığında, yapım aşaması sonu web tasarım’dır ve müşteriler arasında sonu gelmeyen bir iletişim yaşanır. Bu olay sürekli web tasarım sürecinin bir sürü küçük ve sinir bozucu değişikler yapmasına yapmasına sebep olur.

Tasarımcılar İçin İçerik Modelleme

İçerik modeli yaratmak siten için bir site haritası yaratmak gibidir ama sayfalara odaklanmadan, içerik tipleri ve karakteristiklerine odaklanmalısın. İçerik tipleri ve onların ilişkisini ve gereksinimlerini saptamada sana inanılmaz yardımcı olacaktır. Ayrıca sitenin veri mimarisini yapılandırmanda yardımcı olacaktır.

İçerik modelleri 2 formda karşımıza çıkar: macro ve micro. Yiyecek dergin için, macro-düzey modelleme bu şekilde görünecektir:

Burada yaptığın şey sitede göstermek istediğin içerik elementlerini belirlemek ve nasıl bağlanacaklarını göstermektir.

Bir sonraki adım, yukarıdaki içerik tiplerinin bulunduğu haritada, içeriğine yakınlaştır. İyi haber haritandaki kurduğun bağlantılar, her içerik bloğunun gereksinimlerini belirlemede yardımcı olacaktır.

Bir içerik bloğuna yakınlaşmak böyle gözükebilir:

Bir çok durumda, basitçe koleksiyonların birbirleri ile olan bağlantılarını göstermek, koleksiyonlar içindeki sayfaların içeriğini belirlemede yardımcı olacaktır. Örneğin, Mutfak sayfasındaki içeriğin büyük bir kısmı dinamik bir tarif listesine bağlı olacaktır.

Şimdi, geriye dönüp yiyecek dergin için koleksiyon yaratırken, her koleksiyondaki içerik modelini alanlara bölmek daha kolay olacaktır. Benim içerik modelleme hakkında en sevdiğim kısım zihinde yarattığı yeni fikirlerdir.

Sadece çeşitli içerik tiplerine bakmak, benim o içeriklerin ne görüntüleyebileceği hakkında daha yaratıcı olmamı sağlar. Ayrıca içerik tipleri arasında sandığımdan daha fazla bağlantı olduğunu ortaya çıkarır.

Örneğin, mutfak kısmına bir tarih bölümü eklemek gibi..Birden aklıma her mutfak içinde malzeme, tarif ve şeflere bağlantılarını barındıran bir tarih şeridi yaratmak geldi.

Tabi ki bu sadece bir örnek ama bu metodu herhangi bir içerik için kullanmayı çok kullanışlı bulacaksın.

Gerçek İçerik Oluşturarak Web Tasarım Sürecini İlerletme

CMS ile dizaynın özel bir yönü 2 kullanıcı grubuyla dizayn yaratmaktır:

• İçerikleri yöneticek içerik yöneticileri ve
• İçerik yaratıcıları tarafından paylaşılan içerikleri tüketicek site ziyaretçileri

Önce içerik dizayn yaklaşımını kullanarak, içerik yaratıcılarının paylaşacağı içerik tipleri hakkında bilgi sahibi olacaksın. Nasıl başlık yazdıklarını, bloglarının ne kadar uzun olmasını istedikleri, ne tür içeriklerin daha sık paylaşıldığı ve uç durumlar ve uç değerler ile ilgili bilgi sahibi olacaksın.

Yaygın içerik tipleri ile çalışmak CMS’i uyarlamada ve çıktıyı dizayn etmede yardımcı olacaktır.

Dinamik CMS içeriğini görsel dizayn etme

Josh Puckett’ın “Modern Design Tools: Using Real Data” makalesinde işaret ettiği gibi gerçek içeriklerle web tasarım sürecini yaratmak, sitenin görsel dizaynındaki potansiyel kusurları fark etmene yardımcı olacaktır. Uzun makale başlıkları kendi içine katlanabilir, blog için yarattığın indeks dizaynının yüksekliğini bozabilir. Açık renkteki arkaplan resimleri yazılan başlıkları okunamaz hale getirebilir. Yazı butonu yarattığın küçük CSS butonlarını kocaman yapabilir.

Önüne çıkan her bir engel seni aşağıdaki fırsatlardan birini veya ikisini yapmaya itecektir:

Dizaynını veya kurduğun düzeni daha esnek yapmak: Bir liste uzun başlıklar için daha iyi olabilir, bir yazı gölgesi veya bir resmin katmanını değiştirmek yazıların ve resimlerin okunabilirliği ve görselliğini arttırabilir.

İçerik stil rehberine bir giriş yapın ve bir CMS fonksiyonu ile destekle: Karakter sayısını sınırlayarak, buton başına 3 kelime kuralı koyabilir ve bu kuralın nedeni hakkında yardımcı yazı ekleyebilirsiniz. Bir açıklama sunmak içerik yaratıcılarının sadece kısıtlamaları değil, kısıtlamaların ardındaki dizayn hakkında düşünmelerini sağlayacaktır.

Sende Önce İçerik Sonra Web Tasarım Modelini Kullanıyor Musun?

İçerik önce ile dizaynı destekliyorsan, düşüncelerini, tecrübelerini ve özellikle tekniklerini duymayı çok isteriz. Eğer önce içerik dizaynında zorluk yaşadıysan, o tecrübenizi de duymak isteriz.

Web Tasarım Rehberi : Prototiplerini Her Zaman Örneklerin Üzerinden Seç

Etkili bir iş akışı tasarımı bulmak bazen biraz zor olabilir ve genellikle müşteriler, tasarımcılar ve geliştiriciler arasında sürekli bir iletişim gerektirir. Fakat bu bir zorunluluk değildir.

Mockuplar En Etkili Çözüm Değildir

Sana bunun çözümünü anlatmadan önce, aklına pek de önemli olmayan bir problemin resmini çizeyim.

Tasarımcılar genellikle sitelerin tasarımlarını Photoshop ve Illustrator kullanarak oluşturur. Bunu yaparken farklı sayfaları, vurguları ve ekran boyutlarını göstermek için katmanlar ve dosyalar kullanır. Ardından, ilgili kişiler arasında tekrar tekrar tartışıldıktan sonra, tasarımlar tasarımcı tarafından gerçekleştirilir veya bağımsız bir geliştiriciye aktarılır.

Tasarım ayrıntıların hakkında netlik talep ettikleri, nihayetinde teknik kısıtlamaları gösterdiklerinde ve basitçe tasarımdan öngörüldüğü gibi sapmaları durumunda, ileri geri istenmektedir. Değişikliklerin derecesine bağlı olarak, müşteri yeniden dahil olmak zorunda kalabilir, bu da bazen sinir bozucu üç yönlü bir push-and-pull neden olabilir.

Bu uygulama verimsizdir. Sürekli tekrar yapmak, geliştirme süresini birkaç kat arttırabilir. Çözüm, tahmin edebileceğiniz gibi, mockupları tamamen işleyen bir prototip ile değiştirmektir. Bu durumda gerçek bir etkileşimli web tasarımı ile yapabilirsin. Bu konsept çok faydalıdır, çünkü çalışan prototipler:

1. Nihai ürüne daha yakın, onaylı tasarımdan nihai siteye geçmeyi hızlandırır.
2. Son ürün ile aynı ortamda. (Buna karşılık Photoshop, tasarımcıların HTML ve CSS ile mümkün olmayan ve potansiyel olarak yeniden tasarımlara yol açabilecek tasarımlar oluşturmalarına izin verir.)
3. Görsel ve etkileşimlidir. Müşteriler ve genel olarak insanlar, yalnızca statik görüntülere dayanan son bir ürünü görselleştirmekte zorlanıyorlar.
4. Duyarlılığı uygulamak için daha iyi. Prototipi çeşitli cihazlarda açabilir ve tasarım sınır değerlerinizin gerçek dünya ortamlarında makul olduğunu varsaymadan, kör bir şekilde doğrudan gösterebilir / test edebilirsiniz.
5. Müşteri için daha ilginç ve heyecan verici. Tasarımı canlandırmak için ilgi çekici animasyonlar ekleyebilir ve kullanıcı arayüzü gelişebilir.

Bu avantajlara dalalım ve neden müşterin ve tasarımcı olarak genel akıl sağlığın için bu kadar değerli olduklarını açıklayalım. Canlı prototipleri ne kadar çok takdir edersen, onları verimli bir şekilde kullanma alışkanlığın o kadar artar ve müşterilerin o kadar mutlu olur.

Prototipler Sonuç Ürüne Daha Yakındır 

Bir prototip müşteri tarafından onaylandığında, siteyi kapatmak ve son bir teslimata sahip olmak inanılmaz derecede hızlıdır, çünkü prototip olarak başlamak için neredeyse teslim edilebilir haldedir. Bu, tasarımlarını kodda uygulamak veya kendin yapmak için bir geliştiriciyle sözleşme yapmaktan çok daha hızlıdır. Siteyi, bir kez Photoshop’ta ve bir kez de kod üzerinden yapmaktan kaçın.

Photoshop kullanırken, HTML’yi ve CSS’yi kullanarak gerçekten mümkün olmayan tasarım öğeleri oluşturabileceğini ve potansiyel olarak gerçek siteyi oluşturmaya başladığında onları yeniden tasarlamaya zorladığınızı düşün. Değişimin ne kadar büyük olduğuna bağlı olarak, bu durum müşteriden tekrar onay almayı gerektirebilir. Bu da yalnızca geliştirme süresini artırmakla kalmaz, aynı zamanda sana olan güvenlerini kaybetmelerine de neden olabilir. Bir prototip oluşturmak için HTML ve CSS kullanmak, tasarladığınız her şeyin nihai üründe mümkün olmasını sağlar.

Ayrıca, tasarım ile nihai ürün arasında işler aynı gözüktüğünde, genellikle statik maketlerin genellikle tamamen ifade edilmediği durumlarda, müşteriye sürpriz olmaz. Yazı tipleri, Photoshop ve web’de farklı bir şekilde oluşturulmalarına özellikle önem verir, bu da çoğu zaman müşteriye “doğru hissetmeyebilecek” son dakika font değişikliklerine neden olur.

Prototiplerin Görselleştirilmesi Daha Kolaydır

Son bir ürünün görselleştirilmesi son derece zor olabilir. Elbette, yıllarca müşteri çalışması sırasında gözlerini eğiten tasarımcı ve sanatçılar, genellikle bir maketten nihai bir ürünü görselleştirebiliyorlar. Bununla birlikte, ortalama bir insan, güzellik ve işlevsellik potansiyelini takdir etmek için basit bir temsili ötesinde görmekte zorlanır.

Burası çalışma prototiplerinin gerçekten parladığı yer. Müşterilerine bir dizi PSD, görüntü veya çizim vermek yerine (her şeyin statik ve cansız olduğu) onlara oynayabilecekleri canlı bir örnek ver.

Müşterilerinin düğmelere ve bağlantılara tıklamaları, böylece tüm hikayeyi elde etmek için gezinmeleri gereken bir PSD klasörü eklemek yerine, nasıl değiştiklerini ve nereye bağlandıklarını görmelerini sağlamak önemlidir. Müşterilerinin tasarım çalışmalarınızı ne kadar kolay takdir edersek, o kadar mutlu olurlar ve genellikle birlikte çalışacakları daha iyi olur.

Prototipler, Yanıt Verebilirlik İçin Tasarım Yapmayı Kolaylaştırır

Netscape’i 990 piksel genişliğindeki web sayfalarını görüntülemek için açtığımız ve bir dizi tablo kullanarak bir site hazırladığımız günler artık geride kaldı. Şu anda 2015 ve web, 3 “ile 30” arasında değişen ekran boyutlarında, çeşitli en boy oranlarında, yönlendirmelerde, piksel yoğunluklarında ve çözünürlüklerde sindiriliyor.

Sitene erişebilecek bazı olası cihazlara bir göz at:

Gördüğün gibi tek bir sabit genişlikte tasarım oluşturamıyoruz ve artık müşterilerimizin taleplerini yerine getirmesini bekliyoruz. Mobil kullanım kolaylığı olmadan, kullanıcı deneyimi sitene gelen ziyaretçilerin % 50 veya daha fazlasında acı çekecektir. Aslında, Google, duyarlı olmadıkları için siteleri cezalandırmaya bile başladı.

Ama sen bunu biliyorsun zaten. Bu nedenle, biri mobil, diğeri masaüstü için, belki de birkaç tablet, ve yatay ve dikey yönlendirme için en az iki PSD oluşturursun. Bu büyük bir gelişme, aynı zamanda çok fazla iş demektir.

Buna karşılık, Bootstrap (hızlı web sitesi oluşturma için ücretsiz bir ön uç araçları koleksiyonu) gibi mobil uyumlu bir çerçeve kullanarak bir prototip oluşturmak, en başından itibaren yanıt veren bir site oluşturmayı basitleştirir. Ancak, bir tasarımcısın ve kodlamak istemeyebilirsin. Endişelenme, bunun içinde çözümler var.

Bu Prototipler Nasıl Oluşturulur?

Belki şu anda çalışan prototipleri kullanmıyorsundur, çünkü:

1. Genellikle yapmak için daha uzun zaman alırlar
2. HTML ve CSS’ye karşı çok anlayışlı veya güvende değilsin ve / veya
3. Yinelemen daha yavaş

Ancak maalesef, 2’den fazlası da 1’den fazlasına neden olmaktadır.

Sen bir tasarımcısın. Photoshop gibi araçları kullanarak bir şeyleri nasıl tasarlayacağını biliyorsun, ancak kusursuz bir şekilde terlediğin bir sitenin gerçek kodlaması, tasarım bilinmeyen bir geliştiricinin elinde kalıyor. Yüzeyde bu biraz çılgınca geliyor. Haklı mıyım? Bunu yaparsın, çünkü entegrasyonun zamanına değmeyeceğini veya çok karmaşık olduğunu düşünebilirsin.

Aslında durum böyle değil; göründüğünden daha basittir.

Javascript, C ++ veya Ruby gibi dillerle gerçek programlamada olduğu gibi karmaşık bir mantık veya matematik yoktur. HTML ve CSS’nin temelleri bir günde öğrenilebilir. HTML, sayfa içeriğini yapılandırmanın basit bir yoludur ve CSS, bir özellik değeri çiftleri dizisidir (renk: kırmızı, ekran: yok).

Aşırı karmaşık değil yani. Bununla birlikte, onlara hakim olmak bazı özellikleri sayesinde biraz zaman alır. Ancak çalışan bir prototipin yararları göz önüne alındığında, bu çabaya değer. Temelleri ücretsiz olarak öğrenmek için Codecademy’nin HTML ve CSS kursuna bakabilirsin.

Sıfır Kodlama Rotası

Kodlamak istemiyorsan veya yalnızca müşteriyi / tasarımcıyı ileri geri geliştirmek istiyorsan, en iyi alternatif bir hazır site oluşturuculardır. Photoshop tasarımlarını HTML ve CSS’ye dönüştüren araçlar bu sitelerde ihtiyacın olan her şeyi karşılamak için kurulmuştur.

Webflow gibi profesyonel bir araç, metin düzenleyicideki kod satırları yerine, grafiksel bir arabirim kullanarak bir web sitesi tasarlamana ve dağıtmana olanak tanır.

Web Tasarım Rehberi : Web Siteni Yayına Almadan Önce Yapman Gerekenler

Bunu başardın!

Web tasarım sürecin bitti.

Sonunda yaptın! En sonunda günlerce, haftalarca, aylarca üzerinde çalıştığınız web sitesini sonunda bitirdin ve bu web sitesini dünya ile paylaşmaya hazırsın. Ama henüz yayınlama düğmesine basma.

Hiçbir şey seni siteni oradan çıkarmaktan daha mutlu edemese de, bu 4 bölümlük açılış öncesi kontrol listesini kontrol etmeyi ve sanırsam iki kez kontrol etmeyi kendine ve sitene borçlusun.

Tasarım Kontrol Listesi

Geri ve ileri şeyler, müşteri geri bildirim oturumları ve içinde bulunduğunuz diğer tasarım yenilikleri sırasında bir şeyi kaçırmak (veya kırmak) çok kolaydır. Bu yüzden herhangi bir tasarım hatasını kontrol etmek için geri dönmek çok önemlidir.

Bu ilk kontrol listesi tamamen görseldir; sitenin iyi görünüp görünmediğine odaklanmış olmalıdır. Bir sonraki adımda işlevsellik testine gireceğiz.

Tarayıcılar Arası İşlevsellik

Farklı tarayıcılar web siteni farklı cihazlarda farklı şekilde gösterebilir. Bu nedenle siteni farklı tarayıcılarda test etmek emeğin ve siten için çok önemlidir. Testini nereye odaklaman gerektiğini görmek için kendine bir kontrol listesi oluşturmak mantıklı olacaktır.

Bu işlem sırasında (ve sonraki adımda, çoklu cihaz testlerinde) düzeninin, tipografinin, sitenin navigasyonunun ve diğer tasarım öğelerinin düzgün görüntülendiğinden haliyle emin olmak istersin.

Ben bir internet sitesini paylaşmadan önce her zaman bunları kontrol ederim:

• Yazı
• Renkler ve renk geçişlerini
• Görüntüler
• Logo

Cihazlar Arası İşlevsellik, Uyumluluk

Sitenin herhangi bir cihazda güzel görünüp performansını iyi bir şekilde gösterdiğinden emin olmalısın.

Bu sıralarda bulunan cihaz sayısı kadar fazla web özellikli cihaz olmamıştı ve bunu birlikte şaşırtıcı bir dizi ekran boyutu takip etmeye başladı. Bitti değil mi, kullanıldığı her ekranda iyi bir performans vermeli, ancak kontrol işini tek bir seferle sınırlı tutmamanı tavsiye ederim. Ne de olsa bir mükemmeliyetçisin, değil mi?

Burası aynı zamanda mobil navigasyonun, mobil cihazlardaki navigasyon yani yön gösterme çubuğunun çok önemli olduğu yerlerdendir. Bir dokunmatik ekran kullanan cihazda, kullanıcının web sitende gezinme yeteneğini, rahatlığını test ettiğinden ve cihazlar arası geçişlerde hiçbir şeyin kaybolmadığından emin ol.

Görüntü Optimizasyonu

Resimler ve grafikler pek çok web sitesinin önemli bir öğesidir, bu nedenle özellikle de tüm bu ultra yüksek çözünürlüklü cihazlarda (Apple’ın Retina ekranları gibi) düzgün şekilde görüntülendiklerinden emin olmak isteyeceksin.

Temel kural, resmini sitende göstereceği boyutun iki katı boyutunda yüklemektir.

Bazı durumlarda, iki resim yükleyebilirsin: düşük çözünürlüklü cihazlar için gerçek boyutlu bir sürüm ve yüksek çözünürlüklü cihazlar için iki katı boyutundaki başka bir sürüm kullanabilirsin.

Niye böyle bir şeyi yapmalısın? Görüntü boyutsal olarak ne kadar ağır olursa, sayfan o kadar yavaş yüklenir ve kullanıcı deneyimin o kadar kötü bir hal alır. Bu, daha sonra ele alacağımız SEO’yu da olumsuz yönde etkiler.

İşlevsellik Testi

Tasarım ve el işlevselliği el ele gider, Ama ben düzgün bir web sitesi işleselliği için iki şeki birbirinden izole ederek incelerim. Bunlar web sitesinin görüntü olarak hem iyi gözümesi, hem de dizayn edildiği gibi iyi bir performansı sunmasıdır.

Entegrasyon Testi

Bu, çok önemli ve kaç entegrasyona bağlı olarak hızlı bir görevden dev bir işe kadar değişebilir. Genelde, bunları eklerken bir entegrasyon listesi oluşturacağız, böylece daha sonra unutmayacaksın.

Test edilecek bazı genel entegrasyonlar:

• Web formları (formların çalıştığını ve gönderilen bilgilerin doğru yere gittiğini kontrol et )
• Otomatik Cevap
• Pazarlama e-postaları (MailChimp, Constant Contact, HubSpot, drip campaings, vb.)
• RSS beslemeleri
• e-Ticaret
• CRM
• CMS

Bağlantı Testi

Bu, biraz sıkıntılı olabilir, çünkü çoğu site düzinelerce (yüzlerce değilse) bağlantıya sahiptir. Çoğunlukla, hiçbir yere gitmeyen bir ya da iki bağlantı vardır ve kullanıcılarının bu linkleri bulmadan önce onları bulmak senin işindir ve bu iş fazlasıyla önemlidir.

Kontrol edilecek en önemli bağlantılardan bazıları şunlardır:

• En iyi gezinme bağlantıları
• Altbilgi bağlantıları
• Sosyal medya bağlantıları (Facebook, Twitter vb.)
• Logo (genellikle ana sayfaya bağlantılar)

İçerik Düzenleme

Krala hakkını ver.

İçerik kraldır ve test süreci bir için uygun olmalıdır. Genellikle bu, tüm içeriğin güncellendiğinden ve onaylandığından emin olmayı içerir. Bir yerde hala ‘Lorem Ipsum’ paragrafı olan kaç tane web sitesi bulduğumu söyleyebilirim(yani yazım hatası).

Şimdi,  ilk önce içeriği tasarlarsan, son içeriğin yerinde olması gerekir, böylece yazım ve dilbilgisi hatalarını prova etmek gibi daha genişlemesine olacak biçimde incelemelere odaklanabilirsin.

İçeriğin daha sonradan değişmesininde sorun olmadığı, mümkün olması gerektiği çok önemlidir. Müşteriler, ekip üyeleri veya metni her zaman bir CMS ile düzenleyebilirsin. Buradaki ana amaç, web sitenizin içeriğinin tamamen saçma olmamasını sağlamaktır.

Arama Motoru Optimizasyonu (SEO)

Web sitenizi yayınladıktan sonra analiz etmek ve optimize etmek iç bitmeyen ve bitmeyecek bir süreçtir. Ve anlamsal site yapısını baştan sona düşünmelisin. Ancak bu, yayınlanmadan önce bir SEO incelemesinden yararlanamayacağın anlamına gelmez.

Web siteni arama motorları için optimize etmek için yapılabilecek çok şey var.

1. Uygun Anlamsal Yapı Kullan

Web tarayıcıları (Google’ın botları gibi), içeriğini anlamak için web siteni okur; böylece arama motorları, insanlar aradıklarında web siteni görüntülemeyebilir. Siteni taramalarına yardımcı olmak için, anlayabilecekleri bir dil kullanman gerekir.

Tarihsel olarak bu, aşağıdaki anlamsal etiketleri kullanmak anlamına geliyordu:

• h1 – h6 (başlık etiketleri)
• p (paragraf etiketleri)
• ul / ol (sırasız ve sıralı Listeler)

Ayrıca bazı yeni HTML5 semantik etiketleriyle yukarı ve aşağı gidebilirsin:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

Bu etiketler önemlidir, çünkü kullanıcılar için en alakalı içeriği tanımlamanıza izin verir.

Kısacası: arama motorları için aranmayı kolaylaştırmak, kullanıcıların seni bulmasını kolaylaştırır.

2. Meta SEO Etiketleri

Sayfa yapısının yanı sıra, sayfalarını bir bütün olarak açıklayarak ve anlatarak web tarayıcılarının siteni anlamalarına yardımcı olabilirsin.

Meta başlığı

Sayfanızın meta başlığı, insanların arama motoru sonuç sayfalarında (SERP’ler) göreceği bağlantılı metne çevirir. Ayrıca, insanlar sayfana tıkladığında tarayıcı sekmesinde de görüntülenir bu SERP’ler.

Bazı en iyi uygulamalar şunlardır:

• Sayfanın ana konusunu tanımla
• Boyunu 70 karakterin altında tut (boşluklar dahil)
• Alakalı anahtar kelimeler kullan
• Önemli anahtar kelimeleri başlığın önüne yerleştir

Meta Açıklaması

Meta açıklama, web sitenin neler sunabileceğini açıklayan kısa bir cümledir. Arama sonuçlarında meta başlığının altında görünür (bazen).

Bazı en iyi uygulamalar şunlardır:

• Sayfayı tanımlayan anahtar kelimeler ekle
• 160 karakteri geçme
• Açıklamalarını robotlar için değil, insanlar için yaz. (Google, web sıralamalarında açıklamaları kullanmaz).

3. Grafik Ayarlarını Aç

Sosyal medya SEO’nun temel bir unsuru haline gelmiştir, bu nedenle etkili Açık Grafik bilgileri sunarak bu süreci güçlendirmen çok önemlidir. Grafik ayarları 3 parça içerik bulundurur: Başlık, açıklama ve resim-görüntü.

Başlık ve açıklama, SEO emsalleriyle aynı kuralları izler, ancak arama sonuçlarında görünmek yerine, paylaşıldıklarında sosyal medya platformlarında varsayılan başlık ve açıklama olarak görünürler.

Bu oldukça faydalıdır çünkü başkaları web siteni paylaşırken mesajlaşmanın (ve görüntünün) ne olacağını belirleyebilmeni sağlayarak markanın kontrolünü elinde tutmana yardımcı olur.

Her zaman analiz ediyor ol.

Web sitesi analizleri, yayına başlamadan önce oluşturulacak diğer önemli bir parçadır. Bir Google Analytics hesabı oluşturmak ücretsizdir.

Kurulduktan sonra, web sitendeki ziyaretçileri ve kullanıcı katılımlarını neredeyse anında takip edebilirsin!

Sonraki yazı: Instagram İle Para Kazanmak İçin Neler Yapabilirsin?