Articoli marcati con tag ‘web design’

La natura nel web design

La terra, il legno, l’erba, gli alberi, i fiori, le immagini ed illustrazioni di animali e i paesaggi determinano lo “stile della natura”. Nonostante le limitazioni di combinazione di colori (associati per lo più al marrone e verde) i designers spesso sperimentano altri colori.
Elementi grafici, come prati e boschi, servono non solo come decorazioni, ma anche come componenti emotivi che mirano a rendere il design più raffinato, green e fresco e creano un’atmosfera ottimistica ed incontaminata. Ecco alcuni esempi.

Nonostante sia un blog, Noupe è in grado di attirare l’attenzione degli utenti, non solo per il suo contenuto, ma anche per l’aspetto pieno di foglie e piante.

Noupe

Die Frische Bergbauern fonde insieme l’erba e le textures di tessuto.

Die Frische Bergbauern

Pasazas ha una illustrazione caratterizza da una tipografia creata con elementi naturali.

Pasazas

Last Game utilizza la realistica fotografia di sfondo che di tanto in tanto si unisce con widget in legno.

L'ultima partita

Adline presenta un logo riccamente decorato con fiori vettoriali monocromatici ed uno sfondo con effetto suolo.

Adline

The New Zealand Beer Festival trasmette un’immagine della natura utilizzando lo sfondo blu cielo, enormi texture a foglia lungo i lati e semplici elementi grafici.

La Nuova Zelanda Festa della Birra

Bouygues Telecom utilizza abilmente il cursore a schermo intero con sfondi paesaggistici.

Bouygues Telecom

SevenModules aggiunge un tocco naturale grazie all’illustrazione ad acquerello leggermente sfocata.

SevenModules

Fruitylife incorpora elementi organici. Inoltre utilizza abilmente la forza del colore nella frutta e verdura.

Fruitylife

The Kyteman Orchestra la radice richiama facilmente la terra.

Kyteman

Arcadia ha un sistema di navigazione che si basa su uno sfondo di un’isola.

Arcadia

Media Engine anche in questo caso vi è una illustrazione di un’isola ma in 3d.

Media Engine

Outdoor Italia è in stile scrapbook. Vi sono delle incredibili formiche animate che sovente appaiono nell’intestazione.

Outdoor Italia

GoedeMorgen!  Sembra che ci si trova in un parco in piena calda estate.

GoedeMorgen!

Avioc Web Design la foto paesaggio dettagliata sulla home page crea il fascino naturale.

Avioc Web Design

RedMica ottiene una sensazione naturale con lo sfondo del prato.

RedMica

East African Bakery unisce lo fondo in legno scuro con gli elementi vegetali.

East African Bakery

Harris Farm Market cattura l’attenzione degli utenti attraverso la parte superiore della home page.

Harris Farm Market

Dan Meek l’isola e l’illustrazione dell’albero disegnato a mano producono sensazioni contrastanti ma sempre ambientali.

Dan Meek

Urban light ha una forte atmosfera urbana con un tocco grunge. Attraverso lo stile acquerello raffigura il cielo e l’erba.

Luce urbana

Vitala Foods in stile scrapbook digitale.

Vitala Foods

Lab4motion la manipolazione fotografica della terra mette in mostra la vita in miniatura. Lo sfondo grigio chiaro aggiunge aria dando al sito un aspetto più spazioso.

Lab4motion

Institute chinese ha una texture in legno.

Istituto cinese

Studio Brun la natura si presenta in diverse forme differenti.

Studio Brun

Dagoba offre splendidi paesaggi esotici leggermente sfumati che da un lato porta nota di naturalezza e d’altra aiuta a presentare il prodotto.

Dagoba

Kooba ha una illustrazione che dimostra graficamente la vita in ufficio.

Kooba

Organic Supermarket lo sfondo realistico ricorda un campo erboso.

Il supermercato biologico

via designmodo.com

Il turchese nel web design

Il Turchese è considerato un colore freddo ma le varie tonalità possono comunicare diverse sensazioni quali freschezza, femminilità, relax, eleganza, energia, saggezza, integrità, creatività, equilibrio, fortuna, amicizia, amore, gioia, pace, pazienza, intuizione, lealtà, giovanezza, divertimento, spiritualità e naturalmente l’acqua.

Andrew McCarthy in Vetrina del sito web turchese
Smartphood in Showcase del sito web turchese
Vtcreative in Showcase del sito web turchese
Nineswiss in Vetrina del sito web turchese
BKWLD in Showcase del sito web turchese
AXILINE in Showcase del sito web turchese
MyProvence in Showcase del sito web turchese
Ideatore nel Showcase del sito web turchese
Bianchi in vetrina del sito web turchese
Fango in Showcase del sito web turchese
Dan Edwards nella Vetrina del sito web turchese
Portlandia in Showcase del sito web turchese
Karina in Showcase del sito web turchese
Barometro dei consumatori nella Vetrina del sito web turchese
Mustasj in Showcase del sito web turchese
Ford Escape Routes nella Vetrina del sito web turchese
Mozart a Showcase del sito web turchese
Karey Helms nella Vetrina del sito web turchese
Fitz Fitzpatrick nella Vetrina del sito web turchese
Evo Energia in Vetrina del sito web turchese
AOTY in Showcase del sito web turchese
Soleil Noir in Vetrina del sito web turchese
SpellTower in Showcase del sito web turchese
Psych Psych e in Showcase del sito web turchese
Progettazione Abbracciato in Showcase del sito web turchese
Cappen in Showcase del sito web turchese
Eureka in Showcase del sito web turchese
supporti herrlich in Vetrina del sito web turchese
Oleg Postnikov nella Vetrina del sito web turchese
Norvell Jefferson nella Vetrina del sito web turchese
Intacto in Vetrina del sito web turchese
Fitbit in Showcase del sito web turchese
Fiafo in Showcase del sito web turchese
Zag Studio in vetrina del sito web turchese
Readymag in Showcase del sito web turchese
Nate Navasca nella Vetrina del sito web turchese
Owoceiwarzywa in Showcase del sito web turchese

via www.splashnology.com

Esempi di siti che danno la percezione della profondità

I designers non hanno limiti nella loro creatività e riescono sempre più ad allargare i confini di concezioni generali. Uno dei migliori esempi di questo concetto è come riescono a rappresentare la percezione della profondità.
Ci sono diversi modi per farlo ed i più comunemente utilizzati sono: la profondità naturale dei paesaggi; l’arte poligonale; le foto con sfondi manipolati; combinazione di sfumature ed illuminazione; punti focali e di vista; collage digitale; impostazione skeuomorphic; strati sovrapposti; effetti tipografici e le illustrazioni 3d. Generalmente i designers utilizzano diverse tecniche contestuali per rafforzare effetto. Designmodo ne indica alcuni esempi.

Oakley Airbrake MX offre un’incredibile scena di terra e pietre di diverse dimensioni.

Oakley Airbrake MX

Mokhtar Saghafi utilizza l’arte poligonale che ricrea una sensazione di convessità, creando uno sfondo 3d.

Mokhtar Saghafi

Kalixo ricrea la percezione della profondità per mezzo di vivaci immagini che si completano in ogni pagina.

Kalixo

Teapot elegante e raffinato sfrutta gli sfondi fotorealistici 3D.

Teiera

GoodTwin l’immagine dell’isolotto sospeso crea un senso di profondità.

WizAd il mix di grafica vettoriale colorata e disegni prospettici aumentano la percezione della profondità.

WizAd

Flash vs HTML crea il senso di profondità grazie al disegno di un pianeta con uno sfondo animato.

Flash vs HTML

DigitalXBridge con lo sfondo poligonale stile crea l’effetto di profondità.

DigitalXBridge

Yookoso dispone gli oggetti in primo piano in modo da creare profondità.

Yookoso

Phonak ha un fascino urbano con un vivace collage.

Phonak

Unyca ricrea la sensazione di profondità con uno sfondo geometrico con immagini leggermente ingrandite e sfocate in primo piano.

Unyca

Handy la messa a fuoco e la sfocatura degli oggetti  interagiscono tra di loro.

Handy selezionamento

3magine in skeuomorphic, la mensola di legno nello sfondo è molto realistica.

3magine

Carlaine trasmette un senso di profondità con la sospensione dei prodotti. La grotta è poligonale con una dissolvenza di colore.

Carlaine

La Grange dispone di immagini a 3d.

La Grange

Diesel i cubetti sparsi di varie dimensioni e di leggibilità creano un tocco di profondità.

Diesel

Brick Art il vicolo con gli alberi sono in stile Lego.

Brick Art

Findus accoglie i suoi utenti con pulito ed ordinato collage digitale nelle nuvole.

Findus

Fondazione Borsalino usa la tecnica scrapbook.

Fondazione Borsalino

Babel presenta la profondità con immagini non piane,ed ombreggiatura e grafica frontale.

Babele

Outdoor Bergen grazie al gioco sfocatura e messa a fuoco, raggiunge un senso dimensionale.

Outdoor Bergen

Hot Dot richiama l’attenzione tramite la home page scura con diversi elementi in 3d sparsi su tutta la pagina.

Hot Dot

Real Clear la sala dettagliata con pavimento in legno e le pareti sembrano molto realistici.

Real Clear

Ultra oil ricrea l’illusione della profondità per mezzo del punto focale, rendendo alcuni elementi più vicini o più lontani per gli spettatori.

Ultra Oil

thinkLuke il 3d è simulato mediante la manipolazione di foto spettacolari.

thinkLuke

Casinò Barcellona è un sito semplice che simula la prospettiva sfocando e cambiando la dimensione di più oggetti.

Casino Barcelona

L’uso dei sfondi sfocati nel web design

Insieme agli sfondi di grandi immagini, quelli sfocati sono un’altra ottima opzione nella moderna progettazione di siti web in quanto rendono il design sofisticato ed elegante. Inoltre, aggiungono maggiore leggibilità, focalizzano l’attenzione su elementi specifici e rendono evidenti gli elementi in primo piano. Designmodo mostra alcuni esempi.

DEGO Interactive sembra meno formale a causa di sfondo luminoso che è parzialmente riempito con effetto bokeh.

DEGO Interactive

Radiuus ha componenti di colore viola elegantemente incorporati.

Radiuus

Maxim Siebert utilizza una leggera sfocatura, rendendo leggibile il testo bianco e giallo.

Maxim Siebert

Teamgeek con lo sfondo bianco e nero e con una intestazione importante ben si sposa con la scala di grigi.

Teamgeek

Siete de Febrero ha una atmosfera elegante in stile Metro 8 con blocchi di dati disposti con precisione e monocromatici con vago sfondo a schermo intero.

Siete de Febrero

MelonHTML5 è un notevole esempio di flat design, con un tocco evidente di stile Metro 8 e con lo sfondo molto sfocato.

MelonHTML5

David Massiani pulito e riposante grazie all’utilizzo di una sfocata foto come sfondo con colori tenui ed effetto lucido.

David Massiani

Hey, Handsome ha una classica ed elegante combinazione di doppi colori.

Hey, Bello

The Pete Design fa un uso leggero dello sfondo color marrone unito ad una notevole tipografia.

Il Pete design

Nudge design trasmette una calda atmosfera tramite la lomografia.

Nudge design

The Trip prevede diverse pagine interne con sfondi sfocati che evidenziano il testo.

Il Viaggio

Restaurante Couve e Flor accoglie gli utenti con lo sfondo sfocato del ristorante presentando i testi in modo molto elegante.

Restaurante Couve e Flor

Daniel Filler si rende accogliente e chiaro stabilendo un rapporto di fiducia  con i potenziali clienti.

Daniel Filler

Saforian ha un aspetto leggero e luminoso e presenta magnificamente la tagline.

Saforian

Rei 1440 Project presenta una spettacolare fotografia panoramica leggermente sfocata.

Rei 1440 Progetto

Apps Builder deve il suo aspetto elegante e di tendenza grazie allo stile Metro 8, con sullo sfondo una foto sfocata.

Apps Builder

Piction iPhone App è un esempio di semplice landing page minimalista che magnetizza i propri utenti con deliziose foto di sfondo.

Piction iPhone App

Courchevel sfoca una parte dello sfondo al fine di concentrare l’attenzione sugli elementi centrali.

Courchevel

Bakken e Baeck ha un cursore a schermo intero, che comprende immagini nitide di dispositivi Apple con brevi descrizioni e con sfondi vaghi e lucidi.

Bakken e Baeck

Static trasmette l’immagine di nitidezza con una grafica e tipografia monocromatica bianca su uno sfondo nebbioso.

Statica

Color ha uno sfondo lucido in tonalità tenui che evidenzia perfettamente i dispositivi mobile.

Colore

Happy Tables  utilizza colori saturi sia per lo sfondo che per il primo piano al fine di creare contrasto ed evidenziare maggiormente il messaggio.

Tabelle Happy

Gipis utilizza anche la grafica poligonale 3d.

Gipis

Best App Daily utilizza una grande immagine di sfondo leggermente sfocata che viene aggiornata alla nuova successiva applicazione.

Miglior App per giorno

Fhoke elegante e professionale.

Fhoke

BrightByte sfrutta l’ immagine del luogo di lavoro.

BrightByte

Necessità di maggiore evidenza dei prezzi nel web design

E’ di tendenza realizzare siti web con un design pulito, minimale, flat, semplice ed efficace. Ma è però difficile trovare una pagina prezzi ben progettata. I designer creano siti dove usabilità e bellezza si combinano per offrire suggestioni. Però se si va dall’home page alla pagina prezzi sembra di entrare in un mondo completamente diverso. Il menù prezzi deve essere pertanto in linea con lo stile del sito tale da evitare qualsiasi ulteriore ricerca da parte degli utenti.  Webdesignledger presenta alcuni esempi.
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design
21 Examples of Pricing Pages in Web Design

21 Examples of Pricing Pages in Web Design