Heb je ooit een website geopend en er meteen weer op geklikt VANUIT DE LOOPBAAN DIE JE HEBT. Als het ontwerp van een site onaangenaam is, ga je sneller weg dan Cersei wijn opzuigt GOT. In een wereld waar iedereen wedijvert voor oogballen, plaatsen slecht ontworpen sites zichzelf voor mislukking.
Nooit vrees, ik heb jou. Als grafisch ontwerper heb ik sites ontworpen voor klanten die Squarespace gebruiken (mijn voorkeursplatform naar keuze), waardoor ze het ontwerp van hun site voor hun merk en bedrijf kunnen optimaliseren. Ik heb mijn beste tips voor het maken van een mooie en functionele site die elke beginner kan volgen gecondenseerd. Bovendien bieden we onze lezers 10% korting op uw eerste Squarespace-aankoop met couponcode EVERYGIRL18. partituur. Dus pak je notebook (of toetsenbord) en laten we dit doen.
Begin met een moodboard
Het eerste wat ik doe bij het starten van een nieuw grafisch ontwerpproject is een moodboard maken - in feite een blauwdruk van waar ik wil dat het ontwerp gaat. Ter referentie: hier is een voorbeeld van een moodboard dat ik vorig jaar voor een project heb gemaakt. Moodboards zijn een essentieel hulpmiddel bij het bepalen van de esthetiek van je merk - de look die je wilt bereiken, het gevoel dat je wilt oproepen, de specifieke elementen die je oproepen. Heb je ooit foto's uit een tijdschrift verwijderd en deze in stapels bewaard zoals samengestelde plakboeken * Zucht * Oh, wat mis ik de dagen van analoge moodboarding.
Als u geen grafisch ontwerper bent, kunt u nog steeds snel en gemakkelijk moodboards maken met Pinterest. Geheime borden zijn een fantastisch hulpmiddel voor het beheren van afbeeldingen. Begin met het vastzetten van alles wat je aandacht trekt. Ga vervolgens terug naar je nieuwe bord en begin dingen te elimineren die niet helemaal kloppen. Heb niet het gevoel dat je jezelf moet beperken tot afbeeldingen met lettertypen of merkelementen: leg alles vast wat je opvalt! Denk na over hoe de beelden je laten voelen. Wat wil je dat je merk wordt spreken aan uw klanten of publiek Nadat u uw bord hebt samengesteld, blijft u achter met een naslaggids voor de look en feel van uw merk die u opnieuw kunt bekijken en opnieuw tijdens het instellen van uw website.
Kies complimentaryяfonts + colors en bewerk jezelf indien nodig
fonts
Ik weet dat het verleidelijk kan zijn om met VEEL lettertypen te spelen (Squarespace heeft haast om uit te kiezen) wanneer je je site opzet, maar stap weg van het toetsenbord en luister voor aяsec. Te veel lettertypen of lettertypen die allemaal op elkaar lijken, zullen verwarrend voor het oog zijn en het voor cliënten of klanten stressvol of onaangenaam maken om naar uw site te kijken. Benadrukte klanten en klanten zijn niet ideaal wanneer u denkt in termen van bouncepercentage, terugkerende kijkers en oogbollen die u lang genoeg op uw site wilt hebben om iets te kopen (tenminste).
Als ontwerper is dit een van de meest voorkomende fouten die ik tegenkom op websites of zakelijk materiaal voor onderpand (visitekaartjes, briefpapier, etc.), maar het goede nieuws is dat het een eenvoudige oplossing is wanneer u deze tips onthoudt:
- Kies TEN HOOGSTE drie lettertypen. Bewerken, mensen! Gelukkig maakt Squarespace dit gemakkelijk door consistente lettertypen op uw site te maken. Kies lettertypen voor Kop 1, Kop 2, Koers 3 en Alinea (hoofdtekst) en Squarespace vult automatisch die lettertypen in wanneer u koptekst of hoofdtekst op uw site gebruikt. WINNEN.
- Kies een serif (een lettertype met bloeit aan het einde van de letters, zoals Times New Roman) en een San serif (een lettertype zonder bloeit als Open Sans) die complementair zijn. Of, ga met twee sanctieven of twee schreven die verschillend genoeg zijn voor het oog om te onderscheiden. Als u twee verschillende letterstijltypen gebruikt, terwijl uw koppen en subkopjes een aangename nevenschikking op uw site opleveren, is het lezen en professioneel polijsten eenvoudiger. Hieronder heb ik je deze handige handleiding van enkele van mijn favoriete combinaties gemaakt - allemaal beschikbaar op Squarespace - om je op weg te helpen. Graag gedaan. (Zorg er wel voor dat je het vasthoudt voor later!)
- Wees voorzichtig met scriptlettertypen. Overgebruik is ZEER eenvoudig om te doen - een beetje gaat een lange weg.
- Gebruik Comic Sans nooit. Je bent beter dan dat.
Kleur
De volgende zijn kleuren - het leuke gedeelte! Neem een kijkje op je moodboard (zei dat het handig zou zijn) en trek de kleuren die steeds opnieuw voorkomen. Zodra je deze kleuren hebt, overweeg dan de kleurpsychologie - ik ben dol op deze gids van Spruce Rd. Welke kleuren komen overeen met de zoekwoorden die u aan uw merk koppelt Als uw merk alles draait om harmonie en vertrouwen, overweeg dan blauwtinten. Als je meer te maken hebt met energie en positiviteit, probeer dan geel. Verfijn je kleuren totdat je een groep raakt - ik zou zeggen vijf of zes - die je leuk vindt. Zorg ervoor dat u de specifieke kleuren opslaat voor toekomstig gebruik - hier is een geweldig hulpmiddel bij het vinden van de hex-code van een kleur uit een afbeelding, als u geen ontwerpsoftware zoals Photoshop of Illustrator heeft.
U kunt eenvoudig een hex-code in Squarespace kopiëren om die exacte kleur op uw site te gebruiken - zo ziet u het volgende:
Hiërarchie + balans begrijpen
Onthoud dat de beruchte Oscars snafu dat allemaal met hiërarchie vermeden hadden kunnen worden - dat is hoe ~ kritisch ~ het kan zijn voor een ontwerp.
Bron: goed
Hiërarchie creëren binnen uw site geeft prioriteit aan de tekst die uw kijkers het eerst willen zien - denk aan gedurfde calls-to-action, producttitels, enz. Het gebruik van hiërarchie rangschikt uw inhoud en creëert een pad voor de kijker om te reizen - zodat zij het verhaal van uw site zoals u het wilt laten zien. Hier is een voorbeeld van hoe ik een hiërarchie heb gemaakt op een van mijn Squarespace-sites:
Evenwicht is net zo belangrijk als hiërarchie, omdat het uw site verankert en het helpt het kijkplezier van het oog te behouden. Elk element op uw pagina heeft een bepaald gewicht dat moet worden uitgebalanceerd. Donkere kleuren en dikkere lijnen zijn zwaardere, lichtere kleuren en zwakkere lijnen zijn lichter. Hier is een voorbeeld van hoe ik balans heb gecreëerd op een van mijn Squarespace-sites:
Wees strategisch met witruimte
Ik HOU VAN WITTE RUIMTE. Wanneer iemand me vraagt om mijn ontwerpadvies te geven over iets dat ze zelf hebben gemaakt, is mijn onvermijdelijke advies meer witruimte! Het eerste ding om op te merken is dat met witte ruimte, ontwerpers negatieve ruimte betekenen, of de afwezigheid van ontwerpelementen, tekst of afbeeldingen. De ruimte hoeft niet noodzakelijk wit te zijn om in aanmerking te komen.
Zie het als je elementen ruimte geven om te ademen. Net zoals u geen foto zou gebruiken waarvan de helft van de bovenkant van uw hoofd afgesneden is, wilt u geen tekst en afbeeldingen toevoegen aan uw site wanneer ze te dicht bij elkaar staan - het zal er krap en ongemakkelijk uitzien voor de oog. Meer witruimte een schoner, moderner ontwerp. Ik ben dol op de spacer-tool in Squarespace om op eenvoudige wijze witte ruimte rond je elementen te creëren wanneer dat nodig is. Hier is een voorbeeld:
Maak consistente grafische afbeeldingen
Consistentie is de sleutel bij het maken van een site die soepel van element naar element loopt, van pagina naar pagina. Het gebruik van dezelfde lettertypen, kleuren en afbeeldingen op uw website zorgt voor een gestroomlijnd ontwerp en is op de lange termijn gemakkelijker te produceren. Win, win.
Bij het maken van uw site, of nadat uw site is voltooid, moet u wellicht afbeeldingen maken - zoals punaise-afbeeldingen in blogs, downloadbare checklists, Instagram-berichten, enz. - om naadloos te integreren met uw websiteontwerp. Het maken van sjablonen voor deze afbeeldingen versnelt uw dagelijkse workflow en zorgt ervoor dat uw site en sociale kanalen er altijd professioneel uitzien. Als u geen toegang hebt tot Photoshop of Illustrator, raad ik aan Powerpoint of Canva te gebruiken om uw afbeeldingen te maken, die beide u in staat stellen sjablonen op te slaan.
Dit is een goed startsjabloon voor een pinnable afbeelding van een blogbericht:
En hier is een goed startsjabloon voor een Instagram-tekstafbeelding:
Ten slotte, simpel betekent niet simplistisch
Vergeet niet dat een prachtige site niet vol elementen hoeft te zijn - in feite zijn er tegenwoordig maar heel weinig prachtige sites. Minimale sites zijn een lust voor het oog en vaak sneller / gemakkelijker voor beginners om te produceren. Squarespace maakt het gemakkelijk met veel vooraf gemaakte sjablonen die zowel minimaal als functioneel zijn. Bing bang-boom gedaan.
Vergeet niet om de kortingscode te gebruiken EVERYGIRL18 voor 10% korting op uw eerste aankoop van een aankoop!
Heeft u vragen over het ontwerp van uw site? Deel het in de comments hieronder en onze grafisch ontwerper zal haar feedback geven!
Dit bericht was in samenwerking met Seattle, maar alle meningen zijn die van de redactie.