Web tasarım ilkeleri görünürde katı kuralları olan bir anayasa gibi görünse de doğru hareket edildiğinde kuralları basit gelecektir. Hatta birkaç basit kural ile sonsuz tasarım olanaklarına sahip olabilirsiniz.

Gideceğimiz yolu gösterecek ilkeler, ziyaret edilecek tüm web sitelerinin ne olması gerektiği hakkında tasarımcıyı bilgilendirecektir. Bazı istisnai durumlar olsa da, kuralları bilmeden hareket etmek tasarımı bozmadan esnetmeyi kolaylaştırır.

Günümüzde bir web sitesi oluşturmak çok kolay oldu. Birçok ücretsiz web site oluşturucuya kayıt olarak şık ve çekici siteler sahip olabilirsiniz. Ancak bu her ihtiyaca cevap verebilecek mi?

Bunun etkili bir web tasarımı olduğunu doğru bulabilirsiniz. Gerçek şu ki bir web sitesi iyi görünse de işlevsel olarak kullanıcının ihtiyaçlarına ne kadar uygun olabilir?

Özel web sitelerinde durum bundan daha olumsuz olacaktır. Etkili bir web sitesi oluşturabilmek ancak kullanıcı deneyimiyle doğrudan alakalıdır.

Web sitesi tasarımında estetiğin ötesine geçen birçok faktör bulunur. Harika bir web tasarımı için sitenin kullanımı ya da diğer bir ifadeyle formu (nasıl göründüğü) ve işlevi (kullanılabilirliği) kombinasyonu ile alakalıdır.

Sanal ortamda var olacak siteniz aynı zamanda işletmenizin yüzü olacağından birçok potansiyel müşteri adaylarının ilk baktıkları yerdir. Müşteriler, kim olduğunuzu, nelere değer verdiğinizi ve kendilerinde ne gibi değerler bulacaklarını araştırırlar. Bunun için olumlu bir izlenim bırakmak gerekir. Kötü bir tasarıma sahip olan web siteleri, özellikle ads reklamlarıyla maliyet kaybına yol açarken, düşük dönüşüm sağladığı iyi Google arama motorundaki performansınızı olumsuz etkileme eğiliminde olacaktır.

Web sitesi tasarlamanın önemli 9 ilkesi ile nasıl müşterilerinize doğru izlenim bırakabilmenizi ve arama hacimlerinizi nasıl üst düzeye çıkaracağını codeliva web tasarım ekibi sizler için derledi.

9 Önemli İlkenin Web Tasarıma Katkısı

Web tasarımının ya da mobil tasarım vs. etkili olması, ziyaretçilerin dikkatini çekerken, belirli bilgileri ileterek amaçlanan işlevi de gerçekleştirmelidir. Tutarlılık, renkler, tipografi, resimler, basitlik ve işlevsellik gibi çeşitli faktörlerin tümü iyi bir tasarıma katkı sağlar.

Bir web sitesi tasarlarken, web sitesinin nasıl algılandığını etkileyen birçok önemli faktör vardır. İyi tasarlanmış bir web sitesi güven oluşturmaya ve ziyaretçileri harekete geçirmeye motive etmeye yardımcı olabilir. Harika bir kullanıcı deneyimi oluşturma, web sitesi tasarımınızın kullanılabilirlik (form ve estetik) ve kullanım kolaylığı (işlevsellik) için optimize edilmesini sağlamayı içerir.

İşte bir sonraki web projenizi düşünmenize yardımcı olacak bazı yönergeleri codeliva yazılımın parçası olan, codeliva web tasarım ekibi kaleme aldı.

1- Site Amacına Hizmet Edecek Web Tasarım

Bir web sitesi tasarlanırken kullanıcı ile etkileşim sağlama ve harekete geçirme eylemlerini desteklemelidir. Site amacına hizmet edecek tasarımlar ile satın almalara teşvik etmek amaçlanır. Ziyaretçileri potansiyel müşteri haline getirecek bu amaca hizmet eden ögeler aslında şirketin kurumsal yüzüdür. Bu nedenle şirket misyonunu oluşturacak ifadeleri belirlemek gerekir.

Bir siteyi tasarlayıp hayata geçirmek, deneme yanılma yöntemiyle olacak iş değildir. Bir amaç belirlendiğinde, plan ortaya çıkacak ve içerikleri oluşturmaya kılavuzluk edecektir. Bu durumda plansız davranma tasarımın felsefesinde yoktur.

Site amacını belirlerken hizmetin kime yönelik olduğu da önemlidir. Kime yönelikten kastımız, hedef kitle analizi ve hedef kitlenin ihtiyaçları doğrultusunda ortaya çıkacak tasarımlardır. Hedef kitlenin demografik yapısını ve problemlerini tespit etmek ihtiyaca yönelik bir çalışmayı hayata geçirecek ilk adımdır.

Tasarımsal ögeler, çok geniş amaçları dışında rekabeti yenebilecek pazarlama stratejilerini de oluşturması gerekir. Oluşturulacak görseller ve içerikler kurumsalınıza nasıl yansıyacak? Ve rakiplerden farklı olarak kullanıcılara nasıl bir değer katacak? Pazarlama stratejilerinizi bu soruları yanıtlamaya yönelik geliştirmek, oluşacak markada sabit bir kitle yakalamanıza yardımcı olur.

Elbette ki bu sorular haricinde birçok web tasarım amaçları vardır. Örneğin bir web tasarımın neye hizmet edeceği konusunda mobil uyumlu web tasarım mı yapılacağı ya da web uyumlu tasarım mı yapılacağı önceden araştırılmalıdır. Ortak temel amaçlara baktığımızda;

• Yeteneğinizi tanımlayın
• İtibarınızı oluşturun
• Müşteri adaylarınızı belirleyin
• Satış sonrası bakıma önem verin

2- Sadelik ve Uyum

• Renk: Renkler, verileri iletme ve duyusal yolları uyandırma yeteneğine sahiptir. Markanızı en iyi anlatan bir renk paletine sahip olmak, müşterilerinizin markanıza karşı davranışlarınızı etkilemenize yardımcı olur. Ancak renk seçimi yaparken bunu 5 ve daha az renk ile sınırlandırın. Tanımlayıcı ve hoş renk kombinasyonlarını belirlemek müşteri katılımını artırabilir. Bunu yaparken aynı zamanda kullanıcıların kendilerini iyi hissetmelerini sağlayacak renkleri de kullanmak gerekir.
• Tip: Web sitelerinde tipografi önemli bir rol oynar. Markanın sesi olacak görsel yorumlamaları yaparken dikkat çeker. Yazı tipi net ve okunması kolay olmalı ve web sitesinde en fazla 3 farklı yazı tipi tercih edilmelidir.
• Görüntü: İletişim sağlamak kullanılan görseller birer görüntü unsurudur. Bu görsellere, fotoğraf, illüstrasyon, video ve daha bir sürü grafikler eklenebilir. Görsel ögeler tanımlanırken etkileyici olmalı ve şirketin ruhuna hitap etmelidir. Markanın artık soyut bir kavram olmaktan kurtulup somut bir nitelik kazanması yine görsellerle alakalı bir durumdur. Çünkü kullanıcıların tükettiği ilk bilgi görsellerdir. Ziyaretçileri etkileyecek bu adımı belirlerken kullanıcılara profesyonel ve güvenilir bir izlenim oluşturmak için kaliteli görseller kullanılmalıdır.

Bir tasarımın düzen içerisinde olabilmesi için odaklanacak nokta renklerle desteklenirken, arka plan baskınlığı daha az ve seyrek metinlerin tercih edilmesi uyumu yakalamanızı sağlar. Tasarımdaki renk uyumu HTML-CSS’in birlikte çalışmasına benzetilebilir. Zıt renkler tercih etmek, görüntü boyutunu renklere göre ayarlayamamak kullanıcının iyi hissetmesine yardımcı olmayacaktır. Kullanıcı deneyimini rahatsız eden uyumsuzluklar site akışını kesintiye uğratacaktır. Kullanıcı iyi bir deneyim yaşamadığında rahatsız hissedecek ve daha harika olana yönelecektir. Trafik hızını kesintiye uğratacak bu olumsuzluk nedeniyle Google sıralamanızı etkileyecektir.

İyi tasarımlar üretenler kullanıcı dostu deneyimlere katkı sağlar. Bu parametrelere dikkat eden bir tasarımcı hangi yazı tipini, görselleri ve gezinme türünü kullanacağını bilir. Dikkat çekici tasarım üreticileri tüm kriterler arasında bağlantı kurabilen vizyon sahibi kişilerdir. Tasarımda yeni olanlar ise deneyim sahibi olamadıklarından düzene heyecan katmaya meyilli olurlar. Ancak bu heyecan kullanıcı odağının kaybolmasına neden olur.

Nitelikli web tasarım uzmanları, ögelerin kullanım ağırlığı konusunda bilinçlidir. Ne zaman duracaklarını ne zaman hareket edeceklerini bilir ve kısıtlamalarını ona göre kullanırlar. Kullanıcılar için rahat bir gezinmeyi sağlayan tasarımlara hakimdirler. Bu uyumu yakalayabilen tasarımcılar marka kimliğini de en işi şekilde yansıtır. Site içerisindeki her bir kriteri tutarlı kullanır.

Marka yönergeleri tutarlı olma konusunda tasarımcının yanında olmalıdır. Marka kimliğindeki içerikten tutunda renklere kadar olan tüm ihtiyaçların kapsamlı ve açıklanabilir olması gerekir. Bu tarzı kılavuz edinen tasarımcılar her şeyi bir arada görür ve sitenin geneli için yapılacak değişikliklere hazırlıklı olur.

3- Navigasyon Organize Eder

Site navigasyonları organize olan tüm metrikleri birleştirir. Sayfa içerisinde bulunan her şeyin bir mantık akışı ve hiyerarşi içinde olması gerekir. İçerikler hedef kitleyi yormamalı ve her parça incesini ve sonra geleni tamamlamalıdır. Oluşturulacak navigasyon ile her metrik, amaca hizmet etmeli ve markanız hakkında daha nitelikli bilgiler sunarak okuyucuları bir sonrakinin merakı içerisinde çekmelidir.

Başlıklar, içeriklerin oluşmasında ve tarayıcıların web sitenizi aramalarda daha görünür olmasına katkı sağlarken sıralamayı da etkileyecektir. Etkili bir başlığı ortaya çıkarmak, etkili tasarımlara katkı sağlayacaktır. Bir tasarımı hayata geçirmeden önce içerik olarak neler oluşturacağınızı bilmiyorsanız en azından başlıkları belirlemelisiniz. Başlıklar dikkat çekici içeriklerin ve tasarımların ortaya çıkmasında bir pusula görevi görecektir.

Görsellikler oluşurken resim, grafik ve içerikler için bölümler tanımlamak navigasyonun doğru çalışmasını sağlar. Tüm bu elemanları bir düzen içerisinde hayata geçirdiğinizde harika sonuçlar elde etmek kaçınılmaz olacaktır.

4- F Tipografi Okuma

Tipografik okuma algının şekillenmesi sağlar. Portföye sanatsal bir incelik sağlamak için baskı benzeri görüntülerle desteklenen şık yazı tipleri kullanmak gerekir. Baskıda en önemli unsur, duygu ve düşünceleri görsel ögeler yardımıyla yansıtmaktır. Fikirlerin bir yerden bir yere aktarılması için tipografi aynı zamanda bir gemi görevi görür. İçerikleri oluşturan kelimelerin gücünü belirleyecek olan yine yazı ve şekil tipografisidir. Yazarın düşüncelerini belirleyen kelimelerin görselliği bir zincirin halkasını temsil eder.

Yazı tipleri, tasarımın yerleşim ve tonlamalarıyla uyumlu olmalıdır. El yazısı tipler, başlıklar birer dekorasyon olarak kullanılabilir. Bu dekorasyonda dikkat edilecek bir husus uzun metriklerdeki metinlerin blog yazılarında kullanılmaması olacaktır.

Yanlış yazı tipi kullanımı içeriğin gücünü ortaya çıkarmasına engel olur. Tasarımlarda geleneksel ve daha çeşitli yazı tipleri mevcuttur. Uzun blog yazıları için tercih edilecek basit bir yazı tipinin okunabilir olması seo içinde katkı sağlar. Stil tipografileri bir yemekte yer alan baharatlar gibi olmalıdır. Lezzeti ortaya çıkarmak için her bir ögeyi orantılı eklemek gerekir.

5- Görsel Düzen

Tasarımlar, bir markanın kimliğini yansıtma ve iletmede müşterilerin karşılaştığı ilk ögelerdendir. Resimler, grafikler ve çizimler metni destekler. Web sayfasında bazı duraklar oluşturarak ziyaretçileri okurken yormayan tasarımlar ortaya çıkar.

Tasarımların dikkat çekici olması ve heyecan vermesi ilk izlenime olumlu yansır. Bu özelliklere ek olarak animasyonlu geçişler ve kaydırmalı efektler ziyaretçileri dinamik tutar. Gezinirken daha bilinci olmalarına yardımcı olur ve etkileşimli bir deneyim sunar. Bir markanın konusu ve tarzı neyi anlatıyor olursa olsun, görseller bu konuda boşlukları doldurmak yerine tasarıma enerji vermelidir. Web tasarım firmaları ya da yazılım şirketleri bu konuda diğer firmalara göre (bir kamyon şirketi, muhasebeciler vs.) daha üstün kalırken, ortaya çıkardığı ürünlerle de kalitelerini gösterebilmektedir. Dolayısıyla bir tasarıma ihtiyaç duyulduğunda bu şirketin port folyosuna bakmak yararlı olacaktır. Çünkü kendi işinde başarılı olmayan bir yazılım şirketi muhtemelen sizin işleriniz içinde aynı başarısızlığı gösterecektir.

Görseller hazırlanırken piksel değerlerine dikkat edilerek yüksek kalitede olmalıdır. Boyutların uygunluğu, net çözünürlük, dengeli renklendirilen fotoğraflar, ve grafikler kullanılarak tasarım iyi bir görünüme kavuşur. Tasarım ne derece güzel olursa olsun, kötü görsellere sahip olmak tasarımın mahvolmasına neden olabilir.

6- İçerikler Anlam Kazandırır

Bir web sitesini tasarımlarla zenginleştirirken içeriklerle anlamlandırmak gerekir. Metinlerle bir şey anlatmaya çalışırken sistem dili kullanmak yerine kullanıcıya yabancı gelmeyen deyim ve kavramlarla oluşturmalıyız. Organik ve akla yatkın bir biçimde bilgiler ortaya çıkarırken kurallara da dikkat etmek gerekir.

Codeliva yazılım, “dijital dönüşüm” kavramına aşina olmayan kullanıcılar için dijital dönüşüm kavramın anlatmaya çalıştı. Dilimize yeni giren bu kavramlardan başka responsive tasarım gibi kavramlar da gelişen teknoloji ve yazılımlar ile hayatımıza girdi. Web sitesi ile günümüzde doğrudan alakalı SEO kavramı ise yazılım, tasarım ve içerikler ile birebir ilgilidir. Codeliva seo ekibi web sitelerinin uyumluluğuna önem verdiğinden, sizi organik bir şekilde tanıtacak bu gelişimi de yakından takip etmektedir.

Gelişimi hız kesmeyen teknolojik girişimleri sizler için yakından takip ederek istediğiniz bilgilere ulaşıp size aktarmaya çalışacağız. Bu gelişmelerde codeliva, web tasarımın önemini ve etkenlerini ele alırken içerik ve SEO aşaması için kullanılabilecek 10 belirgin sezgiyi sizler için derledik.

• İçeriklerin kaliteli olması, anlaşılabilir ve kullanılabilirlikle doğrudan orantılıdır. Hedef kitle bu durumda yapmasını istediğiniz eylemlere yönelecektir.
• SEO uyumlu içerikler planlanmalı ve bunlar tasarımdan bağımsız olmamalıdır.
• Seo içeriklerinde verilen mesaj, ilgisini çeken eğlenceli yazılardan oluşurken, anahtar kelimeleri cümle içerisinde doğru yerlerde kullanılmalıdır.
• Web sitesinin amaçları belirlenirken, içerik öncelikli yaklaşımlar belirlemek tasarım sürecini en başından gerçek içeriklerle çalışması demektir. Gerçekçi içerikler ise sonraki revizyonların içinde boğulmanızı önlerken, yapılması gereken değişiklikleri tespit etmeyi basitleştirir.

Hedef kitlenizin ihtiyaçlarını karşılayacağınızı düşünüyorsanız mutlaka onları harika içeriklerle karşılayın. Okurken keyif almalarını sağlarken ziyaretçilerinizin bir gün potansiyel müşterileriniz olacağını göz ardı etmeyin.

7- Izgara Tabanlı Düzen

Izgara görünümünü kullanmak, web sayfalarını tasarlamada oldukça faydalıdır. Ögelerin sayfadaki yerleşimlerini pratikleştirir. Duyarlı tasarımlar olan ızgara görünümlü tasarımlar, genellikle 12 sütundan ve %100 genişlikten oluşur. Tarayıcı pencerelerini kullanılan cihaza göre küçültüp, büyütür, genişletir ve daraltır.

Izgara görünümü oluşturulurken öncelikle HTML ögelerinden box-sizing: border-box; özelliklerinin ayarlandığından emin olun. Bu özellik dolgu ve kenarlığın toplam genişlik ve yüksekliğine dahil edilmesine yarar.

İki sütunlu basit bir duyarlı web sayfasını gösterirken sayfa yalnızca iki sütun içeriyorsa ilk önce sütunun yüzdesini hesaplamalıyız. %100 lük için 12 sütun =%8.33 olacak şekilde tasarlanır. Sonra 12 sütun tek tek class="col-" etiketine sayı değerleri girilerek sınıflandırılır. Sola kayan 15 piksellik bir dolguya sahip olması için ise CSS kodları ile aşağıdaki gibi girilmelidir.;

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Her bir satır için HTML <div> tagı açılır ve satırlardaki sütun sayıları daima 12 olur.

Sütunların sola kaymaması için örnekteki gibi stil belirlenir.

.row::after {
  content: "";
  clear: both;
  display: table;
}

Renklendirme yapılması için ise color: #ffffff; şeklinde bir kod kullanılabilir.

Izgara görünümlü duyarlı tasarımlar aynı zamanda mobil dostudur. Bugün web siteleri birden çok cihazda birden çok boyutta kullanılamıyorsa, kullanıcıları kendine çekemez ve Google’daki sıralamanızla mücadele etmek zorunda kalırsınız.

Web sitesindeki tasarımları, mobil uyumlu yapabilmek için uygulanacak en etkili yöntem, siteyi responsive olarak yeniden tasarlamaktır. Aksi durumda, ana sitenizden bağımsız ve optimize edilmemiş kırık bir site ile kullanıcıların karşısına çıkarsınız.

Küçük ekranlı cihazların günümüzde artması, web sitelerini kullanıcılar için mobil uyumlu hale getirmeyi zorunlu kıldı. Kullanıcı deneyiminin ön planda olması düşünülürse UX/UI tasarımların da önemi arttı. Duyarlı tasarımlar oluştururken kullanıcı deneyimi gözetilerek ara yüz tasarımlarını oluşturulması sağlıklı bir web sitesi için gereklidir.

8- Yüklenme Süresi

Görsel hiyerarşi yüklenmeyi basit tutar. Sınırlı sayıda içerikler içeren seçenekler gezinmeyi kolaylaştırır. Gezinmedeki görsel hiyerarşi, kullanıcıların ulaşmak istedikleri yere birkaç adımda erişmesini sağlamaktır. Tutarlı olabilmesi için önemli ayrıntıları atlamadan bu gezinmelerin sağlanması gerekir. Sonsuz sayıda açılır buton ve bağlantılar insanları bunaltırken, amacına uygun olmayan erişimler ise kullanıcıları gereksiz bir arayış içerisine katacaktır.

Sitenizdeki kısımları ve içeriklere ulaştıran adımları açık ve kullanılabilir tasarlamanız gerekir. Bunu yaparken bir sokağı hayal edebilirsiniz. Ulaşmak istediğiniz yere 3 sokak gidebilmek varken 10 sokak gitmeyi ister miydiniz? Sanal gezinme de gerçekte bu örnekteki gibidir. Varyasyonlu olan böyle durumlar da site hızını olumsuz etkileyecektir.

Düzenli ve uyumlu olmayan her element sitenin hızına etki edecek ve kullanıcıların beyni konfor alanlarının dışına çıkacaktır. Kullanıcılar halihazırda birçok şey okuyup gördükleri için bu yavaşlık onları yoracaktır. Kullanıcılara böyle bir deneyim yaşatmamak için, basit ve tutarlı web siteleri yaratmak, onlara daima iyi bir yolculuk sağlayacaktır.

9- Cihaz Uyumları ve Özgünlük

Giderek daha fazla insan internette gezinmek için cep telefonlarını ya da diğer cihazlarını kullanmaktadır. Web sitesi tasarımının da bu anlamda değişikliğe gitmesi beklenir. Kullanıcıların farklı cihazlardan geçişleri dikkate alınarak tüm cihazlara uyumlu responsive tasarımlar üretmek kullanıcılara alışık oldukları deneyimi yaşatırken, konfor alanlarının dışına çıkmasını önler. Tüm ekranlara uyumlu duyarlı tasarımların bir düzen içerisinde oluşmasını sağlamak site sağlığı için önemli bir parametredir.

Mobil ve masaüstü cihazlara uygun tasarımlar ortaya koyarken uyacağımız kuralları bilmek ileride yaşanabilecek olumsuzluklara hazırlıklı olmak için önemlidir. Bu tasarımların özgün olmasını sağlayacak ilkeleri öğrendikten sonra projeyi hayata geçirmek ise en sağlıklı yöntemdir. Çünkü bu özgün tasarımların ortaya çıkabilmesi için bazı metrikleri bilmek gereklidir.

İyi tasarımlar dürüst olmalıdır. Bir ürünü normalde olduğundan daha yenilikçi, güçlü ya da değerli kılabilmek için gerçeklik payını göz önünde bulundurmalıdır. Yerine getirilemeyecek vaatler sunmamalı ve tüketiciyi manipüle etmemelidir.

Bilinçli tüketiciler yapılan pazarlama jargonlarını anlayabilirler. Bu durumda manipülasyon yapılmadan, markaların daha gerçekçi olmasını beklerler. Bir web sitesinin görselleri ortaya konulurken özgünlük ve derinlik barındırması gerçekçi tutumda yaklaşımı destekler. Yanıltıcı referansların olduğu bir sitede bulunan kullanıcılar bunu fark ettikleri anda kandırılmaktan tedirgin olacaklardır. Empati yaparak bu konuya yaklaşmak ve olaya kullanıcı gözüyle bakmak daha özgün tasarımları ortaya çıkaracaktır. Klişeler ve ne anlattığı belirsiz olan pazarlama yöntemlerine kalkışmak kullanıcılarla olan bağlantıları zayıflatacaktır. Kullanıcılar bu durumu hemen anlar ve iyi hissetmezler.

Web sayfası oluşturulurken özgün ve gerçekçi içerik ve tasarımlar kişilere değer katmalıdır. Markaları yansıtacak bu metrikleri oluşturmanın en önemli aşaması ise markaların da aynı öngörüye sahip olması gerekir.

Codeliva web tasarım ekibi diyor ki; 2021’de en çok kullanılan bu ilkeler ile siz de kurumsal kimliğinizi doğru ve tutarlı bir şekilde yansıtabilirsiniz. Mobil ve web uyumlu, özgün ve estetik tasarımlar ile kurumsal kimliğinizi inşa edebilirsiniz.