Circa L’Autore
Steven Bradley è l’autore di Fondamenti di Disegno, Elementi, Attributi, & Principi e CSS Animazioni e Transizioni per il Web Moderno., Quando non …Più aboutSteven Bradley↬
- 10 min di lettura
- Ispirazione,Design,Creatività,Design, Principi
- Salvate per la lettura offline
- Condividi su Twitter”, LinkedIn
Il design è una disposizione di forme e spazi. Per lavorare in modo più efficace con lo spazio, devi prima diventare consapevole di esso e imparare a vederlo — imparare a vedere le forme che lo spazio forma e come lo spazio comunica. Questa è la seconda parte di una serie sui principi di progettazione per principianti. La prima parte riguardava un’introduzione alla gestalt; il resto della serie (incluso questo post) si baserà su quei principi della gestalt e mostrerà quanti dei principi fondamentali con cui lavoriamo come designer hanno la loro origine lì.,
La relazione figura-Terra
Il principio della gestalt che si applica maggiormente allo spazio è quello della figura-terra. Tutto in un tuo disegno sarà visto come l’uno o l’altro, e la relazione tra loro si esclude a vicenda. Nessuno dei due può essere percepito se non in relazione all’altro, e cambiare uno è impossibile senza cambiare anche l’altro.
Anche la relazione figura-terra è complementare. Figura e terra possono migliorare o sminuire l’uno dall’altro, e organizzare i due in relazione l’uno con l’altro è uno degli aspetti più importanti del design., Imposta un contesto per come il tuo design comunica e come verrà interpretato.
“Lo spazio bianco deve essere considerato come un elemento attivo, non uno sfondo passivo.”
— Jan Tschichold
Nel terzo pannello, due linee nere sono state rimosse. Questo attiva lo spazio, facendolo sembrare seduto in cima al campo grigio., Il terreno è diventato la figura e aggiunge più profondità al design.
Esistono tre tipi di relazioni figura-terra:
- Stabile (in alto a sinistra)
È chiaro cosa è figura e cosa è terra. L’uno o l’altro di solito domina la composizione. - Reversibile (sopra il centro)
Sia la figura che il terreno attirano l’attenzione dello spettatore allo stesso modo., Questo crea tensione, per cui uno può superare l’altro, portando a un design dinamico. - Ambiguo (sopra a destra)
Gli elementi possono sembrare sia figura che terra contemporaneamente. Formano forme altrettanto interessanti e lo spettatore è lasciato a trovare il proprio punto di ingresso nella composizione.
A seconda di quale relazione si imposta e come si bilancia sia la figura che il terreno, si indirizza il pubblico a guardare diverse parti del design e interpretare ciò che vedono in diversi contesti.,
La figura-terra non è l’unico principio della gestalt in cui lo spazio gioca un ruolo di primo piano. Altri due sono questi:
- Proximity
Proximity utilizza lo spazio per collegare e separare gli elementi racchiudendo alcuni elementi nello spazio. Un esempio che potremmo dare per scontato è paragrafi di testo sulla pagina. Lo spazio tra i paragrafi è maggiore dello spazio tra le righe di testo all’interno di un paragrafo. - Chiusura
Questo fa uso dello spazio come spazi tra gli elementi. Gli spettatori riempiono le lacune con le proprie informazioni per completare un intero dalle parti. Troppo spazio e nessuna chiusura si verifica., Troppo poco spazio e nessuna chiusura è necessaria. Solo il corretto equilibrio tra spazio e spazio riempito attiverà lo spazio e porterà alla chiusura.
Lo spazio come elemento di design
Pensa un attimo alla musica. Se ogni nota o accordo fosse suonato allo stesso tempo, non avresti musica. Faresti rumore. La musica si verifica quando i suoni sono in contrasto con il silenzio. Variando il modello di suono e silenzio crea ritmo e melodia., Senza il silenzio, non c’è musica.
Lo spazio esegue visivamente la stessa funzione. Dà spazio agli elementi positivi per respirare. Dà all’occhio la libertà di muoversi attraverso un design e di scoprire gli elementi che sta cercando. Il positivo è visto solo in contrasto con il negativo. Senza spazio, non hai design. Hai un rumore visivo.
A meno che il rumore non sia ciò che stai cercando di comunicare, inclinati verso lo spazio. Le persone hanno meno probabilità di lamentarsi di troppo spazio che di troppo poco.,
Lo spazio può fare quanto segue:
- stabilire contrasto, enfasi e gerarchia;
- generare dramma e tensione;
- fornire riposo visivo tra gruppi di elementi.
Come implica la relazione figura-terra, hai spazio solo quando qualcosa è presente al suo interno. Prima dell’aggiunta di elementi positivi, lo spazio non è definito. La relazione figura-terra deve essere stabilita prima che lo spazio possa esistere e la sua comunicazione abbia inizio.
Una delle funzioni più importanti dello spazio è migliorare la leggibilità e la leggibilità., Macro-spazio rende il testo più invitante. Il micro-spazio lo rende più leggibile.
- Micro-spazio
Questo è lo spazio all’interno di elementi in un gruppo. È lo spazio tra lettere, parole e paragrafi. - Macro-spazio
Questo è lo spazio tra gli elementi principali. Separa elementi o gruppi di elementi e fornisce strade per l’occhio da seguire e luoghi per riposare tra gli elementi.
Lo spazio è correlato alla qualità. Più spazio comporta meno elementi o una rarità di elementi. Confronta high-end e discount negozi al dettaglio., Quale di solito ha più spazio all’interno e quale confeziona i prodotti in ogni bit di spazio disponibile? Cosa ti comunica lo spazio?
Lo spazio può anche trasmettere attributi diversi dalla qualità, come ad esempio:
- raffinatezza,
- semplicità,
- lusso,
- pulizia,
- solitudine,
- apertura.
Sprechi spazio quando non lo consideri. Puoi sprecare spazio riempiendolo eccessivamente. È possibile sprecare spazio intrappolandolo all’interno di elementi di un progetto e non permettendogli di connettersi ad altri spazi nel progetto.,
Il design è in definitiva una disposizione di forme, e che include le forme formate dallo spazio. Non abbiate paura di usare lo spazio. Vederlo come un elemento di design importante sotto il vostro controllo.
Alcuni esempi di spazio nei siti Web
Per utilizzare meglio lo spazio, è necessario prima diventarne coscientemente consapevoli. Imparare a riconoscere lo spazio in diversi disegni. Nota la forma che forma e pensa a ciò che lo spazio sta comunicando. A tal fine, diamo un’occhiata al design di alcuni siti web, prendendo atto di come viene utilizzato lo spazio.,
Vecchia guardia
Il design della Vecchia Guardia di Tom Johnson utilizza molto spazio bianco, dando spazio al testo e ad altri elementi per respirare. Non c’è errore su cosa sia la figura e cosa sia la terra.
Le informazioni sono contenute e separate dallo spazio (richiamano il principio di prossimità), distinguendo gruppi di elementi., Puoi facilmente dire dove finisce un post e inizia il prossimo, esclusivamente dallo spazio tra di loro.
Il contenuto principale è leggermente fuori centro sulla pagina, con ampio spazio su entrambi i lati. Questo spazio è occasionalmente interrotto da elementi, attivando sia lo spazio che gli elementi di interruzione. Questo aiuta a richiamare l’attenzione sulla zona e soprattutto gli elementi all’interno.
Pagina Staus di Heroku
L’immagine qui sotto mostra parte della pagina di stato di Heroku come per lo più spazio., Mi è capitato di catturare il sito Web in una giornata particolarmente buona, perché ulteriori elementi positivi significherebbero più incidenti segnalati sulla piattaforma. Qui, più spazio bianco significa un servizio migliore.
Si noti come lo spazio bianco non deve essere bianco. Mentre la pagina è eccessivamente generosa con lo spazio, è improbabile che ti lamenti che ce n’è troppo., Solo informazioni importanti — in questo caso, aggiornamenti di stato e segnalazioni di incidenti — interrompono lo spazio.
Introduzione del romanzo
Lo spazio in cima all’introduzione del romanzo è asimmetrico e attivo. Si noti come il grande blocco di spazio a sinistra conduce l’occhio direttamente al contenuto. Se fai clic sul sito Web e scorri verso il basso dall’alto, vedrai che lo spazio viene utilizzato anche per separare e raggruppare blocchi di informazioni.
Le linee leggere sottili vengono anche utilizzate per raggruppare e separare questi blocchi. Quando si visualizza il sito web, notare come le linee non sempre toccano, permettendo allo spazio di fluire intorno a loro e connettersi ad altri spazi. Ciò impedisce che lo spazio venga intrappolato.
Elliot Jay Stocks
Il sito web di Elliot Jay Stocks dovrebbe essere familiare a tutti voi, dal momento che è dietro il design di questo. Lo spazio asimmetrico sul sito web di Elliot porta di nuovo allo spazio attivo.,
L’immagine grande nella parte superiore di questa pagina potrebbe potenzialmente fungere da blocco temporaneo per l’accesso al contenuto sottostante; tuttavia, una generosa quantità di spazio accanto all’immagine offre ampio e invitante spazio per l’occhio per muoversi intorno ad essa., Se la barra laterale a sinistra avesse lo stesso colore di sfondo del contenuto principale, probabilmente sarebbe più facile per l’occhio spostarsi sull’immagine, ma il cambiamento di colore difficilmente lo rende difficile.
Come con i siti web di cui sopra, lo spazio viene utilizzato sia per racchiudere e gruppi separati di informazioni distinte, permettendo ad ogni gruppo di distinguersi e permettendo all’occhio di trovare ciò che vuole e di riposare in mezzo.
Phil Coffman
Il contenuto del sito web di Phil Coffman forma un’unica forma che si trova per lo più nello spazio vuoto., L’assenza di molti elementi positivi aumenta l’importanza di quelli che sono presenti.
Anche all’interno degli sfondi rettangolari colorati, il testo ha abbastanza spazio intorno ad esso per essere facilmente letto e non essere scambiato per un’altra categoria di testo sulla pagina.,
La forma positiva (e la forma dello spazio) si adatta responsivamente a diverse larghezze del browser, ma rimane il modello di una singola forma grande circondata dallo spazio.
Nuove avventure nel Web Design
Come molti dei siti web qui, Il sito web 2013 per le nuove avventure nel Web Design conferenza lascia spazio generoso intorno elementi. Gruppi distinti di informazioni sono contenuti dallo spazio e lo spazio è attivo in tutto il progetto.
Qualcosa di interessante da notare sono le frecce circolari grigie tra l’immagine in alto a sinistra e il contenuto principale a destra.
Queste frecce bloccano il flusso dello spazio? Perché non toccano e perché ognuno è tratteggiato dove interrompe lo spazio, lo spazio può fluire attraverso, anche se è chiaramente più limitato in quel flusso.
Il colore grigio chiaro aiuta. Impedisce alle frecce di dominare, e non è difficile immaginare lo spazio che scorre sopra le linee.,
In tutta onestà, se il mio browser fosse più ampio quando ho afferrato lo screenshot, le frecce non si sovrapporrebbero al contenuto principale. Tuttavia, circa 1280 pixel fino a dove il disegno diventa una singola colonna, lo fanno. Nel complesso, funziona, anche se mi chiedo se lo spazio scorrerebbe meglio senza le frecce presenti.
Alcuni esempi di Loghi
Vi lascio con alcuni loghi in cui lo spazio è incorporato come parte integrante del design. Invece di sottolineare l’uso dello spazio in ciascuno, farò alcuni commenti generali e poi ti permetterò di esplorare gli spazi per te stesso.,
Si noti come i loghi qui sotto fanno uso della relazione figura-terra. Con alcuni, fino a quando non vedi sia la figura che il terreno, non vedi il logo completo. Entrambi sono contributori necessari a ciò che viene comunicato.
Molti di questi loghi si basano sul principio della chiusura. Quello che devi vedere non è davvero lì, ma lo vedi comunque. Alcuni di questi loghi giocano anche con la figura e la terra. Cosa c’è di figura quando si prende in tutto il logo contro il suo sfondo diventa terreno per una figura più piccola all’interno., Questa relazione figura-terra reversibile è centrale per ciò che viene comunicato.
- Cloud Letto
- Gatto Nero Lounge
- Maiusc
- Dolphin & Guarnizione Logo Designer
- Impianti Dentali Guida
- Wineforest
Sommario
spero che prendere due cose principali da questo post., La prima è la connessione tra l’uso dello spazio nel design e il principio della gestalt della figura-terra. Principi Gestalt sottendono gran parte di ciò che facciamo come designer.
In secondo luogo, e forse ancora più importante, fare uno sforzo per trascorrere del tempo osservando come lo spazio viene utilizzato nel design. Non lasciare che lo spazio sia un sottoprodotto dei tuoi elementi positivi. Impara a progettare lo spazio tanto quanto, se non più di, elementi positivi. Il layout di qualsiasi pagina è in definitiva un’organizzazione dello spazio.
Analizza consapevolmente quello spazio e lo usa deliberatamente per creare un design migliore. Non lasciare che sia ciò che è rimasto., Vederlo come un elemento di design essenziale, e quindi visualizzare la relazione tra lo spazio e gli elementi positivi come un elemento di design che si forma.
La prossima volta, aggiungeremo altri principi gestalt al mix ed esploreremo come i punti focali, la continuazione e il destino comune ci portano in idee come il peso visivo e l’equilibrio compositivo.
- Mind Your En And Em Trattini: Etichetta tipografica
- Principi di progettazione: Peso visivo e la direzione
- Come geometria influenza Logo Design
- About Art
(al, ml, il)