Design webstedslayout og webgrafik i Adobe Illustrator

Er du interesseret i at lære nogle enkle tips til design af rene webstedslayout og -elementer? Du er kommet til det rigtige sted!

Adobe Illustrator giver dig et designmiljø, hvor pixels sidder lige i øjet, for at skabe fleksible og fritflydende webselementer. Det giver dig alt, hvad du har brug for, til at oprette et rent og knivskarpt weblayout – vektorgrafik, medieikoner, skalerbare komponenter, CSS-generering, SVG-eksport, trådrammer og genanvendelige symboler.

Skal prøves

Adobe XD – Adobes nyeste, komplette vektorbaserede UX/UI-løsning til design af websteder, mobilapps med mere.

5 principper til effektive weblayout

Hvis du vil skabe en god weboplevelse, skal du sikre, at du er særligt opmærksom på følgende webdesignelementer:

Nem navigation med færre klik
Optimal og afbalanceret brug af skærmplads, enhedsuafhængig visning
Minimal og ren struktur – brug af gitre, felter, kort
Interessante og engagerende visuelle grafikelementer
Klar og alligevel kunstnerisk typografi

Før du begynder

Alle illustrationer, du designer i Illustrator, omfatter typisk følgende designtemaer:

Former og kurver
Farver og mønstre
Tekst og skrifttyper
Billeder og specialeffekter

Vil du gerne vide mere? Se Grundlæggende komponenter på et websted.

Konfigurer et webdokument

Sådan konfigurerer du et webdokument:

Vælg Filer – Åbn. Gå til dialogboksen Nyt dokument, og klik på fanen Web. Vælg en webdokumenttype, der passer til dine behov, på listen over forudindstillinger.
Vis og download en eksempelskabelon.

Se også:

Design en dynamisk webside

Med teknologien, der hele tiden breder sig, er det vigtigt at designe et websted, der reagerer problemfrit, uanset hvilken OS-platform, skærmstørrelse og enhedsretning der er tale om.

Hvis du vil oprette et dynamisk weblayout, skal du overveje følgende elementer:

Fleksible gitre og layout for at designe et webstedslayout, hvis størrelse kan ændres i forhold til enhver skærmbredde, f.eks. på en stationær computer, tablet eller mobilenhed.
Skalerbare medier, der omfatter billeder, videoer og lignende formater.
Dynamiske medieforespørgsler for at tilføje specifikke typografier til webbrowsere og enheder.

Opret en trådramme eller struktur til et websted

Et rent og struktureret websted tiltrækker flere besøgende. Når du designer et webstedslayout:

Start med at designe webstedets trådramme for at visualisere forskellige skærmelementer og arrangere dem på en organiseret måde på din webside.
Tip: Du kan tilføje felter eller kort for at opnå nem navigation og et moderne look.

Når brugergrænsefladen for det første niveau er oprettet, skal du fortsætte med at udfylde indholdet og andre kunstneriske elementer.

Tips og tricks til et organiseret weblayout

Du kan få et mere jævnt udseende og præg ved at opdele webstedet i relevante sektioner. Vælg Objekt – Opdel.
Brug linealer, gitre og hjælpelinjer til at kontrollere og teste referenceområder og justere skærmelementer.
- Vælg Vis – Hjælpelinjer.
- Vælg Vis – Vis gitter.
- Vælg Vis – Linealer.
Hvis du vil oprette en præcis visuel kontur, skal du placere rektangulære objekter eller tekstobjekter på websiden for at opdele skærmen i relevante sektioner.
Mens du har fokus på hovedindholdet af websiden, må du ikke glemme at tilføje et kreativt logo, et inspirerende webbannerbillede, en tagline, en missionserklæring, alt efter hvad der er relevant.
Hvis du vil gemme webstedets struktur, skal du vælge Eksportér – Gem til web (ældre). Du kan også vælge de udsnit, du vil vise, i den gemte fil.

Se også:

Udsnit og grafikobjekter

Design et webbanner

Har du en igangværende marketingkampagne, som skal fremme og reklamere for produkterne eller tjenesterne på dit websted? Opret et iøjnefaldende banner på få minutter!

Hvis du vil oprette et webbaner, skal du gøre følgende:

Vælg den rigtige dokumentstørrelse. A4-dokumenter virker typisk godt til bannere.
Opret en bannerkontur ved hjælp af Rektangelværktøj, og angiv relevante dimensioner.
Tilføj grafik, tekst, farveforløb, og vær lige så kreativ, som du har lyst til.