Gli interni e gli esterni del design minimalista

Il minimalismo è una tendenza che non morirà mai. Non importa quante volte restiamo meravigliati da disegni straordinariamente intricati, ci sarà sempre qualcosa di semplice che ci lascia catturati.

Oggi vedremo alcuni degli aspetti chiave del minimalismo nel web design insieme ad alcuni esempi di designer che hanno capito bene.

Che cosa non è

È quasi sempre una buona idea esplorare ciò che qualcosa non è all'interno di una discussione su ciò che è. Esaminare gli opposti ci dà un punto di contrasto e aiuta a modellare la definizione. In sostanza, il minimalismo è un allontanamento dal punto di vista visivo superfluo. Tavolozze di colori molto diversi e elementi complessi sono perduti in favore di semplici colori solidi e linee di base.

Considera i due esempi qui sotto. Questi siti rappresentano una chiara alternativa alla mentalità minimalista. Sono visivamente abbastanza occupati e possono impiegare un minuto per esplorare prima di sentire di avere una conoscenza decente di ciò che sta accadendo nella pagina.

Questo li rende cattivi design? Assolutamente no. Sebbene molti progettisti favoriscano chiaramente stili specifici, l'assegnazione di dichiarazioni di valore a un determinato metodo è utile quanto affermare che il blu è meglio del verde o che la sinistra è meglio della destra; semplicemente non c'è nessuna verità in queste affermazioni e non si guadagna nulla nella discussione di tali possibilità.

Se sei un designer professionista dovresti essere in grado di utilizzare qualsiasi numero di stili di progettazione per soddisfare la volontà e la personalità del tuo cliente. La risposta alla domanda su cosa sia il minimalismo è che non è un approccio intrinsecamente migliore alla progettazione di siti web. La chiave diventa quindi non decidere se ti piace di più occupato, minimalista o qualsiasi altro numero di stili di progettazione, ma imparare a implementare efficacemente ciascun metodo. Esaminiamo alcune aree su cui concentrarsi quando si crea un design minimalista.

Tipografia

La tua scelta di tipografia gioca un ruolo enorme nell'efficacia del tuo design minimalista. Scegli i caratteri semplici e puliti con un alto livello di leggibilità. I caratteri sottili sono spesso usati per trasmettere il minimalismo, ma non limitarti a questa idea in quanto un font spesso è un ottimo modo per mostrare un elemento importante come un titolo.

Allo stesso modo, puoi anche ottenere un solido design minimalista con un complicato font di script. Cerca di mantenere la tua pagina e altri tipi di tipografia il più semplici possibile mentre usi uno script per attirare l'attenzione su una singola area della pagina.

Risorse addizionali

40 font gratuiti di qualità minimalista e alta qualità

70 esempi di tipografia minimalista

Alti allineamenti alla griglia

La mia implementazione preferita del minimalismo è quando si fa per raggiungere lo scopo di aumentare l'usabilità. Un buon web design minimalista spesso si focalizza sullo spoglio della pagina su un numero minimo di sezioni ed elementi separati, in modo tale che la navigazione del contenuto sia quasi priva di qualsiasi tipo di curva di apprendimento o confusione visiva.

Questo molto spesso risulta in allineamenti a griglia facilmente evidenti. I nostri occhi hanno molta familiarità con questo modello di contenuto e di solito non hanno problemi a selezionarlo attraverso una rapida occhiata. Inoltre, c'è qualcosa nel tuo cervello che semplicemente vuole che gli elementi siano allineati correttamente e in modo prevedibile. È piacevole vedere una pagina con un forte allineamento sia verticale che orizzontale. Al contrario, c'è una sorta di dissonanza visiva e psicologica quando non siamo in grado di identificare immediatamente un modello chiaro nella disposizione degli oggetti in una pagina.

Risorse addizionali

La griglia CSS da 1KB

ZURB CSS Grid Builder

Contrasto

Se hai un design minimalista e sembra che manchi qualcosa, le probabilità di aggiungere contrasto miglioreranno notevolmente il design. Quando impugnato da una mano praticata, il contrasto è la chiave di tutto il buon design (difenderò questa dichiarazione generale fino alla morte). Nel web design minimalista, la pagina è talmente spogliata che non c'è altro da fare che un contrasto intelligente.

Il contrasto è un concetto che tutti noi capiamo intrinsecamente, ma rendendoti consapevole di ciò può migliorare drasticamente i tuoi progetti. Controlla il design semplice di seguito:

Non c'è davvero molto da fare qui per quanto riguarda i colori e le belle foto. Tuttavia, il design è abbastanza attraente a causa del forte uso del contrasto. L'intestazione e l'area del contenuto sono chiaramente separati e immediatamente riconoscibili per quello che sono (il piè di pagina usa lo stesso trucco). La copia sulla pagina si differenzia per dimensioni e audacia per attirare la vostra attenzione sulle parti del messaggio ritenute importanti dal progettista.

La pagina in alto usa sfumature di grigio per differenziare ma puoi altrettanto facilmente usare colori diversi per ottenere la stessa cosa.

Basta ricordare che c'è un'enorme differenza tra colori contrastanti e contrastanti. Solo perché due colori sono molto diversi non significa che i tuoi occhi percepiranno la differenza come piacevole. Assicurati di essere all'altezza della tua teoria dei colori prima di prendere decisioni drastiche.

La cosa principale da ricordare con il contrasto è la migliore dell'autore del design Robin Williams: "Non essere un buono a nulla !? Ciò che intendeva con questo è che un po 'di contrasto non fa molto. Se hai intenzione di creare qualcosa di più grande in modo che risalti, renderlo molto più grande. Se hai intenzione di renderlo più audace, rendilo davvero audace! Dovresti essere in grado di dire in un istante se il contrasto è lì. Lo vediamo spesso quando il testo è in grassetto. A volte la differenza tra il testo in grassetto e il testo normale è così lieve che devi davvero fissare per vedere la differenza! In questo caso, il testo in grassetto non ha alcuno scopo e dovrebbe essere lo stesso di tutti gli altri per evitare confusione visiva.

Lo spazio bianco

Ripensa agli esempi occupati all'inizio di questo articolo. Questi designer hanno scelto di riempire quasi ogni centimetro dello schermo con qualcosa di visivamente interessante. Il minimalismo riprende ancora l'approccio opposto.Dà ai componenti principali della pagina un ampio respiro che li distingue.

Gli spazi bianchi rendono lo spettatore più a suo agio e meno claustrofobico. Ti aiuta anche il designer a controllare dove vuoi che lo spettatore guardi. Alcuni designer insistono sul fatto che gli spettatori leggeranno ogni pagina da sinistra a destra seguendo un modello z. Questo semplicemente non è vero in tutti i casi. Si noti come il designer abbia utilizzato gli spazi bianchi e un'immagine luminosa per attirare gli occhi sull'immagine dello schermo del computer. I tuoi occhi iniziano proprio al centro dell'immagine, non in alto a sinistra!

Questo ha tutto a che fare con il contrasto, come detto sopra, e il volume di spazio occupato da un dato oggetto rispetto allo spazio bianco che lo circonda. Per avere un'idea della giusta quantità di spazio bianco da utilizzare quando si esegue un layout iniziale, converto spesso gli oggetti che inserirò sulla pagina in forme estremamente semplici in Illustrator. Quindi riesco a mescolare e ridimensionare rapidamente gli oggetti senza essere distratto dal loro contenuto. Fare layout in questo modo ti costringe a pensare all'equilibrio della tua pagina prima ancora di avvicinarti a elementi estetici più complessi.

Come puoi vedere, il layout di Jolicloud è abbastanza equilibrato e attraente se guardato in questo modo. L'unica cosa che mi infastidisce è che i link di navigazione non si allineano con il lato destro del contenuto. L'ho esagerato un po 'nella versione semplificata per renderlo più facile da vedere, ma è sicuramente così anche nell'immagine originale. Ancora una volta vediamo il vantaggio di ridurre la pagina alle forme di base in quanto diventa immediatamente evidente che i collegamenti di navigazione sono in qualche modo posizionati in modo impacciato (né allineati al centro né allineati a destra ma da qualche parte nel mezzo).

Altri articoli su Minimalismo

Non puoi avere abbastanza minimalismo? Scopri i fantastici articoli e siti qui sotto:

  • 21 risorse soprattutto per gli amanti del minimalismo: Vandelay Design
  • Vetrina di design pulito e minimalista: Smashing Magazine
  • Minimalismo in giro per il Web: Design Inspiration & WP Themes: Tutorial 9
  • 20 bellissimi temi di WordPress minimalista: sei revisioni
  • 25 bellissimi design di siti web minimalista: Vandelay Design

Conclusione

Questo avvolge la nostra discussione sul minimalismo nel web design. Fateci sapere cosa ne pensate di questa tendenza nei commenti qui sotto. Assicurati inoltre di includere eventuali link ai tuoi siti preferiti che esemplificano il minimalismo nel web design.