Hvis du vil designe og oprette websider, bliver denne proces meget lettere, hvis du planlægger fremad. I planlægningsfasen kan designeren og klienten arbejde sammen om at finde et format og layout, der passer til deres behov. Planlægningsprocessen påvirker stedets stil eller stil, du kan sige, at dette er det vigtigste aspekt i webdesign, især hvis det er til forretningsformål.
Trin
Del 1 af 4: Oprettelse af grundstrukturen
Trin 1. Bestem webstedets funktion
Hvis du opretter et personligt websted, kender du sikkert allerede svaret. Men hvis du opretter et websted til en anden organisation, virksomhed eller person, skal du finde ud af, hvad de ønsker og webstedets funktionalitet. Alt, hvad du angiver her, får virkning, når websiden er færdig.
- Kræver webstedet Storefront? Skal der fremsættes brugerkommentarer? Skal brugeren oprette en konto senere? Er webstedets artikel orienteret? Eller billedorienteret? Alle disse og andre spørgsmål hjælper dig med at designe og designe webstedet.
- Denne planlægningsproces kan trækkes ind i en tegning, især hvis det er for en stor virksomhed, og mange mennesker er involveret i at skabe dette projekt.
Trin 2. Opret et sitemapdiagram (sitemap)
Et sitemapdiagram ligner et flowdiagram, der viser, hvordan brugerne bevæger sig fra den ene side til den næste. Du behøver ikke en webside på dette stadie, bare en generel strøm af begreber. Du kan bruge et computerprogram til at oprette diagrammer eller tegne dine egne på papir. Brug dette diagram til at demonstrere begreberne hierarkisk arrangement og forbindelse til websider.
Trin 3. Prøv kortudformningsmetoden
En populær metode til gruppewebudvikling er at bruge et antal kort til at finde ud af alles forventninger. Tag et antal notekort og skriv det grundlæggende indhold på en webside individuelt ned på hver enkelt. Arranger disse kort sammen med dit team for at finde det bedste koncept. Denne metode er velegnet til brug, når du samarbejder med andre om oprettelse af websider.
Trin 4. Brug papir og en opslagstavle eller et whiteboard
Dette er en original planlægningsmetode på et lille budget, du kan hurtigt slette eller flytte indhold og ændre flowet. Tegn dit webdesign på papir, og forbind derefter papirerne med tråd, eller tegn linjer på tavlen. Denne metode er meget velegnet til brug i brainstorming -sessioner.
Trin 5. Opret en indholdsopgørelse
Faktisk har det en tendens til at være mere passende at bruge i redesign af websider end i nye webdesigns. Indsæt hvert færdigt stykke indhold eller webside i et regneark. Noter formålet med hvert stykke indhold eller side ved hjælp af denne liste til at bestemme, hvad der skal fjernes, og hvad der skal opbevares. Du kan forenkle webens struktur og forenkle redesignprocessen senere.
Del 2 af 4: Oprettelse af en grundlæggende HTML -oversigt
Trin 1. Opret en wireframe for at etablere websidehierarkiet
Den grundlæggende HTML -skabelon er blueprint af det websted, du vil bygge, ved kun at bruge de mest grundlæggende tags og prøveindhold (blokke/skabeloner). Denne ramme besvarer spørgsmålet, "Hvad er synligt på internettet og hvor?" Formatering og styling er ikke påkrævet ved oprettelsen af denne disposition.
- Du kan se indholdets struktur og rutediagram med en grundlæggende oversigt, før du vælger en stilindstilling.
- Grundlæggende HTML -skabeloner er ikke statiske som PDF -filer eller billeder, du kan hurtigt stryge gennem prøveindhold for at oprette nye strukturer.
- Basisrammen er interaktiv, hvilket gavner både webudviklere og klienter. Da denne grundlæggende ramme er skrevet med simpel HTML -kode, kan du stadig navigere i den og vide, hvordan skift af webside fungerer. Dette kan ikke gøres med PDF.
Trin 2. Prøv Gray Box -metoden
Bloker eller fremhæv dit websides indhold i Gray Box, det vigtigste indhold er øverst. Sorter indholdet i en kolonne. For eksempel, hvis siden er "Om virksomheden", er detaljerede oplysninger om virksomheden øverst efterfulgt af en personaleliste, derefter kontaktoplysninger mv.
Dette inkluderer ikke sidehoveder og sidefødder. Gray Box er en visuel repræsentation af det indhold, der vises på internettet
Trin 3. Prøv et grundlæggende omridsbyggerprogram
Der er forskellige programmer, som du kan bruge i processen med at oprette en grundlæggende webramme. Mængden af webprogrammeringskode (sprog), du skal mestre, er forskellig for hvert program. Nogle af de programmer, der er ret populære, inkluderer:
- Mønsterlab. Dette websted er dedikeret til "atomdesign", hvert indhold betragtes som et "molekyle", der sammensætter en større webside.
- Jumpcharts. Denne webside giver web-baserede planlægnings- og indramningstjenester. Disse websteder er betalt og kræver et abonnement, men du kan hurtigt opbygge webrammer uden at skulle beherske en masse webprogrammeringskode.
- Wirefy. Wirefy er et andet websted, der tilbyder "atomdesign". Webudviklere kan få værktøjet gratis.
Trin 4. Brug enkel HTML -markup
En god grundlæggende skabelon konverteres let til det originale websted. Tænk ikke for meget på webstyling under processen med at oprette denne skabelon. Brug markup, der let kan forstås og ændres.
En simpel grundramme er meget bedre. Formålet med at oprette en markup er at opbygge en struktur. Visuelt udseende kan justeres senere med CSS og avanceret markup
Trin 5. Opret en grundlæggende oversigt for hver webside
Du kan blive fristet til at sidestille hver webside med en grundlæggende oversigt. Faktisk vil dette kun gøre dit websted enkelt og kedeligt. Opret en anden oversigt for hver side, du vil forstå, at hver side har brug for sit eget design.
Del 3 af 4: Oprettelse af indhold
Trin 1. Forbered indholdet, før du opretter en webside
Du finder det meget lettere at få vist en forhåndsvisning af din webvisning, hvis du allerede har faktisk indhold i stedet for at bruge prøver eller pladsholdere. Du behøver ikke at have for meget indhold, men din mockup vil se meget bedre ud, hvis du bruger en kopi af det originale billede.
Du behøver ikke at have alt artikelmaterialet, men det skal i det mindste have en egentlig overskrift
Trin 2. Husk, at godt indhold ikke kun er tekst
Internettet er meget mere komplekst end en simpel webside med tekst. Du har brug for en række forskellige indhold for at oprette et fantastisk websted for at tiltrække og invitere besøgende. For eksempel:
- Billede.
- Stemme.
- Videoer.
- Webtransmission eller webstream (Twitter)
- Facebook -integration
- RSS
- Webfeed
Trin 3. Spørg en professionel fotograf om hjælp
Hvis du vil inkludere fotos på dit websted, vil det første indtryk, du får fra dit websted, være meget bedre, hvis det er fyldt med professionel fotografering. Et godt foto er mere end tyve fotos i lav kvalitet værd.
Kig efter en nyuddannet fotokunst som en billigere løsning end en professionel fotograf, der har været i branchen i lang tid
Trin 4. Skriv kvalitetsartikler
Det skrevne indhold på websiden bestemmer mængden af din webtrafik. Selvom du ikke behøver at bekymre dig for meget om oprettelse af indhold i denne designproces, gør det ikke ondt at begynde at tænke over det, fordi du også regelmæssigt har brug for indhold, når dit websted er i gang.
Ud over artiklens indhold er der skrevet materiale, som du også skal have i færd med at sammensætte en webside. For eksempel kontaktoplysninger, firmanavn eller andet, der vil blive brugt flere gange på webstedet
Del 4 af 4: Slå begreber ind på websteder
Trin 1. Arranger de grundlæggende elementer
Dette arrangement af elementer gælder for hver side på dit websted, f.eks. Overskrifter, fodnoter og navigationsmenuer. Konfigurer det i en meget enkel stil, så du kan kontrollere, hvordan alle sider ser ud. Dette er især nyttigt, når du går videre til weblayoutprocessen.
Du skal ikke bekymre dig for meget om detaljer, prøv at få vist (forhåndsvisning), hvordan overskriften ser ud
Trin 2. Opret et enkelt layout
Start med at flytte urpositionen fra den grundlæggende omridskolonne til den faktiske placering på siden. For eksempel vil du måske flytte prøve -navigationsmenuen til venstre for siden og listen med overskrifter til højre.
Fortsæt med at eksperimentere med weblayout til flere sider, før du går videre til det næste trin. Tillad andre at tage et kig på det for at se, om det layout, du opretter, føles levende
Trin 3. Opret en mockup
Brug et program som Photoshop til at oprette mockups eller eksempelsider på dit websted. Brug det layout, du har samlet som en guide. Du kan gøre mockups hurtigere og få de ønskede resultater med et billedbehandlingsprogram. Resultaterne af disse billeder kan senere bruges som reference i processen med at skrive webprogrammeringskode.
Sæt det faktiske indhold i mockup'en for at få det til at se godt ud
Trin 4. Udskift prøvekonceptet med det originale indhold
Tilføj indhold og elementer til websider. Sved ikke indstillingerne for webstil for nu, bare stak alt til den korrekte placering. Dette hjælper dig med at gennemgå de ændringer af webstilen, du foretager senere.
Trin 5. Opret en webstilsguide
Det er meget vigtigt at opretholde en blanding af stilarter, især for store websteder. Hvis webstedet er beregnet til forretningsformål og allerede har sit eget mærke eller stil, bør dette integreres i webstedets design. Ting at overveje, når du opretter en webstilsguide:
- Navigation
- Hovednote
- Afsnit
- Kursiv karakter
- Fed karakter
- Links (aktive, inaktive, svæver)
- Billedbrug
- Ikon
- Knop
- liste
Trin 6. Anvend webstilen
Når du har fundet den rigtige stil og design, skal du implementere det. CSS er en af de nemmeste måder at implementere stilarter på en webside eller på tværs af webstedet. Se følgende instruktioner for bedre at forstå detaljerne ved brug af CSS.
