Düz tasarım örnekleri. Düz tasarım: ilham alınacak özellikler ve en iyi örnekler

Düz tasarım- tüm tasarım topluluğunun hakkında konuşmaya devam ettiği nispeten yeni bir trend.

Kimisi çok beğeniyor, kimisi ise kesinlikle alışamıyor, hatta nefret ediyor.

İyi bir tasarımın öncelikle müşterinin iş problemini çözmesi gerekir; bunun hangi yollarla sağlanacağı ikincil bir sorudur. Tasarımcı bir stil veya araç olarak "düz tasarım"ı seçmişse, öyle olsun! Ancak bu tarzın her projeye uygun olmadığını unutmayın.

O halde moda akımına yenik düşüp “düz tasarım” tarzında çalışmaya karar verirseniz hatırlamanız gerekenleri analiz edelim.

Düz tasarımın temel ilkeleri şunlardır:

1. Etki yok

2. basit unsurlar

3. Tipografiye odaklanın

4. Renge odaklanın

5. Minimalist yaklaşım

6. “Neredeyse” düz tasarım

Şimdi düz tasarım ilkelerinin her birine daha ayrıntılı olarak bakalım:

Efekt yok

Düz tasarımda genellikle gölgeler, eğimler, kabartmalar, degradeler veya derinlik ve hacim katan diğer teknikler gibi efektler kullanılmaz. Stilistik rakip "Skemorfizm"den farklı olarak 3 boyutlu efektler veya önemlilik aktarımı yok. Bir simge, bir gezinme çubuğu veya bir çerçeve, bir düğme vb. olsun, her öğe net kalmalıdır.

Düz stil, ek özellikler ve unsurlar olmadan belirgin bir görünüme sahiptir. Açık bir kompozisyon hiyerarşisi ve öğelerin yerleştirilmesi anlayışına dayanır. Bu yapı, tasarımın her kullanıcı için algılanmasını kolaylaştırır ve sezgisel hale getirir.

Basit öğeler

Düz tasarımda genellikle düğmeler ve simgeler vb. gibi basit kullanıcı arayüzü öğeleri kullanılır. Tasarımcılar bu arayüz öğelerini oluştururken basit şekillere (dikdörtgen, daire, kare vb.) sadık kalırlar; bu, her şeklin kendi başına ayakta durmasını sağlar.

Ancak basit öğeler basit tasarımla karıştırılmamalıdır; düz bir tasarım konsepti, stil açısından farklı herhangi bir tasarım konsepti kadar karmaşık olabilir.

Tipografiye odaklanın

Düz tasarım hacimsiz basit form elemanlarına dayandığından tipografi düz kompozisyonda son derece önemli bir unsurdur.

Yazı tipinin karakteri genel şemaya ve kompozisyona uygun olmalıdır; aşırı karmaşık bir yazı tipi, aşırı basitleştirilmiş bir tasarım modelinde garip ve iddialı görünebilir. Kalın veya kalın, basit bir sans-serif yazı tipinin kullanılması tercih edilir. Metin basit formlarla uyumlu olmalıdır.

Yazı tipi, kullanıcıların arayüzümüzle etkileşime girmesine yardımcı olan yardımcı bir araç olmalıdır. Düğmeler ve diğer öğeler üzerindeki etiketler karmaşık olmamalıdır.

Renk vurgusu

Renk tasarımın önemli bir parçasıdır. Düz tasarım paleti genellikle diğer tasarım stillerinden çok daha parlak ve renklidir. 2-3 renge odaklanan sıradan bir tasarımla karşılaştırıldığında, düz bir tasarım 6 hatta 8 renk tonu içerebilir.

Bir web sayfasının hafif ve davetkar tasarımı en doğru tasarım olarak kabul edilir. Çoğu durumda düz bir web sitesi tasarım stili uygundur. Basit arayüzler genellikle daha iyi çalışır ve minimalizme yönelik genel eğilim sayesinde Düz yön hala geçerlidir (Microsoft ve Apple, işletim sistemlerini düz hale getirdi). Tanınmış firmalar, tasarımlarında güzel düz renkler kullanarak, kişiliklerini ifade etme, markalarına dikkat çekme veya dönüşümleri artırma fırsatını asla kaçırmazlar.

İyi Düz tasarım örnekleri

Kolay gezinme ve net bir arayüze sahip, güzel ve akıllıca tasarlanmış düz web siteleri. Düşünceli, işlenmiş tasarımları iyi satıyor ve iyi bir kullanıcı deneyimi yaratıyor.

Öğle yemeği

Dairenin benzersiz gri-beyaz-turuncu versiyonu. Mikro yinelemeler, hayalet düğmeler ve bulanık arka planların paralaks kaydırmasıyla etkileyici bir kullanıcı arayüzünde güzel görünür. Yapışkan menü ve alt bilginin sayfa gövdesinin arka planıyla örtüşmesi gibi kaydırma efektleri, siteyi görsel olarak daha kompakt hale getirir.

eTecc İnteraktif

Bir Amerikan ajansının web sitesinin sade tasarımı pek de sıradan görünmüyor çünkü... yüksek kalite ve lezzetle üretilmiştir. Eski tasarım tarzı, inovasyondan daha kötü değildir ve şirketi ve hizmetlerini avantajlı bir şekilde sunabilir.

Nehora Hukuk Bürosu

Sofistike unsurlara sahip sade ve düz tasarım, Kaliforniya hukuk firmasının web sitesine profesyonel bir görünüm kazandırıyor. Üstbilgi ve altbilgi güzel bir şekilde tasarlanmıştır. Koyu turkuaz zemin üzerinde beyaz ve altın tonları güzel, yumuşak bir kontrast oluşturur. Sayfaların kullanıcı odaklı arayüzü içeriğin düzenlenmesine olanak sağladı.

Tova

Alman ajansının WordPress sitesi, HTML5/CSS3 efektleri ve . Pastel / gri-altın tonları, fotoğrafların renk düzeltmesi ve modüler düzen, sitenin şirketle ilgili ilginç gerçeklerden oluşan bir kolaj şeklinde güzel bir şekilde tasarlanmasına yardımcı oldu.

Amazee Laboratuvarları

İsviçreli Drupal geliştiricilerinin web sitesi, hoş renk kombinasyonlarına sahip kısa ve öz bir tasarıma sahiptir. Harekete geçirici mesajlar yaratıcı bir şekilde tasarlanmış olup, Düz ve HTML5/CSS3 teknikleri kullanılmıştır.

Uzay iğnesi

Space Needle, Seattle'ın bir sembolüdür. Sitenin ayrıca arka planlı bir ana sayfası da var. Kaydırma, sonunda aydınlatma efektleri ve mini slaytlarla benzersiz bir şekilde tasarlanmıştır.

Amsterdam'da inşa

Hollandalı marka ajansının özel navigasyon menüsüne sahip güzel, düz bir web sitesi var. Arayüz güzel ve şık bir şekilde tasarlanmış, iyi.

Sarı Konferans

İyimser içerik, parlak sarı renk ve site sizi pozitifliğe hazırlıyor.

Joy Intermedya

Polonya'dan uluslararası bir yaratıcı ajansın CSS3 ve iyi UX kullanan düz tasarıma sahip web sitesi. Sitede yan ve alt paneller kullanılmakta olup kullanımı kolaydır.

Fuse Laboratuvarı Yaratıcısı

Kullanışlı, yarı saydam bir yan menüye, bir proje paneline ve ana ekranda göze çarpmayan mini girişlere sahip, iyi yapılandırılmış, kullanıcı dostu bir Amerikan ajans web sitesi.

Çobani

Küçük bir b2b şirketinin, HTML5'i temel alan temiz bir tasarıma sahip, hoş ve kullanıcı dostu bir mutfak web sitesi var. Sabit bir açılır menü ve orijinal dört seviyeli ikincil navigasyon sistemi, ürün yelpazesinin sunulmasına yardımcı olur.

Benzersiz Düz Tasarım ve düz stil

Düz arayüzlerin etkili, ilginç ve çekici olabileceğini kanıtlayan benzersiz düz stil örneklerini seçtik. Etkileyici grafikleri hoş bir yazı tipi kontrastıyla birleştirerek, biraz animasyon ve mikro yinelemeler ekleyerek, yalnızca yaratıcı veya ticari bir web sitesini güzelleştirmekle kalmaz, aynı zamanda bireyselliğinizi gösterebilir ve tasarımınızla ana mesajı ifade edebilirsiniz.

RJ Yatırımları

Gri ve beyaz tonlarda şık, özlü düz tasarıma sahip bir İngiliz emlak acentesinin web sitesi. Vurgulu altın rengi, yumuşak bir ifade katar. WordPress HTML5/CSS3, jQuery, SVG'yi temel alır.

Eğimli Sandalye

Etkileyici bir şekilde tasarlanmış bir web sitesi – akılda kalıcı renkler tasarıma minimalist ve düz bir stille geri döndüğünde tipografi görsel olarak daha ilgi çekici hale gelir. Portföydeki göz alıcı kırmızı başlıklar “sıçrama tahtası” görevi görüyor.

FHOKE

Sitenin temiz, düz tasarımı ve benzersiz kullanıcı arayüzü. Odaktaki görüntüler dahil. bilgisayarları ve iPhone'ları olan marketler (ayrı bir katmanda görüntülenen fotoğraflar gerçekçi görünüyor).

Ulus

Londra'daki bir stüdyo için unutulmaz, parlak ve dinamik bir web sitesi. Kompakt ana sayfadaki anahat başlığı ve portföy/kutulardaki muhteşem hayalet düğmeler gözden kaçmayacaktır. Döngülü arka plan videosu, bulanıklık ve renk düzeltmeli fotoğraf arka planları, şık animasyonlar, geçişler ve sayfa yükleme ön yükleyicisi kullanılır. Mavi tonlardaki etkileyici tasarım, stüdyonun güvenilirliği ve ekibin enerjisinin mesajını iletiyor.

Mayven Dev

Mayven Dev, San Francisco merkezli 30 kodlayıcı/UX tasarımcısından oluşan yaratıcı bir ekiptir. Web siteleri, ölçülü bir tasarım estetiği, bireysel stil, beyaz tipografinin etkileyici kontrastlarına sahip hoş renk şemaları ve zümrüt arka plan üzerinde hareketli kontur grafikleri ile öne çıkıyor.

HughesLeahyKarlovic Ajansı

Amerikan ajansının web sitesinin temiz ve derli toplu tasarımı sizi hemen olumlu bir ruh haline sokuyor. Gezinme menüsü benzersiz bir şekilde tasarlanmıştır: Renk filtresi uygulanan fareyle üzerine gelme efekti, arka plan resmini döngüsel bir videoya dönüştürür.

Satis Uydu İletişimi

Rus uydu iletişim operatörünün kapsamlı web sitesi. İş estetiği, taslak illüstrasyonlara sahip düz bir tasarım stiliyle gerçekleştirilir.

Düz tasarımlarda illüstrasyonlar, efektler ve yaratıcılık

Dinamik tasarım örnekleri, yaratıcı düz tasarım ve düz illüstrasyonlar ile animasyonun başarılı birleşimi. Modern Flat, iş web siteleri için oyun tasarım öğelerini gerçekçi içerikle birleştirmenize olanak tanır.

Tektonik Stüdyoları

Tasarımcı, ana sayfada degradeli düz grafikler (güncel bir web trendi) ve parlak düz resimlerden oluşan bir blok kullanıyor. Çekici bir bölüm bölümü için - boş alan ve animasyonlu grafikler.

Pixity-land

Klasik Düz tasarıma sahip bir mikro site, kayan animasyon, düz çizimler ve video kullanır.

100 Yıllık Tasarım

AIGA tasarım topluluğunun yaratıcı web projesi. Düz renkler, menü öğelerini, açılabilir bölümleri, gezinme etkin noktalarını ve resim atlıkarıncaya sahip bölünmüş pencereleri gösterir.

Drap Ajansı

Teknoloji odaklı bir yaratıcı ajans için muhteşem, göz alıcı, renkli bir web sitesi. Tasarım yeniliği ve bilginin sunumundaki her türlü yenilik burada değerlidir.

Mobkii

Degradeli düz resimler olmasaydı, Meksika ajansının web sitesi sıkıcı görünürdü ve tasarım, web ve uygulama geliştiricileri için fazla sıradan olurdu.

Ecodom Konsorsiyumu

Ev aletlerinin yeniden canlandırılması ve geri dönüşümle uğraşan bir İtalyan şirketinin resmi web sitesi. Canlı yeşil tasarım, interaktif ve dinamik efektler, bu tür aktiviteye sahip bir kuruluşun web sitesine çok yakışıyor.

Harika bir şey

Proje, meraklı insanlara, topluma ve ufuklarını genişletecek etkinliklere ilgi çekici şeylerle tanışma fırsatı sunuyor. Soyut tasarımlı bir ana ekranla başlayan özgün tasarım, bu kitlenin ilgisini çekiyor.

Yeşil Adam

Site Galler Festivali için bir rehber görevi görüyor. Yaratıcı düz grafiklere sahip sarı ve yeşil tasarım ve animasyon, hem alan adı hem de projenin olumlu hedefleriyle eşleşiyor.

Ayrıca okuyun: Web tasarımında renk kombinasyonu - yeşil web siteleri

Amelia Thompson Portföyü

Chicago'dan tek çağrı cihazı. Amelia'nın ilginç bir düz stil çalışma portföyü var.

Ayrıca okuyun: 30 şık ajans web sitesi ve tasarımcıların kişisel portföyleri

BittiBitti

Hata izleyicili proje yönetim sistemi web sitesi, Düz tarzda güzel bir şekilde tasarlanmıştır. Parlak renkler, düz grafikler/video ve kontrast oluşturan çağrı düğmesini gözden kaçırmak zordur.

Nane

Polonyalı dijital ajansın yaratıcı web sitesi geometrik şekiller ve hayal edilemeyecek animasyonlar, illüstrasyonlar, fotoğraflar ve çizimler kullanıyor.

Geex Sanatları

Genç bir Moskova web stüdyosunun web sitesi, yüksek teknolojili, ultra modern tasarımıyla etkileyicidir ve TOP 40 dijital ajanslar arasında yer almaktadır. Şık bir gezinme menüsü, etkili geçişler, etkileşim, animasyon ve standart dışı çözümlere sahip iyi UX ile öne çıkıyor.

DAESK

Alman stüdyosunun web sitesi HTML5'te heyecan verici bir pazarlama tasarımına ve standart dışı bir gezinme menüsüne sahip. Heyecan verici asidik renkler ürünü satıyor (zaman ve katılım takibi). Paralaks kaydırmalı fareyle üzerine gelme efektleri, çağrı düğmelerinde ve sosyal kanıtlarda dikkat çeker. Mükemmel tasarlanmış incelemelerin ardından başlangıç ​​sayfası, müşteri örnek olaylarına/hikayelerine atıfta bulunur. Vektör arka planlı interaktif video grafikleri satmaya başladı.

Fcinq

Bir Fransız yaratıcı stüdyosunun web sitesi: şık düz tasarım, güzel bir önyüklemeyle başlar. Bu tasarımı çekici kılan ise fotoğrafların renk düzeltmesi ve benzersiz renk kombinasyonlarıdır.

D.F.Y.

Arka planda yaratıcı videoların yer aldığı esnek Kore ajansı web sitesi. Html5/css3 kullanan modern temiz tasarım. Tam ekran gezinme menüsü etkileyici, kusursuz bir geçiş efektine sahiptir.

Cesur İnsanlar

Florida merkezli yaratıcı ajansın geçmiş web sitesi yeniden tasarımları, yaratıcı TOP'ta yer aldı. Artık Brave People, net ve kompakt düz bir arayüze sahip etkili bir tasarıma sahip.

Nea Medya

Fransız oyuncak ve video oyunu üreticisi, FLAT ve web tasarım stilini kullandı. WordPress'te oluşturulan site, şık tasarımıyla şaşırtıyor.

Küçük El İlanları

Zengin düz renklere sahip Avustralya çocuk temalı site. Kontrast oluşturan sans serif yazı tipleri mesajları ön plana çıkarır ve büyük tasarım öğeleriyle birleşir.

yaratıcı

İngilizce stüdyosunun web sitesi, turuncu vurgulu bir çağrı ve CTA öğeleri içeren büyük başlıklarla dikkat çekiyor.

FATbit

Hindistan'daki web geliştiricilerinin hacimli web sitesi Wordpress üzerinde yapılmıştır ve mikro etkileşimler ve animasyonlu resimlerle tasarım çeşitliliği ile öne çıkmaktadır. Üstbilgi ve altbilgide düz kırmızı renk, CTA'ları vurgular. Ana sayfa, renk düzeltmeli sabit arka planlara sahiptir ve slaytların atlıkarıncalarda sürüklenmesini ve bırakılmasını destekler (ilk ekran, sosyal kanıt, yarı saydam bloklarda tanıtımlar).

Etki Alanı Menadası

100 yıllık kalite geleneğini sürdüren Bulgar şarap üreticisi, önceden yüklenmiş animasyonlu tirbuşonla ziyaretçileri etkiliyor. Yumuşak kontrastlara sahip koyu düz tasarım, yaratıcı fotoğraf işleme ve alışılmamış çözümler, markanın elitizm fikrini satıyor.

Frans Hals Müzesi

Hollanda sanat müzesinin web sitesi, sans yazı tipindeki dev başlıklarla Düz tarzda alışılmadık bir tasarıma sahiptir. Gezinme simgeleri standart olmayan yatay ve dikey menüyü anlamanıza yardımcı olur.

titizlik

New York eyaletinin teknoloji vadisinden geliştiricilerin düz sitesi. Geometri ve sabit arka planlarla etkileyici, temiz tasarım. Üst bilgi, alt bilgi ve CTA düğmeleriyle bölümlerde güzel kontrastlar.

FLAT tarzında açılış sayfaları ve satış tasarımları

Ana sayfanın veya iç sayfanın çekiciliği ve canlılığı, benzersiz teklifinizi ifade etmenize yardımcı olur. İniş alanı tasarımı, Flat'in kullanım olanaklarını genişletir ve müşterilerle daha fazla etkileşim şansını artırır. Satış ve iniş tasarımının amacı yüksek dönüşümü sağlamaktır. Bir LP web sitesi veya açılış sayfası, ilginç veya sıra dışı bir tasarımla akılda kalıcıdır.

Düz tasarım, önümüzdeki yıllarda tasarımın önemli bir yönüdür, bu nedenle sizi onu daha iyi tanımaya ve temelini oluşturan 5 temel prensibi öğrenmeye davet ediyoruz.

Düz tasarıma giriş

Rusça'da düz tasarım "düz tasarım" olarak çevriliyor ve Apple'ın iOS işletim sistemini sunmasının ardından mutlak bir favori haline geldi. Odak noktası, kullanılabilirlik tasarımına minimalist bir yaklaşımdı. Odak noktası kullanıcı konforudur. Bu, “squeformism”e (nesnelerin gerçekte olduğu gibi görselleştirilmesi) karşı belirgin bir protestodur. Seçim daha basitleştirilmiş ve aynı zamanda daha basit estetik çözümlere yöneldi. Gerçekçi görselleştirmelerden bıkan kullanıcılar bu yönü memnuniyetle karşıladılar ve giderek daha fazla web projesi bu formata geçiyor.

“Düz”ün “sıkıcı” anlamına gelmediğini belirtmek isterim. Düz tasarım çözümleri güzel olabilir, daha sofistike, temiz, fazlalıktan arınmış, bir “sakinlik adasına” dönüşüyorlar. Nihayet içeriği anlaşılır hale getiriyorlar. Geriye kalan tek şey, bunları pratikte uygulamak için temel ilkeleri öğrenmektir.

“Düz” tasarım hacimleri aktarmaya çalışmaz, bu nedenle iki boyutlu görselleştirmeye dayanır. Bu, dokularda (uzun gölgeler hariç) herhangi bir gölge, yansıma veya vurgu görmeyeceğiniz anlamına gelir. Yalnızca konturların aktarımı ve daha fazlası değil.

Tasarımda tek heceli rakamların kullanılması, hafifliği ve ağırlıksızlığı vurgulamayı amaçlayan konturların netliğinin izlenmesi tavsiye edilir. Ek olarak, bu tür özlü öğeler sensörü iyi taklit ederek nesneyle etkileşime girme arzusu yaratır (basmaya, dokunmaya davet). Bununla birlikte, elemanların sadeliği bir bütün olarak tasarımın sadeliğine eşit değildir - bu yalnızca ana hatlar için geçerlidir. Sonuç olarak kullanıcının gördüğü her şey onun için nettir ve rahatlıkla kullanabilir.

Düz tasarım, yazı tipleriyle çalışırken çok dikkatli olunmasını gerektirir. Yani karakterleri, tasarım şemasını çelişmeden tamamlamalıdır. Üstelik düz tasarımda yazı tipi aynı zamanda önemli bir gezinme öğesidir.

Yalnızca yazı tipi değil, renk de “düz” tasarımın önemli bir parçasıdır. Paletlerin büyük çoğunluğu 2-3 renge dayanmaktadır, ancak elbette istisnalar da vardır. Genellikle zengin ve parlak ancak aynı zamanda saf renkler de seçilir. Belirtildiği gibi, hiçbir degrade veya gereksiz geçiş yoktur.

Düz tasarım, minimalizm gibi küresel bir trendin çarpıcı bir örneğidir. Tasarımcılar gereksiz zilleri ve ıslıkları reddediyor, kullanıcı etkinliği biçiminde meyve veren görselleştirmeye yönelik karmaşık ve örtülü yaklaşımlardan uzaklaşıyor.

Düz mü yoksa neredeyse düz mü? Uzlaşma arıyoruz!

Sonuç olarak, günümüzde düz ve düz olmayan tasarım arasında bir sinerjinin bulunduğunu belirtmek isterim. “Neredeyse düz” bir tasarımdan bahsediyoruz. Bu, tasarımcıların basit ve özlü öğeler ve iki boyutlu alanla birlikte derinlik ve perspektif için 1-2 teknik kullandığı, açıklanan konseptin en yaygın uygulamasıdır.

Ayrıca 2017'deki bir trend de Yarı Düz ​​Tasarım - yarı düz tasarımdı. Materyal Tasarımdan etkilenerek biraz daha mekansal hale geldi. Tasarımın yarı düz görünmesini sağlayan açık gölgeler ortaya çıkıyor. Düz tasarım bugün hala geçerlidir; gölgeler nedeniyle daha derin ve daha karmaşık hale gelmiştir, ancak temel kavram ihlal edilmemiştir.

Web tasarımında farklı stiller tasarımcılara yaratıcılık özgürlüğü verir ve siteleri birbirinden farklı kılar. Günümüzün en popüler stillerinden biri, sayfanın tasarımını bir bütün olarak geliştirmeyi ve basitleştirmeyi amaçlayan minimalist bir konsept olan düz tasarımdır. Bu yazımızda daire tasarımının özellikleri ve ilkelerinden bahsedeceğiz, örnekler vereceğiz ve daire stilinin temel sorunlarından bahsedeceğiz.

Düz tasarım nedir

Düz tasarım veya düz tasarım 2010'lu yıllarda popüler bir destinasyon haline geldi. Microsoft, Apple'ın gerçekçi efektleri vurgulayan bir tasarım olan skeuomorfizminin aksine, minimalist tarzda yeni bir sistem piyasaya sürdüğünde.

Düz tasarım, minimalist çözümler ve basit bir kullanıcı arayüzü anlamına gelir. Geometrik şekiller sıklıkla görsel efektler uygulanmadan kullanılır. Düz tasarım, şık ve modern bir kaynak hissi yaratarak içeriğin anlaşılmasını kolaylaştırır. Düz tasarımın temel prensiplerine ve uygulama özelliklerine bakalım.

Düz tasarımın temel ilkeleri

İlke 1. Gereksiz hiçbir şey yok

Bu stile düz denir çünkü tüm unsurlar hacimli görünmemektedir. Bu etki, çeşitli dekoratif detayların bulunmamasıyla elde edilir: gölgeler, dokular, vurgular, degrade vb. İki boyutlu görüntülere sahip basit şekillere dayanmaktadır.

Formların hatları net ve özlüdür. Vurgu, hem metin hem de grafik olarak arayüzün ve içeriğin basitliği üzerinedir. Bu teknikler sayesinde tasarım hafif ve ağırlıksız hale gelir.

Minimalizm ve basitlik, web sitesinin kullanılabilirliğini artırmak için düz tasarımın kullanılmasına katkıda bulunmuştur. Açık yapılar ve özlü formlar, arayüzü sezgisel hale getirerek müşterinin gerekli bilgileri hızlı bir şekilde bulmasına ve hedeflenen eylemi gerçekleştirmesine olanak tanır.

Prensip 2: 2D Grafikler

Basitleştirme yalnızca formları ve düğmeleri değil grafikleri de etkiledi. Düz tasarım stili - iki boyutlu resimler, galerilerde, kaydırıcılarda ve sitenin diğer alanlarında tam teşekküllü görseller olarak kullanılır.

Çizimler, öğelerin sadeliğini vurgular, tüm site için birleşik bir stil oluşturur ve kaynağa özgünlük katar. İki boyutlu grafiklerin yanı sıra taslak ve katı simgeler de kullanılıyor.

Düz tasarımda fotoğraf ve diğer resimler de kullanılır ve bunları sitede ayrı bir alan olarak tasarlayın. Örneğin:

Bu tür görüntülerin özelliği de Ekstra öne çıkan unsurların bulunmaması, tasarımın aynı tarzda olması.

İlke 3: Okunabilir tipografi

Düz stil, tasarımdaki tüm gereksiz şeyleri ortadan kaldırarak sitedeki içeriği ön plana çıkardı. Bu nedenle kullanıcı için kaynakta hangisinin kullanıldığı özellikle önemlidir.

Gölgelerin ve diğer dekoratif detayların bulunmaması metinlerin farklı algılanmaya başlamasına neden oldu. Çoğunlukla düz tasarım sans serif yazı tiplerini kullanır daha iyi bir kullanıcı deneyimi için. Bu, metinlerin okunmasını kolaylaştırdı ve sitedeki içerik ve konuma daha fazla dikkat edildi.

Bazen tipografi bir gezinme öğesinin rolünü oynar.Örneğin sitedeki menü minimalist tarzda tasarlanmış ve sadece bölümlerin isimleri kalmış. Bu durumda metnin okunması kolay ve kullanıcı tarafından fark edilebilir olması gerekir.

İlke 4. Renk vurguları

Düz tasarımın bir diğer özelliği de kullanılan renk şemasıdır. Bu ağırlıklı olarak beyaz bir arka plandır ve öğeler için bir ana renktir.(çoğunlukla sessize alınır) ve çeşitli renk vurguları. Bu diyagram aşağıdaki örnekte çok iyi görülebilir:

Bazen kaynağı benzer konulardaki diğer sitelerden ayırmak için standart olmayan renkler kullanılır. Genellikle düz tasarımda saf tonlar kullanılır, bu da tazelik ve temizlik hissi yaratır.

Genellikle palet 2-3 renk içerir; küçük öğeler için çeşitli renk vurguları da kullanılır - resimlerdeki ayrıntılar. Fakat, bazı tasarımcılar renk şeması seçiminde genel kabul görmüş kurallardan sapıyor ve spektrumun tüm renklerini kullanın.

İlke 5. Beyaz boşluk

Hafiflik hissi yaratmak için tasarımcılar yalnızca saf renkleri kullanmakla kalmıyor, aynı zamanda alanı siteye doğru şekilde dağıtıyor. Bunu yapmak için bizim tarafımızdan belirtilen ilkeleri kullanın.

Tasarımcı, bu örnekte olduğu gibi elemanları aralarındaki boşlukları ve havayı dikkate alarak yerleştirir:

Ayrıca sitenin kompozisyonuna özel dikkat gösterilmektedir. Kural olarak, tasarımcılar düzeni kolaylaştırmak ve kullanıcının düzen algısını geliştirmek için kullanarak bir düzen oluşturmaya çalışırlar.

Sitedeki alan kullanımını dikkatle izlemek ve aşırıya kaçmamak gerekir. Bazen tasarımcılar öğeler arasına çok fazla hava eklerler ve kullanıcı sayfada kaybolur ve sitede nasıl gezinildiğini anlamaz. Sayfa, daha fazla kaydırmaya yönelik görsel motivasyon olmaksızın sonsuz bir öğe koleksiyonuna dönüşür ve kullanıcı siteden ayrılır.

Düz tasarım için kullanılabilirlik

Düz tasarım, estetik açıdan hoş tasarımlar yaratmak için güçlü bir araçtır. Düz tasarım kullanma:

• metnin okunabilirliği artar - net yazı tipleri ve zıt arka planlar sayesinde kullanıcılar metin bilgilerini daha kolay algılar;
• içerik ön plana çıkıyor - düz tasarımda kullanıcının dikkatini dağıtan ve algıyı engelleyen gereksiz unsurlar yok;
• site yükleme süresi kısalır - sayfa "ağır" öğeler tarafından yüklenmez ve uzun beklemeler nedeniyle müşteri kaybetme riskiyle karşı karşıya kalmazsınız;
• sitenin gezinme yapısı geliştirildi - açık bir görsel hiyerarşi içeriği yapılandırır, böylece kullanıcının sitede gezinmesi daha kolay olur;
• düzeni herhangi bir cihaza uyarlamak kolaydır - basit bir arayüz ve bir ızgara kullanan blokların düzenlenmesi, geliştiricilere cep telefonları, tabletler ve diğer cihazlar için yardımcı olur;
• siteyi özgün hale getirebilir ve kullanıcının dikkatini çekebilirsiniz - düz tasarım, rakipler arasında öne çıkmak ve kullanıcı deneyimini dikkate almak isteyenler için şık bir çözümdür.

Ancak düz stilin tüm avantajlarına rağmen geliştiricinin web sitesi tasarımı oluştururken dikkate alması gereken çeşitli sorunlar vardır.

Düz tasarım sorunları

Tüm avantajlara rağmen kullanıcılar, düz tasarıma dayalı bir arayüz kullanırken dönem dönem sorunlarla karşılaşmaktadır. Bazı tasarımcılar sadelik ve estetik çekiciliğe takılıp kullanışlılığı unutuyor. Bazılarına bakalım Kullanıcı etkileşimindeki sorunlar ve bunları çözme yolları.

Düz tasarım (düz tasarım) Web siteleri ve arayüzlerin yanı sıra işletim sistemlerinin tasarımında da popüler bir stil olup, ayırt edici özellikleri basitlik, gelişmişlik ve minimalizmdir. Düz tasarım, skeuomorfizmin tersi olarak 2010 yılında popülerlik kazanmaya başladı.

Skeuomorfizm- Başka bir nesnenin şeklinden kopyalanan, ancak farklı malzemelerden veya farklı yöntemler kullanılarak 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ş çömlekler veya kağıt masa takviminin zımbalanmış sayfalarının görünümünü taklit eden bir bilgisayar takvimi (tanım şu şekildedir: Vikipedi).

Düz stilin tasarımda popülerleşmesi, Windows 8 işletim sisteminin Microsoft'tan Metro tarzında ve Apple'ın da düz bir stil seçtiği iOS 7'de piyasaya sürülmesiyle kolaylaştırıldı. Bundan sonra düz tasarımın gerçek dönemi başlıyor. Yakında büyük arama hizmetleri ve uygulamaları - Google, Youtube - Düz tasarıma geçiyor; tasarımlarında düz stil ilkelerini kullanan birçok site ortaya çıkıyor. Son yıllarda düz tasarım, küresel web sitesi tasarım trendlerinde lider konumdadır.

Düz Tasarımın Faydaları

1. Pratiklik- düz tasarımın kullanılması stil, komut dosyası ve animasyon sayısını en aza indirmenize olanak tanır, bu da sitenin daha hızlı yüklenmesini sağlar.
2. Uyum sağlaması kolay- Düz tasarım, farklı ekran çözünürlüklerine uyum sağlayacak kadar kolaydır.
3. Kullanım kolaylığı- Sadeleştirilmiş stil sayesinde kullanıcıların sitedeki bilgileri algılaması daha kolaydır.
4. güzellik- Dış tarafsızlık ve basit tasarımlar, sizi gerçekten yakalayan bir tasarıma 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ç de sıkıcı değil. Saflıkları ve gelişmişlikleri sayesinde tasarım çözümleri, gereksiz gürültü olmadan şık ve güzel olabilir ve ürününüze veya hizmetinize konsantre olmanıza olanak tanır.

1 - 2 boyutlu nesnelerin kullanılması

Düz tasarım, bir nesneye derinlik ve hacim veren öğelerin kullanımını hariç tutar: gölgeler, degradeler, vurgular, dokular, yansımalar, animasyon. Bir nesne görüntülendiğinde yalnızca ana hatları görüntülenir.

2 - Simgeler ve basit nesneler

Net ana hatları ve aynı rengi olan düz simgeler ve tek heceli şekiller kullanmak, tasarımı mümkün olduğunca basitleştirmenize ve daha hafif hale getirmenize olanak tanır. Kontroller kullanıcı için sezgisel hale gelir ve etkileşimi teşvik eder.

3 - Tasarım tarzında basit yazı tipleri

Düz tasarımda tipografiye ve yazı tiplerine çok dikkat edilir. Burada italik kullanılmaz; yazı tipi yalnızca içerik açısından değil aynı zamanda gezinme açısından da web sitesinin tasarımına uyumlu bir şekilde uyar. Sitenin yazı tipi türlerinde bile minimalist tarz teşvik ediliyor.

4 - Renk oyunu

Düz tasarım, yumuşak geçişlerin ve degradelerin kullanımını hariç tutan ancak parlak ve birbirleriyle kontrast oluşturabilen birkaç ana renk içerir.

5 - Minimalizm

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

Neredeyse düz tasarım diye bir şey var. Bu, basit elemanların ve iki boyutlu alanın kullanılmasını içeren düz tasarım konseptlerinden biridir. Bunun bir örneği, arka planı bulanıklaştıran veya karartılan yüksek kaliteli bir fotoğraf olabilir. Bu, nesnenin derinliğini ve perspektifini oluşturmanıza olanak tanır.

Düz Tasarım Örnekleri

Belarus segmenti de dahil olmak üzere internette, haber kaynakları, portallar ve hatta çevrimiçi mağazalar dahil olmak üzere çeşitli konularda düz tasarımlı web sitelerinin geliştirilmesine ilişkin birçok örnek bulabilirsiniz.