Denna wikiHow lär dig hur man utformar en webbplats som verkar professionell och fungerar bra. Även om huvuddelen av din webbplats design i slutändan är upp till dig, finns det några viktiga saker att göra-och undvika-när du skapar en webbplats.
Steg
Del 1 av 2: Hur man utformar din webbplats
Steg 1. Bestäm om du vill använda en webbplatsskapare
Webbplatser som skapats från grunden kräver en ganska detaljerad förståelse för HTML -kodning, men du kan enkelt skapa en webbplats med hjälp av en gratis värdtjänst som Weebly, Wix, WordPress eller Google Sites. Webbplatsskapare tenderar att vara mycket lättare för förstagångsdesigners att använda än HTML.
- Om du bestämmer dig för att koda din egen webbplats måste du lära dig både HTML- och CSS -kodning.
- Om det inte låter lockande att investera tid och energi för att skapa din webbplats kan du också anlita en webbdesigner för att skapa din webbplats åt dig. Frilansande designers kan kosta allt mellan $ 30 i timmen och långt över $ 100 per timme.
Steg 2. Kartlägg din webbplats
Innan du ens öppnar en webbplatsskapare bör du veta ungefär hur många sidor du vill att din webbplats ska ha, vad innehållet på var och en av dessa sidor ska vara och den allmänna layouten för viktiga sidor som hemsidan och "Om" sida.
Din webbplats kan vara lättare att visualisera om du ritar grova bilder av var och en av dem istället för att bara bestämma vilket innehåll som ska visas
Steg 3. Använd intuitiv design
Även om det finns något att säga om nya idéer, bör din webbplats grundläggande design följa etablerade riktlinjer som följande:
- Navigationsalternativ (t.ex. flikar för olika sidor) ska visas högst upp på sidan.
- Om du använder en menyikon (☰) ska den finnas i det övre vänstra hörnet på sidan.
- Om du använder ett sökfält bör det vara nära den övre högra sidan av sidan.
- Nyttiga länkar (t.ex. länkar till "Om" -sidan eller "Kontakta oss" -sidan) bör stå längst ner på varje sida.
Steg 4. Var konsekvent
Oavsett vilken texttyp, färgpalett, bildtema och designalternativ du väljer, se till att du använder samma beslut på hela din webbplats. Det kan vara otroligt skrämmande att se ett teckensnitt eller färgschema som används för "Om" -sidan när en helt annan används för hemsidan.
- Om du till exempel enbart använder coola färger för webbplatsens hemsida, implementera inte ljusa, starka färger på nästa sida.
- Tänk på att användning av högljudda eller kolliderande färger, särskilt när färgerna visas dynamiskt (t.ex. rörligt), kan framkalla epilepsi hos ett litet antal webbanvändare. Om du bestämmer dig för att använda sådana färger på din webbplats, se till att du lägger till en epilepsivarning före alla relevanta sidor.
Steg 5. Lägg till navigationsalternativ
Att placera direktlänkar till viktiga sidor på din webbplats högst upp på hemsidan hjälper dig att rikta första gången besökare till det innehåll som är viktigt. De flesta webbplatsskapare lägger till dessa länkar som standard.
Det är viktigt att se till att varje sida på din webbplats är tillgänglig genom att klicka igenom alternativen på din webbplats i stället för att bara vara tillgänglig via sidans adress
Steg 6. Använd färger som kompletterar varandra
Precis som alla andra former av design, bygger webbdesign på visuellt tilltalande färgkombinationer; på grund av detta är det viktigt att välja temafärger som passar ihop.
Svart, vitt och grått är en bra kombination om du inte vet var du ska börja
Steg 7. Överväg att använda en minimalistisk design
Minimalism uppmuntrar svala tonfärger, enkel grafik, svart-på-vita textsidor och så lite utsmyckning som möjligt. Eftersom minimalism kräver lite fina element är det ett enkelt sätt att få din webbplats att se professionell och attraktiv ut utan att kräva mycket arbete.
- Många webbplatsskapare kommer att ha ett "minimalistiskt" tema som du kan välja när du skapar din webbplats.
- Ett alternativ till minimalism är "brutalism", som använder hårdare linjer, ljusa färger, fet text och minimala bilder. Brutalism har mindre följor än minimalism, men beroende på din webbplats innehåll kan det bättre passa dina designbehov.
Steg 8. Gör unika val
Raka linjer och nätlåsta webbelement är säkra satsningar, men att göra några unika stilistiska beslut kommer både att ge din webbplats personlighet och hjälpa din webbplats att sticka ut.
- Var inte rädd för att bocka trender genom att placera webbplatselement asymmetriskt eller använda överlappande element för att skapa ett skiktat utseende.
- Medan eleganta, skarpa hörn och fyrkantiga element (även kända som en "kortbaserad" presentation) är mindre gynnsamma än de rundade, mjuka elementen.
Del 2 av 2: Hur man maximerar webbplatsens prestanda
Steg 1. Dra fördel av mobiloptimeringsalternativ
Mobila webbläsare står för mer webbtrafik än stationära webbläsare, vilket innebär att den uppmärksamhet du ägnar åt din webbplats mobilversion åtminstone bör motsvara din skrivbordswebbs utveckling. De flesta tjänster för webbplatsskapare skapar automatiskt en mobilversion av din webbplats, men du vill ha följande information i åtanke för din mobilsajt:
- Se till att knapparna (t.ex. webbplatslänkar) är stora och lätta att knacka på.
- Undvik att implementera funktioner som inte kan ses på mobilen (t.ex. Flash, Java, etc.).
- Överväg att ha en mobilapp för din webbplats.
Steg 2. Undvik att använda för många foton per sida
Både webbläsare och mobila webbläsare kan kämpa för att ladda sidor som visar ett stort antal foton eller videor. Även om bilder är viktiga i webbdesign, kan användning av mer än några få per sida orsaka onödigt långa laddningstider, vilket hindrar människor från att besöka sidan / sidorna i fråga.
Generellt sett vill du att webbplatsens sidor ska laddas på under fyra sekunder
Steg 3. Lägg till en "Kontakt" -sida
Du kommer att märka att praktiskt taget alla etablerade webbplatser har en "Kontakta oss" -sida som har kontaktinformation (t.ex. ett telefonnummer och en e -postadress); vissa webbplatser har till och med ett inbyggt frågeformulär på den här sidan. Om du lägger till en "kontaktsida" kommer webbplatsens tittare att få en direkt kommunikation till dig och därmed lägga till en lösning på potentiella frustrationer.
Steg 4. Skapa en anpassad 404 -sida
När någon besöker en specifik sida på din webbplats som antingen inte har skapats eller inte finns, kommer en "404 -fel" -webbsida att visas. De flesta webbläsare har en standard 404 -sida, men du kanske kan anpassa din från din webbplatsskapares inställningar; Se i så fall till att du inkluderar följande detaljer:
- Ett lättsamt felmeddelande (t.ex. "Grattis - du har hittat vår felsida!")
- En länk tillbaka till webbplatsens hemsida
- En lista med vanligt visade länkar
- En bild eller logotyp för din webbplats
Steg 5. Använd en sökfält om möjligt
Om din webbplatsskapande metod stöder att lägga till ett sökfält på din webbplats rekommenderas det starkt att du gör det. Detta säkerställer att användare snabbt kan navigera till en viss sida eller ett visst objekt utan att behöva klicka igenom dina navigeringsalternativ.
Sökfält är också användbara när din publik vill söka efter en allmän term utan att använda trial-and-error
Steg 6. Investera mest tid på din hemsida
När någon anländer till din webbplats hemsida, bör de få kärnan i din webbplats tema omedelbart; utöver detta bör alla element på hemsidan laddas snabbt, inklusive navigationsalternativ och eventuella bilder. Din hemsida bör ha följande aspekter:
- En uppmaning till handling (t.ex. en knapp att klicka på eller ett formulär att fylla i)
- Ett navigeringsverktygsfält eller meny
- En inbjudande grafik (t.ex. ett fast foto, en video eller en liten grupp foton med tillhörande text)
- Nyckelord som avser din webbplats tjänst, ämne eller fokus
Steg 7. Testa din webbplats i flera webbläsare på flera plattformar
Detta är otroligt viktigt, eftersom olika webbläsare kan hantera aspekter av din webbplats annorlunda. Innan du börjar marknadsföra din webbplats, försök att besöka 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)
- Den inbyggda webbläsaren på flera olika Android-telefoner (t.ex. Samsung Galaxy, Google Nexus, etc.)
Steg 8. Fortsätt att uppdatera din webbplats när den åldras
Designtrender, länkar, foton, koncept och sökord ändras allt eftersom tiden går, så du måste fortsätta göra ändringar på din webbplats för att hålla dig uppdaterad. Detta kräver att du kontrollerar din webbplats prestanda tillsammans med andra liknande webbplatser minst en gång var tredje månad (helst oftare).
Grundläggande HTML -hjälp
Exempel på webbsida med HTML
Stöd för wikiHow och låsa upp alla prover.
HTML fuskblad
Stöd för wikiHow och låsa upp alla prover.
Exempel på enkel webbsida
Stöd för wikiHow och låsa upp alla prover.
Tips
- Webbplatstillgänglighet är en annan viktig aspekt av webbplatsutveckling. Detta inkluderar bland annat bildtexter för hörselskadade publik, ljudbeskrivningar för blinda besökare och ljuskänslighetsvarningar om din webbplats använder potentiellt krampanfallande effekter.
- De flesta webbplatsskapare har en uppsättning mallar som du kan använda för att cementera webbplatsens layout och design innan du lägger till dina föredragna element.
Varningar
- De flesta webbplatsskapare ä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ånadsavgift eller en årlig avgift.
- Undvik plagiat och följ alla upphovsrättslagar: lägg inte till slumpmässiga bilder från webben eller till och med strukturella element utan tillstånd.
