Nettstedsmockups: 4 populære tilnærminger å utforske

Nettstedsmodeller

Nettstedsmockups kan opprettes på mange forskjellige måter. Det er sant at det ikke er noen 'beste' tilnærming, men avhengig av visse UI- og UX-designerstiler og preferanser (og designprosessen), vil noen fungere bedre enn andre.

I denne artikkelen vil vi se på fordeler og ulemper med fire av de mest populære alternativene: ende-til-ende UX-verktøy, mockup-verktøy, grafisk designverktøy, samt kodede design som begynner å uskarpe linjene mellom mockups på nettstedet og prototyper.

Hvis du er ute etter wireframing verktøy spesifikt, se dette innlegget på beste wireframe verktøy , eller for en bredere samling, sjekk ut vår mega-roundup av beste verktøy for nettdesign .



GenerateJS-banner

Klikk på bildet for å finne ut mer og hent billettene dine(Bildekreditt: Future / Toa Heftiba, Unsplash)

Ikke gjør feilen ved å tro at alle modeller på nettstedet er de samme. Enkle beslutninger om plattformer, troskap og koding vil alle gi betydelig forskjellige resultater. Vet hva du vil og hva målene dine er før du til og med begynner designprosessen - hvis du vil ha et verktøy som støtter alle tre fasene, er det best å begynne å bruke det enn å bytte halvveis. På samme måte, hvis du trenger en fantastisk, fullstendig realistisk mockup, må du huske at du vil bruke et grafisk designredigeringsprogram på et eller annet tidspunkt.

01. End-to-end UX-verktøy

På det høyeste nivået er end-to-end-verktøy som tar sikte på å tilfredsstille hele arbeidsflyten: mockups, prototyping, dokumentasjon, utvikleroverleveringer og designsystemer. UXPin har sørget for dette behovet siden begynnelsen av 2010-tallet, men en rekke andre merker, som Adobe og InVision, prøver nå også å lage det 'ene verktøyet for å styre dem alle'.

UXPin

hvordan animere linjer i ettereffekter
UXPin kan skilte med robust prototyping, mockups, dokumentasjon og utvikleroverleveringer

Så hvordan kan disse verktøyene samles opp for å lage mockup? De kan takle dem uten problemer - og så noen. Med UXPin kan du for eksempel lage mockups med flere tilstander og interaksjoner. Det etterligner til og med noen funksjoner i Photoshop og Sketch ved å inkludere et pennverktøy.

På den andre siden, Studio av InVision , gir mulighet for ganske fin animasjonsredigering; samtidig som Adobe XD lar deg åpne Photoshop og Sketch-filer i XD-designene dine, og bruke farger, symboler, lineære gradienter og tegnstiler.

tre skjære maskin for hjemmebruk

Studio InVision

Studio by InVision tar sikte på å skape en end-to-end arbeidsflyt

Viktigst, end-to-end-verktøy tilbyr nå designsystemer for å sikre konsistens av modeller på tvers av prosjekter. Designsystemer gir alle en enkelt kilde til sannhet for eiendeler og designprinsipper på tvers av verktøy. Hvis du planlegger å lage mange mockups, blir denne funksjonen nesten obligatorisk.

Når du velger et helhetlig verktøy for å lage din mockup på nettstedet ditt, er det verdt å vurdere følgende aspekter:

  • gjengivelse : Hvor kraftig er verktøyet for visuell og interaksjonsdesign?
  • Konsistens : Hvilke funksjoner sikrer designkonsistens i arbeidet ditt?
  • Nøyaktighet : Gjenspeiler elementene du jobber med 'sannhetskilden' i organisasjonen din?
  • Samarbeid : Kan du samarbeide med interessenter eller andre designere?
  • Utlevering av utvikler : Hvordan genererer verktøyet spesifikasjoner og eiendeler for utviklere?

02. Dedikerte mockup-verktøy

Mindre robuste løsninger som Prinsipp , Framer , Moqups eller Balsamiq kan fortsatt gi deg alt du trenger for å bygge din mockup - du mister bare tilleggsfunksjonene for arbeidsflyt og designkonsistens. Disse verktøyene er designet for å gjøre opprettelsesprosessen så enkel som mulig, slik at du kan fokusere mer på stilistiske beslutninger og mindre på hvordan du kan manipulere programmet.

Dedikerte mockup-verktøy har klare fordeler: Nybegynnere drar nytte av deres brukervennlighet, mens eksperter setter pris på designene som er spesielt skreddersydd til deres avanserte behov. På den mer avanserte siden spesialiserer verktøy som Framer og Principle seg i animasjoner og interaksjoner for mockups.

Framer

Verktøy som Framer er spesialister på interaksjoner

I den nedre enden gir Moqups og Balsamiq mer funksjonalitet enn verktøy som ikke er design som noen ganger brukes til trådrammer og mockups (for eksempel Keynote ), men de er begrenset til kun design med lav kvalitet. De kan imidlertid være ganske nyttige hvis målet er å lage trådløse rammer med lav troskap veldig raskt.

Når det gjelder mockup-verktøy, må du bestemme om en enkel trådløs innramningsløsning bare vil gjøre, eller om du trenger mer avansert skjermdesign. Uansett hvilket mockup-verktøy du velger, må du bare sørge for at du er villig til å akseptere tapet i samarbeidsflyt og mindre designkonsistensfunksjoner som tilbys av end-to-end-verktøy.

hvordan du rengjør oljemaleribørster

03. Grafisk designprogramvare

Noen designere sverger til programvare som Photoshop CC , Skisse eller Illustrator CC , spesielt de som er spesielt dyktige eller kjent med verktøy som tilbyr kontroll ned til pikselet. Grafiske designplattformer fungerer best hvis du sikter mot det høyeste nivået av realisme og visuell troskap. Og som vi forklarer i vår guide til rask prototyping ved hjelp av Photoshop CC , det kan være lettere enn du tror.

Photoshop CC

Photoshop gir finkornet kontroll, men kan være overkill for enkle modeller

Å jobbe med programvare for grafisk design gir deg tilgang til et nesten uendelig utvalg av svært definerte farger, så hvis du jobber innenfor begrensningene for et stivt og forhåndsinnstilt fargevalg - for eksempel under bestemte merkevarebestemmelser - kan disse programmene være ditt beste alternativ. I tillegg til fargevalg, tilbyr disse programmene langt flere visuelle verktøy, slik at du kan takle detaljene.

Ulempen med å bruke denne typen programvare er imidlertid at det kan være vanskelig å oversette når det er på tide å begynne å kode designen. Det som fungerte i Photoshop, fungerer ikke alltid med kode (elementer som skrifter, skygger, gradienteffekter og så videre), noe som kan oversettes til bortkastet tid på å finne ut løsninger for prototypefasen.

For stiltunge sider kan det hjelpe å hamre ut de spesifikke visuelle detaljene under mockup-fasen, i så fall vil Photoshop eller Sketch gi deg flest muligheter. Tilsvarende, hvis du har å gjøre med en nit-kresen eller vanskelig å behage klient, kan det å presentere dem for en nydelig og imponerende mockup lettere vinne dem.

mockups kan bli dratt inn i UXPin

hvordan du ser det digitale fotavtrykket ditt
Mockups opprettet i Photoshop eller Sketch kan dras og slippes i UXPin

Det er også verdt å nevne at mockups opprettet i Photoshop eller Sketch kan dras og slippes inn i prototypefasen med UXPin. Dette lar deg enkelt animere alle lag (uten utflating) med noen få klikk, og sørger for at du ikke trenger å starte fra bunnen av når det er på tide å prototype.

Hvis grafikk ikke er din eneste prioritet, kan du være mer effektiv ved å bruke et verktøy som lar deg gjøre wireframing, mockups og prototyping alt på ett sted. Grafisk designprogramvare kan være mer problemer enn det er verdt for mockups med mindre du leter etter optimal visualisering - du må definitivt kommunisere regelmessig med utvikleren din, siden disse verktøyene ikke er designet for samarbeid.

04. Kodede modeller

Hvis du hovedsakelig er designer og ikke er komfortabel med koding, er dette åpenbart ikke et alternativ. Som diskutert i Guiden til Mockups , kodede modeller er ikke standardvalget.

Mest koding kan utsettes til prototyping-stadiet (hvis du oppretter en HTML / JavaScript-prototype) eller til og med senere (hvis du bruker et prototypingsverktøy). Men til tross for kompleksiteten og potensielle hindringer, er det mange respektable designere som tar til orde for å innføre kode i mockup-fasen.

Mens forbedringer i verktøy og teknologi betyr at flere og flere muligheter åpner seg i layoutdesign, er ikke alt lett (eller til og med mulig) å gjenskape i kode. Når du starter med kode, vet du med en gang hva du kan og ikke kan gjøre. Hvis du er komfortabel med kode, kan det også hevdes at det å starte med dette er mindre sløsing - mockupen kommer til å ende opp i HTML / CSS uansett.

Men som vi nevnte tidligere, er modeller med koding ikke en populær strategi av flere grunner enn vanskeligheten med å kode. Å begynne å kode for tidlig kan begrense kreativiteten og beredskapen til å eksperimentere, da det er lett å bekymre seg for muligheten for ideene dine i kode i stedet for hvor spennende de kan se ut.

Det er opp til deg når du skal innføre koding. Bare vær sikker på at du vet at designmålene dine er, og hold utviklerne oppdatert om hvordan du prioriterer funksjoner.

Les mer: