Share
Nettleserbaserte applikasjoner blir stadig mer utbredte, og deres brukbarhet for bruk i webdesign øker jevnt. Sikker på at de kanskje ikke har den fulle grunnen til skrivebordsbaserte applikasjoner, men de kan fortsatt være svært kraftige uavhengig, og de kommer med fordeler du vanligvis ikke finner i vanlig programvare.
For det første er nettleserbaserte applikasjoner kryssplattformskompatible. Det spiller ingen rolle om ditt foretrukne stasjonære OS er Linux, MacOS, Windows eller ChromeOS, så lenge det har en nettleser du er god til å gå. Avhengig av programmene kan du kanskje finne at du kan bruke dem til å få ekstra arbeid på en iOS- eller Android-nettbrett.
For det andre har du muligheten til å få tilgang til programmene hvor som helst, med null installasjon eller administrasjon. Spinn opp favorittprogramvaren din på en datamaskin du vanligvis ikke bruker. Og trenger aldri å bekymre deg for å håndtere oppdateringer igjen.
I denne artikkelen vil vi sjekke ut tilstanden til nettleserbaserte applikasjoner i 2018. Vi ser på fire sentrale områder som er viktige for webdesignere:
La oss gå!
Selv den beste vektoren og UI-designprogramvaren på skrivebordet kan være ressursintensiv. Som sådan er det ganske bemerkelsesverdig hvor sterk nettleserappene i denne kategorien er akkurat nå. Det er en ting å lage programmer som sammenligner med lette oppgaver, men å lage profesjonell karakter grafisk design programvare i nettleseren er ganske annet. Og likevel synes flere utviklere å ha oppnådd denne prestasjonen.
Følgende fire er mine nåværende toppvalg for vektor- og UI-designprogrammer i nettleseren:
Figma er et program som faller helt i nettdesignerens hjulhus. Selv om det er i stand til å gjøre alle typer vektorarbeid og er et kraftig grafisk designprogram generelt, er det spesielt godt egnet for grensesnittdesign for nettsteder og webbaserte apper.
En av de utfordrende funksjonene det tilbyr for webdesignere er muligheten til å lage flere individuelle "rammer", som kan brukes på lignende måte som tavle. For eksempel kan du opprette en ramme for å representere hver side i et nettsteddesign.
Hvor det blir interessant er at et hvilket som helst element i en ramme, for eksempel en "kontakt" -knapp, kan kobles til en annen ramme, for eksempel en som viser en kontaktside. Dette gjøres ved å dra en tilkoblingslinje ut fra knappen til målrammen, som omdanner knappen til en "hotspot". I presentasjonsmodus, hvis hotspotet klikkes, vil det laste opp rammen det er koblet til, noe som gjør denne funksjonen stor for å simulere bevegelsesflyten fra en del av et webgrensesnitt til en annen.
Når designfasen er ferdig, gjør Figma det enkelt å ta tak i den informasjonen som kreves for koding, for eksempel dimensjoner, stillinger, skriftinnstillinger, heksekoder og så videre. Det kan også generere kopi og lim klare CSS du kan koble rett inn i koden din. Og når det er behov for bildegenskaper, kan de eksporteres på samme måte eller på samme måte som nødvendig.
Hvis din primære oppgave i en nettleserbasert vektorapp skal utforme brukergrensesnitt på nettet, er Figma et ganske vanskelig alternativ å gå forbi.
Gravit Designer er en seriøs utfordrer i vektorglasset som en allround, multi-purpose grafisk design applikasjon. Det er helt levedyktig å bruke på profesjonelt nivå, noe som gjøres mer bemerkelsesverdig av det faktum at Gravit er helt, hundre prosent, gratis. Det er ingen kjøp avgifter, abonnement avgifter eller annonsering. Bare åpne appen og designe vekk.
Programvaren inneholder robuste vektorfunksjoner, for eksempel en klassisk stilpenn, det superhendige Bezigon-verktøyet, og gode Freehand og Shading-verktøy. Det gir muligheten til å ha et uendelig lerret, og det har en lang liste over dimensjonsforhåndsinnstillinger, slik at du kan bytte fra "Nettsted - Stor" størrelse til "iPhone X" -størrelse med et klikk-knapp.
Systemet "Sider" gir deg en artboard-type måte å organisere dokumenter på, og ankre- og symbolssystemene kombinert gir deg mulighet til å skape gjenbrukbare eiendeler som oppfører seg semi-responsivt når de plasseres på sider av forskjellige størrelser.
En av mine favoritt Gravit-funksjoner er det utrolig fleksible systemet med flere fyll, grenser og effekter. En enkelt gjenstand kan ha et hvilket som helst antall fyll, grenser og effekter, hver med sine egne blandemoduser og opasitetsinnstillinger, slik at du kan lage svært interessante designstiler.
Gravit blir raskt forbedret, med utviklingslaget legge til svært nyttige funksjoner med hyppige intervaller. Den siste store oppdateringen la til symboler og forbedrede ankre. Den som før lagde til skylagring, Sketch import og plugin støtter. Gravit beveger seg raskt og forbedrer ofte.
Hvis du leter etter en godt avrundet applikasjon der du kan gjøre omtrent alt du trenger med vektorer, vil Gravit mest sannsynlig skrape det kløe.
Vectr er en lettere applikasjon enn Gravit eller Figma. Jeg vil beskrive denne appen som en å bruke når du vil komme inn og ut raskt, og uten en bratt læringskurve. Vectrs verktøy og grensesnitt er minimalistiske og intuitive, og den utmerkede serien interaktive opplæringsprogrammer du blir møtt med ved første lansering, gjør programvaren mye raskere å hente.
En av Vectrs mest interessante funksjoner er at det via et plugin kan brukes som en fullverdig grafikkredigerer innenfor et WordPress-administrasjonsområde, noe som kan være veldig praktisk..
Hvis du ikke vil ha mye oppstyr, men du vil ha et greit sett med robuste verktøy, kan Vectr være søknaden for deg.
BoxySVG, som navnet antyder, handler om SVG. Hvis du spesifikt setter inn for å designe vektorgrafikk på nettet, er dette programmet spesialisert for det samme. BoxySVG forsøker ikke å bekymre seg med grafikk eller grensesnittdesign, eller noe annet som kan distrahere fra at det er et flott SVG-designprogram.
Den inneholder SVG-spesifikke funksjoner som å kunne kontrollere visningsboksinnstillinger, justering av objekter i forhold til visningsboksen og preserveAspectRatio innstilling-ingen grunn til å grave inn koden til SVG-ene etter eksport. Og selvfølgelig, fordi du designer i nettleseren, ser du dine SVGer akkurat som de vises når de distribueres til nettet.
Hvis SVG er ditt spill, spesielt for web, må du se hva BoxySVG har å tilby.
Wireframing er en kategori hvor det nåværende nettleserbaserte valget faktisk kan være sterkere enn desktop-tilbudene. Det kan bidra til at wireframing ikke er ressursintensiv, og at etterspørselen etter tilgjengelige wireframes online kan være sterk på grunn av det hyppige behovet for samarbeid under prosjektets planleggingsstadium.
Sjekk ut fire av de ledende nettleserbaserte wiretappene som er tilgjengelige akkurat nå, i ingen bestemt rekkefølge.
MockFlow er sannsynligvis til stor glede for mange webdesignere på grunn av at den har dra og slippe klare komponenter for Bootstrap, Material Design, Foundation, KendoUI og en rekke andre populære rammer. Som det fremgår av bildet ovenfor, er alle kjente rammekomponenter klare til bruk, noe som kan være utrolig nyttig for rask prototyper hvis favorittrammen din er i listen over MockFlow-inneslutninger.
Når du bruker MockFlow til å lage en wireframe for et rammebasert prosjekt, vil det se ut som det ferdige produktet til slutt vil, mens wireframe vil beholde kapasiteten til raske endringer og iterasjoner. Komponentstema er vanilje som standard, men hver komponent kan ha sin farge, størrelse, skrifter og så videre tilpasset etter behov.
For webdesign fokusert wireframing, spesielt hvis du bruker et rammeverk, har MockFlow mye å tilby.
Balsamiq er en skybasert wireframing applikasjon som er enkel og ganske intuitiv å bruke. Over toppen av skjermen er en visuell visning av komponenter som representerer ting som enheter, bilder, overskrifter, avsnitt, formelementer og så videre. Dra og slipp dem på skjermen for å danne din wireframe. Du kan også drille deg videre i underkategorier for å hjelpe deg med å finne komponentene du leter etter.
Stilene på komponentene er ganske statiske, og de fleste ser ut som håndtegnede gjenstander. Balsamiqs hjemmeside sier, "De ser ut som skisser med vilje! Det oppfordrer brainstorming ". Dette brainstorming fokuserer på samarbeidssystemene som tillater deling mellom lagmedlemmer, noe som gjør Balsamiq til å virke mest hjemme ganske tidlig i planleggingsprosessen til et prosjekt.
Hvis du har et betydelig team og trenger å ha ideer ut mellom flere mennesker før du senker tennene dine til et design, kan Balsamiq være appen for deg.
Mockingbird er noe som ligner på Balsamiq, fordi du blir presentert med et utvalg av standardiserte komponenter som er klare til å dra og slippe inn i wireframe, for eksempel knapper, bilder, bannerannonser, overskrifter og så videre. Flere sider kan opprettes, og levende fungerende lenker kan tillate deg å navigere fra mockup til mockup når du teste ut brukergrensesnittet ditt eller vise teamet eller klientene dine rundt.
Samarbeid kan gjøres i sanntid; bare dele en kobling med kollegaen din eller kunden, og de vil kunne kommunisere endringer og forslag på stedet.
Hvis ditt fremste behov er effektiv kommunikasjon med folk som er utenfor området, ta en titt på Mockingbird.
Wireframe.cc er noe av et spartansk, minimalistisk wireframing-verktøy som ikke har klokkene og fløyene i våre andre tre applikasjoner. Men det er også den eneste som er helt gratis.
Komponenter du har tilgjengelig er i utgangspunktet bare rektangler med runde eller firkantede hjørner, ellipser og plassholdere for bilder og tekst. Du kan velge mellom fargene oransje, svart, hvitt og noen få nyanser av grå. I tillegg til disse funksjonene har du også noen verktøy for gruppering og justering, og muligheten til å legge til kommentarer.
Wireframe.cc er bevisst sparsom, og noen ganger når du trenger å få ideer raskt, er det akkurat det du trenger. Det er ingen lammelser ved analyse her, bare å komme rett ned til jobb.
Dagens WYSIWYG-redaktører fyller på noen måter den rollen som visuelle designprogrammer som Dreamweaver og Frontpage pleide å, men på mange andre måter har de kommet langt utover sine forgjengere. De kan fortsatt hjelpe nye webdesignere å lære tauene, men de kan også være massive tidsbesparende i avanserte prosjekter når de brukes av erfarne hender.
La oss ta en nærmere titt på to av de mest populære nettbaserte WYSIWYG webdesign applikasjonene.
Webflow gjør en god jobb med å være nyttig for både erfarne webdesignere og nybegynnere. Dette skyldes det faktum at mens alt kan gjøres visuelt, jobber du fremdeles med alle de samme tingene du er vant til når håndkoding.
Du legger til divs og semantiske elementer, du vil lage CSS-klasser, du må vite hvor absolutt og relativ posisjonering fungerer, og du vil være ansvarlig for å bygge opp dine nettsteder for å være responsive. Det er ikke flygende blind her, før eller senere må du lære hva som skjer bak kulissene. Alt Webflow gjør er satt et visuelt grensesnitt over webdesign teknikker du ellers ville gjøre manuelt.
For nybegynnere til webdesign, kan dette gjøre mye for å hjelpe med læringsprosessen. Å se at endringene trer i kraft i sanntid, kan gå langt. For veteraner er Webflow et flott prototypingsverktøy. Du kan fremdeles foretrekke å skrive din egen kode, men Webflow kan tillate deg å bevege deg mye raskere når du har slått ut designet. Jeg har personlig brukt den i kombinasjon med håndkoding for å gjøre stramme tidsfrister på mer enn én anledning.
Så hvis du er en fledgling webdesigner som ønsker å jevne ut lærekurven, eller en gammel hånd som ser for å spare tid, er Webflow verdt å se på.
Hvor Webflow er et visuelt grensesnitt over vanlige webdesignteknikker, er Froont definitivt sikret seg å forsøke å ta vare på så mange punkter i designprosessen som mulig for å skape en veldig nybegynnerlig og rask designprosess.
I stedet for å legge til divs, eller tekst eller bilder, legger du til hele seksjoner av et nettsted om gangen. Du kan falle i nav nav, en helt enhet, en innholdsdel, noen prispaneler, en bunntekst, og det er en vikle. Froont har også et stort utvalg av maler, referert til som "Prosjekter", som du kan klone for å starte designprosjektet, bør du velge.
Når det er sagt, er omtrent alt redigerbart når det er på siden - bare veksle på Ekspert modus å justere ting som marginer og justering.
Hvis du bare er i gang med webdesign, eller du trenger en prosess som har som mål å være så praktisk som mulig, kan Froont være rett opp bakgaten din.
Å finne en fullverdig nettbasert kodeditor er fortsatt litt vanskelig. Det er ganske mange web-baserte redaktører der ute, men hvis du leter etter noe med typen funksjoner du er vant til fra din favoritt desktop code editor, vil ikke alle alternativene passe.
Når det er sagt, her er to redaktører som stod ut fra pakken, og kan være veldig nyttig for på gangs koding.
Caret er en av de få nettbaserte kodeditorene som du kan åpne en lokal fil på. Dette vil trolig gjøre med det faktum at det installeres via nettbutikken i Chrome, som et vanlig program, og fungerer offline. Du får et snarveisikon for skrivebordet ditt, og det kjører uten nettleserkrom rundt det.
Listen over funksjoner er ganske imponerende, spesielt midt i et noe ufruktbart nettleserbasert kodedigeringslandskap. Caret har syntaksutheving, temaer, flere markører, en kommandopalett, prosjektledelse, plugin support og en omfattende, fritt konfigurerbar "user.json" -innstillingsfil.
Ikke bare er Caret gratis, det er også åpen kildekode under GPLv2-lisensen. Installer den fra Chrome Nettmarked, eller hvis du foretrekker at du kan klone sin repo og håndtere installasjonen manuelt selv.
Hvis du trenger en kodeditor som kan gå hvor som helst, og spesielt hvis du er en dev på farten med en ChromeOS-enhet, kan Caret være akkurat det du trenger.
CodeAnywhere tillater deg ikke å åpne lokale filer, men det gjør det raskt og enkelt å koble til med en tredjeparts lagringsleverandør som GitHub, BitBucket, Dropbox eller en FTP-server, der filene dine er plassert. Så hvis du allerede trykker koden på ekstern lagring på slutten av dagen, kan dette gjøre prosessen litt jevnere.
CodeAnywhere har syntax utheving for syttifem språk, den har fire temaer og åtte fargevalg å velge mellom, den tilbyr kode ferdigstillelse, linting og flere markører. Den har også en innebygd terminal, samarbeidsverktøy og lagret revisjonshistorikk.
En spesielt overbevisende funksjon er at det er "Containers" -tjeneste, som er skybaserte miljøer som kjører CentOS eller Ubuntu, og forkonfigurert for WordPress, NodeJS, Ruby og andre.
Hvis du er på utkikk etter en enkel måte å jobbe med dine eksternt vertsprosjekter, eller hvis ideen om "Containere" høres ut som det ville gjøre prosjektene dine jevnere, ta en titt på CodeAnywhere.
Utvalget for nettleserbaserte fotoredigerere er litt mer sparsomt enn våre andre kategorier, noe som ikke er overraskende for øyeblikket, er fotoredigering trolig den mest ressursintensive og vanskelig å oppnå uten skrivebordskraft.
Vi har tre dyktige redaktører å velge mellom, men to av dem (Pixlr og SumoPaint) krever Flash, så hvis det har vært en stund siden du hadde Flash aktiv på maskinen din, må du støv den av igjen for å kunne bruke den. disse to.
På den måten, hvis du vil aktivere Flash, men bare for bestemte apper, går du til Chrome i chrome: // settings / content / flash, Legg deretter til nettadressen til appen til listen over tillatte nettsteder.
Polarr gjør ikke trenger Flash, og er et pent bilde redigering program som lar deg raskt få bilder som ser spiffy og klar til bruk i nettstedene dine innhold. Det gjør det mulig å legge til prospekterte filtre, en enkel ett klikk affære, det er dybde lys og farge kontroller, og du kan beskjære, flip, rotere og endre størrelse til ditt hjerte innhold.
Den har til og med en "Auto-forbedring" -funksjon som vil analysere bildet ditt og rive det opp uten at du løfter en finger.
Polarr er gratis, men du har mulighet til å kjøpe "Pro" ekstramateriale hvis du ønsker det, for eksempel et tekstverktøy, støyfjerner, portrettfiltersett, landskapsfiltersett, blant annet. Hele samlingen av "Pro" -verktøy er $ 19,99
Hvis hovedmålet ditt er å få bilder som ser bra ut til å legge ut på nettet, er Polarr et fantastisk verktøy for å få den jobben gjort.
Pixlr har eksistert i ganske lang tid. Tilbake på dagen, hvis jeg ikke hadde tilgang til Photoshop, er dette det jeg ville bruke, og det er det jeg anbefalte til folk som ønsket å gjøre bilderedigering, men ikke kunne rettferdiggjøre et programvarekjøp.
Pixlr har verktøyene du kan forvente å finne i et desktop raster-program, for eksempel blyant, pensel, viskelær, bøtte, gradient, klonstempel, grunnleggende tegningstegning, tekst, uskarp, skjerpe, flekker, unnvike, brenne og så videre. Den har et enkelt lagstilsystem som inneholder dropshadow, indre skygge, skråning, ytre glød og indre glød. Og den har en omfattende liste over filtre og justeringer - bare husk at disse funksjonene er ikke ikke-destruktiv.
Du kan bruke Pixlr for design, frihåndskunst og foto retusjering og redigering. Hvis du trenger nettbasert programvare med flere desktop-verktøy enn Polarr, kan Pixlr bare fylle det gapet for deg.
SumoPaint er veldig mye som Pixlr, og harkens fra samme tid. Det har også typen verktøy du kan forvente å finne i et desktop raster editor, pluss et sterkt utvalg av filtre og justeringer.
Imidlertid SumoPaint har mer avanserte verktøy for formskaping, som stjerner, paier og så videre. I tillegg har den et grei symmetri tegneverktøy, og et nyttig gratis transformeringsverktøy. Det har også noen ekstra lag stiler: farge overlegg, strekk, gradient skrå og gradient glød.
Samlet sett er Pixlr og SumoPaint veldig lik og fyller i det vesentlige samme rolle, så hvis du leter etter en nettleserbasert applikasjon av denne typen, er det beste du kan gjøre, å prøve å se hvilken du liker best.
Det avsluttes vår 2018 runde opp av den nåværende tilstanden til nettleserbasert programvare for webdesignere.
Oppsummert:
Som et notat for fremtiden for nettleserbaserte applikasjoner, hold øye med oppveksten av WebAssembly, en fremvoksende teknologi som gjør at selv intensiv programvare som videoredigerere kan kjøre med nær opprinnelige ytelse. Det kunne virkelig riste opp ting!
I mellomtiden kan dine reiser og ultraportable enheter være mer produktive som følge av noen av programmene på denne listen!
Accentsconagua