Düz tasarımda hangi yazı tipleri vardır. Basit öğeler kullanıyoruz. 2B nesneleri kullanma

Düz tasarım (düz tasarım), hem web tasarımı hem de kullanıcı arayüzleri oluşturma teknolojileri alanında günümüzün ana trendlerinden biridir. En dikkate değer son örnekler, Microsoft'un Windows 8 ve yeni sürümlerle bu yöndeki cesur hamlesini içerir. Google tasarımı, minimalizme dalma arzusunun açık bir gösterimi ile.

Öğeleri tanımlamanın örnekleri.

Web 2.0'dan sonraki yaşam

3D, gölgeler, vurgular ve yansımalar, degradeler, kabartma gibi her türlü efekte sahip öğelerin yuvarlak şekilleri şeklinde. Derinlik ve hacim yaratan her şeyin adı. Büyük, canlı kontroller, parlaklık, dokular ve daha fazlası benzer yollar tezahürler, görsel nesnelerin basit, iki boyutlu temsillerine yol açar.

Şamandıra Tasarımı

Stilin kalbinde tipografi

Bunun düz bir site inşa etmenin temeli olduğunu unutmayın. Flat tasarım öğelerinin sadeliği ve minimalizm ilkeleri, tipografinin değerini pekiştiriyor. Metin içeriği Prensipte bazı ağır grafikleri veya resimleri değiştirmek mümkündür. Bugün tipografi birçok sitede tasarım haline geldi. Doğal olarak, düz tasarım genellikle minimalist olduğundan, yazı tiplerinin karakteri aşağıdakilerle koordine edilmelidir. genel şema, stil ve kompozisyon. Yani, örneğin, sıklıkla kullanılır büyük harföğeler veya başlıklar için.

kod duvarı

Ayrıca okuyun: 12 ana renk ve kullanıcılar tarafından algılanma örnekleri

Düz tasarımda renk paleti

Düz tasarım da renk çeşitliliğini genişletmeye doğru ilerliyor. Web tasarımcıları, belki de temel tasarım ilkesini uygulamak için giderek artan bir şekilde bir renk paleti kullanıyor: site kendi türünden farklı olmalıdır.

Minimal maymun

Boş alan, büyük elemanlar

Baştan sona minimalist bir temele sahiptir, bu da temel ilkelerini benimsediği anlamına gelir: büyük içerik blokları, büyük öğeler, boş alan, gereksiz yaygara ve gösterişten yoksunluk.

sakal tasarımı

Düz tasarım simgeler, düğmeler, çizimler

Düğmeler, simgeler, simgeler ve çizimler de 2D bir görünüm alır. Sitenin tüm sayfalarında verilen stile uygun olmalı, sitenin havasını iletmeli ve herhangi bir kullanıcı için anlaşılması kolay olmalıdır.

Simgelerin yanı sıra simgelerin kendileri için bir renk seçmek kolay bir iş değildir. Düz renkler kullanabilirsiniz. Tasarımı süslemek için çabalarken, siteyi nasıl kullanıcı dostu hale getireceğinizi düşünmeniz gerekiyor. Bir yandan stili ihlal etmemek önemlidir, diğer yandan simgeleri görünür kılmak gerekir. Çizimlerde, daha önce popüler olan 3D efektlerden kaçınarak minimalizm için çalışıyoruz.

Ayrıca okuyun: Tasarımda düz çizimlere sahip 20'den fazla ilham verici web sitesi

Düz Kullanıcı Arayüzü Web Sitesi Şablonlarına Örnekler

Düz tasarım tarzında site örnekleri

Kimlik

83 Tasarım Kollektifi

çılgın

Şemsiye Grubu

Slcl Vakfı

Keçem

Behzad

Atlantik

Süt kadar basit

Weranda ailesi

Bu yazımda sizi düz tasarımla tanıştıracağım. Düz, son birkaç yılda web'deki önde gelen trendlerden biri haline geldiğinden, muhtemelen bununla ilgili bir şeyler duymuşsunuzdur.

Bugün düz tasarımın ne olduğuna, nasıl ortaya çıktığına ve temiz, canlı ve duyarlı bir tasarım oluşturmak için neye ihtiyacınız olduğuna bir göz atacağız.

Bulabilirsin iyi örnekler http://market.envato.com/ sitesinde düz tasarım. Modern tasarımın neye benzediğini net bir şekilde anlamanızı sağlayacak tonlarca düzen, simge ve şablon var. .

1. Düz tasarım nedir?

Düz tasarım - modern tarz Kullanıcı arayüzü minimalizm ile karakterize grafik tasarımın yanı sıra. Düz tasarım, minimum eleman kullanımı ve yokluğu ile karakterize edilir. çeşitli efektler dokular, gölgeler ve ışıklar, örneğin: karışık renkler, degradeler, vurgular vb.

Flat, skeuomorfizme karşıdır( skeuomorfizm, bir ürüne diğerinin görünümü verildiğinde, yani bir tasarım ilkesidir. ne zaman çeşitli unsurlar arayüzler gerçek nesnelerden kopyalanır - yaklaşık çeviri.) zengin bir tasarımın yanı sıra, düz tasarımın hiç de ilk bakışta göründüğü kadar basit olmadığını söylemek gerekir. Skeuomorfizmin bazı özelliklerini içerir, ancak bundan biraz sonra bahsedeceğiz.

Genel olarak, düz, kullanıcının görseller tarafından dikkati dağılmadan içeriğe odaklanmasına yardımcı olur. Düz tasarım, arayüzü daha duyarlı, eğlenceli ve kullanımı daha kolay hale getirirken öğelerin basitliğini vurgular.

2. Biraz tarih

Düz tasarımın, web'de küresel bir trend haline gelmesinden çok önce var olduğu bilinmektedir. Düz tasarım, tekniğin henüz karmaşık efektleri, dokuları ve gölgeleri destekleyecek kadar gelişmemiş olması nedeniyle 80'lerde oldukça popülerdi. Bununla birlikte, o zaman bile tasarım, arayüz öğelerini olabildiğince gerçekçi hale getirmeye çalışarak skefomorfizme doğru çabalıyordu.

Düz tasarım, şimdi gördüğümüz formda, Microsoft'un metro tarzı olarak adlandırılan ürünleri piyasaya sürmeye başlamasından sonra popülerlik kazanmaya başladı. Metro, Microsoft'un şıklığı ve sadeliği ile şaşırtan bir UI tasarımıdır.

2010 yılında Microsoft piyasaya çıktı Windows Telefon 7, keskin kenarlı düz bir tasarım ve erken bir üründen miras kalan basit grafikler kullandı Microsoft (Zun). Daha sonra, başarıdan ilham alan Microsoft, aynı düz Metro stiline dayalı Windows 8 işletim sistemini piyasaya sürdü.

Sonuçta, düz tasarım 2013'te Apple piyasaya çıktığında zirveye ulaştı. iOS 7 temelde sergileniyor yeni tasarım simgeler ve yazı tipleri dahil olmak üzere tamamen yeniden tasarlanmış kullanıcı arabirimi öğeleriyle. elma yaratıldı UI ve simge tasarımının görsel ilkeleri .

Kısa bir süre sonra Google, uygulamalarında ve web sayfalarında düz stili kullanmaya başladı. Malzeme Tasarımı... Google'ın, web tasarımının amaçlarının bir açıklaması, çeşitli tasarım nesneleri oluşturmaya yönelik ilkeleri ve yönergeleri de dahil olmak üzere, bu stile ayrılmış bir bölümü bile vardır: simgeler, düzenler vb.

O zamandan beri düz, web tasarımında önemli bir trend haline geldi ve web sitelerini, uygulamaları ve arayüz öğelerini zarif, temiz ve şık hale getirdi.

Bu nedenle, firmalardan onsuz hayal etmenin zor olduğu üç küresel düz tasarım örneği vardır. modern dünya teknolojiler:

Microsoft'un Metro tasarımı

Apple iOS 7 tasarımı

Google'ın Malzeme Tasarımı

3. Temizliği hatırlayın

Düz tasarım, görünüşe göre 3D öğelerin olmaması nedeniyle "düz" olarak adlandırılıyor ve gerçekçi efektlerörneğin: degradeler, dokular, vurgular, yarı tonlar, gölgeler. Unutmayın, düz stil, nesneleri tasvir etmenin iki boyutlu (düz) bir yoludur.

Ayrıca düz tasarımda nesneler çok basitleştirilmiş ve stilize bir şekilde tasvir edilmiştir.

Ve bazen bir nesnenin sadece bir silueti veya dış hatları bile kullanılır, yani. nesneyi tanınabilir kılmak için yeterli, ancak küçük ayrıntılarla aşırı yüklemeyin.

Minimalizm bugünlerde küresel bir trend haline geldi: şekillerin sadeliği ve keskin kenarların kullanımı temiz ve hoş bir tasarım yaratıyor. Basit şekiller daha anlaşılır ve kolay anlaşılır. Bu, tasarıma yoğun ve dağınık bir görünüm vermeden minimalist, temiz tutar.

4. Mükemmellik

Düz simgeler ve UI öğeleri oluşturmaya gelince, bunların net, düzenli ve piksel olarak mükemmel görünmelerini sağlamanız gerektiğini bilin. mümkün olduğunca. Ayrıca, bu hem raster hem de vektör grafikleri için geçerlidir.

program Adobe photoshop burada her şey açık: ile çalışır raster grafikler hangi piksel tabanlı.

Programla ilgili Adobe illüstratör, daha sonra matematiksel formüllerle tanımlanan vektör adı verilen eğriler ve çizgilerden oluşan vektör grafiklerini kullanır.

Bir zamanlar Adobe Illustrator çok fazla değildi. uygun program piksel mükemmel grafikler oluşturmak için. İyi haberler bu mu en son sürümlerÇelik İllüstratörü harika araç iyi grafikler oluşturmak için.

şunu söylemeliyim ki Vektör grafikleri temel olarak basit olanlarla çalışmak anlamına gelir, düz şekiller, saf renkler ve ızgaralar Adobe Illustrator, ayarlarda çok esnektir ve ızgarayı ihtiyaçlarınıza göre uyarlamanıza, nesneleri hizalamanıza ve Çeşitli tipler koparma. Bu, her ekranda temiz ve şık görünen mükemmel bir tasarım oluşturmayı kolaylaştırır. Mükemmel grafiklerin nasıl oluşturulacağını öğrenmek istiyorsanız, makaleyi okumalısınız: Adobe Illustrator kullanarak piksel mükemmelliğinde resimler nasıl oluşturulur .

5. Renk

Düz tasarımın gölgelerin yanı sıra daha belirgin özelliklerinden biri de renk kullanımıdır. Düz tasarımın öğelerinde kullandığı renklerin çoğu, yalnızca birkaç temel renkten oluşur.

Düz tasarımdaki renk, parlaklık, doygunluk ve zenginlik ile ayırt edilir.Flat'in renk şeması birkaç özel renkle sınırlı değildir; birçok ton içerir ve bunların seçimi, ister şeker ikonları ister sofistike bir retro paletindeki retro tarzı nesneler olsun, sadece tasvir ettiğiniz şeye bağlıdır.

Diyelim ki bir arayüz tasarımcısısınız ve renk paletlerinde iyisiniz. Photoshop programları ve Illustartor, renkleri istediğiniz gibi karıştırabilirsiniz. Ancak bu süreç oldukça karmaşıktır ve iyi bir sezgi, deneyim ve beceri gerektirir. İşte kendi renk paletinizi oluşturmanıza yardımcı olabilecek bazı araçlar.

Bazıları sadece düz tasarımlar için değil, her türlü tasarım ve illüstrasyon için uygundur. Örneğin, daha çok Cooler olarak bilinen Adobe Color CC. Bugün hem web sitesi üzerinden hem de doğrudan Adobe ürünleri aracılığıyla erişilebilir. Soğutucu, kendi renk paletinizi oluşturmanıza veya kitaplıktan özel paletler arasından seçim yapmanıza olanak tanıyan çok esnek bir araçtır.

Başka bir basit ve kullanışlı renk paleti oluşturucu Coolors'tur. Sadece boşluk tuşuna basın ve program bir renk paleti oluşturacaktır, renkleri düzeltebilirsiniz, ayrıca bir dışa aktarma işlevi de vardır.

Yararlı bulabileceğiniz özel paletlere sahip birkaç benzer hizmet daha vardır. Bununla birlikte, özellikle düz tasarım için oluşturulmuş bir araç vardır: Designmodo'dan FlatUIColors.com - çalışmak için çok uygun bir dizi "düz" renk içeren bir hizmet. Bu site, mükemmel tasarımlar için iyi renk çözümleri arayan tasarımcılar arasında oldukça popüler hale geldi. Dene!

Ayrıca daha geniş bir renk ve palet yelpazesini de bulabilirsiniz. Google'ın Materyal Tasarımı kılavuzu.

6. Uzun gölgeler

Yukarıda bahsedildiği gibi, düz tasarım sadelik ile karakterize edilir, birçok boş alan- bu yüzden düz, herhangi bir efekt kullanımını reddeder. Ancak, düz tasarımın tipik bir etkisi vardır. Bu etki bir trend haline geldi ve Karakteristik özellik düz.

Şimdi uzun gölgelerden bahsediyoruz. Bu etkiyi tanınabilir kılan bazı tipik özelliklere sahiptirler, yani 45 derecelik eğim ve büyük beden(Gölge öznenin kendisinden birkaç kat daha uzun olabilir. Sonuç olarak, uzun gölgeler düze biraz derinlik etkisi verir.

Bu efekt, nesnenin daha üç boyutlu görünmesini sağlar, ancak aynı zamanda onu düz bir tasarım bağlamında bırakır.

7. Yazı tipleriyle çalışma

Tipografi düz tasarımda büyük rol oynar. Çoğu zaman metin, kompozisyonun ana unsuru haline gelir.

Flat genellikle tüm tasarımı bir bütün olarak temiz ve okunabilir kılan basit yazı tipleri kullanır. birçok bulabilirsiniz ücretsiz yazı tipleri Adobe ürünlerini kullanıyorsanız Adobe Typekit'te. Ayrıca Font Squirrel'de birçok iyi ücretsiz yazı tipi bulacaksınız. Ancak yazı tipini ticari olarak kullanmayı düşünüyorsanız, lisansı okumayı unutmayın.

Çoğu zaman düz tasarımda, büyük harf ve zıt renkler kullanmak gelenekseldir, bu metni daha okunaklı hale getirir.

Fontları dikkatli kullanın, tasarımı vurgulaması ve uyumlu olması gerektiğini unutmayın, ayrı bir unsur gibi görünmüyor bu, serif fontları veya el yazısı karmaşık fontları kullanamayacağınız anlamına gelmez. Sadece minimumda tutun ve her şeyi dengede tutun. Bununla birlikte, düz, daha katı ve düzgün göründükleri için sans-serif yazı tiplerini daha sık kullanır.

8. Düz tasarımın artıları ve eksileri

Düz tasarımın birçok avantajı nedeniyle bu kadar popüler hale gelmesine rağmen, tasarımcıların bu stili kullanırken karşılaştıkları dezavantajları hala var. Artılarına ve eksilerine bir göz atalım.

profesyoneller

Popülerlik

Düz tasarım, tasarımcılardan ve web tasarımcılarından giderek daha fazla olumlu geri bildirim alarak bir trend haline geldi ve hiç de zemin kaybediyor gibi görünmüyor. Aksine gitgide yayılıyor, yeni biçimler ve özellikler kazanıyor, giderek daha yaratıcı hale geliyor.

Basitlik

Düz tasarım basit, minimalist ve temizdir. Web'de düz, kullanıcıların görsellerle dikkatlerini dağıtmak yerine içeriğe odaklanmasına yardımcı olur. Bu aynı zamanda arayüzler için de geçerlidir mobil uygulamalar: temiz tasarım büyük düğmeler kullanır mobil cihazlar kusursuz.

Parlaklık

Renk, düz tasarımda bir başka harika artıdır. Parlak ve doygun renkler çekici ve temiz görünüyor ve degradelerin olmaması tasarımı şık hale getiriyor. Üstelik bu tür saf renkler onu daha pozitif kılıyor, prezentabl, düz tasarım doğru havayı yaratıyor.

Dezavantajları

Flat'in daha birçok avantajı vardır, ancak hiçbir tasarım mükemmel değildir ve onu idealize edemeyiz. Düz tasarımın bahsetmemiz gereken bazı dezavantajlarını burada bulabilirsiniz:

tepkisizlik

Bazen önemli ayrıntıları kaçırmak veya görsel efektler kullanıcı dostu bir arayüz oluşturma sürecini zorlaştırır ve bu genellikle tüm tasarımı yanıtsız hale getirir. Tüm kullanıcılar daireyi rahat bulmayabilir, çünkü bir web sayfasında ekrana tıklamanız veya dokunmanız gereken öğeleri bulmak zor olabilir. cep telefonuçünkü etkileşimli değiller.

Yazdırma sorunları

Daha önce de belirtildiği gibi, her yazı tipi düz tasarıma sığamaz. Bazen böylesine zengin, keskin kenarlı bir yazı tipi gerçekten dengeli ve şık görünüyor. Ancak yazı tipi yanlış seçilirse tüm tasarımı bozabilir. Hangi yazı tiplerinin düz için iyi hangilerinin kötü olduğunu gerçekten anlamalısınız.Tecrübe eksikliği yazı tipi seçimini çok zorlaştırıyor.

Zayıf görseller

Efektlerin, renklerin ve yazı tiplerinin kullanımındaki sınırlamalar nedeniyle, düz çok basit ve soğuk görünebilir. Minimalizmi aynı zamanda ana dezavantajı olabilir - diğer düz tasarımlar tamamen sizinki gibi görünür. Bu nedenle, simgelerinizi veya web sayfalarınızı başkasının tasarımından farklı kılmak çok zordur, çünkü aynı basitleştirilmiş formları, sınırlı renk paletleri ve benzeri yazı tipleri. Sonuç olarak, düz tasarım zamanla sıkıcı hale gelebilir.

9. Geleceğin düz tasarım trendleri

Bu, düz tasarımın kendi yolunda tamamen oluştuğunu ve durduğunu söylemek değildir, belki de dairenin gelişmeye ve değişmeye, yeni özellikler kazanmaya ve görsel ifadeyi artırmaya meyilli olması, yukarıda belirtilen eksiklikleri nedeniyledir.

Dikkatlice bakarsan son örnek düz tasarım, gerçekten olduğunu görebilirsinizyavaş yavaş titiz araçlarından çıkar ve degradeler, gölgeler, aydınlatma ve diğer görsel efektler gibi ince efektler eklemeye başlar.

Bu küçük şeyler, düz tasarıma, skeuomorfik tasarımların yaptığı gibi ayrıntılara aşırı yüklenmeden biraz derinlik verir.Bu küçük iyileştirmeler, daireyi daha duyarlı ve kullanılabilir hale getirmenin yanı sıra, yeni bir görünüm getirerek daireyi daha esnek ve çok yönlü hale getirir.

Böylece daire özelliklerini kaybetmez, aksine daha ilginç ve esnek hale gelir.- gerçekten daha iyi oluyor.

sonuçlar

Böylece düz tasarımın tarihinden bazı gerçekleri tartıştık ve renkler, şekiller ve tipografi hakkında konuştuk. Farklı bakış açılarını inceledik, dairenin avantajları ve dezavantajları üzerinde durduk ve iyi bir tasarım yaratmanın bazı temel ilkelerini öğrendik.

umarım kendin öğrenmişsindir yeni bilgi bu makaleden veya en azından ilginç buldum. Daha önce yapmadıysanız, düz bir tasarım oluşturmaya çalışmalısınız.

Sonuçta, düz tasarım hakkında başka ne belirtilmelidir?

Keskin kenarları, zengin renkleri ve canlı yazı tipleri, saflığı ve minimalizmi ile gerçekten düz seviyorsanız, o zaman bunun için gidin!

Trend, ancak herhangi bir grafik stilinde olduğu gibi, kendinizi tek bir teknikle sınırlamayın. Düz trend ise, bu, projenizde başka stiller kullanamayacağınız anlamına gelmez. Küçük detayları ve dokuları ile skeuomorfizm, aynı zamanda iyi karar... En önemlisi, tasarımın her proje için farklı olduğunu, kullanışlı ve işlevsel kalırken ruhunu, amacını, özünü ifade etmesi gerektiğini unutmayın. İleri!

Düz tasarım (düz tasarım) web sitelerinin ve arayüzlerin tasarımında ve ayrıca işletim sistemlerinde popüler bir stildir, damga ki bu basitlik, incelik ve minimalizmdir. Düz tasarım, 2010 yılında skeuomorfizmin tersi olarak popülerlik kazanmaya başladı.

skeuomorfizm- başka bir nesnenin şeklinden kopyalanan, ancak başka malzemelerden veya başka yöntemlerle yapılan fiziksel bir süs veya tasarım öğesi. Örnekler arasında metalden yapılmış benzer kaplara benzemek için taklit perçinlerle süslenmiş çanak çömlekler veya simüle eden bir bilgisayar takvimi sayılabilir. dış görünüş bir kağıt masa takviminin sayfalarını zımbalama (tanım Vikipedi).

Ameliyathanenin serbest bırakılması, tasarımda düz stilin popülerleşmesine katkıda bulundu. Windows sistemleri Microsoft'tan Metro tarzında 8 ve iOS 7 elma ayrıca düz bir stil seçer. Asıl çağ bundan sonra başlıyor düz tasarım... Yakında, büyük arama hizmetleri ve uygulamalar - Google, Youtube, tasarımlarında düz stil ilkelerini kullanan birçok site var. V son yıllar düz tasarım, küresel web sitesi tasarım trendlerinde liderdir.

Düz tasarımın faydaları

1. pratiklik- düz tasarımın kullanılması, sitenin daha hızlı yüklenmesini sağlayan stil, komut dosyası ve animasyon sayısını en aza indirmenize olanak tanır.
2. Uyarlanması kolay- düz tasarım, farklı ekran çözünürlüklerine uyum sağlamak için yeterince kolaydır.
3. Kullanım kolaylığı- Basitleştirilmiş stil sayesinde, kullanıcıların sitedeki bilgileri algılaması daha kolaydır.
4. güzellik- harici tarafsızlık ve basit tasarımlar, gerçekten dikkat çeken tasarımlara odaklanmanızı sağlar.

Düz web sitesi tasarımının 5 ilkesi

Düz tasarım, ilk bakışta göründüğü gibi hiç sıkıcı değil. Tasarım çözümleri, saflığı ve karmaşıklığı nedeniyle, gereksiz gürültü olmadan şık ve güzel olabilir, bu da ürününüze veya hizmetinize konsantre olmanızı sağlar.

1 - 2B nesneleri kullanma

Düz tasarımda, bir nesneye derinlik ve hacim veren öğelerin kullanımı hariç tutulur: gölgeler, degradeler, vurgular, dokular, refleksler, animasyon. Bir nesneyi tasvir ederken, yalnızca ana hatları görüntülenir.

2 - Simgeler ve basit nesneler

Düz simgelerin ve tek heceli şekillerin net anahatları ve tek renk kullanımı, tasarımı mümkün olduğunca basitleştirmeye ve daha hafif hale getirmeye yardımcı olur. Kontroller kullanıcı için sezgisel hale gelir ve etkileşimi teşvik eder.

3 - Stil tasarlamak için basit yazı tipleri

Düz tasarımda tipografi ve yazı tiplerine çok dikkat edilir. Burada italik kullanılmaz, yazı tipi sadece içerikte değil, aynı zamanda gezinmede de site tasarımına uyumlu bir şekilde uyar. Site için yazı tipi türlerinde bile minimalist stil teşvik edilir.

4 - Renklerin oyunu

Düz tasarım, kullanımını engelleyen birkaç ana renk içerir. yumuşak geçişler ve degradeler, ancak birbirleriyle ilişkili olarak parlak ve zıt olabilir.

5 - Minimalizm

Düz tasarım, ekranın tüm genişliğini kullanarak ve aynı zamanda bilgiyi en aza indirerek öğelerin görselleştirilmesini içerir.

Neredeyse düz tasarım diye bir şey var. Bu, basit öğeler ve iki boyutlu alan kullanan düz tasarım konseptlerinden biridir. Bunun bir örneği olurdu yüksek kaliteli fotoğraf hangisi bulanık arka fon veya kararır. Bu, konunun derinliğini ve perspektifini oluşturmanıza olanak tanır.

Düz tasarım örnekleri

İnternette, Belarus segmenti de dahil olmak üzere, haber kaynakları, portallar ve hatta çevrimiçi mağazalar dahil olmak üzere çeşitli konularda düz tasarımlı birçok web sitesi geliştirme örneği bulabilirsiniz.

Düz tasarım web siteleri, minimum grafik ayrıntısı ve fazlalığı olmayan renkli vurgularla (simgeler, metin vurguları, bilgi grafikleri) basit geometrik bloklu bir alan gibi görünür. metin bilgisi... Dedikleri gibi, "minimalizm" ve başka bir şey değil.

Düz Simgeleri Nasıl Çizemezsiniz?

Arayüzlerle birlikte "Düz" web sitesi tasarımı moda oldu yeni pencereler... Rusya'da bu tarzın artan popülaritesi, web sitesi arayüzünün ve “parmak” arayüzünün (akıllı telefonların) aynı şey olmadığını bilmeyen kendi kendini yetiştiren web tasarımcılarının sayısındaki artışla kolaylaştırıldı. sayfayı parmağınızla aşağı kaydırın - ve tam tersine, fare tekerleğini 3-4 ekran aşağı çevirmek çok sabır ve gerçek ilgi alacaktır). Rus düz sitelerinde genellikle bu tür simgeleri bulabilirsiniz:

Örnek basitçe alınır parlak renkler tutarsız + simgeler Kötü kalite(Örnek olarak aldım ücretli set, ancak neredeyse her zaman serbest çalışanlar şu siteden indirilen ücretsiz simgeleri kullanır: farklı setler, bunlar da birbiriyle uyumlu değildir).

Yüksek kaliteli grafikler çizememek için, acemi tasarımcılar her şeyi basitleştirme fırsatını kolayca yakalar. Aynı zamanda, "minimalizm" tarzındaki tasarımın, sadece internetten indirilen simgelerin renkli kareler üzerine yerleştirilmesini değil, tam olarak arayüz ayrıntılarının yüksek kalitede detaylandırılmasını gerektirdiği göz ardı edilmektedir. Windows stili 8 (şimdi birçok sözde "modern açılış sayfasında" bulunabilir).

İyi düz simgelere bir örnek:

Renkler ve simgeler sadece birbirleriyle birleştirilmemeli, aynı zamanda tek bir bütün oluşturmalıdır.

Düşük kaliteli düz tasarım sorunları

1. Navigasyon ve kullanılabilirlik

Web gerçek bir alan DEĞİLDİR, bu nedenle, bir gerçeklik duygusu yaratmak ve konumunuzu anlamak için siteler “ galeta unu”, Ve hızlı anlama ve gezinme kolaylığı için simge resimleri gerçek nesnelere yakındır. Yani, evin simgesiyle, bunun "ev" olduğu, ahizenin simgeleriyle - bunun bir telefon olduğu, sepet tarafından - bir sepet olduğu (bir süpermarkette olduğu gibi - her şey açık) hemen anlaşılır. ve basit), hediye resmi olan bir simge - bir hediye, vb. ...

Ancak, yeni düz tasarımcılar genellikle simgeleri aşırı basitleştirir. Tasarımcılar sezgisel görüntülerden ne kadar uzaklaşırsam, kullanıcının bunları daha sonra yorumlaması o kadar zor oluyor. Aşırı basitleştirme bazen gezinmeyi zorlaştırır. Herkes, Avrupalı ​​tasarımcıları taklit etmeye çalışan, modaya uygun düz bir site tasarımı yapmak için acele eder etmez, unuttular. Basit kurallar kullanılabilirlik.

2. Uzun düz ayak örtüsü siteleri

Sayfalar 3-4 ekran kadar gerilirken, alan sadece ekonomik olarak kullanılmamakta, aksine aşırı miktarda "hava" eklenmektedir. Aynı zamanda, kaydırma için görsel bir motivasyon yoktur - cips yok, animasyon yok. Geliştiricilerin, sayfayı aşağı kaydırmak için Ziyaretçilerin ilgisini nasıl çekmeyi planladığı açık değildir. Gerçekten de, her şeyin kompakt olduğu sitelerle karşılaştırıldığında, ayak örtüsü siteleri, fareyi ekranda hareket ettirmek ve kaydırmak için çok fazla enerji gerektirir.

3. Anlaşılmaz düğmeler

Düz sitelerde aktif elemanlar artık belirgin değildir. Düz tasarımın ortaya çıkmasıyla birlikte düğmeler de düz hale geldi. Ancak düğmenin görsel görüntüsü gerçek fiziksel düğme, gölgeler ve degradeler yalnızca "burayı kesinlikle tıklayabileceğinizi" gösterir.

4. Kötü Çizilmiş Simgeler

Tasarımcıların dikkatsiz çalışmaları nedeniyle sitelerdeki (özellikle düz sitelerdeki) simgeler öngörülebilir görüntülerini yitirmiştir. Sınırlı tasarım bütçeleri veya web tasarımcılarının başarısızlığı nedeniyle, ancak sitelerdeki gezinme öğeleri genellikle birincil ilişkilere karşılık gelmez ve çok zorlanır.

Sanırım ikon yaratma işi şuna benziyor: teknik şartnameye göre, "Müşterilere bireysel yaklaşım" ikonuna ihtiyaç var. Şahsen, her biri kendi renginde bir okla yönlendirilen bir yönetici ve iki müşteri resmim var (mavi bir ok mavi müşteriye, kırmızı ok kırmızı müşteriye). Bir tasarımcı nasıl çizileceğini bilmiyorsa, hazır setlerde bir simge arayacaktır (en iyi durumda, bir fotoğraf bankasından satın alacak, en kötü durumda internetten indirecektir) ve anlamca en uygun olanı kullanın. Büyük olasılıkla, kravatlı veya bavullu bir adamın simgesi olacak. Genel olarak, çok ileri gitmedi, ancak yine de sitenin tasarımında "Herkese bireysel yaklaşım" için bavul ve "piyasada 10 yıl" için Saat'in (bu arada, gerçekten gördüm) !) - tasarımcı sahte.

5. Yanlış içerik hedefleme

Düz site tasarımı içerik odaklıdır. Eh, açıkçası - vurgu grafikler üzerinde değilse - o zaman bilgi üzerinde. Ancak Rus web stüdyoları tarafından sunulan "modern" düz stildeki açılış sayfalarına yakından bakarsanız, içeriğe çok az dikkat edilir. Yani:

• Metin rastgele sunulur. Aksanların nasıl yerleştirildiği, neyin yakalanması ve neyin ikincil olduğu açık değildir.
• Böyle bir tasarım yok. Tablolar, madde imli listeler, başlıklar, duyurular genellikle hiç işlenmez.
• Genellikle çıplak metin. Görsel olarak pekiştiren resim ve simgeler yok metin blokları... Sonuç olarak, vurgu ne grafiklerde ne de metinde değil, "stil"in kendisindedir. Bu durumda, teklifleri ile şirket kaybolur.

Peki düz tasarım web siteleri için gerçekten gerekli mi?

Akıllı telefonlar için arayüz tasarımı ile her şey net - hafif, yüksüz, kullanımı kolay. Ancak düz stil web sitesi tasarımı ile kişisel olarak büyük bir sorum var - hiç etkili mi?

Müşterilerin çoğu grafiklerin kalitesini anlamıyor ve site tasarımını onaylarken kişisel zevkleri (beğenme / beğenmeme) tarafından yönlendiriliyor. Ve burada moda bir rol oynuyor.

Düz bir web sitesi tasarımı harika olabilir. ANCAK! Harika bir tasarım, gerçekten yüksek kaliteli bir kullanılabilirlik ve grafik öğeleri çalışması ve yaratıcı çiplerin ve efektlerin varlığı anlamına gelir. Ve tasarımda yoksa, sitelerde özgünlük yoksa monoton, boş ve sıkıcı görünüyorlar. Genel olarak, şu anda çoğu Rus sitesinde olan budur.

Kaliteli bir düz tasarım örneği:

Düz site tasarımının modası, diğer tüm modalar gibi geçicidir. Birisi orijinal yaratır, yaratıcı tasarımlar, ve birileri onları üslupta kopyalar ve taklit eder, çünkü kendilerini nasıl icat edeceklerini bilmiyorlar. Ve mantarlar gibi ucuz "moda" siteler büyüyor ...

Mobil uygulama ve web sitesi geliştiricisi bizim için bir sütun yazdı ve düz ve malzeme tasarımı ile ilgili her şeyi sıraya koydu.

Genel olarak, Düz tasarım ve Malzeme Tasarımı arasındaki fark incedir. Olmayan bir kişiye derin bilgi grafik tasarımda aslında çok benzer görünebilirler. Bu yazıda, ikisi arasındaki bazı farklara “biraz ışık tutmaya” çalışacağım. Tasarımcının hassas doğasına kazara zarar vermemek için çok gerekli olan ek bilgileri edineceksiniz.

biraz tarih

En popüler iki tasarım trendi arasındaki farklardan bahsetmeye başlamadan önce, bunların nereden geldiğini öğrenelim. Malzeme tasarımının düz tasarıma dayandığına inanılmaktadır. Peki düz tasarım nereden geldi?

skeuomorfizm

Kullanıcı arayüzü ve web tasarımı hakkında konuşursak, o zaman skeuomorfizm kavramı, ana fikri taklit olan bir yaklaşım anlamına gelir. Ayrıntılara girmeden, sadece hatırla Apple arayüzleriönce iOS'un ortaya çıkışı 7 ile “ gerçekçi dokular, aydınlatma ve iddialı efektler ”.

Yapmaya çalışmak dijital nesneler gerçek dünyadaki muadillerine benzer şekilde, kullanıcının cihazla etkileşimini kolaylaştırma ihtiyacı ile haklı çıkarıldı. Nitekim bu nedenle gerçekçi dokulara sahip tüm arayüzler uzun yıllar dijital dünyaya hakim olmuştur. Skeuomorfik tasarım, kullanıcıların gerçek dünyadan dijitale sorunsuz bir şekilde geçiş yapmasına yardımcı olmak için mükemmel bir iş çıkardı.

Ancak çiçeklenme ile mobil teknolojiler yavaş yavaş öncelikle rahatlık ve kullanım kolaylığına odaklanmak gerekli hale geliyor. Katılıyorum, bu alanda yaratma ihtiyacı mobil çözümlerşuradan temin edilebilir farklı cihazlar, önemli ölçüde artar. Ve şu anda sadelik yeni tasarım standardı haline geliyor.

Not: Asla skeuomorfizmin tamamen ortadan kalktığını varsaymayın. Gerçekçi bir dünya yaratmanın ve oyuncuların kendilerini oyun sürecine derinlemesine sokmak için karakterlerini hissetmelerine yardımcı olmanın gerekli olduğu oyunlarda yaygın olarak kullanılır.

Düz tasarım

Bu tarz tamamen yoksun 3B nesneler... Kabaca söylemek gerekirse, düz tasarım, alt gölgeler, dokular, degradeler gibi stilistik öğelerden yoksundur, ancak yazı tiplerinin, renklerin ve simgelerin oynamasına dikkat edilir. Ama bütün bunlar neden gerekliydi? Cevap basit.

İlk olarak, düz tasarım sayfa yükleme sürelerini önemli ölçüde azaltır. "Ağır" skeuomorfik ayrıntıların olmaması (sadece hayal edin: katmanlar, serif yazı tipleri, gradyanlar) düz tasarım öğelerini "daha hafif" yapar ve bu da yükleme sürelerini önemli ölçüde hızlandırır. Ayrıca, düz öğeler ekranlarda olduğu gibi aynı derecede çekici görünür. yüksek çözünürlük Ve düşük.

İkincisi, basit görüntüler mesajınızı kullanıcılara ayrıntılı resimlerden daha hızlı iletebilir: bunlar kabataslaktır ve bu nedenle anlaşılması kolaydır.

Ve elbette, karşılaştırmalı olarak düz simgeler düz tip kullanıcıların dikkatini gerçekten önemli içeriğe yönlendirebilir.

Bugün, düz tasarım haklı bir tanıma aldı, ancak yine de sorunsuz olmadı. Bu tür sorunların en belirgin örneği, Windows 8'in piyasaya sürülmesiydi. Microsoft tarafından... Bu işletim sistemi, düz tasarımın öncüsü olarak kabul edilir ve Metro tasarım konseptini destekler. Sorunlar, şirketin gerçek grafiklerden çok matbaaya dikkat etmeyi gerekli görmesinden kaynaklandı.

NN Group'un Windows 8 kullanılabilirlik testi, kullanıcıların tıklanabilir ve tıklanamaz nesneler arasında ayrım yapmakta zorlandıklarını gösterdi. Kullanıcılar, statik görünen nesnelerin aslında tıklanabilir olduğundan şikayet etti. Sonuç olarak, şirketin ana görevi - kullanıcıların sistemi doğru yorumlamalarına yardımcı olmak - başarısız oldu.

Düz tasarımla sıklıkla ilişkilendirilen bir diğer şirket ise Apple. Mobil ameliyathanedeki skeuomorfik tasarım öğelerinden uzaklaştılar. iOS sistemi 2013 yılında yayınlanan 7. Bu sefer, geçiş biraz daha iyi algılandı, çünkü şirket UI konseptini tamamen yenilemeye çalışmıyordu, sadece düz tasarıma birkaç değişiklik ekledi. Bu, kullanıcıların önceki deneyimlerini geliştirirken ürünü kullanmasını mümkün kıldı. işletim sistemleri ve web siteleri.

Malzeme tasarımı

Hemen açıklığa kavuşturalım: Materyal tasarımı daha çok markalı ürün tasarımda kendiliğinden ortaya çıkan ve yaygın olarak tanınan bir trendden daha fazlası. Bu temelde onu düz tasarımdan ayıran şeydir.

Tasarım malzemesini “markalı” olarak adlandırmak, kendine saygısı olan her tasarımcının izlediği, açıkça tanımlanmış bir dizi öneri ve ilkeye sahip olduğunu kastediyorum. Google'ın Materyal Tasarımını neden tanıttığı oldukça açık: Uygulamaların birçok Android cihazında aynı görünmesi için tasarımı birleştirmeye ihtiyaç vardı.

Oldukça işlevsel olsa da, düz tasarımın anlaşılması kolay değildir. Gerçek şu ki, ekrandaki düz nesneler kullanıcıların kafasını karıştırabilir (özellikle mobil ve web arayüzleri konusunda deneyimi olmayanlar). Bu nedenle, tasarım malzemesi skeuomorfizm unsurlarını geri getirmeye çalışır, ancak çok basitleştirilmiş bir biçimde. Görüntüler düz görünüyor, özellikle gelir renkler hakkında, ancak Z ekseninin varlığı sayesinde hala çok boyutludurlar.

Başka bir deyişle, malzeme tasarımı, animasyon, gölgeler ve katmanlar gibi skeuomorfik öğelerle düz tasarımın geliştirilmiş bir versiyonu olarak adlandırılabilir. Böylece ürünü gezinme açısından daha sezgisel hale getirebilir ve genel olarak stil içinde gereksiz karmaşıklığı önleyebilirsiniz.

Düz tasarımın artıları ve eksileri

Stillerin evrim tarihini geride bırakalım ve daha önemli bir şeye geçelim - güçlü ve güçlü olanları listeleyeceğiz. zayıf taraflar düz tasarım.

• Minimalizm ve stil
• Sezgisellik. Fikrinizi kullanıcılara iletmeniz daha kolay olacaktır.
• Zaman ve kaynak tasarrufu. Sayfalar, daha az bant genişliği tüketimiyle çok daha hızlı yüklenir.
• İçeriğe odaklanın. Gerçekten değerli bilgilerden uzaklaşabilecek gereksiz ayrıntılar içermeyen bir arayüz.
• Eşit derecede iyi görünüyor farklı cihazlar PC veya akıllı telefon tarayıcısı olup olmadığı.
• Gereksiz tasarım dokunuşlarından kurtularak bir web sitesi veya uygulamanın tasarım sürecini hızlandırır.

• Minimalist tarz.
• Sezgisel düzeyde anlaşılması kolay. Malzeme tasarımının algılanması eşit derecede kolay olacaktır. deneyimli kullanıcılar ve yeni başlayanlar benzer.
• Orta derecede skeuomorfizm. Z ekseninin (benzersiz bir Google konsepti) kullanımı sayesinde her şey daha gerçekçi görünüyor.
• Sürekli güncellenen bir dizi kılavuz var. Bu nedenle, çalışma sürecinde zorluklar ortaya çıkarsa, herhangi bir tasarımcı her zaman onlara dönebilir.
• Web çözümleri için animasyon teşvik edilir. İnsanların hareketi ne kadar sevdiğini söylemeye gerek yok. Ayrıca animasyon, arayüzü daha net ve sezgisel hale getirir.

• Google'a aittir. Bu nedenle, iyileştirme için herhangi bir soru ve öneri sahibi ile ele alınmalıdır.
• Z ekseni nedeniyle tasarım süreci daha uzun sürebilir.
• Animasyonlu öğeler daha fazla kaynak gerektirir.
• Tutarlı bir şekilde yönergeleri takip etmek, bir tasarımın özgünlüğünü sınırlayabilir.

özetle

Aslında, düz ve malzeme stilleri yan yana gittiğinden, söz konusu tasarım yaklaşımlarından birinin diğerine göre açık bir avantajı olduğunu varsaymamak gerekir. İkisi de çılgınca popüler ve ikisi de aşırı gerçekçilikten yoksun. Materyal tasarımı, düz tasarımın halefi iken, düz tasarımın kendisi çok ağır ve gerçekçi kararlara bir tepkiydi. Materyal tasarımı, düz tasarımın her zaman uzaklaşmaya çalıştığı bir şeyi ekledi - biraz skeuomorfizm. Bu yaklaşımlar arasında her zaman farklılaşan bir şey olsa da: malzeme tasarımı tescilli bir üründür. Google ve düz tasarım, öncelikle genel sadelik için çabalayan çeşitli tasarım uygulamalarının birleşiminin sonucudur.

Gerçekte, düz tasarım son yıllarda tamamen "düz" bir tarzdan "yarı düz" bir tarza doğru çok gelişti. Artık nesnelerin daha önce göründüklerinden daha derin görünmesini sağlamak için katmanların ve soluk gölgelerin kullanılmasına izin veriyor. Yani, sen ve ben düz tasarım 2.0'ın mutlu çağdaşlarıyız.

Son olarak, gerçekten işlevsel ve kullanıcı dostu bir ürün yaratmak için bu iki yaklaşımı birleştirmeye çalışmaktan sizi hiçbir şey alıkoyamaz. Öyleyse düz ve malzeme tasarım gurusundan biraz ilham alın ve işe başlayın!