• Vigtigste / Andet

52 webdesignværktøjer, der hjælper dig med at arbejde smartere i 2021

Side 1 af 2: Side 1

• Side 1
• Side 2

HOP TIL:

• Komplette designværktøjer
• Mockups og prototyper
• Design rammer og biblioteker

Der er så mange gode webdesignværktøjer omkring disse dage. Uanset hvilket problem du prøver at løse i dit workflow for webdesign, er det sandsynligt, at nogen har lavet et værktøj til det, uanset om det er et enkeltstående værktøj eller en funktion i en større app. Og selvom webdesignmiljøet har ændret sig meget siden de tidlige dage, er der stadig en ånd at dele dit arbejde, så mange af disse fantastiske værktøjer er gratis.

Spredningen af ​​værktøjer er en stor velsignelse, men det kan også lade dig føle dig forkælet for valg, da der er så mange måder at gøre det samme på. I denne artikel har vi samlet, hvad vi synes er de bedste værktøjer lige nu. Selvfølgelig er det ikke en udtømmende liste, men forhåbentlig ved at indsnævre den og fremhæve nogle af de allerbedste, vil vi gøre det lettere for dig at sammensætte det rigtige værktøjssæt til din arbejdsgang.

Da dette er en ganske lang liste, har vi arrangeret værktøjerne i sektioner for at gøre artiklen lettere at navigere. På denne side finder du komplet webdesignsoftware efterfulgt af mere grundlæggende dedikerede wireframing-værktøjer og webdesignrammer og biblioteker. På side to er der en række mindre, mere specialiserede værktøjer til alt fra at arbejde med billeder til dabbling i AR og VR.

Mens du er her, vil du måske tjekke rundups af bedste webhostingtjenester og bedste hjemmesidebygere for 2020

Komplette designværktøjer

01. InVision Studio

InVision Studio sigter mod at dække alle baser og være det eneste UI-værktøj, du har brug for. Den leveres med en bucketload af funktioner, der hjælper dig med at skabe smukke interaktive grænseflader, herunder værktøjer til hurtig prototyping, responsivt og samarbejdsdesign og arbejde med designsystemer.

Hvis du allerede bruger InVision med værktøjer som Sketch, er der en del crossover i funktioner. Imidlertid ligger Studios magt i prototypeafdelingen, især hvis dit design involverer animation. Hurtig prototyping giver dig mulighed for at skabe komplekse og fantasifulde overgange, så du virkelig kan nå det animationsniveau, du ønsker. Find ud af, hvordan du vil have din brugergrænseflade til at se i starten af ​​overgangen, og design derefter slutresultatet. InVision Studio fungerer resten for dig.

Oven i det kan du oprette disse brugerdefinerede animationer og overgange fra en række bevægelser og interaktioner som at skubbe, klikke og svæve.

Når du er færdig, skal du eksportere dine prototyper gennem InVision og invitere folk til at samarbejde. Du kan se dit projekt på den tiltænkte platform - en fantastisk måde at udforske og teste dit design på. Kunderne kan derefter kommentere designet direkte.

På toppen af ​​det kan du stoppe med at tænke på at oprette adskillige tegnebrætter til flere enheder - Studios layoutmotor justerer automatisk dit design til enhver skærm. Denne tidsbesparende giver dig plads til at tænke så meget mere over dit design.

02. Skitse

Boheme kodning Skitse er en af ​​de mest udbredte webdesignplatforme; Det er et meget kraftigt vektorbaseret værktøj til at opbygge grænseflader og prototyper på en samarbejdsvillig måde. Sketch blev bygget specielt til at oprette websteder og apps, så der er ingen unødvendige funktioner, der rodede din grænseflade, og det er hurtigere og mere effektiv end software, der har et bredere anvendelsesområde.

Rory Berry, kreativ direktør hos Superrb , skiftede til Sketch i 2017 og anbefaler det stærkt. ”Sammenlignet med Photoshop er det meget lettere at sortere alle dine dokumenter og foretage ændringer på Sketch,” begynder han. ”Skitse har små dokumenter, mens Photoshop har store. På grund af at det er en vektorbaseret app, er filstørrelserne dramatisk mindre sammenlignet med Photoshop. ”

Og det er ikke alt. ”Det indbyggede netsystem i Sketch er fantastisk og gør interface design meget lettere. Jeg tror, ​​at den samlede brugergrænseflade og den minimale fornemmelse gør det meget renere at designe og brugervenligt. Photoshop virker meget kompliceret i sammenligning. ”

Samfundet tilbyder hundredvis af Skitse-plugins for at gøre dit design-workflow nemmere og glattere.

Ulempen ved Sketch er, at den kun er tilgængelig på Mac, og der er ingen planer om at understøtte andre operativsystemer. Dette har været et problem, da designere ofte vil dele .sketch-filer med udviklere ved hjælp af Windows. Heldigvis er der nu en 'Sketch for Windows' applikation kaldet Ensomhed der åbner og redigerer .sketch-filer og fjerner det meste af denne smerte - læs om det i Eksport og konvertering afsnit i denne artikel.

Gå ikke glip af vores de bedste tip til brug af Sketch .

03. Adobe XD

Adobe XD tilbyder det bedste miljø til digitale projekter under Adobe Creative Cloud-pakken. Hvis du er en ivrig Adobe-bruger og ny i XD, finder du muligvis ikke grænsefladen meget 'Adobe'-lignende til at begynde med. Det stabler dog op til de andre førende værktøjer derude. Det er et spring, hvis du også har designet i Photoshop i et stykke tid, men meget værd for UI-design.

Dette vektordesign- og wireframing-værktøj bliver bedre, med tilføjelser som support til stemme prototyping sikre, at værktøjet kan følge med i de nyeste trends inden for UX. XD inkluderer tegneværktøjer, værktøjer, der giver dig mulighed for at definere ikke-statiske interaktioner, forhåndsvisning af mobil og desktop og delingsværktøjer til feedback på design. Det giver dig mulighed for at vælge en enhedsspecifik tegnbordsstørrelse til start af et projekt, og du kan endda importere et populært brugergrænsefladesæt, for eksempel Googles Material Design.

Det er afgørende, at Adobe XD integreres med resten af ​​Creative Cloud, hvilket betyder, at du nemt kan importere og arbejde med aktiver fra Photoshop eller Illustrator. Hvis du allerede bruger andre Adobe-apps, vil brugergrænsefladen føles pæn og velkendt og bør ikke præsentere for meget af en indlæringskurve.

Andrei Robu , designchef hos Robu Studio i Barcelona, ​​er blandt sine fans. 'For hurtige mockups er det fantastisk,' siger han. 'Det er en meget let grænseflade med mange fotos indlæst og fantastisk til moodboards. Prototypen er meget nyttig til at vise klienter, hvordan ting fungerer, især fordi du kan skubbe indholdet online med det samme. '

Ellis Rogers, grafisk designer hos Receptional Ltd. anbefaler det også. 'Når design / prototype eller wireframe er færdig, giver Adobe XD dig mulighed for meget hurtigt at vælge elementer og oprette sideovergange til en fungerende prototype, som kan deles via et link,' forklarer han. 'Linket giver dig også mulighed for at samle feedback pr. Side og holde det hele organiseret. Linket kan opdateres i Adobe XD, så klienten altid kan se den nyeste version uden at skulle bekymre sig om forkerte versioner. Det er en absolut glæde at arbejde med. '

04. Marvel

Marvel er et andet webdesignværktøj, der er fantastisk til at producere hurtige ideer, forfine en grænseflade til, hvordan du vil have den til at se ud, og opbygge prototyper. Marvel tilbyder en rigtig pæn måde at opbygge sider på, så du kan simulere dit design gennem en prototype. Der er nogle vidunderlige integrationer til at indsætte dine designs i din projektworkflow. Interessant er der en integreret brugertestefunktion, som stadig er ret usædvanlig i webdesignværktøjslandskabet. Det hele er også online, så det er ikke nødvendigt at downloade noget.

05. Figma

Figma er et interface designværktøj, der gør det muligt for flere designere at samarbejde i realtid. Dette er meget effektivt, når du har flere interessenter i projektet, der er involveret i udformningen af ​​resultatet. Den er tilgængelig i browseren eller på Windows, Mac eller Linux, og der er både gratis og betalte versioner afhængigt af hvad du bruger den til.

Her er nogle af dens fremragende funktioner:

'Figma har en lignende USP som Sketch, med undtagelse af at være platformoverskridende,' forklarer frontenddesigner Benjamin Læs . ”Da jeg brugte det til at oprette et par ikoner, fandt jeg arbejdsgangen utrolig glat. Det tog mig ikke tid at lære og havde den ekstra fordel ved at være samarbejdsvillig: du kan dele grafik med andre i appen. '

'Jeg har forsøgt at skifte til Linux til mit arbejde, og nogle gange bruger vi Windows, så Figma giver mening for mig fra et praktisk synspunkt,' tilføjer han.

Freelance indholdsforfatter og kunstværker David Eastwood har også gode ting at sige om Figma. 'Det har også været et virkelig nyttigt værktøj, når vi har haft brug for hurtigt at spotte MVT'er; undertiden små tilføjelser til et eksisterende layout. Vi elsker, at du hurtigt kan oprette design til desktop, tablet og mobil. '

06. Affinitetsdesigner

'Serifs Affinitetsdesigner er blevet kaldt 'Photoshop-morderen' af nogle, og det er let at se hvorfor, 'siger produktdesigner Og Edwards . 'Der var et par funktioner, som jeg virkelig nød, inklusive justerbare, ikke-destruktive lag. Dette betyder i det væsentlige, at du kan justere billeder eller vektorer uden at beskadige dem.

'Zoom på 1.000.000 procent var bare lyksalighed; det er især nyttigt, når du arbejder med vektorkunst, da du virkelig kan komme tæt på. Fortrydelses- og historikfunktionerne er også virkelig praktiske: Affinity giver dig mulighed for at gå tilbage over 8.000 trin! '

”Når det kommer til design, føles brugergrænsefladen fortrolig. Når man flytter fra Photoshop, ser det ud til, at alle vil starte forfra, hvilket kan udgøre en reel udfordring. Hvad Affinity har gjort er at holde layoutet bekendt, mens du strammer alt op og skjuler distraktioner. Jeg var let i stand til at springe lige ind og komme til at designe. '

Affinity Designer er også tilgængelig til iPad . Og bemærk, at dette ikke er den nedskalerede version af mobilapp, du kan forvente: det er den samme fulde version, du får på skrivebordet.

Gå ikke glip af vores guider til brug af Pixel person , det Eksport person og Penværktøj i Affinity Designer. Bemærk også, at Serif også gør et Photoshop-alternativ, Affinitetsfoto og et InDesign-alternativ, Affinitetsudgiver ; som alle spiller pænt sammen.

Mockups og prototyper

07. UXPin

Det næste webdesignværktøj på vores liste er UXPin. Denne dedikerede prototypeapp er tilgængelig til Mac, Windows eller i browseren. Med de fleste andre designværktøjer kan du kun efterligne interaktioner ved at linke forskellige elementer på dit tegnebræt, UXPin kommer tættere på koden og giver dig mulighed for at arbejde med interaktive tilstande, logik og kodekomponenter.

Der er integrerede elementbiblioteker til iOS, Material Design og Bootstrap plus hundreder af gratis ikon sæt , for at hjælpe dig på din vej. UXPin har også for nylig introduceret tilgængelighedsfunktioner for at sikre, at dit design holder sig i overensstemmelse med WCAG-standarder, hvilket vi bifalder.

API Request er den seneste tilføjelse til UXPins interaktionsfunktioner. Funktionen giver dig mulighed for at prototype app, der 'taler' til dine produkter direkte fra dit designværktøj - uden behov for kode. Det fungerer ved at give dig mulighed for at sende HTTP-anmodninger til en ekstern API.

Du kan oprette din første prototype i UXPin gratis, og hvis det passer, skift til et betalt månedligt abonnement (teammedlemskaber er tilgængelige). UXPin forbedrede for nylig sin integration med Sketch, så det kunne være en at introducere i din arbejdsgang, hvis du er en Sketch-fan, der finder sine prototypefunktioner begrænsende.

08. Proto.io

Proto.io er en top applikation, der giver mulighed for oprettelse af naturtro prototyper, der begynder med grove ideer og slutter med fuldt udbyggede designs. Værktøjet giver dig også en række muligheder for dine projekter, herunder detaljerede og brugerdefinerede vektoranimationer.

Du kan starte med at udvikle indledende ideer med en håndtegnet stil, arbejde dem i trådrammer og afslutte dem med en high-fidelity-prototype. Sketch og Photoshop-plugins hjælper, hvis du vil designe ved hjælp af andre værktøjer, men Proto.io håndterer end-to-end designprocessen godt. Andre funktioner - f.eks. Brugertest - hjælper med at validere dine designs. Dette er en alt-i-en løsning med et stort antal pålidelige mærker, der allerede bruger den.

Der er en masse gode demoer at begynde at lege med, og du kan virkelig se, hvor let denne ende-til-ende-løsning kan erstatte et antal værktøjer, der aktuelt er på plads. Forholdsvis nylige tilføjelser, Proto.io har for nylig inkluderet en udstrækning af nye funktioner - herunder aktivforvaltere, udviklervejledninger og muligheden for at optage din prototype - bringe dette værktøj i tråd med mange af de bedre prototypeværktøjer.

09. Balsamiq

Hvis hurtig, effektiv wireframing er det, du leder efter Balsamiq er et stærkt forslag. Du kan hurtigt udvikle en struktur og layout til dine projekter. Træk og slip-elementer gør livet lettere, og du kan linke knapper til andre sider. Ved wireframing kan du hurtigt begynde at planlægge dine grænseflader og dele dem med dit team eller dine kunder. Balsamiq har været i gang siden 2008 og er stolt af sin hurtige, hurtige, fokuserede no-nonsense tilgang.

10. ProtoPie

Webdesign værktøj Protopic giver dig mulighed for at oprette komplekse interaktioner og komme tæt på dit designs ideelle slutfunktion. Måske er standout-funktionen evnen til at kontrollere sensorer på smarte enheder i din prototype, såsom tilt-, lyd-, kompas- og 3D Touch-sensorer. Afhængigt af dit projekt er dette et godt værktøj for dem, der ønsker at omfatte native app-funktioner. Det er let som kage, og der kræves ingen kode.

Nyligt udgivet version 4.2 indeholder to nye meget efterspurgte funktioner: Nu kan du tilføje redigerbare SVG'er til dine scener og finde afstanden mellem to lag med det samme efter valg.

11. MockFlow

MockFlow er en række applikationer til wireframing og planlægning af websteder. WireframePro hjælper dig med at fastlægge din oprindelige idé og derefter gentage, indtil den er helt rigtig - der er en UI-revisionssporing, der hjælper dig med dette. Den leveres med tusindvis af forudbyggede komponenter og layouts, som du kan justere for at imødekomme dine krav, og der er en forhåndsvisningstilstand til præsentation af dit arbejde for kolleger og kunder.

Når du har lavet dine wireframes, kan resten af ​​pakken hjælpe dig med andre aspekter af planlægningen af ​​dit websted, herunder informationsarkitektur, oprette en stilguide (dette kan genereres automatisk) og arbejde gennem en aflogningsproces.

Hvis du gerne vil se nogle andre muligheder, kan du se vores top-top-top wireframe-værktøjer .

12. Adobe Comp

Adobe Comp er et fantastisk webdesignværktøj til iPad, der hjælper med oprettelsen af ​​trådrammer, prototyper og layoutkoncepter til websider. En Creative Cloud-drevet intelligent skitseplade, hvis du vil. Det har grundlæggende skabeloner til en række layouts til mobil og internet og endda udskrive, hvis det er dine ting, og du kan oprette hurtige pladsholdere ved at tegne intuitive figurer til at repræsentere billeder, tekst og mere. Comp konverterer ru konturer til lige linjer, cirkler og rektangler.

Forfærdeligt har Adobe ikke set det passende at inkludere direkte eksport til XD - skør! - på trods af en langvarig anmodning der har været under gennemgang for hvad der ser ud for evigt. Eksport til Photoshop er dog indbygget (sammen med Illustrator og InDesign), og når tweaks til din mockup foretages i den allestedsnærværende billededitor, kan du derefter eksportere derfra til XD. På trods af dette uvelkomne ekstra trin i Adobe devotee wireframer's brugerrejse fortjener Comp fuldt ud sin optagelse på denne liste med sine muligheder overalt, brugervenlighed og imponerende brugergrænseflade.

13. Flinto

Flinto er et designværktøj, der giver dig mulighed for at skabe unikke interaktioner inden for dine designs. Du kan bruge et antal bevægelser og foretage lette overgange ved at designe de før og efter tilstande. Flinto simpelthen udregner forskellene og animerer for dig - super nyttigt.

Husk, at dette kun er iOS, men det vil føle sig bekendt, når du begynder at bruge det. Der er dokumentation online, der hjælper dig på din vej, og import fra Sketch og Figma er også ligetil.

14. Aksel

Axure har altid været et af de bedste wireframing-værktøjer på markedet, fantastisk til komplekse projekter, der kræver dynamiske data. Med Axure kan du virkelig fokusere på at spotte projekter, der både er tekniske og kræver nøgle opmærksomhed på struktur og data.

Axures afleveringsproces inkluderer oprettelse af grundige specifikationer, der hjælper udviklere med at skabe et slutprodukt, der matcher dine designs.

15. Justinmind

Justinmind vil hjælpe med prototyping og integreres med andre værktøjer som Sketch og Photoshop. Du kan vælge dine interaktioner og bevægelser for at hjælpe med at samle din prototype. Det indeholder også UI-sæt, så du hurtigt kan sammensætte skærme, og det er også lydhørt.

16. Væske

Væske er et simpelt og intuitivt værktøj til at opbygge hurtige prototyper og oparbejde design. Det pakker nogle gode out-of-the-box aktiver for at komme i gang med hurtige prototyper. Når du først har opgraderet, er det virkelig nemt at samle dine egne symboler med dine egne foretrukne UI-aktiver. Dette værktøj tilbyder meget hurtigt UI-design med aktiver tilgængelige til både prototyper med høj og lav kvalitet.

17. Samspil

Samspil er et prototypesystem, der forbedrer kommunikation og samarbejde på dit team, især mellem designere og udviklere. Den er bygget med designsystemer i tankerne og integreres med din kode for at generere dokumentation, der er let at følge og opdateres automatisk. At holde alle på samme side og opdateret er en kernefunktion - så når din kode opdateres, gør dit design det også. Interplay er stadig i beta, men fungerer allerede med et antal af de store design- og udviklingsværktøjer.

Design rammer og biblioteker

18. Bootstrap

Bootstrap er bestemt ikke et nyt værktøj, men det har revolutioneret udviklingen og fortsætter med at forme, hvordan vi bygger ting på nettet.

I skrivende stund introducerede den nyeste version (4.4.1, der blev lanceret i november 2019) nye responsive containere, der er flydende op til et bestemt brudpunkt, og nye responsive .row-cols-klasser til at specificere antallet af kolonner på tværs af breakpoints effektivt.

Bootstrap har også for nylig lanceret sit eget open source ikonbibliotek, Bootstrap-ikoner , der er designet til at arbejde med Bootstrap-komponenter.

Find bedste gratis Bootstrap-temaer i vores guide .

19. Opstart 3

Hvis du kan lide Bootstrap, men ikke vil dykke ned i den rå ting, er Startup 3 den nemme måde; det er en online-app med indbyggede skabeloner og temaer til opbygning af websteder baseret på Bootstrap 4 med et 12-søjles gitter. Du kan opbygge dit websted uden at skrive kode ved hjælp af træk-og-slip-grænsefladen, men du har brug for noget kendskab til HTML og CSS for at afslutte tingene.

20. Vue.js

Vue.js er en ramme til opbygning af brugergrænseflader og bruger en virtuel DOM. Som navnet antyder, er Vue's kernebibliotek fokuseret på visningslaget.

Se på et kodeeksempel taget fra Vue's docs, der bruger brugerinput og demonstrerer bibliotekets elegance. Vi starter med HTML:

{{ message }}

Reverse Message

Bemærk den brugerdefinerede v-on-handler, der kalder reverseMessage metode. Her er JavaScript:

var myApp = new Vue({ el: '#example', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split(''). reverse().join('') } } });

Dette eksempel udfyldte afsnittet med data og definerer reverseMessage metode. Vue er fantastisk til dem, der er mindre erfarne med komplekse biblioteker, men har også et antal plugins til at hjælpe med udvikling af komplekse websider med en enkelt side.

21. Mønsterlaboratorium

Pattern Lab er et smukt mønsterdrevet designværktøj oprettet af Dave OIsen og Brad Frost. Det er baseret på begrebet Atomic Design , der siger, at du skal nedbryde dit design i dets mindste dele - atomer - og kombinere dem til at danne større, genanvendelige komponenter - molekyler og organismer - der derefter kan omdannes til brugbare skabeloner.

Selvom det i kernen er en statisk generator, der syr sammen UI-komponenter, er der meget mere at gøre Mønster Lab end det. Det er sprog-og værktøjs-agnostisk; det giver dig mulighed for at rede UI-mønstre inde i hinanden og designe med dynamiske data; den indeholder enhedsagnostisk visningsændringsværktøj til at hjælpe dig med at sikre, at dit designsystem er fuldt responsivt; og den er fuldt udvidelig, så du kan være sikker på, at den udvides for at imødekomme dine behov.

22. Materielt design

Materielt design er et visuelt sprog fra Google, der sigter mod at kombinere de klassiske principper for godt design med innovationer inden for teknologi og videnskab for at skabe et sammenhængende og fleksibelt fundament for dit websted.

Hjemmesider og apps, der er oprettet ved hjælp af Material Design-rammen, vil se moderne ud og være fortrolige for brugeren, så folk finder det nemt at bruge dit produkt med det samme. Der er mange værktøjer til rådighed til at hjælpe med dette designsystem; klik på Ressourcer på navigationslinjen for at finde dem.

Deltag i april 2020 med vores række af JavaScript-superstjerner på GenerateJS - konferencen, der hjælper dig med at oprette bedre JavaScript. Book nu på generateconf.com

Næste side: Specialiserede webdesignværktøjer til løsning af ethvert problem

• 1
• to

Nuværende side: Side 1

Næste side Side 2