Gør og lad være med fantastisk webdesign

Når den følges, vil denne guide vise sig at være en ganske værdifuld webdesignressource, især hvis du planlægger at bruge software til webstedsudvikling i fremtiden. Fra den uerfarne til den erfarne, denne guide har noget for enhver smag.

Processen med fantastisk webdesign Bare for at sikre, at vi alle er på samme side, lad os begynde med den grundlæggende definition af "webdesign". Ifølge Wikipedia er webdesign:

"en proces med konceptualisering, planlægning, modellering og udførelse af elektronisk medielevering via internettet i form af Markup-sprog velegnet til fortolkning af webbrowser og visning som grafisk brugergrænseflade" .

Processen med webdesign kan sammenlignes med processen med at skrive et forskningspapir. I konceptualiserings-/planlægningsfasen oprettes flowcharts (konturen), som illustrerer navigationsstrukturen på din hjemmeside. I modelleringsstadiet oprettes statiske wireframes (det grove udkast), som illustrerer skeletlayoutet for hver sektion af din hjemmeside. Efter at trådrammerne er lavet, bruges grafik, farver og tekst til at skabe designet af dine websider baseret på trådrammernes layout. I udførelsesfasen konverteres dit design til et format, der understøttes af webbrowsere, tekst og indhold tilføjes, og til sidst offentliggøres dit websted live på internettet, så verden kan se det (endelig udkast).

Alle tre faser af designprocessen er lige vigtige. Mange webdesignere springer et trin over for at spare tid, eller fordi de ikke synes, det er nødvendigt. Alle tre faser er dog nødvendige, hvis dit mål er at skabe et vellykket design og en respektabel hjemmeside. Selvom de tre faser bruges, er der mange fejl, som webdesignere kan begå, som vil føre til dårlig kvalitet, ikke-brugervenlige websteder. Det er tid til at rense kabinettet for dårlig webdesignpraksis og genopbygge det med de gode.

Fase 1: Konceptualisering og planlægning
Dette trin springes over oftere end de to andre trin. De fleste forfattere bryder sig ikke om at skabe konturer til forskningsartikler, og de fleste webdesignere kan heller ikke lide at lave flowcharts. Vær ikke doven. Hvis du gør en indsats og planlægger din hjemmeside, så vil du opleve, at webdesignprocessen går glat med færre fejl undervejs.

Der er et par ting, du skal bruge for effektivt at konceptualisere og planlægge din hjemmeside:

• en hjerne
• en pen og papir
• (valgfrit) flowchartsoftware
• en generel idé om de forskellige sektioner af dit websted

For at begynde skal du gribe din pen og papir eller starte din foretrukne flowchart-software. Vi bruger OmniGraffle Professiona til Mac OS X, som koster $150 pr. licens, men det er det værd, hvis du opretter websteder med jævne mellemrum. Hvis du er på en pc, så er SmartDraw et fantastisk GRATIS stykke flowchart-software, som du kan bruge. Pen og papir fungerer dog fint.

Der er mange metoder til at lave flowcharts. Vi vil vise dig den mest grundlæggende måde at gøre det på af hensyn til tiden og længden af ​​denne artikel. Hvis du vil lære mere om flowcharts, søg efter flowcharts på Google eller Yahoo.

Se det flowchart, vi oprettede, da vi konceptualiserede Chromatic Sites. (1) Øverst i rutediagrammet viser vi navnet på vores hjemmeside. (2) Dernæst inkluderer vi hver primær sektion af vores hjemmeside: Hjem, Om og Tjenester. Disse sektioner er hovednavigationen for din hjemmeside. Hvad navnene på hver sektion bliver, afhænger helt af indholdet på din hjemmeside. Prøv at bruge så få sektioner som muligt, så dine besøgende ikke bliver overvældet, når de navigerer gennem dit websted.

(3) Tilføj derefter alle de sekundære sider (underafsnit), der vil blive opført på hver af de primære sider. Til Home har vi inkluderet professionelt webdesign, webudvikling og søgemaskineoptimering. Den sekundære navigation skal være mere beskrivende end den primære navigation. Jo dybere dine websteders navigationshierarki går, jo mere beskrivende bør hver etiket være.

Dos

• Mindre er mere; holde antallet af primære sektioner på et minimum. Vi bruger 6 sektioner på vores hjemmeside, hvilket er mere end nok
• Uanset om du bruger pen og papir eller flowchart-software, skal du holde tingene så rene og organiserede som muligt. Selvom du (og alle, der arbejder med dig) er de eneste, der vil bruge rutediagrammet, skal det stadig give mening - Dine primære sektioner skal bruge bredere termer, mens sekundære og tertiære termer skal være mere beskrivende

Donts
At oprette et flowchart er ret ligetil; der er dog et par fejl, der nemt kan begås:

• Brug ikke meget beskrivende udtryk i din primære navigation, medmindre hele dit websted fokuserer på ét snævert emne - Forsøg ikke at samle flere emner på samme side. Opret en generel sektion for disse emner, og opret undersektioner fra den sektion. Dette vil gøre underafsnittet (beskrivende) websider mere tilbøjelige til at få bedre placeringer i søgemaskinerne (Google, Yahoo, MSN, Ask) Når du har oprettet et kortfattet og beskrivende flowchart, er du klar til at gå videre til anden fase af webdesignprocessen:

Trin 2: Modellering
I modelleringsfasen oprettes statiske "wireframe" mock-ups. Hver mockup illustrerer et blottet skelet af layoutet for hver af de websider, der vil blive inkluderet på din hjemmeside. Denne fase er vigtig, fordi den giver os en idé om, hvor forskellige elementer vil blive placeret i vores design. Nogle af disse elementer er:

• logo
• navigationsmenu
• indhold
• billeder, videoer

For at oprette disse mockups kan du bruge en pen og papir eller din foretrukne mockup-software. Tidligere har vi brugt Photoshop, men på det seneste har vi brugt OmniGraffle Professional. OmniGraffle er ikke så ressourcekrævende, som Photoshop er, og det giver os mulighed for at samle vores wireframe mockups meget hurtigere.

Derudover skal du sørge for, at du har det eller de flowcharter, du har oprettet, i nærheden, da du skal henvise til disse fra tid til anden for at sikre, at du håner alle de sider, der vises på dit websted.

Her er vores eksempel på, hvordan en wireframe mockup skal se ud. Som du kan se, er der ingen farver eller grafik inkluderet. Det er præcis sådan en wireframe mockup skal være – et skeletlayout af dit design. Formålet er at kunne have en generel idé om, hvor hvert af websidens elementer skal placeres.

Vi begynder normalt fra øverst til venstre og arbejder os ned til bunden. Der er ingen specifik måde, som en wireframe skal se ud. Brug din fantasi. Sørg dog for, at du, når du opretter dine wireframes, ikke glemmer at inkludere de vigtigste elementer på en hjemmeside (logo, navigationsmenu, indholdsplacering, billeder/videoplacering).

Hvis nogle af dine sider vil bruge det samme layout, er det ikke nødvendigt at håne alle disse sider (selvom du bestemt kan). Bare sørg for at mockup ethvert unikt layout, som dit websted vil have. Du vil takke dig selv senere.

Do'erne

• mockup alle unikke sider
• inkludere vigtige elementer (logo, navigation, indholdsplacering, billeder/videoplacering) -start fra toppen og arbejd dig ned - referer dit flowchart oprettet i trin 1 for at få dig til ikke at glemme at mockup nogen sider -gem, gem, gem – ligesom med alt på computeren, gem dine mockup(s) hvert 10. minut eller deromkring
• fokus på rene, brugervenlige layouts -mærk dine elementer, så du ikke glemmer, hvad de er, når du refererer til dem i trin 3, udførelse -brug andre websteder som inspiration; der er intet galt i at tage elementer fra andre sider og gøre dem til dine egne (se "donts")

Dont's

• medtag ikke grafik eller farver (det er til næste trin) - gør ikke dine modeller for "optaget"; fokus på rene, velorganiserede, brugervenlige layouts - spring ikke dette trin over; det er lige så vigtigt som det første og det sidste - hvis du tager elementer fra andre hjemmesider, så sørg for at du ikke plagierer; der er forskel på at blive inspireret af en anden hjemmeside til at skabe bestemte elementer i dit design og åbenlyst at rive deres layout og farver af.

Trin 3: Udførelse
I den tredje og sidste fase, udførelse, kombineres planlægningen fra trin 1 og 2 for at hjælpe med at skabe en live, interaktiv hjemmeside.
Den tredje fase er langt den mest tidskrævende, da du vil 1) skabe grafikken 2) skabe indholdet og endelig 3) konvertere webdesigns fra billeder til kode, som webbrowsere bruger til at præsentere din hjemmeside for verden.

Når du når den tredje fase, bør du have en klar idé om:

• hvordan dine besøgende kommer fra et sted til et andet (trin 1, flowchart) - hvordan dine websider vil blive lagt op (trin 2, wireframe mockups)

Hvis du ikke har en klar idé om disse to ting, så gå tilbage til første og anden fase og fortsæt med at udvikle dem. Du vil opdage, at den tredje fase er nemmest, når du har konstrueret en klar, kortfattet kampplan for design af din hjemmeside.

Slip pennen og papiret
I trin 3 skal du bruge Photoshop eller et andet billedredigeringsprogram, da du skal bruge farver og grafik til at skabe layoutet til din hjemmeside.

Vi begynder normalt at oprette "hjemmesiden" (indeks) først. Brug dine wireframes, som du oprettede i trin 2, som en skabelon for hver af de sider, du opretter. Men i stedet for at bruge solide bokse, skal du bruge grafik, farver og tekst i stedet. Hver side skal se ud præcis, som du vil have dem til at se ud på internettet, da dette er den sidste fase af designprocessen.

Sørg for at inkludere baggrunden til din navigation (men føje faktisk ikke teksten til dit billede). Når du konverterer ved hjælp af CSS (cascading style sheets), skal din navigation være i form af tekst og ikke billeder. Billeder kan ikke crawles af søgemaskinerne (de søgeord, der bruges i din navigation, vil ikke blive indekseret på søgemaskinens resultatsider, hvilket betyder, at færre mennesker vil være i stand til at finde dit websted).

Når du er tilfreds med dine designs og føler, at de er klar til at blive lagt på internettet, er det tid til at skille designene ad, så du kan skabe et CSS-baseret layout. For mere information om konvertering af dine layouts til CSS eller markering af dit websted i CSS, besøg w3schools.com. Efter at have kigget rundt på internettet, kunne vi ikke finde en anstændig billed-til-CSS-tutorial – så forvent en fra os i de kommende uger. Konvertering af dine designs til CSS er ekstremt vigtigt, da tabellayout er en saga blot.

Her er et eksempel på en næsten færdiggjort hjemmeside med det layout, vi hånede op i fase 2. Dette blev taget direkte fra vores webbrowser, og som du kan se, er der nu et logo, farver, et smukt navigationssystem, en sidefod, og vigtigst af alt, et rent, organiseret layout.
Takket være planlægningen i trin 1 og 2 er vores layout velorganiseret og nemt at bruge.

Dos

• referer til dine skabeloner, der blev oprettet i trin 2; selvom det er fint at afvige fra dit originale layout, burde du ikke have behov for det
• foretag nogle undersøgelser, før du opretter dit egentlige design; få ideer fra andre websteder og gør dem til dine egne (uden at plagiere)
• medtag farve og grafik for at skabe det endelige udseende til dine websider -brug CSS (cascading style sheets) til at konvertere dine designs fra billeder til opmærkning, der kan forstås af webbrowsere -henviser dit flowchart fra trin 1, når du koder dine sider med hyperlinks; det er bedre at bruge en rullemenu, der inkluderer alle (eller størstedelen) af links på dit websted på hver side; dette vil give mulighed for lettere navigation og også gøre dine sider nemmere at crawle, når søgemaskinespiders stopper ved; et godt sted at få CSS-rullemenuer er på DynamicDrive.com - færdiggør dit design, mens du arbejder i Photoshop eller hvilken som helst billedredigeringssoftware, du bruger; det kan være besværligt at foretage ændringer i dit design, når det først er konverteret til markup (kode)

Donts

• medtag ikke teksten i dine navigationsmenuer, når du konverterer til CSS; i stedet for at bruge billedtekst, brug almindelig tekst, der kan læses af søgemaskinespiders
• brug ikke tabeller ved konvertering; selvom du skal købe en bog om CSS, vil det være det værd; borde er døde
• spring ikke de første to trin over bare for at spare tid; dit websted VIL blive bedre, hvis du starter fra begyndelsen af ​​webdesignprocessen (i stedet for i slutningen)
• glem ikke at komprimere dine billeder, når de er skåret fra hinanden til CSS; der er intet værre end et websted med langsom indlæsning på grund af store billedfiler; Photoshop har muligheden "Gem optimeret til web" (CS3 - "Gem til web og enheder")

Process gør mester
Ved at følge en webdesignproces som den, der er illustreret i denne artikel, øger du chancerne for at skabe en hjemmeside, der er velorganiseret, let navigerbar og meget brugervenlig. Lad os se det i øjnene – hvis besøgende farer vild eller bliver forvirrede, mens de forsøger at surfe på dit websted, kan de trykke på tilbage-knappen og lede efter en mere brugervenlig hjemmeside. Folk kan ikke lide at tænke, når det kommer til at finde rundt på websteder. Lad være med at få dem til at tænke. Du tænker ved at planlægge din hjemmeside fra trin 1 til trin 3, og du vil opdage, at flere mennesker vil nyde at besøge din hjemmeside.