Hai mai aperto un sito web e l'hai fatto subito clic di nuovo. Quando il design di un sito è sgradevole, sei fuori di lì più velocemente di quanto Cersei non guizzi il vino AVUTO. In un mondo in cui tutti sono in competizione per i bulbi oculari, i siti mal progettati si stanno preparando all'insuccesso.
Non aver paura, ti ho fatto. Come grafico, ho realizzato siti per clienti che utilizzano Squarespace (la mia piattaforma preferita), aiutandoli a ottimizzare il design del loro sito per il loro marchio e business. Ho condensato i miei migliori consigli per creare un sito bello e funzionale che qualsiasi principiante possa seguire. Inoltre, stiamo offrendo ai nostri lettori il 10% di sconto sul primo acquisto di Squarespace con il codice coupon EVERYGIRL18. Punto. Quindi prendi il tuo notebook (o tastiera) e facciamolo.
Inizia con un moodboard
La prima cosa che faccio quando si inizia un nuovo progetto di grafica è creare un moodboard - fondamentalmente un progetto su dove voglio che il design vada. Per riferimento, ecco un esempio di un moodboard che ho creato per un progetto l'anno scorso. Le Moodboard sono uno strumento essenziale per definire l'estetica del tuo marchio - l'aspetto che desideri ottenere, la sensazione che desideri evocare, gli elementi specifici che ti chiamano. Hai mai ritagliato foto da una rivista e le hai salvate in pile come album di ritagli curati * Sigh * Oh, quanto mi mancano i giorni del moodboarding analogico.
Se non sei un grafico, puoi ancora creare rapidamente e facilmente moodboard tramite Pinterest. Le schede segrete sono uno strumento fantastico per la cura delle immagini: inizia a fissare qualsiasi cosa e tutto ciò che attira la tua attenzione. Quindi, torna indietro attraverso la nuova scheda e inizia a eliminare le cose che non sono esattamente corrette. Non sentirti in dovere di limitarti a immagini che includono caratteri o elementi di marca - appunta qualcosa che attiri l'attenzione! Pensa a come le immagini ti fanno sentire. Cosa vuoi per il tuo marchio parlare ai tuoi clienti o al pubblico Dopo aver curato la tua scheda, ti verrà lasciata una guida di riferimento per l'aspetto grafico del tuo brand che potrai rivedere di nuovo e di nuovo mentre imposti il tuo sito web.
Scegli complimentaryяfonts + colors e modifica te stesso quando necessario
Caratteri
So che può essere allettante giocare con un sacco di tipi di carattere (Squarespace ha una gran quantità tra cui scegliere) quando si imposta il sito, ma allontanarsi dalla tastiera e ascoltare aяsec. Troppi caratteri o tipi di carattere che sono tutti simili nel design confonderanno la vista e renderanno stressante o spiacevole per i clienti o i clienti guardare il tuo sito. I clienti stressati e i clienti non sono l'ideale quando pensi in termini di frequenza di rimbalzo, spettatori di ritorno e bulbi oculari che vuoi rimanere sul tuo sito abbastanza a lungo da comprare qualcosa (almeno).
Come designer, questo è uno degli errori più comuni che vedo su siti Web o materiale di branding collaterale (biglietti da visita, carta intestata, ecc.), Ma la buona notizia è che è una soluzione facile quando ricordi questi suggerimenti:
- Scegli tre caratteri AL MOST. Modifica, gente! Fortunatamente, Squarespace rende tutto ciò semplice creando font coerenti sul tuo sito. Scegli i caratteri per Titolo 1, Titolo 2, Titolo 3 e Paragrafo (testo del corpo) e Squarespace compilerà automaticamente quei tipi di carattere ovunque utilizzi titoli o testo del tuo sito. VINCERE.
- Prova a scegliere a serif (un carattere tipografico con svolazzi alla fine delle lettere, come Times New Roman) e a San Serif (un carattere tipografico senza sfumature come Open Sans) che sono complementari. Oppure vai con due san-serif o due serif che sono abbastanza diversi da distinguere per l'occhio. Usando due diversi tipi di carattere, le intestazioni e i sottotitoli creano una giustapposizione piacevole sul tuo sito, rendendo più facile la lettura e dandogli un aspetto professionale. Di seguito, ti ho preparato questa pratica guida di alcune delle mie combo preferite! Font, tutte disponibili su Squarespace, per iniziare. Prego. (Assicurati di appuntarlo per dopo!)
- Fai attenzione con i caratteri di script. Troppo usarli è MOLTO facile da fare - un po 'di più.
- Non usare mai Comic Sans. Sei meglio di così.
Colore
Il prossimo è i colori: la parte divertente! Dai un'occhiata al tuo moodboard (ti ho detto che sarebbe stato utile) ed estrai i colori che si ripetono più e più volte. Una volta che hai questi colori, considera la psicologia del colore - Adoro questa guida di Spruce Rd. Quali colori corrispondono alle parole chiave che associ al tuo marchio Se il tuo marchio è interamente basato sull'armonia e sulla fiducia, prendi in considerazione le tonalità del blu. Se hai più energia e positività, prova i gialli. Affina le tue sfumature fino a quando non colpisci un gruppo - direi cinque o sei al massimo - che ti piace. Assicurati di salvare i colori specifici per uso futuro: ecco un ottimo strumento per trovare il codice esadecimale di un colore da un'immagine, se non hai software di progettazione come Photoshop o Illustrator.
Puoi facilmente copiare un codice esadecimale in Squarespace per usare quel colore esatto sul tuo sito - ecco come:
Comprendi la gerarchia + l'equilibrio
Ricorda quell'infame Oscars snafu Tutto ciò avrebbe potuto essere evitato con la gerarchia - è così ~ fondamentale ~ può essere per un design.
Fonte: buona
La creazione della gerarchia all'interno del tuo sito dà la priorità al testo che desideri venga visualizzato dagli spettatori - pensa agli inviti all'azione, ai titoli dei prodotti, ecc. L'uso della gerarchia classifica il tuo contenuto e crea un percorso che l'osservatore deve percorrere per poter seguire la storia di il tuo sito nel modo in cui vuoi che venga visto. Ecco un esempio di come ho creato la gerarchia su uno dei miei siti Squarespace:
L'equilibrio è altrettanto importante quanto la gerarchia, in quanto ancorava il tuo sito e aiuta a renderlo più piacevole all'occhio - la chiave per mantenere gli spettatori. Ogni elemento della tua pagina ha un certo peso che dovrebbe essere bilanciato. I colori scuri e le linee più spesse sono più pesanti, i colori più chiari e le linee più deboli sono più leggeri. Ecco un esempio di come ho creato l'equilibrio su uno dei miei siti Squarespace:
Sii strategico con lo spazio bianco
AMO SPAZIO BIANCO. Ogni volta che qualcuno mi chiede di dare il mio parere di design su qualcosa che hanno creato loro stessi, il mio consiglio inevitabile è più spazio bianco! La prima cosa da notare è che nello spazio bianco i designer significano uno spazio negativo o l'assenza di elementi di design, testo o immagini. Lo spazio non deve necessariamente essere bianco per qualificarsi.
Pensa a come dare spazio ai tuoi elementi per respirare. Proprio come non useresti una foto con metà della parte superiore della testa tagliata, non vorresti aggiungere testo e immagini al tuo sito quando sono troppo vicini - sarà così angusto e scomodo per il occhio. Più spazio bianco un design più pulito e moderno. Adoro lo strumento spaziatore in Squarespace per creare facilmente uno spazio bianco attorno ai tuoi elementi quando è necessario. Ecco un esempio:
Crea una grafica coerente
La coerenza è fondamentale per la creazione di un sito che scorre uniformemente da un elemento all'altro, da una pagina all'altra. L'utilizzo degli stessi caratteri, colori e immagini sul tuo sito web creerà un design aerodinamico e sarà più facile da produrre a lungo termine. Vinci, vinci.
Quando realizzi il tuo sito, o dopo che il tuo sito è stato completato, potresti dover fare grafica - come immagini di post su blog, elenchi di controllo scaricabili, post di Instagram, ecc. - per integrarsi perfettamente con il design del tuo sito web. La creazione di modelli per questi elementi grafici accelera il flusso di lavoro quotidiano e garantisce che il tuo sito e i canali social siano sempre professionali. Se non hai accesso a Photoshop o Illustrator, ti consiglio di utilizzare Powerpoint o Canva per creare la tua grafica, entrambe le quali ti consentono di salvare i modelli.
Ecco un buon modello di partenza per un post grafico del blog inattiva:
Ed ecco un buon modello di partenza per un testo di Instagram:
Infine, semplice non significa semplicistico
Ricorda che un bel sito non deve essere pieno di elementi - in effetti, in questi giorni ci sono pochissimi siti bellissimi. I siti minimi sono piacevoli alla vista e spesso più rapidi / facili da apprendere per i principianti. Squarespace lo rende facile con un sacco di modelli pre-realizzati che sono entrambi estremamente belli e funzionali. Bing bang boom fatto.
Non dimenticare di utilizzare il codice coupon EVERYGIRL18 per il 10% di sconto sul tuo primoSquarespace acquisto!
Hai domande sul design del tuo sito Condividi nei commenti qui sotto e il nostro grafico ti fornirà il suo feedback!
Questo post era in partnership conяSquarespace, ma tutte le opinioni all'interno sono quelle del comitato editoriale.