ICONS8'den Ah: Bir Sistem Gibi Davranan Stil Kitaplığı

Yönetici Özeti

Ürün, web, e-posta, dokümanlar ve reklamlarda tek bir görsel ses istiyorsunuz. Ayrıca zamanında teslimat yapmak istiyorsunuz. Her ekran için özel görseller ölçeklenmez. Stok resimler çatışıyor. Ah, bu açığı stil aileleriyle çözüyoruz. Her aile, bir günde benimseyebileceğiniz ve aylarca uzatabileceğiniz küçük bir görsel dildir. Kazanç basittir. Ekranlar birbirine dikilmiş gibi görünmeyi bırakır ve tek bir ürün gibi okumaya başlar.

Kutuda neler gönderilir

Ah, sanat eserlerini tutarlı stillere göre gruplandırıyoruz. Bir stilin içinde karakterler, nesneler ve arka planlar oranları, çizgi ağırlığını, aralık ritmini ve renk mantığını paylaşır. Parçalar dikişsiz birleştirilir. Açılış sayfaları için kahraman sahneleri, açıklayıcılar için orta sahneler, boşluk, hata ve başarı için küçük noktalar ve ayrıca düzenleri düzenli tutan nötr arka planlar elde edersiniz. Dosyalar, kontrole ihtiyaç duyduğunuzda SVG olarak, müdahaleye ihtiyaç duyduğunuzda ise PNG olarak gelir. Her ikisi de yoğun ekranlara dayanır.

Ekipler bunu gerçekte nasıl kullanıyor?

Ürün tasarımı. Boş durumlar küçük bir noktaya ve net bir eyleme sahip olur. İlk katılım üç aşamaya dönüşür: başlangıç, ilerleme, başarı. Özellik sayfaları, yapılması gereken işe dair ipuçları veren bir orta sahneyi ödünç alıyor. Kopyayı resme yakın tutarsınız, böylece anlam bir çift olarak seyahat eder.

Pazarlama. Kampanyayı tek bir kahraman ayakta tutuyor. Mahsuller kare, dikey ve yatay çerçeveler için hazırdır. Yinelenen bir karakter veya aksesuar, kanallar arasında tanınırlığı taşır. E-posta, sıkı sıkıştırmayla PNG kullanır. Sosyal aynı fikri farklı oranlarda elde ediyor.

Dokümanlar ve yardım. Karmaşık adımlar, belirtme çizgisinin yanında kompakt bir sahne oluşturur. Süs tüyü yok. Görseller geçimini sağlıyor.

Bir tasarım sistemine sığdırın

Ouch stilini yazı, belirteçler, simgeler ve ızgaranın yanında bir alt sistem olarak ele alın. Ona istikrarlı bir ana sayfa ve tek sayfalık bir kural seti verin.

 /marka/görseller/

  /ah-tarzı-a/

    README.md

    tokens.json

    kahraman/

    sahneler/

    noktalar/

    arka planlar/

README yerleştirmeyi, izin verilen ürünleri, dışa aktarma boyutlarını ve ayrılmış kullanımları açıklar. Belirteç haritası dolguları ve konturları marka renklerine bağlar, böylece tema değişiklikleri yeni dışa aktarımlar gerektirmez. Varlıkları sahip olunan ekranların yanında saklayın. Onları titreşime göre değil, sahibine göre adlandırın.

Lezzetle değil, kanıtla seçin

Kopyanız ve düzeninizle dört gerçek ekran oluşturun. Yalnızca sanatı değiştirin.

1. ana sayfa kahramanı
2. fiyatlandırma bilgisi
3. ilk katılım adımı
4. üründe bir boş durum

Projede çalışmayan beş kişiye iki aday stili gösterin. Her birinden üç sıfat isteyin. Sesli rehberinize uygun stili koruyun. Diğer seti arşivleyin. Bir öğleden sonra karar. Ruh hali panoları yok. Tartışma yok.

Teslimat engelini kaldıran başlangıç ​​seti

Her biletin aynı blokları kullanması için bir sonraki sürüm için küçük bir kiti dondurun.

• site veya amiral gemisi özelliği için bir kahraman
• ürün ve içerik için iki orta sahne
• boş, başarı ve hata için üç nokta
• odağı çalmadan düzeni dolduran bir arka plan

Projenin ortasında ekip arkadaşları, kapsamı nereye tarayacaklarını ve onaylayacaklarını soracak. Temiz bir işaretçiyi inceleme sırasında bakacakları yere park edin: illüstrasyon.

Kod incelemesinden sonra hayatta kalan erişilebilirlik

Resimler yalnızca herkesin sayfayı kullanabileceği durumlarda yardımcı olur. Çekme isteklerine kontroller oluşturun.

Alternatif karar. Görüntü anlam taşıyorsa fikri belirten kısa bir alt yazı yazın. Dekoratif ise boş alt kullanın, böylece yardımcı teknoloji bunu atlar. Satır içi SVG kısa bir başlık ve yararlı olduğunda bir açıklama içermelidir.

 <svg role = "img" aria-labelledby = "td" width = "512" height = "256">

  <title>Analitik hedeflerini belirleyen ekip</title>

  <desc>İş arkadaşları grafikleri ve yapışkan notları hareket ettirirken bir diğeri sonuçları kontrol eder</desc>

</svg>

Kontrast ve durum. Resim metin içerdiğinde veya anlam için renk kullandığında WCAG 2.2 oranlarını izleyin. Dolguları ve konturları, uyarılar ve düğmeler tarafından kullanılan aynı belirteçlere bağlayın, böylece başarı ve hata, görselde ve kullanıcı arayüzünde aynı şekilde okunur.

Temsil. Kapsayıcı karakterleri ve günlük aktiviteleri tercih edin. Klişelerden kaçının. Hedef kitlenizi yansıtan küçük bir grupla test yapın.

Trafikte ayakta kalan performans

Resimler ağırdır. Onlara bütçeli kod gibi davranın.

• doku önemli olmadığında SVG'yi tercih edin
• PNG'yi yalnızca oluşturduğunuz boyutta dışa aktarın
• Düzenin değişmesini önlemek için her zaman genişliği ve yüksekliği ayarlayın
• katın altındaki tembel yük
• Gerçek sayfalarda En Büyük İçerikli Boyayı ölçün

Çerçevesiz duyarlı raster:

 <resim>

  <kaynak türü = "görüntü/avif">

  <source type = "resim/webp">

  <img src = "/hero-ouch.png" alt = "Analitiği inceleyen meslektaşlar" width = "1280" height = "720"loading = "hevesli">

</resim>

Satır içi SVG bir tema değişkenine bağlı:

<stil>

  :kök { --accent: #2563eb }

  @media (renk şemasını tercih eder: koyu) { :root { --accent: #7c3aed } }

  .hero [veri-vurgusu] { doldur: var(--accent) }

</style>

<svg class = "kahraman" role = "img" aria-labelledby = "ab" width = "480" height = "240">

  <title>Büyüme grafiği yukarı doğru gidiyor</title>

  <desc>Basit bir ızgara boyunca yükselen çizgi</desc>

  <path data-accent = "" d = "M10 200 L120 140 L220 160 L360 80" fill = "none" Stroke = "var (--accent)" vuruş-width = "6"/>

</svg>

Rol tabanlı taktik kitapları

Web ve Kullanıcı Deneyimi

Amacı netleştirmek için görüntüleri kullanın. Boş durumlar bir eylem ve kısa bir kopya satırı taşır. Katılım, aynı oyuncular ve ayarlarla başlangıç, ilerleme ve başarı olarak net bir şekilde okunur. Hızlı tema geçişleri için SVG'leri tasarım aracınızda bileşenlere dönüştürün ve dolguları renk stillerine bağlayın. Dar düzenlerde yoğun bir sahne üzerinde küçük bir nokta seçin.

Pazarlama ve SMM

Kare, dikey ve yatay çerçevelerden oluşan bir sosyal ızgara oluşturun. Sahneleri bu oranlara göre önceden kırpın ve varyantları brifingin yanında saklayın. Hatırlamak için seri boyunca yinelenen bir karakteri veya desteği saklayın. E-posta PNG'yi dikkatli bir sıkıştırmayla kullanır çünkü istemciler hala farklılık göstermektedir.

Geliştiriciler

Depodaki sürüm resmi. Varlıkları onları oluşturan bileşenin yakınında tutun. Satır içi SVG, yeni dosyaları dışa aktarmak yerine tema geçişlerine CSS değişkenleriyle tepki vermenizi sağlar. Kritik yola ağır görüntüler koymayın. Hareket gerektiğinde vektörleri canlandırın.

Eğitim

Ah, sınıfta ve ÖYS'de işe yarıyor. Öğrenciler sıfırdan çizim yapmak yerine sahneleri yeniden düzenleyerek hiyerarşiyi ve ritmi öğrenirler. Bir stil paketi, sabit bir palet ve üç hedef ekran sağlayın. Portföylerin uyumlu kalması için lisans makbuzlarını ve atıf notlarını kurs deposunda saklayın.

Startup'lar ve küçük işletmeler

Bir stil seçin ve onu çeyrek boyunca dondurun. Bunu siteye, desteye, mağaza listesine ve en iyi ürün ekranlarına uygulayın. Bugün uyum. İmza özellikleri için daha sonra özel sahneler.

Kaymayı önleyen yönetişim

Çekme isteklerine bir kontrol listesi ekleyin.

• Gerektiğinde alternatif metin mevcut
• dekoratif görseller doğru şekilde işaretlendi
• Boyutlar düzen değişikliğini önleyecek şekilde ayarlandı
• dosya boyutu sayfa bütçesinin altında
• Hedef sayfada LCP doğrulandı

Küçük kurallar büyük yeniden düzenleyicileri yener.

Değeri kanıtlayan ölçümler

• Uygun olduğu durumlarda SVG'ye geçişten önce ve sonra kahraman sanatından yük paylaşımı
• Kullanıma sunulduktan sonra ana açılış sayfasındaki LCP eğilimi
• Üç sprint boyunca tutarsız görüntüler nedeniyle inceleme bayraklarının sayısı
• bir kampanya için brifingden ilk onaylanan modele kadar saatler

Planladığınız sınırlar

• niş senaryolar bazen parçalardan oluşan bir bileşime ihtiyaç duyar
• hareket hâlâ animasyon yığınınızda varlığını sürdürüyor
• büyük kataloglar basit bir karar kuralı olmadan ekipleri yavaşlatır

Lisanslama ve kayıt tutma

Icons8 anlaşılır lisans koşulları yayınlıyor. Ücretsiz planlar genellikle kredi gerektirir. Ücretli planlar ilişkilendirmeyi kaldırır ve kullanımı genişletir. Yayıncı sitesindeki mevcut politikayı okuyun. Makbuzları marka klasörünüze kaydedin. Her varlığın nereye gönderildiğini takip edin. Hukuk sorduğunda izini bulursun.

Sonuç olarak

Tek bir stil benimseyin. Kompakt bir kit oluşturun. Bunu jetonlara bağlayın. İnceleme sırasında erişilebilirliği ve performansı güçlendirin. Ah, size zamanında teslim edilen ve sanki özel olarak tasarlanmış gibi görünen görsel bir dil sunuyor.

Referanslar

• Metin alternatifleri ve kontrast hakkında WCAG 2.2 için W3C WAI belgeleri
• SVG erişilebilirliği ve yerleştirme için MDN belgeleri
• Duyarlı görseller ve görsel performansı hakkında Web.dev kılavuzları
• NN Group'un kullanıcı deneyiminde görsel iletişim ve anlama üzerine araştırması
• Shopify Polaris ve Google Materyal Tasarımı'nda illüstrasyon kılavuzu