Visualizzazione post con etichetta Web design. Mostra tutti i post
Visualizzazione post con etichetta Web design. Mostra tutti i post

domenica 28 aprile 2013

Quali FONT utilizzare per un sito WEB ?

E' consigliato utilizzare solo font standard, in modo che le nostre pagine possano essere lette senza problemi da tutti gli utenti. Per utilizzare font personalizzati dovremo infatti aspettare che la proprietà @font-face dei fogli di stile sia finalmente supportata da tutti i browser.
 
 
La tabella che trovate di seguito, realizzata da Richard Rutter, mostra i font che sono installati di default sui sistemi operativi Mac e Windows, quelli installati con le varie versioni di Office e quelli installati con la Creative Suite di Adobe.
fontmatrix-small
Grazie a questa tabella sappiamo che i font più compatibili con le tre principali piattaforme sono:

    - Georgia
    - Palatino Linotype
    - Times New Roman
    - Arial
    - Trebuchet MS
    - Verdana
    - Comic Sans MS
    - Courier New

Sono i font più famosi e utilizzati, tranne il palatino linotype, font poco conosciuto, che ho io stessa utilizzato in alcuni miei progetti web: lo trovo più originale del Georgia e facilmente leggibile.

lunedì 18 marzo 2013

Che cos'è un sito Responsive ?

Il termine responsive in inglese significa “reattivo”, e ciò che fa un sito responsive è “reagire” in maniera diversa a seconda del dispositivo con cui viene visualizzato.
 

Se hai deciso di creare un sito responsive, forse pensi che significhi solamente fare in modo che il testo vada a capo una volta arrivato al margine destro.

Ma il sito responsive è molto di più. Certo, prima di tutto deve adattarsi alla larghezza dello schermo utilizzato. Ma soprattutto il sito responsive è visualizzato da tutti i dispositivi senza perdita di contenuti, di elementi grafici essenziali e, infine, di usabilità.

Vorrei farti riflettere qualche secondo su questi aspetti, in modo che poi sarai in grado di creare un sito responsive con WordPress che sia veramente funzionale. Perciò, vediamo un attimo queste caratteristiche più nel dettaglio.
Creare un sito responsive: adatta il contenuto alla larghezza del dispositivo

Un sito responsive ha un layout fluido: il testo ritorna a capo una volta raggiunto il margine destro, mentre gli elementi affiancati si riposizionano uno sotto l'altro. La disposizione degli elementi che nel PC è orizzontale, nel dispositivo mobile diventa verticale.

Cosa significa per un designer progettare e realizzare un template responsivo? Significa progettare la grafica e l'interazione utente non di uno, ma di tanti layout, quante sono le risoluzioni dei display più diffusi:

    - Smartphone
    - Tablet
    - Desktop
    - …

è per questo che di solito un sito responsive costa più caro di un sito che non lo è: proprio perché ogni elemento deve essere tenuto sotto controllo in tutte le sue metamorfosi.
Spesso la maggiore cura viene dedicata alla progettazione del layout desktop, sia per contenere i costi, sia perché di solito il cliente ne è più consapevole. Il layout desktop quindi informa e guida tutti gli altri.
Tuttavia ci possono essere casi in cui la versione mobile di un sito è più importante di quella desktop: in questi casi è bene stravolgere la prassi abituale e partire dalla progettazione per mobile.

lunedì 11 marzo 2013

Struttura LAYOUT Sito WEB

Se conoscete il funzionamento di una griglia CSS quello che vi resta da apprendere è come poter costruire il vostro primo layout! Ed è proprio quello che andremo a fare insieme in questa lezione.
 
Lo scopo di questa lezione è andare a creare un layout che rappresenti i seguenti elementi
Sono sicuro che avete già visto moltissimi siti che hanno questa struttura e sperimentando con il box model avete iniziato a chiedervi come tutto questo fosse possibile. Uno dei vari modi per realizzare un layout riguarda quello di affidarsi alle griglie CSS che faciliteranno il nostro lavoro e lo renderanno compatibile con i vari browser senza alcuno sforzo da parte nostra.

Nell’esempio presentato sopra possiamo capire come ci basti delle semplici classi per poter creare il nostro primo layout. In questo caso abbiamo creato un layout di due colonne, una per i contenuti principali (#main) mentre un altra per la navigazione secondaria (#sidebar).

martedì 5 marzo 2013

Che cos'e il LAYOUT WEB ?

Per layout web intendiamo il tipo di impaginazione che scegliamo durante la realizzazione di un sito web. Ci riferiamo, in pratica, alla struttura di base delle diverse pagine che lo costituiscono e al tipo di grafica usata per la loro costruzione. Tale processo di creazione può essere tuttavia complicato e necessita di una certa esperienza e di un’approfondita conoscenza di tutti i tipi di linguaggio utili (HTML, CSS, TEXT ecc.), e di tecniche di applicazione di grafic design.
 
 
Noi di Backorder siamo una web agency specializzata nella progettazione e nella personalizzazione di layout per le pagine web di siti internet. A differenza del servizio di web design, il layout web prevede l’utilizzo di template già creati e la successiva personalizzazione delle pagine in base ai contenuti da inserire.

L’impaginazione di un sito web è fondamentale, e include sia la struttura funzionale delle pagine, sia la parte grafica. Quando lavoriamo su pagine web dal layout predefinito, il nostro lavoro di personalizzazione prevede l’inserimento di testi “Seo friendly” e di immagini originali. L’impaginazione è uno degli aspetti più importanti nella creazione di un sito web, poiché un sito risulta più intuitivo e semplice da utilizzare solo se i suoi contenuti sono correttamente disposti all’interno della struttura, ossia del layout. La posizione di un testo e il suo aspetto grafico riguardano non solo il significato del messaggio, ma anche la sua funzionalità. Inoltre, i siti web vengono realizzati sempre con strutture rigorosamente responsive. 

Scelta del layout
Scegliere il giusto layout, poi, richiede attenzione ed esperienza: se utilizziamo una buona struttura, riusciremo ad ottenere una navigazione migliore dei contenuti all’interno del sito. Lo scopo principale è quello di valorizzare, in maniera univoca, il contenuto della comunicazione. La scelta del layout concerne, quindi, ciò che si sta presentando: ad esempio, se il testo è il vero oggetto in primo piano, il layout va costruito attorno ad esso. Se invece il contenuto principale della pagina web è rappresentato da immagini, bisognerà scegliere un layout che attiri l’attenzione degli utenti sulle immagini, includendo anche descrizioni testuali.

mercoledì 27 febbraio 2013

Cosa fa un WEB DESIGNER ?

Credo che un poco lo si diventi, un poco lo si sia sempre stati e man mano che si va avanti lo si scopra e lo si porti sempre maggiormente alla luce. Servono studi accademici ed esperienze sul campo. Credo che prendendo centinaia di persone che fanno questa stessa professione, si otterranno centinaia di risposte diverse. Personalmente ho fatto l’Università che mi ha dato grandi basi teoriche ma praticamente nulla di pratico, dopodiché ho iniziato a lavorare tramite uno stage non retribuito presso una grossa azienda e la sera frequentavo un corso pratico di programmi grafici. In azienda mi sono state date le basi di organizzazione sul lavoro e rudimenti di buon gusto, perché anche l’occhio deve essere educato, e nel corso serale mi sono stati insegnati i principali programmi di disegno e impaginazione, senza ai quali non puoi fare granché. Poi ho iniziato a lavorare presso altri studi di comunicazione dove tramite esperienza e suggerimenti di colleghi più anziani e assai preparati, sono riuscito ad imparare qualcosa e pian piano a diventare un professionista di questo settore.

 
Il fatto principale è che questo lavoro non finisce mai perché vai a vedere come sono impaginati i testi anche quando leggi il menù in pizzeria, cerchi i refusi, imprechi contro il carattere utilizzato e cerchi soluzioni alternative. è follia, certo: credo che anche una buona dose di questa sia necessaria.

Il web designer si occupa dell’aspetto visivo e del coinvolgimento emotivo di siti Web business to business e business to consumer . Il web designer risolve i problemi di comunicazione dei loro clienti, valorizzando l’identità del marchio in modo specificamente pensato per il web, sfruttandone i punti di forza, conoscendo le possibilità offerte dalla tecnologia. Collabora con il gruppo di lavoro e con i clienti per realizzare siti che siano accattivanti dal punto di vista grafico, abbiano un buon impatto visivo, siano semplice da navigare , compatibili con le esigenze dei visitatori e accessibili utilizzando browser e componenti diversi. A lui spetta il compito di coniugare design e navigazione mediante l’utilizzo delle tecnologie disponibili.
Le sue funzioni si articolano in diversi compiti, svolti in collaborazione con un team di lavoro.

Il web designer
è fondamentalmente un comunicatore, capace di coniugare le esigenze del cliente con quelle degli utenti. Egli infatti:
    comprende la tecnologia da usare, conoscendo le possibilità e i limiti che si possono incontrare nella realizzazione di un sito e ne discute con i clienti e gli altri professionisti impegnati nel progetto
    traduce le esigenze, i contenuti e il marchio del cliente in concetti strutturati adatti a un sito web, rispondendo alle esigenze degli utenti e proponendo prove a colori, adatte allo strumento su cui saranno veicolate e realizzabili dal punto di vista tecnico
    progetta i componenti necessari alla navigazione
    trasforma gli elementi di progettazione realizzati con software grafici (Photoshop e Illustrator per esempio) in componenti utilizzabili e modificabili su un sito Web
    prepara il layout delle pagine del sito utilizzando l’HTML e altri linguaggi di programmazione (JavaScript e fogli di stile) insieme a sviluppatori e tecnici web
    decide lo stile delle pagine web a livello di grafica, layout, tipografia, colori…
    prepara e presenta i contenuti in modo che risultino ben leggibili e ben strutturati seguendo le linee guida stabilite dal content manager
    è responsabile del mantenimento del sito, apporta le modifiche grafiche e di codice necessarie, aggiornando e curando il sito.

Quindi, nello specifico, che cosa fa un Web Designer?
  • deve riuscire a trasformare gli elementi di progettazione realizzati con software grafici (ad esempio Illustrator o Photoshop) in un linguaggio utilizzabile sul web;
  • decide lo stile grafico delle pagine web, scegliendo i layout più adatti, nonché i colori e i fonts;
  • dà vita a una struttura che risponda ai criteri di user experience e della SEO;
  • realizza le pagine utilizzando il linguaggio più appropriato (fogli di stile, linguaggio HTML o JavaScript).

mercoledì 20 febbraio 2013

Come si diventa un WEB DESIGNER ?

Al giorno d'oggi il ruolo del Web Designer è fondamentale per la Realizzazione di un sito web. Questa figura si occupa, appunto, del design del sito web, ma non solo. Il web designer deve rimanere aggiornato e al passo con i tempi, perché web design attualmente non concerne più esclusivamente l'aspetto visivo curato di un sito web, ma anche i perfezionamenti in grado da garantire la massima usabilità possibile. Insomma, il web designer deve saper coniugare aspetti grafici, usabilità e navigazione, utilizzando ogni tecnologia finora conosciuta.
 

Non si produce un web design di qualità senza una conoscenza multisettoriale che vada dalla programmazione alla grafica ad altri ambienti con i quali l'esperienza prima o poi mette un web designer in contatto. Ma, soprattutto, bisogna amare la tipografia: elemento fondamentale del web, il carattere nella sua scelta, dimensione, colore, contribuisce in maniera essenziale a dare forma ai contenuti.
Ci sono parecchie differenze nell'uso della tipografia sul web rispetto alla carta stampata: chi progetta un sito web deve essere consapevole che formato, colore, contrasto e leggibilità saranno, in base al dispositivo con cui l'utente effettuerà l'accesso (che ovviamente non può conoscere, quindi deve prevedere ogni alternativa), gli strumenti che veicoleranno – o squalificheranno – il messaggio contenutistico.

Croce e delizia di ogni webdesigner, la tipografia è quindi un aspetto essenziale su cui un sito si gioca il primo impatto e la leggibilità, usando i font come strumento ma anche come elemento grafico.

Chiunque progetti siti web sa quanto le incompatibilità cross-browser possano rendere un lavoro difficile e i risultati frustranti, per questo due giganti di internet e del design, ossia Google e Adobe, sono venuti incontro agli architetti del web fornendo uno strumento che semplifica la loro attività e migliora l'esperienza dell'utente.

Passando agli strumenti di lavoro più ampiamente utilizzati, sono essenzialmente software come editor per pagine web e fogli di stile e programmi di elaborazione grafica. Per una veloce panoramica sui più diffusi, blocchi note come Notepad++ o Sublime text su OS windows, Espresso o Coda su MAC e Gedit o Geany su GNU/Linux, grazie a sintassi e indentazione per una molteplicità di linguaggi, agevolano notevolmente la scrittura di codice markup come HTML o di stile in fogli CSS. Grafica raster o vettoriale può essere affrontata con i programmi della creative suite Adobe (PhotoShop, Illustrator) o con alternative libere come The Gimp – GNU Image Manipulation Program o Inkscape.

Accanto a questi più noti, una miriade di altri software che svolgono compiti analoghi, ognuno più o meno adatto alle esigenze di un particolare momento per un particolare compito. Attenzione, però, a non sopravvalutare i ferri del mestiere, tecnologia che non bisogna fare l'errore di rincorrere: i software servono a raggiungere un obiettivo e non importa chi usi quale né dove o come uno sia migliore di un altro. Un utente che affronta un'interfaccia non si domanda certo con quale tool sia stata sviluppata.

I linguaggi di base, pane quotidiano del web design, sono l'HTML per le pagine e il CSS per i fogli di stile collegati alle pagine, ma chiunque abbia dimestichezza con i CMS più diffusi un po' di PHP lo avrà sicuramente masticato. E con la ricchezza di animazioni cui i nostri gusti si sono abituati, prima dell'avvento della combo HTML5/CSS3 molti webdesigner avranno trovato entusiasmate il Javascript utilizzando il framework jQuery (non che oggi sia caduto in disuso, anzi).

Con il passare degli anni sempre più utenti si sono trovati a improvvisarsi web designer grazie al recente fiorire dei più svariati compositori WYSIWYG, site builder, editor drag and drop e cms con editor friendly user; spesso anche con buoni risultati: oggi chiunque può costruire il suo sito “in casa” scegliendo un tema e personalizzandolo a suo piacimento, con pochi euro, o addirittura gratuitamente, sui principali CMS come WordPress o Blogspot, senza conoscere una riga di codice. Una piccola rivoluzione digitale che ha portato il contenuto in primo piano lasciando che il “lavoro sporco” lo facciano le automatizzazioni sempre più in voga nel web quasi 3.0.

L'influenza dei social network ha fatto il resto, con un democratico quanto anonimo appiattimento dello stile di ogni comunicazione sullo stesso registro visivo di interfaccia. Un vantaggio che ha dato possibilità anche a chi non poteva permettersi un proprio spazio web di dire la sua e allo stesso tempo ha dotato le aziende e chiunque altro volesse o potesse di un'opportunità in più: dimostrare una propria personalità all'interno di Internet staccandosi dai social per emergere con stile, distinguersi e stimolare un'utenza sempre più esigente. Chiaramente grazie a figure professionali che fanno del miglioramento della reputazione sul web delle aziende il proprio mestiere, web designer in testa.

mercoledì 13 febbraio 2013

Significato di WEB DESIGNER

Web design significa, letteralmente, progettare siti web, curare lo sviluppo di un progetto sul web destinato a comunicare del contenuto all'utente. Definizione, questa, che lascia un po' il tempo che trova se non si vanno ad indagare le competenze coinvolte in un lavoro di progettazione web, se non si affrontano le funzioni di un'interfaccia web, se non si rivolgono tutte le attenzioni, quando si fa web design, alle attese di chi un sito lo usa. Dell'utente, quindi, destinatario del lavoro del web designer.
 

Il web design è il processo di pianificazione e la creazione di un sito web. Testo, immagini, media digitali ed elementi interattivi sono utilizzati dai web designer per produrre la pagina che viene vista sul browser web. I web designer utilizzano linguaggio di markup, in particolare HTML per la struttura e CSS per la presentazione, nonché JavaScript per aggiungere interattività allo sviluppo delle pagine.

Il web designer è colui che si occupa di realizzare e curare l'aspetto visivo e il coinvolgimento degli utenti sui siti web attraverso l'usabilità.

Il web designer quindi cura la comunicazione visiva dei clienti sul web, valorizzando l'identità del marchio in modo specificamente pensato per Internet, sfruttandone i punti di forza, conoscendo le possibilità offerte dalla tecnologia.

Collabora con altri professionisti (programmatori, esperti SEO, social media manager, esperti di marketing digitale) e con i clienti per realizzare siti che siano accattivanti dal punto di vista grafico, ma siano anche facili da navigare, compatibili con le esigenze dei visitatori e dei clienti ed anche accessibili utilizzando browser diversi e dispositivi mobili.

Al web designer spetta il compito di coniugare design e usabilità mediante l'utilizzo delle tecnologie disponibili. I Web Designer sono perciò tenuti ad avere una forte conoscenza di usabilità e sono inoltre tenuti a essere in regola con l'accessibilità del web le sue linee guida.

venerdì 4 gennaio 2013

8 regole fondamentali per creare un sito web efficace



Ci sono alcune regole fondamentali da seguire per realizzare un sito web efficace:

  1. Usa un design pulito e semplice: evita il sovraccarico di elementi visivi e mantieni una struttura chiara e ordinata.
  2. Ottimizzazione per i dispositivi mobili: assicurati che il tuo sito sia facilmente navigabile su dispositivi mobili, in quanto sempre più persone navigano su internet con i propri smartphone.
  3. Carica velocemente: un sito web che si carica lentamente può scoraggiare gli utenti, quindi ottimizza le immagini e i file per aumentare la velocità di caricamento.
  4. Facilità di navigazione: assicurati che gli utenti possano facilmente trovare ciò che stanno cercando, utilizzando una struttura di navigazione intuitiva e una barra di ricerca.
  5. Contenuti di qualità: il contenuto è il cuore del tuo sito web, quindi assicurati che sia di alta qualità, utile e interessante per gli utenti.
  6. Call to action: assicurati di incoraggiare gli utenti a intraprendere un'azione, come ad esempio acquistare un prodotto, iscriversi alla newsletter o contattarti.
  7. SEO: ottimizza il tuo sito per i motori di ricerca in modo che sia facilmente rintracciabile da potenziali clienti.
  8. Analitica: utilizza gli strumenti di analitica per monitorare le prestazioni del tuo sito e apportare eventuali modifiche per migliorarlo.

Ultimo Post inserito

In Italia arriva "PIZZA GPT" il clone di ChatGpt per gl'italiani