Share
Nell'articolo precedente, ti ho presentato ai sistemi di griglia. Con un po 'di fortuna, ormai, dovresti avere una buona comprensione di quello che sono e perché sono un'arma buona da avere nel tuo arsenale di design.
Oggi spiegherò sulla scelta di un sistema a griglia: dalla creazione del proprio, al lavoro con framework CSS predefiniti. Alla fine di questo articolo, avrai una buona idea del modo in cui ti piacerebbe percorrere il tuo cammino con i sistemi a griglia e, si spera, sentirti abbastanza sicuro di farlo.
Iniziamo restringendo le cose.
Abbiamo due scelte prima di noi: andiamo con un quadro già predisposto che qualcun altro ha già costruito, o creiamo il nostro sistema di rete e lavoriamo con quello? Davvero, la risposta è tutta alla tua preferenza personale.
Consiglio sempre che se stai iniziando a progettare per il Web, potrebbe essere più vantaggioso iniziare a progettare con framework prefabbricati. Questi progetti non devono essere permanenti e possono invece essere un modo per lavorare con i sistemi di griglia in un modo che faciliti la pressione e ti permetta di sperimentarli e capirli di più.
I framework predefiniti consentono inoltre di lavorare con la prototipazione di un progetto - in cui possiamo assemblare rapidamente diversi elementi e moduli in un design per vedere come si presentano quando sono effettivamente in un browser (nel modo più realistico possibile ottenere, essere su una forma digitale come il web).
Tuttavia, penso sempre che sia meglio creare la tua griglia, se mai lo puoi fare. In questo modo, non solo avrai più il controllo del design e della struttura della tua griglia, ma potrai anche avere molto più controllo sull'output della tua griglia e su come si evolverà nella fase di sviluppo del design del tuo sito web . E non so voi (anche se immagino che molti sviluppatori si sentiranno allo stesso modo) ma mi piace avere tutto il controllo che posso avere sul mio codice e su come è presentato; creare le mie griglie mi consente di fare proprio questo.
I framework pre-fatti sono stati trovati in abbondanza nel mondo del web design - quello che apparentemente era iniziato con uno o due sistemi di grid (come 960.gs) ci ha presto fatto saltare in aria decine di centinaia, se non centinaia, di sistemi di griding disponibili per noi uso.
I framework Grid sono utili in quanto ci consentono di ottenere facilmente un prototipo o un sito Web di base sul posto quando stiamo sviluppando. Tuttavia, come possiamo cambiarlo così sono anche utili quando stiamo progettando?
I framework predefiniti sono spesso dotati di una sorta di PNG o PSD da utilizzare durante la progettazione e, in caso contrario, è necessario provare a replicare questa griglia nel progetto. Basta creare un nuovo livello e posizionare questa griglia sovrapposta. Quindi, puoi iniziare a progettare sulla griglia che hai.
I framework di grid popolari includono
Proprio come quando lavoro con il mio codice, mi piace avere il controllo su ciò che sto progettando. Se lavoro con un framework di griglia premade, allora in un certo modo sto dedicando il mio lavoro alle preferenze di qualcun altro - mentre se progetto le mie griglie, significa che ho tutto il controllo su come funziona la mia griglia, come si relaziona a il mio design e so che avrò molto più controllo sull'output finale del codice, come lo avrò progettato.
Anche se può sembrare abbastanza scoraggiante, a patto che tu sia armato di alcune conoscenze, creatività e idee di un layout per il tuo sito web, allora la creazione delle tue griglie non deve essere così spaventosa come sembra.
Creare le tue griglie è difficile quando non lo hai fatto prima - ma ci sono così tanti strumenti là fuori per aiutarti. Fino a quando non sono usciti alcuni di questi strumenti, non avevo nemmeno provato a creare le mie stesse griglie e sono stato un grande fan dei framework - ma vedere i vantaggi di essere in grado di creare le mie griglie per ogni progetto che ho fatto mi ha fatto sentire molto più creativo. Sento di poter trovare idee di design più innovative e uniche.
Per prima cosa, quando si progettano le proprie griglie, si ritorna continuamente al tuo album da disegno, facendo alcuni schizzi e idee di layout. Anche se torni ad alcuni dei tuoi schizzi iniziali che hai fatto all'inizio del progetto, immagina come questi schizzi possono essere inseriti in una griglia può essere utile e ti dà un vantaggio.
Creare le proprie griglie è anche una questione di teoria - e troppo da includere qui, perché potrebbe essere una massiccia sessione di articoli a parte! Ma prova prima a padroneggiare le basi. Guarda i tuoi siti web preferiti online e vedi se puoi scegliere un modello modulare o simile a una griglia al loro design. Vedi se riesci a vedere i disegni che ammiri e vedere come si allineano i diversi elementi, come la griglia potrebbe adattarsi quando il disegno viene ridimensionato o ridimensionato in modo reattivo - tutti quei tipi di piccole cose ti aiuteranno a capire meglio come usare e creare le griglie.
Come ho detto prima ci sono molti, molti strumenti a tua disposizione per creare le tue griglie da usare nei tuoi progetti web. Ho scelto solo tre soluzioni popolari, che mi hanno aiutato di più quando rotolare con le mie griglie, ma tieni presente che ci sono molte altre ricerche su Google.
Gridset è uno strumento meraviglioso, creato dalla bella gente del Mark Boulton Design Studio nel South Wales.
Nelle loro stesse parole, Gridset è semplicemente uno "strumento per creare griglie" - e lo rendono così facile da fare. Gridset è perfetto per tutte le fasi di creazione e utilizzo delle proprie griglie: progettazione, prototipazione e sviluppo in fase di produzione.
Per creare le tue griglie con Gridset, devi semplicemente creare una griglia e quindi creare diverse griglie per ciascuno dei principali punti di interruzione che pensi di utilizzare nella progettazione. È possibile modificare la larghezza della colonna, la larghezza della grondaia e persino modificare il rapporto tra le colonne, oltre a molto altro ancora.
Gridset ti fornisce una griglia overlay PNG che puoi utilizzare durante la progettazione, puoi aggiungere classi al tuo HTML per prototipare rapidamente e puoi utilizzare le misurazioni che Gridset calcola nel tuo markup (in modo da non dover utilizzare le classi Gridset fornite ).
Con Gridset, puoi anche utilizzare le loro funzioni integrate di Sass - rendendo ancora più semplice l'integrazione della tua griglia nel flusso di lavoro di sviluppo.
Un'altra grande cosa di Gridset è la ricchezza di informazioni che forniscono sulle griglie. Ho scoperto che ho imparato tanto solo attraverso il blog di Gridset e decifrato gli esemplari di Gridset che hanno sulla loro homepage.
Gridpak è uno dei primi strumenti di creazione di griglie reattivi interattivi che ho trovato online, creato da Erskine Design a Nottingham.
Gridpak funziona creando una serie di griglie (definendo le dimensioni di una colonna, il riempimento delle colonne e le larghezze di gronda) per i punti di interruzione personalizzati.
Dopo aver creato tutte le tue griglie in Gridpak, riceverai un download con tutti i file necessari per integrare le tue griglie nel flusso di lavoro del tuo sito web: un PNG da utilizzare come griglia durante la progettazione, diversi i file che puoi utilizzare per la griglia Gridpak CSS (CSS "vaniglia" per le tue classi standard, oltre a una versione LESS e Sass) e anche un file di sovrapposizione JavaScript che puoi utilizzare per sovrapporre la tua griglia sui tuoi siti web durante lo sviluppo.
Gridpak mi sembra davvero utile per la prototipazione più di ogni altra cosa - è molto veloce ottenere alcune rappresentazioni visive della tua griglia (anche in particolari punti di risposta reattivi) e integrarle in un prototipo veloce. Da lì, possiamo dedicare più tempo a perfezionare le classi CSS fornite nel nostro markup, assicurandoci che la qualità del nostro codice (che dovrebbe essere sempre importante per uno sviluppatore!) Sia di prim'ordine.
Se non vuoi tutti i campanelli e fischietti e invece sei solo dopo una rapida calcolatrice che ti aiuterà a creare delle griglie reattive, allora mi piacerebbe ricevere un viaggio alle griglie dei liquidi di Harry Roberts.
Mentre non può più ospitare questo sul proprio sito Web (a causa dell'impostazione che ha ora), Harry ha gentilmente fatto apparire il codice originale su Github. Potrebbe essere necessario eseguire un piccolo lavoro manuale per farlo funzionare, ma ne vale la pena se si desidera un sistema semplice e veloce per configurare la struttura della griglia e il design.
Ora sai tutto sulle griglie e su alcuni degli strumenti di cui hai bisogno quando crei delle griglie - Voglio che ti sfidi a crearne di tuoi! Usando uno degli strumenti sopra menzionati - o in effetti usando il tuo, se ne hai già sviluppato uno. Prova a creare alcuni dei tuoi sistemi di griglia e inizia a integrarli con i tuoi progetti. Vediamo i risultati nei commenti!
Accentsconagua