Qual è il sito web progettato peggio?
Risposte
Differenze tra web design buono e cattivo
Le tendenze del web design cambiano continuamente, quindi i principi del design sul web sono davvero difficili da definire, tuttavia ci sono ancora regole d'oro che resistono alla prova del tempo. Ho controllato centinaia di siti e ho scoperto diversi principi di progettazione. Questi includono:
- Una navigazione facile da capire
- Uso corretto dell'animazione
- Buona combinazione di colori
- Disposizione pulita
- Un'interfaccia visivamente accattivante
- Scegliere un design appropriato all'argomento o al tema
- Mantenere gli elementi di design e i contenuti organizzati
I principi di cui sopra sono solo alcune regole del web design, ma tutti indicano chiaramente che un buon web design dovrebbe essere esteticamente gradevole, facile da capire e facile da usare. Cioè, un buon sito Web dovrebbe fornire un'esperienza utente eccellente.
I 10 migliori esempi di web design non validi
1. Arngren - Design nel caos e nel caos per la mancanza della griglia
Non voglio essere cattivo, ma mi fa davvero male agli occhi ogni volta che lo vedo. Il sito posiziona letteralmente la grafica, il contenuto e i collegamenti ovunque. Tutti gli elementi insieme rendono il sito un pasticcio incomprensibile.
Perché Arngren è un sito web mal progettato?
1) Il problema più grande è che il sit non usa una griglia.
2) Incredibile struttura di navigazione.
3) Una cattiva tipografia lo rende illeggibile.
4) Uso casuale dei colori.
Una griglia può rendere tutto pulito e organizzato sul tuo sito web. Mantiene tutti i tuoi elementi al posto giusto e ti aiuta a determinare la loro dimensione, la dimensione e lo spazio del testo, ecc. Con una griglia, puoi creare un'interfaccia coerente e ben progettata.
Un buon esempio di web design sull'utilizzo della griglia nel web design: tutto è organizzato.
2. Tipografia - Il design manca di contrasto
Un contrasto chiaro e potente tra gli elementi può aiutare gli utenti a sapere quali sono le informazioni principali della pagina. Aiuta l'utente a leggere e comprendere meglio le informazioni. Su questo sito, il colore di sfondo e il colore del testo sono molto simili, lasciando un contrasto molto debole. Lo scarso contrasto rende il testo sfocato alla vista. Inoltre, la piccola dimensione dei caratteri rende estremamente scarsa la leggibilità del testo.
Un buon web design dovrebbe garantire che il testo e le immagini siano altamente leggibili. In realtà, non è difficile migliorare la leggibilità, basta utilizzare tutto: il colore, lo spazio e le dimensioni per ottenere un contrasto elevato. Ad esempio, un buon uso della tipografia evidenzia le informazioni importanti con caratteri di dimensioni diverse e il contrasto tra i colori rafforza gli effetti visivi.
Un buon web design con il giusto contrasto dovrebbe assomigliare a questo:
3. Theweddinglens - Design non reattivo
Dovresti sempre utilizzare un framework di progettazione reattivo o adottare altre soluzioni migliori. La tua pagina web deve funzionare senza problemi sui dispositivi mobili come sul sito web. Su questo sito, durante il caricamento sul cellulare, mostra ancora un'intera pagina con un'interfaccia così povera di testi in chiaro. Non ha una versione mobile da visualizzare, quindi non è possibile utilizzarlo sul telefono. Rinuncerò solo a un sito web come questo.
Il buon web design - responsive design.
4. Pacific Northwest X-Ray Inc - la combinazione di colori sgradevole
Prototipazione più veloce, più intelligente e più facile con Mockplus
Inizia GRATIS
Questo web design è come una tavolozza di colori misti, che contiene molti colori contrastanti e colori del testo, e anche mescolati con il colore di sfondo. Tutto ciò rende difficile la lettura per gli utenti. Inoltre, la navigazione è piuttosto complicata.
Un buon web design dovrebbe utilizzare correttamente il colore per creare un'interfaccia e un'atmosfera belle e concise. Dovrebbe facilitare l'occhio dell'utente e far funzionare l'utente senza alcuno sforzo, come questo:
Maggiori informazioni sulla combinazione di colori: come utilizzare saggiamente il colore nella progettazione dell'interfaccia utente per creare un'interfaccia utente perfetta?
5. Gatesnfences - Navigazione e operazioni scadenti
La più grande caratteristica della navigazione per un sito Web è evidente. Quando un utente accede al tuo sito web, dovrebbe capire cosa può fare dopo e quali azioni intraprendere per raggiungere la sua destinazione. La navigazione deve essere accattivante e dovrebbe essere spesso nella parte superiore della pagina. Non cercare di progettare una navigazione come questo sito. Rende solo l'utente più confuso.
Inoltre, anche il contenuto di navigazione e le interazioni devono essere chiari, quindi non utilizzare la barra di scorrimento orizzontale o altri design di animazione insoliti. Se lo fai, dovresti almeno dare all'utente alcuni suggerimenti per fargli sapere come funziona il tuo sito.
Una buona navigazione nel web design dovrebbe assomigliare a questa:
6. Uat - Bad Link e impostazioni CTA errate
A mess of links and dead links are both major errors of the website. You should check your links manually or use tools such as the Website Link Checker often.
Also, you need to make sure of the functionality of the links. Especially links in the text, you should make them obvious enough and easy to click. For example, do not add a lot of text links within your text. When browsing the text on a small mobile screen, it will be difficult for users to tap on the correct link.
On this site, each moving small picture is actually a link. Leave along it’s moving all the time, the text irself is very vague, so the user does not know what information is displayed.
The CTA settings must be clear too. Do not give users too many CTA choices at the same level because it will cost the user more time to figure which one they prefer to choose. Have a look at the example:
Too many CTAs of the same level will make the user more confused. Also, you should retain only one CTA to highlight the key point. The following is a well-designed CTA.
7. Nmg-group - Unclear interface image background
The picture you use on the web page can be the front door of your website. A good-looking picture makes your site more beautiful and comfortable. Some designer even uses the entire picture as a background image.
On this site, the design is very good actually, but when looking closely you will find out the text and background images are too overwhelmed. The website's background image is covered by other elements, so the whole interface is actually broken.
Using transparent buttons would be a better choice here. That is, when designing buttons in the web page, you should abandon complex colors, styles, and textures. Instead, just outline the wireframe and use text only indicating the function. Here is a better one.
8. Wateronwheels - Inconsistent style
If you want to keep the page smooth and concise, then do not use too much element of different styles. On this site, the text area uses contrasting colors and different font sizes to highlight the info. But the text on the second level also uses a highlight blue color, which in fact breaks the unity and balanced hierarchical interface.
Unity is crucial to the overall beauty and fluency of the web interface, see it below:
9. Greatdreams - Not have any white space
L'intero sito web sembra colorato, contrastante e prominente, e anche appropriato al tema della bevanda a base di succo per bambini. Ma molti colori troppo accesi sono troppo mescolati e non c'è proprio spazio. Sembra più un dipinto colorato che un sito web aziendale online. Inoltre, la combinazione di colori esagerati rende la leggibilità dei testi molto scarsa. Inoltre, il sito non disponeva di alcuna navigazione, lasciandoti scorrere fino in fondo per trovare le informazioni pertinenti.
Un buon web design con spazi bianchi è semplice e pulito:
Sopra ci sono alcuni elenchi di siti Web dannosi. Ma esistono anche altri errori di web design:
1. Riproduzione automatica della musica (senza notifica all'utente).
2. Lunghi tempi di caricamento della pagina . Maggiore è il tempo necessario per il caricamento, maggiore è la probabilità che l'utente abbandoni il tuo sito.
3. La pagina web è troppo lunga . Quanti utenti pensi siano interessati ad andare fino in fondo alla tua pagina? Non cercare di mettere alla prova la pazienza dell'utente.
3. Informazioni scadute . Le informazioni non aggiornate inganneranno l'utente e renderanno il tuo sito poco professionale.
5. Pagina isolata . L'utente non sa come tornare alla home page. Questo offre una brutta esperienza.
6. Contenuti interattivi mancanti. Se non sei in grado di fornire agli utenti un modo per esprimere emozioni e idee, il tuo sito web potrebbe morire lentamente.
Progettazione di prototipi: primo passo per avviare il web design
Va bene se sei colpevole di alcuni degli errori sopra menzionati. La pratica rende perfetti, hai solo bisogno di più pratica. Il mio suggerimento è di iniziare con il design del prototipo.
Puoi utilizzare lo strumento prototipo più veloce e più semplice , Mockplus, per iniziare il tuo web design. Mockplus supporta progetti web. Ora ti mostrerò come progettare pagine web in Mockplus.
Passaggio 1: apri Mockplus e crea un progetto web
Nella pagina iniziale è possibile selezionare singoli progetti o progetti di gruppo. Dopo aver selezionato, scegli il progetto web nella finestra pop-up. Qui sei anche libero di impostare la dimensione della pagina del sito web.
Passaggio 2: progetta liberamente in Mockplus
Mockplus ha più di 200 componenti altamente progettati e più di 3.000 icone vettoriali che possono aiutarti a progettare rapidamente. Ecco alcuni consigli per te:
1) Gerarchia del testo: il testo nella barra di navigazione, nel titolo principale, nei sottotitoli e nel corpo deve essere diverso. È possibile utilizzare i componenti dell'area di testo e impostare la dimensione del testo in Mockplus per evidenziare la gerarchia del testo.
2) Progettazione rapida: puoi utilizzare il format painter e il riempimento automatico dei dati per completare rapidamente il tuo progetto. Il pittore di formato può rendere tutti i testi presentati nello stesso formato e il riempimento automatico dei dati può riempire automaticamente i dati di testo e i dati di immagine.
3) Impostazioni proprietà: è possibile impostare il colore, la trasparenza dei componenti.
4) Importazione di immagini: un componente di immagine dedicato può importare le immagini che desideri come immagine di sfondo della pagina Web e puoi anche progettarle liberamente.
Prova tu stesso.
Design collaborativo online: evita fin dall'inizio errori e design web errati
Per evitare cattivi progetti web ed errori comuni sopra menzionati, è necessario che i progettisti consentano a sviluppatori, product manager e altri membri del team di prodotto di partecipare alla progettazione del sito Web fin dall'inizio e raccolgano tempestivamente suggerimenti e feedback da loro.
A questo proposito, un pratico strumento di collaborazione per la progettazione online, come Mockplus iDoc, può essere un buon inizio per te.
Come designer di siti Web, puoi semplicemente importare progetti di siti Web con dettagli sulle risorse e da Photoshop/Adobe XD/Sketch (utilizzando i plug-in Mockplus iDoc ) con un clic, raccogliere feedback e suggerimenti da altri membri del team in modo tempestivo e creare prototipi interattivi da condividere con altri .
In qualità di sviluppatori front-end di siti Web, puoi semplicemente visualizzare tutti i progetti di siti Web e lasciare commenti liberamente, cercare facilmente elementi e colori duplicati e controllare e scaricare rapidamente le risorse di progettazione.
In qualità di product manager, puoi semplicemente controllare facilmente il processo di progettazione, caricare e visualizzare in anteprima i documenti liberamente per gestire i progetti di progettazione di siti Web in modo più fluido.
Nel complesso, Mockplus iDoc può collegare efficacemente l'intero flusso di lavoro di progettazione del prodotto fin dall'inizio e aiutarti a evitare molti errori di progettazione del sito web.
Per riassumere
Il design di un sito deve servire la funzionalità del sito stesso. Deve anche tenere conto della bellezza e di altri requisiti. Spero che i 9 esempi di cattivo web design di cui sopra ti siano utili e ti aiutino a capire cos'è un cattivo web design e come evitarli in futuro.
Mockplus iDoc, progetti di trasferimento con specifiche accurate, risorse, frammenti di codice automaticamente
Inizia GRATIS
Twitta
Wow, di solito non mi lamento, ma...
Penso che Miller Paint (circa giugno 2013) meriti una menzione a questo proposito.
In realtà sono rimasto un po 'scioccato nel vedere questo. "Benvenuti nel nostro nuovo sito Web" .. "Clicca qui"... riquadri in stile anni Novanta, layout di griglia incoerenti che non si adattano a nessun dispositivo... ricerche che dicono "Cerca..." tre volte, colori dispari, spazio vuoto inutile, mancanza di contenuto, esperienza utente poco chiara, ... potresti scrivere un libro a riguardo.