När vi pratar om design måste vi överväga text från en designers perspektiv. Texten måste vara läsbar och läsbar medan den passar bra med webbplatsens stil. Men det måste också relatera till en hierarki av innehåll.
Att bygga hierarkier är den stora bilden? av en webbplatsens sammansättning. Men när du flyttar in i typografi måste du också skapa hierarkier relaterade till specifik text på sidan. I det här stycket ska vi förklara att du skapar relationer med dina rubriker och hur du använder vitt utrymme för att göra långa punkter visuellt smältbara.
Rubriker & Spacing
Webinnehållet fokuserar normalt kring bara ett par olika textelement. Rubrikerna sträcker sig från H1-H6, men de flesta webbplatser använder bara H1-H4 högst. Oavsett hur många rubrikstilar som används, är det ditt jobb som designer att skapa dem så att hierarkin är tydligt etablerad.
Rymden mellan text är viktig eftersom det hjälper till att definiera sidinnehållet självt. När användare hittar en ny rubrik förväntar de sig att de känner igen om innehållet övergår till ett helt nytt ämne eller om det befinner sig inom ett befintligt ämne. Den rätta kombinationen av storlek, färg och stil på rubriktext bidrar till att skapa rätt förväntningar för användarna.
Negativt utrymme mellan text visar hur sidinnehållet är relaterat. Rubriker med gott om utrymme ses som mer dominerande medan rubriker närmare stycken ses som relaterade via sammanhang. Bottenmargen efter stycken visar förhållandet mellan textrader och var de hör hemma i hierarkin. Allt handlar om att skapa en hierarki för innehåll för att visuellt skilja mellan text på sidan.
Rubrikförhållanden
Varje rubrik ska återspegla sin egen unika stil, som också kompletterar andra textstilar på sidan. Att skapa strålande rubriker blir lättare med övning, men vita rymdvärden ska i allmänhet uppträda på samma sätt oavsett rubrikstilar.
Square använder en traditionell startsidans layout med massor av bilder och block av text. Rubriker är ett särskilt intressant segment av designen eftersom de sträcker sig från överdimensionerad till oändligt liten. Ändå spelar storleken inte så mycket som förhållandet till annan text på sidan.
Observera i skärmbilden ovan hur stora rubriker använder extra avstånd ovanför och under texten. Dessa avsnitt rubriker visuellt förmedla en känsla av att vara? På egen hand ,? men också naturligt gruppera ihop i större block av underrubriker och stycken.
Varje inre block använder subheader-text som är mycket mindre. Dessa interna rubriker är ungefär lika stora som stycke text, men de sticker ut med fet text och en mörkare färg. Visuellt är det kristallklart att dessa fetstilade textrader fortfarande är rubriker (bara lägre på den visuella totempolen).
Mängden utrymme mellan rubriker och stycken definierar också vilka stycken som hör till vilka rubriker. På samma sätt bör du sätta in mycket utrymme mellan mindre rubriker och större rubriker. Återigen definierar negativt utrymme hierarkin både i visuell design och typografi.
Som förklaras i den fria guiden Web UI Design Best Practices, kom ihåg dessa punkter när du skapar sidhuvud:
- En visuell hierarki bör vara uppenbar genom användning av utrymme, storlek, färg och / eller textstil. Detta ska vara synligt även när du står 3-5 meter från monitorn. Du kan också använda 5-sekunders Gaussian Blur-test för att kontrollera hierarkin.
- Håll varje underrubrik nära sin första barns paragraf.
- Placera pithy headers i närheten av att förmedla idéer snabbare och tydligare.
Långa stycken
När det gäller kontextuellt vitt utrymme ligger det frågan om hur man ska utforma runt det gemensamma stycket. Fast, pålitlig och funnit ganska mycket överallt, stycket är ryggraden i varje webbplatsens innehållsstrategi.
Men hur innehållet skrivs varierar beroende på hur innehållet är stylat. Till exempel kommer en nyhetsmagasin att använda olika styckeformat än en mindre trädgårdsblogg. Mängden innehåll, längd av innehåll och detaljeringsgrad kommer alla till spel när styling stycken.
Försök att designa med tillräckligt stor text så att den är klart läsbar 3 meter från skärmen. Textstorlek ligner mycket på det vita utrymmet, eftersom det oftast är bättre att designa större än mindre. Träna noggrannhet och behärskning.
Om textstorleken är för stor tar den bara mer skärmutrymme och kräver mer rullning. Men om det är för litet kan det vara oläsligt, eller besökare upplever svårigheter med vertikal rytm när de flyttar sina ögon från linje till linje.
Två viktiga saker att tänka på är punktmarginaler och linjehöjd (mellanslag mellan varje rad). Textens storlek i dina stycken dikterar båda dessa värden eftersom det vita utrymmet beror på storlek.
Medium är en online bloggplattform som gör punktdesign rätt. Texten är skarp, läsbar och helt åtskild. Som deras stycke design visar, måste linjens höjdvärden vara tillräckligt stora för att ansluta till nästa rad utan att känna sig alltför stora.
Som rekommenderas i Web Design Trends 2016 ebook, här är några bra tumregler att följa:
- Undvik att göra linjens höjd större än en typisk textrad.
- Em-fontenheten är perfekt för att skapa likformiga storlekar över alla webbläsare.
- Linjens höjd bör ofta vara lite större än teckenstorleken.
- Prova en teckenstorlek på 1em kombinerad med en linjehöjd på 1.5em-1.75em.
Avsnittsavstånd kan vara svårt men det är ett viktigt ämne, särskilt för texthårda webbplatser. Den nedre punktmarginalen ska vara mycket större än en typisk textrad. Undersidiga marginaler bör vara tillräckligt stora för att du visuellt kan bestämma när en paragraf är slut.
När du väl har reda på en webbplatss textstorlek blir det mycket lättare att spela med linjens höjdvärden och räkna ut marginaler för avstånd.Målet är tydlighet och struktur. Varje ny punkt bör vara uppenbar utan tvekan. Nyckeln är proportionellt mellanrum mellan varje textblock.
Som tidigare nämnts är det i allmänhet säkrare att ha? För mycket? vitt utrymme i stället för inte tillräckligt. Undvik bara att använda kolossala mängder utrymme eller så kommer du att sluta med en mycket låg densitet. Håll tillräckligt med innehåll på sidan för att vara intressant, men inte så mycket att det är överväldigande.
För att lära dig mer om att designa för innehåll i webbgränssnitt, kolla in den här biten om hur man utformar det perfekta stycket.
Hämtmat
Negativt utrymme i typografi påverkar direkt den totala kompositionen och de mindre sidelementen samtidigt. Vid utformning av typografi är kontext konge.
Avsnitten som finns på sidan kan behöva större marginaler än punkter som finns i sidofältet. Länkar i rubriken kan se bättre ut med extra vaddering, men länkarna i sidfoten kan se snyggare ut med mycket lite vaddering. Det finns inga solida regler, bara bästa praxis att tänka på.
Kom också ihåg att typografi följer med sin egen hierarki precis som sidstrukturen. Massor av övningar är det optimala sättet att förbättra ögonen för att snabbt erkänna rumsliga värden som passar bäst i ett visst webbprojekt.
När det gäller att designa med rymden, kom ihåg att rymden som en estetisk kvalitet tar en baksats till rymden som ett designverktyg. Mellanslag skapar relationer, definierar hierarkier och betonar innehåll - alltid ha det i åtanke när man överväger hur man reducerar visuellt ljud.
Du kan lära dig mer rörliga designtekniker i den fria webbdesigntrender 2016 ebook av UXPin. 185 sidors guide förklarar 10 bästa praxis i detalj. Du hittar 165 analyserade exempel från dagens bästa företag.
Minimalistisk grafisk design
Minimalistisk grafisk design är en filosofi att skapa något där varje element tjänar ett syfte. Det är enkelt, rent och vackert. Det är mycket användbart. Vår funktion utforskar olika metoder och metoder för minimalistisk grafisk design (med många inspirerande exempel!)