Progettazione di layout dell'interfaccia utente Web Killer con omaggi - Guida definitiva

Il campo del web design ha preso una boccata d'aria in pochi anni. Ora ci sono più designer attivi in tutto il mondo che mai, tutti collaborando su idee progettuali innovative. E i concetti alla base di molte di queste tendenze sono stati sviluppati attraverso grafici professionisti.

Possono essere necessari mesi o addirittura anni prima di comprendere appieno gli aspetti tecnici della creazione di un'interfaccia utente. È necessario considerare le dimensioni e il posizionamento degli elementi della pagina, nonché la leggibilità del testo e delle etichette. Con un po 'di tempo libero puoi scavare in un approccio minimalista per costruire siti web con meno e ridurre la confusione. E anche allora, ci sono dozzine di altre tecniche di progettazione da considerare.

Per questa guida ne ho abbinati alcuni moderne tecniche di progettazione dell'interfaccia utente con omaggi che è possibile scaricare e giocare con. Spero che questo possa offrire una motivazione a chi è interessato a una carriera nella costruzione di grafica / web design. Anche i web designer professionisti potrebbero trovare alcune di queste tendenze utili per il tuo prossimo progetto.

Esercitati con i modelli completi

Quando hai le competenze per progettare il tuo layout da zero, non è necessario iniziare con i modelli. I principianti, d'altra parte, possono sentirsi più a loro agio partendo da un design completo e lavorando nei dettagli più fini.

Esistono eccellenti download gratuiti di modelli di siti Web PSD completi per portfolio, home page, blog e molte altre categorie. Questi sono i progetti perfetti per iniziare a familiarizzare con a “generale” layout web. Ogni sito web avrà esigenze diverse per gli elementi della pagina e dovrai determinare quali elementi sono importanti.

Ecco un esempio PSD chiamato "AppCivilization", progettato da Martin Fabricius. Il layout è disponibile per uno studio creativo che progetta app mobili e possibilmente siti web. Verso il basso troverai un piccolo pannello di icone di app in mostra in un portfolio. Noterai anche che l'intero disegno è suddiviso orizzontalmente in un'intestazione, nella presentazione principale, nel contenuto principale e nel piè di pagina oscurato.

Fonte originale - Download

Progettazione di pagine di destinazione

Diamo un'occhiata a un altro omaggio disegnato da Martin. Il prossimo esempio è una pagina di destinazione che puoi utilizzare per vendere qualsiasi tipo di prodotto. Generalmente si tratta di beni digitali che possono essere scaricati dall'utente, ad esempio app, foto, icone, modelli, ecc.

Fonte originale - Download

Ma la parte migliore del suo design è che è molto flessibile per i principianti. L'intestazione usa ancora una piccola navigazione in alto con una grande immagine, ma in particolare le azioni dell'utente previste sono diverse. Lui ha un grande “Compralo!” pulsante che si staglia proprio sopra la piega. Su una pagina di destinazione del prodotto ciò attirerebbe più attenzione di una presentazione jQuery.

Un'altra grande tecnica di interfaccia utente è la piccola funzione di visualizzazione dell'iPhone a metà della pagina. Martin include un colpo di anteprima per iPhone, il pulsante App Store e un piccolo elenco di funzionalità chiave. Quando i visitatori cercano i dettagli del prodotto non è possibile rendere le cose più semplici di un elenco formattato.

Altri modelli:

Ecco alcuni modelli PSD gratuiti che abbiamo rilasciato nel pass:

Modelli PSD per siti web aziendali "BiZ"
Modello PSD del sito del prodotto "ThinkJuice"
Modello PSD sito professionale
Modello PSD sito portfolio "Polo360"

Potresti anche essere interessato a questi:

Modelli di siti Web aziendali
Tutorial della pagina "Prossimamente" + modelli

Navigazione principale del sito

Menu e pulsanti sono solo strumenti per costruire elementi di pagina molto più grandi. Non si può negare che la navigazione principale del tuo sito web abbia uno scopo molto significativo. Ne hai bisogno perché il tuo sito sia facilmente accessibile con i possibili metodi di fallback per gli utenti mobili.

Di seguito è una barra di navigazione fresca con un effetto texture a punto. Lo stile di evidenziazione può essere descritto come una scatola oscurata o come una punta rivolta verso il basso nel contenuto della pagina. Questo stile è stato preminente nel corso degli anni e ha un bell'aspetto nella giusta ambientazione.

Fonte originale - Download

Un altro freebie simile è la navigazione testata testata disegnata da Edi Gil. Mi piace molto il modo in cui questa seconda barra di navigazione include sia un elenco di collegamenti che alcuni pulsanti di pagina aggiuntivi. Ti consigliamo di offrire link secondari ai visitatori dove possono trovare i tuoi profili sul Web.

Fonte originale - Download

Stili di menu alternativi

Oltre alla tipica barra di navigazione orizzontale ci sono altri stili di design da considerare. I collegamenti verticali possono essere suddivisi in diversi sottotitoli che lasciano più spazio per il contenuto della pagina.

Prendiamo ad esempio il menu gratuito qui sotto disegnato dal sito Icojam.

Ogni intestazione è costruita per espandersi e collassare in base all'oggetto selezionato. Inoltre, il design consente a un piccolo contatore numerico di sedersi sul lato destro di ogni categoria. Questo sarebbe meglio compilare come navigazione di un blog per contare quanti post sono archiviati in ciascun argomento.

Fonte originale - Download

Suggerimenti di navigazione / Tutorial:

50+ Pulire gli script di navigazione basati su schede CSS
Best practice di navigazione Breadcrumb ed esempi
Costruire la navigazione mobile con jQuery
Coding Breadcrumb Navigation in CSS3
Progettare la navigazione con meno CSS

Moduli Web più puliti

L'era moderna di Internet è lontana da un terreno di incontro statico. Gli utenti condividono costantemente informazioni e interagiscono tra loro su base giornaliera. La maggior parte di questa condivisione di testo e contenuti multimediali è gestita tramite moduli Web.

Dovremmo esaminare solo un paio di esempi di come è possibile progettare input e pulsanti di forma puliti. Il design dei tuoi elementi può fare molto per invitare i tuoi visitatori a usarli effettivamente. E questo a sua volta aumenta la credibilità del tuo sito e aumenta la visibilità della pagina.

Campi di accesso

Ci sono alcuni grandi esempi di PSD per i moduli di accesso da verificare. Questo accesso gratuito tramite WP Scientist ha tutti i tuoi elementi standard. Due campi di input per login / password, un pulsante di invio e caselle di controllo per gestire i cookie di sessione.

Questo modello di design è perfetto se puoi implementare gli effetti con jQuery. La testa della freccia in alto a destra ti fa pensare a una finestra di configurazione in stile popup. Questa è una tecnica meravigliosa per risparmiare spazio sul tuo sito mantenendo il modulo nascosto fino a quando un utente fa clic sul link di registrazione.

Fonte originale - Download

Il modulo sottostante è gratuito da scaricare grazie al designer Gil Huybrecht. Ha usato un modello simile con uno sfondo granuloso e una trama di carta. Quello che mi piace particolarmente del design di Gil sono gli elementi "oversize". È molto più amichevole l'atterraggio su un modulo di accesso che riempie l'intera pagina. Gli utenti possono facilmente vedere cosa stanno scrivendo e c'è meno confusione.

Fonte originale - Download

Se hai esperienza come sviluppatore frontend usando CSS3, è molto semplice tradurre questo grafico in codice. È anche possibile implementare l'effetto bagliore esterno selezionato e gli angoli arrotondati per il pulsante e i campi di input.

Contatti

Un altro modulo che troverai praticamente su ogni sito web è un modulo di contatto. Questo normalmente includerà i campi per il nome del mittente, l'e-mail e il contenuto del messaggio.

Il freebie qui sotto è un fantastico esempio di utilizzo di trame e icone personalizzate.

Anche il design usa testo segnaposto invece di etichette. Ciò significa che quando il modulo carica per la prima volta ciascun campo viene impostato con un valore predefinito (es: il tuo nome). Ma poi quando inizi a digitare il segnaposto cancella e il tuo contenuto viene invece visualizzato. Tutti i browser conformi agli standard supportano questo effetto e possono risparmiare spazio sulla pagina.

Fonte originale - Download

Un altro meraviglioso omaggio da prendere è questo modulo di contatto a schede progettato dal talento Jonno Riekwel. Questo design è molto più semplice e presenta etichette sopra ogni input. Questa è un'ottima soluzione per le grandi aziende o le startup che hanno bisogno di inviare messaggi attraverso diversi reparti dell'azienda.

Fonte originale - Download

Tutorial sui moduli di contatto:

Login / Modulo di iscrizione: idee e bellissimi esempi
Creare un modulo di accesso agli effetti di carta impilata
Creare un modulo di contatto HTML5 / CSS3 basato su Ajax

Nastri e banner

Solo 6 o 7 anni fa gli angoli arrotondati stavano cominciando a salire nelle tendenze del design popolare. Ora siamo arrivati ancora più lontano con ombre e nastri d'angolo.

Fonte originale - Download

Alcuni di questi elementi possono essere utilizzati come punti salienti del design, come un contatore di commenti o come data di pubblicazione per un blog. Il nastro cucito sopra è perfetto per portafogli o pagine di progetto in cui si desidera catturare l'attenzione del visitatore. Puoi anche provare un nastro verticale simile in cui il disegno cade dall'alto.

Questi piccoli effetti di pagina fanno molto per migliorare il layout. I visitatori prendono atto e ameranno questi convenevoli estetici. Ma considera che i piccoli nastri angolari sono solo una parte di questa tendenza di design.

Fonte originale - Download

Inoltre, i design di banner completi sono diventati incredibilmente popolari per il riconoscimento del marchio. Puoi utilizzarli nel tuo logo, nella tua navigazione, nella tua homepage o anche nei post dei blog in primo piano. Le implicazioni sono praticamente illimitate con buone capacità di progettazione.

Avvolgere l'angolo

Un altro effetto banner a nastro molto specifico viene eseguito avvolgendo il disegno attorno all'angolo della pagina. Questo crea l'illusione che la tua pagina sia tridimensionale e il nastro sia avvolto nella parte superiore del tuo sito web.

Il seguente disegno è gratuito al 100% per il download e può essere utilizzato per le proprie idee di progetto. Puoi vedere come questo attirerebbe l'attenzione dei visitatori e perché questa tendenza è diventata così frenetica. Fai attenzione a non abusare dei banner. Alla rinfusa, questi possono diventare molto fastidiosi, proprio come gli effetti "lucido / specchiato" del vecchio web 2.0.

Fonte originale - Download

Progettazione con pulsanti

A parte i collegamenti ipertestuali, avrai più interazione da parte dei visitatori con i pulsanti. Questi elementi della pagina possono eseguire qualsiasi operazione con l'aiuto delle chiamate jQuery e Ajax, ad eccezione dei pulsanti per il collegamento a contenuti statici, come ad esempio i download gratuiti.!

Il kit UI qui sotto, disegnato da Matt Gentile ha molto più dei semplici pulsanti. Il suo set PSD è fantastico per i principianti che cercano di raccogliere sfumature e trame per costruire forme simili. Spesso i tasti dell'interfaccia utente sono di qualità molto più elevata rispetto ai singoli PSD.

Fonte originale - Download

Come creare variazioni

Mentre passi del tempo a praticare queste tecniche, vorrai creare molti stili diversi nel tempo. Ciò potrebbe comportare la commutazione di pulsanti simili tra diversi progetti e layout. Un buon esempio sono i set lattei offerti dal designer Robert van Klinken.

Fonte originale - Download

Ognuno dei tre pulsanti originali ha uno stile sfumato diverso, ad eccezione del passaggio del mouse e degli stati attivi che sembrano simili. Quando lavori in Photoshop dovrai abbinare i colori tra i gradienti o spostare i colori su un livello effetti. Con questa comprensione puoi persino creare il tuo set di pulsanti gratuiti per il download!

Fonte originale - Download

Wood + Paper Textures

Quando hai bisogno di ravvivare i tuoi schemi di base, dovrai passare a metodi più furbi. Le trame sono sempre benvenute se è possibile implementarle correttamente attraverso sfondi CSS o contenuto a larghezza di banda. E due delle trame più popolari che ho visto sono legno e carta bianca.

L'idea del blocco note è davvero semplice ma può trasformarsi in un design di branding fresco come parte di un elemento dell'interfaccia utente o incorporato nella totalità del layout. Ma la carta non sembra sempre la migliore da sola e un'altra texture può aiutare gli stili a mimetizzarsi. È qui che possono entrare in gioco trame di legno più dettagliate.

Fonte originale - Download

Le immagini risaltano e sembrano meravigliose avvolte in un guscio esterno. L'intero concetto di texture è quello di dare al tuo sito web una sensazione o un'emozione specifica. I temi del legno possono evocare il senso della casa e della natura. C'è persino un fantastico kit di interfaccia utente web in legno da scaricare da Jeremiah Wingett. Se ti senti creativo, prova a mettere insieme alcune delle tue trame e vedere come si comportano in un ambiente basato sul web.

28 trame di legno ad alta risoluzione

Conclusione

I migliori web designer sono quelli che praticano quotidianamente e non lasciano mai che i loro fallimenti scoraggino i loro obiettivi finali. Devi essere reattivo e riprendersi rapidamente dal successo e dai tentativi falliti. I suggerimenti e gli omaggi in questa guida dovrebbero essere un buon punto di partenza per iniziare a imparare come costruire diversi concetti di pagina per un progetto web. E vorremmo leggere le tue opinioni sull'argomento nell'area di discussione post.