Disposizione di u situ web. Principi di Disposizione

U layout di u situ web hè u prucessu di creà una pagina web codificando è strutturandu u cuntenutu in modu chì hè visualizabile è interattivu in un navigatore web. Implica u testu di stile, l'imaghjini, i video, i ligami, i formi è altri elementi nantu à una pagina per creà una sperienza visuale coesiva è convincente per l'utilizatori.

U disignu è u layout di u situ include i seguenti aspetti principali:

1. HTML (Hypertext Markup Language):

   • HTML hè utilizatu per creà a struttura di una pagina web. Definisce i tituli, paragrafi, listi, imagine, ligami è altri elementi chì formanu u core di u cuntenutu in una pagina.

2. CSS (Cascading Style Sheets):

   • CSS hè utilizatu per stilà elementi HTML è cuntrullà a so apparenza. Utilizendu CSS, pudete stabilisce culori, fonti, dimensioni è piazzamentu di elementi nantu à a pagina.

3. Disposizione di u situ web. Design Responsive:

   • U cuncepimentu responsive implica l'usu di CSS è altre tecnulugii per creà pagine web chì ponu vede currettamente in diversi dispositi è risoluzioni di schermu, cum'è computer, tablette è smartphones.

4. javascript:

   • JavaScript pò esse usatu per aghjunghje interattività à e pagine web. Questa lingua di prugrammazione permette di creà elementi dinamichi, interagisce cù l'utilizatori, è cambià u cuntenutu di a pagina senza bisognu di ricaricà.

5. Disposizione di u situ web. Compatibilità cross-browser:

   • U layout include ancu considerazione di cumpatibilità cross-browser in modu chì e pagine web mostranu currettamente in diversi navigatori web (per esempiu, Google Chrome, Mozilla Firefox, Safari, Microsoft Edge).

6. Ottimisazione di u rendiment:

   • Un aspettu impurtante di u layout hè l'ottimisazione di u rendiment, cum'è a riduzzione di a dimensione di l'imaghjini, l'usu di caching, è altre tecniche per assicurà e pagine caricate rapidamente.

Generatori di layout di libru: 5 Strumenti GRATUITI.

Per assicurà chì avete un situ web chì i vostri visitatori ùn abbandunaranu micca, avemu riunitu sta guida basi di disignu layout di u situ web. Scupriremu i fundamenti di ciò chì deve esse fattu bonu disignu, tecniche chjave per creà un layout di u situ web efficace, è i tipi più cumuni di layout di u situ web.

Breve di cuncepimentu di imballaggio

Obiettivi. Disposizione di u situ web

Per sèmplice chì pò sona, l'unicu scopu di un layout di u situ web hè di sustene i scopi di u situ web, sia a cunversione, ricunniscenza di marca, divertimentu o altru scopu. Ma i scopi u situ web sò espressi per u cuntenutu, è u disignu di u layout descrive cumu furnisce in modu efficace quellu cuntenutu. Dittu questu, eccu alcune funzioni cumuni chì un layout di u situ web pò esse realizatu:

• Display di l'infurmazioni . Un bon layout di u situ web urganizeghja l'infurmazioni in una manera chì seguita una sequenza evidenti, hè faciule di scansà, dà pesu à l'elementi più impurtanti, è rende l'uttine d'utilizatori intuitive per truvà è aduprà.
• Ingaghjamentu di l'utilizatori:  Un bonu layout di u situ web rende a pagina visualmente attraente, dirige l'ochju di l'utilizatori à i punti d'interessu, è li incuraghjenu à cuntinuà à navigà in u situ.
• Marca: Un bonu layout di u situ web ghjoca ancu un rolu in a marca, utilizendu spazii, allineamentu è scala per adattà à a marca di a cumpagnia.

Questi scopi d'altu livellu guidanu u disignu di u layout di u situ web, ma prima di guardà layout specifichi di u situ web, discutemu cumu implementà questi scopi in più detail.

Certificatu rigalu. Cumu creà?

U prucessu di sviluppà un layout di u situ web. Disposizione di u situ web

U prucessu di dispusizione di u situ web deve accade prima in a creazione di u situ web, chì hè qualchì tempu dopu avè sviluppatu a vostra strategia di u situ web, ma prima di saltà in un prugramma graficu per creà l'interfaccia.

Cumu creà un situ web di matrimoniu?

U layout di un situ web hè visualizatu cù un wireframe, chì hè una mappa di wireframe di basa chì mostra cumu u cuntenutu s'adatta. Hè impurtante di distingue u disignu di wireframe da u web design, chì hè tuttu u prucessu di creà gràfiche di l'interfaccia è altri elementi visuali per una pagina web. U disignu di u web design hè una grande parte di u web design, è principia cù u wireframe. Ideale, u disignu visuale deve currisponde à u layout wireframe in modu chì l'elementi grafichi sò posti strategicamente è micca basatu nantu à preferenze estetiche fugace.

Dopu quì, quì sò i passi per creà un layout di u situ web:

• Disposizione di u situ web. Definite tutte e zone di cuntenutu.

Wireframes tipicamente rapprisentanu u cuntenutu cum'è quadrati è rettanguli simplici, sia una maghjina o un bloccu di testu. Hè impurtante di sapè in anticipu quantu cuntenutu avete è a dimensione apprussimativa di ogni pezzu (o u numeru di parolle) per pudè accurtà l'elementi inseme.

• Crea una seria di wireframes è prototipi. 

U layout pò esse simplice quant'è disegnu cù penna è carta, ma ci sò ancu assai prugrammi dispunibuli (p.e.  Capriccioso ), cuncepitu per ottimisà u prucessu. Siccomu i wireframes ùn anu micca esse opere d'arti dettagliate, pudete creà parechji di elli à u tempu. Ancu s'ellu si innamurà di a vostra prima idea, duvete sviluppà più wireframes per espansione a vostra imaginazione è dà l'opzioni. Senza gràfiche fantastiche per distrarvi, pudete fucalizza nantu à l'esperienza di l'utilizatore è amparà quale layout serà più intuitivu per elli. Assicuratevi di piglià in contu tutte e dimensioni di u screnu - hè cunsigliatu di principià cù un layout per i dispositi mobili, è poi custruite.

• Pruvate, riunite feedback, è iterate. 

Una volta avete uni pochi di opzioni, assicuratevi di riunite feedback da i vostri pari. Applicazioni cum'è  Invision  и  Figma,  permette di creà prototipi interattivi per pudè pruvà facilmente i buttoni è a navigazione senza creà una pagina web vera. Se l'utilizatori di prova si registranu nantu à u screnu mentre naviganu in u prototipu, questu pò revelà i blocchi di UX. Una volta avete uni pochi di note, torna à u passu dui è ripetite finu à ottene u risultatu perfettu.

Mentre chì questi sò i passi literali per creà un layout di u situ web, pò esse difficiule di capisce ciò chì rende un layout efficace o micca quandu avete principiatu. In a sezione dopu, avemu da guardà i metudi specifichi chì pudete aduprà per piglià decisioni di cuncepimentu.

Metudi chjave per creà efficace. Disposizione di u situ web

U disignu di u layout di u situ web hè una pratica chì hè stata dapoi decennii, chì significa chì annantu à l'anni una quantità di cunvenzioni è principii di cuncepimentu sò stati stabiliti per guidà i diseggiani in u so mistieru. Eccu alcuni di i più utili di sti tecniche:

gerarchia visuale

gerarchia visuale hè una manera di stilizà sei elementi di design per rinfurzà u cuntrastu per fà chì certi pezzi di cuntenutu si distinguenu sopra à l'altri. Per ottene questu, i parti più impurtanti di u layout sò quelli chì l'utilizatori deve identificà immediatamente, secondu u scopu di a pagina. Di solitu includenu tituli, pruposte di valore, chjama à l'azzione è arnesi d'utilizatori cum'è a navigazione.

A ghjerarchia visuale pò esse manifestata in parechje manere, cum'è scegliendu fonti (taglia, pesu, è ancu diverse combinazioni di fonti), allineendu elementi impurtanti più altu nantu à a pagina, o utilizendu culori cumplementari per mette in risaltu elementi.

I mudelli di lettura. Disposizione di u situ web

I mudelli di lettura descrizanu i modi più cumuni per scansà e pagine da l'utilizatori è sò raffigurati cum'è linee dirette (vettori, per i matematichi). Siccomu a ricerca mostra chì u 79% di i visitori di u situ web sguassate solu a pagina, hè impurtante per fà u più faciule pussibule di scansà. Un modu efficace per fà questu hè di disignà u layout cun un mudellu di lettura specificu in mente.

L'incorporazione di mudelli di lettura in i vostri layout implica a piazza strategica di elementi longu à e linee di vista di u visore. I mudelli più cumuni per cunsiderà sò u mudellu Z (vettore zigzag; utile per layout di l'imaghjini pesanti) è u mudellu F (vettore di linea; utile per layout di testu pesante).

Sopra o sottu à u fold. Disposizione di u situ web

In u web design, u "fold" hè a linea à quale una pagina web hè tagliata per via di limitazioni di dimensione di u screnu. U cuntenutu chì hè visibile quandu una pagina carica hè chjamatu "sopra a pagina", mentre chì u cuntenutu chì esige chì l'utilizatori scrollanu per apre si chjamanu "fondu di a pagina".

Quandu si tratta di u disignu di u layout di u situ web, u cuntenutu più impurtante è / o convincente (cum'è a pruposta di valore è a chjama à l'azzione) deve esse postu in modu sicuru à a cima di a pagina per chì l'utilizatori ùn anu micca bisognu di circà. Stu spaziu hè 1000 x 600 pixel per a maiò parte di e dimensioni di u screnu. Dittu chistu, i diseggiani ponu ancu aduprà a piega per cutà gràfiche intriganti è copià per invià l'utilizatori à scroll down mentre cuntinueghjanu a so interazzione cù a pagina web.

Sistemi di griglia. Disposizione di u situ web

Un sistema di griglia hè un layout basatu nantu à misure è linee guida dure. A griglia hè custituita di culonni (spazii designati per mette u cuntenutu) è gutters (i spazii vacanti trà e culonni).

Spaziu viotu

U spaziu biancu, qualchì volta chjamatu spaziu negativu, hè solu una zona di un disignu senza cuntenutu, vale à dì spaziu viotu. Mentri hè faciule per trascuratà è spessu tentativu di riempie di cuntenutu, u spaziu biancu pò esse u più impurtante asset in u layout di u situ web.

Questa mockup di u situ web attrae l'attenzione cù un spaziu biancu efficace.

Pensate à cumu una linea di testu nantu à una pagina bianca serà assai più efficau à catturà a vostra attenzione cà in una pagina cluttered with content. Ampiu spaziu biancu crea enfasi, facendu tutta a cumpusizioni menu difficiuli di leghje. A cuntrariu di e pagine stampate, a durata di una pagina web ùn hè micca limitata, dendu à i diseggiani assai più libertà in a strategia è l'usu di u spaziu biancu.

Tipi cumuni di layout di u situ web. Disposizione di u situ web

I layout di u situ web sò raramente creati da zero; in fatti, hè spessu dettu chì questu ùn hè micca u casu. A maiò parte di i siti web muderni sò basati nantu à schemi di layout cumuni chì sò usati in modu coerente, cù variazioni ligere, in Internet.

Mentre chì un certu gradu di originalità hè impurtante in ogni disignu, i siti web sò pensati per esse immediatamente capitu è ​​utilizatu. Allora, quandu l'utilizatori s'abituanu à certi tipi di layout annantu à l'anni, hè sensu per i diseggiani per stà cun elli. Ricurdativi chì in ultimamente u layout deve esse praticu, è menu tempu l'utilizatori passanu à amparà un novu layout, più tempu si dedicanu à aduprà veramente u situ. In più di questu, eccu alcuni di i layout di u situ web più cumuni:

Disposizione di una sola colonna

Un layout di una sola colonna hè un layout chì mette u cuntenutu sequenziale in una sola colonna, spessu centrata.

Parechje disposizioni di e pagine web cumincianu quì, postu chì u disignu mobile-first hè un approcciu longu cunsigliatu è i siti web mobile sò spessu disposti in una sola colonna per via di restrizioni di dimensione. Stu layout hè più utile per e pagine di destinazione o cuntenutu basatu in canali, cum'è rete suciali è i blog perchè reduce u numeru di elementi di pagina è prumove u scrolling.

Disposizione di duie colonne. Disposizione di u situ web

Un layout di duie colonne, à volte in una vista di schermu split, mostra u cuntenutu side-by-side.

Questu hè utile per mette in risaltu dicotomie trà dui elementi (per esempiu, uditori differenti nantu à i siti di vestiti, stile di serviziu prima / dopu, o opzioni duali. i prezzi). Hè ancu utile per equilibrà i grafici cù a copia, sustenendu sottile a lettura di u mudellu Z.

Disposizione multi-colonna. Disposizione di u situ web

Un layout multi-colonna hè spessu referitu cum'è un layout di ghjurnale o rivista. Si adatta u cuntenutu pesante di u situ web in una pagina.

Una griglia hè tipicamente aduprata per mantene l'ordine è a ghjerarchia fornendu un spaziu di colonna più largu per elementi più impurtanti, cum'è u cuntenutu principale, mentre chì l'elementi menu impurtanti cum'è un menu di navigazione, una barra laterale o un banner anu un spaziu menu proporzionatu. Questu hè utile per e pagine di l'imprese di l'imprese, siti d'imaghjini o video, publicazioni in linea, dashboards persunalizati, è siti web di shopping - siti web cù assai cuntenutu è categurie per dirigisce l'utilizatori.

Disposizione asimmetrica. Disposizione di u situ web

Un layout asimmetricu hè quandu l'elementi sò disposti in scala ineguale è vicinanza - basta à dì,  ùn simmetricamente. Ma mentre hè u cuntrariu di un sistema di griglia, l'asimetria ùn significa micca u caosu.

L'equilibriu hè impurtante in ogni disignu, è un layout asimmetricu solu ottene questu in modi inespettati, cum'è cumminendu un rendering à grande scala da un latu cù parechji elementi più chjuchi da l'altru. Questu hè utile per aghjunghje l'enfasi esagerendu certi elementi (per mezu di a dimensione litterale, culore o piazzamentu) annantu à l'altri. Puderà ancu sustene mudelli di lettura persunalizati (in uppusizione à quelli regulari citati prima).

I marchi chì ponu permette di piglià un accostu micca cunvenzionale à u disignu trovanu stu stile di layout ideale, vale à dì, siti web chì si focalizeghjanu in l'arti, anu un publicu avventuroso, o volenu mette in risaltu un pruduttu innovatore o rivoluzione.

Disposizione di u situ web cumpletamente disposta

Un grande disignu di layout di u situ web ùn solu u rende visualmente attraente, ma ancu rende intuitive. Questu hè u primu passu per fà una prima impressione nantu à l'utilizatori, invitendu à stà è vede tuttu u cuntenutu chì u vostru situ hà da offre. Disposizione di u situ web

Mentre chì questi principii di cuncepimentu di u layout di u situ web ponu dà un puntu di partenza, duvete sforzà di fà tuttu ciò chì hè pussibule per furnisce una sperienza eccezziunale per i visitori di u vostru situ. È u megliu modu per uttene un disignu mudernu di layout di u situ web hè di travaglià cù un designer prufessiunale.

 АЗБУКА «