Sådan planlægger du et websted

Hvis du vil designe og oprette en hjemmeside, vil du finde det meget nemmere at gøre, hvis du planlægger det først. Planlægningsfasen gør det muligt for bygherren og kunden at arbejde sammen, indtil de finder et format og layout, der opfylder deres behov. Planlægningsprocessen påvirker webstedsstilvalg og er uden tvivl den vigtigste del af webdesign, især for virksomheder.

indhold

Trin

Del 1oprettelse af strukturen
Del 2oprettelse af en html wireframe

Video: sådan høster du blomsterfrø

Del 3oprettelse af indhold

Video: hvordan planlægger de smid reparatie 30 reparatører?

Del 4transformere konceptet til et websted

Video: sådan plyndrede mændene europa

trin

Del 1
Oprettelse af strukturen

Bestem webstedets funktionalitet. Hvis du selv laver en hjemmeside, har du sikkert allerede svaret på det. Hvis du laver en hjemmeside til en anden person, virksomhed eller organisation, skal du finde ud af, hvad kunden forventer af hjemmesiden og dens funktionalitet. Uanset hvad du beslutter her, vil det påvirke det endelige produkt.

Har jeg brug for et butiksfacade? Har du brug for brugernes kommentarer? Kan de oprette konti? Er webstedets artikelorienteret? En billeder? Alle disse og andre spørgsmål vil hjælpe med at informere webstedets design og struktur.
Dette kan være en trættende proces, især for store virksomheder med flere personer involveret i projektet.

Billede med titlen Planlæg et website Trin 2

Opret et webstedskortdiagram. Det ligner et rutediagram og viser dig hvordan brugere navigerer fra en side til en anden. Du behøver ikke engang sider på dette tidspunkt, bare en generel strøm af koncepter. Du kan bruge et computerprogram til at oprette diagrammet, eller du kan tegne det manuelt på et papir. Brug dette kortoversigtsdiagram for at vise dit indsigt i hierarkiet og forbindelsen mellem dine websider.

Billede med titlen Planlæg et websted Trin 3

Prøv at bruge kort. En populær metode til gruppebrug er at bruge en stak kort til at finde ud af hver persons ideelle tilnærmelse. Tag en stak chips (fra dem til underskrivelse) og skriv det grundlæggende indhold på en enkelt side på hver chip. Bed dit team om at organisere chipsene på den måde, de finder mest nyttige. Denne strategi er god til situationer, når du samarbejder med andre med at oprette en hjemmeside.

Billede med titlen Planlæg et websted Trin 4

Brug papir og et opslagstavle eller hvidt bord. Dette er den oprindelige billigt planlægningsmetode, og giver dig mulighed for at slette eller flytte indhold og omorganisere alt hurtigt. Tegn designet på stykker og papir og forbinde med en linje, eller skitsere tavlen. Perfekt til brainstorming sessioner.

Billede med titlen Planlæg et websted Trin 5

Brug et indholdsfortegnelse. Denne indstilling er mere målrettet mod redesign end på nye websteder. Placer hver del af indholdet eller eksisterende sider i et regneark. Vær opmærksom på hver enkeltes formål, og brug denne liste til at bestemme, hvad der foregår og hvad der bliver. Dette vil medvirke til at reducere overskuddet og forenkle redesignprocessen.

Del 2
Oprettelse af en HTML Wireframe

Billede med titlen Planlæg et websted Trin 6

Opret en wireframe for at hjælpe med at stramme hierarkiet. En HTML-wireframe er et skelet på dit fremtidige websted, idet du kun bruger de mest grundlæggende tags og blokke til at repræsentere indhold. Han svarer på spørgsmålet "Hvad går der på hver skærm og hvor?". Formatering og stil ignoreres fuldstændigt i en wireframe.

Trådrammen giver dig mulighed for at se strukturen og strømmen af indholdet, før du foretager stilvalg.
HTML wireframes er ikke statiske som PDF-filer eller billeder, og giver dig mulighed for hurtigt at flytte blokke af indhold for at oprette en ny struktur.
En wireframe er interaktiv, hvilket er godt for både udvikleren og klienten. Da wireframe er skrevet i almindelig HTML, kan du stadig navigere igennem det og få en ide om, hvordan bevægelsen mellem sider fungerer. Dette er noget, der ikke kan udtrykkes gennem en konceptuel PDF.

Billede med titlen Planlæg et websted Trin 7

Prøv Grey Box-metoden. Grupper indholdet af din side i grå bokse, med det vigtigste indhold øverst. Blokke er arrangeret i en enkelt kolonne, med den vigtigste del af indholdet på siden øverst. For eksempel, hvis siden er "Om" -firmaet, kan detaljerne gå øverst efterfulgt af en liste over holdet, efterfulgt af kontaktoplysninger mv.

Dette omfatter ikke overskriften og sidefoden. De grå bokse er simpelthen en visuel repræsentation af indholdet, der findes på siden.

Billede med titlen Planlæg et websted Trin 8

Prøv et wireframe authoring program. Der er flere programmer, der kan hjælpe dig med wireframing. Mængden af programmeringskendskab varierer fra program til program. Nogle af de mest populære er:

Pattern Lab. Denne side er specialiseret i "atomdesign", hvor hvert indhold anses for at være et "molekyle", der skaber en stor side.
Jumpcharts. Dette er et site planlægningssted og er også en wireframing service. Det kræver et betalt abonnement, men det giver dig mulighed for hurtigt at lave wireframes uden at bekymre dig for meget om koden.
Wirefy. Dette er et andet system af "atomdesign". Værktøjerne er gratis for udviklere.

Video: Sådan høster du blomsterfrø

Billede med titlen Planlæg et websted Trin 9

Lær at bruge simpel HTML markup. En god wireframe kan nemt konverteres til et rigtigt sted bagefter. Du skal ikke bekymre dig om stil under wireframing processen. Brug i stedet en markering, der let kan forstås og erstattes med meget lidt indsats.

Mindre er mere med wireframe. Målet er simpelthen at opbygge strukturen. Udseendet kan derefter justeres med CSS og avanceret markup.

Billede med titlen Planlæg et websted Trin 10

Lav en wireframe for hver side på dit websted. Det kan være fristende at bare lave en wireframe og sige "Cool, jeg kan anvende det på alle de andre sider, og det er det". Faktisk vil dette generere en generisk og irriterende hjemmeside. Tag tid til hver side i wireframe, og du vil snart opdage, at hver side har sine organisatoriske behov.

Del 3
Oprettelse af indhold

Billede med titlen Planlæg et websted Trin 11

Har noget indhold klar før du begynder at opbygge dit websted. Det bliver meget nemmere at se, hvordan dit websted ser ud, hvis du har ægte indhold i stedet for bare bogmærker. Du behøver ikke meget indhold, men du vil se meget pænere ud i mockupsne, hvis du har nogle originale tekstbilleder.

Du behøver ikke nødvendigvis en artikels krop, men du skal i det mindste have overskrifter.

Billede med titlen Planlæg et websted Trin 12

Video: Hvordan planlægger De Smid Reparatie 30 reparatører?

Husk, at godt indhold er mere end tekst. Internettet er meget mere end enkle tekster på hjemmesider. For at skille sig ud i din niche, skal du have en bred vifte af forskellige typer indhold for at bevare og tiltrække besøgende. Nogle mulige indhold at huske på:

billedsprog
Se profil
video
Strømme (Twitter)
Integration med Facebook
RSS Feed
Indholdsfeeds

Billede med titlen Planlæg et websted Trin 13

Betal en professionel fotograf. Hvis du inkludere fotos på dit websted, bliver dine første indtryk meget bedre med professionelle billeder. Et enkelt godt billede er meget bedre end tyve dårlige billeder.

Se efter nyuddannede i fotografering til billigere løsninger sammenlignet med mere erfarne fagfolk.

Billede med titlen Planlæg et websted Trin 14

Skriv kvalitetsartikler. Det indhold, der er skrevet på din side, bestemmer langt det meste af din webtrafik. Mens du ikke behøver at bekymre dig for meget om at skabe indhold i denne designproces, gør det ikke ondt at tænke over det, da du skal bruge indhold regelmæssigt, når dit websted er online.

Ud over indholdsartikler har du også de skriftlige genstande, som du har brug for under processen med at opbygge hjemmesiden. Dette er kontaktoplysningerne, firmanavnene eller andet, der bruges på forskellige steder på webstedet.

Del 4
Transformere konceptet til et websted

Billede med titlen Planlæg et websted Trin 15

Styler de globale elementer. Dette er de ting, der ses på hver side af dit websted, f.eks. Overskrift, sidefod, og navigationsmenu. Opret en meget grundlæggende stil, så du kan se, hvordan alle siderne vil se ud. Dette vil være meget nyttigt, når du går ind i layoutprocessen.

Du skal ikke bekymre dig for meget om detaljerne, men prøv at komme så tæt som muligt på hovedets udseende.

Billede med titlen Planlæg et websted Trin 16

Video: Sådan plyndrede mændene Europa

Opret et grundlæggende layout. Begynd at flytte objekterne i din wireframe ved at trække dem ud af en kolonne og placere dem på det rigtige sted. Du kan f.eks. Flytte navigationsblokken til venstre på siden og en liste over overskrifter til højre.

Fortsæt med at eksperimentere med layouter med et par flere sider, inden du fortsætter. Lad andre mennesker teste for at se, om de finder organisk navigation.

Billede med titlen Planlæg et websted Trin 17

Opret en mockup. Ved hjælp af et program som Photoshop skal du oprette et mockup på et par sider på dit websted. Brug det layout, du definerede som en fane. Du kan arbejde meget hurtigere i et billedredigeringsprogram og lade det være helt, som du vil have det. Dette giver dig mulighed for at bruge billeder som reference, når det er tid til at kode.

Medtag ægte indhold i mockup for at sikre, at alt er i harmoni.

Billede med titlen Planlæg et websted Trin 18

Udskift blokken med indhold. Start med at tilføje dit indhold og elementer til siden. Du skal ikke bekymre dig om stil endnu, bare læg alt på det rigtige sted. Dette vil hjælpe dig med at vide, om din stilændringer vil fungere.

Billede med titlen Planlæg et websted Trin 19

Opret en stilguide. Dette er den væsentlige del for at opretholde en sammenhængende hjemmeside, især for store websteder. Hvis webstedet er for et firma, der allerede har en visuel identitet, skal den indarbejdes i site design. Ting der skal tages i betragtning i stilguiden er:

Om mig
Headers (
,
, etc.)
stykker
kursiv
fed
Links (aktiv, inaktiv, mouseover)
Brug af billeder
ikoner
knapper
lister

Billede med titlen Planlæg et websted Trin 20

Anvend denne stil. Når du først har besluttet dig for en stil og design til hjemmesiden, er det tid til at begynde at implementere det. CSS er en af de nemmeste måder at implementere stil på en side på eller på et helt websted.