Hvis du vil designe og opprette websider, vil denne prosessen bli mye enklere hvis du planlegger fremover. I planleggingsfasen kan designeren og klienten jobbe sammen for å finne et format og layout som passer deres behov. Planleggingsprosessen påvirker stilen eller stilen på nettstedet. Du kan si at dette er det viktigste aspektet i webdesign, spesielt hvis det er for forretningsformål.
Steg
Del 1 av 4: Lage grunnstrukturen
Trinn 1. Bestem funksjonen til nettstedet
Hvis du oppretter et personlig nettsted, vet du sannsynligvis allerede svaret. Men hvis du oppretter et nettsted for en annen organisasjon, selskap eller person, må du finne ut hva de vil ha og funksjonaliteten til nettstedet. Alt du angir her vil tre i kraft når nettsiden er ferdig.
- Krever nettstedet Storefront? Bør det komme brukerkommentarer? Må brukeren opprette en konto senere? Er artikkelen på nettstedet orientert? Eller bildeorientert? Alle disse og andre spørsmål vil hjelpe deg med å designe og designe nettstedet.
- Denne planleggingsprosessen kan trekkes inn i en tegning, spesielt hvis det er for et stort selskap og mange mennesker er involvert i å lage dette prosjektet.
Trinn 2. Lag et nettstedskartdiagram (nettstedskart)
Et nettstedskartdiagram ligner et flytdiagram, som viser hvordan brukerne går fra en side til en annen. Du trenger ikke en webside på dette stadiet, bare en generell konseptflyt. Du kan bruke et dataprogram til å lage diagrammer eller skisse dine egne på papir. Bruk dette diagrammet for å demonstrere begrepene hierarkisk arrangement og tilkobling til nettsider.
Trinn 3. Prøv kortutformingsmetoden
En populær metode for gruppewebutvikling er å bruke et antall kort for å finne ut alles forventninger. Ta et antall notatkort og skriv ned det grunnleggende innholdet på en webside på hver enkelt. Ordne disse kortene sammen med teamet ditt for å finne det beste konseptet. Denne metoden er egnet for bruk når du samarbeider med andre om opprettelse av websider.
Trinn 4. Bruk papir og en oppslagstavle, eller en tavle
Dette er en original planleggingsmetode på et lite budsjett, du kan raskt slette eller flytte innhold og endre flyten. Tegn webdesignet ditt på papir, og koble deretter papirene med tråd, eller tegn linjer på brettet. Denne metoden er veldig egnet for bruk i idémyldring.
Trinn 5. Lag en innholdsbeholdning
Faktisk har det en tendens til å være mer hensiktsmessig å bruke i redesign av nett enn i nye webdesigner. Sett inn hvert ferdig innhold eller nettside i et regneark. Noter formålet med hvert innhold eller hver side, ved å bruke denne listen til å bestemme hva du skal fjerne og hva du skal beholde. Du kan forenkle strukturen på nettet og forenkle redesignprosessen senere.
Del 2 av 4: Lage en grunnleggende HTML -oversikt
Trinn 1. Lag en wireframe for å etablere websidens hierarki
Den grunnleggende HTML -malen er tegningen til nettstedet du skal bygge, og bruker bare de mest grunnleggende taggene og prøveinnholdet (blokker/maler). Dette rammeverket svarer på spørsmålet "Hva er synlig på nettet og hvor?" Formatering og styling er ikke nødvendig for å lage denne oversikten.
- Du kan se strukturen og flytskjemaet for innholdet med en grunnleggende oversikt før du velger en stilinnstilling.
- Grunnleggende HTML -maler er ikke statiske som PDF -filer eller bilder. Du kan raskt bla gjennom eksempelinnhold for å lage nye strukturer.
- Grunnrammen er interaktiv som fordeler både webutviklere og klienter. Siden dette grunnleggende rammeverket er skrevet med enkel HTML -kode, kan du fortsatt navigere i det og vite hvordan bytte av nettsider fungerer. Dette kan ikke gjøres med PDF.
Trinn 2. Prøv Gray Box -metoden
Blokker eller uthev websidens innhold i Gray Box, det viktigste innholdet er øverst. Sorter innholdet i en kolonne. For eksempel, hvis siden er "Om selskapet", er detaljert informasjon om selskapet øverst, etterfulgt av en personaleliste, deretter kontaktinformasjon, etc.
Dette inkluderer ikke topp- og bunntekst. Gray Box er en visuell fremstilling av innholdet som vil vises på nettet
Trinn 3. Prøv et grunnleggende disposisjonsbyggerprogram
Det er forskjellige programmer du kan bruke i prosessen med å lage et grunnleggende webrammeverk. Mengden webprogrammeringskode (språk) du må mestre er forskjellig for hvert program. Noen av programmene som er ganske populære inkluderer:
- Pattern Lab. Dette nettstedet er dedikert til "atomdesign", hvert innhold regnes som et "molekyl" som komponerer en større webside.
- Jumpcharts. Denne nettsiden tilbyr nettbaserte planleggings- og innrammingstjenester. Disse nettstedene er betalt og krever et abonnement, men du kan bygge webrammer raskt uten å beherske mye webprogrammeringskode.
- Wirefy. Wirefy er et annet nettsted som tilbyr "atomdesign". Webutviklere kan få verktøyet gratis.
Trinn 4. Bruk enkel HTML -markering
En god grunnmal vil enkelt konvertere til det opprinnelige nettstedet. Ikke tenk for mye på web styling under prosessen med å lage denne malen. Bruk markup som lett kan forstås og endres.
Et enkelt grunnleggende rammeverk er mye bedre. Hensikten med å lage en markup er å bygge en struktur. Visuelt utseende kan justeres senere med CSS og avansert markup
Trinn 5. Lag en grunnleggende oversikt for hver webside
Du kan bli fristet til å likestille hver nettside med en grunnleggende oversikt. Faktisk vil dette bare gjøre nettstedet ditt enkelt og kjedelig. Lag en annen oversikt for hver side, du vil forstå at hver side trenger sitt eget design.
Del 3 av 4: Lage innhold
Trinn 1. Forbered innholdet før du oppretter en webside
Du vil finne det mye lettere å forhåndsvise webvisningen din hvis du allerede har faktisk innhold i stedet for å bruke prøver eller plassholdere. Du trenger ikke å ha for mye innhold, men din mockup vil se mye bedre ut hvis du bruker en kopi av det opprinnelige bildet.
Du trenger ikke å ha alt av artikkelmaterialet, men det burde i det minste ha en faktisk overskrift
Trinn 2. Husk at flott innhold ikke bare er tekst
Internett er mye mer komplekst enn en enkel tekstside. Du trenger en rekke forskjellige innhold for å lage et flott nettsted for å tiltrekke og invitere besøkende. For eksempel:
- Bilde.
- Stemme.
- Videoer.
- Weboverføring eller webstream (Twitter)
- Facebook -integrasjon
- RSS
- Nettstrøm
Trinn 3. Be en profesjonell fotograf om hjelp
Hvis du vil inkludere bilder på nettstedet ditt, vil det første inntrykket du får fra nettstedet ditt være mye bedre hvis det er fylt med profesjonell fotografering. Ett godt bilde er verdt mer enn tjue bilder av lav kvalitet.
Se etter en nyutdannet fotokunst som en billigere løsning enn en profesjonell fotograf som har vært i bransjen lenge
Trinn 4. Skriv kvalitetsartikler
Det skrevne innholdet på nettsiden bestemmer mengden nettrafikk. Selv om du ikke trenger å bekymre deg for mye om innholdsopprettelse i denne designprosessen, skader det ikke å begynne å tenke på det fordi du også trenger innhold med jevne mellomrom når nettstedet er i gang.
I tillegg til artikkelinnhold, er det skriftlig materiale som du også må ha i ferd med å kompilere en webside. For eksempel kontaktinformasjon, firmanavn eller annet som vil bli brukt flere ganger på nettstedet
Del 4 av 4: Slå konsepter inn på nettsteder
Trinn 1. Ordne de grunnleggende elementene
Denne ordningen med elementer gjelder for hver side på nettstedet ditt, for eksempel overskrifter, fotnoter og navigasjonsmenyer. Sett den opp i en veldig enkel stil, slik at du kan sjekke hvordan alle sider ser ut. Dette er spesielt nyttig når du går videre til weblayoutprosessen.
Ikke bekymre deg for mye om detaljer, prøv å forhåndsvise (forhåndsvise) hvordan overskriften ser ut
Trinn 2. Lag et enkelt oppsett
Start med å flytte klokkeposisjonen fra den grunnleggende omrisskolonnen til den faktiske plasseringen på siden. For eksempel kan det være lurt å flytte eksempelnavigasjonsmenyen til venstre på siden og listen over overskrifter til høyre.
Fortsett å eksperimentere med weboppsett for flere sider, før du går videre til neste trinn. La andre ta en titt på det for å se om oppsettet du lager føles levende
Trinn 3. Lag en mockup
Bruk et program som Photoshop for å lage mockups eller eksempelsider på nettstedet ditt. Bruk oppsettet du har samlet som en guide. Du kan gjøre mockups raskere og få resultatene du ønsker med et bildebehandlingsprogram. Resultatene av disse bildene kan senere brukes som referanse i prosessen med å skrive webprogrammeringskode.
Sett det faktiske innholdet i mockupen for å få det til å se bra ut
Trinn 4. Erstatt prøvekonseptet med det originale innholdet
Legg til innhold og elementer på nettsider. Ikke svett webstilinnstillingene for nå, bare stabel alt til riktig sted. Dette vil hjelpe deg med å gå gjennom endringene i webstilen du gjør senere.
Trinn 5. Lag en webstilguide
Det er veldig viktig å opprettholde en blanding av stiler, spesielt for store nettsteder. Hvis nettstedet er beregnet på forretningsformål og allerede har sitt eget merke eller stil, bør dette integreres i nettstedets design. Ting du bør vurdere når du oppretter en webstilsveiledning:
- Navigasjon
- Hodelapp
- Avsnitt
- Kursiv karakter
- Fet karakter
- Lenker (aktiv, inaktiv, svever)
- Bildebruk
- Ikon
- Knott
- liste
Trinn 6. Bruk webstilen
Når du har funnet riktig stil og design, implementer du den. CSS er en av de enkleste måtene å implementere stiler på en webside eller på tvers av nettstedet. Se instruksjonene nedenfor for å bedre forstå detaljene ved bruk av CSS.
