Hur man designar en webbplats (med bilder)

Innehållsförteckning:

Hur man designar en webbplats (med bilder)
Hur man designar en webbplats (med bilder)

Video: Hur man designar en webbplats (med bilder)

Video: Hur man designar en webbplats (med bilder)
Video: 5 Top Tips to Clean Microfiber Cloths 2024, November
Anonim

Denna wikiHow lär dig hur du designar en smidig, professionell webbplats. Medan du är fri att bestämma om utformningen av din webbplats, finns det några viktiga saker att göra och undvika när du skapar en webbplats.

Steg

Del 1 av 2: Skapa en webbdesign

Designa en webbplats Steg 1
Designa en webbplats Steg 1

Steg 1. Bestäm om du vill använda en webbplatsskapare

Att bygga en webbplats från grunden kräver en detaljerad förståelse för HTML -kod, men du kan skapa en webbplats med en gratis värdtjänst som Weebly, Wix, WordPress eller Google Sites. Webbplatsskapare tenderar att vara mycket lättare för nybörjare än HTML.

  • Om du bestämmer dig för att koda själv bör du lära dig HTML- och CSS -kodning.
  • Om du är ovillig att ägna tid och energi åt att skapa din egen webbplats kan du anlita en webbdesigner. Frilansande designertjänster varierar kraftigt, vissa avgifter per timme och några per projekt, med ett totalt intervall från miljoner till tiotals miljoner rupiah.
Designa en webbplats Steg 2
Designa en webbplats Steg 2

Steg 2. Skapa en webbplatskarta

Innan du öppnar webbplatsens skapare borde du ha bestämt hur många sidor som finns på webbplatsen, vad innehållet är på varje sida och den allmänna layouten för viktiga sidor som "Hem" och "Om".

Det blir lättare för dig att visualisera sidorna på din webbplats genom att skapa grova bilder, inte bara skuggor

Designa en webbplats Steg 3
Designa en webbplats Steg 3

Steg 3. Använd en intuitiv design

Även om nya idéer vanligtvis är intressanta, bör grundläggande mönster följa dessa allmänna riktlinjer:

  • Navigationsalternativ (till exempel flera flikar för olika sidor) bör placeras högst upp på sidan.
  • Om du använder menyikonen (☰) ska den finnas i det övre vänstra hörnet på sidan.
  • Om du använder sökfältet placerar du det nära övre högra sidan av sidan.
  • Användbara länkar (till exempel länkar till sidorna "Om" eller "Kontakta oss") bör finnas längst ner på sidan.
Designa en webbplats Steg 4
Designa en webbplats Steg 4

Steg 4. Var konsekvent

Oavsett vilken text, färgpalett, bildtema och design du väljer, se till att du tillämpar samma beslut på hela din webbplats. Användare kommer att bli förvånade över att se att teckensnitt och färgschema på sidan "Om" skiljer sig mycket från det som används för hemsidan.

  • Om du till exempel använder en mjuk färg för din hemsida, använd inte en ljus färg på nästa sida.
  • Observera att användningen av ljusa eller kolliderande färger, särskilt dynamiskt visade (eller rörliga) färger, kan utlösa anfall eller epileptiska anfall hos en minoritet av användarna. Om du bestämmer dig för att använda en sådan färg, se till att du inkluderar en "risk för anfall" före sidan i fråga.
Designa en webbplats Steg 5
Designa en webbplats Steg 5

Steg 5. Lägg till navigationsalternativ

Att placera direktlänkar till viktiga sidor ovanför hemsidan hjälper nya besökare till det innehåll som är viktigt för dem. De flesta av webbplatsskaparna lägger till denna länk som standard.

Det är viktigt att se till att alla sidor på webbplatsen kan nås genom att klicka på ett alternativ på webbplatsen i stället för att endast nås via sidadressen

Designa en webbplats Steg 6
Designa en webbplats Steg 6

Steg 6. Använd matchande färger

Liksom alla typer av design, bygger webbdesign också på tilltalande färgkombinationer. Därför är det mycket viktigt att välja en matchande temafärg.

Om du är förvirrad, börja med svart, vitt och grått

Designa en webbplats Steg 7
Designa en webbplats Steg 7

Steg 7. Tänk på en minimalistisk design

Det minimalistiska konceptet uppmuntrar till användning av coola toner, enkel grafik, svarta textsidor på vit bakgrund och så lite utsmyckning som möjligt. Eftersom en minimalistisk design kräver väldigt få element är det ett enkelt alternativ att få din webbplats att se professionell och attraktiv ut utan alltför stora ansträngningar.

  • De flesta webbplatsskapare tillhandahåller ett "minimalistiskt" tema som du kan välja mellan när du skapar en webbplats.
  • Det minimalistiska alternativet är "brutalism", som använder hårdare ord, ljusa färger, fet text och minimal grafik. Det finns mycket färre användare av brutalistiska mönster än minimalister, men om innehållet är lämpligt kan denna design vara ett bra val.
Designa en webbplats Steg 8
Designa en webbplats Steg 8

Steg 8. Tillämpa unika alternativ

Rutnät och raka linjer är säkra val, men några unika stilar kommer att ge en personlig touch och skilja din webbplats från resten.

  • Var inte rädd för att böja trenden genom att placera asymmetriska platselement eller använda staplade element för att skapa ett skiktat utseende.
  • Även om eleganta, skarpa kantiga element (känd som kortbaserad presentation) är mindre önskvärda än mjuka, rundade element.

Del 2 av 2: Maximera webbplatsens prestanda

Designa en webbplats Steg 9
Designa en webbplats Steg 9

Steg 1. Dra fördel av biloptimeringsalternativ

Mobila webbläsare ger mer trafik än stationära webbläsare. Det betyder att den uppmärksamhet du ägnar åt mobilversionen ska vara minst densamma som utvecklingen av skrivbordssidan. De flesta autoskaparwebbplatser har redan gjort en bilversion, men ha följande information i åtanke för mobilsajter:

  • Se till att knapparna (till exempel webbplatslänkar) är stora och lätta att trycka på.
  • Undvik funktioner som inte kan ses på mobila enheter (t.ex. Flash, Java, etc.).
  • Överväg att bygga en bilapp för din webbplats.
Designa en webbplats Steg 10
Designa en webbplats Steg 10

Steg 2. Inkludera inte för många foton per sida

Stationära och mobila webbläsare har ibland problem med att ladda sidor med massor av foton eller videor. Även om bilder är mycket viktiga i webbdesign, kan stora mängder media per sida förlänga laddningstiderna, och det avskräcker användare från att besöka dessa sidor.

I allmänhet bör en sidinläsning ta mindre än fyra sekunder

Designa en webbplats Steg 11
Designa en webbplats Steg 11

Steg 3. Lägg till en "Kontakt" -sida

Du kanske märker att de flesta webbplatser tillhandahåller en "Kontakta oss" -sida som innehåller kontaktinformation (t.ex. telefonnummer och e -postadress). Faktum är att vissa webbplatser tillhandahåller ett automatiskt förfrågningsformulär på denna sida. "Kontakt" -sidan är en direkt kommunikationslinje mellan webbplatsbesökare och dig, vilket innebär att det också är en lösning på en besökares fråga eller frustration.

Designa en webbplats Steg 12
Designa en webbplats Steg 12

Steg 4. Skapa en anpassad 404 -sida

När en besökare kommer till en specifik sida som inte har skapats eller inte finns, visas en "404 -fel" -sida. De flesta webbläsare har en inbyggd 404-sida, men du kan anpassa hur den ser ut från inställningarna för webbplatsens innehåll. Om du vill skapa en anpassad 404 -sida anger du följande information:

  • Roliga och roliga felmeddelanden (t.ex. "Grattis, du hamnade på en felsida!")
  • Länk tillbaka till hemsidan
  • Lista med länkar som besökare brukar se
  • Webbplatsens bild eller logotyp
Designa en webbplats Steg 13
Designa en webbplats Steg 13

Steg 5. Ange sökfältet om möjligt

Om metoden för webbplatsskapare du använder stöder att lägga till ett sökfält rekommenderar vi att du lägger till det. Detta säkerställer att användare kan hitta den specifika sidan eller innehållet de letar efter utan att behöva klicka igenom alla navigeringsalternativ.

Sökfältet är också mycket användbart när besökare vill söka efter vanliga termer utan att bläddra i slumpmässiga sidor

Designa en webbplats Steg 14
Designa en webbplats Steg 14

Steg 6. Var mer uppmärksam på hemsidan

När besökare går till hemsidan borde de ha fått kärnan i webbplatsens tema. Dessutom bör alla element på hemsidan laddas snabbt, inklusive navigationsalternativ och bilder. Hemsidan bör också innehålla följande aspekter:

  • Uppmaning till handling (till exempel en knapp att klicka på eller ett formulär att fylla i)
  • Verktygsfält eller navigeringsmeny
  • Inbjudande grafik (som ett solidt foto, video eller flera foton med kompletterande text)
  • Nyckelord relaterade till tjänsten, ämnet eller inriktningen på din webbplats
Designa en webbplats Steg 15
Designa en webbplats Steg 15

Steg 7. Testa din webbplats på olika webbläsare och plattformar

Detta är mycket viktigt eftersom webbläsare behandlar aspekter av en webbplats på olika sätt. Innan du marknadsför din webbplats, försök öppna och använda din webbplats i följande webbläsare på Windows, Mac, iPhone och Android -plattformar:

  • Google Chrome
  • Firefox
  • Safari (endast iPhone och Mac)
  • Microsoft Edge och Internet Explorer (endast Windows)
  • Standardwebbläsaren för vissa Android -telefoner (Samsung Galaxy, Google Nexus, etc.)
Designa en webbplats Steg 16
Designa en webbplats Steg 16

Steg 8. Håll webbplatsen uppdaterad

Designtrender, länkar, foton, koncept och sökord förändras alltid. Så du måste också göra ändringar för att hålla jämna steg med tiden. Du bör kontrollera webbplatsens prestanda och jämföra den med liknande webbplatser minst en gång var tredje månad (helst oftare).

Tips

  • Tillgänglighet är också en lika viktig aspekt i utvecklingen av webbplatser. Tillgängligheten inkluderar beskrivningar för hörselskadade besökare, ljudbeskrivningar för synskadade besökare och ljuskänslighetsaviseringar om din webbplats använder potentiellt krampanfallande effekter.
  • De flesta webbplatsskapare tillhandahåller mallar som du kan använda för att bestämma layout och design innan du lägger till önskade element.

Varning

  • De flesta innehållsplatser är gratis, men om du vill använda din egen domän (t.ex. "www.yourname.com" istället för "www.yourname.wordpress.com") måste du betala en månads- eller årsavgift.
  • Undvik plagiat och lär dig alla upphovsrättslagar. Inkludera inte slumpmässiga bilder från internet eller strukturella element utan tillstånd.

Rekommenderad: