Salve, compagno lettore!

Perché abbiamo bisogno di pagine di destinazione in 10 blocchi, se Informazioni importantiè nella prima schermata e puoi limitarti alle sezioni “Chi siamo”, “Servizi”, “Prezzi” e “Contatti”? La risposta è semplice: a assorbire l'attenzione acquirente e motivare entrare in relazione con il prodotto e incoraggiare ad acquistare il prodotto.

Più usato tecniche di coinvolgimento dei visitatori nel processo di acquisto di un prodotto è AIDA(dall'inglese Attenzione-Interesse-Desiderio-Azione) e PMPH(Dolore-Più Dolore-Speranza-Soluzione). Guidati da queste tecniche, viene costruita una struttura logica pagina di destinazione e determinare i blocchi che saranno presenti sul pianerottolo.

Ho raccolto per te 20 esempi visivi di blocchi svolgere una specifica funzione informativa. Gli esempi torneranno utili se tu, così come facilitare la comunicazione con il designer e il designer della tua landing page.

In questo post, conoscerai la prima metà: 10 blocchi. I restanti 10 esempi sono nel prossimo articolo di agosto.

20 blocchi di atterraggio: scegli il tuo

1. Blocco componenti del prodotto, attrezzature;
2. Blocca garanzie (triple);
3. Un blocco sui risultati/vantaggi della tua azienda;
4. Blocco sui dipendenti dell'azienda;
5. Blocco sui servizi/dipartimenti dell'azienda;
6. Blocco su partner/clienti;
7. CTA (Call-to-action, invito all'azione);
8. Blocca i vantaggi del cliente dall'utilizzo del tuo prodotto ("Perché noi?");
9. Blocco sul processo di fornitura del servizio (consegna, metodo della transazione);
10. Calcolatore di blocchi;
11. Blocca con una promozione + limitatore di tempo;
12. Blocca con un regalo + condizioni per ricevere un regalo;
13. Blocco con una mappa dell'ubicazione dell'azienda ("Come arrivare");
14. Blocca con le informazioni di contatto;
15. Tabella comparativa dei blocchi;
16. Blocco identificazione "Per chi?";
17. Domande frequenti sul blocco.

*La numerazione dei blocchi è approssimativa: l'ordine dei blocchi sulla pagina di destinazione dipende dalla nicchia. Puoi determinare l'ordine dei blocchi utilizzando tutti gli stessi strumenti Yandex Metrica (, scorri la mappa, fai clic sulla mappa) questo articolo ti aiuterà.

Contiene informazione chiave per un visitatore in arrivo, USP della tua azienda. È auspicabile che anche queste informazioni siano competitive. A seconda della nicchia, tali informazioni possono essere: il prezzo del prodotto (da 488 rubli per 1 pezzo), i tempi di consegna (consegna in 2 giorni), il luogo di produzione (direttamente dalla Germania). Maggiori dettagli possono essere trovati nel precedente articolo.

Adatto a: argomenti all'ingrosso; nicchie in cui l'acquirente non è sufficientemente consapevole dei vantaggi del prodotto (principalmente il prodotto).

Il blocco può essere la risposta alla domanda dell'acquirente "Perché è così costoso?" Se descrive in dettaglio le caratteristiche del prodotto. Ciò è necessario per creare un'immagine più chiara dell'oggetto del desiderio nella testa di un potenziale cliente.

3. Bloccare i componenti del prodotto, l'attrezzatura

Adatto a: descrizioni di servizi complessi; nicchie per l'organizzazione del tempo libero; descrizioni dei prodotti.

Se il blocco sulle caratteristiche del prodotto mostra il prodotto nella sua interezza, il blocco sui componenti scompone il prodotto (bene o servizio) in componenti.

4. Garanzia di blocco (tripla)

Adatto a: qualsiasi pagina di destinazione.

Molto spesso si trova dopo il blocco con il costo del prodotto. È costruito sulla base delle obiezioni del pubblico di destinazione e le chiude, dimostrando i vantaggi del servizio nella tua azienda.

5. Blocco risultati/benefici

Adatto a: qualsiasi atterraggio; un prodotto di marca di una nota azienda; particolarmente importante in una nicchia altamente competitiva.

Particolarmente importante per le imprese in una nicchia altamente competitiva. Ad esempio, se più aziende offrono lo stesso prodotto, allora quella che fornisce le condizioni più convenienti per la transazione e mostra la competenza della sua azienda (da che anno esiste l'azienda, il numero di progetti realizzati, sconti e regali a regolari clienti, numero di punti vendita, ecc.).

6. Blocco sui dipendenti dell'azienda

Adatto a: nicchie di servizio

Utile in situazioni in cui è importante non farlo CHE COSA l'acquirente riceverà COME risultato sarà raggiunto.

7. Blocco sui servizi / dipartimenti dell'azienda

Adatto a: argomenti di servizi complessi; landing page con più prodotti in un unico ambito di applicazione.

8. Blocca i partner

Adatto a: qualsiasi pagina di destinazione.

Il blocco aumenta la fiducia del visitatore se vengono utilizzati i loghi di clienti famosi.

Adatto a: info-business; Servizi; nicchie in cui il processo è importante (COME) ottenere un risultato.

Un'ottima aggiunta ai casi: dimostrazione visiva ERA/È STATO, oltre a infografiche e schermate di stampa con statistiche.

Nicchie in cui la dimostrazione è importante:

Continua…

Oggi abbiamo discusso dei primi 10 blocchi di atterraggio, ne pubblicheremo altri nel prossimo futuro - rimanete sintonizzati!

Esplorando le distese della rete, molti probabilmente noteranno che la maggior parte dei siti è costruita su una griglia. Elementi o blocchi in tali siti si trovano sulla pagina non in modo casuale, come diversi anni fa, ma in una certa sequenza e strutturati (a volte questo non si nota a prima vista). Questi siti sono ben bilanciati e tendono ad apparire puliti e ordinati. Gran parte del merito di questa pulizia appartiene a griglia, che è alla base del design e fornisce all'utente una struttura del sito chiara e senza distorsioni.

Mentre le griglie rappresentano in genere semplici intersezioni di linee orizzontali e verticali a spaziatura predeterminata, molti designer le usano per decorare e accentuare evidenti forme geometriche e percorsi visivi. Possiamo vedere questi percorsi e forme in siti di portfolio, gallerie, blog e altri progetti creativi. Questo non è sorprendente, dal momento che la griglia ha un numero di proprietà utili e vantaggi quali:

• Creazione di percorsi visivi per guidare gli utenti
• Combinando vari componenti in un unico insieme
• Ordinamento delle informazioni

E, naturalmente, la griglia è il modo migliore per dimostrare la bellezza delle linee rette (non dovrai andare lontano). Di seguito abbiamo preparato siti Web in cui la griglia è più di una semplice base di progettazione.

Conclusione

Come già accennato, la griglia è parte integrante del design e trasforma facilmente il caos in ordine, e nella progettazione di siti web, più che altrove, questa caratteristica è davvero importante. La maggior parte degli utenti desidera informazioni in modo rapido e semplice e no modo migliore piuttosto che presentarli con una struttura chiara e ben organizzata.

No, questo non significa affatto questo aspetto esteriore Il sito dovrebbe essere lineare e semplice. A volte, anche semplici forme geometriche, sapientemente "diluite" con colori, immagini e grafica (ricorda), possono essere davvero attraenti. Cosa ne pensi? Una divisione così esplicita in blocchi non sembra attraente?

La questione della scalabilità del sito è rilevante per ogni web designer. D'accordo, quando creo il prodotto visivo di un autore, voglio che rimanga ugualmente bello e conveniente per gli utenti di qualsiasi dispositivo. L'opzione è inaccettabile quando un blog o un sito web ha un bell'aspetto su uno schermo con una risoluzione di 1920x1080px ed è completamente illeggibile sullo schermo di uno smartphone con parametri di 240x320px.

10-15 anni fa non esisteva una tale varietà e numero di monitor. Pertanto, progettare per i siti Web è stato facile. Crei un design statico regolare per una larghezza dello schermo fissa e puoi essere certo che la maggior parte degli utenti vedrà il sito come previsto.

Oggi gli utenti non solo dispongono di monitor con un'ampia varietà di risoluzioni, ma 3,5 miliardi di persone accedono a Internet da dispositivi mobili: netbook, tablet, smartphone, ecc. Creare siti web utilizzando i vecchi metodi non è più comme il faut.

La prima soluzione che è venuta in mente a molti sviluppatori è stata quella di creare solo una versione "leggera" separata del sito per dispositivi mobili. Questo è ciò che hanno fatto molti importanti portali. Tuttavia, negli ultimi anni, il numero di diversi tipi e sottotipi di dispositivi da cui gli utenti accedono alla rete è cresciuto a un ritmo incredibile. E devi anche tenere conto del fatto che anche i possessori di tablet o smartphone visualizzano la versione completa del sito. Così alla fine i web designer e gli sviluppatori hanno avuto l'idea di un design "reattivo".

Fino ad ora, puoi trovare diverse versioni di come i diversi specialisti IT intendono il "design reattivo". Proviamo a capire quali sono le opzioni per lo sviluppo del design di un sito web.

Progettazione statica

"Statico" o "statico" si riferisce a un sito costituito da pagine HTML immutabili. Tale sito implica la presenza di un tema fisso con una larghezza fissa e molto spesso contiene una o letteralmente più pagine. Per visualizzare un sito del genere al centro dello schermo, sono sufficienti 1000 px. Il contenuto sarà sempre allineato al centro.

Vale anche la pena considerare che solo una persona con una buona esperienza nello sviluppo web può aggiornare un sito statico. Non ha un pannello di amministrazione, quindi tutte le modifiche devono essere apportate tramite il codice sorgente.

Vantaggi della progettazione statica:

• Risparmio di tempo e fatica durante lo sviluppo;
• Richiede meno carico di hosting;
• Immagini, materiali video, banner possono essere visualizzati senza timore che si sovrappongano o si spostino a diverse risoluzioni del monitor.

Svantaggi del design statico:

• Sul dispositivo mobile il sito verrà visualizzato con una barra di scorrimento orizzontale;
• I monitor widescreen mostrano un design statico piuttosto scadente, un'opzione non per coloro che cercano l'aspetto appariscente.

C'erano siti molto più statici: l'emergere e lo sviluppo di CMS hanno contribuito a ridurne il numero a favore di quelli dinamici. Esempi di siti statici:

Progettazione dinamica

"Il design reattivo è una delle tendenze più attuali nello sviluppo di siti Web, che è arrivata sul serio e da molto tempo" - quasi tutti i siti Web dedicati allo sviluppo web e . Scoprire di cosa si tratta non è difficile. Tuttavia, ci sono alcune sottigliezze che riguardano la comprensione e la percezione di un tale progetto. Diamo un'occhiata a loro.

Design "gomma".

La caratteristica principale di questo design è che la larghezza delle colonne è impostata in percentuale, non in pixel. Pertanto, il design "gomma" a qualsiasi risoluzione del monitor si estende per l'intera larghezza dello schermo. Realizzare un tale design, specialmente quando si utilizza un layout a blocchi, è un po 'più difficile di uno fisso, ma l'utente non vedrà campi vuoti sulla pagina. È interessante notare che inizialmente il design in gomma iniziò ad essere ampiamente utilizzato in RuNet, mentre in Occidente gli sviluppatori rimasero impegnati nel design statico per molto tempo.

Tuttavia, il semplice design in gomma presenta alcune limitazioni e svantaggi. Con l'ampia gamma di dimensioni dello schermo che hanno i dispositivi moderni, è difficile implementare un design fluido in modo che tutto appaia ugualmente bene a qualsiasi risoluzione, in modo che il design non si "diffonda", in modo che immagini e video non escano fuori limiti di blocco, ecc. Per questo motivo, erano necessarie altre soluzioni per creare un sito veramente universale.

Design adattivo

Per rendere il sito altrettanto bello cellulare e su un monitor di grandi dimensioni, gli sviluppatori di alcuni siti hanno intrapreso la strada dello sviluppo di diverse opzioni di progettazione, di fatto indipendenti, per diversi dispositivi. Quando un utente ha visitato il sito, il server ha determinato il tipo di dispositivo e la risoluzione dello schermo e ha "regalato" l'una o l'altra versione del sito. Inoltre, ogni versione è stata pre-ottimizzata per diverse risoluzioni. Immagini più piccole sono state utilizzate per le versioni per schermi a bassa risoluzione e alcuni elementi sono stati rimossi del tutto. Anche il layout del blocco stesso era diverso dalla versione "grande".

Il responsive design è giustificato quando si creano progetti su larga scala: portali informativi, negozi online, forum, siti Web aziendali e altre risorse simili. Sembra particolarmente impressionante su monitor con una diagonale di almeno 15,6 ''.

Il principio dell'adattabilità si basa sulla creazione di un singolo URL che regola il contenuto per adattarlo vari formati schermi. Esempi:

Guarda come cambia la disposizione del testo e delle immagini su diversi schermi. Perché è bello? Uno dei motivi è che Google preferisce tali risorse in risultati di ricerca. Un altro motivo è che tali siti sono più facili da progettare e mantenere, e questo facilita il lavoro di molte persone.

Design "reattivo".

L'ultimo metodo ideato dai web designer è stato il "responsive" design (ing. responsive design), che si contrapponeva al consueto design "adattivo" (ing. adaptive design), anche se fino ad ora questi termini sono spesso confusi e usati in modo senso simile. Il design "reattivo" combina le caratteristiche dei design adattivi e "fluidi". Si adatta automaticamente a qualsiasi larghezza dello schermo, proprio come la gomma. Allo stesso tempo, nel processo di regolazione, la posizione dei blocchi, la dimensione delle immagini può cambiare. Alcuni elementi possono anche apparire, scomparire o cambiare. Ad esempio, il solito menù orizzontale può cambiare in menu a discesa.

Un punto ancora più importante sono i luoghi da cui le persone arriveranno al tuo sito. Pertanto, è molto importante tenere conto di qualsiasi velocità di Internet, perché un numero enorme di persone vive in aree remote dove la velocità di Internet non è nemmeno di 1 Mb/s. Esiste uno studio secondo il quale il 57% degli utenti lascerà il tuo sito se il caricamento richiede più di qualche secondo. Non molto tempo fa, Google ha iniziato a considerare la velocità nel classificare i siti. Lei non provvede grande influenza alla posizione dei siti con una velocità di caricamento media, ma se la pagina non si carica in un certo tempo, l'algoritmo di ricerca applica sanzioni a tale sito.

Tutto ciò ci fa dare un'occhiata più da vicino alla velocità di Internet e fornire all'utente la possibilità di scaricare contenuti abbastanza velocemente alle velocità più basse. Cioè, il design "reattivo" non è più solo una storia sulle dimensioni dello schermo, ma vari scenari, soluzioni per le quali dovrebbero essere flessibili e ponderate "da e per".

In precedenza, su Internet era diffuso un tipo di layout tabulare, a cui . Tuttavia, nel tempo, questo approccio alla creazione della struttura del sito è diventato obsoleto ed è stato sostituito da un layout a blocchi.

Differenze tra layout a blocchi e tabulare

Se il layout tabulare implica che il contenuto della pagina sia all'interno del tag

, quindi il concetto di layout a blocchi si basa sull'uso attivo di tag universali è una tabella che dovrebbe essere utilizzata per visualizzare dati tabulari e nient'altro.

L'unico svantaggio tangibile del layout a blocchi è che i siti creati su di esso possono essere visualizzati in modo diverso nei browser. Per evitare ciò, è necessario rendere il layout "cross-browser", ovvero visualizzato ugualmente da qualsiasi browser.

L'essenza del layout a blocchi

A redattore grafico viene creato un layout del sito: viene contrassegnato dove si troverà quale area della pagina (intestazione, fondo, barra laterale, contenuto principale) e quanto spazio occuperà, vengono preparate immagini, sfondi.

Ogni parte della pagina è posizionata nel proprio blocco