Website mockups: 4 populære tilgange til at udforske
Webstedsmockups kan oprettes på mange forskellige måder. Det er sandt, at der ikke er nogen 'bedste' tilgang, men afhængigt af visse UI- og UX-designere 'stilarter og præferencer (og designprocessen) fungerer nogle bedre end andre.
I denne artikel vil vi se på fordele og ulemper ved fire af de mest populære muligheder: ende-til-ende UX-værktøjer, mockup-værktøjer, grafiske designværktøjer samt kodede designs, der begynder at sløre linierne mellem webstedsmockups og prototyper.
Hvis du specifikt leder efter wireframing-værktøjer, skal du se dette indlæg på bedste wireframe-værktøjer , eller for en bredere samling, se vores mega-roundup af bedste værktøjer til webdesign .
Gør ikke fejlen ved at tro, at alle webstedsmodeller er de samme. Enkle beslutninger om platforme, troskab og kodning vil alle give betydeligt forskellige resultater. Ved, hvad du vil have, og hvad dine mål er, før du overhovedet begynder designprocessen - hvis du vil have et værktøj, der understøtter alle tre faser, er det bedst at begynde at bruge det end at skifte halvvejs igennem. Ligeledes, hvis du har brug for en fantastisk, fuldt realistisk mockup, skal du huske på, at du på et tidspunkt bruger en grafisk designeditor.
01. End-til-end UX-værktøjer
I det højeste niveau er end-to-end-værktøjer, der sigter mod at tilfredsstille hele arbejdsgangen: mockups, prototyping, dokumentation, udvikleroverdragelser og designsystemer. UXPin har imødekommet dette behov siden begyndelsen af 2010'erne, men en række andre mærker som Adobe og InVision forsøger nu også at skabe det 'ene værktøj til at styre dem alle'.
Så hvordan samler disse værktøjer sig lige op til mockup-oprettelse? De kan tackle dem uden problemer - og derefter nogle. Med UXPin kan du for eksempel oprette mockups med flere tilstande og interaktioner. Det efterligner endda nogle af funktionerne i Photoshop og Sketch ved at inkludere et penværktøj.
På den anden side, Studio af InVision , giver mulighed for en smuk fiks animationsredigering; mens Adobe XD lader dig åbne Photoshop- og Sketch-filer i dine XD-designs og anvende farver, symboler, lineære gradienter og tegnformater.
Vigtigst er det, at end-to-end-værktøjer nu tilbyder designsystemer for at sikre konsistens af mockups på tværs af projekter. Designsystemer giver alle en enkelt sandhedskilde for aktiver og designprincipper på tværs af værktøjer. Hvis du planlægger at oprette en masse mockups, bliver denne funktion næsten obligatorisk.
Når du vælger et end-to-end-værktøj til oprettelse af din mockup på dit websted, er det værd at overveje følgende aspekter:
- Troskab : Hvor kraftigt er værktøjet til visuelt design og interaktionsdesign?
- Konsistens : Hvilke funktioner sikrer designkonsistens i dit arbejde?
- Nøjagtighed : Genspejler de elementer, du arbejder med, 'sandhedskilden' i din organisation?
- Samarbejde : Kan du samarbejde med interessenter eller andre designere?
- Udleverer overdragelse : Hvordan genererer værktøjet specifikationer og aktiver for udviklere?
02. Dedikerede mockup-værktøjer
Mindre robuste løsninger som f.eks Princip , Framer , Moqups eller Balsamiq kan stadig give dig alt hvad du har brug for til at opbygge din mockup - du mister bare de ekstra arbejdsgange og designkonsistensfunktioner. Disse værktøjer er designet til at gøre skabelsesprocessen så let som muligt, så du kan fokusere mere på stilistiske beslutninger og mindre på hvordan man manipulerer programmet.
Dedikerede mockup-værktøjer har klare fordele: Begyndere drager fordel af deres brugervenlighed, mens eksperter sætter pris på de designs, der er specielt skræddersyet til deres avancerede behov. I den mere avancerede ende er værktøjer som Framer og Principle specialiserede i animationer og interaktioner til mockups.
I den nedre ende giver Moqups og Balsamiq mere funktionalitet end ikke-designværktøjer, der undertiden bruges til wireframes og mockups (såsom Keynote ), men de er begrænset til kun lavtidelighedsdesign. De kan dog være ret nyttige, hvis målet er at skabe low-fidelitet wireframes meget hurtigt.
Når det kommer til mockup-værktøjer, skal du beslutte, om en simpel wireframing-løsning bare vil gøre, eller om du har brug for mere avanceret skærmdesign. Uanset hvilket mockup-værktøj du vælger, skal du bare sørge for at være villig til at acceptere tabet i samarbejdsarbejdsproces og mindre designkonsistensfunktioner, der tilbydes af end-to-end-værktøjer.
03. Software til grafisk design
Nogle designere sværger ved software som Photoshop CC , Skitse eller Illustrator CC , især dem, der er særligt dygtige eller fortrolige med værktøjer, der tilbyder kontrol ned til pixel. Grafiske designplatforme fungerer bedst, hvis du sigter mod det højeste niveau af realisme og visuel troskab. Og som vi forklarer i vores guide til hurtig prototyping ved hjælp af Photoshop CC , det kan være lettere, end du tror.
At arbejde i grafisk designsoftware giver dig adgang til et næsten uendeligt udvalg af meget definerede farver, så hvis du arbejder inden for begrænsningerne i et stift og forudindstillet farveskema - for eksempel under bestemte branding-regler - så kan disse programmer være dit bedste mulighed. Mere end farveindstillinger tilbyder disse programmer langt flere visuelle værktøjer, så du kan tackle detaljerne i detaljer.
Ulempen ved at bruge denne type software er dog, at det kan være svært at oversætte, når det er tid til at begynde at kode designet. Det, der fungerede i Photoshop, fungerer muligvis ikke altid i kode (elementer som skrifttyper, skygger, gradienteffekter osv.), Hvilket kan oversættes til spildt tid ved at finde ud af løsninger til prototypefasen.
For stiltunge sider kan det hjælpe med at hamre de specifikke visuelle detaljer ud under mockup-fasen, i hvilket tilfælde Photoshop eller Sketch giver dig de fleste muligheder. Tilsvarende, hvis du har at gøre med en nit-kræsne eller svært at behage klient, kan det være lettere at præsentere dem for en smuk og imponerende mockup.
Det er også værd at nævne, at mockups oprettet i Photoshop eller Sketch kan trækkes og droppes ind i prototypefasen med UXPin. Dette giver dig mulighed for nemt at animere alle lag (ingen udfladning) med et par klik og sikrer, at du ikke behøver at starte fra bunden, når det er tid til prototype.
Hvis grafik ikke er din eneste prioritet, kan du være mere effektiv ved hjælp af et værktøj, der giver dig mulighed for at udføre wireframing, mockups og prototyper alt på ét sted. Grafisk designsoftware kan være mere besværligt, end det er værd for mockups, medmindre du leder efter optimal visualisering - du bliver helt sikkert nødt til at kommunikere regelmæssigt med din udvikler, da disse værktøjer ikke er designet til samarbejde.
04. Kodede mockups
Hvis du hovedsagelig er designer og ikke er fortrolig med kodning, er det selvfølgelig ikke en mulighed. Som beskrevet i Vejledningen til Mockups , kodede mockups er ikke standardvalget.
Mest kodning kan udskydes til prototypefasen (hvis du opretter en HTML / JavaScript-prototype) eller endda senere (hvis du bruger et prototypeværktøj). Men på trods af kompleksiteten og de potentielle forhindringer er der mange respektable designere, der går ind for at indføre kode i mockup-fasen.
Mens forbedringer i værktøjer og teknologi betyder, at flere og flere muligheder åbner sig i layoutdesign, er ikke alt let (eller endda muligt) at genskabe i kode. Ved at starte i kode ved du med det samme, hvad du kan og ikke kan. Hvis du er fortrolig med kode, kan det også hævdes, at start med dette er mindre spild - mockupen vil alligevel ende i HTML / CSS.
Men som vi nævnte før, er mockups med kodning ikke en populær strategi af flere grunde end vanskeligheden ved kodning. At begynde at kode for tidligt kan begrænse din kreativitet og beredskab til at eksperimentere, da det er let at bekymre sig om gennemførligheden af dine ideer i kode snarere end hvor spændende de kunne se ud.
Det er op til dig, hvornår du skal indføre kodning. Bare sørg for at kende dit design sigter og hold udviklerne opdateret om, hvordan du prioriterer funktioner.
Læs mere:
- 12 topværktøjer til prototyping
- 6 UI-fejl, der dræber dine konverteringsfrekvenser
- 5 måder at fremskynde dine websteder og apps på
