20 Termini del settore Web Design per il cliente senza tracce
Nel settore del web design, ne usiamo molti termini insider. Questo non solo rende difficile iniziare per i nuovi arrivati, in particolare i clienti che non sono coinvolti nel settore del design, ma comunicare correttamente il loro significato a volte può essere una vera sfida.
In questo glossario, abbiamo raccolto 20 termini di progettazione web usati frequentemente e ha aggiunto una breve spiegazione a ciascuno, in modo che chiunque possa visualizzarli rapidamente in caso di incertezza. Se hai un cliente che ha davvero bisogno di un corso accelerato nel gergo del web design, condividi questo articolo con loro.
“Animazione”
Una tecnica di web design che aggiunge movimento agli elementi sullo schermo per visualizza il cambiamento o a attirare l'attenzione degli utenti.
Le animazioni sono più potente delle transizioni, in quanto possono attraversare molti stati diversi tra i loro punti di partenza e di arrivo, quindi possono essere utilizzati per effetti più complicati.
“breadcrumb”
UN tipo di navigazione che informa gli utenti sul loro posizione attuale su un sito.
I breadcrumb contengono il sentiero su cui è possibile raggiungere la pagina corrente dalla home page, solitamente nel formato di Home / Categoria / Pagina. È anche ogni elemento del percorso cliccabile in modo che gli utenti possano rapidamente navigare nella gerarchia del sito. Di solito vengono visualizzati i breadcrumb in cima a ciascuna pagina.
“Ingombrare”
Un errore di progettazione web, un indicatore di a pagina mal progettata.
Parliamo di una pagina ingombra quando il designer spremuto troppe informazioni sulla stessa pagina senza aggiungere abbastanza spazio bianco e strutturare correttamente il contenuto. Le pagine ingombra hanno scarsa leggibilità, e nuoce all'esperienza dell'utente.
“Combinazione di colori”
UN raccolta di colori armonizzati usato per creare un identità di marca riconoscibile.
Di solito lo stesso schema di colori è usato in modo coerente attraverso il sito web del marchio, l'app per dispositivi mobili, il logo e i materiali di marketing. Una combinazione di colori può essere progettata secondo principi diversi, ci sono schemi monocromatici, analoghi, complementari, triadici e altri colori.
“Contrasto”
Una tecnica di progettazione per evidenzia le differenze tra elementi che hanno un ruolo o un significato diverso.
utilizzando colori complementari (Gli opposti sulla ruota dei colori) sono comunque il modo più conosciuto per esprimere il contrasto differenze visive nella forma, lo stile, la tipografia o il layout degli elementi della pagina che vogliamo distinguere possono anche ottenere un effetto contrastante.
“Stato vuoto”
Uno stato specifico di un sito Web o di un'applicazione quando ce n'è non ancora contenuto su una pagina particolare, tuttavia gli elementi di design sono già al loro posto.
Gli stati del primo utilizzo, come i profili vuoti, sono esempi tipici di pagine di stato vuote. Richiedono specifiche tecniche di progettazione (come il disegno di bordo) informare gli utenti su cosa dovrebbe essere sulla pagina, e incoraggiarli per svolgere determinate attività.
“Layout fisso”
UN tipo di layout in cui un sito e i suoi elementi usa la stessa larghezza attraverso tutte le risoluzioni, definito in valori statici (in genere pixel).
Il modo tradizionale di costruire siti web. Raramente scelto per i nuovi siti Web, in quanto i siti con layout fissi sono difficilmente utilizzabili (leggibili) su schermi mobili. Per rimanere accessibili agli utenti mobili, molti siti di layout fissi utilizzano a sito mobile secondario.
“Design piatto”
UN UI linguaggio di design che si concentra su stili puliti e minimalisti, e rimuove trame, motivi, sfumature e altri effetti di fantasia complicati per aiutare gli utenti Meglio concentrarsi sul contenuto.
Il design piatto è stato criticato per problemi di usabilità derivanti dal mancanza di tridimensionalità. Più maturo Linguaggi di design Flat 2.0, come il material design di Google, sono apparsi come una risposta e hanno aggiunto un po 'di profondità al design piatto.
“Layout fluido”
UN tipo di layout quello utilizza unità relative per definire la larghezza di un sito e dei suoi elementi.
Le unità relative più frequentemente utilizzate per i layout fluidi sono percentuali, ma emS e remS può anche essere usato. Un layout fluido ridimensiona (allunga e restringe) man mano che la larghezza della finestra cambia. A differenza dei layout reattivi, un layout fluido non usa le query multimediali. Chiamato anche come layout liquido.
“piega”
Il lato inferiore della parte visibile dello schermo.
Il termine “Sopra la piega” si riferisce alla porzione di una pagina Web che i visitatori possono vedere senza intraprendere alcuna azione, mentre “below the fold” si riferisce al resto della pagina che gli utenti possono raggiungere solo interagendo con il sito - di solito scorrendo o scorrendo (sul cellulare).
Si consiglia di posizionare elementi di branding (ad esempio il logo), navigazione nel sito, e contenuto accattivante above the fold per consentire agli utenti di comprendere rapidamente lo scopo del sito ed essere interessati al resto del contenuto.
“Degrado Grazioso”
Una strategia di web design che include tutte le funzionalità avanzate per impostazione predefinita su un sito, in seguito rimuove o semplifica le cose che non funzionano nei browser più vecchi, su dispositivi meno capaci o con larghezze di banda inferiori.
Si concentra più sull'apparenza che sul contenuto. Nell'era mobile, il progressivo miglioramento è diventato la strategia di progettazione web predominante per i nuovi siti, su cui viene principalmente utilizzato il degrado aggraziato siti precedenti o precedenti.
“Immagine dell'eroe”
Un grande banner immagine posto Sopra la piega.
Le immagini di Hero sono immagini di alta qualità, generalmente a larghezza intera, relative al contenuto del sito. In cima a loro, c'è tipicamente un testo breve (una o due righe) che trasmette un messaggio agli utenti e a pulsante di invito all'azione che li chiama ad intraprendere una certa azione, come fare shopping o registrarsi al sito.
“Pagina di destinazione”
Originariamente qualsiasi pagina in cui un visitatore online entra in un sito. Recentemente il termine è piuttosto usato per una pagina autonoma progettata per a scopo commerciale specifico.
Ad esempio, se gli utenti web seguono un banner pubblicitario si trovano spesso su una pagina di destinazione che li chiama ad acquistare un prodotto rilevante. Pagine di destinazione con a messa a fuoco singola e a chiaro invito all'azione tendono a raggiungere tassi di conversione più elevati.
“Caricamento pigro”
Una tecnica per caricare immagini e altri contenuti statici, come i video, solo poco prima di loro diventa visibile per l'utente.
Se un sito Web utilizza il caricamento lazy, vengono caricate solo le immagini above the fold, il resto viene caricato solo quando (se) l'utente scorre la pagina. Utilizzato frequentemente in reattivo e design mobile come esso salva risorse. Ad esempio, Google AMP accelera i siti per dispositivi mobili entro il pigro carico di risorse statiche per impostazione predefinita.
“Media Query”
Una caratteristica CSS che rende web design reattivo possibile abilitando i designer a creare design differenti per diverse dimensioni del dispositivo (larghezza e / o altezza), orientamento (orizzontale o verticale) e tipi di supporto (stampa, schermo, ecc.).
In genere, siti reattivi avere layout separati per schermi desktop, tablet e mobili, il punti di interruzione tra di loro lo sono definito da query multimediali aggiunto al CSS.
“Miglioramento progressivo”
Una strategia di web design prima di tutto aggiunge solo gli elementi di base a un sito, che funziona su qualsiasi browser, larghezza di banda e dispositivo. Funzionalità front-end più avanzate (stili e interattività) caricato a strati in seguito.
Miglioramento progressivo principalmente si concentra sul contenuto, risultati in siti che sono accessibile per ogni utente, quindi è il modo predominante di costruire siti web nell'era mobile (al contrario del degrado aggraziato).
“Design reattivo”
Un approccio di web design per creare siti web che regolare alle dimensioni di diversi tipi di dispositivi (più frequentemente mobili, tablet e desktop) progettando diversi layout e altri stili (ad esempio tipografia, dimensione dell'immagine) per loro.
La progettazione reattiva si avvale di varie tecniche, come ad esempio unità relative, reti flessibili, e media query al fine di servire ogni utente con contenuti fruibili, leggibili e accessibili. La maggior parte dei siti Web moderni utilizza il responsive design.
“Skeuomorphism”
Un linguaggio di progettazione dell'interfaccia utente che sfrutta il principio di familiarità, e si concentra sulla creazione di elementi di design assomigliano al loro equivalente nel mondo reale.
Ad esempio pulsanti che sembrano pulsanti reali utilizzando effetti come smussare e rilievo, ombre, gradienti e altri. Prima che il design piatto diventasse predominante, lo skeuomorphism era la principale tendenza del web design per molti anni.
“Transizione”
Una tecnica di web design per visualizzando semplici cambiamenti quando un elemento sullo schermo altera dolcemente tra uno stato iniziale e uno finale.
Transizioni - a differenza delle animazioni - non hanno stati intermedi, solo a punto iniziale e finale, quindi devono essere usati per sottili cambiamenti, come per la visualizzazione Stati Hover.
“Spazio bianco”
Il spazio bianco tra elementi di design adiacenti. Chiamato anche come spazio negativo.
Lo spazio bianco aiuta gli utenti sfoglia il contenuto, e visivamente indica la gerarchia dei contenuti. Lo spazio bianco non è necessariamente bianco ma utilizza il colore di sfondo del sito. La mancanza di sufficiente spazio bianco porta a a pagina ingombra.
