Share
Etter skisse er det en siste ting du bør jobbe med før du begynner å designe (selv om dette er en del av utformingen). Wireframing er i hovedsak en visuell guide til et nettsted som hjelper deg å se på layout uten å tenke på prosjektets estetikk..
Hvordan en wireframe skal se vil variere vilt, avhengig av hvem du snakker med. Du har mange alternativer når du lager wireframes - fra måten du viser dine wireframes, til programvaren du lager dem med.
Når du lager dine wireframes, må du jobbe med layout og med innholdet du tidligere har kurert. Ideen om en wireframe - som en levererbar til en klient, eller bare som et ekstra trinn du foretrekker å ta - er å kunne vise den visuelle utformingen og flytningen av en nettside, før du blir slått av med designen detaljer som farge, typografi eller andre visuelle flairer.
Den beste måten å flytte på å lage digitale wireframes for prosjektet ditt, er å flytte direkte fra skissefasen. I den delen skulle du allerede ha spilt rundt med layout, men å lage en digital wireframe er en mye mer profesjonell måte å spikere ned på dine ideer på layout og flyt av websiden din.
Når du designer kreative wireframes, vil du sørge for at du bruker det virkelige innholdet du har kuratert nærmere på begynnelsen av prosjektet. Personlig foretrekker jeg å designe wireframes som mangler alt som kan svinge en klient til å tenke at det tas designbeslutninger som vil påvirke utseendet på prosjektet. Derfor sikrer jeg alltid at jeg designer en wireframe som bare fokuserer på innholdet i prosjektet og måten innholdet presenteres på siden.
Et eksempel wireframe opprettet ved hjelp av Balsamiq Desktop applikasjonen. Innhold som er godt skrevet og vist på en måte som er nyttig og relevant for de som vil lese det, vil alltid resultere i en bedre design og online opplevelse. En godt designet wireframe er en som husker at innholdet er det viktigste på siden og er sympatisk å vise det innholdet på en måte som passer for prosjektet og dets sluttbrukere.
Wireframe-etappen i et prosjekt vil i stor grad forholde seg til når du redigerte og jobbet med innholdet ditt nærmere på begynnelsen av prosjektet. Som et kort eksempel har du på det tidspunkt jobbet hardt for at innholdet ville være lett å lese ved riktig bruk av overskrifter og lister. Å designe en god wireframe betyr å transportere det innholdet (i avsnitt, overskrifter, lister og hvilken som helst annen måte du valgte å formatere innholdet) inn i din wireframe, og se på hvordan du kan begynne å lage visuell forhold mellom hver bit av innhold, forbinder prikkene til du har en visuell fremstilling av hvordan innholdet kan se på en side.
For å holde wireframes designfri og innholdsfokusert, er arbeid med blokker en veldig enkel måte å snitte av deler av en side for bestemte innholdsområder.
I praktisk forstand betyr dette at hvis du for eksempel ville ha en standard header øverst på siden, så legger du en blokk til toppen av din wireframe-design. Hvis du for eksempel ville legge til et logo og navigasjonsområde i toppteksten, ville du plassere flere blokker for disse elementene inne i overskriften til wireframe-designen din.
Du kan da bruke blokker over hele resten av wireframe-designen, og fortsetter å avskille områder for bestemte biter av innhold.
Blokker trenger ikke å være bare en bokstavlig monokrom firkant eller et rektangel skjønt - når du har en ide om grunnleggende layout med blokkene du har lagt til, kan du gjerne bruke det faktiske innholdet ditt på steder som det vil være nyttig. Bruk for eksempel det virkelige innholdet til navigasjonselementene, en introduksjon til en side, overskriftene og så videre. Dette hjelper som du kan begynne å se visuelt hvordan innholdet fungerer sammen i layouten du lager.
Når du utformer wireframes, må du alltid sørge for at du merker områdene eller delene du plasserer i wireframe. Selv om du kanskje forstår hva en bestemt blokk betyr (spesielt når det virkelige innholdet ikke er plassert der), kan en klient eller kollega ikke og du bør gjøre det så klart som mulig for dem å forstå hva de ser på.
Når du designer dine wireframes, er en ting du bør tenke på, strømmen av siden - se på måten innholdet sitter på siden og hvordan det flyter fra en seksjon av innhold til en annen.
Målet her er å sørge for at innholdet leses riktig og at du øyet beveger seg flytende fra ett avsnitt til det neste. Dette er spesielt viktig når du har innholdsrike sider - brukerne skal kunne bevege seg enkelt fra ett avsnitt til det neste, uten at det er en grusom opplevelse. Hvis sidene er for opptatt og ikke har den rette typen strøm til dem, blir brukerne slått av av det som virker vanskelig å forstå eller følge prosessen.
En ide er å tenke på hva du vil intuitivt gjøre når du navigerer på et nettsted - start med å se på logoen og overskriften, deretter ned til hovedoverskriften og følge hovedinnholdet, bevege seg gradvis over til et sidebar og så videre.
Når du designer et nettsted, er det nesten umulig å lage en separat wireframe for hvert eneste trinn som nettstedet kan endre, hvordan det ser ut eller passer sammen. I stedet, etter å ha tidligere tenkt på strømmen av design og innhold, kan du se på en responsiv strøm til wireframe design.
Dette var et tips jeg hentet fra Sarah Parmenters Responsive Day Out-talk, hvor Sarah forklarte hvordan hun legger til tall til sine wireframes som hjelper til med å hjelpe en klient til å forstå hvordan innholdet og elementene kan stables når de er på en mindre skjerm. Dette er veldig nyttig da det vil hjelpe en klient til å begynne å forstå innholdshierarkiet også, noe som også betyr at du kan begynne å se på eventuelle fallgruvene eller utfordringene når du jobber responsivt veldig tidlig i prosjektet - noe som kan spare deg for en mye tid senere i prosjektet.
Når du designer wireframes, har du en latterlig mengde valg når det gjelder programvaren du kan bruke. Personlig tror jeg det er en bestemt tre valg som synes mest populære, spesielt i nettbransjen.
Når du designer en wireframe, er det muligens den enkleste løsningen å jobbe med en grafikkapp som du allerede er kjent med - eller i det minste har brukt litt før. Dette betyr at det er liten eller ingen læringskurve, slik at du forhåpentligvis kan fortsette å designe dine wireframes litt raskere.
Den enkleste måten å designe med grafikkprogramvaren er å bruke form- og tekstverktøyene, ved hjelp av disse for å lage dine grunnleggende blokker, samt bestemte områder med ekte innhold. Husk å merke dine wireframe-blokker ved hjelp av tekstverktøyet mens du går.
Dette kan være en overraskelse for noen, da Keynote og Powerpoint vanligvis brukes til å lage presentasjoner. De er imidlertid veldig kraftige og brukervennlige verktøy for å lage andre ting, inkludert wireframes. Ved å bruke standardverktøyene som er tilgjengelige for deg i appene selv, kan du enkelt lage profesjonelle wireframes veldig raskt.
Min personlige preferanse, Balsamiq Mockups er en app som er dedikert til å lage wireframes. Denne appen gjør det veldig enkelt å designe wireframes og har mange ressurser til din disposisjon for å raskt dra og slippe elementene du vil plassere.
En ting jeg elsker om Balsamiq Mockups er at den bruker en grov, skissert stil som egner seg til å vise at wireframes er nettopp det - en ide om layout som kan bli oversatt etterpå til en skikkelig design. Du har muligheten til å velge mellom en mer standard følelse til wireframes så vel som skissert finish, hvis du føler at en klient ville være mer mottakelig for det.
Med introduksjonen av brukergrensesettpakker er det også veldig enkelt å begynne å designe mer komplekse wireframes på en rekke applikasjoner. Fra komplett sett kan du laste ned for å bruke som en PSD i Photoshop, til sett som hjelper deg med å lage wireframes i Keynote mye enklere - det er noe der for å hjelpe deg.
Accentsconagua