Lasciatemi prefazione tutto quello che sto per scrivere dicendo questo: io non sono un designer. Mi piace il design, ma io tendo a mettere mano a un po '. In realtà sono andato un po 'da e per la mia carriera passando da ruoli di codice puro a ruoli front-end per i ruoli web dove è sorta di bisogno di un po' di tutto, ed è probabilmente dove sto più comodo ora.Quindi trattare tutto ciò che seguaci come il progettista-by-default i commenti di uno sviluppatore:)
Fisso o variabile
No, non i tassi di interesse, layout di pagina web. Da qualche parte nel processo di progettazione è necessario effettuare una chiamata se si fissa la larghezza della pagina ad un valore arbitrario o lasciarlo libero di vagare in qualsiasi larghezza risoluzione del browser supporta. Il primo ti dà certezza di come la pagina scorrerà, la seconda massimizza lo spazio disponibile.
Come vedrete su questo blog qui, ho fissato la larghezza. Ho seguito la filosofia del sistema 960 griglia che significa che su una macchina di 1024 x 768 risoluzione (minimo ragionevole accettata), ho lasciato molto spazio per altre cose che occupa il piano orizzontale (cioè le barre di scorrimento e cromo finestra ) e lo divide in basso ben in cifra tonda (divisibile per 2, 3, 4, 5 e 6). Tutto questo è molto utile una volta che si desidera avviare cose suddivisione in colonne.
Ma significa anche non ci può essere un sacco di spazio sprecato quando il browser scale fuori a risoluzioni più elevate. Per esempio, l'esecuzione a 1920 x 1080:
La ragione per cui ho scelto questo modello per troyhunt.com è che mi ha dato un sacco di prevedibilità nella incorporare immagini nei post. Per esempio, io posso facilmente posizionare un'immagine tale che galleggia a fianco di un testo e occupa la stessa quantità di spazio verticale indipendentemente dalla risoluzione del browser. Detto questo, leggendo un post il feed RSS o attraverso un servizio come sorta di Instapaper getta tutto ciò che fuori dalla finestra comunque. Ne riparleremo più avanti.
Un altro angolo è quello di prendere un foglio dal blog di Scott Hanselman è che è stata recentemente curata da un architetto vero e proprio vivere , voglio dire qualcuno che è un designer corretto, non un anello-in:
Questo sembra piuttosto semplice a grande risoluzione (e ha ancora molti spazi bianchi), ma come si scala verso il basso, le caratteristiche sono realmente disabili. Vedere cosa succede con la barra laterale a destra una volta che la risoluzione arriva fino:
Per ASafaWeb, il contenuto è re. Cosa c'è di più importante di qualsiasi altra cosa in questo sito è comunicare il messaggio dei risultati della scansione, quanto è stato fatto, quello che il risultato è stato e, se necessario, come risolvere il problema. Il contenuto è dinamico in quanto vi sono molti, molti differenti combinazioni possibili di un risultato della scansione che significa che c'è un sacco di varianza in termini di come il contenuto potrebbe flusso. È per questo che inizialmente l'obiettivo di fare tutto variabile.
Il motivo per cui non si finisce di attaccare con larghezza variabile è semplicemente questo: sembra merda. Il problema è che trovare qualcuno con un sacco di spazio orizzontale e rapidamente finiscono con linee molto lunghe di testo che vengono francamente, incubi leggibilità (ho il sospetto che può anche essere il motivo per Scott ricoperto la sua larghezza orizzontale a un limite massimo). Qualcosa di più di circa 1.000 pixel (un bar piuttosto basso) e hai dei problemi. C'è una buona ragione per cui quando si guarda al web design bellissimo, sarà quasi certamente trovare tutto fisso da qualche parte a sud di 1.000 pixel.
Ecco alcuni buoni esempi aggregati:
- 50 + siti web con schemi a colori Grande
- 74 Esempi Di Fresco Designs bella pagina singola Sito
- 50 Bella CSS-Based Web-Designs
Non fissa molto succedendo lì ...
Tipografia
Oh ragazzi, qui è un inferno di un argomento. In primo luogo, può involontariamente (o inconsapevolmente) l'interscambio le parole "carattere" e "font". Vedete, sono (molto un po 'semanticamente) bestie diverse e ci sono quelli tra noi che si prendono il piacere di notare che voi (o me, in questo caso), non conoscono la differenza. Devo fare questo errore, mi permetta di fare riferimento alla rubrica dal titolo "F *** te stilista snob" nel link di cui sopra - si sa benissimo cosa intendo!
Con che dietro di noi, andiamo avanti. Se pensate che la tipografia coinvolge niente di più che la scelta di un tipo da un elenco, hanno un ascolto recenti Vita Questo sviluppatore e potrai iniziare ad avere un'idea di quanto va in questo argomento (e come appassionato la gente può ottenere su di esso) .
Cominciamo con le basi, questo è il font sans serif:
E questo è un font con serif:
Serif sono i ragazzi poco in rosso che decorano alcuni bit a punta:
Vedrete serif basato molto usato nella stampa e apparentemente mostrano miglioramenti leggibilità (qualcosa del serif stabilire una base dura che aiuta l'occhio individuare le linee).Tuttavia, serif non tendono a lavorare anche su PC dato che gli schermi hanno una risoluzione così bassa che lottano per rendere pulito il dettagli delle grazie. Per esempio, si dovrebbe stampare a qualche nell'ordine di 300 DPI e verso l'alto ma la maggior parte schermi sono più nella gamma di 100 DPI. Un'eccezione bene è un dispositivo come un iPhone 4 che può fare 326 DPI, ma naturalmente, come con il web tutto ciò, si sta progettando per le masse, il che significa che è necessario assumere un basso DPI.
Bottom line: i caratteri con grazie non funzionano bene per i paragrafi di testo sul web.Tuttavia, sono ok per dimensione in punti più grandi e più piccoli blocchi di testo come intestazioni. Ci sono molti esempi di design mirato siti assunzione di questo approccio. Per esempio, A List Apart :
Oppure Hutchhouse :
Oppure SR28.com :
Devi quindi caratteri tipografici che sono stati espressamente progettati per essere utilizzati sullo schermo di un computer, ad esempio, Verdana :
Verdana è stato progettato per essere leggibile anche a dimensioni ridotte sullo schermo del computer. La mancanza di terminazioni, di grandi dimensioni x-altezza, proporzioni largo, allentato letter-spacing, contatori di grandi dimensioni, e ha sottolineato le distinzioni tra i personaggi in modo simile a forma sono scelti per aumentare la leggibilità.
È interessante notare che sembra esserci un po 'di progettista-odio per il povero vecchio Verdana. Forse è a causa delle sue radici Microsoft (il disegno viene da Redmond), o forsecome dicono alcuni , è semplicemente perché il font è relativamente grande - troppo grande - rispetto ad altri tipi di caratteri (questo, naturalmente, è facilmente rettificabile). Ironia della sorte, che puntano precedente utilizza un carattere serif per il corpo del testo che è considerato un po 'di un no-no. Come ho accennato in precedenza, la tipografia è un mondo folle e confusione!
Ma non può sfuggire il fatto che Verdana è stato progettato con il preciso scopo di far leggere bene il testo sullo schermo, che dal punto di vista dell'usabilità, dà un segno di spunta piuttosto grande. Infatti Jakob Nielsen utilizza esclusivamente su useit.com ed è difficile trovare una fonte più autorevole sulla scienza di creare siti web fruibile di questo ragazzo.
Guarda, in ultima analisi, lo spazio progettista è pieno di tipografia passi falsi. Ecco un esempio perfetto: Instapaper è considerato un modo più eccellente del materiale di lettura online in un succinto più, la moda leggibile. Quindi, che tipo è Instapaper sul iPad - un dispositivo di 132 DPI - scegliere?
E che dire su iPhone 4 con quella bellissima 326 Display retina DPI:
Grani di persone sale, grani di sale.
Aspettarsi l'inaspettato
L'altra cosa da considerare con sia il flusso dei contenuti sullo schermo e la tipografia è che sono entrambi altamente variabile. Non voglio dire a causa della risoluzione dello schermo, sappiamo tutti che già, voglio dire, perché viene utilizzato in modi inaspettati.
Persone che cambiano dimensioni dei caratteri, Instapaper, RSS, modalità di stampa: è dappertutto. Fare ipotesi circa il posizionamento dei pixel perfetta di design contro i contenuti è prendono in giro e si arriva annullata abbastanza velocemente facendo questo.
Ecco un perfetto esempio di dove le cose vanno male: di recente ho scritto su di business Segreto iOS e come faccio di solito, ho centrato più piccole immagini sulla pagina, ma per i fellas grande che ha compilato il tutto 620 pixel di spazio disponibile, ho semplicemente lasciato cadere a. È possibile vedere i bordi grigi ai lati di esso che significa che è compilato ai bordi:
Dopo tutto, non importa se un'immagine che occupa tutto lo spazio orizzontale è allineato a sinistra, destra o centro, vero? Beh, in realtà, lo fa:
In questo caso, il mio Outlook lettore RSS è venuta l'allineamento dell'immagine in alto a sinistra (quello che ci si aspetta senza allineamento esplicito) e impostare il fondo al centro.Così le immagini senza esplicito allineamento sempre seduti a sinistra, giusto? Uh:
Sembra che Instapaper ha un debole per mettere tutto in pieno centro! E questo è bene in questo contesto, ma il punto è che devi aspettare il tuo sito web da utilizzare in tutti i modi che probabilmente non hanno previsto - molti dei quali non esistono ancora - e si puo ' t essere troppo prezioso di cose come l'allineamento del contenuto. Invece, devi progettare in modo tale che il flusso dei contenuti in modo nativo all'interno dei confini del dispositivo / app / widget si lasciò cadere.
Aspettatevi il sito per essere visualizzato in modi che non ti aspetti.
Riassunto
Questo riduce ad alcuni principi chiave per ASafaWeb:
- Fissare la larghezza della pagina. Tutti i siti raffreddare lo stanno facendo ed è molto, molto difficile creare un design unitario, senza farlo.
- Smettere di preoccuparsi font sanguinosa. Ci sono un sacco di opinioni, un sacco di contraddizioni e francamente, se si guarda bene e funziona in modo coerente, lo sto facendo.
- Non ottenere preziose di layout. Ci sono tanti modi diversi questo sito potrebbe essere usato la cosa principale è concentrarsi sulla compatibilità delle caratteristichepiuttosto che pixel-perfect rappresentanza in ogni scenario.
Naturalmente ho il lusso di impostare la mia propri confini su questo, io sono sia il cliente e lo sviluppatore e come tale io a decidere il bilancio di usabilità rispetto al progetto rispetto a caratteristiche rispetto a ciò che è semplicemente pratico. E 'una rara opportunità per me di godere di tale libertà e ho intenzione di fare la maggior parte di esso:)
Nessun commento:
Posta un commento