Betoning i a webbdesign skapar ett område eller objekt som är sidans kontaktpunkt. Det är ett sätt att få ett element att sticka ut i designen. Kontaktpunkten kan vara större än andra element i designen eller färgglada - båda tenderar att dra ögat. När du utformar en webbsida kan du lägga betoning på genom att välja ett ord eller en fras och tilldela det a färg, typsnitt eller storlek som gör att den sticker ut, men det finns många andra sätt att använda betoning i din design.
Användning av betoning i design
Ett av de största misstagen webbdesigners kan göra är att försöka få allt i designen att sticka ut. När allt har lika betoning verkar designen upptagen och förvirrande eller värre - tråkig och otilltalande. För att skapa en kontaktpunkt i en webbdesign, glöm inte användningen av:
- Rader: Skapa tonvikt däremot. Om flera element är horisontella blir ett vertikalt element i fokus.
- Färg: Om de flesta elementen i designen är mörka eller tysta, lockar alla objekt med färg ögat.
- Former: När de flesta former är oregelbundna sticker en geometrisk form ut.
- Anslutning: När flera objekt är grupperade och en är separat från gruppen går ögat till det enskilda objektet.
- Placering: Även om det finns undantag, drar ett element placerat i mitten av en design vanligtvis ögat.
- Vikt: Ett tungt element väcker tittarens uppmärksamhet.
- Upprepning: När ett enkelt grafiskt att skriva element upprepas följer ögat det upprepade elementet till fokuspunkten.
- Kontrast: Förutom kontraster skapade av färg och linjer kan kontrast genereras genom storlek, struktur eller teckensnittsändringar. Förändringen gör att fokuselementet, eller betoning, sticker ut.
- White Space: Ett element som omges av vitt (eller tomt) utrymme blir kontaktpunkten.
Hierarki i webbdesign
Hierarki är det visuella arrangemanget av designelement som indikerar betydelse efter storlek. Det största elementet är det viktigaste; de mindre viktiga elementen är mindre. Fokusera på att skapa en visuell hierarki i dina webbdesigner. Om du har arbetat för att skapa ett semantiskt flöde till din HTML markering, det här är enkelt eftersom din webbsida redan har en hierarki. Allt du behöver göra för din design är att betona det rätta elementet - som en H1-rubrik - för mest betoning.
Tillsammans med hierarki i markering, känner igen att besökarens blick visar en webbsida i ett Z-mönster som börjar längst upp till vänster på skärmen. Det gör det övre vänstra hörnet på sidan till ett bra ställe för ett viktigt objekt som en företagslogotyp. Det övre högra hörnet är den näst bästa placeringen för viktig information.
Hur man inkluderar betoning i webbdesign
Betoning i webbdesign kan implementeras på många sätt:
- Använd semantisk markering för att ge betoning även utan några stilar.
- Ändra storleken på teckensnitt eller bilder för att framhäva eller avmarkera dem i designen.
- Använda sig av kontrasterande färger för att ge betoning.
- Storlek räknas. Ett stort ord på sidan eller skärmen får omedelbar uppmärksamhet.
- Omge kontaktpunkten med vitt utrymme.
- Upprepa ett ord eller en bild för att få uppmärksamhet.
Var passar underordning in?
Underordning inträffar när du tonar ner andra element i en design för att få kontaktpunkten att dyka upp. Ett exempel är en färgglad grafik placerad mot ett svartvitt bakgrundsfoto. Samma effekt uppstår när du använder dämpade färger eller färger som smälter in i bakgrunden bakom fokuspunkten och gör att den sticker ut.