Har du noen gang åpnet et nettsted og umiddelbart klikket av det igjen av kurs du har. Når et nettsted er ubehagelig, er du ute der raskere enn Cersei guzzlesvin på GOT. I en verden hvor alle er vogende for øyeboll, setter de dårlig utformede nettstedene seg for feil.
Frykt aldri, jeg har fått deg. Som grafisk designer, har jeg rebranded nettsteder for klienter som bruker Squarespace (min foretrukne plattform av valg), og hjelper dem med å optimalisere utformingen av deres nettsted for deres merkevare og virksomhet. Jeg har kondensert mine topptips for å skape et vakkert og funksjonelt nettsted som enhver nybegynner kan følge. I tillegg tilbyr vi våre lesere 10% av ditt første Squarespace-kjøp med kupongkode EVERYGIRL18. Score. Så ta tak i din notatbok (eller tastatur) og la oss gjøre dette.
Start med et humørbord
Det første jeg gjør når jeg starter et nytt grafisk designprosjekt, er å lage et moodboard - i utgangspunktet et blåkopi av hvor jeg vil at designet skal gå. Til referanse, her er et eksempel på et moodboard jeg opprettet for et prosjekt i fjor. Moodboards er et viktig verktøy for å definere merkevarens estetiske - utseendet du vil oppnå, følelsen du vil fremkalle, de spesifikke elementene som ringer til deg. Har du noen gang kuttet ut bilder fra et magasin og lagret dem i hauger som kuraterte utklippsbøker * Sukk * Å, jeg savner dagene med analog moodboarding.
Hvis du ikke er en grafisk designer, kan du fremdeles raskt og enkelt lage moodboards ved hjelp av Pinterest. Hemmelige brett er et fantastisk verktøy for å kurere bilder - begynn med å klemme alt og alt som fanger øyet ditt. Deretter går du tilbake gjennom det nye brettet ditt og begynner å eliminere ting som ikke er helt riktige. Ikke føler at du trenger å begrense deg selv til bilder som inneholder fonter eller merkeelementer - pin alt som fanger øyet ditt! Tenk på hvordan bildene får deg til å føle deg. Hva vil du merke til snakke til dine kunder eller publikum Etter at du har kurert styret ditt, blir du etterlatt med en referansehåndbok for utseende og følelse av merkevaren du kan besøke og igjen når du konfigurerer nettstedet ditt.
Velg complimentaryяfonts + farger og rediger deg selv når det er nødvendig
fonter
Jeg vet at det kan være fristende å spille med mange fonter (Squarespace har å velge mellom) når du setter opp nettstedet ditt, men gå bort fra tastaturet og hør etter aяsec. For mange fonter eller skrifter som alle er like i design, vil være forvirrende for øyet og gjøre det stressende eller ubehagelig for kunder eller kunder å se på nettstedet ditt. Stressede kunder og kunder er ikke ideelle når du tenker når det gjelder sprettfrekvens, tilbakevendte seere og eyeballs du ønsker å bli på nettstedet ditt lenge nok til å kjøpe noe (minst).
Som designer er dette en av de vanligste feilene jeg ser på nettsteder eller sikkerhetsmerker (visittkort, brevpapir osv.), Men den gode nyheten er at det er en enkel løsning når du husker disse tipsene:
- Velg tre skrifttyper AT MEST. Rediger folk! Heldigvis gjør Squarespace det enkle ved å lage konsekvente skrifttyper på hele nettstedet ditt. Velg fonter for Overskrift 1, Overskrift 2, Overskrift 3, og Avsnitt (kropps tekst) og Squarespace vil automatisk fylle ut disse skriftene, uansett hvor du bruker overskrifter eller tekst på nettstedet ditt. VINNE.
- Prøv å velge en serif (et skrifttegn med blomstrer i slutten av brevene, som Times New Roman) og a san serif (et skrifttype uten blomstrer som Open Sans) som er gratis. Eller gå med to san serifs eller to serifs som er forskjellige nok til at øyet skiller. Bruke to forskjellige stilarter som overskrifter og underoverskrifter vil skape en behagelig sidestilling på nettstedet ditt, noe som gjør det lettere å lese og gi det en profesjonell polsk. Nedenfor har jeg laget deg denne praktiske veiledningen til noen av mine favorittsammensetninger - alt tilgjengelig på Squarespace - for å komme i gang. Værsågod. (Pass på å tappe den for senere!)
- Vær forsiktig med skriptfonter. Overbruk av dem er veldig enkelt å gjøre - litt går langt.
- Bruk aldri Comic Sans. Du er bedre enn det.
Farge
Neste opp er farger - den morsomme delen! Ta en titt tilbake på moodboardet ditt (fortalte deg at det skulle komme til nytte) og trekke ut fargene som oppstår igjen og igjen. Når du har disse fargene, bør du vurdere fargesykologi - jeg elsker denne veiledningen fra Spruce Rd. Hvilke farger samsvarer med søkeordene du knytter sammen med merkevaren din Hvis merkevaren handler om harmoni og tillit, bør du vurdere nyanser av blått. Hvis du er mer om energi og positivitet, kan du prøve gulger. Avgrens nyansene dine til du treffer på en gruppe - jeg vil si fem eller seks på det meste - som du liker. Pass på at du lagrer de spesifikke fargene for fremtidig bruk - her er et flott verktøy for å finne heksekoden av en farge fra et bilde hvis du ikke har noen programvare som Photoshop eller Illustrator.
Du kan enkelt kopiere en heksekode til Squarespace for å bruke den nøyaktige fargen på nettstedet ditt - her er hvordan:
Forstå hierarki + balanse
Husk at den beryktede Oscars snafu Alt dette kunne ha blitt unngått med hierarki - det er slik ~ kritisk ~ det kan være et design.
Kilde: Bra
Å lage hierarki på nettstedet ditt prioriterer teksten du vil at seerne skal se først - tenk dristige anrop til handling, produkttitler etc. Bruk av hierarki rangerer innholdet ditt og skaper en vei for seerens øye å reise - slik at de kan følge historien om nettstedet ditt slik du har tenkt det skal ses. Her er et eksempel på hvordan jeg opprettet hierarki på et av mine Squarespace-nettsteder:
Balanse er like viktig som hierarki, da det forankrer nettstedet ditt og hjelper til med å gjøre det mer behagelig for øyet - nøkkelen til å beholde seerne. Hvert element på siden din har en viss vekt som skal balanseres. Mørke farger og tykkere linjer er tyngre, lettere farger og svakere linjer er lettere. Her er et eksempel på hvordan jeg opprettet balanse på en av mine Squarespace-nettsteder:
Vær strategisk med hvit plass
Jeg elsker hvitt rom. Når noen spør meg om å gi min designuttalelse om noe de har skapt seg, er min uunngåelige råd mer hvit plass! Første ting å merke seg er at med hvitt mellomrom betyr designere negativ plass, eller fravær av designelementer, tekst eller bilder. Plassen trenger ikke nødvendigvis å være hvit for å kvalifisere.
Tenk på det som å gi elementene plass til å puste. På samme måte som du ikke ville bruke et bilde med halvparten av toppen av hodet kuttet av, vil du ikke legge til tekst og bilder på nettstedet ditt når de er for tett sammen - det kommer til å bli så trangt og ubehagelig til øye. Mer hvit plass en renere, mer moderne design. Jeg elsker spacerverktøyet i Squarespace for å enkelt lage hvitt rom rundt elementene dine når du trenger det. Her er et eksempel:
Lag konsistent grafikk
Konsistens er nøkkelen til å skape et nettsted som flyter jevnt fra element til element, side til side. Ved å bruke de samme skrifttyper, farger og bilder på hele nettstedet ditt, vil du skape en strømlinjeformet design - og være lettere å produsere i det lange løp. Vinn, vinn.
Når du lager nettstedet ditt, eller etter at nettstedet ditt er ferdig, må du kanskje lage grafikk - for eksempel pinnable blogpostbilder, nedlastbare sjekklister, Instagram-innlegg, etc. - for å integrere sømløst med ditt nettsteddesign. Å lage maler for denne grafikken vil øke hastigheten på din daglige arbeidsflyt, og sørg for at nettstedet ditt og sosiale kanaler alltid ser profesjonelle ut. Hvis du ikke har tilgang til Photoshop eller Illustrator, anbefaler jeg at du bruker enten Powerpoint eller Canva til å lage grafikken, som begge lar deg lagre maler.
Her er en god startmaler for en pinnable bloggpost grafikk:
Og her er en god startmal for en Instagram-tekstfilm:
Endelig betyr det ikke enklere for enkel
Husk at et vakkert nettsted ikke trenger å være fullt av elementer - faktisk er det svært få flotte steder i disse dager. Minimale sider er behagelig for øyet og ofte raskere / enklere for nybegynnere å produsere. Squarespace gjør det enkelt med mange forhåndsdefinerte maler som begge er vakkert minimal og funksjonelle. Bing bang boom ferdig.
Ikke glem å bruke kupongkoden EVERYGIRL18 for 10% rabatt på din første kvotekjøp!
Har du spørsmål om utformingen av nettstedet ditt Del i kommentarene nedenfor, og vår grafiske designer vil gi henne tilbakemelding!
Dette innlegget var i partnerskap med "Kvartalsrom", men alle inntrykkene er de av redaksjonen.