Düz tasarımın evrimi: yumuşak bir renk paleti. Düz tasarım ve renk paleti - SkillsUp - tasarım dersleri, bilgisayar grafikleri, photoshop dersleri, Photoshop dersleri içeren kullanışlı katalog Düz renk seçimi

İnfografikler için en iyi paletleri seçmeye yönelik bazı ipuçları ve ilkeler içeren bir gönderi.

Zheng, "Bugünlerde iyi paletler bulmak kolay olsa da veri görselleştirme için iyi renk kombinasyonları bulmak hala zor" diye yazıyor. İnfografikler için renk bulma konusunda üç ana zorluk tespit ediyor.

Düz Kullanıcı Arayüzü Renk Paleti
Protaponia'da Düz UI Renk paleti
Siyah beyaz düz UI Renk paleti

İlk olarak, tüm paletlerin oluşturulması amaçlanmamıştır. Örneğin, arayüz tasarımı kılavuzlarındaki (Google'ın Materyal Tasarımı gibi) renkler, renk körü kişiler tarafından iyi algılanmayabilir ve birbirlerinden biraz farklı görünebilir.

Color Hunt'tan dört renk paleti

İkincisi, mevcut paletlerin çoğunda yeterli renk yok. Örnek olarak, bulabileceğiniz Color Hunt web sitesinden bahsediyor. başarılı kombinasyonlar dört renk. Ancak infografiklerin genellikle 6 ila 12 renge ihtiyacı vardır.

Renk Avı sitesinden, infografiklerde renklerini ayırt etmenin zor olacağı degrade paletleri
Dört renkten oluşan degrade paleti ile 12 renk arasındaki fark

Üçüncüsü, bazı paletlerin renkleri parlaklık bakımından biraz farklılık gösterir, bu nedenle özellikle yan yanalarsa onları birbirinden ayırmak zor olacaktır.

İyiyi seçmek renk kombinasyonu Zheng, infografikler için üç kuralın kullanılmasını öneriyor.

Soldan sağa: malzeme tasarımından mavi bir palet, o da protaponya renginde, yine siyah beyaz
Renk körü kişiler ve normal görüşe sahip kişiler için parlaklık ve renk oranı

Öncelikle paletteki renklerin parlaklık açısından yeterince güçlü bir farklılığa sahip olup olmadığını kontrol etmeniz gerekir. Tasarımcı, "Parlaklıktaki fark evrensel olacak" diye yazıyor. Ayrıca parlaklıktaki büyük fark, paletin renk körü insanlar için uyarlanmasına yardımcı olacaktır. Protaponia (kırmızıya duyarlılığın azalması), döteranopi (yeşile veya diğer renklere duyarlılığın azalması) olan kişiler tarafından nasıl algılanacağını ve ayrıca siyah beyaza çevirirseniz de görebilirsiniz.

İkincisi, palet için doğal kombinasyonların kullanılması daha iyidir. Örnek olarak Zheng, açık sarıdan koyu mora ve açık mordan koyu sarıya geçişi gösteriyor. "Tamamen matematiksel bir bakış açısından bakıldığında, yaklaşık olarak aynı görünmeleri gerekir" diye yazıyor ve ilk kombinasyonun ikinciden daha doğal göründüğüne dikkat çekiyor. Tasarımcı bunu, bir kişinin doğada, örneğin gün batımı sırasında ilk paletten kombinasyonları görmeye alışkın olmasına bağlıyor.

Degradelerle çalışmak için ağ

Üçüncüsü, palet oluştururken renk farkını daha iyi hissetmek için degrade kullanmak daha iyidir. İşleri kolaylaştırmak için Zheng, Photoshop'ta yukarıdaki ekran görüntüsündeki gibi bir renk ızgarası oluşturmayı öneriyor. Degradelerin hem iki hem de 12 renk seçiminde etkili olduğunu garanti ediyor.

Infographics için şanslı paletler
Infographics için şanslı paletler

Tasarımcı ayrıca 12 tavsiyede bulundu yararlı kaynaklar renk ve paletlerle çalışmak. Onların listesini görebilirsiniz

Pratik ipuçları ve araçlar.

Her şey gibi renkler de en iyi şekilde ölçülü olarak kullanılır. Renk düzeninizde en fazla üç ana renk kullanırsanız en iyi sonuçları elde edersiniz. Tasarımda renk eşleştirmenin etkinliği büyük ölçüde dengeye dayanır ve ne kadar çok renk olursa bunu başarmak o kadar zor olur.

Renk, tasarımın kalitesini şekillendirmez; onu geliştirir.

Pierre Bonnard

Paletiniz için başlangıçta seçtiğinizin ötesinde ek renklere ihtiyacınız varsa renk tonlarını ve gölgeleri kullanın. Seçilen aralıkta çalıştırın.

Kural 60-30-10

Bu tasarım kuralı, hızlı bir şekilde bir renk şeması oluşturmanıza yardımcı olur. %60 + %30 + %10 oranı renklerin dengesini yansıtır. Bu formül işe yarıyor çünkü denge hissi yaratıyor ve gözlerin bir noktadan diğerine rahatça hareket etmesini sağlıyor. Ayrıca bu tekniğin kullanımı son derece kolaydır.

%60'ı baskın renginiz, %30'u ikincil renginiz ve %10'u vurgu renginizdir.

Renklerin anlamı

Bilim insanları yüzyıllardır belirli renklerin psikolojik etkilerini araştırıyor. Renkler estetiğin yanı sıra duygu ve çağrışımlar da yaratır. Kültüre ve koşullara bağlı olarak renklerin anlamları farklı olabilir. Bu yüzden moda butiklerini siyah beyaz görüyorsunuz. Zarif ve asil görünmek istiyorlar.

• Kırmızı: tutku, aşk, tehlike
• Mavi: barış, sorumluluk, güvenlik
• Siyah: gizem, zarafet, kötülük
• Beyaz: temizlik, sessizlik, düzenlilik
• Yeşil: yenilik, tazelik, doğa

Renklerin anlamları hakkında daha fazla bilgiyi Renk Kültürü'nde bulabilirsiniz.

Önce gri tonlama

Tasarım geliştirmenin ilk aşamalarında renkler ve tonlarla oynamayı severiz, ancak bu davranış sizi çok çabuk oyuna getirebilir - ana rengi seçmek için 3 saat harcayabilir ve yine de fikrinizi değiştirebilirsiniz ... Kesinlikle cazip, ama pek etkili değil.

Bunun yerine, kendinizi yapı, dolgu ve düzendeki öğelerin yerleşimi üzerinde çalışmaya zorlayın. Bu çok zaman kazandıracak. Bu çalışma oldukça verimlidir. Öte yandan sıkıcı olması da gerekmiyor. Hoş bir görünüm elde etmek istiyorsanız farklı tonları deneyin dış görünüş.

Saf grilerden ve siyahlardan kaçının

Şimdiye kadar karşılaştığım en önemli renk hilelerinden biri kaçınmaktır gri çiçekler doygunluk olmadan. İÇİNDE gerçek hayat Saf griler yoktur. Aynı şey siyahlar için de geçerli.

Unutmayın, her zaman renge biraz doygunluk eklemeniz gerekir. Bilinçaltında daha doğal ve kullanıcılara daha yakın algılanacaktır.

Doğaya inanın

En iyi renk kombinasyonları zaten doğa tarafından icat edilmiştir. Her zaman doğal görünürler. En iyisi çevredeki doğayı gözlemlemek ve oradan tasarımlarınız için paletler çıkarmaktır, doğada bunlar her zaman değişir.

İlham almak için etrafınıza bakmanız yeterli

Kontrastı Koruyun

Bazı renkler birbiriyle iyi gider, bazıları ise uymaz. Tonların etkileşimi için, en iyi şekilde gösterilen, tanımlayıcı kurallar vardır. renk çemberi. Bu yöntemlerin farkında olmalısınız, ancak bunları manuel olarak kullanmanıza gerek yoktur.

İlham almak

Kullanıcı arayüzü örnekleri bulma söz konusu olduğunda, dribbble en iyi yerler bunun için. Bir renk arama aracına sahiptir. Yani belirli bir rengin diğer tasarımcılar tarafından kullanımına ilişkin görsel bir araştırma yapmanız gerekiyorsa

Video, baskılı tasarım, iç tasarım, moda… İlham alınabilecek pek çok yer var. İlginç bulguları gelecekteki fikirler için saklayın.

Çoğunlukla KPOP video kliplerinden renk çalmayı seviyorum. Onlar lüks.

Aletler

İşleri benim için kolaylaştırmak için işte birkaçı en iyi araçlar Renk paletlerini seçmek için Zamanınızın çoğunu kurtaracaklar.

Kesinlikle en sevdiğim renk seçici. Boşluk çubuğuna basarak yalnızca bir renk seçip bir palet oluşturabilirsiniz. Coolors, bir görsel yüklemenize ve ondan bir palet oluşturmanıza olanak tanır. Tek bir sonuçla sınırlı değilsiniz; seçici, başlangıç ​​referans noktasını değiştirmenize olanak tanır.

Kuler

Adobe'nin bu aracı zaten uzun zamandır tasarımcılara yardımcı olmak. Tarayıcıda çalışır, ayrıca masaüstü sürümü de vardır. Masaüstü sürümünü kullanıyorsanız renk şemasını Photoshop'a aktarabilirsiniz.

Kuler'e benzer, farkı 5 tonla sınırlı olmamanızdır. Ana renkleriniz varsa ve tamamlayıcı tonlarla oynamak istiyorsanız harika.

tasarım ilhamı.net

Bir renk paleti fikriniz olduğunu ancak görsel olarak karşılaştırmanız gerektiğini düşünün. farklı varyantlar. Tasarım ilhamı bu amaçlar için mükemmeldir. En fazla 5 renk seçersiniz, renk tonlarınızla eşleşen görselleri ararsınız. Hizmet yalnızca belirli bir paletteki görselleri başarıyla aramakla kalmıyor, aynı zamanda tasarıma entegrasyon için doğru grafiklerin seçilmesine de yardımcı oluyor.

Siz soruyorsunuz - ya seçilen renkte bir fotoğraf aramak istersem? Shutterstock, belirli bir renk tonunun fotoğraflarını bulabileceğiniz Spectrum adında bir araca sahiptir. Bunu yapmak için aboneliğe bile ihtiyacınız yok çünkü filigranlı görsellerin ön izlemesi bir palet oluşturmak için yeterli olacaktır.

Tineye Çok Renkli

Ancak belirli birkaç renk için bir fotoğraf bulmanız veya hatta her renk tonunun belirli bir miktarını ayarlamanız gerekiyorsa Tineye'ı kullanın. Bu site, Flickr'dan alınan 10 milyon Creative Commons görselinden oluşan bir veritabanını kullanıyor.

Son düşünceler

Renk, özellikle dijital tasarım çağında ustalaşması çok zor bir kaynaktır. Bu yazıda verdiğim ipuçları doğru tonları bulmanızı kolaylaştıracak. Harika renk şemaları oluşturmayı öğrenmenin en iyi yolu pratik yapmaktır; bu nedenle renklerle bolca oynayın.

Bu yazımda sizlere düz tasarımdan bahsedeceğim. Daire son birkaç yılda web'deki önde gelen trendlerden biri haline geldiğinden, bununla ilgili bir şeyler duymuş olmalısınız.

Bugün düz tasarımın ne olduğunu, nasıl ortaya çıktığını ve temiz, parlak ve duyarlı bir tasarım oluşturmak için neye ihtiyacınız olduğunu anlayacağız.

Bulabilirsin iyi örnekler http://market.envato.com/ adresinde düz tasarım. Modern tasarımın neye benzediğine dair size net bir fikir verecek çok sayıda düzen, simge ve şablon var. .

1. Düz tasarım nedir?

Düz tasarım - modern tarz Kullanıcı arayüzünün yanı sıra minimalizm ile karakterize edilen grafik tasarım. Düz tasarım, minimum öğe kullanımı ve çeşitli doku, gölge ve ışık efektlerinin bulunmaması ile karakterize edilir, örneğin: karışık renkler, degradeler, vurgular vb.

Düz ve skeuomorfizm( Skeuomorfizm, bir ürüne diğerinin görünümü verildiğinde ortaya çıkan bir tasarım ilkesidir; Ne zaman çeşitli unsurlar arayüzler gerçek nesnelerden kopyalanmıştır - yaklaşık çeviri.) Zengin tasarımın yanı sıra, düz tasarımın hiç de ilk bakışta göründüğü kadar basit olmadığını söylemekte fayda var. Skeuomorfizmin bazı özelliklerini içerir, ancak bunun hakkında biraz sonra konuşacağız.

Genel olarak düz, görsellerin dikkatini dağıtmadan kullanıcının içeriğe odaklanmasına yardımcı olur. Düz tasarım, öğelerin sadeliğini vurgularken arayüzü daha duyarlı, hoş ve kullanımı kolay hale getirir.

2. Biraz tarih

Düz tasarım, bildiğiniz gibi, web'de küresel bir trend haline geldiği andan çok önce vardı. Düz tasarım 80'li yıllarda teknolojinin henüz yeterince gelişmemiş olması nedeniyle oldukça popülerdi. karmaşık etkiler, dokular ve gölgeler. Ancak o zaman bile tasarım, arayüz öğelerini olabildiğince gerçekçi hale getirmeye çalışarak skefomorfizm için çabaladı.

Şimdi gördüğümüz haliyle düz tasarım, Microsoft'un metro tarzı denilen ürünler üretmeye başlamasıyla popülerlik kazanmaya başladı. Metro, Microsoft'un stili ve sadeliğiyle etkileyici bir kullanıcı arayüzü tasarımıdır.

2010 yılında Microsoft, ilk ürünlerinden birinden miras kalan keskin kenarlara ve basit grafiklere sahip düz bir tasarım kullanan Windows Phone 7'yi piyasaya sürdü. Microsoft (Zune). Daha sonra Microsoft, başarıdan ilham alarak şunları yayınladı: işletim sistemi Windows 8 aynı Metro düz stilini temel alıyor.

Sonuçta düz tasarım, Apple'ın 2013'te piyasaya sürülmesiyle zirveye ulaştı iOS 7 temel olarak gösteriliyor yeni tasarım simgeler ve yazı tipleri de dahil olmak üzere tamamen yeniden tasarlanmış kullanıcı arayüzü öğeleriyle. Apple oluşturuldu Kullanıcı arayüzü ve simge tasarımının görsel ilkeleri .

Kısa bir süre sonra Google da düz stili uygulamalarında ve web sayfalarında kullanmaya başladı. malzeme tasarımı. Google'ın, web tasarımının hedeflerinin açıklaması, ilkeleri ve çeşitli tasarım nesneleri oluşturmaya yönelik talimatlar (ikonlar, düzenler vb.) dahil olmak üzere bu stile ayrılmış bir bölümü bile vardır.

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

Bu nedenle, firmalardan düz tasarımın üç küresel örneği vardır; bunlar olmadan hayal edilmesi zor modern dünya teknolojiler:

Microsoft'un Metro tasarımı

Apple iOS 7 tasarımı

Google'ın Materyal Tasarımı

3. Temizliği hatırlayın

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

Üstelik düz tasarımda nesneler oldukça basitleştirilmiş ve stilize edilmiş bir şekilde tasvir ediliyor.

Ve bazen bir nesnenin sadece silueti veya konturları bile kullanılır; nesneyi tanınabilir hale getirmeye yetecek kadar, ancak onu 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 anlaşılması daha kolay. Bu, tasarımın minimalist, temiz kalmasını sağlar ve yoğun, dağınık bir görünüm kazanmasını engeller.

4. Mükemmel

Düz simgeler ve kullanıcı arayüzü öğeleri oluşturmaya gelince, bunların net, düzgün ve piksel açısından mükemmel görünmesini sağlamanız gerektiğini bilin. mümkün olduğu kadar. Üstelik bu hem raster hem de vektör grafikler için geçerlidir.

program ile Adobe Photoshop burada her şey açık: piksellere dayalı raster grafiklerle çalışıyor.

Adobe Illustrator programı ise vektör adı verilen ve matematiksel formüllerle verilen eğri ve çizgilerden oluşan vektör grafiklerini kullanır.

Bir zamanlar Adobe Illustrator piksel mükemmelliğinde grafikler oluşturmak için özellikle uygun bir program değildi. İyi haber şu ki en son sürümler Illustrator, iyi grafikler oluşturmak için harika bir araç haline geldi.

Vektör grafiklerinin çoğunlukla basit, düz şekiller, düz renkler ve ızgaralarla çalışmayı içerdiğini söylemeliyim.Adobe Illustrator çok esnektir ve ızgarayı ihtiyaçlarınıza göre uyarlamanıza, nesneleri hizalamanıza ve kullanmanıza olanak tanır. Çeşitli türler yakalama. Bu, her ekranda temiz ve şık görünen mükemmel tasarımı oluşturmayı kolaylaştırır. Mükemmel grafiklerin nasıl oluşturulacağını öğrenmek istiyorsanız şu makaleyi okumalısınız: Adobe Illustrator'ı kullanarak piksel mükemmel sanat eserleri nasıl oluşturulur? .

5. Renk

Düz tasarımın gölgelerin yanı sıra daha spesifik ö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 sululuk ile ayırt edilir.Düz renk şeması birkaç özel renkle sınırlı değildir, birçok ton içerirler ve seçimleri yalnızca ne tasvir ettiğinize bağlıdır, ister şeker ikonları ister sofistike bir retro paletindeki retro tarzı nesneler olsun.

Diyelim ki bir kullanıcı arayüzü tasarımcısısınız ve renk paletleri konusunda iyisiniz, denemeler yapıyorsunuz renk paneli Photoshop ve Illustrator'da renkleri dilediğiniz gibi karıştırın. Ancak bu süreç oldukça karmaşıktır ve iyi bir sezgi, deneyim ve beceri gerektirir. Burada kendi renk paletinizi oluşturmanıza yardımcı olabilecek bazı araçlar bulacaksınız.

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

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

Yararlı olabilecek özel paletlere sahip birkaç benzer hizmet daha vardır. Ancak düz tasarım için özel olarak yapılmış bir araç var: Designmodo'nun FlatUIColors.com'u, çalışması çok kolay olan bir dizi "düz" renk içeren bir hizmettir. Bu site iyi şeyler arayan tasarımcılar arasında çok popüler hale geldi renk çözümleri mükemmel tasarım için. Dene!

Ve daha fazla renk ve palet çeşidini burada bulabilirsiniz. Google'ın Materyal Tasarımı Kılavuzu.

6. Uzun gölgeler

Yukarıda belirtildiği gibi, düz tasarım basitlik ile karakterize edilir, birçok boş alan- bu nedenle Flat herhangi bir efektin kullanılmasını reddeder. Ancak düz tasarıma özgü bir efekt vardır. Bu etki bir trend haline geldi ve Karakteristik özellik düz.

Artık uzun gölgelerden bahsediyoruz. Biraz var tipik özellikler bu etkiyi tanınabilir hale getiriyor: 45 derecelik bir eğim ve büyük beden(gölge nesnenin kendisinden birkaç kat daha uzun olabilir. Sonuç olarak, uzun gölgeler düz yüzeye bir miktar derinlik etkisi verir.

Bu etki, nesneyi daha üç boyutlu hale getirir 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ı temiz ve okunabilir kılan basit yazı tipi stillerini kullanır. Birçok bulabilirsiniz ücretsiz yazı tipleri Adobe ürünlerini kullanıyorsanız Adobe Typekit'te. Ayrıca Font Squirrel'da pek çok güzel ücretsiz yazı tipi bulabilirsiniz. Ancak yazı tipini ticari amaçla kullanacaksanız lisansını okumayı unutmayın.

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

Yazı tiplerini dikkatli kullanın, tasarımı vurgulaması ve tasarıma uyması gerektiğini ve ayrı bir öğe gibi görünmemesi gerektiğini unutmayın.Bu, serif yazı tiplerini veya karmaşık el yazısı yazı tiplerini kullanamayacağınız anlamına gelmez. Minimalist olmayı ve her şeyi dengede tutmayı unutmayın. Ancak düz, daha katı ve düzgün göründükleri için sans-serif yazı tiplerini hala daha sık kullanıyor.

8. Düz Tasarımın Artıları ve Eksileri

Her ne kadar düz tasarım birçok avantajı nedeniyle bu kadar popüler hale gelse de tasarımcıların bu stili kullanırken karşılaştıkları bazı dezavantajlar da var. Artılarına ve eksilerine bakalım.

artıları

Popülerlik

Düz tasarım bir trend haline geldi ve giderek daha fazla koleksiyon toplandı olumlu geribildirim\ tasarımcılardan ve web tasarımcılarından ve hiç de zemin kaybediyor gibi görünmüyor. Tam tersine giderek yaygınlaşıyor, yeni biçimler ve özellikler kazanıyor, giderek daha yaratıcı oluyor.

Basitlik

Düz tasarım basit, minimalist ve temizdir. Flat on the web, kullanıcıların görsellerin dikkatini dağıtması yerine içeriğe odaklanmasına yardımcı olur. Bu aynı zamanda arayüzler için de işe yarar mobil uygulamalar: Büyük düğmelerle temiz tasarım kullanım sağlar mobil cihazlar mükemmel.

Parlaklık

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

Kusurlar

Dairenin daha pek çok avantajı var ama hiçbir tasarım mükemmel değildir ve onu idealleştiremeyiz. Düz tasarımın bahsetmemiz gereken bazı dezavantajları şunlardır:

Yanıtsızlık

Bazen yokluk önemli ayrıntılar veya görsel efektler, kullanıcı dostu bir arayüz oluşturma sürecini zorlaştırır ve genellikle tüm tasarımın yanıt vermemesine neden olur. Bir web sayfasında ekranda tıklamanız veya dokunmanız gereken öğeleri bulmak zor olabileceğinden, tüm kullanıcılar düz konusunda rahat hissetmezler. cep telefonuçünkü etkileşimli değiller.

Tipografiyle ilgili sorunlar

Daha önce de belirttiğimiz gibi her yazı tipi düz tasarıma uymayabilir. Bazen keskin kenarları olan bu kadar zengin bir yazı tipi gerçekten dengeli ve şık görünüyor. Ancak yazı tipinin yanlış seçilmesi durumunda bu durum tasarımın tamamını bozabilir. Hangi yazı tiplerinin düz yazı tipine uygun, hangilerinin uygun olmadığına dair gerçekten iyi bir fikir sahibi olmanız gerekir. Deneyim 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ı da olabilir; diğer düz tasarımlar tamamen sizinkine benzemektedir. Dolayısıyla, aynı basitleştirilmiş şekilleri, sınırlı renk paletlerini ve benzer yazı tiplerini kullandığınız için simgelerinizin veya web sayfalarınızın başkasının tasarımından farklı görünmesini sağlamak çok zordur. Sonuç olarak düz tasarım zamanla sıkıcı hale gelebilir.

9. Geleceğin Düz Tasarım Trendleri

Düz tasarımın tamamen kendi kendine oluştuğu ve durduğu söylenemez, belki de yukarıda belirtilen eksikliklerden dolayı, dairenin gelişme ve değişme eğilimi göstermesi, yeni özellikler kazanması ve görsel ifade gücünü artırması olabilir.

Düz tasarımın son örneğine dikkatlice bakarsanız gerçekten öyle olduğunu görebilirsiniz.Titiz araçlarından yavaş yavaş yararlanır ve degradeler, gölgeler, ışıklandırma ve diğer görsel efektler gibi ince efektler eklemeye başlar.

Bu küçük dokunuşlar, düz tasarımlara, skeuomorfik tasarımlarda olduğu gibi aşırı ayrıntıya girmeden biraz derinlik kazandırır.Bu küçük iyileştirmeler, daireyi daha duyarlı ve konforlu hale getirmenin yanı sıra, daireyi daha esnek ve çok yönlü hale getirerek yeni bir görünüm kazandırır.

Böylece daire özelliklerini kaybetmez, daha ilginç, esnek hale gelir- Gerçekten iyileşiyor.

sonuçlar

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

Umarım bu makaleden yeni bir şeyler öğrenmişsinizdir veya en azından ilginç bulmuşsunuzdur. Daha önce yapmadıysanız düz tasarımı denemelisiniz.

Sonuçta düz tasarım hakkında başka nelerden bahsetmek gerekir?

Keskin kenarları, sulu renkleri ve net yazı tipleri, temizliği ve minimalizmi ile düzlüğü gerçekten seviyorsanız, o zaman devam edin!

Bu trenddedir, ancak diğer grafik stillerinde olduğu gibi kendinizi tek bir teknikle sınırlamayın. Düz renk trenddeyse bu, projenizde başka stilleri kullanamayacağınız anlamına gelmez. Küçük detayları ve dokularıyla 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, şaşırtıcı derecede uzun süredir ortalıkta olan web tasarım trendlerinden biridir. Geçtiğimiz birkaç yılda bu tasarım, masaüstü, web ve mobil uygulamalara yönelik arayüzlerin geliştirilmesinde aktif olarak kullanıldı. Ayrıca basılı grafik materyallerin oluşturulmasında düz tasarım aktif olarak kullanılmaktadır. Bu çevrimiçi kılavuzdan düz tasarım hakkında daha fazla bilgi edinin. Bugün konuşmamızın konusu genel olarak düz tasarım değil, onun özel kısmı - düz renkler olacak.

Düz tasarım adını bir nedenden dolayı almıştır: Konsepti üç boyutlu öğelerin, derin gölgelerin ve parlak degradelerin kullanımını hariç tutar (İngilizce "düz", "düz" anlamına gelir). Düğmeler, simgeler ve diğer grafik öğeleri basit ve canlı görünür ancak yine de çekicidir.

Düz bir web sitesi tasarımı geliştirmek o kadar kolay değil. Temel zorluklar etkileşimli öğelerde ortaya çıkar çünkü tasarımın statik ve dinamik içerik arasındaki farkı vurgulaması gerekir. Kullanıcılara hangi öğelerin etkileşimli olduğunu söylemenin tek yolu ince gölgeler ve kenarlıklar kullanmaktır. Bu nedenle "dengeli" bir düz düzen oluşturmak için her unsuru en küçük ayrıntısına kadar düşünmeniz gerekir ve bu kolay bir iş değildir.

Renk şeması için düz renkler seçme

Web tasarımında renklerin önemi göz ardı edilemez. Örneğin başarılı olan daha fazla okuyucunun ilgisini çekebilir. Düz tasarımın renkle ilgili her konuda benzersiz olduğu hemen söylenmelidir. Düz tasarımın parlak renkleri kullanıcıların dikkatini hemen çekiyor. Gelenekselden farklı olarak renk şemaları iki veya üç renk tonundan oluşan düz düzenlerin tasarımı dört veya daha fazla renkte gerçekleştirilir. Çoğu zaman bunlar gri veya siyahla kombinasyon halinde doygun tonlardır.

Geleneksel renk kombinasyonu kurallarının düz tasarıma uygulanması pek mümkün değildir. Düz tasarımda önemli olan renklerin kendisi değil, tonları ve doygunluğudur. Bir düzenin tasarımında kesinlikle birkaç tane kullanabileceğiniz gerçeğine rağmen farklı renkler derinlemesine birleştirilmeleri gerekir. Düz renklerin kendisi birincil veya ikincil olabilir. Beyaz ve siyahın zıt bir kombinasyonu bile olabilir.

Teoriden pratiğe geçerek sizlere W3.CSS düz renk setinden bahsetmek istiyorum. Bu koleksiyon, web siteleri oluşturmak için çeşitli renk şemaları içerir. Burada malzeme tasarımı renklerini, düz renkleri, Windows metro renklerini ve Windows telefonu 8. Seçilen kombinasyonu hızlı bir şekilde uygulayabilmeniz için bu koleksiyona HTML ve CSS kod örnekleri eşlik etmektedir.

Tamamen yeni başlayan biriyseniz ve nereden başlayacağınızı bilmiyorsanız Düz UI Renkleri'ne göz atın. Bu sitede beğendiğiniz rengi kopyalayabilir ve ardından uygun değeri girerek grafik düzenleyicide bulabilirsiniz. Gördüğünüz gibi seçime hakim olan parlak renkler- yeşil ve maviden sarı ve turuncuya.

Ancak düz tasarımda bile renk seçiminin sınırları vardır. Örneğin, kırmızı, sarı ve renklerin bir kombinasyonunu görmeniz pek olası değildir. mavi çiçekler tek bir düzende. Tasarımcılar daha doygun ve karışık tonları tercih ediyor.

Düz bir web sitesi tasarımı geliştirmek ister misiniz? Düz tasarım ilkeleri göz önünde bulundurularak oluşturulan MotoCMS 3.0 şablonlarına dikkat edin. Kullanıcı arayüzü özelliklerini nasıl etkilediklerini göstermek için şablonları çeşitli düz renk şeması örnekleriyle karşılaştırdık.

Parlak renkler. Canlı maviler, yeşiller ve morlar, beyaz veya siyah arka planlarda güzel bir şekilde öne çıkıyor. Bu renkler genellikle düz web sitesi tasarımında kullanılır.

Yazdırma Hizmetleri Web Sitesi için MotoCMS 3.0 Şablonu

Yazdırma Hizmetleri Web Sitesi için MotoCMS 3.0 Şablonu - mükemmel çözüm Baskı ve baskı ile ilgili bir proje için. Ancak şablonun teması kolaylıkla değiştirilebilir. Şablonun tasarımı düz tasarım ilkeleri dikkate alınarak geliştirilmiştir. Kullanıcılara 20 widget ve modülün yanı sıra kaydırıcılar ve galeriler için 8 seçenek sunulmaktadır. Bütün bunlar popüler ve orijinal bir çevrimiçi proje oluşturmanıza yardımcı olacaktır.

Retro renkler. Genellikle bunlar parlak kırmızılar ve mavilerle birleştirilmiş pastel turuncular ve sarılardır. Çoğunlukla birincil düz renkler retro tarzı ikincil ile birleştiğinde - karıştırma etkisini elde etmek daha kolaydır.

Düz tasarım gibi bir trend sürekli gelişiyor - düz elemanların aktif olarak kullanıldığı yeni alanlar ortaya çıkıyor. Düz tasarım son zamanlarda parlak renklerle ilişkilendirilmeye başlandı. Son zamanlarda birçok tasarımcının, netleştirilmiş veya sessiz bir renk paleti kullanarak daha sakin tonları tercih etmeye başladığını görebilirsiniz. Farklı renk tonlarının bir kombinasyonunu denemek, tasarımı daha şık ve modern hale getirmenize ve benzer temel unsur düzenlemesiyle diğer sitelerden öne çıkmanıza olanak tanır.

Sessiz bir renk paleti kullanmak aşağıdaki durumlarda da yardımcı olabilir: parlak renkler sitenin ana gamıyla çatışıyor. Bazı durumlarda çok gösterişli tonlar kullanıcıları rahatsız edebilir ve bu da site için iyi değildir. Aksine, sakin bir renk şeması düz tasarım estetiğine çok iyi uyum sağlar çünkü en önemli unsurları vurgulayarak görsel bir hiyerarşi oluşturmanıza olanak tanır.

Parlak renkler dikkat çeker, göze çarpar ancak tasarımda dikkatli kullanmanız gerekir, aksi takdirde dikkati bir öğeden diğerine atlayacak olan kullanıcının kafasını karıştırma riski vardır. Orijinal renklerden bazılarını açıklaştırarak, ana rengi korurken tasarımın bazı bölümlerini arka plana itebilirsiniz. renk uyumu alan.

AÇIK TONLAR

Yeni bir renk tonu oluşturmak için orijinal renge beyaz ekleyebilirsiniz. Açıklaştırılmış bir gölge daha açık olarak algılanır, bu tür renklere bazen pastel de denir. Gölgelerin doygunluğu neredeyse beyazdan, orijinal renkten yalnızca biraz daha açık bir gölgeye kadar değişebilir. Daha hafif bir palet kullanan tasarımlara sahip siteler daha hafif ve "daha yumuşak" olarak algılanır ve çoğu zaman tasarımcının amacının tam olarak gerçekleştirilmesine olanak tanır. Sonuçta, parlak renkler kullanmak her zaman gerekli değildir - netleştirilmiş bir gamın fazlasıyla uygun olduğu çok sayıda konu vardır. açık tonlar kullanıcının dikkatini ana içeriği görüntülemekten alıkoymadığı için fotoğraflarla iyi bir şekilde birleştirilmiştir.

Jack Horner fast food restoranının web sitesine bakarsanız, hafif soluk sarı renk tonunun siyah tasarım öğeleriyle keskin bir tezat oluşturduğunu görürsünüz. Böylece tasarımcı, ziyaretçilere geleneksel yemeklere göre hazırlanan restoranın ana "numarasını" kullanıcılara aktarmaya çalışıyor. eski tarifler. Burada hafif bir retro referans, şirketin teşvik ettiği eko-temaya çok iyi uyuyor.

www.caketeacher.com sitesinde açık tonlar da mevcut, burada pek çok şey bulabilirsiniz faydalı ipuçları evde kek yapmak için. Buradaki tonlar Jack Horner'ın web sitesindekilerden biraz daha parlak, ancak kullanıcının ortalanan fotoğraflara odaklanmasını engellemiyor. Yumuşak tonların parlak unsurlarla kontrastı, kullanıcının ana içeriği (tarifler, ipuçları ve püf noktaları) görüntülemeye odaklanmasına yardımcı olur. Buna ek olarak, açık renk şeması, bir noktada sitedeki tüm içeriğe erişmek için aylık 18,90 ABD dolarına abone olmak zorunda kalacağını anlayan bir ziyaretçinin sahip olabileceği bazı olumsuz algıların ortadan kaldırılmasına yardımcı olur.

KOYU TONLAR

Temel renge siyah eklenerek koyu tonlar elde edilir. Renk şeması daha katı ve ağır hale gelir. kirli, koyu gölgeler Sitede doğru atmosferi yaratmanız gerekiyorsa iyi çalışın. İyi görünüyor sessiz Renk paleti Ann Taylor web sitesi gibi ticari web sitelerinde.

Koyu gölgeler tasarıma sağlamlık kazandırır ve aynı zamanda dikkati dağıtmaz. Sitede bir kadının gün boyu rahat hissetmesini sağlayacak kıyafetler ve çeşitli aksesuarlar satın alabilirsiniz. Ann Taylor'ın eşyaları, renk şemasıyla vurgulanan rahat ve rahat gündelik kıyafetlerdir. Ancak şirket iddialı ve gösterişli bir marka olsaydı, parlak gösterişli tonlar kullanılmadan yapmak pek mümkün olmazdı.

Frida Cafe web sitesinin tasarımı, Meksikalı sanatçı Frida Kahlo'nun sıklıkla kullandığı renk şemasını kullanıyor. Bunlar sessiz sarı, koyu sarı ve yeşil tonlardır. Tasarımcıya ifade etme görevi verildi ana fikir kafe sahipleri - basit ve uygun fiyatlı mutfağa dönüş. Frida Cafe'de ziyaretçiler, tasarımda kullanılan yumuşak renklerin vurguladığı, oldukça zengin bir tada sahip, taze demlenmiş kahveyi tadabiliyor.

ÇÖZÜM

Tasarımda yumuşak renk tonlarının kullanılıp kullanılmaması duruma bağlıdır. Bazı durumlarda fazlasıyla uygun olacaklar, bazılarında ise olmayacaklar. Yumuşak renk paletlerinin günümüzde moda olması, düz tarzda bir tasarım oluştururken bu tür tonlar olmadan yapamayacağınız anlamına gelmez. Her zaman denemeye yer vardır ve parlak renkler daha iyi sonuç verirse bunları kullanın. Ancak sitede belli bir atmosfer yaratmak istiyorsanız yarı tonlar olmadan yapamazsınız. Yumuşak renkler Vurguları daha doğru bir şekilde yerleştirmenize ve kullanıcının dikkatini en önemli şeye odaklamanıza olanak tanıyan çeşitli içeriklerle mükemmel bir şekilde birleştirilmiştir.