Oggi parleremo di ciò che un designer alle prime armi dovrebbe sapere quando sviluppa un layout di progettazione per un sito web. Lo sviluppo del design è, si potrebbe dire, una scienza completa e, come ogni scienza, ha i propri suggerimenti e standard di base accettati per aiutare a sviluppare un buon layout. Non importa che tipo di sito web sarà in futuro: biglietto da visita, aziendale, promozionale, negozio online o altro. Ci sono una serie di punti che devono essere presi in considerazione e conosciuti fin dall'inizio, questi punti aiuteranno sia te che il progettista del layout in futuro nello sviluppo del progetto. Sì, sì, il progettista del layout deve sempre pensare a come verrà disposto questo o quel layout, altrimenti potrebbero sorgere problemi durante il layout e ciò comporterà una distorsione dell'aspetto del disegno che hai mostrato nel layout. Bisogna anche pensare al fatto che il risultato del lavoro del designer sarà comunque un sito web. Quindi cominciamo, l'ordine dei punti potrebbe non essere necessariamente esattamente così:

1. Pianificazione.
2. Le basi del layout o come è fatto.
3. Tipografia.
4. Scegliere i colori giusti per il progetto.
5. Usabilità.
6. Interattività ben studiata (navigazione, pulsanti, collegamenti, ecc.).
7. Progettazione dei contenuti.
8. L'ordine nell'origine del layout.

Bene, questo sembra aver delineato i punti principali che è consigliabile conoscere quando si lavora alla progettazione di un sito web. Ora diamo un'occhiata a questi punti in ordine e riveliamo un po' il loro significato, non descriverò tutto, delineerò solo le basi, e di tutti i punti parleremo nello specifico, penso nel prossimo futuro in nuovi post separatamente in modo più dettagliato.

Layout del sito web: creazione o come creare il layout di un sito web

Pianificazione - Penso che la parola stessa parli da sola, piano derivato. Nel nostro caso, ciò deve essere inteso come segue. Hai una specifica tecnica (specifiche) o un brief, in base al quale devi creare un layout, che sarà il design del nostro futuro sito web. Sulla base delle specifiche tecniche o del brief, il designer deve creare. Allora da dove cominciare?È qui che ci vengono in aiuto la nostra semplice matita e carta, sì, carta e matita, non un computer. Non ha senso disegnare direttamente al computer perché... non è pensato. Ecco perché creiamo la nostra planimetria o semplicemente uno schizzo. Disegniamo schizzi, preferibilmente diversi, prendiamo in considerazione tutti i punti, i menu, i testi, la disposizione dei blocchi, i collegamenti, le illustrazioni, la griglia approssimativa e tu ed io avremo un quadro più accurato e comprensibile del nostro futuro design del sito. E una volta ottenuti gli schizzi, possiamo passare alla realizzazione del disegno al computer.

Griglia modulare – Si tratta di un sistema di proporzioni di layout, costituito da moduli, che a loro volta formano una griglia. Ne abbiamo bisogno per la commensurabilità dei blocchi nel layout, nonché per la strutturazione del layout e degli elementi l'uno rispetto all'altro. Le griglie possono essere semplici (a blocchi) o complesse. Per dirla in termini semplici, l’utilizzo di una griglia modulare semplifica moltissimo sia l’impaginazione che la successiva impaginazione. disposizione luogo.

Nozioni di base sul layout o come è fatto, qui penso che non abbia senso descriverlo, dirò che le più importanti qui sono le seguenti caratteristiche che devono essere prese in considerazione:

• è scalabilità layout del sito, se si tratta di un sito in gomma (tenendo conto di come apparirà il layout una volta compresso e allungato);
• è necessario tenere conto della crescita futura del sito, ad esempio, aumentando le voci di menu e creare un layout tenendone conto;
• punti relativi alla disposizione dei blocchi con angoli arrotondati, anche questo deve essere preso in considerazione
• e una serie di altri punti.

Tipografia - Questo graphic design testo in un progetto di design utilizzando le regole appropriate. Per dirla semplicemente, la tipografia utilizza alcune regole che ci dicono come utilizzare al meglio i caratteri e il design per essere percepiti e letti al meglio dalle persone. Grazie alla tipografia, possiamo enfatizzare questo o quel pezzo di testo importante. I designer creano contrasti tipografici, migliorando così la percezione del testo, questo è necessario per indicare il peso più importante di determinate parole, frasi, paragrafi. Creando gli accenti di cui abbiamo bisogno nel testo, aumentiamo così la percezione del testo da parte del lettore e rendiamo anche il nostro design più attraente. Va anche notato che nel web design dovresti usare solo file .

Che tipo di caratteri sono questi? Si tratta di caratteri che esistono ed esistono sul computer di qualsiasi utente, indipendentemente dal sistema operativo. Ad esempio, i caratteri Arial, Georgia, Tahoma, Verdana e altri. Quando si crea un disegno, è consigliabile utilizzare due tipi di carattere, a volte, ovviamente, ce ne sono di più, ma le basi sono sempre due: un carattere per gli accenti (titoli) e uno di base per tutto il contenuto.

Scegliere i colori giusti per un progetto – Questo momento implica la percezione dei colori da parte di una persona. Ogni colore evoca un'emozione e puoi giocare con questo quando crei un layout di design per un sito web, accentualo colori luminosi e rendere i colori primari pastello, tenui e non fastidiosi. In questo modo possiamo mostrare all'utente del futuro sito le parti più importanti dei blocchi o degli elementi del layout. Tutti i colori hanno un impatto, alcuni respingono, altri incoraggiano all'azione (clicca) e ce ne sono anche di neutri. Naturalmente, a volte capita che l’azienda che ordina il sito web abbia uno stile aziendale e non puoi farci niente e devi seguirlo.

Usabilità – è una combinazione di praticità, memorabilità ed efficienza d'uso. Cioè, quando si sviluppa un design, è necessario tenere conto del fatto che l'utente si trova a suo agio sul sito, in modo che non abbia difficoltà con la navigazione e l'interfaccia, tutto dovrebbe essere chiaro, comprensibile e informativo. I principi di base dell'usabilità ci dicono che il sito dovrebbe essere facile da imparare, efficace da usare, facile da ricordare per il lavoro successivo da parte degli utenti abituali e, ovviamente, soddisfare l'utente.

Interattivo premuroso – ciò significa che il progettista, quando crea un layout di progettazione per il sito, deve pianificare come si comporteranno determinati elementi interattivi in ​​risposta all'azione dell'utente. Ciò significa che il designer, quando crea, ad esempio, un collegamento, deve sempre sottolinearlo, il collegamento deve avere la forma di questi stati come, collegamento statico, collegamento al passaggio del mouse, collegamento visitato. E anche, se necessario, mostrare dove siamo. Ciò dovrebbe essere indicato mediante sottolineatura e colori diversi. In termini semplici, tutti gli elementi di navigazione, collegamenti, menu, moduli e simili devono essere pensati in modo che ogni utente capisca che sta eseguendo qualsiasi azione.

Progettazione dei contenuti – qui penso che sia tutto chiaro, stiamo parlando del contenuto della parte contenuti del futuro sito. Dopotutto, qualsiasi sito è, prima di tutto, una massa di pagine costituite da informazioni che il proprietario della risorsa presenta generosamente all'utente e l'utente viene al sito proprio per informazioni. Molto dipende da quanto bene è progettato il contenuto. Il contenuto dovrebbe essere sempre formattato diversamente, ma tenendo conto dell'enfasi e del testo principale. Bisogna utilizzare tutti gli elementi necessari nella progettazione, questi sono titoli da H1 a H6 (tag ovviamente per i progettisti del layout, ma questo è più chiaro), elenchi di vario genere, citazioni, solo testo, paragrafi, link, materiale fotografico , tabelle, ecc.

L'ordine nel layout di origine è: questo probabilmente è più un consiglio che altro punto importante. Quando creo il design di un sito Web, cerco sempre di aderire a una determinata gerarchia di gruppi e nomi di livelli nel file PSD originale.

Cosa dà l'ordine al layout di un sito? Per il progettista e progettista di layout, una guida rapida su cosa appartiene a cosa e cosa è dove. Questo è come un diagramma logico di un elemento di un disegno (file psd) è diviso in cartelle, gruppi, corpo, piè di pagina, ovviamente c'è anche un cursore. Ma a loro volta questi gruppi sono divisi, se necessario, in sottogruppi e contengono livelli con il nome di un particolare livello. La gerarchia corretta ti aiuterà se devi modificare; è molto più facile trovare qualcosa che frugare in un mucchio di gruppi con livelli senza nomi, e il progettista del layout capirà e impacchetterà tutto più velocemente. Si tratta di gerarchia. Un altro punto importante, che mi è stato chiesto di fare almeno più volte, e da allora è diventata per me un'abitudine, rimuovere le guide dopo di voi in modo che il progettista del layout non perda tempo e non porti layout del sito sei a posto.

Per prima cosa, pensa al motivo per cui hai deciso di creare tu stesso il layout di un sito web. Questo lavoro richiede conoscenze versatili da parte di una persona nell'informatica e nel design, pensiero analitico e creativo allo stesso tempo. E anche una parte del tuo tempo. Ok, ci sono 4 motivi per cui potresti averne bisogno. Se ne hai uno diverso, scrivi nei commenti, lo aggiungerò.

Creare layout di siti web: divertimento per l'élite

Motivo n. 1. Interesse nello sviluppo di layout di siti web

I tuoi interessi sono molto specifici? Siamo qui non giudichiamo nessuno. C'era una volta che per noi è diventato interessante e abbiamo iniziato a farlo! Inoltre, la sete di conoscenza è nostra caratteristica distintiva. Apprezzo la tua curiosità.

Motivo n.2. Sviluppo del layout del sito web come modo per guadagnare denaro

Se in futuro vuoi diventare un web designer, devi iniziare da qualche parte, vale a dire con un layout di pagina di base del sito web. Il rapido risultato del tuo lavoro motiva come nient'altro. Fortunatamente in questo articolo mi limito a suggerire modi rapidi per creare un layout.

A proposito, il lavoro di un web designer non è uno scherzo. Di seguito lascerò semplicemente un piano salariale in base all'anzianità di servizio (secondo i dati DOU per maggio-giugno 2016). Non sto suggerendo nulla. Solo caccia nascosta.

Motivo n.3. Stesura delle specifiche tecniche per lo sviluppo del layout di un sito web per un designer

Spesso i non designer si trovano di fronte alla necessità di mostrare il layout di un sito web, a volte solo per illustrare la loro idea, ma a volte per rafforzare le specifiche tecniche. Naturalmente questo non è necessario e un designer competente capirà la tua idea e la realizzerà anche meglio di quanto ti aspetti. Tuttavia, se sai esattamente cosa vuoi, è meglio mostrarlo piuttosto che dirlo.

È anche comodo utilizzare l'app Coggle, che puoi connettere a Google Drive .

Mi piace Coggle perché è una mappa mentale. sempre a portata di mano, è conveniente condividerlo con i colleghi e i colori degli elementi dell'interfaccia sono ben scelti. Inoltre, funziona il pulsante destro del mouse, che consente di personalizzare facilmente la mappa. Ho questa struttura per pagina iniziale luogo.

Nella prima fase di progettazione del layout, viene creata una mappa mentale del sito

Fase 2: creazione di un prototipo di sito web

Successivamente, puoi iniziare immediatamente a disegnare il layout di un sito web in Photoshop, ma anche se crei un layout per vana curiosità, dovresti prima disegnare un prototipo di sito web. Nello sviluppo passo passo, la prototipazione è un passaggio integrale che rafforza la salute mentale di un web designer. Durante la creazione di un prototipo, vengono delineati i blocchi chiave del futuro sito (intestazione, slider, pulsanti, contatti, struttura del materiale, ecc.). Ciò consente di risparmiare notevolmente tempo nella fase di disegno del layout perché Potrai vedere il risultato approssimativo e apportare modifiche senza dolore.

Stanco? Rendi la vita più facile e ordinare lo sviluppo del sito Web da KOLORO. Prenderemo in considerazione i tuoi desideri e otterrai esattamente ciò che volevi.

Realizzazione del prototipo di un sito web on-line

Di solito utilizzo i due strumenti online più popolari per la prototipazione di siti Web: Moqups e Mockflow. In entrambi i casi è possibile realizzare prototipi gratuitamente, ma con funzionalità limitate. Le tariffe per il primo sito partono da $ 13 al mese. (10 progetti, 1 GB) e per il secondo da $ 14 al mese. (numero illimitato di progetti + 25 GB nel cloud). Tutti consigliano anche Mockingbird. E lo consiglierò, ma solo per rispetto verso Eminem, perché qui 3 progetti costeranno $ 12 al mese e ci sono meno strumenti gratuiti.

Ora le mie impressioni personali. Moqups è più comodo e intuitivo già dalla prima visita. Ci sono molti blocchi e icone già pronti qui: proprio quello che ti serve per superare rapidamente la fase di prototipazione. Inoltre, è conveniente centrare gli elementi rispetto al centro della pagina o ad altri elementi. Il limite di 300 oggetti per pagina in modalità gratuita è un po' un ostacolo: potrebbe non essere sufficiente per il layout di un sito web di una pagina. È possibile inserire elementi dal workframe Bootstrap. Mockflow ti consente di fare un po 'meno e richiede un paio di minuti per abituarti e abituarti, ma lo spazio extra su disco potrebbe essere un pareggio per alcuni.

Prototipi di siti web in Moqups e Mockflow

Come prototipare un futuro sito web?

Usando Moqups come esempio, vediamo come creare un prototipo di una pagina con testo per un blog.

Passaggio 1. Aggiungi cappello(il testo può essere modificato).

Passaggio 2. Aggiungi bloccare per l'immagine e l'iscrizione (titolo dell'articolo). Utilizzando gli stili, puoi modificare comodamente la dimensione, il carattere e altra formattazione del testo.

Passaggio 3. Aggiungi testo e chiedi larghezza colonne. Tutti i blocchi sono opportunamente centrati rispetto al centro della pagina.

Passaggio 4. Il testo dovrebbe essere suddiviso con un'immagine. E la larghezza della colonna è troppo grande, 500 px sarebbe meglio. Fortunatamente, puoi cambiarlo rapidamente. Un grande vantaggio: gli elementi selezionati vengono ridotti l'uno rispetto all'altro e anche il mio blocco con l'immagine è diventato più piccolo.

Passaggio 5. Aggiungiamo una barra laterale (colonna laterale), sarà facile. Inseriremo un campo di ricerca e un blocco per l'iscrizione alla newsletter (con un'immagine accattivante e un pulsante luminoso).

Passaggio 6. Diciamo che il nostro articolo si è rivelato così piccolo. Puoi anche aggiungere sondaggio E valutazione articoli. Il risultato è stato un prototipo accurato di una pagina di blog. Aggiungi altri elementi a tuo piacimento.

La prototipazione lo consente vedere la scala della pagina e prendere decisioni riguardanti determinati blocchi. A proposito, utilizzando questi strumenti puoi realizzare prototipi per diversi dispositivi. Ad esempio, se ci provi, otterrai qualcosa del genere. Tuttavia, il prototipo è solitamente limitato a un design in bianco e nero.

Prototipo di applicazione per smartphone

Fase 3: Realizzare un bellissimo layout del sito web: scegliere un colore

Da bella scelta i colori influenzano la percezione del sito e del brand da parte degli utenti. Non consiglio di fare affidamento sulle proprie forze: scegliere la tonalità giusta può richiedere ore. Pertanto, consiglio di utilizzare tavolozze di colori già pronte per il web. Google ha recentemente pubblicato una guida dettagliata sui buoni colori per il material design (una tendenza del web design). Questi colori si fondono armoniosamente e puoi essere sicuro della loro attrattiva. Usando Materialpalette, puoi selezionare con successo due colori: quello principale e l'accento, e anche vedere come appariranno nell'interfaccia. Un po' più di colore su Material Design Colors.

Hai presentato il sito? Hai realizzato un prototipo? Hai scelto i tuoi colori? Ora puoi passare alla creazione del layout stesso. Ti offro diversi modi.

Attenzione! Non ci saranno consigli qui su come realizzare il layout di un sito Web in Photoshop: questo è un argomento per un articolo separato, ecco metodi più semplici.

Metodo n. 1. Tagliare un layout da un modello di sito web

o siti esistenti

Questo metodo è adatto a te se desideri:

• capire il principale Strumenti di Photoshop;
• trova diversi riferimenti per il tuo futuro sito web e mettili insieme;
• sentirti un designer per un paio d'ore;
• dimostrare ad un web designer o ad un'agenzia (ad esempio, a noi:) la visione più dettagliata del sito;
• per supportare i termini di riferimento per lo sviluppo del sito web non solo “qui ci sono i pulsanti di chiamata, ed ecco il separatore e il magnete guida”.

I vantaggi di questo approccio allo sviluppo del layout:

• puoi evitare errori comuni guardando siti di alta qualità;
• capirai cosa non fare per stare bene;
• gli artisti del web design avranno le idee chiare su cosa ti aspetti;
• è molto veloce: in poche ore realizzerai layout per tutte le pagine del sito.

Aspetti negativi:

• non capirai mai del tutto cos'è il web design;
• Alcuni dei riferimenti che trovi non possono essere implementati dal progettista del layout senza modificare altre parti del sito.

Come è fatto

Il più semplice e modo rapido crea il layout di un sito web: scegli un modello per un CMS specifico e rifailo tu stesso. Pertanto, prima devi decidere un CMS, che semplificherà notevolmente lo sviluppo del sito. Tuttavia, tieni presente che il design del sito sarà limitato agli elementi presenti nel modello. Naturalmente puoi cambiare i colori, ma i singoli elementi dell'interfaccia sono già pronti e non puoi cambiarli.

Se prepari uno "spezzatino" da siti diversi, non dimenticare di scrivere le fonti da qualche parte su un quaderno con una matita. Ciò semplificherà l'ulteriore sviluppo del progetto e il layout del layout.

Layout sito web per Wordpress

Il CMS più popolare è Wordpress. Ad esempio, troverai molti modelli moderni per questo CMS. Per quello? Un sito web basato su un modello accelera notevolmente il lancio del progetto, ma non sarà unico. Tuttavia, se si utilizzano illustrazioni, immagini originali e un approccio creativo, anche il layout di un modello può essere rifatto in modo irriconoscibile. Il vantaggio principale è che il tuo sito web sarà sicuramente reattivo e generalmente bello in termini di visualizzazione su diversi dispositivi.

Sfoglia diversi modelli e scegli quello che ti piace di più. Ho fatto altre ricerche su Envato Market e ho trovato il modello Dalton che mi è piaciuto di più. Accedendo alla versione demo del template vedrai subito il concept di un sito web aziendale. Facendo clic sul menu, puoi vedere più in dettaglio quali funzioni ha il modello e come appariranno le diverse pagine. È meglio dedicare mezz'ora a questo e capire veramente cosa c'è nel modello.

Qual è il prossimo? Selezione delle dimensioni del layout del sito web, taglio e incollaggio

Una volta che ti senti a tuo agio con il modello, puoi iniziare a tagliarlo. È fantastico se la risoluzione dello schermo è di 1920 px o superiore: questo ti consentirà semplicemente di acquisire screenshot di parti del sito e combinarli nell'editor. Il lavoro con il layout inizia con l'intestazione, quindi con i vari blocchi (corpo) e alla fine con il piè di pagina.

Avrai bisogno:

• uno strumento utile per scattare una foto di un'area selezionata (strumento di cattura dello schermo), utilizzo Lightshot: offre di salvare l'immagine in un file separato o copiarla negli appunti;
• Photoshop: per incollare parti tagliate di immagini.

Fasi della creazione di un layout per un sito Web basato su un modello

Passaggio 1. Seleziona la larghezza del layout del sito

Decidi quale pagina farai per prima. Non iniziare con quello principale: è meglio lasciarlo per ultimo, perché... Questa è la pagina più importante del sito ed è meglio metterci le mani sopra prima. Nell'esempio, creerò una pagina "Chi siamo": conterranno informazioni interessanti sull'azienda e sui suoi dipendenti. Ho già un prototipo del sito, quindi so cosa sto facendo. A proposito, come va il tuo prototipo?

Apri Photoshop e imposta la larghezza del layout del sito su 1920 px. Questo sarà sufficiente per vedere come apparirà il sito nel browser. Se la risoluzione è inferiore, impostala sulla larghezza consentita dal monitor. Non preoccuparti ancora dell'altezza: è difficile da indovinare e dovrai comunque allungare/contrarre l'area.

Passo 2. Continuiamo a creare il layout di un sito Web in Photoshop

Seleziona il cappello che ti piace dal modello. Taglialo con strumento conveniente, apri il documento in Photoshop e incollalo lì (Ctrl+V). Usa lo strumento Sposta (V) per posizionare l'intestazione in alto. Mi piace l'intestazione con la barra superiore, dove sono presenti le informazioni di contatto dell'azienda.

Passaggio 2.A. Realizza subito il layout giusto del sito web

Ora hai due opzioni: modificare il testo nell'immagine o scrivere il testo di accompagnamento in un file di testo. Quale è più conveniente? Tutto dipende dai tuoi obiettivi. SU esperienza personale Posso dire che è meglio farlo nel layout, selezionando subito il carattere e le dimensioni. Questo sarà più sicuro e sarà WYSIWYG in azione (What You See Is What You Get, "ciò che vedi è ciò che ottieni").

Passaggio 3. Andiamo al successo

Riempi il tuo layout con diversi blocchi e modificali in base alle tue esigenze. In questa fase non devi giocare con i colori se non hai le competenze utilizzando Photoshop. Per aumentare l'altezza del layout, utilizzare il Strumento cornice (C).

Quello che è successo

Dopo un paio di minuti passati a pensare, tagliare e incollare i pezzi che mi piacevano di più, ho capito layout di pagina strutturato"Chi siamo"

Cosa non dovresti dimenticare

1. Chiamata ogni strato con blocco adeguatamente, secondo quello che c'è. Altrimenti ti perderai completamente.
2. Quando scegli un carattere devi scegliere dimensione diversa Per intestazioni e corpo testo. In questo caso è meglio lasciarsi guidare dalla libreria di font web di Google Fonts. Non dimenticare di filtrare i caratteri cirillici.

Metodo n. 2. Creare il layout di un sito web in Photoshop è quasi

Il metodo numero 2 è adatto a te se:

• non hai Photoshop (la tua coscienza non te lo permette o non hai spazio su disco) o non hai ancora imparato ad usarlo;
• vuoi conoscere il codice HTML e gli stili CSS senza interferire con il markup;
• hai bisogno di un layout di sito web interattivo.

Raccomando il fantastico strumento di layout gratuito Macaw. Per lavorare con il programma, devi scaricarlo e installarlo: ci vogliono un paio di minuti. Nel programma puoi praticamente impaginare un layout in modalità visiva, perché puoi pubblicarlo immediatamente e vedere il codice HTML e CSS. Qualche dettaglio in più su come funziona il programma. L'Ara ha inconveniente significativo- crea una pagina web che non risponde. Come affrontare questo problema? Qui avrai già bisogno delle competenze di un progettista di layout per connettere il framework (ad esempio, se stai creando il layout di un sito web utilizzando Bootstrap). Tuttavia, se hai solo bisogno di mostrare ai tuoi colleghi un layout di lavoro, Macaw è perfetto.

Ecco come appare un modello che non risponde su diversi dispositivi. voglio piangere

Per iniziare, avvia il programma sul tuo computer. Presentiamo alla tua attenzione un documento vuoto con una larghezza della pagina di 1200 px con una griglia di layout del sito. Per impostazione predefinita, è presente un riempimento tra le colonne, quindi ci sarà spazio tra gli elementi creati. Dovrai solo disegnare all'interno delle colonne, perché se le oltrepassi i blocchi appariranno uno sotto l'altro. Quindi tienili d'occhio.

Puoi impostare in modo indipendente la larghezza delle colonne, il loro numero e la distanza tra loro. Se vuoi che gli elementi “si attacchino” tra loro, imposta la larghezza della colonna al 100% e rimuovi il riempimento tra di loro. Perché hai bisogno di questa rete? Con il layout HTML del layout del sito, sarà più semplice creare un modello adattivo, perché... i framework moderni utilizzano una griglia a 12 colonne.

Puoi modificare la larghezza dell'area di lavoro trascinandola a destra o impostando tu stesso le dimensioni

Qual è il prossimo? Disposizione

Configura il tuo spazio di lavoro come preferisci e mettiamoci al lavoro. Creerò la stessa pagina che ho ritagliato dal modello Dalton.

Passo 1.

Per prima cosa devi creare cappello. Sarà contenitore con un'altezza di 100 px e un bordo inferiore di 1 px di spessore.

All'interno di un altro contenitore ci sarà un logo e all'interno di quello successivo ci sarà un menu. Non è necessario creare menu per singole voci di menu blocchi separati, è sufficiente impostare una distanza accettabile tra le parole (spaziatura tra le parole).

Passo 2

Con l'intestazione finita, puoi procedere ai blocchi rimanenti. Nel prossimo blocco avrò sfondo che è necessario scaricare separatamente.

Passaggio 3. Crea un layout del sito web interattivo

Continuo a trascinare i blocchi e a inserirvi del testo. Creo un pulsante utilizzando uno speciale strumento "Pulsante" (logica!). Macaw ti consente di creare un layout interattivo con diversi stati dei pulsanti e la possibilità di passare da una pagina all'altra.

Si prega di notare i seguenti elementi evidenziati. Ti aiutano a passare da un blocco all'altro e a organizzarli. Ad esempio, il testo dovrebbe trovarsi in un contenitore specifico e non semplicemente uscire.

Se premi File ->Pubblicare, riceverai una pagina già pronta in cui potrai visualizzare il codice HTML e CSS in diverse schede. Questo è molto comodo se vuoi vedere come appare il markup.

Quello che è successo

Si è scoperto qualcosa del genere. Qui, per confronto, a sinistra sono incollati pezzi del modello modificato, a destra c'è un layout creato in Macaw. Un grande vantaggio del programma è che puoi inserire pulsanti, aggiungere collegamenti ad essi, creare pagine diverse e navigare tra di loro. Basta non dimenticare la gerarchia dei contenitori e non perderti in essi.

Caratteristiche di questo metodo di creazione del layout di un sito web:

• Per comprendere le complessità del programma, è necessario dedicare più tempo;
• anche quando hai già approfondito il programma, a volte non è ancora chiaro il motivo per cui si comporta in questo modo e non altrimenti;
• puoi dimenticarti dell’adattabilità se non lo finisci da solo;
• È davvero comodo creare un layout e anche capire un po' il layout: puoi vedere come interagiscono gli elementi e qual è la struttura in generale;
• cose come "larghezza: 16.6666666666%" potrebbero apparire negli stili, che dovranno essere corretti; devi solo capire che questo è WYSIWG e niente di più.

Metodo n. 3. Strumento di simulazione online

Se stai cercando un'opzione su come creare il layout di un sito web in un'applicazione con l'interfaccia più semplice e intuitiva possibile, ho preparato questo metodo appositamente per te.

Uno strumento comodo per creare infografiche che utilizzo da molto tempo è il servizio Creately. Esistono dozzine e centinaia di componenti per la creazione della progettazione dell'interfaccia utente per diversi dispositivi (principalmente dispositivi mobili). Ti piaceranno sicuramente, te ne mostrerò alcuni.

Ancora qui conveniente per modificare gli elementi, aggiungi testo (e persino crea pulsanti con collegamenti!). In generale, in appena un paio di minuti ho già ottenuto la stessa cosa di Macaw, solo più attento. Tuttavia, un layout di questo tipo non può essere reso altamente interattivo. Non ci saranno passaggi per questo metodo perché... Il servizio è ben intuitivo. Sullo schermo ho cercato di visualizzare quanto più possibile capacità di servizio.

Caratteristiche del servizio Creately

È tutto. Questi erano i metodi a cui sono arrivato in una o nell'altra fase dello sviluppo creativo. Se ritieni utile questo materiale, saremo felici.

PS Questo articolo è solo a scopo informativo e non ti consentirà di diventare un web designer. Per ottenere una conoscenza seria, dovrai scavare molto di più su Internet.

La divisione della prototipazione architettonica in lavoro ed esposizione predetermina vari scopi e obiettivi del processo formativo della progettazione architettonica. Gli obiettivi prefissati vengono raggiunti con quasi gli stessi materiali utilizzando mezzi e tecniche diversi.

I modelli funzionanti vengono realizzati sulla base di disegni e schizzi preliminari o senza di essi, quando non esiste ancora una decisione finale, tanto meno i disegni. Il layout in questo caso è una sorta di modello sperimentale dell'oggetto futuro, sul quale possono essere testati varie opzioni composizioni o crearne di nuove (Figura 1.6).

Figura 1.6 – Lavorazione (bozza di layout)

Dopo l'approvazione della versione definitiva della soluzione volumetrico-spaziale, potrà essere realizzato un allestimento espositivo definitivo (Figura 1.7).

Figura 1.7 – Pianta dimostrativa di un complesso residenziale

Quindi, se nel primo caso il baricentro soluzione tecnica il layout dipende dalla ricerca e dallo sviluppo di un'idea architettonica, nel secondo caso dalla qualità dell'esecuzione.

2 Realizzare un layout

2.1 Ordine di esecuzione del layout

I processi produttivi di entrambe le tipologie di layout possono essere rappresentati in forma semplificata dalla seguente sequenza di lavoro:

1. Determinazione delle caratteristiche di progettazione del layout.

2. Suddividere il layout in componenti facili da realizzare.

3. Contrassegnare gli spazi vuoti sul materiale del modello.

4. Taglio degli spazi vuoti.

5. Assemblare e incollare elementi volumetrici del layout.

6. Incollaggio finale dei singoli elementi.

L'ordine di impaginazione dato è preceduto da una fase preparatoria, che è rappresentata da: analisi del progetto iniziale (idea); determinazione dei materiali, degli strumenti, scelta della scala e del grado di dettaglio.

2.2 Selezione della scala del layout

La scala di realizzazione del modello è determinata principalmente dalle dimensioni naturali dell'oggetto originale, poi dalle condizioni di chiarezza della percezione e, infine, dai requisiti del processo di apprendimento.

Le seguenti scale sono consigliate per i layout nel processo educativo della progettazione architettonica:

Piccole forme architettoniche (micropiazza, parco giochi, segnaletica d'ingresso) – 1:10, 1:20, 1:25 (Figura 2.1);

Figura 2.1 – Pianta del monumento

Edifici residenziali bassi individuali e bloccati - 1:25, 1:50;

Piccolo edifici pubblici(interno padiglione) – 1:20, 1:25, 1:50;

Edificio di media altezza (edificio residenziale, garage) - 1: 100, 1: 200.

3 Tecniche di base e tecniche di prototipazione

3.1 Realizzazione di un sottomodello

Nell'organizzazione della composizione, un ruolo formativo è svolto non solo dai suoi elementi costitutivi, ma anche dalla base (Figura 3.1).

Figura 3.1 – Incollaggio del sottolayout

La dimensione del sottomodello determina la forza d’influenza della composizione sullo spazio della sottobase organizzata “simile alla forza d’influenza dell’architettura reale irradiata dai volumi indipendenti oltre i confini dello spazio che occupano”. Modificando la dimensione della base, puoi vedere come cambia la percezione della natura della composizione: in alcuni casi è una sensazione di tensione, instabilità, in altri - calma e staticità. L’importanza del sottomodello è particolarmente chiaramente dimostrata nel lavoro sulla composizione spaziale profonda, dove il contenuto del compito assegna al sottomodello il ruolo di elemento compositivo e stabilisce il compito di “organizzare un dato territorio”.

Non è solo la dimensione che conta, ma anche la forma della base. Pertanto, per una composizione volumetrica, il sottomodello ha spesso la forma di un quadrato; per una composizione frontale è un rettangolo situato frontalmente rispetto alla linea visiva principale; per una composizione spaziale-profondita, è diretto in profondità . Pertanto, la forma del sottomodello sottolinea a quale tipo appartiene. Il sottomodello può anche avere un design in plastica. Ciò si manifesta più attivamente nelle attività per identificare il modulo

Prima di iniziare a realizzare un modello dell'oggetto, è necessario realizzare un sottomodello, che servirà non solo come base solida, ma anche come immagine su larga scala del paesaggio del territorio (rilievo, superficie dell'acqua, paesaggio, paesaggistica, vialetti, percorsi pedonali e scale). Gli elementi del paesaggio sono realizzati nella stessa scala del layout.

Per garantire la resistenza dei layout di grandi dimensioni, si consiglia di realizzare la base su barelle in compensato o pannelli duri; per layout piccoli e leggeri - su cartone ondulato (imballaggio) o tablet.

Dopo aver realizzato una base solida, il sotto-layout viene incollato (Figura 3.2).

Figura 3.2 - Realizzazione di un sotto-layout con rilievo del terreno

Il rilievo del sotto-layout è realizzato secondo disegni con linee orizzontali designate. Se il layout include superfici d'acqua, la produzione del rilievo inizia da esse, dal livello più basso. Nella pratica della prototipazione, nella maggior parte dei casi, viene utilizzata carta lucida o cartone, meno spesso - plexiglass. Alla base (specchio d'acqua) viene incollata carta tonica (colorata), viene segnata e disegnata la linea di costa, da cui inizia l'ascesa del rilievo.

A seconda della scala scelta e della differenza di elevazione dell'area, viene selezionato l'uno o l'altro metodo per realizzare il rilievo.

1. Con una leggera differenza di altezza - un rilievo calmo con rare linee orizzontali lungo il contorno di ciascuna linea orizzontale - gli spazi vengono ritagliati e incollati in sequenza, dal basso verso l'alto (Figura 3.3 a). Se lo spessore del cartone non corrisponde alla scala della differenza di altezza, strisce di carta o cartone vengono incollate tra gli spazi vuoti “sul bordo” dell'altezza richiesta (Figura 3.3 b).

2. Con un dislivello significativo - rilievo ripido (con orizzontali più frequenti) - la produzione del rilievo può essere, come nel primo caso, ma con un gran numero di spazi vuoti - orizzontali o con l'incollaggio di strisce di carta o cartone "di bordo" lungo le linee orizzontali dell'altezza opportuna (Figura 3.3 c). Il rilievo realizzato in questo modo è piuttosto espressivo, ma su di esso è difficile posizionare modelli di edifici ed elementi del paesaggio, quindi questo metodo è più appropriato da utilizzare per il layout di lavoro.

3. In alcuni casi, quando non è richiesta una precisione particolare nella rappresentazione del terreno, la superficie della terra viene imitata con carta da lucido o carta stropicciata (Figura 3.3 d). In questo caso il rilievo risulta essere espressivo e naturalistico, ma piuttosto convenzionale. Nei primi due casi, l'espressività e la qualità del rilievo del layout sono direttamente proporzionali al numero di spazi vuoti o strisce orizzontali. A questo proposito, prima di realizzare un modello, si consiglia di ripristinare e tracciare ulteriori linee orizzontali con altezze intermedie tra i contorni principali del rilievo nel disegno per il successivo incollaggio nel modello.

Dopo aver preparato il sottomodello, iniziano a realizzare un modello dell'oggetto

A volte ci sono situazioni in cui non è necessario creare un sito web da zero, elaborandone attentamente il concetto. Oggi su Internet puoi trovare molti modelli gratuiti, utilizzando i quali puoi creare rapidamente un sito Web bello e moderno. Il design delle pagine web non si ferma: in esso compaiono regolarmente nuove tendenze che hanno un impatto serio sui risultati del lavoro dei designer. Sono molto felice che molti designer non siano avidi e condividano i frutti del loro lavoro pubblicando prototipi e modelli ad accesso gratuito. FreelanceToday porta alla tua attenzione 15 mockup di siti Web PSD gratuiti che possono essere utilizzati sia in progetti personali che commerciali

Modello di landing page gratuito per un ristorante. Il layout ha un approccio audace al design ed è perfetto per il sito web di un bar o di un ristorante. Un design molto accurato: il layout ha 37 blocchi, disposti in modo tale che un visitatore del sito voglia visitare il ristorante.

Un modello bello ed elegante progettato dal designer Orkan Sep. La differenza principale di questo one-pager è la piacevole combinazione di colori e l'uso degli esagoni come elemento di design principale.

Questo layout può essere utilizzato come base per la creazione di un sito Web portfolio per fotografi e illustratori.

Layout con grassetto e design moderno. I blocchi chiari interagiscono con quelli scuri, il che semplifica notevolmente l'interazione con il sito. Come suggerisce il nome, questo modello è stato creato tenendo conto delle esigenze delle agenzie creative, degli studi web e di altre associazioni creative.

Un modello meraviglioso adatto a designer, sviluppatori o liberi professionisti che desiderano mostrare il proprio lavoro e le proprie competenze. Il design offre la possibilità di pubblicare notizie e contenuti tematici.

Progettato dalla designer Camille Koperwas, questo fantastico modello può essere utilizzato per creare il sito web di un'agenzia di design. Durante la creazione del modello sono stati utilizzati solo caratteri gratuiti, che possono essere utilizzati sia nella versione desktop che mobile del sito.

Questo modello di sito Web multiuso è stato creato dallo studio PixelMustashe. Lavoro impressionante: il modello può essere utilizzato per creare un moderno sito Web multipagina. In totale, il layout contiene 16 file, che sono layout PSD a più livelli. Griglia ben progettata, design semplice e pulito: il layout è adatto per creare un'ampia varietà di siti Web.

Un altro lavoro reso disponibile gratuitamente dallo studio PixelMustashe. Il modello è composto da 8 file PSD facilmente modificabili: questi sono i layout delle pagine principale e interna.

Creato dal designer Ernest Asanov, questo layout può essere utilizzato per vari scopi. Tuttavia, è chiaro che il modello è stato sviluppato per creare un sito Web commerciale sul quale vengono venduti tutti i prodotti. Questo non è un negozio online, ma un sito per la vendita di due o tre prodotti, in in questo caso– per i fotolibri. Il che, però, non ti impedisce di utilizzare questo layout per le tue esigenze.

Questo modello gratuito è perfetto per un sito web di biglietti da visita per un hotel o, ad esempio, un resort. Il modello è interessante, ma ha una griglia un po' strana che non è adatta a tutti.

Modello di sito Web di portfolio moderno. Adatto sia ad agenzie che a liberi professionisti. Tutto quello che devi fare è sostituire il testo e, se necessario, le illustrazioni.

Vuoi creare un blog elegante? Scarica questo modello gratuito con un design unico che farà un'ottima impressione sui tuoi visitatori.

Vuoi creare un sito web per uno studio di tatuaggi, ma non sai come dovrebbe essere il design? Puoi sperimentare questo modello gratuito o utilizzarlo come base per il tuo design.

Il template cLand è una landing page dal design molto semplice e pulito. Ideale per creare una landing page con una piccola quantità di contenuti.

Il layout YukNgalam, creato dal designer Dani Rizki, sarà utile per chi vuole creare un sito web di guida. Il layout è gratuito e può essere utilizzato per progetti personali e commerciali.

Poche persone sanno che uno dei modi efficaci il design è layout. Dopotutto, quando crei un layout, molti Momenti diventano più chiari rispetto al disegno, quindi questo metodo deve essere utilizzato durante la progettazione. Cioè, realizziamo un layout non per la visualizzazione finale del progetto, ma per la progettazione dettagliata. L'impianto sviluppa una visione volumetrico-spaziale e un pensiero architettonico-fantasioso. Questo è molto importante per il processo di progettazione. Un layout di lavoro consente di presentare visivamente le proprie idee e di operare liberamente con volumi e spazi.

I piani grandiosi - la costruzione di una nave, una cattedrale, una fortezza - raramente venivano completati senza modelli. In Russia, al tempo di Caterina, c'erano laboratori di gioielleria di corte che realizzavano cose straordinarie: modelli di carrozze, navi, palazzi. Pietro il Grande fu un eccellente modellista e apprezzò molto quest'arte. A San Pietroburgo, nel Museo della Marina, si trova un eccellente modello di corazzata realizzato dallo Zar (questo è il tipo di modellismo più complesso).

disposizione interna realizzata in carta e cartone

I layout sono diversi:

• Vengono realizzati modelli approssimativi per comprendere il design e i volumi (possono essere realizzati con qualsiasi materiale, ma di norma è cartone)
• I layout finali finali sono la visualizzazione volumetrica del progetto

I materiali con cui è possibile realizzare un modello possono essere qualsiasi, ma di norma il materiale principale per realizzare un modello è carta e cartone, poiché si tratta di materiali economici e facili da lavorare. Molti elementi possono essere realizzati in cartone ondulato; è facile da tagliare e incollare.

I modelli grezzi sono solitamente realizzati in cartone ondulato. Ma in generale, per un layout approssimativo puoi utilizzare qualsiasi cartone e carta, l'importante è che ti senta a tuo agio nel lavorare con il materiale.

A che scala deve essere realizzato il layout?

La scala dovrebbe essere scelta in modo che sia conveniente per te progettare nel layout e, ovviamente, la scala dipenderà dalla dimensione effettiva dell'oggetto, ad esempio, quando progetti il ​​design di un appartamento, puoi prendere una scala 1: 10, il che significa che un metro reale sul tuo layout sarà 10 centimetri su una scala così grande che sarà facile per te progettare e tutto sarà molto chiaro. Ma se la scala ti sembra ancora grande, puoi prendere una scala diversa.

Quali strumenti sono necessari per creare un layout?

Avrai sicuramente bisogno di strumenti; buoni strumenti renderanno il lavoro facile e piacevole.

1. Puoi acquistare un coltello breadboard in un negozio, oppure è meglio acquistare immediatamente lame di ricambio per un coltello, perché diventano rapidamente smussate e si rompono. Oppure puoi affilare la lama, attaccarla su un pezzo di fibra di legno senza carta vetrata e quando tutto l'abrasivo sarà stato cancellato, avrai un'ottima regola per un coltello da breadboard.
2. Tappetino da taglio, comodo da tagliare e su un tappetino del genere non romperai la punta del coltello da breadboard
   
3. Colla, avrai sicuramente bisogno di colla, puoi prendere PVA o Moment. Tuttavia, usano la colla PVA.
4. Un righello di ferro sul quale taglierai esattamente i dettagli del tuo layout. Potrebbe anche essere necessario un quadrato di metallo.

Naturalmente, per creare un layout, sono necessarie abilità ed esperienza con la carta. Ma credo in te, ci riuscirai.