Progettazione di siti web
La progettazione web ha un collegamento diretto all'aspetto visivo di un sito web. Un web design efficace è necessario per comunicare le idee in modo efficace.
Il web design è un sottoinsieme dello sviluppo web. Tuttavia, questi termini sono usati in modo intercambiabile.
Punti chiave
Il piano di progettazione dovrebbe includere quanto segue:
Dettagli sull'architettura delle informazioni.
Struttura pianificata del sito.
Una mappa del sito di pagine
Wireframe
Wireframesi riferisce a una guida visiva all'aspetto delle pagine web. Aiuta a definire la struttura del sito web, il collegamento tra le pagine web e il layout degli elementi visivi.
Le seguenti cose sono incluse in un wireframe:
Scatole di elementi grafici primari
Posizionamento di titoli e sottotitoli
Struttura del layout semplice
Inviti all'azione
Blocchi di testo
Wireframe può essere creato utilizzando programmi come Visio ma puoi anche usare carta e penna.
Strumenti di progettazione web
Ecco l'elenco degli strumenti che possono essere utilizzati per realizzare progetti web efficaci:
Coda 2Coda 2 è un potente strumento di sviluppo e progettazione web, dotato di una migliore interfaccia utente, modifica del testo, gestione dei file, clip, siti, design e un migliore supporto Mysql.OmniGraffle
OmmniGraffle è utilizzato principalmente per wireframing. Lo svantaggio di questo strumento è che non ha la prototipazione interattiva ed è disponibile solo per Mac.Pen and Paper
È possibile utilizzare carta e penna per disegnare l'aspetto dell'aspetto del sito web.Vim
Vim è un ottimo strumento di progettazione web, supporta l'intenzione automatica completamente personalizzabile del codice, buffer multipli per l'archiviazione del codice tagliato / copiato e la registrazione delle azioni per la ripetizione automatica.
| SN | Descrizione dello strumento |
|---|---|
| 1. | Photoshop CC Questo è un ottimo strumento di progettazione web fornito da Adobe. L'ultimo Photoshop CC 2014 supporta molte nuove funzionalità come oggetti intelligenti, composizioni di livelli, guide intelligenti, integrazione con Typekit, ricerca di caratteri e miglioramenti del flusso di lavoro. |
| 2. | Illustrator CC Illustrator CC è anche uno strumento di progettazione Web dotato di potenti funzionalità come le librerie AutoCad, la sovrastampa del bianco, lo scambio proxy di riempimento e traccia per il testo, generazione automatica degli angoli, immagini non incorporate e strumenti di tipo tocco ecc. |
| 3. | |
| 4. | |
| 5. | Sublime Text Sublime Text è un editor di codice sorgente con interfaccia di programmazione dell'applicazione Python. La sua funzionalità può essere estesa utilizzando i plugin. |
| 6. | |
| 7. | |
| 8. | Imageoptim Fondamentalmente viene utilizzato per ottimizzare le immagini su un sito Web al fine di caricarle più velocemente trovando i migliori parametri di compressione e rimuovendo i commenti non necessari. |
| 9. | Sketch 3 Sketch 3 è uno strumento di progettazione Web sviluppato specificamente per la progettazione di interfacce, siti Web, icone, ecc. |
| 10. | Heroku È anche un ottimo strumento di sviluppo web che supporta Ruby, Node.js, Python, java e PHP. |
| 11. | Axure Supporta strumenti di prototipazione, documentazione e wireframing per la progettazione di siti Web interattivi. |
| 12. | Hype 2 Hype 2 offre: il modo più semplice per animare e aggiungere interattività, la durezza la potenza di HTML5, la reattività mobile e le funzionalità WYSIWYG. |
| 13. | Image Alpha Questo strumento aiuta a ridurre le dimensioni dei file PNG a 24 bit. Lo fa applicando la compressione con perdita e convertendolo in formato PNG8 + alpha che è più efficiente. |
| 14. | Hammer Questo strumento è adatto a non programmatori e va bene solo per piccoli progetti. |
| 15. | JPEGmini Lite È uno strumento di ottimizzazione delle immagini e supporta foto in qualsiasi risoluzione fino a 28 Megapixel. |
| 16. | BugHerd Questo strumento aiuta a vedere come stanno andando i progetti e su cosa stanno lavorando tutti. Aiuta anche a identificare i problemi in fase di sviluppo. |
Anatomia della pagina web
Un sito web include i seguenti componenti:
Blocco contenente
Containerpuò essere sotto forma di tag body della pagina, un tag div contenente tutto. Senza contenitore non ci sarebbe posto dove mettere i contenuti di una pagina web.
Logo
Logo si riferisce all'identità di un sito Web e viene utilizzato in varie forme di marketing di un'azienda come biglietti da visita, carta intestata, broucher e così via.
Naviagation
Il sito è navigation systemdovrebbe essere facile da trovare e utilizzare. Spesso la navigazione è posta a destra nella parte superiore della pagina.
Soddisfare
Il contenuto di un sito web dovrebbe essere pertinente allo scopo del sito web.
Piè di pagina
Footersi trova in fondo alla pagina. Solitamente contiene copyright, informazioni contrattuali e legali, nonché pochi collegamenti alle sezioni principali del sito.
Spazio bianco
È anche chiamato come negative space e si riferisce a qualsiasi area della pagina non coperta dal tipo o dalle illustrazioni.
Errori di web design
Si dovrebbe essere consapevoli dei seguenti errori comuni da tenere sempre a mente:
Il sito web non funziona in nessun altro browser o altro Internet Explorer.
Utilizzo di tecnologie all'avanguardia senza una buona ragione
Audio o video che si avvia automaticamente
Navigazione nascosta o mascherata
Contenuto flash al 100%.