-
Nelle prossime lezioni parleremo di progettazione grafica
-
e di un insieme di strategie per aiutarvi a comunicare visivamente in modo più efficace.
-
Per iniziare guardiamo questo esempio:
-
un po' di testo.
-
Che cosa potremmo fare per migliorarlo dal punto di vista tipografico e come possiamo decidere se abbiamo fatto bene?
-
Una cosa che possiamo fare è quella di introdurre degli spazi bianchi nel progetto ;
-
e come Robert Bringhurst scrive, con spazi bianchi,
-
"Qualche spazio deve essere stretto affinché altri spazio deve essere ampio,
-
e qualche spazio deve essere svuotato in modo che altri lo spazio può essere riempito."
-
Così, Let's vuoto fuori alcuni spazi e riempire alcuni altri.
-
E che cosa si può vedere qui è con l'aggiunta di un piccolo spazio bianco, siamo in grado di chunk progettazione visiva
-
affinché i bit salienti sono raggruppati insieme e diversi bit sono ulteriormente a parte.
-
Ma scommetto che potremmo fare di più.
-
Così, cos'altro potremmo saremmo in grado di fare qui?
-
Esploriamo con variazione tipografiche e dimensione contrasto per dare qualche senso della gerarchia individuale
-
e come lo descrive Edward Tufte, informazioni consiste delle differenze che fanno la differenza.
-
Ecco quindi che abbiamo fatto qualche aggiunta di alcuni scala e qualche peso —
-
Sai, questo può o non può essere l'invito migliore del mondo, ma ti dà un senso
-
il tipo di leva che si può ottenere con l'aggiunta di qualche variazione tipografici al vostro progetto.
-
Naturalmente non vuoi andare in mare, ma mi piace questo esercizio molto.
-
Ho preso dal libro di Jenifer Tidwell «Progettare interfacce»
-
che mi raccomando e stavo andando per portarla a mostrare in questo video.
-
Ho due copie, ma raccomando così spesso
-
sono entrambi prestato fuori adesso così avrete a cercarlo.
-
Spesso, di buona visual design — come buono buoni o recitazione occhiali da vista —
-
passa inosservato, perché il contenuto viene attraverso chiaramente e senza ostacoli.
-
Naturalmente, a volte ci accorgiamo buon design e buona recitazione
-
per il suo sapore o per la sua capacità di comunicare una certa idea.
-
Ma noi ce ne accorgiamo in modo diverso rispetto a cattiva progettazione e cattivo recitazione.
-
Cattiva progettazione che abbiamo notare quando abbiamo viaggio su di esso.
-
Come gli occhiali che sono sporchi, graffiato o avere la prescrizione sbagliata,
-
abbiamo a strizzare gli occhi per dare un senso delle cose; e non è sempre consapevole —
-
a volte è un po ' male — sarebbe inconsciamente, ma noi stiamo ancora strabico
-
e così un sacco di progettazione è di cercare di rendere le informazioni che conta venire chiaramente.
-
E per fare questo, penso che ci sono tre principali obiettivi di un sacco di progettazione visiva.
-
Il primo gol è di guidare il popolo di trasmettere la struttura, l'importanza relativa e relazioni.
-
La seconda è di istituire pase di interazione per attirare persone in,
-
aiutare a orientare e fornire ganci a tuffarsi in profondità.
-
E il terzo è quello di utilizzare il visual design per esprimere il messaggio dell'informazione —
-
per dargli qualche significato e stile e respirare la vita nel contenuto.
-
Quindi pensare a questo, io vorrei mostrare quattro pagine di siti diversi.
-
Qui è il New York Times.
-
Google.
-
Craigslist.
-
E il Webby Awards.
-
E penso che in tutti i casi di quattro, ciascuno di questi è veramente efficacia per l'utilizzo degli strumenti di progettazione visiva,
-
alcuni più ovviamente rispetto ad altri.
-
Andiamo attraverso di loro ancora una volta. Questa volta, ho intenzione di ogni pagina di sfocatura
-
per rendere la gerarchia più salienti e da orgasmo il testo effettivo.
-
Così, ecco il New York Times offuscato fuori, e si può vedere
-
che la gerarchia complessiva della pagina è ancora abbastanza chiara.
-
Si poteva vedere l'intestazione
-
l'immagine emozionante per avvicinarvi, una serie di articoli,
-
navigazione lungo la sinistra e un altro insieme di navigazione lungo la parte superiore.
-
Ecco la homepage di Google offuscata e la sfocatura su che ti dice qualcosa circa la prominenza:
-
Con anche solo una piccola sfocatura, la ricerca evidenziata e la barra di navigazione
-
scompare in secondo piano come lo stesso come il resto di quella barra nav.
-
Ma è bene perché quando la maggior parte delle persone si vedono sullo schermo, probabilmente ha una buona idea che cosa fare.
-
In un certo senso, la parte più importante di evidenziazione nav superiore
-
è quello di stecca la possibilità di fare clic su altre etichette per arrivare ad altre cose.
-
Il logo di Google, d'altra parte, anche con la giusta quantità di sfocatura, stil l letture forte e chiare.
-
Minimalismo famoso di questa pagina fa complicato web sembrano gestibile.
-
E combinare con questo, i colori primari che hanno contribuiti a enfatizzare la facilità di tutto.
-
Come un po' di curiosità, ecco l'originale Google
-
da quando Larry Page e Sergey Brin erano studenti di dottorato di ricerca presso la Stanford.
-
Hai costruirono il loro primo disco rigido di questi mattoncini lego,
-
e io sono abbastanza sicuro che questo è da dove vengono i colori del logo di Google
-
o ispirato da queste Lego.
-
Qui è la Home page di Craigslist.
-
Un sacco di gente potrebbe pensare che io sono pazzo nel credere che esso ha un'abbastanza buona progettazione visiva.
-
Dopo tutto, sembra che essa fu costruita nel 1996 circa
-
e in effetti è probabilmente stato, tranne che per un po ' di aggiornamento sui contenuti.
-
Un altro motivo per persone spesso criticare Craigslist è che
-
c'è un sacco di abbreviazioni e altre cose qui
-
che solo in generale può far sentire inelegante o goffo o progettati per esperti solo.
-
Ma un sacco di utenti Craigslist sono ripetere gli utenti, e quello che vedete qui è
-
nella versione offuscata c'è effettivamente una gerarchia abbastanza buona informazione che viene convogliata.
-
Così ancora una volta possiamo vedere il titolo fino in alto a sinistra.
-
Possiamo vedere il widget di calendario.
-
Possiamo vedere come la parte di amministrazione delle cose è separata fuori al lato sinistro anche.
-
E poi possiamo vedere un insieme di contenuti categorizzati in mezzo
-
e possiamo vedere noi hanno un diverso tipo di navigazione a destra —
-
Nella versione sfuocata possiamo vedere che questo è per la città.
-
Ed ecco i premi Webbie.
-
Come con tutti e quattro di queste pagine si può vedere come il colore viene utilizzato con parsimonia e in modo molto efficace.
-
La maggior parte della pagina è in bianco e nero.
-
I principali pezzi di colore che vedete sono in basso a sinistra —
-
c'è un blocco di testo rosso, che dice di guardare l'ultima Webbie Awards.
-
E in alto a sinistra, vediamo un po ' di colore per i social media che collega in con il sito
-
e ancora una volta, vediamo un elemento di forte navigazione lungo il lato della mano sinistra,
-
il titolo in alto a sinistra, abbiamo l'intestazione di pagina nel centro qui e il contenuto di sotto di esso,
-
e poi abbiamo un elemento importante di navigazione lungo la parte superiore.
-
Quando pensi a questo proposito, tutti e quattro di queste pagine
-
alcuni dei siti più altamente trafficate sul web, tra cui utilizza strumenti visual piuttosto semplici
-
per essere in grado di trasmettere l'organizzazione e la gerarchia e dove disegnare il vostro occhio nella pagina.
-
Stanno usando tipografia, stanno usando layout e stanno usando colori.
-
E questi sono in un certo senso, piuttosto semplici strumenti.
-
Continuamente ciò che mi stupisce è il potere che è disponibile con questi strumenti.
-
Mettere insieme queste fornisce la guida, la stimolazione e la messaggistica che abbiamo parlato all'inizio.
-
E che a sua volta aiuta le persone a leggere, navigare e dare un senso al mondo dell'informazione.
-
C'è un gioco da tavolo, un collega che è pubblicizzato con la linea di tag,
-
"Un minuto per imparare, una vita al maestro".
-
E ciò vale splendidamente per progettazione visiva.
-
Si può iniziare subito l'uso di questi principi, e speriamo che questi video otterrebbe hai cominciato.
