I en tid av överbelastning av innehåll är det klokt att fokusera på att göra din webbplats lätt för ögonen och använda visuell hierarki för att engagera dina besökare. Din design bör ta hänsyn till färg, kontrast, vitmellanrum, justering och sidskanningsmönster (bland andra faktorer). F- och Z-mönstren är några av de mest populära och lätta att implementera i din egen app.
Så, utan vidare, låt oss bygga anpassade F-mönster och Z-mönster från grunden.
F-mönsterdesign med HTML och CSS
Enligt F-mönstret, när en besökare börjar läsa en sida, börjar deras ögonrörelse från det övre vänstra hörnet och skannar sidan tills de kommer till något engagerande. Om din webbplats har mycket innehåll är F-mönstret rätt väg att gå.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Rubik:[email protected];500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://ipotek.net/hur-man-bygger-f-och-z-monster-med-html-och-css/f-style.css" />
<link rel="stylesheet" href="https://ipotek.net/hur-man-bygger-f-och-z-monster-med-html-och-css/general.css" /><title>F and Z-Patterns Using HTML and CSS</title>
</head>
<body>
<header>F-Pattern Using HTML and CSS</header>
<section class="container padding">
<div class="logo">Design Patterns</div>
<div class="text-heading-primary">
Most users follow the F-pattern for content heavy websites.
</div>
<div class="text-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit vitae incidunt
similique!
</div><div class="grid-2-cols">
<div class="text">
<li>
Nobis assumenda, in recusandae quam laborum quibusdam sint iusto
excepturi omnis earum aspernatur magnam maiores cum facilis alias
quo id. Dolorem, expedita!
</li>
<li>
Facilis obcaecati fugiat libero quas quod animi rerum
exercitationem, accusantium autem dicta incidunt, qui voluptatem,
recusandae nobis inventore sunt accusamus neque nam?
</li>
<li>
Officia deserunt assumenda aut temporibus eligendi obcaecati
similique totam iste aliquid molestias rem modi, inventore ex
voluptatem repellendus voluptas animi? Suscipit, reprehenderit?
</li>
</div>
<div class="css-image img-01"></div>
</div><div class="cta">
<button>Start learning today</button>
<button>Sleeping, would start tomorrow!</button>
</div>
</section>
</body>
</html>
Allmän CSS (gemensamt för båda mönstren)
Eftersom vi bygger både F- och Z-mönster är denna CSS gemensam för dem båda.
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}html {
font-size: 62.5%;
}
body {
font-family: 'Rubik', sans-serif;
line-height: 1;
font-weight: 400;
color: #555;
font-size: 1.8rem;
}
header {
font-size: 4.4rem;
text-align: center;
padding: 0.8rem;
background: #e78229;
color: #fff3e8;
}
.container {
max-width: 130rem;
background-color: #fff3e8;
margin: 0 auto;
}
.padding {
padding: 3.6rem;
}
.css-image {
height: 24rem;
width: 24rem;
background-color: #e78229;
justify-self: center;
position: relative;
}
Styling med CSS
Använd nu CSS specifikt för att skapa F-mönstret.
.logo {
font-family: 'Pacifico', cursive;
font-style: bold;
font-size: 4.4rem;
margin-bottom: 5.6rem;
}.text-heading-primary {
font-size: 3.6rem;
margin-bottom: 2.4rem;
color: #e78229;
font-weight: 600;
}
.text-heading {
font-size: 2.2rem;
margin-bottom: 5.6rem;
font-style: italic;
}
.grid-2-cols {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 2.4rem;
}
.text {
display: grid;
gap: 3.6rem;
margin-bottom: 4.8rem;
}
.img-01 {
border-radius: 5% 40% 40% 40%;
}
button {
font-family: 'Rubik', sans-serif;
font-size: 1.8rem;
color: #555;
font-weight: 600;
padding: 2.4rem;
display: inline-block;
margin-right: 5rem;
border: none;
border-radius: 15px 15px 15px 15px;
background-color: #ffc18b;
}
Produktion:
Som du kan se är det första som dina ögon tenderar att gå till rubriken och underrubrikerna. Efteråt kan du skanna punktpunkterna och se Call to Action-knapparna (CTA). Bilden fungerar som ett komplementerande, särskiljande element. Att arrangera en webbplats med F-mönstret säkerställer att besökarna går igenom en specifik visuell beställning som landar på CTA-knappen.
Z-mönsterdesign med HTML och CSS
Z-mönstret efterliknar vanliga ögonrörelser för att skanna föremål. Det fungerar bäst för sidor med minimalt innehåll. Tanken är att bilda en visuell hierarki i sicksack för att leda besökare genom en sida. Besökare börjar skanna längst upp till vänster och sveper över horisontellt. När de naturligt skannar mot det nedre vänstra, bildar de en diagonal linje och skannar över horisontellt, efter ett Z-mönster.
Bygg ett Z-mönster från grunden:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Rubik:[email protected];500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://ipotek.net/hur-man-bygger-f-och-z-monster-med-html-och-css/z-style.css" />
<link rel="stylesheet" href="https://ipotek.net/hur-man-bygger-f-och-z-monster-med-html-och-css/general.css" />
<title>F and Z-Patterns Using HTML and CSS</title>
</head>
<body>
<header>Z-Pattern Using HTML and CSS</header>
<section class="container grid-2-cols">
<!-- section-01 -->
<div class="text">
<div class="text-number">01</div>
<div class="text-heading">Minimal copy? Use the Z-Pattern right away!</div>
<div class="text-description">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
voluptatum ad, impedit ab consequatur porro harum a distinctio
accusantium reiciendis rerum, vel ut blanditiis excepturi nostrum,
earum labore esse culpa?
</div>
</div>
<div class="css-image img-01"></div><!-- section-02 -->
<div class="css-image img-02"></div>
<div class="text">
<div class="text-number">02</div>
<div class="text-heading">Minimal copy? Use the Z-Pattern right away!</div>
<div class="text-description">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
voluptatum ad, impedit ab consequatur porro harum a distinctio
accusantium reiciendis rerum, vel ut blanditiis excepturi nostrum,
earum labore esse culpa?
</div>
</div>
</section>
</body>
</html>
Styling med CSS
Det enklaste sättet att skapa Z-mönster är att använda ett CSS-rutnät med två kolumner.
Notera: Glöm inte att inkludera general.css fil som nämns i F-mönstersektionen (den är gemensam för båda mönstren.)
.container {
max-width: 130rem;
background-color: #fff3e8;
margin: 0 auto;
}
.grid-2-cols {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 5rem;
gap: 5.2rem;
justify-items: center;
align-items: center;
}
.text {
max-width: 45rem;
}
.text-number {
color: #ccc;
font-size: 8.6rem;
font-weight: 600;
margin-bottom: 1.2rem;
}
.text-heading {
font-size: 2.4rem;
font-weight: 600;
margin-bottom: 3.4rem;
}
.css-image {
height: 24rem;
width: 24rem;
background-color: #e78229;
justify-self: center;
position: relative;
}
.img-01 {
border-radius: 5% 40% 40% 40%;
}
.img-02 {
border-radius: 40% 5% 40% 40%;
}
Produktion:
Som du kan se är Z-mönstret en perfekt passform för webbplatser med lätt innehåll. Den visuella hierarkin som byggs av Z-mönstret och korrekt vitmellanrum är tillräckligt starka för att övertyga webbplatsbesökarna till handling.
Förbättra användarupplevelsen med F- och Z-mönster
Att lära sig användarnas beteende och förutsäga nästa steg kräver tung forskning, men det lönar sig i slutändan. Kolla in några populära webbplatser och studera hur de har ställt in det för att leda besökare genom sidan. Du kommer förmodligen hitta F- och Z-mönster mer än en gång.
Även om dessa mönster är bra för att förbättra användarupplevelsen, är de inte den enda metoden. Användarcentrerad design kan vara lösningen du behöver för att minska antalet användares klagomål och förbättra positiva recensioner.
Om författaren
Naincy Mourya (19 artiklar publicerade)
Naincy är specialiserat på att bygga mycket responsiva webbplatser och effektiv innehållsstrategi tillsammans med webbkopior. Hon är en frilansande teknikskribent som håller ett skarpt öga på trendteknologi.
Mer från Naincy Mourya
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
