Sviluppo del sito web

Qualsiasi progettista di layout che deve affrontare un'altra attività di layout layout reattivo, sono necessarie le griglie. Nella maggior parte dei casi, viene preso il buon vecchio bootstrap e i div con classi come col-xs-6 col-sm-4 col-md-3 iniziano ad apparire in html-ke. E tutto sembra essere buono e veloce, ma in questo approccio sorgono spesso molte insidie. In questo articolo esamineremo queste insidie ​​e getteremo pomodori marci, consideriamo il mio mestiere per reti senza problemi.

I problemi

Maglie personalizzate

Quindi, il nostro progettista di layout ha pochissimo tempo, il layout è in fiamme, tutto deve essere fatto ieri. Pertanto, prende come base il popolare framework css bootstrap e inizia il suo lavoro. E poi, nel bel mezzo del lavoro, si imbatte improvvisamente in un blocco di striscioni "5 di fila". Chiunque abbia lavorato con bootstrap sa che la sua griglia predefinita è 12x, quindi 5 colonne di fila con una griglia bootstrap standard, beh, non puoi farlo. Sì, certo, puoi assemblare una griglia arbitraria in bootstrap, ma questo è tempo da perdere, scaricare dipendenze, raccogliere meno-ki (e noi, ad esempio, scriviamo in sass).

Posso includere qualche libreria per griglie personalizzate? In generale è buona via d'uscita, l'unico inconveniente di questo approccio è che quasi tutti sono progettati per una scrittura lunga e noiosa @media (min-width:) (), o per generare il proprio set di classi, con un mucchio di col15-xs-offset -3 che probabilmente non sono necessari, che saranno inclusi nel css finale.

Pertanto, con un'alta probabilità, il progettista del layout scriverà semplicemente tutti gli stili a mano (in linea di principio, non c'è molto da scrivere lì).

Molto spesso la griglia bootstrap standard manca di punti di interruzione aggiuntivi, ad esempio ci sono xs, sm, md, lg - tutti fino a 1200px di larghezza. Ma per quanto riguarda i monitor di grandi dimensioni? Qualsiasi punto di interruzione xl a 1600px richiede solo set standard... Ma di nuovo, non esiste, e sorgono le stesse soluzioni di in paragrafo precedente... Ma dopo tutto punti di controllo ci può essere molto - 320, 360, 640, 768, 992, 1200, 1600, 1900 ..

Ridondanza e verbosità

E poi ci avviciniamo dolcemente prossimo problema... Immagina di dover scrivere le tue dimensioni di blocco per ogni griglia, quindi ottieni qualcosa del genere:

è troppo? Aggiungi il possibile pull / push e visibile / nascosto qui e quindi puoi iniziare a impazzire in sicurezza. Ma tutte queste classi sono scritte in css, immagina quante classi devi scrivere in css per tutte le combinazioni di una griglia di 60 volte!

Separare gli stili dal markup

Qualsiasi tipografo sa che gli stili in linea non sono validi. Allora perché scriviamo lo stile nelle nostre classi di markup? col-xs-6, visibile-sm e Dio non voglia text-right - questi sono tutti stili, e se hai bisogno di apportare modifiche a un layout già allungato, ci sarà sicuramente un problema che il progettista del layout dovrà chiedere al backend per cambiare col-sm- 6 su col-sm-4.

Sovrapposizione di stili non necessari

Spesso, il framework css è connesso solo per motivi di griglie e un paio di piccole funzioni, che successivamente si traducono in un eccessivo reset degli stili e una doppia dimensione del css finale. Ad esempio, l'intero bootstrap.min.css è connesso, quindi le ombre e gli angoli arrotondati di .btn, .form-control e simili vengono rimossi allegramente, inclusi: hover,: focus,: first-child. Di conseguenza, invece di aiutare, il framework si mette in mezzo. Per non parlare delle funzionalità spesso non necessarie come il.glyphicon. Naturalmente, di nuovo, puoi raccogliere bootstrap da ciò di cui hai bisogno, ma questa è di nuovo il momento.

Standard stranieri e stile di codice

Diciamo che un progettista di layout ha studiato BEM e ha iniziato a usarlo. Ma la necessità di utilizzare il bootstrap impone le sue eccezioni: in esso tutte le classi sono scritte con un trattino, non seguendo i principi di BEM. E poi sorge il problema della scelta: sopportare il disordine nei nomi delle classi (btn-block disabilitato componente__btn componente__btn_disabled), o comunque buttare via il bootstrap.

Metodi deprecati

Come sai, le griglie in bootstrap 3 sono basate su float. Ciò che spesso causa problemi, uno dei più comuni è la diversa altezza dei blocchi, per cui la bella maglia "si spezza". Smetti di usare i float per altri scopi, tutti i browser che non sanno come flexbox sono quasi estinti!

Susy! è una via d'uscita?

Alla ricerca di una soluzione a tutti i problemi di cui sopra, sono nel meraviglioso framework della griglia di Susy! , nel complesso molto buono. Ma mi mancava la velocità, perché susy! suggerito di descrivere le colonne per ogni punto di interruzione separatamente:

.col (@media (min-width: 768px) (@include gallery (4 di 12);) @media (min-width: 1200px) (@include gallery (3 di 12);))

Cioè, Susy! presuppone che farai tu stesso i punti di interruzione. Inoltre, Susy! non scrive display: flex for, lines for you, devi ricordarti di scriverle tu. I rientri tra le colonne al suo interno sono impostati solo relativi (non funzionerà per essere fissati in pixel). Inoltre, ha recentemente imparato il flex e prima ancora ha costruito griglie con float e: nth-child(). In generale, Susy! questo è buono, ma vorrei la velocità e la facilità di descrivere le griglie per tutti i punti di interruzione, come avveniva con il bootstrap.

Anche la ricerca di altri sistemi di griglia non ha dato molti risultati: tutti o seguono il percorso susy!, dimenticandosi dei punti di interruzione, o seguono il percorso bootstrap, fornendo un insieme di classi generate per rullare le mesh in html.

Costruzione di biciclette

Quindi, è stato deciso di scrivere qualcosa di loro, come risultato è nato il fast-grid. È anche costruito con sass come Susy. Quali sono i principali vantaggi rispetto ad altre soluzioni, in particolare con susy!? Prima di tutto, velocità dovuta a meno codice, prendiamo un esempio di bootstrap standard:

Con la griglia veloce, una griglia del genere è molto facile da descrivere:

@import "~ griglia veloce / griglia veloce"; .row (@include grid-row ();) .col (@include grid-col (6 4 3 2);)

Esaminiamo ora i nostri difetti e vediamo come la griglia veloce risolve tutti questi problemi.

Maglie personalizzate

@import "~ griglia veloce / griglia veloce"; .cols ($ grid: (gap: 5px); @include grid-row ($ grid); & __ item (@include grid-col (12 6 null (1 di 5), $ grid);))

La necessità di un proprio insieme di punti di interruzione

@import "~ griglia veloce / griglia veloce"; .cols ($ griglia: (punti di interruzione: (xxs: 0px, xs: 360 px, sm: 640 px, md: 960 px, lg: 1200 px, xl: 1600 px), colonne: 60); @include grid-row ($ griglia); & __ elemento (@include grid-col ((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $ grid);))

Ridondanza e verbosità / Separazione degli stili dal markup

fast-grid è un framework a griglia per l'uso in css, non in html basato su set di classi generati. Questo separa il markup dagli stili, il che è vantaggioso per il supporto futuro. Elimina anche la necessità di generare una serie di classi di supporto (.col-xs-push-4, ecc.) che sono per lo più inutilizzate.

Sovrapposizione di stili non necessari

Poiché fast-grid è un mucchio di mixin, non genera alcuna regola in css da solo. Pertanto, qui non ti imbatterai nel fatto che il framework sta modellando gli elementi come non ti servono. Comunque, queste sono solo griglie e nient'altro.

Standard stranieri e stile di codice

fast-grid sono mixin che devi usare internamente tuo classi con i nomi che preferisci. Ti piace BEM? Nessun problema!

Metodi deprecati

L'impostazione predefinita è flexbox, che apre molte possibilità e risolve i problemi dei float classici. Ad esempio, puoi facilmente modificare l'ordine delle colonne.

Nell'esempio seguente, mostriamo la barra laterale sotto il contenuto principale per versione mobile e rendilo il primo blocco su schermi di grandi dimensioni.

Sarebbe possibile ottenere questo, ovviamente, usando pull / push for float, ma questo è molto facile.

Conclusione

In generale, il compito che mi era stato assegnato è stato completato: ora le griglie non mi causano più problemi e il layout è semplice e veloce. Puoi leggere di più sulle funzionalità fast-grid nel repository e vedere esempi:

Stai ancora usando il bootstrap? Allora andiamo da te!

tag:

• css
• sass
• griglia

Aggiungi i tag

Continuando l'argomento layout adattivo... Oggi sarà su una delle tre balene di layout adattivo - layout basato su griglia(disposizione a griglia flessibile). Gli altri due sono immagini flessibili.

A metà del XX secolo grafici reso popolare il concetto tipografico, o modulare, a rete- un sistema razionale di colonne e righe in cui collocare moduli con contenuto. Sembrava fresco e molto armonioso.

ma disegno grafico e il web design è, come si dice a Odessa, due grandi differenze. Momento chiave ecco la dimensione della pagina Nella tipografia, è fisso e una pagina Web può allungarsi e rimpicciolirsi a seconda di cosa viene visualizzata.

Per applicare una griglia modulare a una pagina web usa formula semplice proporzionalità:

obiettivo / contesto = risultato

Il modo più semplice per capire questa formula è esempio illustrativo... Supponiamo di avere un layout del sito disegnato su due colonne: la parte del contenuto e la barra laterale:

Lo facciamo "gomma". Ma ecco il problema: come impostare la larghezza di entrambi i blocchi? Dopotutto, se lo scrivi in ​​pixel, non saranno più di gomma. Ciò significa che è necessario utilizzare le percentuali, non i pixel. Ma scusami, che significati dovrei scrivere? Tuttavia, dopotutto, devi iniziare da qualcosa.

Ovviamente puoi capirlo a occhio: il contenuto occupa circa il 70% della larghezza totale della pagina e la barra laterale il 30%. Ma il corretto progettista del layout non valuta mai nulla a occhio. Abbiamo bisogno della dimensione esatta.

A questo serve la formula della proporzionalità. Prendiamo semplicemente la larghezza dei blocchi interni e la dividiamo per la larghezza totale della pagina. Qui l'intera pagina è contesto, e ciascuna delle unità interne, rispettivamente, obbiettivo dalla formula sopra.

660 / 960 = 0,6875
300 / 960 = 0,3125

Resta solo da tradurre questi dati in percentuali. Senza preoccuparti troppo, sposta semplicemente la virgola di due caratteri a destra. Noi abbiamo:

68,75%
31,25%

E 'così semplice. Tuttavia, complichiamo il compito. Supponiamo di avere la parte del contenuto divisa in altre due parti disuguali. Ad esempio, a sinistra c'è una colonna stretta con la data dell'articolo e pulsanti social, disposti verticalmente, e la colonna di destra è larga, e abbiamo il testo dell'articolo in essa.

Sappiamo dal layout del progetto che la larghezza di questa colonna stretta è 120 pixel e quella larga è 520. Come si traducono questi numeri in%? Ancora una volta, applica la formula delle proporzioni. Ma questa volta non usiamo l'intera larghezza della pagina come contesto, ma la larghezza del blocco che contiene queste due colonne, ovvero la larghezza della parte del contenuto, che abbiamo è di 660 pixel. Dividiamo:

120 / 660 = 0,1818
520 / 660 = 0,7878

In percentuale si ottiene, rispettivamente, 18,18% e 78,78%

A proposito, in file moderni Per gli stili che utilizzano layout reattivi, i correttori tipografici aggiungono calcoli simili come commenti. Per una migliore chiarezza. Ecco come appare di solito:

Contenuto (
larghezza: 68,75%; / * 660 px / 960 px * /
}

Spero che questo non sia stato un problema. Andiamo oltre!

Layout basato su griglia

Gli esempi sopra, ovviamente, non sono ancora una mesh. Bene, qual è la griglia a due colonne? Una vera griglia modulare è progettata per aiutare sia i progettisti che i progettisti di layout a creare siti Web complessi con molte colonne e blocchi individuali.

Pertanto, c'era una massa servizi convenienti e gli strumenti che implementano questo metodo sono facili e semplici. Ad esempio 960.gs. Qui puoi non solo studiare visivamente il principio del layout basato su una griglia modulare, ma anche scaricare modelli e utilizzarli.

In effetti, tali servizi sono ormai una dozzina! Sono anche chiamati framework. Scegli quale ti piace di più. Ecco un'ottima selezione di 30 CSS Framework per Responsive Web Design.

A cosa servono queste griglie modulari?

Prima di tutto, sono necessarie griglie modulari per organizzare visivamente i contenuti su una pagina del sito web. Non è solo bello da un punto di vista estetico e gradevole alla vista dell'utente, ma anche conveniente per gli stessi sviluppatori. Soprattutto se il sito è davvero complesso nella struttura e nei contenuti.

Inoltre, tali griglie modulari sono molto più facili da rendere adattive rispetto a blocchi sparsi casualmente di diverse dimensioni.

E, naturalmente, la velocità di sviluppo di tali siti è molto più alta. Non hai bisogno di scherzare e reinventare la ruota da zero. È sufficiente scegliere un framework adatto e costruire un sito Web utilizzandolo.

Spero che ora tu sappia cos'è un layout reattivo basato sulla griglia.

La prossima volta parliamo di immagini flessibili in layout adattivo... Un argomento molto importante e controverso. Vi consiglio di studiarlo bene anche voi, per non fare pasticci. Rimani in contatto! Meglio ancora, iscriviti alla newsletter del Web Council.

In questa lezione, ci prepareremo per il layout del sito utilizzando Psd layout utilizzando solo griglia (sistema a griglia) dal quadro Bootstrap 4... Imparando questo metodo di layout, ti risparmi la fatica di possibili problemi con la reattività del sito, è particolarmente utile per i principianti.

Adattabilità del sito web durante la codifica di Griglia di bootstrap fornire flexbox supportato da tutti i principali browser e anche Internet Explorer, iniziando con IE9 +... Per più prime versioni, come IE 9, includiamo script che aiutano a visualizzare correttamente il nostro layout.

src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js">

E la cosa più importante - Psd il layout dovrebbe inizialmente essere disegnato tenendo conto dell'ulteriore Layout bootstrap... E quindi, non c'è altro motivo per non comporre secondo la griglia bootstrap, sia nei tuoi progetti che per ordinare. Cercherò di dare meno teoria, niente acqua e più pratica.

Preparazione per il layout

Apri il layout in Photoshop e assicurati che abbia un allineamento di 12 colonne con le guide e che tutti gli elementi di design siano allineati con quelle guide. La distanza tra le guide esterne è solitamente di 1170 pixel.

Scarica sul sito https://getbootstrap.com/ compilato CSS e Js per una facile integrazione nel tuo progetto.

Copia dalla sezione Introduzione/Modello di partenza- modello di pagina iniziale e inserirlo nell'indice HTML-file del tuo progetto. Abbiamo creato uno spazio vuoto per il futuro HTML documento.

Scarica bootstrap.min.css o usi un link ad esso?

Si ritiene che il file bootstrap.min.css si caricherà più velocemente, poiché si trova su più server e non su uno dei tuoi server. Ciò significa che il sito si aprirà più velocemente. Se tuttavia decidi di scaricare questo file per te stesso, specifica il percorso corretto della cartella con Bootstrap File. Crea vuoto CSS il file dove scriverai i tuoi stili è comunque necessario.

Importante! Tuo CSS il file nel file indice deve essere linkato inferiore a bootstrap.min.css.

Colleghiamo i caratteri. I caratteri e le icone che il designer utilizza nel layout possono essere visualizzati nel programma Photoshop o in un'estensione del browser Chrome - WhatFont.

rel = "foglio di stile" type = "testo / css">

Perché abbiamo bisogno di due? CSS file?

CSS file bootstrap.min.cssÈ una biblioteca in cui non devi nemmeno andare. Lavoriamo solo con un file - main.css, devi solo assicurarti che i nomi delle nuove classi per il tuo CSS il file accidentalmente non corrispondeva a quello della "libreria".

nel file bootstrap.min.css già predisposto per la griglia attiva flexbox-ah e le query multimediali sono enunciate, dobbiamo solo scrivere le classi appropriate in blocchi richiesti sul HTML pagina. I nomi delle classi possono essere trovati nella pagina del framework sotto Griglia... Designer di layout esperti per Layout bootstrap collegare i plugin ( Completamento automatico Bootstrap 4, frammenti di Bootstrap 4) all'editor di codice Testo sublime.

Ci lasciamo Psd disposizione dei blocchi

Vediamo che il sito è composto da 8 blocchi: header (intestazione) con navigazione nel menu (navigazione), 6 sezioni (sezione) e seminterrato (piè di pagina).

Nelle sezioni (sezione: #servizi, #portafoglio) vengono visualizzate le colonne, che verranno impaginate in base al componente principale Bootstrap - una griglia.

Lo facciamo prima noi HTML markup della struttura principale, i dettagli verranno aggiunti nel corso del layout.

Nella parte successiva, iniziamo il layout, ma non l'intero layout, ma i suoi singoli blocchi. Poiché lo scopo di queste lezioni è mostrare ai principianti come combinare con successo il solito layout del layout con layout sulla griglia Bootstrap.

Una griglia modulare è un modello speciale utilizzato per creare il design di un sito web. Si tratta infatti di un sistema per presentare al visitatore informazioni visive basato su blocchi separati, detti moduli. Un sito web sviluppato utilizzando un tale modello è molto più facile da leggere e navigare.

Come viene applicata la rete

La griglia modulare viene utilizzata nello sviluppo di progetti per libri, biglietti da visita, marchi, loghi, ecc. È obbligatorio utilizzarla durante la creazione di siti. Una griglia correttamente realizzata compone armoniosamente l'ambiente per tutti gli elementi della risorsa: grafica e testo. Rende molto più facile posizionarli tutti sulla pagina e creare confini chiari tra di loro. Disponendo gli elementi in un certo modo, puoi rendere ognuno di essi evidente e allo stesso tempo legare insieme tutte le informazioni sul sito stesso.

Tipi di griglie modulari

La griglia modulare più comune nel design della pagina sono le tre colonne delle celle di base. In questo caso, l'intestazione e il piè di pagina hanno una larghezza uguale alla loro dimensione. Questo versione standard solitamente utilizzato dai dilettanti durante la creazione di siti. A volte la larghezza di una cella aumenta a causa della larghezza dell'altra.

La creazione della seconda versione di griglie modulari - non standard - è possibile solo per le persone che sono professionalmente impegnate nel web design. In questo caso, solo la larghezza delle colonne e la distanza tra elementi separati... Griglia modulare nel design diversi tipi le risorse di notizie e le riviste online sono generalmente sviluppate come segue:

1. Vengono creati un'intestazione e un piè di pagina. Il nome del sito dovrebbe trovarsi qui, Menu di navigazione, vari tipi di materiali video.
2. La pagina è divisa in tre colonne. Inoltre, due di loro hanno le stesse dimensioni. La terza colonna è divisa in due da una linea verticale. Si ottengono così quattro sezioni (news, galleria fotografica, spazio pubblicitario, ultime novità informative sul sito).

La griglia modulare per negozi online di diverse specializzazioni è creata in modo leggermente diverso. In questo caso, è molto importante fornire una navigazione facile per i visitatori. Allo stesso tempo, gli elementi sono raggruppati in modo standard e uniforme. Per ciascuno degli oggetti nella griglia, a Informazioni importanti caratterizzandolo.

Righello nell'editor di Photoshop

I siti Web vengono creati utilizzando raster o vettoriali e le mesh al loro interno sono molto convenienti da creare. Vediamo come si fa in editore popolare Photoshop. È molto semplice creare una griglia modulare in Photoshop.

Affinché i righelli appaiano lungo il perimetro della finestra dell'immagine di lavoro, vai alla voce del menu principale "Visualizza" e fai clic sulla riga "Righelli". In questo editor puoi usare di più diversi elementi- con divisioni in centimetri, millimetri, pollici o pixel. Per effettuare le impostazioni necessarie, vai alla voce del menu principale "Modifica". Quindi seleziona la riga "Preferenze" - "Unità e righelli". Successivamente, verrà evidenziata una finestra in cui è possibile modificare l'aspetto del righello. Nel menu a discesa in alto, seleziona centimetri, millimetri, pixel, ecc.

Tuttavia, di solito quando lavorano nell'editor "Photoshop" usano un metodo leggermente diverso e più semplice. Per modificare le unità di misura, è sufficiente fare clic sul righello stesso nella finestra dell'immagine clic destro i topi. Dopodiché, nel menu che appare, puoi fare azione richiesta... Di solito, quando si crea un sito Web, viene utilizzata una griglia in pixel.

Griglia di Photoshop

La griglia molto modulare del programma Photoshop diventerà visibile dopo aver selezionato la voce del menu principale "Visualizza" - "Mostra" - "Griglia". La spaziatura tra le linee della griglia è configurabile. Per fare ciò, eseguire il comando "Modifica" - "Impostazioni" - "Guide, griglia e sezioni" (Guide, griglia, sezioni). Qui puoi cambiare non solo il passaggio tra le linee, ma anche il loro colore. Usando questa griglia, sarà abbastanza facile posizionare rapidamente e con precisione tutti gli oggetti del futuro sito sul campo di lavoro.

Lavorare con il cursore

La griglia modulare del sito è molto facile da creare in questo modo. Il cursore si attacca alle linee durante il lavoro. Questo può essere utile se devi creare blocchi di dimensioni precise e definite. Se, per qualche motivo, questa funzione risulta non necessaria, puoi disabilitarla. Per impostazione predefinita, l'origine della griglia in Photoshop si trova nell'angolo in alto a sinistra della finestra. Se lo desideri, puoi spostarlo in qualsiasi altro punto della tela. Per fare ciò, posiziona il cursore sul quadrato dell'origine e trascinalo semplicemente tenendo premuto il pulsante del mouse. Per riportare il punto di partenza al suo posto, fai doppio clic sullo stesso quadrato nell'angolo.

Tra le altre cose, ci sono tutti i tipi di plugin per l'editor "Photoshop", che ti consentono di rendere ancora più comoda la creazione di un sito utilizzando una griglia modulare. Scaricali in linea. Usando questi plugin, puoi creare mesh con parametri specificati.

Griglia in CorelDraw

Vediamo ora come realizzare una griglia modulare in editore vettoriale Corel Draw. Qui è creato più o meno allo stesso modo di Photoshop. La sua icona si trova su pannello superiore(occhio nella griglia). Dopo aver cliccato su di esso, puoi fare tutto impostazioni richieste... È possibile selezionare la distanza tra le linee, modificare l'unità di misura, ecc. Delineare l'area di lavoro nella finestra dell'immagine in CorelDraw e utilizzando le guide. Possono essere resi visibili o invisibili se necessario.

Una griglia modulare nella progettazione di siti Web è un elemento fondamentale, il cui sviluppo dovrebbe essere affrontato con la massima responsabilità. Dopotutto, la comodità dei suoi visitatori, e quindi il tempo che trascorrono sulle sue pagine, dipende da come sarà strutturata correttamente la risorsa.

Dall'autore: purtroppo molti web designer trendy ed efficaci spesso dimenticano che il risultato del loro lavoro dovrebbe essere un sito digeribile, e non bella schermata, adatto solo per un portafoglio. In questo articolo, ho formulato i requisiti che devono essere considerati nel processo di progettazione e stile di un'interfaccia web.

La griglia modulare nel web design è una soluzione fondamentale che non solo migliorerà l'usabilità di un sito, ma renderà anche la vita molto più semplice per gli sviluppatori.

Cos'è una griglia modulare?

Te lo spiego usando un esempio che ti è familiare. Apri un qualsiasi libro di carta. Vedi il testo che copre l'intera larghezza della pagina, esclusi i margini? Quindi, questo è un tipico layout a una colonna. Ora dai un'occhiata a una rivista o un giornale. In una rivista, le informazioni sono tradizionalmente divise in due colonne e in un giornale in tre o quattro o anche di più.

In generale, il web design ha ereditato molti "chip" diversi dal design di stampa. Questi sono i principi per lavorare con i caratteri, le regole di composizione e i moduli. Siti di biglietti da visita e siti di presentazione possono benissimo essere contenuti con una struttura a una colonna, home page - due colonne, più complesse progetti di informazione dovrebbe, di conseguenza, avere un layout più complesso e ben congegnato.

Una griglia modulare nel web design è un layout unificato di tutti gli elementi e i blocchi di un sito. Questo wireframe attraversa tutte le pagine Web e aiuta a creare un ordine visivo sul sito.

Le griglie possono essere semplici o complesse, fisse o dinamiche, ma questo non è così importante. Se nel processo di creazione del tuo web design hai impostato una certa struttura modulare, per favore, attieniti ad essa dal primo al ultima pagina luogo.

Cosa fare se durante il disegno pagine interne Hai blocchi o elementi che non si adattano al tuo wireframe? Non voglio farti arrabbiare, ma è un segno che la tua mesh è cattiva e non passi abbastanza tempo a progettarla.

Che tipo di reti ci sono?

Diamo un'occhiata ai tipi di griglie per il web design.

1. Griglia a blocchi: marcatura approssimativa dell'area in blocchi.

2. Colonnare - con colonne nella sua struttura.

3. Modulare - costituito da linee rette che si intersecano che formano moduli.

4. Gerarchico: una griglia con posizionamento intuitivo dei blocchi, senza alcuna struttura logica.

A differenza del design di stampa, una griglia nel web design può essere non solo fissa ma anche dinamica. Ad esempio, puoi rendere elastiche una o più colonne del layout, impostandone la larghezza in percentuale, e fissare la dimensione del resto delle colonne.

Tendenze moderne e approcci nello sviluppo web

Impara da zero l'algoritmo di crescita rapida nella costruzione del sito

Il 960 Grid System for Web Design (http://960.gs) segue il concetto di layout "statico", e per creare un "fluido" puoi guardare la griglia Bootstrap (http://getbootstrap.com/css /#griglia). Il framework modulare 960 GS divide la pagina web in 12, 16 e 24 colonne.

Quando si progetta una struttura "in gomma", non dimenticare larghezza massima schermo. Di solito è limitato a 1280 pixel. Se non consideri valore massimo in larghezza, poi su grandi monitor il contenuto del sito sarà molto teso, il che influenzerà negativamente la sua percezione.

Il più popolare e facile da implementare è una griglia modulare a due colonne, le cui proporzioni sono calcolate tenendo conto delle seguenti ipotesi:

la risoluzione dello schermo più comune è 1024x768;

la larghezza del layout non deve superare i 770 pixel, in modo che la barra di scorrimento non appaia in basso su uno schermo con una risoluzione di 800x600;

colonna che esegue funzioni modulo informativo, deve essere più largo della colonna definita come modulo di navigazione (menu).

Sulla base di questo, la proporzione è simile a questa: 200 pixel. + 550 px o 150 pixel. + 620 pixel

V colonna più grande dovrebbe posizionare il menu di navigazione, in quello più piccolo - il catalogo o il contenuto.

Considera come esempio la griglia di web design di un sito famoso. Tutti i siti della BBC utilizzano una struttura universale con colonne di 61 x 16 pixel per abbinare foto e video standard del marchio.

Come puoi vedere nell'immagine, la griglia della BBC è abbastanza flessibile e ti consente di inserire qualsiasi tipo di informazione: dalle analisi serie alle notizie di intrattenimento. Questa griglia modulare è biglietto da visita società, come è standard per tutti i suoi siti. A proposito, questa cosa è una componente della linea guida Global Experience Language, se qualcuno è interessato.

Gli sviluppatori della BBC sono felici di fornire consigli su come progettare griglie modulari nel web design. Certo, non hanno inventato la bicicletta per noi, ma penso che sarà interessante per i neofiti della carriera di web designer.

1. Il processo inizia con la determinazione delle posizioni per i blocchi della gerarchia superiore. Ci immaginiamo come tali Sherlock Holmes - maestri della deduzione e osserviamo la regola "Dal generale al particolare, dal più al meno".

2. Scendi al livello successivo e posiziona i blocchi che seguono nella gerarchia. Allo stesso tempo, ci basiamo sulle priorità del contenuto, per determinare quali vengono analizzate le aspettative degli utenti e le nostre vantaggi competitivi.

3. Quindi, prima elaboriamo la composizione generale e gli elementi più grandi. Quindi - chiariamo, perfezioniamo, dettagliamo. Per fare ciò, dobbiamo disegnare una serie di schizzi approssimativi. Solo dopo uno studio dettagliato dell'idea del sito con l'aiuto di carta e matita ci sediamo finalmente al computer.

4. Distribuiamo le informazioni in blocchi, raggruppiamo i contenuti. Ad esempio, sul sito Web della BBC, quasi tutti i gruppi di contenuti hanno un nome che si riflette nelle categorie nel menu di navigazione. I titoli dei blocchi fungono da ancore visive per una rapida occhiata alla pagina web, oltre che aiutano a capire a quale categoria di contenuto appartiene una particolare notizia.

Questo approccio è ampiamente utilizzato sia dai principianti che dai web designer. Ti consente non solo di risparmiare molto tempo, ma anche di trovare soluzioni originali. compiti difficili.

Quindi, nel nostro corso di oggi giovane combattente web designer, abbiamo esaminato il concetto di griglia modulare e le caratteristiche della sua applicazione. In realtà, questa è una sorta di astrazione visiva, con l'aiuto della quale posizioniamo tutti gli elementi e i blocchi di contenuto a una distanza accettabile l'uno dall'altro e a un livello di facile utilizzo. È possibile visualizzare la griglia modulare utilizzando un livello separato con l'immagine delle guide.

Infine, voglio ricordarti che il web design riguarda la creazione non solo bella, ma anche pratica, sistema conveniente... Per questo ogni web designer che si rispetti dovrebbe essere in grado di progettare un sistema di navigazione modulare, strutturare le informazioni e scomponerle in blocchi. Grazie a ciò, l'utente sarà lieto di "navigare" nel vostro sito e di percepirne facilmente il contenuto.

Iscriviti agli aggiornamenti del nostro blog e condividi informazione preziosa con amici. Tutte le griglie modulari di successo ea presto!

Tendenze e approcci moderni nello sviluppo web

Impara da zero l'algoritmo di crescita rapida nella costruzione del sito