Duyarlı Web Tasarımı En İyi Uygulamaları ve İpuçları

Google, mobil uyumlu sitelere öncelik vermeye devam ederken, işletmeniz için duyarlı bir web sitesine sahip olmak giderek daha önemli hale geliyor. Web siteniz duyarlı olduğunda, tüm cihazlarda (mobil, tablet, masaüstü vb.)

Mevcut sitenizi elden geçirmek göz korkutucu görünse de, duyarlı web sitesi tasarımı zor olmak zorunda değildir. Aşağıda, harika, kullanışlı bir web sitesi ürününü kolayca ve az uğraşla üretmenize yardımcı olacak bazı kullanışlı ipuçları ve en iyi uygulamalar bulunmaktadır.

Tarzınızı Tanımlayın

Renk Paleti Oluşturma

İster önceden tanımlanmış bir marka renk paleti ile çalışın, ister kendi renk paletinizi yaratın, iyi tanımlanmış bir görsel hiyerarşi oluşturabilmeniz için yeterince zıt renkler eklemeyi unutmayın. Nötr renklerin çeşitli tonlarını eklemek, tasarımlarınızda size çok fazla esneklik sağlayacaktır.

Önce mobil düşünün

Web öğelerinizin önce küçük mobil cihazlarda nasıl görüneceğini düşünün ve ardından daha büyük görüntü alanı boyutlarına uygulayın. Örneğin, düğmeleriniz parmakla basılacak kadar büyük ve diğer tıklanabilir öğelerden yeterince uzakta mı?

Stil kılavuzunuzu daha önce değil, ilk yerleşimlerinizden sonra oluşturun

Bazı insanlar, yüksek kaliteli bir prototip veya modele başlamadan önce bir stil kılavuzu oluşturmayı ve web öğesi stillerini tanımlamayı sever. Bununla birlikte, öğeler sayfada konumlandırıldığında ve birbirine göreli olarak görüntülendiğinde, sayfanın genel tasarımı kaybolabilir. Başlamak için birkaç maket oluşturun, stillerinizi oluşturun ve ardından gerekirse kalan sayfalarınızı oluşturun.

Tutarlı demek sıkıcı olmak zorunda değildir

Kullanılabilirlik buluşsal yöntemleri önemlidir, ancak aynı zamanda web'deki milyarlarca diğer web sitesinden öne çıkmaktadır. Farklı bir şey denemekten, daha akılda kalıcı olmaktan ve web sitenizin markasının kalabalığın arasından sıyrılmasına yardımcı olmaktan korkmayın. Web siteniz yaratıcı ve aynı zamanda çok kullanışlı olabilir. Harika bir UI tasarımcısı veya dijital sanat yönetmeni bu iki unsuru dengeleyebilmelidir.

Stil vermek ve standartlaştırmak isteyebileceğiniz bazı öğeler şunları içerir:

• Başlık Düzeyleri: H1, H2, H3…
• Ana veya Kahraman görüntüleri
• Birincil Navigasyon
• İkincil Navigasyon
• Vücut kopya
• Numaralandırılmış ve madde işaretli listeler
• Çağrılar veya rozetler
• İçerik görüntüleri için tedavi
• Alıntı stili
• Widget'lar (döndürücüler, sosyal yerleştirmeler, takvimler vb.)
• Büyük harekete geçirici mesaj düğmeleri
• İkincil düğmeler veya metin bağlantıları
• Form öğeleri
• Dipnotlar ve yasal fare türü
• sosyal paylaşım

Tip

Blokları Kopyala

Hiyerarşinizi yeniden tanımlamanıza yardımcı olması için harf aralığı (izleme), kenar boşlukları ve satır aralığı (önde gelen) ile oynayın. Boşluk ne kadar darsa, metin o kadar ağır ve klostrofobik görünecektir.

Masaüstü ekranınızın solundan sağına kadar uzanan uzun metin bloklarının göze çok zarar verebileceğini unutmayın. Mümkün olduğunda daha dar bir kopyalama bloğu kullanın. Bununla birlikte, çok fazla boşluk, kurak, dağınık bir his yaratabilir.

Onu kırmaktan korkma

İçeriği çok ağır olan bir web sayfanız varsa, kısa alıntılar, belirtme çizgileri, resimler, stil listeleri, tablolar vb. ile içeriği biraz ayırın. Sayfayı ilginç ve bilgilendirici tutmak için akordeonlar, açılır menüler ve atlıkarıncalar da kullanabilirsiniz. .

Evet, insanlar aşağı kaydırır

Web sayfanızdaki her şeyin dijital ekranın üzerinde görünmesi gerektiği şeklindeki eski okul tuzağına düşmeyin. Bir kullanıcıyı daha aşağı yönlendirmek için en önemli veya ilgi çekici içeriği sayfanın üst kısmına yakın bir yerde tutun. Bu, yaratıcı ancak açıklayıcı bir başlık, ilgi uyandıran bir giriş cümlesi veya güçlü bir resim olabilir.

İLİŞKİLİ

2020'nin Önde Gelen Tasarım Trendleri

Boyutlandırma Tipi

Genel olarak, duyarlı bir web sitesi için 14-18 piksellik bir yazı tipi boyutuna sadık kalın. Genel olarak, bu daha büyük kopya blokları için basit sans veya serif yazı tiplerini kullanın ve orta derecede zıt bir yazı tipi rengiyle açık bir arka plan üzerinde tutun. Ana başlık daha büyük olabilir, ancak mobil boyutta bir kesme noktasıyla karşılaşıldıktan sonra biraz daha küçük şekillendirilmesi gerekebileceğini unutmayın.

Tip Renk

Yazı renginin püf noktası, kolayca görebileceğiniz arka plandan yeterli kontrasta sahip olması gerektiğidir, ancak çoğu tasarımcının bilmediği şey, yazı tipinin bazen çok fazla kontrasta sahip olabileceği ve göze sert gelmesi, titreşiyormuş gibi görünmesidir. görüntülendiğinde. Daha koyu bir arka plan üzerinde daha açık renkli yazı tipini dikkatli bir şekilde ve yalnızca daha küçük metin blokları için kullanmayı deneyin.

Tip Ağırlık

Daha ağır yazı tipi stillerinin küçük boyutlarda okunması zor olabilir ve daha büyük boyutlarda sayfanın karanlık ve ağır görünmesine neden olabilir. İnce ve hafif yazı tipi stilleri, retina ve retina tipi ekranlarda harika görünür, ancak birçok standart çözünürlüklü ekranda soluk görünebilir.

Navigasyon

Hamburgerler!

Navicon, aynı zamanda üç istifleme çizgisine sahip küçük bir sandviç veya hamburger gibi görünen simgedir. Genel kullanıcı demografinizin çevrimiçi teknolojiler konusunda o kadar bilgili olmadığını düşünüyorsanız, her zaman Navicon'un yukarısına veya yanına “menü” kelimesini ekleyin. Bugüne kadar yapılan kullanıcı çalışmaları, Navicon'un yanına veya üstüne Menü veya Gezinti kelimesini eklerseniz, bir kullanıcının sitenize göz atmaya daha uygun olduğunu göstermektedir.

Uzun kaydırma sayfasının altına bir 'Başa Dön' düğmesi ekleyin

Araştırmalar, birçok mobil cihaz kullanıcısının, mobil web tarayıcılarında bir web sayfasının en üstüne nasıl kolayca atlanacağını bilmediğini söylüyor. Bunu çözmek için web sayfanızın alt kısmında bir 'başa dön' düğmesi sağlayın. Bu, altbilgide yansıtılmamışsa, kullanıcının site navigasyonuna kolayca erişmesini sağlar.

Başka bir seçenek de yapışkan bir gezinme oluşturmaktır. Bu, sayfayı ne kadar aşağı kaydırırsanız kaydırın, her zaman ekranınızın üst kısmına yapışan bir üst site gezinme çubuğudur. Bu rotaya gitmeyi seçerseniz, sabit gezinmenizin 100 pikselden fazla olmamasına dikkat edin, aksi takdirde daha küçük görüntü alanı boyutlarında sayfa içeriğiniz için yer kalmayabilir.

Tasarım Sözlüğü:

Çağırmak
sayfanın geri kalanından daha güçlü bir şekilde işlenmiş ve dikkat çekmeyi amaçlayan kısa bir metin parçası.

Blok Kopyala
gruplandırılmış bir paragraf veya metin paragrafları dizisi.

(dijital) kat
web sitesi tasarımında (“kaydırmanın üstünde ” ile birlikte) web sayfasının kaydırılmadan görünen kısmına atıfta bulunmak için kullanılır. Ekran boyutları büyük ölçüde değiştiğinden, katlamayı tanımlayan piksel sayısı için belirlenmiş bir tanım yoktur.

şerif
belirli yazı tiplerinde bir harfin bir vuruşunu tamamlayan hafif bir çıkıntı.

Sans Serif
sans – serif , sans serif , gotik, san serif veya basitçe sans yazı tipi, vuruşların sonunda " serif " adı verilen küçük çıkıntı özelliklerine sahip olmayan bir yazı tipidir. Terim, Fransızca "yok" anlamına gelen sans kelimesinden ve Hollandaca "çizgi" anlamına gelen schreef kelimesinden gelen " serif " kelimesinden gelir.

Tip (Tipografik) Ağırlık
açık, kalın, ekstra kalın vb. olarak ifade edilen, konturların göreli kalınlığından kaynaklanan bir yazı tipinin karakterlerinin göreli koyuluğu.

kullanıcı
bir şeyi, özellikle bir bilgisayarı, cihazı veya diğer makineleri kullanan veya çalıştıran kişi.

Görünüm alanı
bilgileri görüntülemek için bir ekran üzerinde çerçeveli bir alan.

Beyaz boşluk
sayfa düzeninde, illüstrasyonda ve heykelde beyaz boşluk genellikle negatif boşluk olarak adlandırılır. Bir sayfanın işaretlenmemiş bölümüdür: kenar boşlukları, oluklar ve sütunlar, yazı satırları, grafikler, şekiller veya çizilen veya tasvir edilen nesneler arasındaki boşluk.