Indietro
null

Darcy: design per un social media migliore

DESIGN

Darcy è un nuovo progetto social media con enfasi sulla privacy.

Il problema

Il progetto necessitava del brand design per distinguersi,
un design per la sua web app e un nuovo sito web.

Volevamo qualcosa che dimostrasse affidabilità e fosse identificabile come un servizio di social media.

Il mio ruolo

Mi occupo della progettazione dell'identità visiva di Darcy,
questo include loghi, colori del marchio e l'interfaccia utente per l'interfaccia web.

Ho testato il design con gli altri membri del team.
Ho anche sviluppato un'interfaccia demo utilizzando Vue.js e un sito Web utilizzando WordPress
Design del marchio

Ho avuto alcuni incontri con gli altri membri del team per capire quali fossero i requisiti per il visual design.

Il nome Darcy deriva dal romanzo Orgoglio e pregiudizio, quindi ho provato un logo usando una sagoma di tazza vittoriana

Ho provato a usare l'arancione per mostrare la vivacità di questo nuovo progetto, ma ho finito per optare per un colore blu più classico e affidabile.

Una volta abbandonata l'idea di utilizzare un carattere corsivo classico, ho iniziato a cercare altri caratteri che potremmo usare per il marchio.

Ho optato per caratteri che fossero liberi di utilizzare per evitare costi di licenza non necessari.

fonts-darcy.png

Una volta deciso su Comfortaa, ho prodotto tre versioni del logo

darcy-logos-3.png

L'icona del messaggio trasmette la comunicazione mentre i 3 cerchi che si intersecano significano che le persone si uniscono.

Il logo è stato presentato a tutta la squadra ed è stata scelta la prima versione.

darcy.jpg

Insieme alla seguente tavolozza di colori:

colors-darcy.png

Il logo è stato utilizzato su magliette e adesivi

stickers.jpg

Dopo che il design del logo è stato finalizzato, ho iniziato il design della web app con alcuni schizzi

darcy-login-sketch.jpg

Mi sono ispirato alle piattaforme di social media esistenti, ma ho incluso alcuni elementi di altri progetti.
Mockup

Una volta che il design è stato approvato dal team, ho prodotto i seguenti mockup utilizzando Adobe Illustrator

Dopo che i prototipi sono stati approvati, ho progettato alcuni elementi dell'interfaccia utente utilizzando Adobe Illustrator

Dopo alcune modifiche ho codificato gli elementi utilizzando HTML e CSS3 e li ho caricati online per creare una guida di stile utilizzando Fractal.

Ho anche convertito in icone in un carattere web usando Icomoon.

Sviluppo 'app

Un'app web demo di Darcy è stata codificata utilizzando Vue.js e caricata per essere condivisa al pubblico per il feedback.

Dopo che la demo è stata caricata, ho iniziato a progettare il processo di registrazione per Darcy.