Hvordan lage en wireframe

Hvordan lage en wireframe


En trådramme er en visuell representasjon av hvordan en foreslått layout vil se på en nettside. Dette mockup består av former, som er merket i henhold til funksjon og størrelse. For eksempel kan et rektangel på toppen av bildet merkes "Banner 800 x 100" for å representere en overskrift som er 800 piksler bred-by-100 piksler høye. Andre sideelementer som kan være representert er: navigasjonsfeltet, hovedinnhold og bunntekst.

Bruk wireframe trinnet av web utviklingsprosessen for å sikre at den foreslåtte oppsettet oppfyller kundens og brukernes behov og forventninger.

Bruksanvisning

Preparat

1 Bestem hvilke elementer kunden trenger å ta med på websiden. Han burde ha gitt denne informasjonen når du intervjuet ham om prosjektet. Mulige elementer inkluderer et banner, navigasjon, blogg funksjon og en del nyheter.

2 Skisser mulige oppsett. Prøv forskjellige plasseringer for hvert element. Bestemme hva som vil være brukervennlig, presentere informasjonen mest effektivt, og hvordan det kan være estetisk tiltalende.

3 Skann skissen inn i datamaskinen. Dette vil gi deg et utgangspunkt referanse for når du begynner å gjengi trådramme i et grafisk design program. Selv om dette trinnet er valgfritt, det gir deg en god ide for å starte.

Lag Rammeverk

4 Åpne grafisk design program av ditt valg. Mange designere foretrekker å bruke Adobe Illustrator, men Photoshop, Paint eller et annet program som har evnen til å trekke, vil sted og label figurer nok. Åpne skissen inn i dette programmet hvis du skannet det i.

5 Lagre filen med et beskrivende navn. Spar noen få minutter heretter å sikre minimalt tap bør noe skje til filen mens du arbeider på wireframe.

6 Tegn boksene å matche formen og størrelsen på boksene i din skisse. I de fleste programmer, vil du bruke rektangel verktøyet.

7 Tildele en solid fyllfarge til hver boks. Det er best å bruke nøytrale eller monokromatiske farger for å holde trådramme enkel, med noen mørkere og lysere verdier å illustrere layout.

8 Flytt hver boks til sin tiltenkte plassering i oppsettet. Husk å velge pilen verktøyet før du flytter boksen, for å unngå å tegne en annen boks over den eksisterende.

9 Merk hver boks med navnet på den delen av oppsettet som den representerer. Inkluder størrelsen i piksler på etiketten. Noen designere inneholde en kort beskrivelse av formålet med den delen innenfor etiketten.

10 Lagre trådramme i et format som gjør at du kan dele den med klienten. Den typiske filformat er PDF eller JPEG format. Lagre det som en JPEG hvis du setter den inn i en større forslag dokument.

Hint

  • Noen designere hoppe over skissere skrittet helt og starte i grafisk design program. Dette er et spørsmål om preferanser. Enten metoden fungerer.