Gjøre og ikke gjøre for flott webdesign

Når den følges, vil denne veiledningen vise seg å være en ganske verdifull webdesignressurs, spesielt hvis du planlegger å bruke programvare for utvikling av nettsteder i fremtiden. Fra den uerfarne til den erfarne, denne guiden har noe for enhver smak.

Prosessen med flott webdesign Bare for å sikre at vi alle er på samme side, la oss begynne med den grunnleggende definisjonen for "webdesign". I følge Wikipedia er webdesign:

"en prosess med konseptualisering, planlegging, modellering og utførelse av elektronisk medielevering via Internett i form av markeringsspråk egnet for tolkning av nettleser og visning som grafisk brukergrensesnitt" .

Prosessen med webdesign kan sammenlignes med prosessen med å skrive en forskningsoppgave. I konseptualiserings-/planleggingsstadiet lages flytskjemaer (omrisset) som illustrerer navigasjonsstrukturen til nettstedet ditt. I modelleringsfasen lages statiske trådrammer (det grove utkastet) som illustrerer skjelettoppsettet for hver del av nettstedet ditt. Etter at trådrammene er laget, brukes grafikk, farger og tekst for å lage utformingen av nettsidene dine basert på utformingen av trådrammene. I utførelsesfasen konverteres designet ditt til et format som støttes av nettlesere, tekst og innhold legges til, og til slutt publiseres nettstedet ditt live på Internett for verden å se (endelig utkast).

Alle tre stadier av designprosessen er like viktige. Mange webdesignere hopper over et stadium for å spare tid eller fordi de ikke tror det er nødvendig. Imidlertid er alle tre stadier nødvendige hvis målet ditt er å skape et vellykket design og respektabelt nettsted. Selv om de tre stadiene brukes, er det mange feil som webdesignere kan gjøre som vil føre til dårlig kvalitet, ikke brukervennlige nettsteder. Det er på tide å rense kabinettet for dårlig webdesignpraksis og fylle på med de gode.

Trinn 1: Konseptualisering og planlegging
Dette stadiet hoppes over oftere enn de to andre stadiene. De fleste forfattere liker ikke å lage konturer for forskningsartikler, og de fleste webdesignere liker heller ikke å lage flytskjemaer. Ikke vær lat. Hvis du anstrenger deg og planlegger nettstedet ditt, vil du finne at webdesignprosessen går problemfritt med færre feil underveis.

Det er et par ting du trenger for å effektivt konseptualisere og planlegge nettstedet ditt:

• en hjerne
• en penn og papir
• (valgfritt) flytskjemaprogramvare
• en generell idé om de forskjellige delene av nettstedet ditt

For å begynne, ta tak i pennen og papiret eller start din favorittprogramvare for flytskjema. Vi bruker OmniGraffle Professiona for Mac OS X som koster $150 per lisens, men er vel verdt det hvis du oppretter nettsteder med jevne mellomrom. Hvis du er på en PC, er SmartDraw et flott GRATIS stykke flytskjemaprogramvare som du kan bruke. En penn og papir fungerer fint.

Det er mange metoder for å lage flytskjemaer. Vi skal vise deg den mest grunnleggende måten å gjøre det på av hensyn til tiden og lengden på denne artikkelen. Hvis du vil lære mer om flytskjemaer, søk etter flytskjemaer på Google eller Yahoo.

Se flytskjemaet som vi laget når vi konseptualiserte Chromatic Sites. (1) Øverst i flytskjemaet viser vi navnet på nettstedet vårt. (2) Deretter inkluderer vi hver primære del av nettstedet vårt: Hjem, Om og Tjenester. Disse delene er hovednavigasjonen for nettstedet ditt. Hva navnene på hver seksjon blir er helt avhengig av innholdet på nettstedet ditt. Prøv å bruke så få seksjoner som mulig slik at de besøkende ikke blir overveldet når de navigerer gjennom nettstedet ditt.

(3) Deretter legger du til alle sekundærsidene (underseksjonene) som vil bli oppført på hver av primærsidene. For Home har vi inkludert profesjonell webdesign, webutvikling og søkemotoroptimalisering. Den sekundære navigasjonen må være mer beskrivende enn den primære navigasjonen. Jo dypere nettstedets navigasjonshierarki går, desto mer beskrivende bør hver etikett være.

Dosene

• Mindre er mer; holde antall primærseksjoner på et minimum. Vi bruker 6 seksjoner på nettsiden vår som er mer enn nok
• Enten du bruker penn og papir eller flytskjemaprogramvare, hold ting så rent og organisert som mulig. Selv om du (og alle som jobber med deg) er de eneste som skal bruke flytskjemaet, må det fortsatt gi mening - Dine primære seksjoner bør bruke bredere termer, mens sekundære og tertiære termer bør være mer beskrivende

Donts
Å lage et flytskjema er ganske enkelt; Det er imidlertid noen feil som lett kan gjøres:

• Ikke bruk veldig beskrivende termer i primærnavigasjonen med mindre hele nettstedet ditt fokuserer på ett smalt emne. Ikke prøv å samle flere emner på samme side. Lag en generell seksjon for disse emnene, og lag underseksjoner fra den seksjonen. Dette vil gjøre underseksjonen (beskrivende) nettsider mer sannsynlig å ha bedre rangeringer i søkemotorene (Google, Yahoo, MSN, Ask) Når du har laget et kortfattet og beskrivende flytskjema, er du klar til å gå videre til andre trinn av webdesignprosessen:

Trinn 2: Modellering
I modelleringsfasen lages statiske "wireframe"-modeller. Hver mockup illustrerer et skjelett av oppsettet for hver av nettsidene som vil bli inkludert på nettstedet ditt. Dette stadiet er viktig fordi det gir oss en ide om hvor ulike elementer skal plasseres i designet vårt. Noen av disse elementene er:

• logo
• navigasjonsmeny
• innhold
• bilder, videoer

For å lage disse mockupene kan du bruke penn og papir eller din foretrukne mockup-programvare. Tidligere har vi brukt Photoshop, men i det siste har vi brukt OmniGraffle Professional. OmniGraffle er ikke så ressurskrevende som Photoshop, og det lar oss sette sammen wireframe-modellene våre mye raskere.

Sørg i tillegg for at du har flytskjemaet(e) du opprettet i nærheten, da du må referere til disse fra tid til annen for å være sikker på at du håner opp alle sidene som vil vises på nettstedet ditt.

Her er vårt eksempel på hvordan en wireframe mockup skal se ut. Som du kan se, er det ingen farger eller grafikk inkludert. Dette er nøyaktig hvordan en wireframe-mockup skal være – en skjelettmessig utforming av designet ditt. Hensikten er å kunne ha en generell idé om hvor hvert av nettsidens elementer skal plasseres.

Vi begynner vanligvis fra øverst til venstre og jobber oss ned til bunnen. Det er ingen spesifikk måte en wireframe skal se ut. Bruk fantasien din. Pass imidlertid på at du ikke glemmer å inkludere de viktigste elementene på et nettsted når du lager wireframes (logo, navigasjonsmeny, innholdsplassering, bilder/videoplassering).

Hvis noen av sidene dine vil bruke samme layout, er det ikke nødvendig å håne alle disse sidene (selv om du absolutt kan). Bare sørg for å mockup ethvert unikt oppsett som nettstedet ditt vil ha. Du vil takke deg selv senere.

Gjøres

• mockup alle unike sider
• inkludere viktige elementer (logo, navigasjon, innholdsplassering, bilder/videoplassering) -start fra toppen og jobb deg ned - referer til flytskjemaet ditt opprettet i trinn 1 for å få deg til å ikke glemme å mockup noen sider -lagre, lagre, lagre – som med alt på datamaskinen, lagre mockup(ene) hvert 10. minutt eller så
• fokus på rene, brukervennlige layouter -merk elementene dine slik at du ikke glemmer hva de er når du refererer til dem i trinn 3, utførelse -bruk andre nettsider som inspirasjon; det er ikke noe galt med å ta elementer fra andre nettsteder og gjøre dem til dine egne (se "donts")

The Dont's

• ikke ta med grafikk eller farger (det er for neste trinn) - ikke gjør modellene dine for "travle"; fokus på rene, godt organiserte, brukervennlige layouter - ikke hopp over dette stadiet; den er like viktig som den første og den siste - hvis du tar elementer fra andre nettsteder, sørg for at du ikke plagierer; det er en forskjell mellom å bli inspirert av et annet nettsted til å lage visse elementer i designet ditt og å på en åpen måte rive av layout og farger

Trinn 3: Utførelse
I den tredje og siste fasen, utførelse, kombineres planleggingen fra trinn 1 og 2 for å hjelpe til med å lage en levende, interaktiv nettside.
Den tredje fasen er den desidert mest tidskrevende siden du skal 1) lage grafikken 2) lage innholdet og til slutt 3) konvertere webdesignene fra bilder til kode som nettlesere bruker for å presentere nettstedet ditt for verden.

Innen du når den tredje fasen, bør du ha en klar ide om:

• hvordan de besøkende kommer fra ett sted til et annet (trinn 1, flytskjema) - hvordan nettsidene dine vil bli lagt opp (trinn 2, wireframe mockups)

Hvis du ikke har en klar ide om disse to tingene, gå tilbake til første og andre trinn og fortsett å utvikle dem. Du vil finne at den tredje fasen er enklest når du har konstruert en klar, kortfattet kampplan for utformingen av nettstedet ditt.

Drøft pennen og papiret
I trinn 3 må du bruke Photoshop eller et annet bilderedigeringsprogram siden du skal bruke farger og grafikk for å lage layouten for nettstedet ditt.

Vi begynner vanligvis å lage "hjemmesiden" (indeks) først. Bruk wireframes som du opprettet i trinn 2 som en mal for hver av sidene du lager. Men i stedet for å bruke solide bokser, bruk grafikk, farger og tekst i stedet. Hver side må se ut akkurat slik du vil at den skal se ut på Internett siden dette er den siste fasen av designprosessen.

Sørg for å inkludere bakgrunnen for navigasjonen (men ikke legg til teksten i bildet). Når du konverterer med CSS (cascading style sheets), skal navigasjonen din være i form av tekst og ikke bilder. Bilder kan ikke gjennomsøkes av søkemotorene (nøkkelordene som brukes i navigasjonen din vil ikke bli indeksert på søkemotorens resultatsider, noe som betyr at færre mennesker vil kunne finne nettstedet ditt).

Når du er fornøyd med designene dine og føler at de er klare til å bli lagt ut på Internett, er det på tide å bryte designene fra hverandre slik at du kan lage en CSS-basert layout. For mer informasjon om å konvertere layoutene dine til CSS eller merke nettstedet ditt i CSS, besøk w3schools.com. Etter å ha kikket rundt på Internett, kunne vi ikke finne en anstendig bilde-til-CSS-opplæring – så forvent en fra oss i løpet av de kommende ukene. Konvertering av design til CSS er ekstremt viktig siden tabelloppsett er en saga blott.

Her er et eksempel på et nesten fullført nettsted med layouten vi lagde skjul på i trinn 2. Dette ble tatt direkte fra nettleseren vår, og som du kan se, er det nå en logo, farger, et vakkert navigasjonssystem, en bunntekst, og viktigst av alt, en ren, organisert layout.
Takket være planleggingen i trinn 1 og 2 er layouten vår godt organisert og enkel å bruke.

Dosene

• referer til malene dine som ble opprettet i trinn 2; Selv om det er greit å avvike fra det opprinnelige oppsettet ditt, bør du ikke trenge det
• gjør litt research før du lager ditt faktiske design; få ideer fra andre nettsteder og gjør dem til dine egne (uten å plagiere)
• inkludere farger og grafikk for å skape det endelige utseendet til nettsidene dine - bruk CSS (cascading style sheets) for å konvertere designene dine fra bilder til markering som er forståelig av nettlesere - referer til flytskjemaet ditt fra trinn 1 når du koder sidene dine med hyperkoblinger; det er bedre å bruke en rullegardinmeny som inkluderer alle (eller de fleste) koblingene på nettstedet ditt på hver side; dette vil tillate enklere navigering og også gjøre sidene dine lettere å gjennomgå når søkemotoredderkoppene stopper; et flott sted å få CSS-rullegardinmenyer er på DynamicDrive.com - fullfør designet mens du arbeider i Photoshop eller hvilken som helst bilderedigeringsprogramvare du bruker; det kan være vanskelig å gjøre endringer i designet når det er konvertert til markup (kode)

Donts

• ikke ta med teksten i navigasjonsmenyene dine når du konverterer til CSS; i stedet for å bruke bildetekst, bruk vanlig tekst som er lesbar av søkemotoredderkopper
• ikke bruk tabeller når du konverterer; selv om du trenger å kjøpe en bok på CSS, vil det være verdt det; bordene er døde
• ikke hopp over de to første stadiene bare for å spare tid; nettstedet ditt VIL bli bedre hvis du starter fra begynnelsen av webdesignprosessen (i stedet for på slutten)
• ikke glem å komprimere bildene dine når de klippes fra hverandre for CSS; det er ingenting verre enn et nettsted som laster sakte på grunn av store bildefiler; Photoshop har et "Lagre optimalisert for web"-alternativet (CS3 - "Lagre for web og enheter")

Prosess gjør mester
Ved å følge en webdesignprosess som den som er illustrert i denne artikkelen, øker du sjansene for å lage en nettside som er godt organisert, lett navigerbar og veldig brukervennlig. La oss innse det – hvis besøkende går seg vill eller blir forvirret mens de forsøker å surfe på nettstedet ditt, kan de trykke tilbake-knappen og se etter et mer brukervennlig nettsted. Folk liker ikke å tenke når det gjelder å finne veien rundt nettsteder. Ikke få dem til å tenke. Du tenker ved å planlegge nettstedet ditt fra trinn 1 til trinn 3, og du vil oppdage at flere mennesker vil like å besøke nettstedet ditt.