L'arte di costruire migliori siti web

La creazione di siti web è diventata quasi un'abilità comune in questi giorni, e c'è una tale sovrabbondanza di siti in competizione con i tuoi che qualsiasi cosa tu possa fare per distinguerti dalla massa sarà un grande aiuto.

Cosa possiamo fare per far sì che i nostri siti vengano notati, ammirati e prestati attenzione? Richiede un certo aggiustamento del modo in cui pensiamo al design del sito. In questo breve articolo, daremo un'occhiata ad alcune delle cose fondamentali che sono necessarie per creare siti web migliori.

Il contenuto deve avere la priorità

Come designer, saremo sempre molto interessati a creare disegni sorprendenti. Ovviamente questo non si applica a coloro che si definiscono semplicemente designer, perché non permettono alle loro anime di piangere sulla pagina, custodendo eternamente un momento di ispirazione nella gloria elettronica.

Ciò che i proprietari dei siti vogliono, naturalmente, è che le persone leggano i loro contenuti, li coinvolgano e magari comprino qualcosa a causa di ciò. Le belle foto sono meravigliose da avere, ma non se impediscono all'utente di sperimentare il contenuto.

In questo caso, ciò che potremmo considerare come "miglioramenti stilistici" deve sicuramente tornare alla presentazione principale. Se devi lasciar cadere qualcosa, dovrebbe sempre essere l'elemento stilistico.

immagine per gentile concessione di

Il design reattivo è essenziale (tranne quando non lo è)

Il design reattivo è così importante in questi giorni a causa dell'enorme numero di persone che usano i loro telefoni per la navigazione web e del fatto che la maggior parte dei browser telefonici continua a fare un pessimo lavoro di rendering delle pagine web.

Ci sono alcune eccezioni degne di nota, ma sono molto rare. Tali eccezioni sarebbero quando qualcosa esigenze per essere visualizzato sulla pagina in modo che il contenuto abbia senso e dove deve essere di una dimensione impostata. Alcune cose semplicemente non funzionerebbero se ridotte troppo.

Casi come questo devono essere gestiti con cura. Come si farebbe utilizzare una colonna reattiva speciale che viene visualizzata solo quando viene rilevata una dimensione dello schermo che è troppo piccola per visualizzare il contenuto, con un messaggio che richiede all'utente di visualizzare il contenuto su un monitor più grande.

Questo generalmente sarà qualcosa che dovresti evitare di fare, ma in circostanze eccezionali è accettabile finché viene trattato con tatto.

illustrazione per gentile concessione di

Il contenuto importante deve essere ovvio

Mentre dovrebbe essere ovvio, così spesso non sembra esserlo. Il design non dovrebbe rendere le cose importanti sottili. Deve rendere importante ciò che è importante ed essere visto dallo spettatore prima di tuttoeppure tanti designer cercano di essere "creativi" e di sottomettere quegli elementi importanti.

Non fare questo errore Gli utenti non possono rimanere sul sito a lungo, quindi portare il marchio davanti ai loro occhi è cruciale. Anche se se ne vanno velocemente, hai almeno fatto una buona impressione. Più tardi, quando incontrano il marchio, lo riconosceranno come familiare e saranno più propensi ad acquistare da un marchio familiare (cioè "fidato").

Quello che succede è una specie di auto-imbroglio cognitivo, in cui la mente cosciente dice "Se ho sentito parlare di questo, deve essere buono." Ecco perché le aziende sono disposte a spendere milioni di dollari solo per ottenere il loro logo su un cartello a un evento sportivo.

Cos'altro è importante però? Bene, la risposta a questa domanda dipende dal tipo di sito che stai costruendo. Quello che devi fare è pensare a cosa vorresti cercare se visitassi questo sito. Di solito è molto diverso da quello che un honcho aziendale dirà di voler mostrare. Le cose che le persone stanno cercando sono le cose importanti da includere e mettere in risalto.

Gli elementi stilistici dovrebbero integrarsi facilmente

I tuoi abbellimenti di design dovrebbero rendere lo spettatore sbalordito in un buon modo. Dovrebbero portare diletto piuttosto che seccarsi. Molto spesso i progettisti si lasciano trasportare e aggiungono cose a una pagina per generare il "fattore wow" senza assicurarsi che queste cose non abbiano il potenziale per essere noiose.

È inoltre necessario assicurarsi che tali abbellimenti si degradino con grazia. Quando non possono essere visualizzati correttamente, non dovrebbero essere visualizzati affatto e dovrebbe apparire come se non fossero mai stati lì.

gif per gentile concessione di

Strati per il salvataggio

Puoi aggiungere questi abbellimenti attraverso l'uso dei livelli. Le persone che creano design reattivi sembrano aver dimenticato di avere uno stack 3D con cui lavorare, e di conseguenza mancano le vere potenzialità del design reattivo.

Un esempio di come funziona ... Immagina di avere un sito in cui hai un layout con più punti di interruzione. Il modo di pensare convenzionale dovrebbe mettere tutto su un livello, il che porterà ad affollare schermi più piccoli, costringendoti a lasciar cadere le cose, o (come di solito è il caso), mostrare un orribile design.

Queste ultime due parole non dovrebbero mai andare insieme quando parli di qualcosa che hai creato. La cosa buona è che in realtà puoi evitare la situazione attraverso l'uso dei livelli.

Impilando elementi stilistici su un livello separato, puoi nasconderli o mostrarli a tuo piacimento, indipendentemente dal livello del contenuto, ed entrambi i livelli sono pienamente reattivi.

Supponiamo che l'utente stia visualizzando il sito su un monitor con una risoluzione di 2560 x 1440. Il nostro livello di contenuto inferiore si estende su tutta la larghezza dello schermo, ma possiamo impostare dei margini su di esso che posizionerebbero il contenuto all'interno di un bordo decorativo che potrebbe essere di qualsiasi dimensione desideriamo.

Posizionando quel bordo decorativo sul livello superiore senza margini, possiamo semplicemente impostare la larghezza per essere uguale alla dimensione dei margini sul livello inferiore.

Mentre l'utente passa attraverso diversi punti di interruzione dello schermo, i due livelli possono continuare a lavorare insieme in questo modo, e il livello superiore può persino mostrare bordi completamente diversi per ogni punto di interruzione. Fino al punto di interruzione finale, ignoriamo del tutto il livello superiore, semplicemente impostandolo per essere nascosto.

Il potenziale qui è ovvio. Hai un gran numero di fastidiosi link pubblicitari nella colonna di destra? Puoi nasconderli dagli utenti con schermi piccoli, inoltre puoi aggiungerli su richiesta usando jQuery.

Finalmente un modo per separare correttamente il contenuto dal design

Questo è il modo in cui le pagine web dovrebbero funzionare. Memorizzando i tuoi "extra" su un livello completamente separato, si ottiene una separazione ancora maggiore del contenuto dal design, poiché il livello superiore può essere modificato in qualsiasi momento senza influire sul livello inferiore e viceversa.

Divertiti a sperimentare con la libertà che ti si apre, in modo da poter giocare con tutti i tipi di idee creative mentre il contenuto stesso rimane inalterato.

È esattamente lo stesso concetto di usare macchine virtuali per sandboxing. Qualunque cosa tu faccia, non puoi influenzare il contenuto della pagina perché è isolato dal livello decorativo.

immagine di cortesia per gentile concessione di Matt Carlson

Bogdan Rancea

Bogdan è membro fondatore di Inspired Mag, avendo accumulato quasi 6 anni di esperienza in questo periodo. Nel tempo libero ama studiare musica classica ed esplorare le arti visive. È piuttosto ossessionato dai fissaggi. Possiede già 5.