Web sayfanızı böyle tasarlarsanız, bayılacaksınız
Bir Jun'un kılavuzu: AppSo (WeChat herkese açık hesap AppSo) daha önce Danimarkalı tasarımcılar tarafından önerilen "Fonksiyon Yayılmasından Kaçınma" ve "KISS Prensibi" üzerine bir makale de dahil olmak üzere birkaç tasarım ilkesini paylaştı. Bugün bu Rus tasarımcı Nick'i paylaşıyorum Babich tarafından tercüme edilmesi için yetkilendirilen makale, sizi "KISS Prensibi" ni anlamanızı sağlayacak.
Minimalizm ilk olarak İkinci Dünya Savaşı sonrası sanat hareketinde ortaya çıktı . Modern web tasarımında minimalizm, aynı zamanda ana akım tasarım tekniklerinden biridir. Bazen "içerik biçimden büyüktür" ifadesinin tipik bir temsilcisi olarak kabul edilir.
Doğru sözcüklerle minimalizm, tasarımcıların "kullanıcı görevlerini basitleştirme" ye daha fazla dikkat etmesini sağlayabilir. Ek olarak, daha hızlı web sayfası yükleme hızı, farklı boyutlardaki çeşitli cihazlarda daha iyi uyumluluk gibi başka avantajları da vardır.
Minimalizmin savunduğu "basitlik" basit görünüyor, ancak özüne "basitlik ama indirgeme değil" fenomeni üzerinden bakılıyor. Bu makale, minimalizmin dikkat etmesi gereken çeşitli tasarım ilkelerini ve durumlarını anlamanıza yardımcı olacaktır.
1. Minimalist web tasarımı nedir?
Minimalizm ilk olarak 21. yüzyılın başlarında popülerdi. Günümüzde, en popüler tasarım trendleri (düz tasarım, web sitesi başlık resimleri ve gizli küresel gezinme vb.) Minimalizmden doğrudan etkilenmektedir.
Google genellikle minimalist web arayüzünün öncüsü olarak anılır. Geçen yüzyılın 90'lı yıllardaki beta sürümünden bu yana minimalizm, her zaman kurallara uyan arayüz tasarımı olmuştur.
Google çeşitli ürünler piyasaya sürmüş olsa da, ana sayfa tasarım stili son 15 yıldır temelde aynı kaldı.
Google arama ana sayfası tasarımının başarısı, minimalizmin popüler gelişiminin temelini attı.
Minimalist web tasarımının özellikleri ile ilgili olarak, farklı görüşler olsa da genel olarak aşağıdaki temel olarak kabul edilen yönleri içerir:
1. Yalnızca temel unsurları saklayın
Minimalizmin özü de kulağa çok basit geliyor Az Daha Çoktur. Web tasarımında, gerekli unsurlar kurulu tasarım ortamında korunduğu sürece basit olmalı ama azaltılmamalıdır.
Minimalist web tasarımının stratejisi, gereksiz öğeleri veya kullanıcı görevlerini desteklemeyen içeriği ortadan kaldırarak sayfayı basitleştirmektir. Çünkü Ekranda ne kadar az öğe varsa, öğelerin geri kalanına o kadar çok dikkat .
Yani ekranda sadece tek bir eleman varsa o elemanın arkasındaki bilgi kesinlikle başarılı bir şekilde kullanıcıya iletilebilir.
Sayfada ne kadar az öğe olursa, kullanıcının bilişsel yükü o kadar düşük olur.
İşleri basit tutmak ama azaltmamak, kullanıcının dikkatini etkileyen herhangi bir arayüz öğesini kaydetmektir. Ancak aynı zamanda, kullanıcının ihtiyaç duyduğu öğelerin kaldırılmamasına veya gizlenmemesine dikkat edin, aksi takdirde kullanıcının ilk görevi daha karmaşık hale gelecektir.
ve bu yüzden, Tasarım, içeriği çekirdek olarak almalı ve pek çok ikincil öğeyi (ana gezinme gibi) kaydetmelidir, böylece kullanıcıların bu kadar kafası karışmasın .
2. Negatif alan
Minimalist tasarımın en sık kullanılan unsurları nelerdir? Cevap hiçbir elementin kullanılmadığı şeklindeyse, bu cevap şaşırtıcı değildir.
Negatif alan (beyaz boşluk olarak da bilinir) minimalist tasarımın en önemli özelliğidir ve aynı zamanda minimalist tasarımı en parlak nokta yapan bir özelliktir. Ayrıca, kullanıcının görsel akışını yönlendirmek de çok yararlıdır:
Bir elemanın etrafındaki negatif boşluk ne kadar fazlaysa, o elemanın fark edilmesi o kadar muhtemel .
Negatif alan, kullanıcıların en aşina olduğu minimalist tasarım öğesidir. Resim kaynağı: Bouguessa
3. Görsel özellikler
Minimalist tasarımda her detayın kendi değeri vardır. Öyleyse geriye kalan özde:
- Düz tasarım . Minimalist arayüzler genellikle düz tasarım öğeleri kullanır. Düz arayüzde parlak noktalar, gölgeler, eğimler veya arayüzü daha üç boyutlu yapan herhangi bir öğe göremezsiniz.
Modern web tasarımının "altın ortağı" olan düz tasarımla birleştirilmiş minimal görsel hiyerarşi. Resim kaynağı: F-Secure
- Canlı resim . Minimalist tasarımda resimler, en temsili sanat formudur. Resimler, tüm dünyanın duygularını birbirine bağlayabilir ve belirli bir atmosfer yaratabilir. Ancak bir resim seçerken şunlara dikkat etmelisiniz: Minimalist tasarımı temsil eden tüm görsel özellikler seçilen resimde sunulmalıdır. . Çok sayıda dikkat dağıtıcı unsur içeren resimler gibi resimlerin yanlış seçilmesi ters etki yaratabilir.
Minimalist tasarımın en temsili sanat biçimi - web sitesinin ilk görüntüsü, tüm web sayfası çarpıcı bir görüntüdür. Resim kaynağı: Ada Blackjack
- Daha az renk değişimi . Minimalist tasarım, görsel çekiciliği artırmak için yalnızca renk öğeleri kullanır, başka hiçbir tasarım öğesi eklenmez. Ne kadar az renk o kadar iyidir, bu nedenle görsel hiyerarşiyi tasarlarken yenilik olmalıdır.
Kullanıcılar ne kadar az görsel bilgi görürse, renk unsurları o kadar belirgin ve site üzerinde o kadar etkili olur. Resim kaynağı: Mixd
- Göz alıcı tipografi . Göz alıcı dizgi, metin ve içeriğin daha büyük görsel çekicilikle daha fazla dikkat çekmesini sağlar. Kullanıcıları en çok etkileyen minimalist yazı tipi tipografisi, genellikle göz alıcı tasarım stillerini ve yazı tiplerini kullanır. Bununla birlikte, göz alıcı yazı tipi dizgisinin çekici olmasının bir ön şartı vardır: Kullanıcılar için metin bilgisinin değeri vardır.
Görsel çekicilik yaratmak ve bilgileri aktarmak için tipografiyi kullanın.
- Kontrast . Tasarım öğeleri azaldığı için görsel hiyerarşiyi tasarlarken yenilikçi olmak gerekiyor. Aşağıdaki örnekte, beyaz arka plan ile siyah mücevher arasındaki kontrast çok keskindir.
Çok sayıda minimalist tasarım, sayfanın en önemli öğelerini tek bir tonla vurgulayarak yalnızca bir parlak renk kullanır. Resim kaynağı: PLASTİK DEĞİLİZ
İkincisi, minimalist web tasarımının en iyi uygulamaları
Minimalizm kulağa her şey basitleştirilmiş gibi geliyor, ancak "durur ve konuşur sırtınızı incitemez" Öğeler nispeten az olduğu için değil, kullanılabilirlik de azaldı .
1. Tek ekran, tek odak
"Tek sayfa, tek konsept" ilkesinden hareketle tasarım yapılırken her sayfada / ekranda çekirdek olarak tek bir görsel içerikle desteklenen sadece bir konsept belirir.
Resim kaynağı: Bureau Tonic
2. "Sayfanın üst kısmı" bekleniyor
Sayfanın üst yarısında yeterli negatif boşluk bırakın ve yüksek kaliteli öğeler ekleyin Sayfa kaydırıldıkça, içerik yoğunluğu artmaya devam eder.
Apple ana sayfası (sayfanın üst yarısı)
Bir Not: AppSo (WeChat herkese açık hesap AppSo) daha önce bu makalenin orijinal yazarı Nick Babich tarafından ilginizi başarıyla çeken web sitesi banner'ı hakkında başka bir makale paylaştı. Neyi doğru yaptınız? , "Üst kısmı katla", yani sayfanın üst kısmı olarak belirtilen bu kısım, kullanıcının URL'yi tıkladıktan sonra doğrudan gördüğü sayfadır.
3. Kısa metin
Strunk ve White'ın birlikte yayımladıkları "The Elements of Style" adlı kitapta "gereksiz kelimeleri ortadan kaldırma" fikrini ortaya attılar. Bu aynı zamanda minimalist tasarım için de geçerlidir - sayfa metnini dikkatlice düzenleyin, yalnızca gerekli unsurları bırakın, ancak özü bırakılmalıdır, bu da mesajı net bir şekilde iletmenize yardımcı olabilir.
Gereksiz tüm metinleri ortadan kaldırın ve kullanıcılarla en özlü şekilde etkileşim kurun. Resim kaynağı: BFF
4. Gezinmeyi basitleştirin (ancak gizlemeyin)
Basit gezinme her zaman web tasarımının hedeflerinden biri olmuştur. Ancak basitlik, doğrudan saklanmak anlamına gelmez. Hamburger menüsünü kullanırsanız, arayüz içeriğini basitleştirmek için kullanmadan önce makul bir nedeniniz olduğundan emin olun. Aynı zamanda, hamburger menüsü navigasyonun keşfedilebilirliğini azaltacaktır. Çoğu durumda, her zaman görünür olan gezinme seçenekleri daha iyidir.
Bir Not: Hamburger menüsü gezinme yöntemlerinden biridir.Genellikle, gezinme çubuğunun sol tarafında üç yatay çubuktan (üç katmanlı hamburger) oluşan bir simge bulunur.Bu hamburger menüsüdür.
Önce aşağıdaki şekildeki navigasyona bakın:
Ana gezinme menüsü yalnızca kullanıcı eylemi altında görülebilir
Ardından aşağıdaki gezinmeyi karşılaştırın:
Her zaman görünür gezinme menüsü
5. Animasyon ekleyin
Tasarımda hareketin etkisi gittikçe büyüyor. Dinamik bir etki yok, minimalist tasarım bile "bankta oturuyor" olabilir. Ancak, hareket efektleri eklemek yine de minimalist tasarım ilkelerini takip etmelidir: Kısa ve öz ve yalnızca gerekli öğeleri saklayın .
Dinamik efektler, etkileşim sürecini daha dinamik hale getirir. Resim kaynağı: İnterkom
6. Açılış sayfası ve portföy sayfası minimalist tasarım olmalıdır
İçerik odaklı minimalist tasarım her web sitesi için uygun olsa da, bazen minimalist estetik "yanlış yazılmış" olabilir. Ancak minimalist tasarım, açılış sayfaları ve portföy sayfaları için uygun olmalıdır. Örneğin, aşağıdaki örnekte, tasarım amacı kısa ve nettir ve içerik nispeten küçüktür.
Tasarımcı Brain Danaher'in portföy sayfası - birçok tasarımcı buna "minimalist tasarım web sitelerinin klasik bir örneği" diyor.
Minimalist tasarımı daha karmaşık web sitelerine etkili bir şekilde uygulamak kolay olmayabilir. Web sitesinin karmaşık içeriği nedeniyle, eksiklikleri birkaç unsur olmalıdır. Bu duruma yanıt olarak, bir açılış sayfası tasarlamak için minimalizm kullanabilir ve ardından açılış sayfası aracılığıyla daha fazla ayrıntı içeren bir sayfaya bağlanabilirsiniz.
3. Kaynaklar ve araçlar
- Minimalist palet - Yaygın siyah beyaz tahtalarla karşılaştırıldığında, minimalist tasarıma uygun daha popüler paletler bulabilirsiniz.
- Renk Kontrastı Denetleyicisi - Arka plan ve ön plan renk kodlarını girin ve denetleyici hangi iki renk kombinasyonunun en uygun olduğunu bilmek için kontrast verilerini hesaplayabilir.
son sözler
Kullanıcı görevlerini desteklemeyen gereksiz öğeleri veya içeriği ortadan kaldıran minimalist web siteleri, arayüzü basitleştirme yolunda daha kararlı hale geliyor. Bu tür siteler neden bu kadar ilham verici? Cevap bir bakışta nettir: tasarımı dikkate alır "Basitlik" ile "Kullanılabilirlik" İki yön.
Kolayca gezinilebilen "hafif yüklü" web sayfaları, yine de bilgi aktarabilir ve diğerlerinden daha az olamaz. Neden açık mavi ve koyu kırmızı, çiçekler arasında en iyisidir . Basit tut, hak ediyorsun.
Teşekkür ederim!
Yazar: Nick Babich, yazılım mühendisi, UI ve dikkat UX.
Çevirmen: Jorri
Orijinal yetkilendirme, Web Tasarımı için İşlevsel Minimalizm'den çevrilmiştir.
Resim Pexels'den
Bu makale, cep telefonlarını daha kullanışlı hale getiren AppSo tarafından çevrilmiş ve üretilmiştir. WeChat genel hesap AppSo'yu takip edin ve bu makaleyi almak için "UI" ye yanıt verin. Sizi rahat ettirmek için tasarımcı havaya uçtu. Doğrudan müşteri üzerinde görüntülemek için tıklayın.
