Duyarlı Tasarım İlgi Çekici Nasıl Tutulur
Duyarlı web tasarımı popüler ve kesinlikle bir sır değil. Uzmanların aradığı şey ve pek çok marka değişiyor. Sadece mobil kullanıma hazır bir site oluşturmak değil, sitenizi masaüstü, tablet veya akıllı telefon aracılığıyla olsun her tarayıcı boyutuna görünür hale getirmekle ilgili değildir.
Duyarlılık için tasarlamanın zor kısmı, büyük ve küçük görünen bir site oluşturmaktır. Tasarım programınızı kırmadan ve işe gitmeden önce pek çok şey düşünmelisiniz. Tamamen bitmiş ürüne değdiğini gösteren ekstra bir adımdır. Bir tasarımcının yanıt vermeyi planladığı zaman çok belirgindir; siteler gerçekten çıplak ve sıkıcı görünme eğilimindedir.
Tasarımcıların duyarlılık alanları boyunca yaratıcılıklarını sürdürmeleri kesinlikle bir zorunluluktur. Daha fazla kişi tablet ve akıllı telefon kullanarak, herkesin sitenizi görüntüleyebildiğinden emin olmak istersiniz. Duyarlı web için tasarlarken yaratıcı ve etkili kalmanıza yardımcı olacak bazı ipuçları.
1. Mükemmel tipografi kullanın
Duyarlı siteler ile, daha küçük bir ekranda neyin iyi görüneceğini düşünmelisiniz. İyi tipografi, herhangi bir iyi web tasarımının temelidir, ancak duyarlı web tasarımında neredeyse gerekli. Ekran boyutları azaldıkça, elemanların çoğu dönüşmeli, küçülmeli veya hareket etmelidir. İlk ve en önemlisi, tipografiniz bu yeteneğe sahip olmalıdır.
İkinci olarak, metinde farklı başlıklar ve çeşitli boyutlar kullanmalısınız. Şimdi, masaüstü tasarımlarımız için genellikle çok büyük boyutlu başlıklar ve başlıklar kullanıyoruz. Bu daha küçük boyutlarda düşündüğünüz için bütünüyle devam etmek zorunda değil. Sadece bir eklenti kullandığınızdan emin olmak FitText, metninizin boyutlarını azaltmak için. Bu yardımcı olur.
demirci Çok ilginç bir görünüm ve his yaratmak için birçok farklı yazı tipi kullanır. Ayrıca bu yazı tiplerinin boyutlarını site genelinde değiştirir. Masaüstü modunda ilginç olan, metnin ve paragrafların farklı sütunlarda sıralanma şeklidir. Pencere ölçeklendiğinde, metin bir sütuna çöker. Neyse ki, metin aynı ölçeği ve stili koruyarak tutarlı kalır.
Smashing dergisi aynı şeyi yapmaya eğilimlidir. Pencerenin küçültülmesinden sonra tasarımın (reklamların) sağ tarafından tamamen kurtulurlar. Ancak, metin pencerenin içinde sarar ve stilleri, renkleri ve boyutları tutarlı kalır.
2. Mükemmel görüntüler kullanın
Tipografi gibi görüntüler, herhangi bir web sitesi tasarımında son derece önemlidir. Ayrıca tipografi gibi, duyarlı tasarımlarda, bir siteyi daha küçük ekranlarda görüntülediğinizde, resimleriniz de daha küçük veya küçültülmüş olarak görünmelidir. Duyarlı bir tasarımda kullanılabilecek tonlarca farklı düzen ve farklı görüntü boyutu vardır. Seçtiğiniz görsellere ve bunları nasıl kullandığınıza dikkat etmeniz önemlidir, çünkü şüphesiz değişecektir. Ekranlar büyüdükçe veya küçüldükçe, görüntüler şekil değiştirir ve görüntünün belirli kısımlarını ortaya çıkarır veya keser.
İdeal olarak, büyük, fotoğrafik resimlerinizin, pencereler değiştiğinde kırpılabilecek hiçbir grafik içeriği bulunmadığından emin olmak istersiniz. Ayrıca, grafik görüntüleri oluştururken, hızlı yüklenen ve daha küçük bir ekranda görünecek bir resim oluşturduğunuzdan emin olmanız gerekir. Bu yüzden tasarımcılar düz tasarımı kucakladılar. Bu sadece daha kolay.
Pandiscio'da, önce büyük başlık görüntüsünün bir masaüstünde nasıl göründüğünü fark etmelisiniz. Dolu, kenarlara kadar uzanır ve oldukça yüksek kalitedir. Pencere boyutunu küçülttükçe, görüntüler küçülür, şekil değiştirilir (dikdörtgenden kareye) ve kırpılır. Ekranın boyutu değiştiğinde iyi görünen görüntüler bulmuşlar.
KinHR, fotoğrafların yanı sıra birçok farklı grafik elemanı kullanan bir sitedir. Büyük ve küçük olduğunda, başlık resimlerinin Pandiscio web sitesinde olduğu gibi küçüldüğüne dikkat edin. Bununla birlikte, vücuttaki grafiksel öğelerle, görüntüler küçülüyor, şekillerini koruyor ve kırpılmıyor.
3. Navigasyonda uyumayın
Kullanıcıların sitenizi nasıl kullanacaklarına dair bir ipucu yoksa, boş bırakın. Duyarlı tasarımla uğraşırken navigasyon daha zordur, çünkü peyzaj tasarımları için navigasyon oluşturmak için kullanılırız. Şimdi, portre boyutlarına uyacak şekilde kolayca yoğunlaştırılabilen gezinme oluşturmak zorundayız.
Bir avuç bağlantınız olduğunda büyük bir sorun değil. Menünüzü daha küçük veya yoğunlaştırılmış bir şekilde en üste getirebilir veya görüntüleyenler için bir açılır menü oluşturabilirsiniz. Büyük önem taşıyan şey, daha fazla içerik barındıran web siteleriyle gezinmeyi nasıl ele aldığınızdır.
Mashable, tonlarca kategoriye ve hatta daha fazla makaleye sahip olduğu için tonlarca bağlantıya sahiptir. Bunun da ötesinde, bağlantılı olması gereken kendi şirket merkezli sayfalarına da sahipler. Mashable, daha küçük tarayıcılar için ekranın sol tarafında bir açılır menü oluşturmaya karar verir.
Monocle, siteleri için iki kapsamlı gezinme platformuna sahiptir. Daha küçük tarayıcılar için, en fazla içerik için bir aşağı açılan menü oluşturdular ve ikinci gezinme düzeyini daha da yoğunlaştırdılar.
4. Kullanımı eğlenceli hale getirin
Online linklere tıkladığınızda, muhtemelen orada oturup bir şeyler görmeden önce bir şeyler yüklemeyi beklemeniz gerekir. Telefonlarda, daha fazla içeriğe geçmek için bir sonraki düğmeyi tam olarak bulmak zorunda kalmak ekstra can sıkıcıdır. Bunun gibi şeyler eğlenceli değil, sezgisel değil.
Ayrıntılara dikkat çekmek ve sitenizi daha sezgisel hale getirmek, sitenizi daha paylaşılabilir hale getirir. Herhangi bir tarayıcı boyutunda bir siteyi kullanmak nasıl bir şey düşünün. Bir eylem için çağrıldığında web sitelerinin ne yapması gerektiğini düşünün. Bunları bulun ve bunları düzeltin, böylece siteniz kullanımı kolay, eğlenceli ve sezgiseldir. Aynı zamanda biraz daha ilginç hale getirir!
Çamur, geçişlerine dikkat ederek sitelerini daha ilgi çekici hale getiriyor. Bir çok öğesinin aniden hareket etmesini ve gösterilmesini değil, aşağı doğru kaymasına ve kaybolmasına izin vererek çok şık bir his yaratırlar. çok büyük bir fark yapar.
Neue Yorke, portföy öğesinden öğeye giderken çok fazla hareket kullanır. Yine, son derece yüksek bir izlenim yaratıyor ve izleyicileri yakında açıklanacak olanlarla ilgilenmeye devam ediyor.
5. Kutunun dışında düşünün
Her şey başarısız olduğunda, sadece yaratıcı olun. Duyarlı web tasarımı, web siteleri oluşturma şeklimizde bir kısıtlama anlamına gelmez. Kodlama veya tasarım yoluyla olsun, her zaman yaratıcılık kullanmak için yer vardır.
Enso, duyarlı olma şansı olmayan bir site yarattı. Boyut küçüldükçe düzeni biraz değiştirdiklerini unutmayın, ancak markalarını ve yaratıcılıklarını korudular.
TBWA, bazı harika tasarıma sahip bir siteye sahiptir. Ama aynı zamanda harika görüntülere de sahipler. Ve ayrıca harika bir tipografi var! Çok benzersiz ve ilginç bir yanıt veren web tasarımı yapmak için hepsini burada kullandılar.
Sonuç
Duyarlı tasarımda veya herhangi bir web tasarımında yaratıcılığınızı korumak, konseptinizi çizmek ve hedeflerinizi korumak için gözden geçirmek kadar basittir. Eğlenceli şeyler, web sitenizin nasıl çalışıp çalışmasını istediğinizi planlamaya başladığınızda daha kolay gerçekleşir. Duyarlı web tasarımı, tasarımcıların korktuğu bu büyük ve yüce bir görev olmak zorunda değildir. Oldukça basit! Önceden tartıştığımız tüm şeyleri akılda tutun ve bu dünyanın dışında olan siteler yaratın! Duyarlı web tasarımınızla iyi şanslar.
Duyarlı tasarımı etkilemek için hangi ipuçlarını paylaşırsınız? Çok yaratıcı duyarlı bir tasarım buldunuz mu? Yorumlarda bize bildirin.