Website layout. Grundlæggende om layout

Websitelayout er processen med at skabe en webside ved at kode og strukturere indhold, så det kan vises og interaktivt i en webbrowser. Det involverer styling af tekst, billeder, videoer, links, formularer og andre elementer på en side for at skabe en sammenhængende og overbevisende visuel oplevelse for brugerne.

Designet og layoutet af webstedet omfatter følgende hovedaspekter:

1. HTML (Hypertext Markup Language):

   • HTML bruges til at skabe strukturen på en webside. Den definerer overskrifter, afsnit, lister, billeder, links og andre elementer, der udgør kernen i indholdet på en side.

2. CSS (Cascading Style Sheets):

   • CSS bruges til at style HTML-elementer og kontrollere deres udseende. Ved hjælp af CSS kan du indstille farver, skrifttyper, størrelser og placering af elementer på siden.

3. Website layout. Responsivt design:

   • Responsivt design involverer at bruge CSS og andre teknologier til at skabe websider, der kan vises korrekt på forskellige enheder og skærmopløsninger, såsom computere, tablets og smartphones.

4. JavaScript:

   • JavaScript kan bruges til at tilføje interaktivitet til websider. Dette programmeringssprog giver dig mulighed for at skabe dynamiske elementer, interagere med brugere og ændre sideindhold uden at kræve genindlæsning.

5. Website layout. Cross-browser kompatibilitet:

   • Layoutet omfatter også overvejelser om kompatibilitet på tværs af browsere, så websider vises korrekt i forskellige webbrowsere (f.eks. Google Chrome, Mozilla Firefox, Safari, Microsoft Edge).

6. Ydeevneoptimering:

   • Et vigtigt aspekt af layout er ydeevneoptimering, såsom at reducere størrelsen af ​​billeder, bruge caching og andre teknikker til at sikre, at sider indlæses hurtigt.

Boglayoutgeneratorer: 5 GRATIS værktøjer.

For at sikre dig, at du får en hjemmeside, som dine besøgende ikke vil forlade, har vi sammensat denne guide til grundlæggende design hjemmeside layout. Vi vil redegøre for det grundlæggende i, hvad der skal gøres godt design, nøgleteknikker til at skabe et effektivt webstedslayout og de mest almindelige typer webstedslayouts.

Emballage design kort

Mål. Website layout

Hvor simpelt det end lyder, er det eneste formål med et webstedslayout at understøtte webstedets mål, det være sig konvertering, mærkegenkendelse, underholdning eller andre formål. Men målene hjemmesiden kommer til udtryk gennem indhold, og layoutdesignet beskriver, hvordan man effektivt leverer dette indhold. Med det sagt, her er nogle almindelige funktioner, som et webstedslayout kan udføre:

• Informationsdisplay . Et godt hjemmesidelayout organiserer information på en måde, der følger en indlysende rækkefølge, er nem at scanne, vægter de vigtigste elementer og gør brugerværktøjer intuitive at finde og bruge.
• Brugerengagement:  Et godt hjemmesidelayout gør siden visuelt tiltalende, leder brugerens øje til interessepunkter og opmuntrer dem til at fortsætte med at navigere på siden.
• Branding: Et godt hjemmesidelayout spiller også en rolle i branding, ved at bruge mellemrum, alignment og skalering, så det passer til virksomhedens brand.

Disse mål på højt niveau driver webstedslayoutdesign, men før vi ser på specifikke webstedslayouts, lad os diskutere, hvordan disse mål implementeres mere detaljeret.

Gavekort. Hvordan skaber man?

Processen med at udvikle et hjemmesidelayout. Website layout

Websitelayoutprocessen bør ske tidligt i hjemmesidens oprettelse, hvilket er noget tid efter du har udviklet din hjemmesidestrategi, men før du hopper ind i et grafikprogram for at skabe grænsefladen.

Hvordan laver man en bryllupshjemmeside?

Et websteds layout visualiseres ved hjælp af en wireframe, som er et grundlæggende wireframe-kort, der viser, hvordan indholdet vil passe sammen. Det er vigtigt at skelne wireframe-design fra webdesign, som er det hele processen med at skabe grænsefladegrafik og andre visuelle elementer for en webside. Website layout design er en stor del af webdesign, og det starter med wireframen. Ideelt set bør det visuelle design matche wireframe-layoutet, så grafiske elementer placeres strategisk og ikke baseret på flygtige æstetiske præferencer.

Derefter er her trinene til at oprette et webstedslayout:

• Website layout. Definer alle indholdsområder.

Wireframes repræsenterer typisk indhold som simple firkanter og rektangler, hvad enten det er et billede eller en tekstblok. Det er vigtigt på forhånd at vide, hvor meget indhold du har og den omtrentlige størrelse af hvert stykke (eller ordantal), så du nøjagtigt kan passe elementerne sammen.

• Opret en række wireframes og prototyper. 

Layoutet kan være så enkelt som at tegne med pen og papir, men der er også mange programmer tilgængelige (f.eks.  Pudsigt ), designet til at optimere processen. Da wireframes ikke behøver at være detaljerede kunstværker, kan du lave flere af dem ad gangen. Selvom du forelsker dig i din første idé, bør du udvikle flere wireframes for at udvide din fantasi og give dig selv muligheder. Uden fancy grafik til at distrahere dig, kan du fokusere på brugeroplevelsen og lære, hvilket layout der vil være mest intuitivt for dem. Sørg for at tage højde for alle skærmstørrelser – det anbefales at starte med et layout vedr mobile enheder, og derefter bygge det op.

• Test, indsaml feedback og gentag. 

Når du har et par muligheder, skal du sørge for at indsamle feedback fra dine jævnaldrende. Applikationer som  invision  и  Figma,  giver dig mulighed for at oprette interaktive prototyper, så du nemt kan teste knapper og navigation uden at oprette en egentlig webside. Hvis prøvebrugere optager sig selv på skærmen, mens de navigerer i prototypen, kan dette afsløre UX-anstød. Når du har et par noter, skal du gå tilbage til trin to og gentage, indtil du får det perfekte resultat.

Selvom dette er de bogstavelige trin til at skabe et webstedslayout, kan det være svært at forstå, hvad der gør et layout effektivt eller ej, når du lige er startet. I det næste afsnit vil vi se på specifikke metoder, du kan bruge til at træffe designbeslutninger.

Nøglemetoder til at skabe effektive. Website layout

Website layout design er en praksis, der har eksisteret i årtier, hvilket betyder, at der gennem årene er blevet etableret en række designkonventioner og principper for at vejlede designere i deres håndværk. Nedenfor er nogle af de mest nyttige af disse teknikker:

Visuelt hierarki

Visuelt hierarki er en måde at stilisere seks designelementer på for at øge kontrasten for at få visse stykker indhold til at skille sig ud over andre. For at opnå dette er de vigtigste dele af layoutet dem, som brugeren straks skal identificere, afhængigt af formålet med siden. De omfatter normalt overskrifter, værdiforslag, opfordringer til handling og brugerværktøjer såsom navigation.

Visuelt hierarki kan manifestere sig på mange måder, såsom ved at vælge skrifttype (størrelse, vægt og endda forskellige skrifttypekombinationer), justere vigtige elementer højere på siden eller bruge komplementære farver til at fremhæve elementer.

Læsemønstre. Website layout

Læsemønstre beskriver de mest almindelige måder at scanne sider på af brugere og er afbildet som rettede linjer (vektorer, for matematikere). Da forskning viser, at 79 % af webstedets besøgende kun skimmer siden, er det vigtigt at gøre det så nemt som muligt at scanne. En effektiv måde at gøre dette på er at designe layoutet med et specifikt læsemønster i tankerne.

At inkorporere læsemønstre i dine layout involverer strategisk placering af elementer langs seerens synslinjer. De mest almindelige mønstre at overveje er Z-mønsteret (zigzag-vektor; nyttigt til billedtunge layouts) og F-mønsteret (linjevektor; nyttigt til teksttunge layouts).

Over eller under folden. Website layout

I webdesign er "folden" den linje, hvor en webside er afskåret på grund af skærmstørrelsesbegrænsninger. Indhold, der er synligt, når en side indlæses, kaldes "over siden", mens indhold, der kræver, at brugere skal rulle ned for at åbne det, kaldes "nederst på siden".

Når det kommer til hjemmesidelayoutdesign, bør det vigtigste og/eller mest overbevisende indhold (såsom værdiforslaget og opfordringen til handling) placeres sikkert øverst på siden, så brugerne ikke behøver at søge efter det. Denne plads er 1000 x 600 pixels for de fleste skærmstørrelser. Når det er sagt, kan designere også bruge folden til at skære spændende grafik af og kopiere for at lokke brugerne til at rulle ned, mens de fortsætter deres interaktion med websiden.

Gittersystemer. Website layout

Et gittersystem er et layout baseret på hårde målinger og retningslinjer. Gitteret består af kolonner (udpegede rum til at placere indhold) og tagrender (de tomme mellemrum mellem kolonnerne).

Tomt rum

Hvidt rum, nogle gange kaldet negativt rum, er simpelthen et område af et design uden noget indhold, dvs. tomt rum. Selvom det er nemt at overse og ofte fristende at fylde med indhold, kan hvidt mellemrum være det vigtigste aktiv i hjemmesidens layout.

Denne hjemmeside mockup tiltrækker opmærksomhed med effektivt hvidt mellemrum.

Tænk på, hvordan en tekstlinje på en tom side vil være meget mere effektiv til at fange din opmærksomhed end på en side fyldt med indhold. Rigelig hvid plads skaber vægt, hvilket gør hele kompositionen mindre svær at læse. I modsætning til trykte sider er længden af ​​en webside ikke begrænset, hvilket giver designere meget mere frihed i strategi og brug af hvidt rum.

Almindelige typer hjemmesidelayouts. Website layout

Websitelayouts skabes sjældent fra bunden; faktisk siger man ofte, at det ikke er tilfældet. De fleste moderne hjemmesider er baseret på almindelige layoutskemaer, der bruges konsekvent, med små variationer, på tværs af internettet.

Selvom en vis grad af originalitet er vigtig i ethvert design, er hjemmesider designet til at blive forstået og brugt med det samme. Så når brugere vænner sig til visse typer layouts gennem årene, giver det mening for designere at holde fast i dem. Husk, at layoutet i sidste ende skal være praktisk, og jo mindre tid brugerne bruger på at lære et nyt layout, jo mere tid vil de bruge på rent faktisk at bruge siden. Bortset fra det er her nogle af de mest almindelige hjemmesidelayouts:

Enkelt kolonne layout

Et enkelt-kolonne layout er et layout, der placerer indhold sekventielt i en enkelt kolonne, ofte centreret.

Mange websidelayouts starter her, i betragtning af at mobil-først-design er en længe anbefalet tilgang, og mobilwebsteder er ofte lagt i en enkelt kolonne på grund af størrelsesbegrænsninger. Dette layout er mest anvendeligt til landingssider eller kanalbaseret indhold, som f.eks sociale netværk og blogs, fordi det reducerer antallet af sideelementer og fremmer rulning.

To-søjle layout. Website layout

Et layout med to kolonner, nogle gange i en delt skærmvisning, viser indhold side om side.

Dette er nyttigt til at fremhæve dikotomier mellem to elementer (f.eks. forskellige målgrupper på tøjwebsteder, før/efter service-stil eller dobbelte muligheder prissætning). Det er også nyttigt til at balancere grafik med kopi, hvilket subtilt understøtter Z-mønsterlæsning.

Layout med flere kolonner. Website layout

Et layout med flere spalter omtales ofte som et avis- eller magasinlayout. Det passer tungt webstedsindhold ind på én side.

Et gitter bruges typisk til at opretholde orden og hierarki ved at give bredere kolonneplads til vigtigere elementer såsom hovedindhold, mens mindre vigtige elementer såsom en navigationsmenu, sidebjælke eller bannerannonce får mindre proportional plads. Dette er nyttigt til virksomhedshjemmesider, billed- eller videowebsteder, onlinepublikationer, brugerdefinerede dashboards og shoppingwebsteder – websteder med en masse indhold og kategorier, som brugerne kan henvise til.

Asymmetrisk layout. Website layout

Et asymmetrisk layout er, når elementer er arrangeret i ulige skala og nærhed - enkelt sagt,  nej symmetrisk. Men selvom det er det modsatte af et netsystem, betyder asymmetri ikke kaos.

Balance er vigtig i ethvert design, og et asymmetrisk layout opnår simpelthen dette på uventede måder, såsom at kombinere storskala gengivelse på den ene side med mange mindre elementer på den anden. Dette er nyttigt til at lægge vægt på ved at overdrive nogle elementer (gennem bogstavelig størrelse, farve eller placering) over andre. Det kan også understøtte brugerdefinerede læsemønstre (i modsætning til de almindelige nævnt tidligere).

Mærker, der har råd til at tage en utraditionel tilgang til design, vil finde denne layoutstil ideel - det vil sige hjemmesider, der fokuserer på kunst, har et eventyrlystent publikum eller ønsker at fremhæve et innovativt eller banebrydende produkt.

Hjemmeside layout fuldt ud

Et fantastisk hjemmesidelayoutdesign gør det ikke kun visuelt tiltalende, men gør det også intuitivt. Dette er det første skridt til at gøre et første indtryk på brugerne og lokke dem til at blive og se alt det indhold, dit websted har at tilbyde. Website layout

Selvom disse grundlæggende design af webstedslayout kan give dig et udgangspunkt, bør du stræbe efter at gøre alt for at give dine besøgende en enestående oplevelse. Og den bedste måde at få et moderne hjemmesidelayoutdesign på er at arbejde med en professionel designer.

 АЗБУКА «