Design piatto è una tendenza relativamente nuova di cui l'intera comunità del design non smette di parlare.
A qualcuno piace, qualcuno non può assolutamente abituarsi e addirittura lo odia.
Un buon design deve prima di tutto risolvere il problema aziendale del cliente, in che modo questo sarà un problema secondario. Se il designer ha scelto il "design piatto" come stile o strumento, così sia! Ma non dimenticare che questo stile non è adatto a tutti i progetti.
Quindi analizziamo cosa è necessario ricordare se si decide di soccombere alle tendenze della moda e lavorare nello stile del "design piatto".
I principi di base del design piatto sono:
1. Mancanza di effetti
2. elementi semplici
3. Enfasi sulla tipografia
4. Enfasi sul colore
5. Approccio minimalista
6. Design "quasi" piatto
Ora, diamo uno sguardo più da vicino a ciascuno dei principi del design piatto:
Mancanza di effetti
Nel design piatto, effetti come ombre, smussi, goffrature, gradienti o altre tecniche che aggiungono profondità e volume molto spesso non vengono utilizzati. Nessun effetto 3D e trasferimento di materialità, a differenza dell'avversario stilistico dello "Skemorphism". Ogni elemento dovrebbe rimanere chiaro, sia esso un'icona, una barra di navigazione o una cornice, un pulsante, ecc.
Lo stile piatto ha un aspetto pronunciato senza caratteristiche ed elementi aggiuntivi. Si basa su un chiaro senso di gerarchia compositiva e posizionamento degli elementi. Questa struttura rende più facile percepire il design ed essere intuitiva per ogni utente.
Elementi semplici
Il design piatto utilizza spesso semplici elementi dell'interfaccia utente come pulsanti e icone, ecc. I progettisti si attengono a forme semplici (rettangolo, cerchio, quadrato, ecc.) Quando creano questi elementi dell'interfaccia - questo consente a ciascuna forma di essere indipendente.
Ma elementi semplici non devono essere confusi con design semplici; un concetto di design piatto può essere complesso come qualsiasi tipo di concetto di design stilisticamente diverso.
Enfasi sulla tipografia
Poiché il design piatto si basa su forme semplici senza volume, la tipografia è un elemento estremamente importante nella composizione piatta.
Il carattere del font dovrebbe corrispondere allo schema generale e alla composizione: un font eccessivamente complesso può sembrare strano e pretenzioso su un modello di progettazione eccessivamente semplificato. È preferibile il semplice sans serif, grassetto o grassetto. Il testo dovrebbe essere in armonia con forme semplici.
Il carattere dovrebbe essere uno strumento ausiliario per aiutare gli utenti a interagire con la nostra interfaccia. Le etichette sui pulsanti e altri elementi non dovrebbero essere fantasiose.
Enfasi sul colore
Il colore è una parte importante del design. La tavolozza del design piatto è spesso molto più luminosa e colorata rispetto ad altri stili di design. Rispetto a un design convenzionale che si concentra su 2-3 colori, i design piatti possono includere 6 o anche 8 tonalità di colore.
Dall'autore: Vi saluto amici! Oggi parleremo di cosa sia il design piatto o il design piatto dei siti. Questo termine ha conquistato a lungo il cuore dei web designer e continua a tenere il passo con la tendenza fino ad oggi. Le principali aziende (Google, YouTube, Microsoft, Apple Inc., ecc.) Lo utilizzano per progettare i propri siti e applicazioni. Non sei ancora nel cult del design piatto? Allora andiamo da te!
Quale pensi sia la ragione di una così frenetica popolarità del design piatto? Ti rispondo in poche parole: funziona davvero! In questo articolo ti spiegherò cos'è questo stile, ti parlerò dei suoi pro e contro e ti mostrerò alcuni ottimi esempi di design di siti web semplici che sicuramente ti ispireranno alle imprese. Quindi andiamo!
Tutto è iniziato con lo skeuomorfismo
Per coloro che non ne sono a conoscenza, lo skeuomorfismo non è una parolaccia, ma un altro stile di web design. Il design piatto è spesso presentato come l'opposto dello skeuomorfismo, che, a mio parere, non è del tutto corretto. Questa è piuttosto una semplificazione che un antagonismo.
Fino al 2010, lo skeuomorfismo era lo stile dominante nel design dell'interfaccia. Ha visualizzato gli elementi come apparivano nella realtà, utilizzando attivamente trame, ombre, riflessi e altri attributi di un'immagine tridimensionale. Apple ha provato in particolare a questo proposito, che ha copiato con cura la maggior parte degli oggetti software da oggetti della vita reale.
Ben presto, le icone pseudo-convesse cessarono di attirare la maggior parte degli utenti e degli sviluppatori web, il che segnò l'inizio dell'era del design piatto di siti web. Il mondo è giunto alla conclusione che tutti gli elementi decorativi devono essere rimossi e solo ciò con cui è conveniente per l'utente finale interagire.
"Il miglior design è il minor design possibile".
Dieter Rams, un rinomato designer industriale che si oppone al design invadente, agli effetti di animazione e così via, ha esaminato l'acqua. Nel giugno 2013, Apple Inc. ha introdotto il rivoluzionario iOS 7, che ha ricevuto tutti gli attributi di un design web piatto. Tuttavia, l'aereo non ha subito "conquistato" realismo e volume.
Per molto tempo, gli utenti non hanno potuto dimenticare la magia di Steve Jobs e le icone "che vuoi leccare". Molti hanno persino salutato i "poveri sette" e sono passati al "raggiante Android". Aggiunto carburante al fuoco e un gran numero di bug che erano presenti in iOS 7, e un design biancastro, semitrasparente con parallasse e animazione sotto forma di "moccio" all'apertura delle applicazioni.
Coloro che si sono rassegnati all'inevitabile realtà e sono rimasti con il sistema operativo "mela", alla fine, si sono resi conto che il flat web design non solo sembra interessante, ma porta anche ordine e un unico stile visivo a tutte le applicazioni.
Pro e contro del design piatto
I vantaggi dell'utilizzo di questo stile includono:
chiarezza di composizione e laconismo dei mezzi visivi. Interfaccia reattiva nello stile del "niente di superfluo", in modo che gli utenti realizzino rapidamente ciò che volevano trasmettere;
enfasi sulla buona tipografia. Il contenuto viene prima di tutto, il che è estremamente importante nell'abbondanza di informazioni di oggi;
pagine web più piccole e prestazioni del sito più veloci grazie alla quantità minima di effetti visivi. Ciò è particolarmente utile quando si creano versioni reattive, perché più semplici sono i moduli, più facile è visualizzarli su piccoli schermi di dispositivi mobili.
Il web design piatto ha i suoi svantaggi:
limitare l'immaginazione del web designer a colori, tipografia, iconografia semplificati. Pertanto, il rischio di creare un sito noioso e inespressivo è maggiore;
la mancanza di tridimensionalità e di ombre a volte rende difficile capire se un elemento è cliccabile o meno;
mancanza di regole fisse specifiche.
Se hai deciso di utilizzare questo stile sul tuo sito, congratulazioni: dimostra che tieni all'esperienza dell'utente e sei al passo con i tempi. Se hai appena iniziato come web designer e non sai come utilizzare correttamente il design piatto per rendere il tuo sito pertinente ma non primitivo, ecco alcuni suggerimenti:
Dimentica i muri di mattoni e gli sfondi luminosi. È comune nel design web piatto utilizzare immagini di sfondo semplici, fluide e sottili.
Nessuna sfumatura, icone volumetriche, transizioni animate o altri effetti speciali. Tutto ciò appesantirà il tuo sito e aggiungerà confusione: ne hai bisogno?
Usa icone piatte con contorni chiari per maggiore praticità e funzionalità.
Usa una tavolozza di colori vivace e vibrante. I toni dello spettro solare sono di tendenza adesso: gialli chiari, rosa e verdi. La cosa principale è non esagerare: non dovrebbero esserci più di 3 colori sulla pagina.
Concentrati sulla tipografia. Il design piatto privilegia caratteri sorprendenti e originali che creano un invito all'azione e facilitano la navigazione del sito. Anche qui è importante non esagerare. Dimentica i caratteri "scritti a mano" e altri caratteri fantasiosi. È possibile utilizzare lettere maiuscole per evidenziare i titoli.
Sentiti libero di usare una varietà di forme geometriche. Quadrati, cerchi, linee e altre forme aiuteranno non solo a migliorare la struttura del tuo sito web, ma anche a creare una chiara gerarchia e contenuti separati. Gli utenti lo apprezzeranno, credimi.
Semplifica il più possibile il menu di navigazione e altri elementi del sito. Per i pulsanti, usa rettangoli regolari senza ombre o evidenziazione.
Così, nel corso degli anni, i siti web di design piatto sono diventati lo standard accettato da tutti. Guarda la maggior parte dei siti web di oggi: sono piatti fino all'osso.
Infine, fornirò gli esempi promessi di design piatto di successo che possono servire da ispirazione per creare i propri capolavori.
1. Sito http://dunked.com.
Una piattaforma popolare per la pubblicazione di portfolio rivolti a rappresentanti di varie professioni creative. Il flat web design minimalista evoca la sensazione di un servizio affidabile e comprensibile, senza distrazioni inutili.
2. Interfaccia Microsoft.
Microsoft è una delle aziende che ha reso così popolare lo stile piatto. Ricordi Zune, un iPod rivale di Microsoft rilasciato a metà degli anni 2000? Ebbene, il design di questo prodotto era radicalmente diverso dalla maggior parte delle applicazioni del tempo, in gran parte a causa di caratteri tipografici grandi, icone piatte, forme grandi e luminose.
Questa interfaccia, chiamata Metro, è successivamente migrata su personal computer (sistema operativo Windows 8), interfaccia Xbox 360 e altri prodotti software Mircosoft.
3. Sito web http://www.vox.com.
Bene, sei ispirato? Abbasso l'estetica 3D pseudo-realistica!
È tutto. Iscriviti, condividi i nostri articoli con i tuoi amici sui social network. Alte conversioni per te!
In questo articolo ti presenterò il design piatto. Probabilmente ne hai già sentito parlare, dato che il flat è diventato una delle tendenze principali sul web negli ultimi anni.
Oggi daremo un'occhiata a cos'è il design piatto, come è nato e di cosa hai bisogno per creare un design pulito, vibrante e reattivo.
Puoi trovare buoni esempi di design piatto su http://market.envato.com/. Ci sono un sacco di layout, icone e modelli per darti una solida comprensione di come appare il design moderno. .
1. Cos'è il design piatto?
Il design piatto è uno stile moderno di interfaccia utente e design grafico, caratterizzato dal minimalismo. Il design piatto è caratterizzato dall'uso di un minimo di elementi e dall'assenza di vari effetti di texture, ombre e luci, ad esempio: colori misti, sfumature, luci e così via.
Flat si oppone allo skeuomorfismo( lo skeuomorfismo è un principio di progettazione, quando a un prodotto viene dato l'aspetto di un altro, ad es. quando vari elementi dell'interfaccia vengono copiati da oggetti reali - traduzione approssimativa.) così come un design ricco, tuttavia, vale la pena dire che il design piatto non è affatto semplice come sembra a prima vista. Include alcune caratteristiche dello skeuomorfismo, ma ne parleremo un po 'più tardi.
In generale, flat aiuta a mantenere l'utente concentrato sul contenuto senza essere distratto dalle immagini. Il design piatto enfatizza la semplicità degli elementi rendendo l'interfaccia più reattiva, piacevole e facile da usare.
2. Un po 'di storia
Il design piatto è noto per essere esistito molto prima che diventasse una tendenza globale sul web. Il design piatto era piuttosto popolare negli anni '80 perché la tecnica non era ancora sufficientemente sviluppata per supportare effetti, trame e ombre complessi. Tuttavia, anche allora, il design tendeva allo skephomorfismo, cercando di rendere gli elementi dell'interfaccia il più realistici possibile.
Il design piatto, nella forma in cui lo vediamo ora, ha iniziato a guadagnare popolarità dopo che Microsoft ha iniziato a produrre prodotti nel cosiddetto stile metro. Metro è un design dell'interfaccia utente di Microsoft che stupisce per il suo stile e la sua semplicità.
Nel 2010 Microsoft ha rilasciato Windows Phone 7, che utilizzava un design piatto con spigoli vivi e una grafica semplice ereditata da un primo prodotto.Microsoft (Zune). Successivamente, ispirata dal successo, Microsoft ha rilasciato il sistema operativo Windows 8 basato sullo stesso stile Metro piatto.
Dopotutto, il design piatto ha raggiunto il picco nel 2013 quando Apple ha rilasciato iOS 7, caratterizzato da un design completamente nuovo con elementi dell'interfaccia utente completamente ridisegnati, incluse icone e caratteri. Apple ha creato principi visivi dell'interfaccia utente e del design delle icone .
Poco dopo, anche Google ha iniziato a utilizzare lo stile piatto nelle sue app e pagine Web, chiamandolo Material Design ... Google ha persino un'intera sezione dedicata a questo stile, inclusa una descrizione degli obiettivi del web design, i suoi principi e le linee guida per la creazione di vari oggetti di design: icone, layout e così via.
Da quel momento, il flat è diventato una tendenza chiave nel web design, rendendo i siti web, le applicazioni e gli elementi dell'interfaccia eleganti, puliti ed eleganti.
Pertanto, ci sono tre esempi globali di design piatto da parte delle aziende, senza i quali è difficile immaginare il mondo moderno della tecnologia:
Il design della metropolitana di Microsoft
Design Apple iOS 7
Material Design di Google
3. Ricorda la pulizia
Il design piatto è apparentemente chiamato "piatto" a causa della mancanza di elementi tridimensionali ed effetti realistici come sfumature, trame, luci, mezzitoni, ombre. Ricorda, lo stile piatto è un modo bidimensionale (piatto) di rappresentare gli oggetti.
Inoltre, nel design piatto, gli oggetti sono raffigurati in modo molto semplificato e stilizzato.
E a volte viene utilizzata anche solo una silhouette oi contorni di un oggetto, ad es. quanto basta per rendere riconoscibile l'oggetto, ma non sovraccaricarlo di piccoli dettagli.
Il minimalismo è diventato una tendenza globale in questi giorni: la semplicità delle forme e l'uso di spigoli vivi creano un design pulito e piacevole. Le forme semplici sono più facili da capire e capire. Ciò mantiene il design minimalista, pulito, senza dargli un aspetto occupato e disordinato.
4. Perfezione
Sappi che quando si tratta di creare icone piatte ed elementi dell'interfaccia utente, devi renderli nitidi, puliti e pixel perfetti. per quanto possibile. Inoltre, questo vale sia per la grafica raster che per quella vettoriale.
Tutto è chiaro con Adobe Photoshop: funziona con grafica bitmap basata sui pixel.
Per quanto riguarda il programma Adobe Illustrator, utilizza la grafica vettoriale, costituita da curve e linee, chiamate vettori, che sono date da formule matematiche.
C'era una volta Adobe Illustrator non era un programma particolarmente conveniente per creare grafica pixel-perfect. La buona notizia è che le ultime versioni di Illustrator sono diventate un ottimo strumento per creare una buona grafica.
Devo dire che la grafica vettoriale comporta principalmente il lavoro con forme semplici e piatte, colori pieni e griglie. Adobe Illustrator è molto flessibile nelle impostazioni e ti consente di adattare la griglia alle tue esigenze, allineare oggetti e utilizzare diversi tipi di snap. Ciò semplifica la creazione del design perfetto che appaia pulito ed elegante su qualsiasi display. Se vuoi imparare come creare una grafica perfetta, allora dovresti leggere l'articolo: Come creare immagini perfette per i pixel utilizzando Adobe Illustrator .
5. Colore
Una delle caratteristiche più specifiche del design piatto, oltre alle ombre, è l'uso del colore. La maggior parte dei colori utilizzati dal design piatto nei loro elementi sono costituiti da pochi colori di base.
Il colore nel design piatto si distingue per luminosità, saturazione e ricchezza.La combinazione di colori piatti non si limita a pochi colori speciali; contiene molte sfumature e la loro scelta dipende solo da ciò che stai raffigurando, che si tratti di icone di caramelle o oggetti retrò in una sofisticata tavolozza retrò.
Supponiamo che tu sia un progettista di interfacce con una buona conoscenza delle tavolozze dei colori e che stia sperimentando la barra dei colori in Photoshop e Illustartor, mescolando i colori a tuo piacimento. Tuttavia, questo processo è piuttosto complicato e richiede molta intuizione, esperienza e abilità. Ecco alcuni strumenti che possono aiutarti a creare la tua tavolozza di colori.
Alcuni di loro sono adatti a tutti i tipi di design e illustrazione, non solo a design piatto. Ad esempio, Adobe Color CC, meglio noto come Cooler. Oggi è disponibile sia tramite il sito web che direttamente tramite i prodotti Adobe. Cooler è uno strumento molto flessibile che ti consente di creare la tua tavolozza di colori o di scegliere tra tavolozze personalizzate dalla libreria.
Un altro generatore di tavolozze di colori semplice e pratico è Coolors. Basta premere la barra spaziatrice e il programma genererà una tavolozza dei colori, puoi correggere i colori, c'è anche una funzione di esportazione.
Ci sono alcuni altri servizi simili con tavolozze personalizzate che potresti trovare utili. Tuttavia, esiste uno strumento creato appositamente per il design piatto: FlatUIColors.com di Designmodo, un servizio con una serie di colori "piatti", molto comodo con cui lavorare. Questo sito è diventato molto popolare tra i designer che cercano buone soluzioni di colore per design perfetti. Provalo!
E puoi anche trovare una più ampia varietà di colori e tavolozze in Guida al Material Design di Google.
6. Ombre lunghe
Come accennato in precedenza, il design piatto è caratterizzato da semplicità, molto spazio libero: ecco perché flat rifiuta l'uso di qualsiasi effetto. Tuttavia, c'è un effetto tipico del design piatto. Questo effetto è diventato una tendenza e una caratteristica dell'appartamento.
Stiamo ora parlando di ombre lunghe. Hanno alcune caratteristiche tipiche che rendono riconoscibile questo effetto, vale a dire inclinazione di 45 gradi e grandi dimensioni (l'ombra può essere molte volte più lunga del soggetto stesso. Di conseguenza, ombre lunghe conferiscono all'appartamento un effetto di profondità.
Questo effetto rende l'oggetto più tridimensionale, mantenendolo in un contesto di design piatto.
7. Lavorare con i caratteri
La tipografia gioca un ruolo importante nel design piatto. Spesso il testo diventa l'elemento principale della composizione.
Flat di solito utilizza caratteri tipografici semplici per rendere il design nel suo complesso pulito e leggibile. Puoi trovare molti font gratuiti in Adobe Typekit se utilizzi prodotti Adobe. Font Squirrel ha anche molti buoni caratteri gratuiti. Ma ricorda di leggere la licenza se intendi utilizzare il carattere commercialmente.
Molto spesso nel design piatto è consuetudine utilizzare lettere maiuscole e colori contrastanti, questo rende il testo più leggibile.
Usa i caratteri con cura, ricorda che dovrebbero enfatizzare e abbinare il design, non sembrare un elemento separato, questo non significa che non puoi usare caratteri serif o caratteri complessi scritti a mano. Basta mantenerlo minimo e mantenere tutto in equilibrio. Tuttavia, flat ancora più spesso utilizza caratteri sans serif, poiché sembrano più rigorosi e ordinati.
8. Pro e contro del design piatto
Nonostante il fatto che il design piatto sia diventato così popolare a causa dei suoi numerosi vantaggi, presenta ancora degli svantaggi che i designer devono affrontare quando usano questo stile. Diamo un'occhiata ai pro e ai contro.
professionisti
Popolarità
Il design piatto è diventato una tendenza, raccogliendo feedback sempre più positivi / da designer e web designer, e non sembra che stia perdendo terreno. Al contrario, si sta diffondendo sempre di più, acquisendo nuove forme e caratteristiche, diventando sempre più creativa.
Semplicità
Il design piatto è semplice, minimalista e pulito. Flat on the Web aiuta gli utenti a concentrarsi sui contenuti piuttosto che essere distratti dalle immagini. Funziona anche per le interfacce delle app mobili: il design pulito con pulsanti grandi rende l'esperienza mobile perfetta.
Luminosità
Il colore è un altro fantastico vantaggio nel design piatto. I colori luminosi e saturi sembrano attraenti e puliti e l'assenza di sfumature rende il design elegante. Inoltre, colori così puri lo rendono più positivo, presentabile, il design piatto crea l'atmosfera giusta.
svantaggi
Flat ha molti più vantaggi, ma nessun design è perfetto e non possiamo idealizzarlo. Ecco alcuni degli svantaggi del design piatto che dobbiamo menzionare:
unresponsiveness
A volte l'assenza di dettagli o elementi visivi importanti rende difficile il processo di creazione di un'interfaccia user-friendly e questo generalmente rende l'intero design non rispondente. Non tutti gli utenti trovano flat comodo, perché può essere difficile trovare elementi su una pagina web che devi cliccare o toccare sullo schermo del tuo cellulare perché non sono interattivi.
Problemi di stampa
Come accennato in precedenza, non tutti i caratteri possono adattarsi al design piatto. A volte un carattere tipografico così ricco e dai bordi taglienti sembra davvero equilibrato ed elegante. Tuttavia, nel caso in cui il carattere venga scelto in modo errato, può distruggere l'intero design. Devi davvero avere un'idea di quali caratteri sono buoni per flat e quali no. La mancanza di esperienza rende la scelta di un carattere molto difficile.
Effetti visivi deboli
A causa delle limitazioni nell'uso di effetti, colori e caratteri, flat può sembrare troppo semplice e freddo. Il suo minimalismo può anche essere il suo principale svantaggio: altri design piatti finiscono per sembrare esattamente uguali ai tuoi. Pertanto, è molto difficile rendere le tue icone o pagine web diverse dal design di qualcun altro perché stai usando le stesse forme semplificate, tavolozze di colori limitate e caratteri simili. Di conseguenza, il design piatto può diventare noioso nel tempo.
9. Future tendenze del design piatto
Questo non vuol dire che il design piatto si sia completamente formato e si sia fermato a modo suo, forse è a causa dei suoi difetti, menzionati sopra, che il piatto tende a svilupparsi e cambiare, acquisire nuove caratteristiche e migliorare l'espressività visiva.
Se osservi attentamente l'ultimo esempio di design piatto, potresti notare che è davvero gradualmente dai suoi rigorosi strumenti e inizia ad aggiungere effetti sottili come gradienti, ombre, luci e altri effetti visivi.
Queste piccole cose conferiscono al design piatto una certa profondità senza sovraccaricare i dettagli come fanno i design skeuomorfi.Questi piccoli miglioramenti rendono l'appartamento più reattivo e utilizzabile, oltre a conferire un aspetto fresco, rendendolo piatto più flessibile e versatile.
Così, l'appartamento non perde le sue caratteristiche, ma diventa più interessante e flessibile.- migliora davvero.
conclusioni
Pertanto, abbiamo discusso alcuni fatti della storia del design piatto e abbiamo parlato di colori, forme e tipografia. Abbiamo esaminato diversi punti di vista, ci siamo soffermati sui vantaggi e gli svantaggi dell'appartamento e abbiamo appreso alcuni dei principi fondamentali per creare un buon design.
Spero che tu abbia imparato qualche nuova informazione da questo articolo, o almeno lo abbia trovato interessante. Devi provare a creare un design piatto se non l'hai fatto prima.
Dopo tutto, cos'altro dovrebbe essere menzionato sul design piatto?
Se ti piace davvero il flat con i suoi bordi taglienti, i colori succosi e i caratteri nitidi, la sua purezza e il minimalismo, allora fallo!
È di tendenza, ma come con qualsiasi stile grafico, non limitarti a una tecnica. Se il piatto è di tendenza, ciò non significa che non puoi usare altri stili nel tuo progetto. Anche lo skeuomorfismo, con i suoi piccoli dettagli e trame, può essere una buona soluzione. Soprattutto, ricorda che il design è diverso per ogni progetto, deve esprimere il suo spirito, scopo, essenza, pur rimanendo comodo e funzionale. Inoltrare!
Un design semplice e conveniente di una pagina web è considerato il più corretto. Uno stile di design piatto del sito web è utile in molti casi. Le interfacce semplici spesso funzionano meglio e, a causa della tendenza generale verso il minimalismo, la direzione Flat è ancora rilevante (Microsoft e Apple hanno reso i loro sistemi operativi piatti). Utilizzando bellissimi colori piatti nei loro progetti, le aziende famose non perdono l'opportunità di esprimere la propria individualità, attirare l'attenzione su un marchio o aumentare le conversioni.
Esempi di buon design piatto
Siti piatti ben fatti e ragionevolmente con una facile navigazione e un'interfaccia chiara. I loro design accurati e renderizzati vendono bene e creano una buona esperienza utente.
Lanciare
Una versione unica grigio-bianco-arancione dell'appartamento. Le microiterazioni sono bellissime in un'interfaccia utente espressiva con pulsanti fantasma e scorrimento parallasse di sfondi sfocati. Effetti di scorrimento come menu permanenti e piè di pagina che si sovrappongono allo sfondo del corpo della pagina rendono visivamente il sito più compatto.
eTecc Interactive
Il design semplice del sito web dell'agenzia americana non sembra ordinario. fatto con alta qualità e gusto. La vecchia scuola del design non funziona peggio delle innovazioni, può rappresentare proficuamente l'azienda ei suoi servizi.
Studio legale Nehora
Un design pulito e piatto con elementi sofisticati conferisce al sito web dello studio legale della California un aspetto professionale. Il cappello e il piè di pagina sono splendidamente decorati. Il bianco e le sfumature dell'oro su uno sfondo turchese scuro creano un bellissimo contrasto morbido. L'interfaccia user-oriented delle pagine ha permesso di organizzare i contenuti.
Towa
Il sito wordpress dell'agenzia tedesca ha un bel design minimale con effetti HTML5 / CSS3 e. Sfumature pastello / grigio-oro, correzione del colore delle foto e layout modulare hanno contribuito a creare un bellissimo sito sotto forma di un collage di fatti interessanti sull'azienda.
Amazee labs
Il sito degli sviluppatori svizzeri di Drupal ha un design laconico con piacevoli combinazioni di colori. Gli elementi CTA hanno uno stile creativo, vengono applicate le tecniche Flat e HTML5 / CSS3.
Ago spaziale
Lo Space Needle è il simbolo di Seattle. Il sito ha anche una pagina principale con rendering in background. Scorrimento dallo stile unico con effetti di schivata e mini diapositive alla fine.
Costruisci ad Amsterdam
L'agenzia di branding olandese ha un bellissimo sito web piatto con un menu di navigazione personalizzato. Interfaccia bella ed elegante, bene.
La conferenza gialla
Contenuti ottimisti, giallo brillante e il sito ti prepara per un positivo.
Joy Intermedia
Sito web per un'agenzia creativa internazionale dalla Polonia con design piatto in CSS3 e buona UX. Il sito utilizza pannelli laterali e inferiori ed è facile da usare.
Fuse Lab Creative
Un sito web di un'agenzia americana ben strutturato e intuitivo con una comoda barra laterale semitrasparente, una barra dei progetti e una piccola introduzione discreta sulla schermata principale.
Chobani
La piccola azienda b2b ha un sito culinario carino e molto facile da usare con un design pulito basato su HTML5. Un menu a tendina fisso e un originale sistema di navigazione secondario a quattro livelli aiutano a presentare l'assortimento.
Design piatto unico e stile piatto
Sono stati selezionati esempi di stile piatto unico, che dimostrano che le interfacce piatte possono essere efficaci, interessanti e attraenti. Combinando una grafica espressiva con un piacevole contrasto dei caratteri, aggiungendo un po 'di animazione e microiterazione, non solo puoi rendere bello un sito web creativo o aziendale, ma anche mostrare la tua individualità, esprimere il messaggio principale del design.
RJ Investments
Il sito di un'agenzia immobiliare britannica con un elegante design piatto laconico nei toni del grigio e del bianco. Il colore dorato accento aggiunge un'espressività morbida. Basato su WordPress HTML5 / CSS3, jQuery, SVG.
Sedia inclinata
Sito dal design espressivo: la tipografia diventa visivamente interessante quando i colori accattivanti tornano al design con minimalismo e stile piatto. Le intestazioni rosse che attirano l'attenzione nel portafoglio servono da trampolino di lancio.
FHOKE
Design pulito e piatto e interfaccia utente unica del sito. Metti a fuoco le immagini, incl. fare la spesa con computer e iPhone (le foto visualizzate in un livello separato sembrano realistiche).
Nazione
Un sito di studio memorabile, vibrante e dinamico di Londra. Il titolo sagomato su una homepage compatta non passerà inosservato, così come gli accattivanti pulsanti fantasma nei portafogli / custodie. Vengono utilizzati video di sfondo in loop, sfondi di foto con sfocatura e correzione del colore, animazioni eleganti, transizioni, preloader di caricamento della pagina. Un design espressivo nei toni del blu trasmette un messaggio di affidabilità dello studio e energia del team.
Mayven dev
Mayven Dev è un team creativo di 30 programmatori / progettisti UX con sede a San Francisco. Il loro sito si distingue per l'estetica del design sobrio, lo stile individuale, piacevoli combinazioni di colori con contrasti espressivi di tipografia bianca e grafica di contorno animata su uno sfondo verde smeraldo.
Agenzia HughesLeahyKarlovic
Il design pulito e ordinato del sito web dell'agenzia americana ti prepara immediatamente a un positivo. Il menu di navigazione è progettato in modo unico: un effetto al passaggio del mouse con un filtro di colore applicato trasforma l'immagine di sfondo in un video in loop.
Satis Satellite Communications
Un ampio sito web per un operatore satellitare russo. L'estetica aziendale viene realizzata attraverso uno stile di design piatto con illustrazioni di contorno.
Illustrazioni, effetti e creatività in design piatto
Esempi di design dinamico, design piatto creativo e combinazione riuscita di illustrazione piatta con animazione. Modern Flat ti consente di combinare elementi di design del gioco con contenuti realistici del sito web aziendale.
Tectonica Studios
Il designer utilizza una grafica piatta con sfumature (tendenza web attuale), un blocco di illustrazioni piatte luminose nella home page. Spazio libero e grafica animata per un'attraente divisione delle sezioni.
Pixity-land
Un microsito con un design piatto classico utilizza animazioni di scorrimento, illustrazioni piatte e video.
100 anni di design
Progetto web creativo della comunità di design AIGA. I colori piatti rappresentano voci di menu, sezioni apribili, hotspot di navigazione e finestre a carosello di illustrazioni divise in due.
Agenzia Drap
Un sito colorato e accattivante per un'agenzia creativa basata sulla tecnologia. Apprezzano l'innovazione del design e qualsiasi innovazione nella presentazione delle informazioni.
Mobkii
Senza illustrazioni piatte con sfumature, il sito di un'agenzia messicana sembrerebbe noioso e il design è troppo ordinario per gli sviluppatori web e di applicazioni.
Ecodom Consorzio
Il sito ufficiale dell'azienda italiana dedicato alla rivitalizzazione degli elettrodomestici e al riciclaggio. Il vivace design verde, gli effetti interattivi e dinamici si adattano al sito web di un'organizzazione con questo tipo di attività.
Thing of Wonder
Il progetto ti invita a conoscere cose interessanti per i curiosi, la comunità e gli eventi per espandere i tuoi orizzonti. A partire da una schermata iniziale astratta, il design originale coinvolge questo pubblico.
Uomo verde
Il sito funge da guida al Festival gallese. Il design giallo-verde e l'animazione con grafica piatta creativa si adattano sia al nome di dominio che agli obiettivi positivi del progetto.
Leggi anche: Combinazione di colori nel web design - siti verdi
Amelia Thompson Portfolio
Una pagina da Chicago. Amelia ha un interessante portafoglio di lavori piatti.
Leggi anche: 30 eleganti siti web di agenzie e portfolio di designer personali
Fatto fatto
Il sito web del sistema di gestione del progetto con un bug tracker è ben progettato in stile Flat. I colori vivaci, la grafica piatta / video e il pulsante di chiamata a contrasto sono impossibili da perdere.
Menta piperita
Il sito web creativo dell'agenzia digitale polacca utilizza forme geometriche e animazioni, illustrazioni, fotografie, disegni inimmaginabili.
Geex Arts
Il sito di un giovane web studio moscovita colpisce per il suo design ultramoderno ad alta tecnologia ed è incluso nella TOP 40 delle agenzie digitali. Si distingue per un menu di navigazione elegante, transizioni efficaci, interattività, animazione e una buona UX per soluzioni non standard.
DAESK
Il sito dello studio tedesco ha un design di vendita entusiasmante in HTML5 e un menu di navigazione personalizzato. Eccitanti colori acidi vendono prodotti (rilevatore di presenze). Gli effetti di scorrimento parallasse al passaggio del mouse catturano l'attenzione sui pulsanti di chiamata e sulla prova sociale. Dopo le revisioni progettate in modo eccellente, la pagina iniziale farà riferimento a casi / storie dei clienti. Interactive su uno sfondo vettoriale lancia la vendita di grafica video.
Fcinq
Sito web dello studio creativo francese: il design piatto elegante inizia con un bellissimo precarico. La correzione del colore delle foto e le combinazioni di colori uniche rendono questo design attraente.
D.FY
Un sito flessibile per un'agenzia coreana con video creativi in \u200b\u200bbackground. Design moderno e pulito in html5 / css3. L'effetto di transizione senza interruzioni è impressionante nel menu di navigazione a schermo intero.
Persone coraggiose
Le passate riprogettazioni del sito web dell'agenzia creativa con sede in Florida sono state presentate nel TOP creativo. Brave People ora ha un design efficiente con un'interfaccia piatta pulita e compatta.
Nea media
Il produttore francese di videogiochi e giocattoli ha utilizzato lo stile FLAT e il web design. Il sito creato su Wordpress sorprende con il suo design alla moda.
Piccoli volantini
Questo è un sito per bambini australiano con succosi colori piatti. I caratteri seghettati a contrasto mettono in risalto il fascino e si fondono con grandi elementi di design.
Ic creativo
Il sito dello studio inglese si distingue con grandi titoli con un appello ed elementi CTA di accento arancione.
FATbit
L'enorme sito web per sviluppatori web dall'India è costruito su wordpress e presenta una varietà di design con micro-interazioni e illustrazioni animate. Nell'intestazione e nel piè di pagina, il colore rosso piatto accentua le chiamate CTA. La pagina principale ha sfondi fissi con correzione del colore e supporta il trascinamento di diapositive in caroselli (prima schermata, prove sociali, promozioni su lastre traslucide).
Dominio menada
Continuando una tradizione di 100 anni di qualità, l'enologo bulgaro impressiona i visitatori con un precarico di un cavatappi animato. Il design piatto scuro con contrasti morbidi, manipolazione fotografica creativa e soluzioni ininterrotte vende l'idea del lusso del marchio.
Museo Frans Hals
Il sito del Museo d'Arte Olandese ha un insolito design piatto con titoli giganti tritati. Le icone di navigazione aiutano a comprendere il menu orizzontale e verticale non standard.
meticolosità
Sito piatto per sviluppatori della Technology Valley dello Stato di New York. Design espressivo e pulito con geometria e sfondi fissi. Bellissimi contrasti nell'intestazione, nel piè di pagina, nelle sezioni con pulsanti CTA.
Landing page e vendita di design in stile FLAT
L'attrattiva e la vivacità della home page o della pagina interna aiutano a esprimere una proposta unica. Il design dell'atterraggio del sito amplia le possibilità di utilizzo di Flat e aumenta le possibilità di ulteriore interazione con i clienti. L'obiettivo del design di una pagina di vendita e di destinazione è fornire conversioni elevate. Un sito LP o una pagina di destinazione viene ricordato per un design interessante o insolito.
Design piatto (design piatto) è uno stile popolare nella progettazione di siti Web e interfacce, nonché sistemi operativi, caratterizzato da semplicità, raffinatezza e minimalismo. Il design piatto ha iniziato a guadagnare popolarità nel 2010 come l'opposto dello skeuomorfismo.
Skeuomorphism - un ornamento fisico o un elemento di design copiato dalla forma di un altro oggetto, ma realizzato con altri materiali o con altri metodi. Gli esempi includono ceramiche decorate con rivetti imitazione per assomigliare a vasi simili in metallo o un calendario per computer che simula l'aspetto della pinzatura delle pagine di un calendario da tavolo di carta (determinato da Wikipedia).
La divulgazione dello stile piatto nel design è stata facilitata dal rilascio del sistema operativo Windows 8 da parte di Microsoft in stile Metro, così come iOS 7, in cui anche Apple ha optato per lo stile piatto. È dopo questo che inizia la vera era del design piatto. Ben presto, i servizi e le applicazioni di ricerca di grandi dimensioni - Google, Youtube - passarono al design piatto e apparvero molti siti che utilizzano i principi dello stile piatto nel loro design. Negli ultimi anni, il design piatto è stato leader nelle tendenze globali del design di siti Web.
Vantaggi del design piatto
- Praticità - l'uso del design piatto consente di ridurre al minimo il numero di stili, script e animazioni, il che consente al sito di caricarsi più velocemente.
- Facile da adattare - Il design piatto è abbastanza facile da adattarsi a diverse risoluzioni dello schermo.
- La comodità di utilizzo - grazie allo stile semplificato, è più facile per gli utenti percepire le informazioni sul sito.
- bellezza - l'imparzialità esterna e il design semplice ti consentono di concentrarti su progetti che prendono davvero piede.
5 principi di progettazione di siti Web piatti
Il design piatto non è affatto noioso, come potrebbe sembrare a prima vista. Grazie alla loro purezza e raffinatezza, le soluzioni di design possono essere eleganti e belle, senza rumori inutili, il che ti consente di concentrarti sul tuo prodotto o servizio.
1 - Utilizzo di oggetti 2D
Nel flat design è escluso l'utilizzo di elementi che conferiscono profondità e volume a un oggetto: ombre, sfumature, luci, texture, riflessi, animazioni. Quando si raffigura un oggetto, vengono visualizzati solo i suoi contorni.
2 - Icone e oggetti semplici
L'uso di icone piatte e forme monosillabiche con contorni chiari e un colore aiuta a semplificare il più possibile il design ea renderlo più leggero. I controlli diventano intuitivi per l'utente e stimolano l'interazione.
3 - Caratteri semplici per progettare lo stile
Molta attenzione viene prestata alla tipografia e ai caratteri in design piatto. Il corsivo non viene utilizzato qui, il carattere si inserisce armoniosamente nel design del sito, non solo nel contenuto, ma anche nella navigazione. Anche nei tipi di caratteri per il sito, è incoraggiato uno stile minimalista.
4 - Gioco di colori
Il design piatto contiene diversi colori di base, che escludono l'uso di transizioni uniformi e gradienti, ma possono essere luminosi e contrastanti l'uno rispetto all'altro.
5 - Minimalismo
Il design piatto prevede l'uso della visualizzazione di elementi, utilizzando l'intera larghezza dello schermo e allo stesso tempo riducendo al minimo le informazioni.
Esiste un design quasi piatto. È uno dei concetti di design piatto che utilizza elementi semplici e spazio bidimensionale. Un esempio potrebbe essere una foto di alta qualità sfocata sullo sfondo o scurita. Ciò consente di creare profondità e prospettiva sull'argomento.
Esempi di design piatto
Su Internet, incluso nel segmento bielorusso, puoi trovare molti esempi di sviluppo di siti Web con design piatto su vari argomenti, tra cui risorse di notizie, portali e persino negozi online.
