Come progettare una pagina Web in Illustrator

December 2

Come progettare una pagina Web in Illustrator


Tutti hanno bisogno di un sito web, sia per affari, lavoro senza scopo di lucro o l'uso semplicemente personale. Tuttavia, non molti di noi sanno come codificare un sito web. Anche se non è possibile codificare un sito, però, è ancora possibile progettare una pagina web utilizzando un programma di grafica come Adobe Illustrator. Ciò consente di rendere la vostra pagina web guardare solo il modo desiderato, e poi qualcun altro può fare la parte di codifica.

istruzione

1 Disegna le tue idee di layout su un pezzo di carta. Schizzo è il modo migliore per iniziare il flusso creativo e aiuta a trovare con buoni concetti. Disegnare circa 10 schizzi di diversi layout, quindi scegliere il vostro preferito e disegnare più varianti su quel layout. Una volta che avete la vostra idea raffinato il layout, mettere la carta da spolvero al lato del computer per un riferimento mentre si lavora in Illustrator.

2 Scarica un modello di griglia per Adobe Illustrator. Ogni buon sito web inizia con una griglia, per aiutare ad organizzare i contenuti e rendere il sito visivamente piacevole. La larghezza standard è di 960 pixel per un sito web, perché è compatibile con la maggior risoluzione dello schermo, in modo da trovare uno che è larga 960 = pixel. Aprire il modello in Illustrator.

3 Iniziare mettendo scatole in cui il contenuto della tua pagina web andrà a servire come guide. Mettere caselle in cui la navigazione, colonne di testo e immagini andrà. Questo si chiama wireframing. Navigation dovrebbe andare sulla parte superiore o sui lati, mai in basso. Ricordate di mettere il contenuto più importante nel posto più ovvio. Non andare avanti fino a quando il wireframe è finito.

4 Inizia compilando il tuo wireframe con grafica e testo. È possibile importare immagini da altri programmi, altri file o semplicemente creare in Illustrator, come si va. Adobe Illustrator è particolarmente utile per la creazione di grafica in stile Web 2.0, uno stile liscio moderno che spesso utilizza elementi 3D dall'aspetto. Tenete a linee guida mente generale, web-tipografia per il testo: l'altezza della linea dovrebbe essere di circa 150 per cento l'altezza del vostro tipo, dimensione del testo non dovrebbe mai essere inferiore a 10 o 12 punti, ed essere sicuri che il vostro colore del testo contrasta con lo sfondo sufficientemente per la lettura .

5 Guardare oltre il vostro disegno con attenzione per tutto ciò che può essere migliorato. Piccoli dettagli aggiungono finezza ad un disegno, in modo da guardare fuori per i luoghi in cui è possibile aggiungere un dettaglio teeny. Spesso, tuttavia, un disegno può essere migliorata semplificando piuttosto che aggiungendo ad esso. Chiedete ad amici per il feedback, anche. Una volta che si è convinti che il disegno è perfetto, il gioco è fatto. È possibile inviare a un servizio online che converte i file Illustrator in siti web, o imparare l'HTML e CSS e fai da te!

Consigli e avvertenze

  • Visitare gallerie del sito web e leggere i blog di web design per trarre ispirazione per il vostro disegno!
  • E 'un errore comune per riempire il più un'area della pagina web come si può con testo e grafica. Non abbiate paura di lasciare spazi vuoti e grandi margini, chiamati uno spazio bianco, nella progettazione. Dà un disegno di una sensazione di qualità superiore e rende più facile da navigare.