21 Pluripremiato Sito Web Designs & What They Did Right
Internet è pieno di alcuni siti web sorprendenti e stimolanti.
Questi fiocchi di neve speciali sono quelli che trovano modi innovativi per utilizzare ogni possibile design e confine tecnologico a loro vantaggio per creare esperienze che molte organizzazioni vorrebbero avere.
Trovare questi diamanti grezzi può essere una sfida incredibile, specialmente se stai pianificando una riprogettazione del sito Web e non sei sicuro di dove iniziare.,
Fortunatamente, siti come CSS Awards, Awwwards, Webby Awards, ecc. esistono per aiutare a evidenziare i siti che dovremmo spingere il nostro a riflettere.
Per aiutare a mostrare alcuni di questi siti vincitori, mi sono tuffato in ciascuno di questi siti premiati e ho tirato quelli che non sono solo bellissimi esempi di design moderno, ma anche esercitare UX, UI, architettura dell’informazione, ottimizzazione del tasso di conversione, marketing video, tattiche al massimo potenziale.
Quando si guarda ogni sito, è importante capire che questi non dovrebbero essere visti come modelli che si dovrebbe tentare di copiare., Invece, analizzali e trova le parti di essi che utilizzano strategie di design/marketing/contenuto che potrebbero essere riproposte e riviste in qualcosa che si adatta al tuo pubblico.
Detto questo, goditi questi 17 esempi killer di progetti di siti web premiati fatti bene.
Piuttosto guardare? Qui ci sono 5 dei miei preferiti!,
ESPN Sport di Programmazione
in Evidenza su Awwwards
ESPN prende i suoi contenuti sportivi e di programmazione al livello successivo con questa dinamica e accattivante posto pieno di grandi dimensioni, ad alta risoluzione, immagini e video. Il sito utilizza video di sfondo per tenere il passo con l’energia e le sezioni della rete sportiva con sottili effetti di hover e transizione e per mantenere l’esperienza utente liscia., Il cursore ‘sport in vetrina’ è completamente estasiante e fa un ottimo lavoro di mostrare ciascuno degli sport insieme a statistiche interessanti e dettagli informativi sui programmi disponibili.
Montage
Presentato su Awwwards
Montage porta il suo prodotto al livello successivo con questa homepage facile da manovrare che delinea chiaramente qual è il suo prodotto, come appare, qualità del prodotto e testimonianze., Il sito è un eccellente esempio di un approccio che puoi utilizzare per evidenziare il tuo prodotto e i punti più importanti a cui i tuoi utenti sarebbero interessati a trovare risposte. La sub-navigazione appiccicosa consente agli utenti di navigare facilmente all’interno della pagina per trovare esattamente ciò che stanno cercando.
Zillow
In primo piano sul Webby Awards
Trovare la casa perfetta è tutto di essere in grado di ricerca comodamente esattamente quello che stai cercando, salvare e memorizzare quello che ti piace, e rendere più facile trovare tutto in seguito., Zillow colpisce il chiodo sulla testa per tutti e tre questi punti con il suo sito immobiliare intuitivo. L’area di ricerca all’interno dell’area eroe rende facile per i nuovi utenti di selezionare rapidamente e cercare elenchi senza dover cercare qualche pagina di ricerca nascosta.
Revols
Presentato su CSS Design Awards
Revols adotta un approccio audace sul suo sito web ingrandendo le sue cuffie piccole e sofisticate utilizzando la fotografia macro e il video., La fotografia e il video rendono il sito incredibilmente focalizzato sul prodotto, quindi i suoi utenti diventano lentamente sempre più immersi nell’esperienza che queste cuffie possono darti. Il grande trattamento dei caratteri su questo sito è anche un bel tocco e aggiunge alla fotografia auricolari più grande della vita.
Fiftythree Pencil
Presente su SiteInspire
Fiftythree cattura tutte le caratteristiche e i vantaggi del suo stilo Pencil in questa pagina di prodotto standalone., Queste caratteristiche e vantaggi sono accompagnati da immagini per illustrare il prodotto in azione in modo che l’utente ha un tempo più facile visualizzarli e come possono applicare il prodotto. Anche il layout e il trattamento visivo della sezione anatomica del prodotto sono molto unici e fungono da modo dinamico per portare gli utenti a leggere di più sul prodotto, al contrario delle sezioni statiche una dopo l’altra.,
Morgan Stanley
In primo piano sui Webby Awards
A differenza dei tradizionali siti focalizzati sul prodotto, Morgan Stanley titola la sua homepage con un articolo che sperano di guidare una notevole quantità di traffico a (soprattutto perché si collega con le riunioni di famiglia di vacanza ci si aspetta di partecipare). Il resto del layout oltre l’eroe della homepage gioca con un layout incentrato sulla griglia per organizzare l’assortimento di articoli recenti che hanno pubblicato.
7., Boosted
Presente su Awwwards
Boosted ha portato quello che avrebbe potuto essere visto come uno skateboard medio al livello successivo introducendo foto incredibilmente dettagliate del suo prodotto accompagnate da descrizioni dettagliate sul suo sito. I toni di grigio e gli sfondi bianchi del sito aiutano a mantenere l’attenzione sui pulsanti di call-to-action arancioni e sullo skateboard dai colori vivaci che usano come esempio del prodotto., Mi piace anche il fatto che abbiano un blog che sembra evidenziare i problemi che hanno/stanno affrontando con il prodotto, aggiungendo un meraviglioso livello di trasparenza all’azienda.
8. Wozber
In primo piano su SiteInspire
Wozber ha fatto un lavoro killer abbattere il processo passo passo che serve per assicurarsi che il tuo curriculum è perfetto per quel lavoro da sogno che stai cercando. La sua homepage delinea chiaramente i passaggi in anticipo, che vengono poi ulteriormente spiegati nelle singole sezioni di seguito.,
Il sito ha anche esempi di alcuni dei curriculum che hanno fatto, rendendo più facile per voi per vedere esattamente ciò che il prodotto finito potrebbe apparire come prima di decidere di iscriversi.
Opus Grows
Featured on CSS Winner
Opus porta a casa i benefici organici, naturali e per la salute del suo suolo aggiungendo abbondanti quantità di verde in tutto il sito. Con così tante opzioni differenti per impregnare i suoli fuori là, può essere duro decidere quale è il più sano per le vostre piante o giardino., Opus dimostra che il suo prodotto è il migliore affrontando gli ingredienti e le proprietà fisiche che i suoi terreni offrono che lo segmentano dal tuo marchio tradizionale. Sono stato anche molto contento di vedere che hanno bloggato e occasionalmente mescolato in post più deliziosi per aiutare a raggiungere un pubblico più ampio come questo.
Zero Financial
Presenti su Awwwards
Troppo spesso le aziende di software hanno siti web molto belli che mancano completamente di immagini dei loro prodotti., Se sei attualmente in questa posizione e cerchi ispirazione, Zero è un sito fantastico per l’ispirazione. L’uso di immagini accompagnate da testo descrittivo che spiega ogni rende il prodotto che molto più reale e relatable per le persone interessate.
Cap HPI
Presente su Awwwards
Cap HPI aiuta a fornire un’ampia varietà di dati automobilistici a una varietà di personaggi diversi. Con questo in mente, Cap HPI ha costruito il suo sito web in modo che quei personaggi abbiano un tempo facile trovare il tipo di soluzione che stanno cercando., Per facilitare questo, hanno ottimizzato la navigazione in modo da poter capire rapidamente se CAP HPI può aiutarti o meno.
Oltre a tutto questo, il design del sito, le animazioni sottili e la tavolozza dei colori unica rendono un’esperienza visiva deliziosa e rinfrescante in un mercato che altrimenti potrebbe avere un layout aziendale molto blando.
Faretra
In primo piano su Awwwards
Anche se il sito è più piccolo di altri, Faretra riesce ancora a brillare tra gli altri.,
Mi piace il fatto che essi utilizzano emozione immediatamente quando si arriva sulla homepage con lo sfondo e la copia. Sono persino riusciti a ottenere un modulo di iscrizione, piuttosto che incorporare solo un pulsante che invia i visitatori a una pagina di iscrizione separata.
Le pagine di prodotto e funzionalità di Quiver fanno un bel lavoro di visualizzazione dell’aspetto del software accompagnato da piccoli elementi interattivi per mostrare come funziona il prodotto.,
Wordstack
In primo piano su CSS Winner
Wordstack ha fatto un ottimo lavoro mantenendo il suo sito web piccolo, condensato e organizzato, pur offrendo tutto il valore che il prodotto offre. La grande, full-width immagini e coerente uso tavolozza dei colori e lo stile in tutte le pagine fanno per un design incredibilmente uniforme che si abbina molto bene con il palato di colore del software.,
Campos Coffee
In primo piano su CSS Design Awards
Alcuni clienti amano indulgere in prodotti che sanno sono realizzati e creati da aziende che vogliono fornire prodotti di qualità ai loro clienti. E aziende come Campos Coffee sanno esattamente come soddisfare quegli acquirenti.
Campos utilizza il suo sito web come un modo per evidenziare il tempo e lo sforzo che la loro squadra mette nel loro caffè, come avvantaggia la comunità e perché ti sentirai bene a comprarlo., Tutti questi punti vengono avvolti in una storia meravigliosa che visualizzano sulla home page e in ogni altra pagina del sito.
Kin
In primo piano su SiteInspire
Invece di evidenziare solo le caratteristiche, Kin lo porta al passo successivo e utilizza la sua homepage per mostrare i vantaggi dei suoi prodotti in modo che le persone sappiano esattamente a cosa può essere utilizzato il prodotto prima di avventurarsi in altre aree del sito.,
In termini di design, l’uso di Kin del font serif più grande in tutto il sito accompagnato da una vera fotografia d’ufficio aiuta ad aggiungere un’enorme quantità di credibilità al suo marchio. Inoltre, consente al cliente di sapere che ci sono persone reali e di bell’aspetto dietro il prodotto straordinario, piuttosto che lasciarlo fino a congetture.
SeaStreak
Presentato su Webby Awards
Stai cercando di viaggiare in traghetto ma non sai dove andare? SeaStreak ti ha messo in buone mani. L’interfaccia utente del sito è organizzata in modo da poter creare rapidamente un programma di traghetti che funzioni per te., Trovo anche la navigazione estremamente interessante. Il menu percorsi e orari scende verso il basso per mostrare tutte le opzioni disponibili, e le gite di un giorno e il menu getaway è già segmentato per gli utenti che si trovano sul sito alla ricerca di esattamente questo. Questi elementi aiutano a creare convenienza per l’utente E la velocità, quindi non vengono lasciati in un buco oscuro del sito cercando di capire come cercare ciò che vogliono.,
S Bottle
Featured on CSS Winner
S Bottle’s sleek product is given special treatment throughout the design of the website to highlight its innovative beauty and benefits. Utilizzando la bottiglia in varie animazioni ha reso il sito più coinvolgente e aggiunge interesse per saperne di più sul prodotto.
Ocean Health Index
Presentato su W3 Awards
Ocean Health Index aiuta a portare la bellezza dell’oceano sul web con il suo layout mozzafiato, le immagini visive e la tavolozza dei colori dei toni freddi., L’ampio uso di font in tutto il sito aiuta anche a mantenere facile da leggere e professionale.
19. WealthSimple
Presente su Awwwards
L’uso dello spazio su Wealthsimple rende incredibilmente facile segmentare ogni sezione delle sue pagine. Le belle GIF in tutta la pagina rendono anche un’esperienza emozionante, soprattutto perché non si riferiscono direttamente all’investimento.
Il sito rende investire sembra che molto più divertente., Piuttosto che una vetrina per i fogli di calcolo, pile di denaro, e di cattivo gusto, di lingua, essi assicurarsi che differenziare il WealthSimple marchio in modo da non sembrare come tutti gli altri software o un servizio
Toggl
in Evidenza su CSSDesignAwards
L’eccentrico animazione Toggl homepage pagina richiama l’attenzione dell’utente immediatamente dopo il loro arrivo. Questo stile di immagini viene trasportato in tutte le sezioni rimanenti con semplici gruppi di caselle di contenuto direttamente accanto a ciascuna.
Toggl presta anche molta attenzione a come le cose si animano nel caricamento della pagina., Ad esempio, la pagina dei prezzi di Toggl si attenua nell’eroe e quindi in ogni area dei prezzi da sinistra a destra. L’attenzione a questi dettagli rende la sensazione del sito molto più lucido.
Shademaster
In primo piano su CSSDesignAwards
Guardare il tetto potrebbe non sembrare piacevole per il proprietario medio della casa, ma Shademaster si assicura che possa esserlo.
Hanno segmentato strategicamente il tipo di lavoro che hanno fatto in progetti di tetti nel nav che inviano l’utente a singole pagine dove possono pianificare e progettare il loro tetto ideale e ricevere un preventivo., Questo approccio rende il processo di acquisto del tetto molto più autonomo per gli utenti; non c’è bisogno che qualcuno visiti la tua casa solo per iniziare qualcosa.
Cerchi la tua riprogettazione del sito web?
Il tuo sito web è pensato per essere il volto della tua presenza online e un modo per rappresentare virtualmente il tuo marchio. Se il tuo sito web non sostiene un design che corrisponde al modo in cui vuoi essere percepito, alla fine non riuscirà a funzionare in modo ottimale., IMPACT ama lavorare con altre aziende in uno sforzo di collaborazione per capire che cosa si desidera che il vostro sito web a guardare veramente come in modo che possiamo aiutarvi attraverso la strategia per renderlo in realtà.
Pensi che sia il momento per il tuo sito web per ottenere il lifting che merita per rappresentare meglio il tuo marchio e, infine, aumentare le sue prestazioni? Parla con noi e racconta gli obiettivi e le aspirazioni del tuo sito web.
