Har du någonsin öppnat en webbplats och omedelbart klickat av den igen av kursen du har. När en webbplats design är obehaglig, är du ute där snabbare än Cersei guzzles vin på GOT. I en värld där alla vinkar för ögonbollar, ställer de dåligt utformade platserna sig för misslyckande.
Räd aldrig, jag har fått dig. Som grafisk formgivare har jag rebranded webbplatser för klienter som använder Squarespace (min favoritplattform som valts), vilket hjälper dem att optimera designen av deras webbplats för deras varumärke och verksamhet. Jag har kondenserat mina bästa tips för att skapa en vacker och funktionell webbplats som någon nybörjare kan följa. Dessutom erbjuder vi våra läsare 10% rabatt på ditt första Squarespace-köp med kupongkoden EVERYGIRL18. Göra. Så ta tag i din anteckningsbok (eller tangentbord) och låt oss göra det här.
Börja med en moodboard
Det första jag gör när jag påbörjar ett nytt grafisk designprojekt är att skapa ett moodboard - i princip en ritning om var jag vill att designen ska gå. För referens, här är ett exempel på ett moodboard som jag skapade för ett projekt förra året. Moodboards är ett viktigt verktyg för att definiera ditt varumärkes estetiska - det utseende du vill uppnå, känslan du vill framkalla, de specifika element som ringer till dig. Har du någonsin klippt ut bilder från en tidning och sparar dem i högar som curated scrapbooks * Suck * Åh, hur jag saknar dagarna med analog moodboarding.
Om du inte är en grafisk formgivare kan du fortfarande snabbt och enkelt skapa moodboards med Pinterest. Hemliga brädor är ett fantastiskt verktyg för att kurera bilder - börja med att klämma allt och allt som fångar ditt öga. Gå sedan tillbaka genom din nya styrelse och börja eliminera saker som inte är exakt rätt. Känner inte som att du behöver begränsa dig till bilder som innehåller teckensnitt eller varumärkeselement - stifta allt som fångar ditt öga! Tänk på hur bilderna får dig att känna dig. Vad vill du ha ditt varumärke till tala till dina kunder eller publik Efter att du har kuratiserat ditt styrelse får du en referensguide för utseende och känsla av ditt varumärke som du kan se igen och igen när du konfigurerar din webbplats.
Välj complimentaryяfonts + färger och rediger dig själv när det behövs
typsnitt
Jag vet att det kan vara frestande att spela med massor av teckensnitt (Squarespace har att välja mellan) när du ställer in din webbplats, men gå bort från tangentbordet och lyssna på aяsec. För många teckensnitt eller teckensnitt som är lika med design kommer att vara förvirrande för ögat och göra det stressigt eller obehagligt för kunder eller kunder att titta på din webbplats. Stressade kunder och kunder är inte idealiska när du tänker när det gäller studsfrekvens, återvändande tittare och ögonbollar som du vill stanna på din webbplats tillräckligt länge för att köpa något (åtminstone).
Som designer är detta ett av de vanligaste misstag jag ser på webbplatser eller varumärkesmaterial för säkerheter (visitkort, brevpapper etc.), men den goda nyheten är att det är en enkel lösning när du kommer ihåg dessa tips:
- Välj tre teckensnitt AT MEST. Redigera, folk! Lyckligtvis gör Squarespace det enkla genom att skapa konsekventa teckensnitt på din webbplats. Välj teckensnitt för rubrik 1, rubrik 2, rubrik 3 och stycke (kroppstext) och squarespace fyller automatiskt in de typsnitt där du använder rubriker eller kroppstext på din webbplats. VINNA.
- Försök välja en serif (en typsnitt med blomningar i slutet av bokstäver, som Times New Roman) och a san serif (en typsnitt utan blomningar som Open Sans) som är gratis. Eller gå med två san serifs eller två serifs som är tillräckligt olika för att ögat ska skilja. Använda två olika typsnitt av teckensnitt som dina rubriker och underrubriker kommer att skapa en tillfredsställande juxtaposition på din webbplats, vilket gör det lättare att läsa och ge det en professionell polsk. Nedan har jag gjort dig till den här praktiska guiden av några av mina favoritsammansättningar - allt tillgängligt på Squarespace - för att komma igång. Varsågod. (Se till att stifta den för senare!)
- Var försiktig med skript teckensnitt. Att använda dem är mycket lätt att göra - lite går långt.
- Använd aldrig Comic Sans. Du är bättre än det.
Färg
Nästa upp är färger - den roliga delen! Ta en titt tillbaka på ditt humörbräda (berättade att det skulle vara bra) och dra ut de färger som uppstår om och om igen. När du har dessa färger, överväga färgpsykologi - jag älskar den här guiden från Spruce Rd. Vilka färger matchar de sökord som du associerar med ditt varumärke Om ditt varumärke handlar om harmoni och förtroende, överväga nyanser av blått. Om du handlar mer om energi och positivitet, försök gula. Förfina dina nyanser tills du slår på en grupp - jag skulle säga fem eller sex på det mesta - som du gillar. Se till att du sparar de specifika färgerna för framtida användning - här är ett bra verktyg för att hitta hex-koden i en färg från en bild, om du inte har någon designprogramvara som Photoshop eller Illustrator.
Du kan enkelt kopiera en hex-kod till Squarespace för att använda den exakta färgen på din webbplats - så här:
Förstå hierarkin + balans
Kom ihåg att ökända Oscars snafu Allt detta kunde ha undvikits med hierarki - det är så ~ kritiskt ~ det kan vara ett design.
Källa: Bra
Skapa hierarki inom din webbplats prioriterar den text du vill att dina tittare ska se först - tänk djärva samtal till handling, produkttitlar etc. Använda hierarkin rankar ditt innehåll och skapar en väg för en tittares öga att resa - så att de kan följa berättelsen om din webbplats så som du tänker att den ska ses. Här är ett exempel på hur jag skapade hierarki på en av mina Squarespace-webbplatser:
Balans är lika viktigt som hierarki, eftersom det ankrar din webbplats och hjälpmedel gör det trevligare för ögat - nyckeln till att behålla tittarna. Varje element på din sida har en viss vikt som borde balanseras. Mörka färger och tjockare linjer är tyngre, ljusare färger och färre linjer är ljusare. Här är ett exempel på hur jag skapade balans på en av mina Squarespace-webbplatser:
Var strategisk med vitt utrymme
Jag ÄLSKAR VIT RUM. När någon frågar mig om att ge min designuttaling om något de har skapat sig, är min oundvikliga rådgivning mer vitt utrymme! Första sak att notera är att med vitt utrymme betyder designers negativt utrymme, eller frånvaron av designelement, text eller bilder. Utrymmet behöver inte nödvändigtvis vara vit för att kvalificera sig.
Tänk på det som att ge dina element rum att andas. Precis som du inte skulle använda ett foto med halva toppen av huvudet avskurna, vill du inte lägga till text och bilder på din webbplats när de är för nära varandra - det kommer att bli så trångt och obekvämt till öga. Mer vitt utrymme en renare, modernare design. Jag älskar distansverktyget i Squarespace för att enkelt skapa vitt utrymme runt dina element när du behöver. Här är ett exempel:
Skapa konsekvent grafik
Konsistens är nyckeln till att skapa en webbplats som flyter smidigt från element till element, sida till sida. Genom att använda samma teckensnitt, färger och bilder på din webbplats skapar du en effektiv design - och blir lättare att producera på lång sikt. Vinn, vinn.
När du gör din webbplats eller efter att din webbplats har slutförts, kan du behöva göra grafik - som pinnabla blogginlägg, nedladdningsbara checklistor, Instagram-inlägg, etc. - för att integrera sömlöst med din webbdesign. Skapa mallar för den här grafiken kommer att påskynda ditt dagliga arbetsflöde och se till att din webbplats och sociala kanaler alltid ser professionella ut. Om du inte har tillgång till Photoshop eller Illustrator rekommenderar jag att du använder antingen Powerpoint eller Canva för att skapa din grafik, som båda låter dig spara mallar.
Här är en bra startmall för en skrivbar bloggpostfilm:
Och här är en bra startmall för en Instagram-textfilm:
Slutligen betyder inte enkel förenkling
Kom ihåg att en vacker webbplats inte behöver vara full av element - i själva verket är det väldigt få vackra platser idag. Minimala platser är glädjande för ögat och ofta snabbare / lättare för nybörjare att producera. Squarespace gör det enkelt med massor av färdiga mallar som både är vackert minimala och funktionella. Bing bang boom gjort.
Glöm inte att använda kupongkoden EVERYGIRL18 för 10% rabatt på din första kvotinköp!
Har du frågor om designen av din webbplats Dela i kommentarerna nedan och vår grafiska designer kommer att ge henne feedback!
Det här inlägget var i partnerskap med "Kvartalsutrymme", men alla yttranden inom dessa är redaktionella ledamöter.