Innhold
- Komplette designverktøy
- 01. InVision Studio
- 02. Skisse
- 03. Adobe XD
- 04. Marvel
- 05. Figma
- 08. Proto.io
- 15. Justinmind
- 16. Væske
- 17. Framer
- Design rammer og biblioteker
- 18. Bootstrap
- 19. Oppstart 4
- 20. Vue.js
- 21. Mønsterlaboratorium
- 22. Materiell design
HOPPE TIL: - Komplette designverktøy
- Mockups og prototyper
- Design rammer og biblioteker
Det er så mange flotte verktøy for nettdesign rundt disse dager, laget for å hjelpe deg med mockups, rammer, testing og mer. Du finner også en mengde nedlastinger på de mange elementene som utgjør god nettdesign, inkludert men ikke begrenset til VR, animasjon, farger og typografi.
Uansett hvilket problem du prøver å løse i arbeidsflyten for nettdesign, er det sannsynlig at noen har laget et verktøy for det, enten det er et frittstående verktøy eller en funksjon i en større app. Den enda bedre nyheten er at så mange av disse flotte verktøyene er gratis, selv om dette gjør en rekke verktøy som tilbys langt mer skremmende å velge mellom.
For å hjelpe webannonser har vi avrundet det vi synes er de beste verktøyene akkurat nå (for en mer spesifikk liste, se denne UI-designverktøyet.) Siden dette er en ganske lang liste, har vi ordnet verktøyene i seksjoner for å gjøre artikkelen lettere å navigere. På denne siden finner du komplett programvare for webdesign, for eksempel Sketch og Adobe XD, etterfulgt av mer grunnleggende dedikerte wireframing-verktøy og webdesignrammer og biblioteker. På side to finnes det en rekke mindre, mer spesialiserte verktøy for alt fra å jobbe med bilder til å sikre inkludering i arbeidet ditt.
Mens du er her, vil du kanskje sjekke ut vår oversikt over de beste webhotelltjenestene, og velge en av de beste nettstedbyggerne også.
Komplette designverktøy
01. InVision Studio
InVision Studio har som mål å dekke alle baser og være det eneste UI-verktøyet du trenger. Den leveres med en mengde funksjoner som hjelper deg med å lage vakre interaktive grensesnitt, inkludert verktøy for rask prototyping, responsiv og samarbeidsdesign og arbeid med designsystemer.
Hvis du allerede bruker InVision med verktøy som Sketch, er det ganske mye crossover i funksjoner. Imidlertid ligger Studios kraft i prototypeavdelingen, spesielt hvis designet ditt involverer animasjon. Rask prototyping lar deg lage komplekse og fantasifulle overganger, slik at du virkelig kan oppnå det animasjonsnivået du ønsker. Bare finn ut hvordan du vil at brukergrensesnittet skal se på begynnelsen av overgangen, og utform deretter sluttresultatet. InVision Studio fungerer resten for deg.
På toppen av det kan du lage disse egendefinerte animasjonene og overgangene fra en rekke bevegelser og interaksjoner som å sveipe, klikke og sveve.
Når du er ferdig, eksporterer du prototypene dine gjennom InVision og inviter folk til å samarbeide. Du kan se prosjektet ditt på den tiltenkte plattformen - en fin måte å utforske og teste designet ditt på. Kunder vil da kunne kommentere rett på designet.
På toppen av det kan du slutte å tenke på å lage mange tegnebrett for flere enheter - Studios layoutmotor vil automatisk justere designet ditt til hvilken som helst skjerm. Denne tidsbespareren gir deg plass til å tenke så mye mer på designet ditt.
02. Skisse
Bohemian Coding’s Sketch er en av de mest brukte webdesignplattformene; det er et meget kraftig vektorbasert verktøy for å bygge grensesnitt og prototyper på en samarbeidende måte. Sketch ble utviklet spesielt for å lage nettsteder og apper, så det er ingen unødvendige funksjoner som ruller grensesnittet ditt, og det er raskere og mer effektivt enn programvare som har et bredere omfang.
Rory Berry, kreativ direktør i Superrb, byttet til Sketch for noen år siden, og anbefaler det på det sterkeste. "Sammenlignet med Photoshop er det mye enklere å sortere alle dokumentene og gjøre endringer på Sketch," begynner han. “Skisse har små dokumenter, mens Photoshop har store. På grunn av at det er en vektorbasert app, er filstørrelsene dramatisk mindre sammenlignet med Photoshop. ”
Og det er ikke alt. “Det innebygde rutenettet i Sketch er flott og gjør grensesnittdesign mye enklere. Jeg tror det generelle brukergrensesnittet og den minimale følelsen gjør det mye renere å designe og brukervennlig. Photoshop virker veldig komplisert i sammenligning. ”
Fellesskapet tilbyr hundrevis av Sketch-plugins for å gjøre designarbeidsflyten enklere og jevnere.
Ulempen med Sketch er at den bare er tilgjengelig på Mac, og det er ingen planer om å støtte andre operativsystemer. Dette har vært et problem, da designere ofte vil dele .sketch-filer med utviklere som bruker Windows. Heldigvis er det nå et "Sketch for Windows" -applikasjon kalt Lunacy som vil åpne og redigere .sketch-filer og eliminere det meste av denne smerten - les om den i Eksport og konvertering delen av denne artikkelen.
Ikke gå glipp av våre beste tips for bruk av Sketch.
03. Adobe XD
Adobe XD tilbyr det beste miljøet for digitale prosjekter under Adobe Creative Cloud-pakken. Hvis du er en ivrig Adobe-bruker og ny i XD, vil du kanskje ikke synes grensesnittet er veldig 'Adobe'-aktig til å begynne med. Imidlertid stabler det opp til de andre ledende verktøyene der ute. Det er et hopp hvis du også har designet i Photoshop, men veldig verdt det for UI-design.
Dette vektordesign- og wireframing-verktøyet blir stadig bedre, med tillegg som støtte for auto-animasjon som sikrer at verktøyet kan følge med på de nyeste trendene innen UX. XD inkluderer tegneverktøy, verktøy som lar deg definere ikke-statiske interaksjoner, forhåndsvisning av mobil og skrivebord og delingsverktøy for å gi tilbakemelding på design. Den lar deg velge en enhetsspesifikk tegnebrettstørrelse for å starte et prosjekt, og du kan til og med importere populære UI-sett, for eksempel Googles Material Design.
Avgjørende er at Adobe XD integreres med resten av Creative Cloud, noe som betyr at du enkelt kan importere og jobbe med eiendeler fra Photoshop eller Illustrator. Hvis du allerede bruker andre Adobe-apper, vil brukergrensesnittet føles hyggelig og kjent og bør ikke presentere for mye av en læringskurve.
Andrei Robu, designdirektør ved Robu Studio i Barcelona, er blant fansen. "For raske modeller er det flott," sier han. "Det er et veldig lett grensesnitt, med mange bilder lastet inn, og flott for moodboards. Prototypingen er veldig nyttig for å vise klienter hvordan ting fungerer, spesielt fordi du kan skyve innholdet på nettet med en gang. "
Ellis Rogers, grafisk designer i Receptional Ltd, anbefaler det også. "Når design / prototype eller wireframe er fullført, tillater Adobe XD deg å raskt velge elementer og lage sideoverganger for en fungerende prototype, som kan deles via en lenke," forklarer han. "Koblingen lar deg også samle tilbakemeldinger per side og holde det hele organisert. Koblingen kan oppdateres i Adobe XD slik at klienten alltid kan se den nyeste versjonen uten å måtte bekymre seg for feil versjoner. Det er en absolutt glede å jobbe med. "
04. Marvel
Marvel er et annet webdesignverktøy som er flott for å produsere raske ideer, foredle et grensesnitt for hvordan du vil se det ut og bygge prototyper. Marvel tilbyr en veldig fin måte å bygge sider på, slik at du kan simulere designet ditt gjennom en prototype. Det er noen fantastiske integrasjoner for å sette inn designene dine i prosjektarbeidsflyten. Interessant er det en integrert brukertestfunksjon, som fremdeles er ganske uvanlig i webdesignverktøybildet. Det hele er også på nettet, så du trenger ikke laste ned noe.
05. Figma
Det neste webdesignverktøyet i listen vår er UXPin. Denne dedikerte prototyping-appen er tilgjengelig for Mac, Windows eller i nettleseren. Med de fleste andre designverktøy kan du bare etterligne interaksjoner ved å koble forskjellige elementer på tavlen, UXPin kommer nærmere koden og lar deg jobbe med interaktive tilstander, logikk og kodekomponenter.
Det er integrerte elementbiblioteker for iOS, Material Design og Bootstrap, pluss hundrevis av gratis ikonsett, for å hjelpe deg på veien. UXPin har også tilgjengelighetsfunksjoner for å sikre at designene dine holder seg i tråd med WCAG-standardene, som vi applauderer.
Du kan lage din første prototype i UXPin gratis, og hvis det passer, bytter du til et betalt månedlig abonnement (teammedlemskap er tilgjengelig). UXPin har også god integrasjon med Sketch, så det kan være en å introdusere i arbeidsflyten din hvis du er en Sketch-fan som synes prototypingegenskapene er begrensende.
08. Proto.io
Axure har alltid vært et av de beste wireframing-verktøyene på markedet, flott for komplekse prosjekter som krever dynamiske data. Med Axure kan du virkelig fokusere på å spotte opp prosjekter som både er tekniske og krever nøkkeloppmerksomhet på struktur og data.
Axures avleveringsprosess inkluderer oppretting av grundige spesifikasjoner som hjelper utviklere å lage et sluttprodukt som samsvarer med designene dine.
15. Justinmind
Justinmind vil hjelpe med prototyping, og integreres med andre verktøy som Sketch og Photoshop. Du kan velge samspill og bevegelser for å hjelpe til med å montere prototypen din. Den inneholder også UI-sett, slik at du kan sette sammen skjermer raskt, og det er også responsivt.
16. Væske
Fluid er et enkelt og intuitivt verktøy for å bygge raske prototyper og utvikle design. Den har noen fine eiendeler utenom boksen for å få deg i gang med raske prototyper. Når du har oppgradert, er det veldig enkelt å sette sammen dine egne symboler med dine egne foretrukne UI-eiendeler. Dette verktøyet tilbyr veldig rask UI-design, med eiendeler tilgjengelig for både prototyper med høy og lav kvalitet.
17. Framer
Framer er et prototypesystem som forbedrer kommunikasjonen og samarbeidet på teamet ditt, spesielt mellom designere og utviklere. Den er bygget med tanke på designsystemer, og integreres med koden din for å generere dokumentasjon som er enkel å følge og oppdateres automatisk. Å holde alle på samme side og oppdatert er en kjernefunksjon - så når koden din oppdateres, blir også designen din.
Design rammer og biblioteker
18. Bootstrap
Bootstrap er absolutt ikke et nytt verktøy, men det har revolusjonert utviklingen og fortsetter å forme hvordan vi bygger ting på nettet. Funksjoner å se etter inkluderer responsive beholdere som er flytende opp til et bestemt brytpunkt, og responsive .row-cols-klasser for å spesifisere antall kolonner på tvers av brytepunktene effektivt.
Bootstrap har også sitt eget ikon med åpen kildekode, Bootstrap Icons, som er designet for å fungere med Bootstrap-komponenter.
Finn de beste gratis Bootstrap-temaene i vår guide.
19. Oppstart 4
Hvis du liker Bootstrap, men ikke vil dykke ned i det rå, er Startup 4 den enkle måten; det er en online-app med innebygde maler og temaer for å bygge nettsteder basert på Bootstrap 4 med et 12-kolonne rutenett. Du kan bygge nettstedet ditt uten å skrive kode ved hjelp av dra-og-slipp-grensesnittet, men du trenger litt kunnskap om HTML og CSS for å fullføre ting.
20. Vue.js
Vue.js er et rammeverk for å bygge brukergrensesnitt, og bruker en virtuell DOM. Som navnet antyder, er Vue kjernebibliotek fokusert på visningslaget.
Se på et kodeeksempel, hentet fra Vue's dokumenter, som bruker brukerinngang og demonstrerer bibliotekets eleganse. Vi begynner med HTML:
div id = "example"> p> {{message}} / p> button v-on: click = "reverseMessage"> Reverse Message / button> / div>
Legg merke til den tilpassede v-on-håndtereren som kaller reversMessage metode.Her er JavaScript:
var myApp = ny Vue ({el: '#eksempel', data: {melding: 'Hei Vue.js!'}, metoder: {reverseMessage: function () {this.message = this.message.split ('')) . revers (). bli med ('')}}});
Dette eksemplet fylte avsnittet med data og definerer reversMessage metode. Vue er flott for de som er mindre erfarne med komplekse biblioteker, men har også en rekke plugins for å hjelpe deg med utvikling av komplekse enkeltsidige webapper.
21. Mønsterlaboratorium
Pattern Lab er et vakkert mønsterdrevet designverktøy laget av Dave OIsen og Brad Frost. Den er basert på konseptet Atomic Design, som sier at du bør dele designen din opp i de minste delene - atomer - og kombinere dem for å danne større, gjenbrukbare komponenter - molekyler og organismer - som deretter kan gjøres om til brukbare maler.
Selv om det i sin kjerne er en statisk stedgenerator som syr sammen UI-komponenter, er det mye mer til Pattern Lab enn det. Det er språk-og verktøy-agnostisk; den lar deg hekke UI-mønstre inne i hverandre og designe med dynamiske data; den har enhetsagnostiske verktøy for visningsendring av størrelse for å hjelpe deg med å sikre at designsystemet ditt er fullt responsivt; og den er fullt utvidbar, slik at du kan være sikker på at den utvides for å dekke dine behov.
22. Materiell design
Materialdesign er et visuelt språk fra Google som tar sikte på å kombinere de klassiske prinsippene for god design med innovasjoner innen teknologi og vitenskap for å skape et sammenhengende og fleksibelt fundament for nettstedet ditt.
Nettsteder og apper opprettet ved hjelp av Material Design-rammeverket vil se moderne ut og være kjent for brukeren, slik at folk vil finne det enkelt å bruke produktet med en gang. Det er mange verktøy tilgjengelig for å hjelpe med dette designsystemet; klikk Ressurser på navlinjen for å finne dem.
Neste side: Spesialiserte webdesignverktøy for å løse ethvert problem
