Bouwen consistentie en relaties in uw ontwerpen

Een belangrijk onderdeel van compositie is begrijpen hoe u consistentie in uw ontwerpen kunt opbouwen en hoe u de relaties tussen elk van de elementen op de pagina kunt weergeven.


Gebouw Consis - Wat?

Allereerst moet een van uw belangrijkste doelen met elke website zijn om de relatie tussen de gebruiker en de website op te bouwen. De reden is om te creëren vertrouwen met de gebruiker, zodat ze zich prettig voelen bij het navigeren en communiceren met de website. Door ontwerp en functionaliteit kunt u uw gebruikers een betere ervaring bieden.

Gebouwconsistentie in uw ontwerpen helpt ook om uw merk te versterken en de boodschap van een merk helder te houden. Voor een klant is het belangrijk voor hun bedrijf dat de boodschap van hun merk (online, offline of op een ander medium) consistent is, omdat dit weer vertrouwen zal opbouwen bij hun klanten. Als de boodschap van een merk inconsistent, verwarrend of moeilijk te begrijpen is, kan dit voor klanten onaangenaam zijn en zelfs de verkoop en vragen beïnvloeden, met als uiteindelijk gevolg een schadelijk effect op de bedrijven van uw klant..

Zelfs jijzelf, als individu, moet het belang van consistentie in begrijpen jouw merk. Jij, jijzelf, bent een merk. Zelfs als je een persoonlijke blog hebt, zet je jezelf op het web en moet je je merk en imago interesseren. Soms, vooral in de webbranche, is het nog belangrijker om een ​​merkconsistentie voor jezelf op te bouwen, omdat het je helpt onderscheid te maken en je uniek te maken.

Het opbouwen van consistentie en relaties in uw ontwerpen gaat ook over het bouwen van relaties tussen de kleinere, individuele elementen in uw ontwerpen.


De gov.uk-website is uiterst consistent en weerspiegelt de toon en professionaliteit die wordt verwacht van de website van Govenment.

Waarom dit belangrijk is

Alleen omdat u op internet werkt, betekent dit niet dat de waarden die worden gezien in traditionele, offline marketing en design, moeten verdwijnen. In plaats daarvan zou je die overgang naadloos moeten maken.

Als u bijvoorbeeld werkt aan een website voor een traditionele winkel (die een eigen winkel heeft), moet u dat merk meenemen naar het ontwerp dat u voor hun website maakt. U wilt dat hun gebruikers zich prettig en comfortabel voelen bij het bekijken van hun website, wetende dat het voor hen vertrouwd is, zelfs als ze het nog nooit eerder hebben bezocht. Al met al zorgt ontwerp met consequentheid voor een meer solide, betrouwbaar ontwerp- en ontwerpsysteem.

Ontwerpen met consistentie heeft ook als ontwikkelaar een voordeel voor u. Heeft u ooit een ontwerp gekregen dat niet consistent was, met sterk uiteenlopende marge, lettertype en tussenruimte? Het is echt vervelend, toch? Als u in plaats daarvan met consistentie ontwerpt, kunt u patronen in uw ontwerp herkennen die u zullen helpen wanneer u zich in de ontwikkelingsstadia bevindt, waardoor uw ontwikkelsworkflow wordt versneld en de hoeveelheid tijd die u hoeft te spenderen aan het uitzoeken van dingen wordt verkort uit.

Het is ook belangrijk om na te denken over consistentie in het algemeen. In plaats van alleen visueel te denken over hoe de dingen eruit kunnen zien en hoe die dingen consistent te houden, moet u in plaats daarvan ook nadenken over de interacties en gedragspatronen in uw ontwerpen. Bedenk hoe de gebruiker met uw website omgaat, denk aan animaties en hoe verschillende items kunnen reageren op de invoer van de gebruiker. Als u deze patronen drastisch van pagina naar pagina wijzigt, gaat u uw gebruikers alleen maar verwarren.


Bij inc is er een duidelijke visuele stijl die het merk op hun website heel goed weergeeft.

Hoe te ontwerpen met consistentie

Ontwerpen met consistentie in gedachten moet vrij eenvoudig zijn. Zoals we eerder hebben uitgelegd, helpt consistentie om een ​​merk visueel sterk te houden en de relatie tussen een merk en zijn gebruikers, of klanten, op een hoog niveau te houden.

Een eeuwenoude marketingtechniek is ontwerpen door uw berichten te herhalen om uw gebruikers te helpen dingen te onthouden. Hoewel dit kan worden gebruikt in uw ontwerpen, is het consistentie op een andere manier waarvan ik wil dat u er meer over nadenkt.

Denk aan de manier waarop u alle items in uw ontwerp ontwerpt, zoals:

  • kleur (focus, secundaire kleuren)
  • visuals (afbeeldingen, foto's, pictogrammen, knoppen)
  • typografie (grootte, hiërarchie, positionering)
  • grootte (van inhoud, afbeeldingen, relaties)

Denk aan de visuele stijl van deze elementen en hoe ze tegen elkaar spelen. Je hebt geleerd hoe je kleur, grootte en een visuele hiërarchie kunt gebruiken om aandacht te schenken aan bepaalde elementen, nu wil ik dat je probeert na te denken over hoe je al deze elementen op een of andere manier consistent kunt maken. Net zoals we (normaal!) Niet acht verschillende lettertypen in één alinea of ​​gebied van ons ontwerp gebruiken, zouden we hetzelfde moeten zijn met onze andere ontwerpelementen.

Het opbouwen van consistentie in je ontwerpen gaat helemaal over de kleine details die de meeste mensen misschien niet zullen zien, maar zelfs dan zullen ze onbewust een betere ervaring bieden. Het zijn echter de kleine details die door degenen die dat zullen waarderen do let op de extra tijd en aandacht die aan die extra dingen is besteed.

Zorg er ook voor dat u consistent bent van pagina tot pagina (tenzij het specifiek deel uitmaakt van dat ontwerp om een ​​ander ontwerp voor elke pagina te hebben, zoals op een blog met een art-gericht karakter). Maar zelfs dan is het super belangrijk om consistent te zijn in de elementen die zijn waarschijnlijker om hetzelfde te blijven - zoals de manier waarop het logo of de navigatie is gepositioneerd. Het is belangrijk om niet elk aspect van uw ontwerp te verlaten en in plaats daarvan vertrouwdheid op te bouwen in de gebieden die meer geschikt zijn om consistent te zijn.

De website van OnSite heeft een geweldig merk, met een eenvoudig ontwerp dat overal op de startpagina en op andere toppagina's waar blijft.

Relaties opbouwen in uw ontwerpen

Kleur

Zoals in eerdere artikelen van deze sessie werd uitgelegd, heeft kleur een enorme impact op mensen en hun perceptie van design. Hoewel u zich niet kunt concentreren op de persoonlijke relaties van elk individu tot kleur, kunt u kleur in een bredere betekenis gebruiken om een ​​relatie op te bouwen tussen een waarschijnlijk doelpubliek en uw ontwerp.

Kleur heeft een impact op mensen persoonlijk - zowel mentaal, door emoties of gevoelens als ook fysiek - en dit kan overkomen in het merk, hopelijk sterkere relaties opbouwen tussen de gebruikers en de website, als het bericht consistent wordt gehouden.

Toon en karakter

Toon is belangrijk in elk ontwerp en maakt grote indruk op uw gebruikers. Toon kan overkomen via elk aspect van je ontwerp, van de inhoud tot de afbeeldingen en alle andere visuele stijlen die je hebt.

Het toevoegen van persoonlijkheid aan een merk is ook absoluut prima, en je kunt dat doen door wat je hebt geleerd over kleur en typografie. Subtiele beslissingen zoals deze tonen door in de persoonlijkheid die je vervolgens kunt verbeteren door middel van inhoud en beeldspraak, en een consistente visuele stijl opbouwen in je ontwerp.

Percepties van gebruikers

Denk ook na over hoe een gebruiker zou kunnen associëren met uw merk en hoe ze dat zouden doen voelen over het. Denk na over hoe je zou kunnen willen uw gebruikers te voelen bij het associëren met het merk en proberen dit in uw ontwerp weer te geven. Neem deze gevoelens en percepties die u wilt dat uw gebruikers hebben en gebruik consistentie in uw ontwerpelementen om deze gevoelens via de website te projecteren.

WooThemes hebben een geweldige visuele stijl en toon die overal op hun website wordt weergegeven - wat moeilijker kan zijn als je grotere sites zoals deze hebt.

Tools voor consistentie van gebouwen

Er zijn veel tools die u zelf kunt maken of aan uw klanten kunt geven om hen te helpen het belang van consistentie te begrijpen.

Stijlgidsen

Een stijlgids is bijna als een normale ontwerp- en merkrichtlijn waarmee u zou kunnen werken, maar in plaats van gerelateerd te zijn aan alleen het merk, heeft deze in plaats daarvan betrekking op enkele van de belangrijkste stijlen en ontwerpelementen in uw websiteontwerp.

Zie: Style Tiles voor verdere ideeën.

Patroonbibliotheken

Patroonbibliotheken zijn als een stap voor op een stijlgids; ze zijn een document van elke mogelijke stijl van elementen die is opgenomen in uw website-ontwerp. Van tekststijlen, knopstijlen tot lijststijlen en beeldpatronen, deze patroonbibliotheken kunnen erg handig zijn voor toekomstig onderhoud van een websiteontwerp en om ervoor te zorgen dat de consistentie bij toekomstige wijzigingen behouden blijft.

Ik denk graag aan patroonbibliotheken voor drie belangrijke gebieden: ontwerppatronen, opmaakpatronen en inhoudspatronen.

  • Ontwerp patronen: Elk ontwerpelement dat u op uw website hebt. Dit is een document dat alle stijlen bevat voor tekst, koppen, knoppen, pictogrammen, enz.
  • Opmaakpatronen: Dit zijn een HTML & CSS-kopie van de Design Patterns-bibliotheek - met de juiste HTML (en relevante CSS-klasse, indien nodig) voor toekomstig onderhoud van het toevoegen van secties aan de website.
  • Inhoudspatronen: Deze helpen bij het dicteren van de stijl en de toon van de inhoud die op de website zou moeten worden gebruikt. Hoewel het onwaarschijnlijk is dat u exacte inhoud kunt bieden (aangezien u niet weet hoe de website in de toekomst kan worden uitgebreid), kunt u in elk geval de toon helpen zetten voor toekomstige werkzaamheden. Hoewel inhoud misschien ook niet iets is dat u voor een klant hebt opgegeven, kan het een idee zijn om ervoor te zorgen dat zij begrijpen dat inhoud slechts een deel is van het consistenter maken van uw website - en hoewel u de ontwerp- en ontwikkelkant kunt bieden, kan moeilijk zijn om deze ook te laten presteren met inhoud die niet overeenkomt met de rest van de website.

Controle lijsten

Ik ben een grote fan van lijsten en ik denk dat het heel eenvoudig is om te controleren hoe consistent dingen zijn in je ontwerp is om een ​​eenvoudige en eenvoudige checklist te maken.

  1. Ten eerste, hoe verloopt de typografie? Is het consistent? Zijn de koppen consistent van pagina tot pagina? Valt het type in een mooi verticaal ritme over de pagina? Valt het verticale ritme niet op zijn plaats met de introductie van afbeeldingen? Of ziet alles er goed uit?
  2. Beeldkwaliteit / visuele consistentie; hoe zien de beelden eruit? Is alles een vergelijkbare stijl en toon, of zijn er enorm verschillende stijlen foto's? Is alles op dezelfde manier bijgesneden of gevormd, of is alles te verschillend? Zijn de afbeeldingsformaten vergelijkbaar of hebben ze een vaste grootte over het hele ontwerp? Zijn pictogrammen, indien van toepassing, van dezelfde grootte? Hebben knoppen dezelfde padding en witruimte voor ze??
  3. Kleurconsistentie; hoe zien de kleuren eruit? Werken de kleuren goed van pagina tot pagina? Zijn de kleuren geschikt? Werken de kleuren goed met elkaar? Zijn de kleuren precies hetzelfde waar ze meer dan eens worden gebruikt?

opdrachten

Al het bovenstaande moet u helpen wanneer u een ontwerp probeert te maken dat meer samenhang vertoont en u helpt om relaties tussen elk van uw elementen op te bouwen. Ik wil dat je de checklist aan het einde gebruikt (of je eigen maakt!) Om te zien hoe consistent je ontwerp is. Als dat niet zo is, neem dan de tijd om die consistentie in uw ontwerpen op te bouwen.