Share
Ora sai tutto sul colore, sulla tipografia e su varie cose che dovresti intraprendere prima di iniziare un progetto di design, è ora di iniziare a scendere e sporcare con alcune delle basi per lavorare con le griglie nei tuoi progetti.
Le griglie ti consentono di costruire solide strutture e forme nei tuoi progetti. Proprio come abbiamo osservato le gerarchie e il ritmo tipografico, possiamo effettuare gli stessi sentimenti usando una struttura a griglia. Proprio come con la codifica, esistono metodi consigliati per organizzare moduli e sezioni di codice e un sistema di grid può essere d'aiuto quando si progetta per il web.
Le griglie non sono solo utili per noi come designer o sviluppatori, ma anche per l'utente. Durante tutta questa sessione ho sottolineato l'importanza di creare un buon viaggio utente e una buona esperienza utente attraverso i tuoi progetti - dopotutto, l'utente è lì per consumare i tuoi contenuti e vuoi renderli un'esperienza positiva per loro come te può. Avere un solido sistema a griglia da utilizzare nei tuoi progetti (e quindi portare a termine la fase di sviluppo) ti permetterà di fare proprio questo, creando coerenza e familiarità (e quindi creando fiducia) nel tuo design.
Se il tuo sito web è ben progettato, una griglia ti aiuterà a proiettare tale fiducia ulteriormente verso i tuoi utenti, anche se consapevolmente o inconsapevolmente che la proiezione potrebbe essere. L'uso di un sistema a griglia non significa che i tuoi progetti debbano diventare noiosi o squadrati. Proprio come è stato detto con responsive web design, la responsabilità è di creare un design che è unico e ha qualcosa di diverso - e un sistema di grid dovrebbe essere visto come qualcosa che abilitare tu per farlo, piuttosto che limitare tu.
... una struttura che comprende una serie di linee orizzontali e verticali, utilizzate per organizzare il contenuto.
Nei suoi termini più elementari, un sistema a griglia è una struttura che comprende una serie di linee orizzontali e verticali che si intersecano e vengono quindi utilizzate per organizzare il contenuto. In termini ancora più semplici (che rendono più facile la comprensione!) Un sistema di grid è un modo di fornire un sistema con cui i progettisti possono lavorare per strutturare e presentare contenuti e immagini in un modo molto più leggibile e gestibile.
I sistemi a griglia sono stati a lungo utilizzati nelle pubblicazioni cartacee, ma con la loro introduzione nella progettazione per il Web e i numerosi e numerosi framework di griglia CSS che sono stati utilizzati, sono ora utilizzati quasi come standard.
L'utilizzo di un sistema a griglia nei progetti è un modo per ottenere un livello di coerenza che sarebbe altrimenti estremamente difficile da padroneggiare e ritrarre nei progetti. Ancora una volta, uniformità e coerenza sono fondamentali per la creazione di un sito Web che gli utenti troveranno facile da navigare, leggere e comprendere. Una buona esperienza utente è creata coinvolgendo il tuo utente e creando un senso di familiarità con loro - e un sistema a griglia ti aiuta a farlo fornendo una solida base che ti consente di far crescere il tuo design da.
Una griglia di esempio, Gerstner, sul sito web dell'app Gridset. Sebbene il tuo sistema di rete sia qualcosa che alla fine sarà invisibile all'utente finale, puoi utilizzarlo per aiutarti a creare layout per i tuoi progetti. Ma, come tutte le regole, durante la progettazione (ea volte in fase di sviluppo) le regole sono fatte per essere infrante. Potrebbe non essere necessariamente necessario attenersi alla formazione della griglia, ma è necessario comprendere i sistemi di rete, prima di impegnarsi a infrangere le regole.
Sul Web abbiamo a disposizione molti framework per griglia CSS, oltre a molti strumenti disponibili per il rollover con i nostri sistemi di rete che possiamo creare noi stessi. Spetta a te decidere quale di questi sceglieresti di utilizzare durante la progettazione: ad esempio, un framework CSS potrebbe essere familiare a te come sviluppatore, quindi potresti provare a progettare anche con esso - ma esaminiamo perché progettare con un sistema a griglia è una buona pratica, e aiuta anche a pensare a quale sistema di rete perseguire ulteriormente.
Ci sono molti vantaggi nell'utilizzare i sistemi di grid: questo può iniziare quando si progetta il sito per la prima volta, ma può anche rivelarsi utile quando si passa alle fasi di sviluppo e di sviluppo, oltre che quando si gestiscono sia la progettazione del sito Web sia la creazione in futuro.
La cosa buona dei sistemi a griglia è che ti permettono di progettare in proporzioni, bilanciando tra tutti i diversi elementi che potresti avere nel tuo progetto. Un sistema a griglia dovrebbe essere sempre molto flessibile, in modo da poterlo quasi trasformare in base alle tue esigenze quando progetti le diverse parti del tuo sito web.
Una griglia sovrapposta, con guide in Photoshop. L'utilizzo di un sistema a griglia nel tuo progetto consente anche quel senso di uniformità e familiarità - mentre potrebbe funzionare per alcuni siti avere disegni di pagine molto diversi, per molti non sarà così e vorresti avere un'uniforme e una struttura più strutturata sentirsi al layout principale. Questo rende anche molto più facile quando si arriva a codificare il design, poiché ciò significa che è possibile selezionare gli elementi uniformi nel proprio progetto e applicare questo effetto modulare al codice e alla struttura CSS.
Per motivi di equilibrio, diamo un'occhiata ad alcuni ...
Innanzitutto, molte persone - in particolare coloro che sono nuovi a progettare o progettare con le griglie - potrebbero scoprire che i sistemi di rete sono piuttosto soffocanti e limitano la creatività. Sfortunatamente, a volte ciò può accadere e, perdonando il gioco di parole, a volte ti sembra che ti venga impedito di pensare fuori dagli schemi e invece di creare design clinici molto semplici. In questo tipo di istanze, ti incoraggerei a provare a fare un passo indietro dalla griglia, invece, giocare con gli elementi di una pagina finché non sembrano essere nel posto giusto, e poi passare a guardare la tua griglia si sovrappone al tuo progetto (ne parleremo un po 'di più in un secondo) e vediamo come puoi far funzionare le tue idee sulla struttura della griglia che hai. Se non è conforme a quella griglia, allora potrebbe essere il momento di iniziare a lavorare con un altro sistema o progetto di griglia.
Anche i sistemi a griglia sono davvero, davvero difficile. Non solo prendono molta forza di volontà per capovolgere le prime volte che li usi (anche se probabilmente avrai un momento "aha!" Non molto tempo dopo aver praticato e giocato con loro) ma possono anche a volte coinvolgere un sacco di matematica e calcoli. Non sono una persona che si comporta bene con la matematica, quindi quella parte delle cose che posso trovare personalmente è molto difficile. È anche molto difficile limitarti a capire il concetto di griglie e come possono aiutare il tuo design - ma si spera che inizierai a vedere l'effetto subito dopo averlo usato nei tuoi progetti, proprio come probabilmente avrai fatto con il tuo pratiche di sviluppo da qualche parte su tutta la linea. E mentre le griglie sono dannatamente faticose, ne valgono decisamente la pena per il risultato finale.
Ecco alcuni suggerimenti semplici e pratici per l'utilizzo dei sistemi di griglia nei tuoi progetti:
A questo punto dovresti avere una buona idea dei sistemi di rete, di cosa sono e di modi utili per iniziare a usarli nei tuoi progetti. Il prossimo articolo parlerà di come scegliere il tuo sistema di grid - e se scegli di crearne uno o di lavorare con un framework pre-creato.
Nel frattempo, ti farei qualche altra pianificazione. Abbastanza un piccolo incarico davvero (stai scendendo piuttosto alla leggera qui!) Ma abbozzati nei tuoi quaderni, giocando con griglie e layout. Pensa alla struttura, usando le colonne come idea per basare i tuoi contenuti sulla griglia. Ciò che crei potrebbe non essere utile la prossima mattina, ma ti aiuterà almeno a concentrarti sul pensare alle griglie e a vedere cosa puoi fare con loro in un formato usa e getta.
Accentsconagua