MasterNewMedia Italia
Scopri i migliori tool per comunicare,
collaborare e fare marketing
   
Curated by: Luigi Canali De Rossi
 


23 luglio 2010

Guida Al Web Design: I Migliori Esempi Di Interfacce, Soluzioni Di Navigazione E Design Per Un Sito Web

Come puoi creare o migliorare il design di un sito web? A meno che tu non abbia qualche riferimento e principio chiave che ti mostrino come si devono impostare il layout, l'organizzazione dei contenuti e la leggibilità per determinare l'aspetto e lo stile del tuo sito, rimarrai insoddisfatto. Risolvere il solito problema del web design cercando ancora un altro template figo per un sito, non ti porterà ad ottenere risultati migliori di quelli che hai ottenuto finora. Non puoi raggiungere la "bellezza del design" o creare un sito "figo" aggiungendo widget, decorazioni ed altra paccottiglia. Il web design d'eccellenza e le interfacce utente spettacolari sono generalmente frutto di un grande lavoro di studio, non il risultato di una performance ispirata di un web designer alla moda.

Guida_Web_Design_15072010.jpg
Photo credit: Villedieu Cristophe

In questa guida di MasterNewMedia troverai una selezione altamente curata di guide, tutorial e raccolte di esempi visivi che possono aiutarti tantissimo a capire meglio cosa rende grande il design di un sito e come distinguere un design che funziona da un template da quattro soldi, magari appariscente, ma tutto fumo e niente arrosto.

E' importante capire infatti che i principi del web design e le tecniche migliori non sono utili solo per i blog, ma anche e perfino di più per qualsiasi tipo di sito focalizzato sui contenuti o su un determinato servizio che è possibile creare.

Per esempio, alcuni punti critici che la maggior parte dei nuovi siti web devono tenere in considerazione sono:

  • Above the fold: le persone devono sentirsi immediatamente a loro agio quando arrivano sul tuo sito. Non devono utliizzare la barra di scorrimento per vedere dove sono capitati, chi sei e cos'hai da offrire loro.
  • Leggibilità della pagina: non pretendere di essere Monet. Il virtuosismo nel web design è bello da vedere, ma non è obbligatorio. Quello che conta davvero è se la tua pagina comunica chiaramente quello che offri in una manciata di secondi.
  • Velocità di caricamento: ogni elemento di design che aggiungi alle tue pagine (widget, plugin, elementi in Flash, ecc.) contribuisce a rallentare il tempo complessivo di caricamento dei tuoi contenuti. Ricorda che la velocità è uno dei nuovi fattori di ranking che Google utilizza per stabilire la posizione del tuo sito all'interno dei risultati di ricerca.
  • Semplicità: sii semplice. Non sovraccaricare le tue pagine di contenuti e call for action. Comincia focalizzando il layout del tuo sito su pochi contenuti di valore e poi gradualmente guida il tuo lettore ad approfondirli.

Se, questo è ciò che stavi cercando, ecco un breve sommario degli argomenti principali che troverai dentro questa guida:

Se stai muovendo i primi passi per progettare un nuovo sito o stai solo cercando dei buoni esempi e delle tecniche valide per affinare il tuo progetto di web design, questa guida di MasterNewMedia è una risorsa completa che tratta le basi, i principi e le tecniche per migliorare l'aspetto grafico del tuo sito.

Ecco la nuova guida al web design di MasterNewMedia:

 

 

Prima del Web Design: Wireframing e Website Prototyping



Progettare la Struttura di un Sito

progettare_struttura_sito_id13659501.jpg

Quando inizi un progetto di web design, prima di tutto sforzati di pensare ad una struttura semplice e ad un'interfaccia di navigazione alla portata di tutti, che permetta di trovare le informazioni essenziali in modo rapido e diretto. Pensa alle domande che si pone il visitatore quando arriva sul tuo sito: "Dove mi trovo? Dove posso andare?" Ecco come puoi "rispondere" nel modo più efficace.

di Alina Teleanu - WebMasterPoint

 



Creare un Prototipo

creare_un_prototipo_by_zela.jpg

Progettare il prototipo di un sito ti consente di esplorare nuove idee, valutare scelte di web design e compiere test con gli utenti. Ecco come procedere per creare il prototipo del tuo sito web.

di Francesco Improta - Html.it

 



Wireframing E Web Site Prototyping: I Migliori Servizi per Progettare il Design del Tuo Sito

wireframing_website_prototyping_migliori_strumenti_gratuiti.jpg

I servizi di wireframing e web site prototyping possono aiutarti a creare una bozza dell'architettura generale del tuo sito, senza aver bisogno di dover assumere un web designer per farlo. Per questo motivo, il wireframing è la prima cosa a cui dovrebbe pensare chiunque vuole progettare un nuovo sito web. In questa guida di MasterNewMedia troverai descritti i migliori servizi gratuiti disponibili per lavori di wireframing e web site prototyping.

di Robin Good e Daniele Bazzano - MasterNewMedia

 



Wireframing E Web Site Prototyping: I Migliori Servizi Sotto i 150 Euro per Progettare il Design del Tuo Sito

wireframing_website_prototyping_strumenti_sotto_150_euro_design_sito.jpg

I servizi di wireframing e web site prototyping ti permettono di avere il controllo completo sulla struttura del tuo sito senza dover assumere un web designer. Puoi creare una bozza fedele che assomigli a quello che sarà il layout del tuo sito e che sia priva di dettagli sui colori, sulla grafica e sugli elementi specifici di design. In questa guida di MasterNewMedia troverai i migliori servizi di wireframing e web prototyping sotto i 150 euro per iniziare subito a progettare il tuo sito.

di Robin Good e Daniele Bazzano - MasterNewMedia

 



Grandi Esempi di Wireframe per Interfacce Utente e Mockup

Wireframe_Interfacce_Utente.jpg

Se stai progettando un'interfaccia utente per un sito o per un'applicazione iPhone, è sempre consigliabile iniziare da un wireframe. Henry Jones ha raccolto 18 grandi esempi di wireframe per interfacce utente e modelli. Molti di questi sono così belli che potresti trarre ispirazione per il tuo nuovo progetto di web design.

di Henry Jones - Web Design Ledger

 



Kit per Realizzare Wireframe ed Interfacce Utente

Kit_Realizzare_Wireframe_Interfacce_Utente.jpg

Scopri tutto quello che avresti sempre voluto sapere sugli attuali strumenti per creare wireframe e applicazioni stand-alone, così come altre risorse e modelli utili che potrebbero servirti quando crei il tuo wireframe.

di Paul Andrew - Smashing Magazine

 






Pattern per il Web Design



Cos'è un Design Pattern

design_pattern.gif

Cosa sono i "design pattern" e da dove vengono? Scopri quali sono i benefici specifici dell'utilizzo dei design pattern e perché dovresti inserirli nel tuo progetto di web design.

degli editor di Wikipedia - Wikipedia

 



Libreria di Web Design Pattern di Yahoo!

website_design_guide_yahoo_pattern_library.jpg

La libreria di design pattern di Yahoo! è una raccolta di pattern di interfacce utente che i web designer e i web developer possono utilizzare per prendere ispirazione nel progettare nuove pagine web. In questa libreria di Yahoo! puoi trovare un gran numero di modelli di web design utili e di elementi tipici, raggruppati insieme in una serie di categorie che includono layout, navigazione, selezione, interazione utente avanzata ed elementi social.

di Yahoo! Developer Network

 



Web Design: Libreria di Pattern

web_design_pattern_libreria_welie_logo.jpg

Una grande raccolta di web design pattern personalmente curata, preparata ed organizzata dall'interaction design consultant Martijn van Welie.

di Welie

 



Web Design Shop: Pattern Tap

website_design_guide_pattern_tap_logo.jpg

Pattern Tap è un negozio online che offre modelli di web design predefiniti organizzati in specifiche categorie (navigazione, bottoni, design, form, ecc).

di Pattern Tap

 






Template per Siti Web



Template di Alta Qualità Per Siti di E-Commerce

website_design_guide_templates.gif

Bellissimi template per siti commerciali curati e selezionati dalla redazione di Smashing Magazine. All'interno di questa collezione puoi trovare template preparati specificamente per WordPress, PrestaShop, osCommerce, Magento, Zen Cart, CubeCart e CRE Loaded, oltre ad un certo numero di template generici per siti di e-commerce.

di Steven Snell - Smashing Magazine

 



Template Gratuiti per Siti Web

Le migliori raccolte di template gratuiti disponibili sul web selezionate personalmente da Robin Good dopo un attento lavoro di analisi e ricerca.

di Robin Good - MasterNewMedia

 



Template a Pagamento per Siti Commerciali

Le migliori raccolte di template a pagamento per siti commerciali disponibili sul web selezionate con cura da Robin Good dopo una lunga ricerca.

di Robin Good - MasterNewMedia

 






Design della Navigazione di un Sito



Strategie di Design Della Navigazione di un Sito

Design_Navigazione_Sito.jpg

Quali sono i punti più importanti da considerare quando progetti la navigazione di un nuovo sito? Scopri in questa guida i passi fondamentali per creare un buon sistema di navigazione per il tuo sito web.

di Beatrice Ghiglione - Html.it

 



Grandi Esempi di Menu di Navigazione Creativi

menu_di_navigazione.jpg

Sei in cerca di ispirazione? Idee? Stai cercando degli esempi per creare ottimi menu di navigazione web? Eccoli qui.

di Tehseen - Pro Blog Design

 



Idee per Progettare il Menu di Navigazione di un Sito

website_design_guide_id17001711.jpg

Ulteriori idee per progettare sistemi di navigazione che funzionano veramente. Scopri come oltrepassare i limiti della tua creatività per progettare una soluzione di navigazione web che sia valida e realmente utile.

degli editor di Six Revisions - Six Revisions

 






Layout dei Siti



Introduzione All'Interface Design

website_design_guide_jeff_han_ted_user_interface_of_future.jpg

Scopri come progettare un'interfaccia utente efficace: quali sono i criteri fondamentali ai quali ispirarti e le cose delle quali devi tenere conto per fare un lavoro a regola d'arte.

di Francesco Improta - Html.it

 



Consigli per Migliorare i Tuoi Lavori di Web Design

website_design_guide_layout_by_dereck_mack_2.jpg

Scopri come migliorare il design del tuo sito rendendolo professionale, accattivante, chiaro ed usabile. Tutte queste belle parole sono il punto di partenza per far sì che il tuo sito venga apprezzato dal punto di vista grafico e sia il più chiaro possibile ai tuoi lettori. Ecco alcuni principi fondamentali del web design.

di Ryuichi Sakuma - CostruireWeb

 



Esempi d'Eccellenza di Layout per il Web Design

website_design_guide_id7210481.jpg

Come devi utilizzare griglie, colonne e blocchi per disegnare e organizzare l'interfaccia di un nuovo sito? Giselle Muller espone e seleziona un'ottima serie di esempi da usare e ai quali fare riferimento.

di Gisele Muller - Web Design Ledger

 



Jeet Design Do: la Formula Ninja dei Web Designer


Altre presentazioni di RobinGood

I punti chiave che guidano la mia strategia di design per MasterNewMedia e per tutto il resto dei miei progetti online ruotano tutti intorno a queste deci problematiche. Scopri quali sono.

di Robin Good - MasterNewMedia




Photo credit:
Progettare la Struttura di un Sito - Helder Almeida
Creare un Prototipo - Marja Flick
Wireframing E Web Site Prototyping: I Migliori Servizi Per Progettare Il Design Del Tuo Sito - WebDesigner Depot
Kit Per Realizzare Wireframe ed Interfacce Utente - Venus Worldwide
Cos'è un Design Pattern - Yahoo! Design Pattern Library
Template di Alta Qualità Per Siti di E-Commerce - Brian Morgan
Idee Per Progettare il Menu di Navigazione di un Sito - Brian Jackson
Consigli Per Migliorare i Tuoi Lavori di Web Design - Jefferson Han
Esempi d'Eccellenza di Layout Per Web Design - James Steidl

 

 
 
 
 
 
Commenti    
blog comments powered by Disqus

 

 

 

 

16051
 




 

I Toolkit di Robin


 









 

 

 

 

  • RSS Feed

          Mail
    Nome:
    Email:
     



     
     

     

    Web Analytics