Perché le persone continuano a dirmi che il mio sito sembra orribile?

Ho sviluppato un sito Web e di recente cercavo lavoro. Praticamente tutti gli intervistatori, dopo averci dato una rapida occhiata, mi hanno detto che il mio sito è stato progettato in modo terribile (ma mi è piaciuto il concetto). Dovrei menzionare che sono un ingegnere del software, ma sto davvero cercando di fare bene anche la parte del design. Ho cercato di ridisegnarlo, ma non ho idea di cosa ci sia da cambiare.

Ecco come appare ora:

Gradirei davvero qualsiasi suggerimento specifico per il mio sito o su come migliorare la progettazione di un sito in generale (ho visitato alcuni siti che spiegano come progettare siti, ma ciò non sembra aiutare :)).

Modifica 1 : Come ho già detto, le persone tendono ad avere una cattiva impressione solo guardandolo, anche prima che io introduca la funzionalità. Questo mi fa pensare che ci sia qualcosa di sbagliato nei colori che ho scelto o nel layout. E pensavo che uno specifico design del sito potesse essere utile per i designer là fuori, proprio come una storia specifica è educativa per gli studenti di letteratura e algoritmi specifici sono utili per gli studenti di software. Grazie.

Una nota a margine : Funzionalità: se è importante, ecco cosa il sito mira a realizzare (molto brevemente): gli utenti possono aggiungere argomenti e per ogni argomento aggiungere domande insieme alle loro risposte . Il sito crea "test" e "quiz" affinché gli utenti possano prendere e confrontare i loro risultati

Modifica 2 : ecco un'altra schermata di stampa:

Modifica 3 : Giusto per essere chiari, nessuno di questi screenshot è la mia pagina di destinazione. Sono pagine di contenuto specifiche per argomento.

Prima di tutto voglio sottolineare che tutto in questa risposta è solo MHO, non una verità universale;).

Come ingegnere del software, sai quale è una cosa importante in ogni progetto avere una struttura chiara e ben definita: l'ordine. Praticamente lo stesso vale per le arti e il design "visivi". Tendo a vedere il design come "incapsulamento visivo". Il designer conosce la struttura delle informazioni che desidera trasmettere al suo pubblico di destinazione. Ad esempio: disegna un libro. Sa che questo libro è diviso in capitoli e ogni capitolo in capitoli secondari. Sa che la questione principale è annotata da alcune note (note a margine, note a piè di pagina, sidenotes). Ora deve usare il suo "arsenale" per rendere "visibile" questa struttura. Può usare una dimensione e una forma del carattere e riempire tutte le pagine consecutive con una serie di glifi, ma ciò significherebbe che il lettore dovrebbe leggere, interpretare e comprendere tutto per conoscere la struttura delle informazioni contenute. Il progettista può anche "suggerire" al lettore l'importanza / il livello di varie informazioni. Uno dei trucchi è usare la dimensione del carattere per mostrare la gradazione dei "dati" presentati. In questo caso, il lettore non dovrà leggere (figuriamoci interpretare) il testo per distinguere tra la questione principale e, ad esempio, le note. L'importanza e la "posizione" reciproca delle informazioni sono "descritte" visivamente. Il lettore è in grado di "decapsulare" facilmente le informazioni. Si può anche vederlo come una sorta di processo di serializzazione / deserializzazione che si svolge nel dominio visivo (l'informazione astratta viene lanciata nello spazio "visivo"). Questa è una semplificazione greeeeat ma penso che per cominciare sia abbastanza buono. In questo caso, il lettore non dovrà leggere (figuriamoci interpretare) il testo per distinguere tra la questione principale e, ad esempio, le note. L'importanza e la "posizione" reciproca delle informazioni sono "descritte" visivamente. Il lettore è in grado di "decapsulare" facilmente le informazioni. Si può anche vederlo come una sorta di processo di serializzazione / deserializzazione che si svolge nel dominio visivo (l'informazione astratta viene lanciata nello spazio "visivo"). Questa è una semplificazione greeeeat ma penso che per cominciare sia abbastanza buono. In questo caso, il lettore non dovrà leggere (figuriamoci interpretare) il testo per distinguere tra la questione principale e, ad esempio, le note. L'importanza e la "posizione" reciproca delle informazioni sono "descritte" visivamente. Il lettore è in grado di "decapsulare" facilmente le informazioni. Si può anche vederlo come una sorta di processo di serializzazione / deserializzazione che si svolge nel dominio visivo (l'informazione astratta viene lanciata nello spazio "visivo"). Questa è una semplificazione greeeeat ma penso che per cominciare sia abbastanza buono. Si può anche vederlo come una sorta di processo di serializzazione / deserializzazione che si svolge nel dominio visivo (l'informazione astratta viene lanciata nello spazio "visivo"). Questa è una semplificazione greeeeat ma penso che per cominciare sia abbastanza buono. Si può anche vederlo come una sorta di processo di serializzazione / deserializzazione che si svolge nel dominio visivo (l'informazione astratta viene lanciata nello spazio "visivo"). Questa è una semplificazione greeeeat ma penso che per cominciare sia abbastanza buono.

Ora, per quanto riguarda il tuo design. Personalmente, non so da dove cominciare a guardarlo. Devo leggere tutto, capire tutto, pensare a tutto e poi rimettere le cose nell'ordine che penso sia giusto. È un sacco di lavoro per me come lettore. È difficile definire ciò che è più e ciò che meno importante qui in un colpo d'occhio. Anche quando mi prenderò il mio tempo per conoscere il contenuto, non ci sono ancora molti "punti di riferimento" visivi che mi aiutano a trovare un modo per alcuni dati specifici. Pensa: quando lasci la macchina al parcheggio stai cercando qualche "punto di riferimento" per aiutarti a ricordaredov'è la tua macchina. Prova a pensare per un momento a come usi i siti Web, a come riesci a ricordare dove sono le opzioni / i collegamenti che usi più spesso. Non stai cercando un collegamento come "secondo quadrato a destra da questo logo rosso nella parte superiore del sito"? Nessuna lettura: basta ricordare l'immagine / la posizione.

Penso che il problema più grande qui non sia la "bruttezza" - penso che sia la mancanza di gradazione di importanza. Prova a "guidare" il visitatore del tuo sito Web attraverso i tuoi dati. Cosa vuoi che veda prima? Dove andare da lì? In questo modo stai creando "un flusso di lettura" / "un flusso di lavoro". Tu induci (forse forse?;)) Un percorso specifico che i tuoi lettori seguiranno. Se ci sono un paio di percorsi, prova a renderli il più separati possibile (ad esempio un "percorso" nel menu - qualcosa come un sommario / panoramica principale / descrizione della struttura, un "percorso" attraverso il modulo di accesso, ecc. ). Penso che se lo aggiusterai, il tuo design migliorerà sicuramente. Forse non diventerà subito "bello", ma almeno sarà più accessibile e comprensibile e da ciò, come effetto collaterale, più piacevole esteticamente.

Spero che abbia un senso per te :).

Alcune cose che noto che non mi piacciono particolarmente sono:

• Sembra più la parte "back-end" o "admin" di un sito Web, in particolare una qualche forma di sistema di gestione dei contenuti, piuttosto che il "front-end" o ciò che la gente vede. In particolare, mi viene in mente PhpMyAdmin.
• Incoerenza nei colori utilizzati. Il logo (che trovo un po 'troppo stretto) contiene già alcuni colori, quindi quei colori possono essere usati per sviluppare una combinazione di colori per il sito. Questa combinazione di colori dovrebbe applicarsi a elementi come la fascia per le tabelle, il colore per i collegamenti e così via.
• Ci sono troppi elementi visivi contrastanti. Di solito sostengo più semplicità e standardizzazione nel design. Tuttavia, in questo screenshot, vediamo:
  • La casella "Tutto" è una casella ad angolo retto.
  • La barra di navigazione laterale utilizza gli angoli arrotondati.
  • Gli argomenti secondari utilizzano un gradiente radiale.
  • Nessuna delle caselle ha un "riempimento" sufficiente: si noti quanto compaiono le parole ristrette nei collegamenti "argomenti secondari"; apparirebbero molto meglio se ci fosse dello spazio intorno a loro.

Quindi, leggi attentamente la risposta di @thebodzio , poiché è molto preciso: un nuovo visitatore del sito avrebbe difficoltà a sapere dove cercare prima, e questo è generalmente un segno di un design "cattivo".

Ci sono alcune buone risposte qui, quindi indicherò alcuni esempi concreti. Per me, la struttura di base della pagina sembra decente; come altri hanno già detto, un layout a tre colonne è stato un punto fermo del web design per anni. La maggior parte dei problemi riguarda la progettazione grafica.

Detto questo, l'importanza relativa "Argomenti secondari" sembra strana:

• Il titolo dovrebbe essere simile a "Argomenti secondari"?

• È a destra e sembra più importante dell'intestazione dell'argomento; forse potresti incorporarlo nel corpo dell'argomento principale per renderlo più subordinato?

• Il peso dell'intestazione "Argomenti secondari" fa sembrare più pesante (più importante) dell'argomento pangrattato.

Per la progettazione grafica, puoi chiederti i principi di base per ogni elemento della pagina:

• Contrasto : gli elementi che non sono la stessa cosa dovrebbero apparire abbastanza diversi da consentire agli utenti di distinguerli immediatamente.

• Ripetizione : i disegni sembrano buoni solo se le cose sono uguali. In altre parole, punta alla coerenza. Ciò potrebbe assumere la forma di tutti i tuoi sfondi che hanno la stessa saturazione e luminosità, ma che variano in tonalità o che usano i gradienti su tutte le intestazioni (o non usano alcun gradiente). Per esempio:

  • lo sfondo "Argomenti secondari" è l'unico con un gradiente (il pulsante è diverso, quindi avere un gradiente su di esso lo rende diverso, portando in gioco il contrasto)

  • l'evidenziazione di navigazione a sinistra ha gli angoli arrotondati mentre la maggior parte degli altri elementi ha angoli quadrati acuti

  • il colore per "Preferenze quiz" (scritto in modo errato) non appare nel logo, al quale altrimenti avresti provato i tuoi colori; cerca di ottenere la stessa tonalità per gli elementi della pagina dei colori nel libro

(In effetti, c'è un modo semplice per assicurarsi che i colori si combinino: iniziare con un singolo colore, quindi variare solo uno di tonalità, saturazione o luminosità. Tutti i colori che si generano con questo metodo dovrebbero avere un bell'aspetto insieme.)

• Allineamento : gli allineamenti rendono gli elementi collegati in un tutto, anziché apparire sparsi e incoerenti. Per esempio:

  • la casella "Ricordami" è più bassa dell'altro testo accanto

  • "Preferenze quiz" è più a destra dell'argomento breadcrumb sopra

  • le preferenze sono centrate, mentre la maggior parte dell'altro testo del corpo è allineato a sinistra

• Prossimità : ravvicinare gli oggetti li rende raggruppati nella mente dell'utente, anche se lasciare troppo poco spazio intorno agli oggetti li rende angusti e difficili da vedere come singoli oggetti. Per esempio:

  • non c'è spazio attorno agli argomenti breadcrumb o agli argomenti secondari (a mio avviso, questa è una delle funzionalità più comuni che mi dice che il design grafico non è stato completamente sviluppato)

  • la spaziatura dei paragrafi sotto l'intestazione del corpo principale è incoerente

C'è molto di più sui principi di progettazione sul web, ma questi sono quattro dei più importanti.

Penso che il problema principale con la progettazione del tuo sito non sia tanto nella progettazione grafica quanto nella progettazione dell'interfaccia utente . In particolare, quando guardo i tuoi screenshot qui sopra, la domanda che mi pongo non è " Fantastico, cosa devo provare prima? " Ma " Che diamine è questo, e cosa dovrei farci? "

Questo è un problema comune con i siti Web e altre interfacce utente progettate da ingegneri (o altri esperti di dominio): sanno già come dovrebbe essere utilizzato il sistema, quindi per loro va tutto bene finché tutte le funzionalità di cui hanno bisogno sono comodamente accessibili . Purtroppo, questo porta spesso a rendere tutte le funzionalità ugualmente evidenti e accessibili, dando al nuovo utente pochissimi indizi su dove iniziare.

La progettazione grafica ha un certo effetto qui, nella misura in cui una cattiva progettazione grafica può confondere qualsiasi interfaccia utente, mentre una buona grafica può migliorare l'interfaccia utente rendendo chiari il significato e le relazioni dei diversi elementi dell'interfaccia e attirando l'attenzione dell'utente sugli elementi più importanti. Ma fondamentalmente, il problema riguarda più cosa presentare all'utente e come strutturarlo che come farlo sembrare bello.

OK, diventiamo un po 'più specifici. Il mio primo consiglio sarebbe: semplificare! Potresti prendere ispirazione dal design originale della prima pagina di Google , che fondamentalmente aveva tre elementi: il logo, la casella di ricerca e due pulsanti (e uno potrebbe sostenere che il secondo pulsante era un disordine inutile). Oh, e alcuni link ad altre pagine con più cose - che erano chiaramente contrassegnate come di importanza secondaria essendo più in basso, in un carattere piccolo e / o in grigio - e un avviso sul copyright, apparentemente aggiunto come un sottile suggerimento a utenti che la pagina ha davvero finito lì.

O dai un'occhiata a Doodle , un'altra società con un nome simpatico e un design semplice ma efficace in prima pagina. Per comodità, ho preso uno screenshot della loro prima pagina e ho aggiunto alcuni scarabocchi rossi in cima:

Doodle è un sito abbastanza buono con cui confrontare i tuoi, dal momento che il loro sito, come il tuo, è sostanzialmente un framework per consentire agli utenti di progettare i propri contenuti (quiz per te, programmi di eventi per loro) e invitare altri utenti a interagire con esso. La grande differenza è che, a differenza del tuo design, le persone di Doodle dedicano molto sforzo a facilitare delicatamente i loro utenti nell'interfaccia, invece di lanciarli nella parte più profonda della piscina e aspettare che affondino o nuotino.

Guardando la loro prima pagina, specialmente senza i miei scarabocchi, la cosa ovvia a questo proposito è quanto poca roba - specialmente roba irrilevante - ci sia. Certo, ci sono un sacco di piccole note e collegamenti in fondo alla pagina, ma è tutto "above the fold" e qualcosa che i nuovi utenti ignoreranno. La seconda cosa più visibile, in grandi lettere amichevoli proprio dove è probabile che l'utente guardi per primo, è un rombo di otto (!) Parole che spiega di cosa tratta il sito. La cosa più visibile è la grande grafica che mostra, in immagini semplici, i passaggi principali del flusso di lavoro, rendendolo tutto semplice e invitante. E proprio tra loro c'è un grande pulsante che invita l'utente a fare clic su di esso e iniziare.

In effetti, nella parte superiore della pagina, ci sono solo quattro cose cliccabili (escluso il logo, che è cliccabile - come gli utenti si aspettano che sia - ma ti riporta alla prima pagina): due collegamenti al primo passo nella procedura guidata di pianificazione degli eventi, uno a un esempio predefinito per gli utenti che non sono abbastanza sicuri da entrare subito e un collegamento discreto nell'angolo in alto a destra che apre una finestra di dialogo pop-up di accesso per gli utenti stabiliti. È tutto.

E il tuo sito così com'è? La prima cosa nel tuo screenshot che salta fuori per me come qualcosa che potrebbe forse valere la pena guardare sono le intestazioni verdi, che almeno sono brevi, in caratteri grandi e nel mezzo di quella che sembra "area di contenuto". Ahimè, non c'è nulla di molto interessante lì - la sezione "Informazioni sull'argomento" ha solo alcuni banali metadati che dovrebbero essere stampati in alcuni angoli, la sezione "Argomenti secondari" ha un paio di collegamenti (ad altre pagine simili?) Che appaiono per duplicare quelli nell'angolo in alto a destra e la sezione "Risorse" è semplicemente vuota. Inoltre, anche dopo aver letto tutto ciò, non ho ancora idea di cosa tratta il sito o di cosa posso farci.

Quindi, cosa posso fare con il tuo sito? Bene, dici che posso creare e rispondere ai quiz, quindi che ne dici di mettere alcuni link / pulsanti grandi e attraenti in prima pagina che dicono " Fai un quiz " e " Crea un quiz "? (Il primo dovrebbe essere più evidente, dal momento che un nuovo utente è presumibilmente più propenso a rispondere a un quiz che a crearne uno, ma includendo il secondo in prima pagina consente agli utenti almeno di sapere che possono farlo anche loro.) Inoltre, un una breve spiegazione - da poche parole fino a un breve paragrafo - di cosa tratta il tuo sito sarebbe anche buona. (Questo potrebbe anche essere un buon posto per affrontare un link "leggi di più".)

Oppure, guardandolo dall'altra parte, cosa puoi permetterti di perdere dalla tua pagina attuale? Bene, direi davvero "la maggior parte", ma la cosa ovvia che salta su (oltre al dump dei metadati) è il modulo di login in alto. Certo, è buono fornire agli utenti affermati un modo semplice per accedere, ma ciò non significa che devi effettivamente mostrare il modulo di accesso su ogni pagina. Invece, fallo come fa Doodle e hai solo un modulo di accesso pop-up accessibile tramite un link. (Per gli utenti con JavaScript disattivato, è una buona idea avere anche una pagina di accesso separata come destinazione di fallback per il collegamento.)

Ci sono anche molte altre cose che potresti perdere: ad esempio, come utente nuovo e non registrato, perché vedo quello che sembra un link "elimina"? Posso davvero cancellare la pagina? Se si, perché ? In caso contrario, perché il link è lì?

Allo stesso modo, la nota "(703 domande disponibili)" è una distrazione inutile dove si trova, poiché sembra un elemento di interfaccia. Se vuoi stupire i visitatori con la profondità del tuo sito, inseriscilo nel punto in cui appartiene: in uno spazio adatto e dall'aspetto impressionante nell'area dei contenuti. (" Abbiamo già 703 domande disponibili, e ne stanno arrivando altre! ")

Infine, dovrei notare che tutto è relativo. TV Tropes , ad esempio, ha un'interfaccia utente orribile (proprio come la tua, in realtà), ma non importa, perché compensano con un sacco di contenuti eccellenti e densamente interconnessi, in modo che la maggior parte dei nuovi utenti abbia vinto ' non devo assolutamente toccare l'interfaccia di navigazione. In realtà, è abbastanza comune con i siti wiki; Wikipedia non è molto meglio. Il trucco, tuttavia, è che devi avere già quel carico di contenuti (o una base di utenti impegnata a crearlo) prima che tale effetto possa iniziare a funzionare per te.

Il tuo "design" sarebbe bello ... nel 1995. In realtà è obsoleto. È un progetto che gli ingegneri escogitano sempre :-) La cosa più semplice che puoi fare è usare un framework CSS come Twitter Bootstrap , Zurb , qualunque cosa . Framework ti aiuta a proteggerti dalla tua "creatività" ;-)

Dal punto di vista del layout, non c'è nulla di veramente sbagliato nel tuo sito web. È un layout standard a 3 colonne con il logo in alto a sinistra. Questo quadro generale è in uso da secoli, ed è perché funziona. La maggior parte dei siti Web moderni utilizza ancora principi simili, basati su una manciata di layout comuni, ma sepolti sotto una grafica molto più nitida. (Diffidare delle persone che criticano in base a quanto è moderno qualcosa - solo perché sono passati alcuni anni non significa come gli umani prendano l'informazione è all'improvviso incredibilmente diverso.)

Alcuni potrebbero discutere sul fatto che i principali collegamenti di navigazione debbano essere o meno sul lato sinistro o in alto, ma queste differenze non creano o distruggono un sito.

No, il problema non riguarda la scelta delle posizioni delle cose. È con la grafica, le scelte di colore, il dimensionamento delle cose e così via. Distinguo i termini layout , che si basa sul posizionamento, sul design , che si basa su aspetto e aspetto. Non sono sicuro che tutti userebbero i termini esattamente allo stesso modo di me, però.

Detto questo, il layout è sostanzialmente perfetto, ma il design è problematico, purtroppo è la situazione più difficile da risolvere. Se il tuo layout fosse il problema, potremmo dare consigli più concreti, come "sposta i campi di ricerca qui" o "posiziona il tuo logo lì". Il layout è davvero l'implementazione dell'usabilità .

Il design, tuttavia, riguarda stile e stile, che ovviamente è molto più difficile commentare. Mentre posso dire che hai semplicemente lasciato molte delle scelte di colore predefinite (lo sfondo è bianco, i collegamenti sono blu, pochissime immagini dell'interfaccia), è molto più difficile dire quali colori e grafica dovrebbero essere lì invece . Dipende molto dal tipo di sensazione che desideri. Blu e grigi noiosi e sicuri per una sensazione corporativa, rosa e gialli per una sensazione innocente e infantile, rossi e neri caldi per un'eccitante atmosfera da night club ... E anche allora, usare solo questi colori di esempio non porterà necessariamente al mi sento affezionato a loro. Il diavolo è nei dettagli.

Esistono alcune sovrapposizioni tra i problemi di layout più concreti e i problemi di progettazione più eterei, come quello che dice thebodzio nella sua risposta sulle diverse dimensioni dei caratteri per intestazioni e note a piè di pagina e così via, al fine di sottolineare l'importanza e aiutare a guidare il visitatore del sito attraverso le informazioni che vuoi che abbiano. Dovresti seguire il suo consiglio.

Tuttavia, temo che se il tuo obiettivo non è collaborare con un designer, ma imparare te stesso come applicare un design del sito avvincente, non stai semplicemente acquisendo una risposta, sei in viaggio. Ci sono tanti percorsi per diventare un buon designer quanti sono i designer e tonnellate di risorse là fuori, quindi non mancano le opportunità di apprendimento.

Per il percorso più breve per acquisire un certo senso del design per questo particolare sito, guarderei altri siti che ti piacciono e altri siti che offrono un servizio simile a quello che stai creando e inizierei a confrontare e confrontare ciò che ti piace e di cui quelli e ciò che manca sul tuo sito.

Sfortunatamente, questo è il più oggettivo possibile e solo il punto più alto della punta dell'iceberg. Spero che parte di quello che ho detto sia d'aiuto, però.

Ecco perché penso che le persone reagiscano negativamente al tuo sito: solleva troppe domande!

Come hai detto, prima di introdurre la funzionalità. Il che mi dice che le persone non capiscono di cosa si tratta. Quale dovrebbe essere la prima domanda a risposta dal sito web. Perché se è sul web, non puoi stare accanto a loro e spiegarlo.

"Tutta la conoscenza del mondo" non comunica esattamente cosa puoi trovare sul sito (o non è molto credibile per quello) o perché dovresti effettuare il login. Quindi, il tuo design è percepito male perché non supporta la risposta a queste domande.

Quindi, prima di tutto devi rispondere "di cosa tratta questo sito?". Ad esempio con una dichiarazione di missione. Potrebbe essere ovvio per te, ma non per tutti gli altri sul web. Qual è lo scopo principale? Prendere quiz o creare quiz? Qual è la prima cosa che vuoi che facciano le persone? Accesso? Rispondi a un quiz? Crearne uno? Queste sono le cose a cui dovresti rispondere se vuoi che le persone rimangano sulla tua pagina.

Quindi dovresti organizzare le tue informazioni. Cos'è il contenuto, cos'è il meta (logo, navigazione, accesso). Dai un'occhiata a stackexchange. Il contenuto (chiaro) è chiaramente distinto dal meta (scuro).

Raggruppa le cose che vanno insieme. Hai il pangrattato che è scollegato dalla navigazione. Sia visivamente che formulato. Non trovo "Tutto" nella navigazione principale. Come posso arrivare?

Perché tutto questo? Più le persone capiscono le informazioni presentate loro, più è probabile che rimarranno e interagiranno. Se sono confusi e confrontati con domande a cui non possono rispondere, reagiranno negativamente.

Perché lo fa. Era cattivo, no :) Era solo uno scherzo, la mia migliore risposta sarebbe quella di lavorare con qualcuno nella parte del design, se non hai qualcuno con cui lavorare per ottenere un libero professionista, se non funziona anche solo ricominciare da zero, ma cerca di rendere le cose più semplici e consentire al contenuto di respirare ...

Alcuni suggerimenti / consigli / raccomandazioni a prima vista: Rendi i caratteri h tag (Titoli) più grandi dei tag p, molto più grandi (qualcosa nell'intervallo di dimensioni del carattere del titolo 30-48 e paragrafo (11-max 13). Consenti almeno Margini di 20 px o riempimento tra i blocchi di contenuto (ad esempio un margine inferiore: 20px; per la barra di accesso consentirebbe che sia più separato e di facile lettura.

Chiedi a qualcuno di progettarti un logo adeguato, quello che hai ora non è ... buono. Prova diversi tipi di carattere, forse un carattere sans-serif (come Open Sans, gratuito su Google google o ... solo Arial-Helvetica).

Non usare i gradienti se non hai il senso del colore solo perché è bello o solo perché ti sembra migliore, prova a rimanere fedele ai colori semplici e forse alla fine, quando hai finito prova e sperimenta i gradienti solo su CTA ( Call to action) aree (ad esempio sui pulsanti).

C'è molto che puoi fare ... ma queste cose di solito arrivano nel tempo, ottieni un occhio allenato guardando molti grandi progetti e cercando di capire come è stato prodotto quel risultato ... il modo migliore per farlo è prova a ricreare tu stesso lo stesso risultato, in quel processo otterrai una certa conoscenza e comprensione del perché e del modo in cui le cose vengono fatte / fatte per apparire / interagire e sperimentare le UI.

Raccomandazione del libro: Smashing Book [il primo e il secondo libro] e il sito web:

http://smashingmagazine.com

e un altro: http://www.bamagazine.com/

Wow! Hai davvero generato una risposta! Almeno sai che il tuo design non passa inosservato;)

Ecco la breve risposta alla tua domanda: il sito sembra progettato da un ingegnere del software. Questo è quello che fai e sono sicuro che lo fai bene. Ora hai bisogno di qualcuno che esegua la progettazione dell'interfaccia utente per rendere accessibile la tua idea. Non c'è modo di aggirare questo. Non imparerai il design in un fine settimana e risolverai il problema.

Trova uno studente o un giovane designer che cerca di compilare il proprio portfolio e dare loro un po 'di libertà. Volete qualcuno che ha un lavoro pulito e ordinato per questo progetto. Vedi se riesci a trovare un designer che privilegia il minimalismo.

Non sono un designer professionista, quindi dal punto di vista di un utente e dall'esperienza di navigazione di vari siti Web posso far notare alcune cose?

1. Il colore di sfondo della pagina è bianco, ma le intestazioni / luci della sezione sono in tonalità di giallo o bianco, puoi provare un po 'di colori contrastanti , puoi progettare il livello di contrasto per abbinare la gerarchia dei tuoi elementi (più intestazione di alto livello = più contrasto) o una combinazione di colori del contenuto dell'intestazione fissa (ad es. Arancione intenso come nella seconda pagina del libro mostrato nel logo per l'intestazione, bianco per il testo dell'intestazione e grigio scuro per il testo del contenuto).
2. Troppo spazio libero nella tua pagina, lo spazio libero è buono per dare agli utenti un posto dove respirare, ma troppo spazio libero fa apparire la tua pagina come back-office / sotto-manutenzione. ad esempio, la sezione "Argomenti secondari" nella prima schermata avrebbe potuto essere suddivisa in tutto lo spazio nella sezione "Tutto". Inoltre, perché due sezioni ridondanti di argomenti secondari?
3. La distribuzione dei contenuti dell'IMO dovrebbe rientrare in una gerarchia . Se prendi uno qualsiasi dei siti come le code page di Google (che assomigliano molto al tuo sito), Wikipedia o questo sito come esempio, trascorrono tutti una quantità significativa di spazio per l'intestazione del sito , quindi arriva il contenuto. Inoltre, al giorno d'oggi molte pagine usano una barra degli strumenti come l'intestazione che ha un colore distinto, menu generali e il logo del sito incorporato, ma puoi dire che il tuo logo è troppo grande per farlo.
   Prendiamo ad esempio la sezione degli argomenti secondari nella parte più a destra della pagina, sembrano davvero un'ulteriore specializzazione del contenuto attuale? Piuttosto sembrano più tag casuali o argomenti correlati . Puoi riflettere la loro gerarchia creando unstruttura ad albero come in varie pagine di documentazione, renderebbe superflua anche il pangrattato. Inoltre l'IMO il posto giusto per quell'albero (navigazione) sarebbe nella barra laterale di sinistra e il resto delle azioni andrebbe al posto del pangrattato.
4. L'uniformità è importante quanto la distribuzione. I pulsanti possono avere colori diversi in base al loro scopo / importanza. Ma la loro struttura dovrebbe rimanere la stessa. Il pulsante "Accedi" è marcato mentre il "Rispondi al quiz ora" è arrotondato. Potresti voler sbarazzarti di uno di questi due approcci.
5. I collegamenti e le azioni non sono gli stessi , dovresti nominarli di conseguenza. Come il menu "Elimina" a sinistra riflette gli elementi eliminati o l'azione di eliminazione, non si può dire. Offri agli utenti un pulsante di eliminazione e un menu / una scheda di elementi eliminati proprio come in GMail.
6. I caratteri sono molto importanti per riflettere lo scopo. Se stai creando una pagina d'arte o una qualsiasi famiglia serif di letteratura è buona per questo, ma per creare un sito di e-learning devi scegliere un carattere che sia comodo da seguire in diverse dimensioni e che abbia un minore aumento (come bordi allungati), Sans è bravo in questo. Wikipedia lo usa per esempio. Anche la scelta delle dimensioni e del peso è importante. Laddove le statistiche sono importanti (e cambiano) rendono i numeri in grassetto (ad esempio 703 domande disponibili). Come hai fatto per aver scelto il numero di domande nella seconda schermata. Il corsivo nelle intestazioni IMO non sembra buono, perché non usare grassetto invece?
7. Questo è molto simile alla mia opinione personale, ma penso che alcuni angoli più arrotondati potrebbero alleviare gli utenti dai sentimenti simili a una scatola.

Sono un designer e sviluppatore professionista. Penso che la cosa più importante da fare con un progetto sia usare un programma di grafica - come Fireworks - per creare un progetto prima di implementarlo. Ciò rende più semplice cambiare le cose e sperimentare facilmente. Proveniente da un background di sviluppo, ne conosco l'importanza.

Non so per quali posizioni ti stai candidando. Se ti stai candidando per una posizione di progettazione grafica, potresti voler dedicare un po 'di tempo per imparare la progettazione grafica professionale. Se stai assumendo una posizione di sviluppo, può avere senso pagare un po 'un designer professionista per realizzare un bel design o fare una soluzione rapida invece di impiegare mesi per imparare.

Se vuoi fare una soluzione rapida, proverò a dare alcuni dettagli per iniziare. Le risposte qui sono buone, ma non sono molto specifiche. Ci proverò.

Si noti che un design a larghezza variabile è sempre un po 'più complicato di un design a larghezza fissa. Penso che tu abbia ragione a scegliere un design a 3 colonne. Il contenuto è corretto, il design non è eccezionale (secondo me).

Ecco cosa farei (probabilmente ci vorrebbe meno di un giorno):

1. Inizia con il logo. Sembra molto impegnato -> prova a renderlo più semplice. Usa colori più vivaci; il giallo è sporco. Prova un carattere più semplice.
   • Dopo aver creato il logo, puoi abbinare i colori del sito ad esso
2. Tutto sul sito Web dovrebbe essere "arioso". Quindi non rendere le cose anguste.
   • la colonna di sinistra dovrebbe essere molto più ampia. 1,5 volte è la larghezza attuale
   • la parte superiore dovrebbe avere più spazio tra i campi di accesso
   • il diritto dovrebbe avere gli argomenti secondari ciascuno su una nuova riga. Fai in modo che abbiano uno spazio maggiore attorno a loro in modo che non siano schiacciati l'uno nell'altro
   • la tabella secondaria può usare tonnellate di imbottitura in più sulle celle, i div del titolo possono essere più imbottiti, ecc.
3. L'intero contenuto dovrebbe fluire invece di essere instabile. Ciò significa allineare il più possibile, utilizzare caratteri uniformi e dimensioni adeguate.
   • La colonna centrale "Tutta la conoscenza del mondo" sembra fuori posto rispetto al resto del contenuto. Magari spostalo a sinistra, rimuovi la sottolineatura e rendilo sicuramente più piccolo del titolo.
   • I contenuti della pagina non sono allineati. Sarebbe meglio se si lasciassero allineati i contenuti secondari con i titoli secondari.
4. I campi di accesso in alto possono essere più belli.
   • È possibile inserire le etichette all'interno delle caselle di input del testo (in grigio). Ciò lo renderebbe più pulito.
   • Potresti rendere la casella di controllo Ricordami / font molto più piccola. Non è la caratteristica più importante, quindi non dovrebbe essere grande quanto la parte importante.

Questo non renderà il tuo sito il sito più fantastico su Internet, ma spero che lo luciderà abbastanza da superare le ispezioni. :)

wow ... questo è piuttosto male lol.

Non penso che tu possa imparare a ridisegnare qualcosa in alcuni suggerimenti se non hai alcun senso del design, quindi davvero penso che dovresti convincere qualcun altro a fare il layout .. avvicinati a un college d'arte locale e vedi se un la classe lo prenderà come un esempio del mondo reale.

Ma in mancanza, ecco i miei pochi suggerimenti. L'indice / landing page, nonostante il suo nome, deve funzionare più come un cartellone pubblicitario o un annuncio di rivista. Deve trasmettere il suo messaggio VELOCEMENTE, in pochi secondi. Si noti che ho detto "messaggio" non informazioni. Le informazioni devono essere lì per quando lo spettatore le cerca, ma non tutte devono essere disposte come un sommario leggermente confuso.

Quindi, per quanto riguarda il messaggio ... la prima cosa a cui pensare è CHE COSA stanno guardando ... pagina web, sì, ma la pagina web di cosa? Anche leggendo le tue categorie, non mi è chiaro quale sia quella pagina.

Il "che cosa" sarà trasmesso dalla combinazione di colori, dalla disposizione generale e dai titoli delle intestazioni.

Dopo aver risolto la domanda di cosa si tratta, decidi prima cosa vuoi che vedano. La mia scelta sarebbe che il logo Pratica renda perfetto e ne aumenterei le dimensioni e lo tirerei fuori dall'intestazione. Ma potresti avere motivi per focalizzarli su qualcos'altro o un invito all'azione di qualche tipo.

Immagino che la tua cosa più importante sia "Tutta la conoscenza del mondo" perché l'hai centrata (cattiva idea) lo hai reso corsivo (cattiva idea!) E gli hai dato un sacco di spazio intorno a sé (buona idea). Ma a parte il le parole stesse ... non è chiaro cosa sia o cosa faccia, prova qualcosa di più descrittivo e meno sciocco.

Cerca di suddividere la landing page complessiva in 3 elementi di design E 3 livelli di importanza delle informazioni. Chiediti qual è la PRIMA cosa che dovrebbero vedere, PRIMA cosa che dovrebbero fare? qual è il secondo, il terzo? e prova a ridisegnare di conseguenza.

Usa meno colori e fai in modo che abbiano senso .. perché 3 diversi blu sfocati si sono sparsi casualmente attorno al testo ??? Usa più dimensioni dei caratteri (!), Suddividerlo di nuovo in 3 secondi è un buon inizio, GRANDE carattere per i più importanti, supporto per i secondari ecc.

Il mio ultimo suggerimento è di progettare PRIMA e con largo anticipo di scrivere il codice. Suggerisco di iniziare con CARTA e penne o matita per bloccare una pagina .. solo schizzi rapidi, NON scrivere le parole effettive quando le fai, blocca solo nelle aree mentre provi a decidere quanto deve essere ampia l'area del contenuto rispetto all'intestazione , quanto è grande la barra laterale e così via.

Quindi esegui un progetto più finalizzato in un programma di grafica. MUOVI le cose e sperimenta il posizionamento. Ricorda che stai progettando una pagina che deve funzionare come una pagina di rivista. Fai mettere in pausa il tuo spettatore, prova a MOSTRARLI quello che vuoi che vedano, prova a guidarli a FARE ciò che vuoi che facciano.

E inizia a GUARDARE su e per il design. Guarda. non valutare il contenuto, invece CERCA quali messaggi vengono trasmessi dalle pagine Web. Come usano spaziatura, colore, dimensione del carattere? Cerca di emulare un buon design. in bocca al lupo

e considera il suggerimento della scuola d'arte. I programmi di graphic design sono spesso alla ricerca di progetti di riprogettazione del mondo reale per i loro studenti.

Il problema principale che traggo da questa discussione è che sei più interessato a discutere e difendere il tuo "design" di quanto non sia interessato a imparare a creare qualcosa di attraente. Tipico di un ingegnere del software. Pensi di poter scomporre la pagina in elementi componenti, testarli e controllarli e quindi, una volta integrati i componenti, ritieni che gli elementi debbano enumerare matematicamente un buon design. Quindi pensi che, pubblicando questa domanda, puoi di nuovo tagliare la pagina ai componenti e discutere i meriti di ciascuno e discutere su come segue ciò che il fornitore di risposte ha detto.

Finché non sei disposto ad accettare che fai schifo a UX continuerai ad avere questo problema. Come detto sopra, la progettazione grafica riguarda la sensazione. La progettazione grafica non è uguale alla progettazione ingegneristica. Non puoi costruire matematicamente qualcosa, integrarlo con altre cose "matematicamente corrette" e aspettarti un buon risultato. Non sarai mai bravo in UX (probabilmente) perché semplicemente non guardi il mondo come lo vede un designer. Ma se smetti di misurare la tua pagina e confrontarla con qualcos'altro - apri te stesso completamente all'apprendimento realizzando che non sai nulla del design grafico, allora potresti iniziare a ottenerlo ...