Om du vill designa och skapa webbsidor blir denna process mycket enklare om du planerar i förväg. I planeringsfasen kan designern och klienten arbeta tillsammans för att hitta ett format och en layout som passar deras behov. Planeringsprocessen påverkar webbplatsens stil eller stil, du kan säga att detta är den viktigaste aspekten inom webbdesign, särskilt om det är för affärsändamål.
Steg
Del 1 av 4: Skapa grundstrukturen
Steg 1. Bestäm webbplatsens funktion
Om du skapar en personlig webbplats vet du förmodligen svaret redan. Men om du skapar en webbplats för en annan organisation, företag eller person måste du ta reda på vad de vill ha och webbplatsens funktionalitet. Allt du anger här träder i kraft när webbsidan är klar.
- Kräver webbplatsen Storefront? Bör användarkommentarer göras? Behöver användaren skapa ett konto senare? Är webbplatsartikeln orienterad? Eller bildorienterad? Alla dessa och andra frågor hjälper dig att designa och designa webbplatsen.
- Denna planeringsprocess kan ritas in i en ritning, särskilt om det är för ett stort företag och många människor är involverade i att skapa detta projekt.
Steg 2. Skapa ett webbplatskarta (platskarta)
Ett webbplatskarta liknar ett flödesschema som visar hur användare går från en sida till nästa. Du behöver inte en webbsida i detta skede, bara ett allmänt begreppsflöde. Du kan använda ett datorprogram för att skapa diagram eller skissa dina egna på papper. Använd detta diagram för att demonstrera begreppen hierarkiskt arrangemang och anslutning till webbsidor.
Steg 3. Prova kortutformningsmetoden
En populär metod för gruppwebbutveckling är att använda ett antal kort för att ta reda på allas förväntningar. Ta ett antal anteckningar och skriv ner grundinnehållet på en webbsida på var och en individuellt. Ordna dessa kort tillsammans med ditt team för att hitta det bästa konceptet. Denna metod är lämplig för användning när du samarbetar med andra om skapandet av webbsidor.
Steg 4. Använd papper och en anslagstavla eller en whiteboard
Detta är en original planeringsmetod på en liten budget, du kan snabbt ta bort eller flytta innehåll och ändra flödet. Rita din webbdesign på papper, anslut sedan pappren med tråd eller rita linjer på tavlan. Denna metod är mycket lämplig för användning i brainstorming -sessioner.
Steg 5. Skapa en innehållsinventering
Faktum är att det tenderar att vara mer lämpligt att använda vid omformning av banor än i nya webbdesigner. Sätt in varje färdig innehåll eller webbsida i ett kalkylblad. Anteckna syftet med varje innehåll eller sida med hjälp av den här listan för att avgöra vad du ska ta bort och vad du ska behålla. Du kan förenkla strukturen på webben och förenkla omprocessen senare.
Del 2 av 4: Skapa en grundläggande HTML -översikt
Steg 1. Skapa en trådram för att upprätta webbsidans hierarki
Den grundläggande HTML -mallen är ritningen av webbplatsen du kommer att bygga, med endast de mest grundläggande taggarna och exempel (block/mallar) innehåll. Denna ram svarar på frågan "Vad är synligt på webben och var?" Formatering och styling krävs inte vid skapandet av denna disposition.
- Du kan se innehållets struktur och flödesschema med en grundläggande kontur innan du väljer en stilinställning.
- Grundläggande HTML -mallar är inte statiska som PDF -filer eller bilder, du kan snabbt svepa igenom exempelinnehåll för att skapa nya strukturer.
- Basramen är interaktiv vilket gynnar både webbutvecklare och klienter. Eftersom detta grundläggande ramverk är skrivet med enkel HTML -kod kan du fortfarande navigera i det och veta hur byte av webbsidor fungerar. Detta kan inte göras med PDF.
Steg 2. Prova Gray Box -metoden
Blockera eller markera ditt innehåll på webbsidan i Gray Box, det viktigaste innehållet ligger högst upp. Sortera innehållet i en kolumn. Om sidan till exempel är "Om företaget" ligger detaljerad information om företaget högst upp, följt av en personallista, sedan kontaktinformation etc.
Detta inkluderar inte sidhuvud och sidfot. Gray Box är en visuell representation av innehållet som kommer att visas på webben
Steg 3. Prova ett grundläggande konturbyggarprogram
Det finns olika program som du kan använda när du skapar ett grundläggande webbramverk. Mängden webbprogrammeringskod (språk) du måste behärska är olika för varje program. Några av de program som är ganska populära inkluderar:
- Mönsterlabb. Denna webbplats är dedikerad till "atomdesign", varje innehåll betraktas som en "molekyl" som komponerar en större webbsida.
- Hoppscheman. Denna webbsida tillhandahåller webbaserade planeringstjänster och inramningstjänster. Dessa webbplatser är betalda och kräver ett abonnemang, men du kan bygga webbramar snabbt utan att behöva behärska mycket webbprogrammeringskod.
- Wirefy. Wirefy är en annan webbplats som erbjuder "atomdesign". Webbutvecklare kan få verktyget gratis.
Steg 4. Använd enkel HTML -markering
En bra grundmall kan enkelt konverteras till den ursprungliga webbplatsen. Tänk inte för mycket på webbstyling under processen att skapa den här mallen. Använd markup som lätt kan förstås och ändras.
En enkel grundram är mycket bättre. Syftet med att skapa en markup är att bygga en struktur. Visuellt utseende kan justeras senare med CSS och avancerad markering
Steg 5. Skapa en grundläggande översikt för varje webbsida
Du kan bli frestad att likställa varje webbsida med en grundläggande kontur. I själva verket kommer detta bara att göra din webbplats enkel och tråkig. Skapa en annan kontur för varje sida, du kommer att förstå att varje sida behöver sin egen design.
Del 3 av 4: Skapa innehåll
Steg 1. Förbered innehållet innan du skapar en webbsida
Du kommer att ha mycket lättare att förhandsgranska din webbvy om du redan har faktiskt innehåll istället för att använda exempel eller platshållare. Du behöver inte ha för mycket innehåll, men din mockup kommer att se mycket bättre ut om du använder en kopia av originalbilden.
Du behöver inte ha allt artikelmaterial, men det borde åtminstone ha en verklig rubrik
Steg 2. Kom ihåg att bra innehåll inte bara är text
Internet är mycket mer komplext än en enkel webbsida med text. Du behöver en mängd olika innehåll för att skapa en bra webbplats för att locka och bjuda in besökare. Till exempel:
- Bild.
- Röst.
- Videoklipp.
- Webböverföring eller webbström (Twitter)
- Facebook -integration
- RSS
- Webbflöde
Steg 3. Be en professionell fotograf om hjälp
Om du vill inkludera foton på din webbplats blir det första intrycket du får från din webbplats mycket bättre om det är fyllt med professionell fotografering. Ett bra foto är värt mer än tjugo bilder av låg kvalitet.
Leta efter en nyutbildad fotokonst som en billigare lösning än en professionell fotograf som har varit i branschen länge
Steg 4. Skriv kvalitetsartiklar
Det skrivna innehållet på webbsidan avgör mängden av din webbtrafik. Även om du inte behöver oroa dig för mycket för innehållsskapande i denna designprocess, skadar det inte att börja tänka på det eftersom du också behöver innehåll regelbundet när din webbplats är igång.
Förutom artikelinnehåll finns det skrivet material som du också måste ha när du sammanställer en webbsida. Till exempel kontaktinformation, företagsnamn eller annat som kommer att användas flera gånger på webbplatsen
Del 4 av 4: Turning Concepts into Websites
Steg 1. Ordna de grundläggande elementen
Detta arrangemang av element gäller för varje sida på din webbplats, till exempel rubriker, fotnoter och navigeringsmenyer. Ställ in det i en mycket enkel stil så att du kan kontrollera hur alla sidor ser ut. Detta är särskilt användbart när du går vidare till webblayoutprocessen.
Oroa dig inte för mycket om detaljer, försök förhandsgranska (förhandsgranska) hur rubriken ser ut
Steg 2. Skapa en enkel layout
Börja med att flytta klockpositionen från den grundläggande konturkolumnen till den faktiska platsen på sidan. Du kan till exempel flytta navigeringsmenyn till vänster på sidan och listan med rubriker till höger.
Fortsätt experimentera med webblayouter för flera sidor innan du går vidare till nästa steg. Låt andra titta på det för att se om layouten du skapar känns levande
Steg 3. Skapa en mockup
Använd ett program som Photoshop för att skapa mockups eller exempelsidor på din webbplats. Använd layouten som du har sammanställt som en guide. Du kan göra mockups snabbare och få de resultat du vill ha med ett bildbehandlingsprogram. Resultaten av dessa bilder kan senare användas som referens i processen att skriva webbprogrammeringskod.
Lägg det faktiska innehållet i mockupen för att det ska se bra ut
Steg 4. Ersätt provkonceptet med originalinnehållet
Lägg till innehåll och element på webbsidor. Svett inte inställningarna för webbstil för tillfället, bara stapla allt till rätt plats. Detta hjälper dig att granska de webbstiländringar du gör senare.
Steg 5. Skapa en webbstilguide
Det är mycket viktigt att bibehålla en blandning av stilar, särskilt för stora webbplatser. Om webbplatsen är avsedd för affärsändamål och redan har ett eget varumärke eller en egen stil, bör detta integreras i webbdesignen. Saker att tänka på när du skapar en webbsidestilguide:
- Navigering
- Huvudnotering
- Paragraf
- Kursiv karaktär
- Djärv karaktär
- Länkar (aktiv, inaktiv, svävar)
- Bildanvändning
- Ikon
- Knopp
- lista
Steg 6. Tillämpa webbstilen
När du har hittat rätt stil och design, implementera den. CSS är ett av de enklaste sätten att implementera stilar på en webbsida eller på webbplatsen. Se följande instruktioner för att bättre förstå detaljerna om hur du använder CSS.
