Designa element för en webbplats

Vill du lära dig hur du designar rena webblayouter och webbelement? Då är du på rätt plats!

Med Adobe Illustrator får du en designmiljö för att skapa flexibla webbelement på pixelnivå. Du får allt du behöver för att skapa en ren och snygg webblayout – vektorgrafik, responsiva medieikoner, skalbara komponenter, CSS-generering, SVG-export, trådmodeller och återanvändbara symboler.

Webbdesign

Du måste prova

Adobe XD – Adobes senaste kompletta vektorbaserade UX-/UI-lösning för att designa webbplatser, mobilappar och mycket annat.

Fem principer för effektiva webblayouter

Följande webbdesignelement är viktiga för att skapa en webbupplevelse av hög kvalitet:

  • Enkel navigering med färre klick
  • Optimal och balanserad användning av skärmutrymmet, enhetsoberoende visning
  • Minimal och ren struktur – använd stödraster, rutor, kort
  • Tilltalande och engagerande visuell grafik
  • Tydlig men konstnärlig typografi

Innan du börjar

All grafik du designar i Illustrator baseras vanligtvis på följande designteman:

  • Former och banor
  • Färger och mönster
  • Text och teckensnitt
  • Bilder och specialeffekter

Vill du veta mer? Se Viktiga komponenter på en webbplats.

Skapa ett webbdokument

Skapa ett webbdokument:

  • Välj Arkiv – Öppna. Klicka på fliken Webb i dialogrutan Nytt dokument. I listan med förinställningar väljer du en webbdokumenttyp som passar dina behov.
  • Förhandsgranska och hämta en exempelmall. 
Välja ett webbdokument
Välja ett webbdokument

Designa en responsiv webbsida

Eftersom tekniken ständigt utvecklas är det viktigt att designa en webbplats som fungerar smidigt oavsett OS-plattform, skärmstorlek och enhetsorientering.

Du kan använda följande element för att skapa en responsiv webblayout:

  • Flexibla stödraster och layouter för att designa en webbplatslayout som kan ändra storlek för olika skärmbredder, till exempel dator, surfplatta och mobil.
  • Skalbara media, till exempel bilder, videor och liknande format.
  • Dynamiska mediefrågor för att lägga till specifika format för webbläsare och enheter.

Skapa en trådmodell eller struktur för en webbplats

En ren och strukturerad webbplats lockar fler besökare. När du utformar en webbplatslayout:

  • Börja med att designa en trådmodell för webbplatsen för att visualisera olika skärmelement och ordna dem på ett strukturerat sätt på din webbsida.
    Tips! Du kan lägga till rutor eller kort för att underlätta navigeringen och skapa ett modernt utseende.
  • När grunden till användargränssnittet är klar fortsätter du med att fylla i innehållet och andra konstnärliga element.
Webbplatsens struktur
Webbplatsmallar för olika skärmar

Tips och trick för en organiserad webblayout

  • Webbplatsens känsla och utseende blir bättre om du delar in webbplatsen i relevanta avsnitt. Välj Objekt Segment.
  • Använd linjaler, stödraster och stödlinjer för att kontrollera och testa referensområden och justera skärmelement.
    • Välj Visa – Stödlinjer.
    • Välj Visa – Visa stödraster.
    • Välj Visa – Linjaler.
  • Om du vill skapa en exakt visuell skiss kan du placera rektangelobjekt eller textkomponenter på webbsidan för att dela upp skärmen i relevanta avsnitt.
  • När du arbetar med huvudinnehållet på webbsidan ska du inte glömma att lägga till en kreativ logotyp, inspirerande bild, bildrubrik, uppdragsbeskrivning eller annat som ska finnas på sidan.
  • Sedan sparar du webbplatsstrukturen genom att välja Exportera – Spara för webben (äldre). Du kan också välja vilka segment som du vill visa i den sparade filen.

Se även:

Segment och bildscheman

Designa en webbrubrik

Kör du en reklamkampanj för att marknadsföra produkter eller tjänster på din webbplats? Skapa en iögonfallande webbrubrik på några minuter!

Skapa en webbrubrik:

  • Välj rätt dokumentstorlek, ett A4-dokument fungerar vanligtvis bra för webbrubriker.
  • Skapa en kontur för webbrubriken med hjälp av rektangelverktyget och ange lämpliga mått.
  • Lägg till grafik, text, övertoning och var så kreativ du vill.
Webbrubrik

Relaterade resurser

Adobes logotyp

Logga in på ditt konto