8 modi per utilizzare icone ed elementi disegnati a mano

Sebbene spesso ci si concentri su elementi di design pixel-perfect, non sono adatti a tutto. A volte vuoi qualcosa con un po 'di più? un tocco di stravaganza. Qualcosa di un po 'più autentico!

Le icone o gli elementi disegnati a mano possono essere la tecnica di progettazione giusta per aggiungere qualcosa di speciale a un progetto. Mentre la maggior parte dei designer non impazzisce con elementi che sembrano disegnati a mano, alcuni tocchi possono aggiungere un tocco personale a cui gli utenti sono attratti.

È qualcosa che è di tendenza anche nel web design. Da uno scarabocchio in un'icona, a un'esperienza completa che è uguale usabilità e arte, gli elementi disegnati a mano sono un'opzione di design popolare. Ecco otto nuovi modi per utilizzare questa tendenza!

Crea separazione

Gli elementi di design disegnati a mano possono essere mescolati e abbinati a quasi ogni altro tipo di display. Possono lavorare a fianco di foto o video, in un mare di spazi bianchi o in prossimità di elementi di testo. Non eliminare il concetto di utilizzo di questo tipo di elemento perché hai paura di come potrebbe adattarsi al modello di progettazione generale.

Provalo; non si sa mai.

Digital Visitor utilizza questi elementi in tutto il design per creare una separazione tra elementi e bit sul contenuto. Mentre gli elementi sulla home page sono semplicemente punti, ci sono esempi in più posti sotto la pergamena e anche la favicon ha quel tocco disegnato a mano.

Il posizionamento di ogni elemento è progettato per garantire che l'utente stia guardando il giusto bit di contenuto. Nell'esempio sopra, l'elemento si trova al centro dello schermo, utilizzato per creare una separazione tra due aree di contenuto. Più in basso nel design elementi simili sono usati come icone in piccole caselle di testo per mostrare cosa fa l'azienda.

Doodles interattivi

Elementi disegnati a mano possono rendere divertenti pezzi interattivi nel design. Dal caricamento di animazioni - molti degli esempi di siti Web in questo post utilizzano questo stile - per un'esperienza completamente interattiva, questa tecnica di progettazione è abbastanza interessante da stimolare l'interesse degli utenti.

Real Estate Stained Glass è un bell'esempio di un gioco interattivo che combina sia la tendenza del design del sito web sia l'elemento creativo, consentendo agli utenti di colorare i disegni sullo schermo. Ciò che lega questo insieme è mentre l'aspetto è disegnato a mano, gli elementi sono precisi e funzionano perfettamente. La colorazione funziona come dovrebbe - e non scarabocchiare al di fuori delle linee - per un'esperienza che manterrà gli utenti agganciati.

Tipografia quasi disegnata

A volte i migliori elementi disegnati a mano non vengono effettivamente cancellati. Gli stili di tipografia che imitano la calligrafia sono particolarmente apprezzati, specialmente per scopi di visualizzazione.

Questo tipo di stile ha una sensazione più leggera e più piacevole a cui gli utenti possono relazionarsi. (Il trucco è assicurarsi che le lettere siano altamente leggibili).

Tradewinds Hotel fa un ottimo lavoro con un tipo di carattere semplice, in stile corsivo, abbastanza grande e leggibile da poter essere letto a colpo d'occhio. La tipografia di supporto è tutto in un semplice stile sans serif, che aiuta a dare maggiore enfasi al carattere tipografico del display e inoltre rende tutto facile da digerire per l'utente.

Divots di design

Alcuni elementi disegnati a mano hanno uno scopo puramente visivo. Esistono per creare un flusso o una sensazione per il design che potrebbe essere difficile da stabilire in altri modi. Questi divots possono essere particolarmente divertenti se usati in piccoli punti durante il design.

Mother's Brewing fa proprio questo. C'è il grande cuore sulla homepage - è ovvio. Ma poi ci sono anche piccoli elementi su quasi tutte le altre pagine - alcuni ovvi, altri abbastanza nascosti. Ogni pulsante ha un tocco disegnato a mano con il design del nastro, gli elementi appaiono sullo sfondo e si sovrappongono sugli elementi scorrevoli per riempire lo spazio morto nel disegno. L'effetto complessivo è intelligente e visivamente interessante.

Impostare l'umore

Gli elementi di design disegnati a mano assumono spesso un tono più leggero e giocoso. Possono dare questo tipo di vibrazione a quasi tutti i progetti e più elementi disegnati a mano che usi, più il progetto apparirà leggero.

Signs for Science è un ottimo esempio di come imballare un design con elementi disegnati a mano per un'estetica divertente, quasi infantile (anche il colore contribuisce). Dalla tipografia alle icone per sottolineare le sottolineature, l'intero concetto ha uno stato d'animo molto specifico. È creativo, leggero e incoraggia l'interazione dell'utente.

Mostrare creatività

Un concetto di design disegnato a mano può essere una grande opportunità per il design di un sito web di portfolio perché può enfatizzare la creatività. Questi elementi mettono maggiormente l'accento sul processo di progettazione e su come il pensiero e il lavoro possono essere inseriti in un progetto.

(Inoltre, è un modo divertente per allungare quei muscoli creativi.)

The Feebles utilizza elementi disegnati a mano sia per l'immagine principale come sopra e si combina con il logo disegnato a mano in alto a sinistra. (Potresti non vederlo se non guardi da vicino).

Per icone o loghi

Poiché questo è uno degli usi più popolari degli elementi disegnati a mano, non era in cima alla lista. (Principalmente per aiutarti a pensare ad altre idee prima di saltare a qualcosa di più comune).

I tocchi disegnati a mano possono essere una grande aggiunta a un'icona o logo. Dagli scarabocchi alle forme decentrate o ai cerchi che non sono abbastanza rotondi, l'imperfezione aggiunge carattere e fascino laddove gli stili di forma perfetta del computer non possono.

Higher Ground usa lo scarabocchio per separare le lettere nel logo in stile icona. Lo stile minimal è sorprendente ed efficace, e l'elemento disegnato a mano conferisce una personalità che una linea retta non trasmetterebbe.

Come effetti animati

Dai vita a un elemento disegnato a mano con l'animazione.

Le immagini che vengono disegnate sullo schermo possono essere divertenti da guardare e guardare. Mentre l'ovvio beneficio per l'utente è l'intrattenimento visto che guardano qualcosa prendere vita, ci sono anche dei vantaggi per il proprietario del sito: tempo aumentato sul sito e potenziale per più conversioni.

Long Story Short utilizza questo concetto sulla home page.Innanzitutto, disegnando il logo, che utilizza uno stile tipografico disegnato a mano. E poi animandolo in un pacchetto di progetti di design, che si muovono rapidamente e includono più disegni a mano nel processo. L'intero ciclo dura solo un paio di secondi.

Conclusione

Anche se non puoi disegnare, la simulazione di elementi disegnati a mano in progetti di design può aggiungere un tocco personale che gli utenti apprezzano. Dalla tipografia ai giochi alle animazioni di caricamento, questi elementi possono mostrare creatività e personalità.

Mentre un elemento disegnato a mano non è per ogni progetto, pensaci la prossima volta che hai bisogno di alleggerire l'atmosfera o aggiungere qualcosa agli utenti. Mantieni l'idea semplice e collegala a un tema che trasporta tutto il design. E divertiti! Questo è ciò di cui sono fatti questi elementi.