Share
Webbläsarbaserade applikationer blir allt vanligare och deras lönsamhet för användning i webbdesign ökar stadigt. Visst, de kanske inte har den fulla grunten på stationära applikationer, men de kan fortfarande vara mycket kraftfulla oavsett, och de kommer med fördelar som du vanligtvis inte hittar i vanlig mjukvara.
För det första är webbläsarbaserade applikationer tvärplattformskompatibla. Det spelar ingen roll om ditt föredragna skrivbordssystem är Linux, MacOS, Windows eller ChromeOS, så länge det har en webbläsare du är bra att gå. Beroende på appar kan du kanske hitta att du även kan använda dem för att få extra arbete på en iOS- eller Android-surfplatta.
För det andra har du möjlighet att komma åt programmen var som helst, med nollinstallation eller hantering. Spinna upp din favoritprogramvara på en dator som du normalt inte använder. Och behöver aldrig oroa dig för att hantera uppdateringar igen.
I den här artikeln kontrollerar vi läget för webbläsarbaserade applikationer 2018. Vi tittar på fyra nyckelområden som är viktiga för webbdesigners:
Nu går vi!
Även den bästa vektorns och UI-designprogramvaran på skrivbordet kan vara resursintensiv. Som sådan är det ganska anmärkningsvärt hur starkt webbläsarapparna i den här kategorin är just nu. Det är en sak att skapa appar som jämför varandra med lätta uppgifter, men att göra professionell grafisk grafisk designprogramvara i webbläsaren är helt annan. Och ändå verkar flera utvecklare ha uppnått denna prestation.
Följande fyra är mina aktuella toppval för vektor- och UI-designprogram i webbläsaren:
Figma är en applikation som faller helt och hållet i webbdesignerns hjulhus. Medan den kan göra alla typer av vektorarbete och är en kraftfull grafisk design applikation i allmänhet, är den särskilt väl lämpad för gränssnittsdesign för webbplatser och webbaserade appar.
En av de utmärkande funktionerna som erbjuds för webbdesigners är möjligheten att skapa flera individuella "ramar", som kan användas på liknande sätt som skyltar. Du kan till exempel skapa en ram för att representera varje sida i en webbdesign.
Där det blir intressant är det att något objekt i en ram, t.ex. en kontaktknapp, kan kopplas till en annan ram, som en som visar en kontaktsida. Detta görs genom att dra en anslutningslinje ut från knappen till målramen, vilken omvandlar knappen till en "hotspot". I presentationsläget, om hotspot är klickat, laddar det upp ramen som den är ansluten till, vilket gör den här funktionen utmärkt för att simulera rörelseflödet från en del av ett webben till ett annat.
När designfasen är klar gör Figma det lätt att ta tag i den information som krävs för kodning, till exempel dimensioner, positioner, teckensnitt, hex-koder och så vidare. Det kan också generera kopiera och klistra in klar CSS du kan ansluta direkt till din kod. Och när bildtillgångar behövs kan de exporteras på en eller flera sätt samtidigt som det behövs.
Om din primära uppgift i en webbläsarbaserad vektorapp ska utforma användargränssnitt för webben är Figma ett ganska svårt alternativ att gå förbi.
Gravit Designer är en seriös utmanare i vektorutrymmet som en allround, multi-purpose grafisk design applikation. Det är helt genomförbart att använda på professionell nivå, något som görs mer anmärkningsvärt av det faktum att Gravit är helt, hundra procent, gratis. Det finns inga köpavgifter, abonnemangsavgifter eller reklam. Öppna bara appen och designa bort.
Programvaran innehåller robusta vektorverktyg som en klassisk stilpenna, det superhannade Bezigon-verktyget och utmärkta Freehand and Shading-verktyg. Det ger möjlighet att ha en oändlig duk, och den har en lång lista med dimensionsförinställningar så att du kan växla från "Webbplats - Stor" storlek till "iPhone X" -storlek med ett knapptryck.
Systemet "Sidor" ger dig en artboard-typ av sätt att organisera dokument, och de ankare och symbolsystemen som kombineras gör det möjligt att skapa återanvändbara tillgångar som uppträder halvhanterligt när de placeras på sidor av olika storlekar.
En av mina favorit Gravit-funktioner är dess otroligt flexibla system med flera fyllningar, gränser och effekter. Ett enda objekt kan ha ett antal fyllningar, gränser och effekter, var och en med sina egna blandningsmetoder och opacitet, så att du kan skapa mycket intressanta design stilar.
Gravit förbättras snabbt, med utvecklingslaget lägger till mycket användbara funktioner med jämna mellanrum. Den senaste stora uppdateringen lade till symboler och förbättrade ankare. Den som tidigare lagde till skylagring, Sketch import och plugin support. Gravit rör sig snabbt och förbättras ofta.
Om du letar efter en väl avrundad applikation där du kan göra nästan vad som helst som du behöver med vektorer, kommer Gravit sannolikt att skrapa det kliar.
Vectr är en lättare applikation än Gravit eller Figma. Jag skulle beskriva den här appen som en att använda när du vill komma in och ut snabbt, och utan en brant inlärningskurva. Vectrs verktyg och gränssnitt är minimalistiska och intuitiva, och den utmärkta serien interaktiva handledningar som du hälsas med vid första lanseringen gör programmet mycket snabbare att hämta upp.
En av Vectrs mest intressanta funktioner är att det via ett plugin kan användas som en fullfjädrad grafikredaktör inom ett WordPress-administrativ område, något som kan vara mycket användbart.
Om du inte vill ha mycket väsen, men du vill ha en enkel uppsättning robusta verktyg, kan Vectr vara ansökan för dig.
BoxySVG, som namnet antyder, handlar om SVG. Om du bestämmer dig för att designa vektorgrafik på webben, är den här applikationen specialiserad för just det ändamålet. BoxySVG försöker inte oroa sig för grafik eller gränssnittsdesign eller något annat som kan distrahera från att det är ett bra SVG-designprogram.
Det innehåller SVG-specifika funktioner som att kunna styra visningsboxinställningar, justering av objekt i förhållande till visningsrutan och preserveAspectRatio inställning - ingen anledning att gräva in i ditt SVGs kod efter export. Och självklart, eftersom du utformar i webbläsaren ser du dina SVGs exakt som de kommer att visas när de distribueras på webben.
Om SVG är ditt spel, särskilt för webben, kolla definitivt vad BoxySVG har att erbjuda.
Wireframing är en kategori där det aktuella webbläsarbaserade valet faktiskt kan vara starkare än skrivbordet. Det kan leda till att trådframställning inte är resursintensiv och att efterfrågan på tillgängliga trådramar online kan vara stark på grund av det frekventa behovet av samarbete under projektets planeringsstadium.
Kolla in fyra av de ledande webbaserade webbapplikationsapparna som finns tillgängliga just nu, utan någon särskild ordning.
MockFlow kommer sannolikt att vara till stor glädje för många webbdesigners på grund av att den har drag och släpp färdiga komponenter för Bootstrap, Material Design, Foundation, KendoUI och ett antal andra populära ramverk. Som framgår av bilden ovan är alla kända ramkomponenter redo att användas, något som kan vara oerhört användbart för snabb prototyper om din favoritram är i listan över MockFlow-inklusioner.
När du använder MockFlow för att skapa en wireframe för ett rambaserat projekt kommer det att se väldigt mycket som om den färdiga produkten i slutändan kommer, medan trådramen bibehåller kapaciteten för snabba ändringar och iterationer. Komponent teman är vanilj som standard, men varje komponent kan ha sin färg, storlek, typsnitt och så vidare anpassad efter behov.
För webbdesign fokuserad wireframing, speciellt om du använder ett ramverk, har MockFlow mycket att erbjuda.
Balsamiq är en cloud-based wireframing applikation som är enkel och ganska intuitiv att använda. Överst på skärmen finns en visuell visning av komponenter som representerar saker som enheter, bilder, rubriker, stycken, formulärelement och så vidare. Dra och släpp dem på skärmen för att bilda din wireframe. Du kan också borra vidare i underkategorier för att hjälpa dig att hitta de komponenter du letar efter.
Komponternas stil är ganska statisk, med de flesta som handritade föremål. Balsamiqs hemsida säger, "De ser ut som skisser med syfte! Det uppmuntrar brainstorming ". Denna brainstorming fokuserar i samarbetssystemen som tillåter delning mellan lagmedlemmar, vilket gör att Balsamiq verkar mest hemma ganska tidigt i planeringsprocessen av ett projekt.
Om du har ett betydande lag och behöver ha hash idéer ut mellan flera personer innan du sänker dina tänder i en design, kan Balsamiq vara appen för dig.
Mockingbird ligner på något sätt Balsamiq genom att du presenteras med ett urval av standardiserade komponenter redo att dra och släppa in i din wireframe, till exempel knappar, bilder, bannerannonser, rubriker och så vidare. Flera sidor kan skapas, och levande arbetslänkar kan ge dig möjlighet att navigera från mockup till mockup när du testar ditt användargränssnitt eller visar ditt team eller kunder runt.
Samarbete kan göras i realtid; bara dela en länk med din kollega eller kund och de kommer att kunna kommunicera förändringar och förslag på platsen.
Om ditt främsta behov är effektiv kommunikation med människor som är borta, ta en titt på Mockingbird.
Wireframe.cc är något av ett spartanskt, minimalistiskt wireframingverktyg som inte har klockor och visselpipor i våra andra tre applikationer. Men det är också den enda som är helt gratis.
De komponenter du har tillgång till är i grunden bara rektanglar med runda eller kvadratiska hörn, ellipser och platshållare för bilder och text. Du kan välja mellan färgerna orange, svart, vitt och några gråtoner. Förutom dessa funktioner har du också några verktyg för gruppering och anpassning och förmågan att lägga till kommentarer.
Wireframe.cc är medvetet gles, och ibland när du behöver hämta några idéer snabbt är det precis vad du behöver. Det finns ingen förlamning genom analys här, bara att gå rakt ner till jobbet.
Dagens WYSIWYG-redaktörer fyller på något sätt den roll som visuella designprogram som Dreamweaver och Frontpage brukade, men på många andra sätt har de gått långt utöver sina föregångare. De kan fortfarande hjälpa nya webbdesigners att lära sig repen, men de kan också vara massiva tidsbesparare i avancerade projekt när de används av erfarna händer.
Låt oss titta närmare på två av de mest populära webbläsarbaserade WYSIWYG webbdesign applikationerna.
Webflow gör ett bra jobb att vara användbart för både erfarna webbdesigners och nybörjare. Detta beror på det faktum att medan allting kan ske visuellt, arbetar du fortfarande med alla samma saker som du är van vid när handkodning.
Du lägger till div och semantiska element, du skapar CSS-klasser, du måste veta hur absolut och relativ positionering fungerar, och du ska ansvara för att bygga ut dina webbplatser för att vara responsiva. Det finns ingen flygande blind här, förr eller senare måste du lära dig vad som händer bakom kulisserna. All webflöde gör ett visuellt gränssnitt över de webbdesigntekniker du annars skulle göra manuellt.
För nybörjare till webbdesign kan detta göra mycket för att hjälpa till med inlärningsprocessen. Att se dina ändringar träda i kraft i realtid kan gå långt. För veteraner är Webflow ett bra prototyperverktyg. Du kanske fortfarande föredrar att skriva din egen kod, men Webflow kan göra det möjligt för dig att flytta mycket snabbare när ishacka din design. Jag har personligen använt den i kombination med handkodning för att göra snäva tidsfrister vid mer än ett tillfälle.
Så om du är en spännande webbdesigner som vill släta inlärningskurvan, eller en gammal hand som vill spara tid, är Webflow värt att titta på.
Där Webflow är ett visuellt gränssnitt över vanliga webbdesigntekniker, har Froont definitivt som mål att försöka ta hand om så många punkter i designprocessen som möjligt för att skapa en mycket nybörjare vänlig och snabb designprocess.
Istället för att lägga till div, text eller bilder lägger du till hela sektioner av en webbplats i taget. Du kan falla i nav nav, en hjälte enhet, en innehållsavsnitt, några prissättning paneler, en sidfot, och det är en omslag. Froont har också ett ganska stort utbud av mallar, benämnda "Projekt", som du kan klona för att börja ditt designprojekt ska du välja.
Som sagt, bara om allt är redigerbart när det är på sidan-bara växla på Expertläge att justera saker som marginaler och anpassning.
Om du bara har börjat i webbdesign eller behöver en process som syftar till att vara så handsfrit som möjligt, kan Froont vara rätt upp i din gränd.
Att hitta en fullständig webbaserad kodredigerare är fortfarande lite knepig. Det finns en hel del webbaserade redaktörer där ute, men om du letar efter något med den typ av funktioner du brukar använda från din favorit skrivbords kodredigerare kommer inte alla alternativ att passa.
Det är sagt, här är två redaktörer som stod ut från förpackningen, och kan vara väldigt praktiska för koden på farten.
Caret är en av de få webbaserade kodredigerare som du kan öppna en lokal fil. Det här kommer sannolikt att göra med att det installeras, via Chrome Web Store, som en vanlig applikation och fungerar offline. Du kommer att få en genvägsikon för ditt skrivbord, och det körs utan någon webbläsarkrom runt den.
Funktionslistan är ganska imponerande, framför allt mitt i ett något barren webbläsarbaserat kodredigeringslandskap. Caret har syntaxmarkering, teman, flera markörer, en kommandopalett, projekthantering, plugin support och en omfattande, fritt konfigurerbar "user.json" inställningsfil.
Inte bara är Caret gratis, det är också öppen källkod under GPLv2-licensen. Installera det från Chrome Web Store, eller om du föredrar att du kan klona sin repo och hantera installationen manuellt själv.
Om du behöver en kodredigerare som kan gå någonstans, och speciellt om du är en dev på flytten med en ChromeOS-enhet, kan Caret vara precis vad du behöver.
CodeAnywhere låter dig inte öppna lokala filer, men det gör det snabbt och enkelt att ansluta till en tredje parts lagringsleverantör som GitHub, BitBucket, Dropbox eller en FTP-server, där dina filer finns. Så om du redan trycker på din kod till extern lagring i slutet av dagen kan det göra processen lite mjukare.
CodeAnywhere har syntax markering för sjuttiofem språk, den har fyra teman och åtta färgscheman att välja mellan, det erbjuder kod slutförandet, linting och flera markörer. Det har också en inbyggd terminal, samarbetsverktyg och sparade revisionshistorik.
En särskilt övertygande funktion är att det är "Containers" -service, som är molnbaserade miljöer som kör CentOS eller Ubuntu, och förkonfigurerade för WordPress, NodeJS, Ruby och andra.
Om du letar efter ett enkelt sätt att arbeta med dina externa värdprojekt, eller om tanken på "Containers" låter som att det skulle göra dina projekt löpare, ta en titt på CodeAnywhere.
Utbudet för webbläsarbaserade fotoredigerare är lite mindre än våra andra kategorier, vilket inte är förvånande för närvarande. Fotoredigering är förmodligen den mest resursintensiva och svåra att uppnå utan skrivbordskraft.
Vi har tre skickliga redaktörer att välja mellan, men två av dem (Pixlr och SumoPaint) kräver Flash, så om det har varit ett tag sedan du hade Flash aktiv på din maskin måste du damma av den igen för att kunna använda de här två.
Om du vill aktivera Flash men bara för specifika appar, gå till Chrome i den här noten chrome: // settings / content / flash, Lägg sedan till webbadressen till appen till listan över tillåtna webbplatser.
Polarr gör inte behöver Flash, och är ett snyggt bildredigeringsprogram som gör att du snabbt kan få bilder att se spiffy och redo att användas i innehållet på dina webbplatser. Det gör att du kan lägga fram filter som är utsedda för ett enkelt klick, det finns djupa belysnings- och färgkontroller, och du kan beskära, vända, rotera och ändra storlek på ditt hjärtans innehåll.
Det har till och med en "Auto-förbättring" -funktion som analyserar din bild och granar upp den utan att du lyfter ett finger.
Polarr är gratis, men du har möjlighet att köpa "Pro" -tillbehör om du vill, till exempel ett textverktyg, ljudborttagare, porträttfilteruppsättning, landskapsfilteruppsättning, bland annat. Hela samlingen av "Pro" -verktyg är 19,99 dollar
Om ditt huvudmål är att få bilder som ser bra ut för att skicka online, är Polarr ett fantastiskt verktyg för att få det jobbet gjort.
Pixlr har funnits länge. Tillbaka om dagen, om jag inte hade tillgång till Photoshop så är det vad jag skulle använda, och det är det jag rekommenderade för personer som ville göra bildredigering men kunde inte motivera ett inköp av programvara.
Pixlr har verktygen som du kan förvänta dig att hitta i en skrivbordsrasterapplikation, t.ex. penna, pensel, suddgummi, hink, lutning, klonmärke, grundläggande formritning, text, suddning, skärpa, smet, dodge, bränna och så vidare. Det har ett enkelt lager stil system som innehåller drop skugga, inre skugga, fas, yttre glöd och inre glöd. Och det har en omfattande lista över filter och justeringar - bara kom ihåg att dessa funktioner är inte icke-förstörande.
Du kan använda Pixlr för design, frihandskonst och foto retuschering och redigering. Om du behöver webbaserad programvara med fler skrivbordsvärden än Polarr, kan Pixlr bara fylla den luckan för dig.
SumoPaint är väldigt mycket som Pixlr, och harkens från samma era. Det har också den typ av verktyg du kan förvänta dig att hitta i en skrivbordsrasterredigerare, plus ett starkt urval av filter och justeringar.
Men SumoPaint har mer avancerade formskapningsverktyg, som stjärnor, pajer och så vidare. Dessutom har det ett smidigt symmetri ritverktyg, och ett användbart gratis transformationsverktyg. Det har också några extra lager stilar: färgöverlagring, stroke, gradient-fas och gradientglöd.
Sammantaget är Pixlr och SumoPaint mycket likartade och fyller i stort sett samma roll, så om du letar efter en webbläsarbaserad applikation av den här typen är det bästa du kan göra att prova och se vilken du gillar bäst.
Det avslutar vår 2018-runda upp av det nuvarande läget för webbläsarbaserad mjukvara för webbdesigners.
Sammanfattningsvis:
Som en anteckning för framtiden för webbläsarbaserade applikationer, hålla koll på ökningen av WebAssembly, en framväxande teknik som gör att även intensiv programvara som videoredigerare kan köra med nästan inbyggd prestanda. Det kan verkligen skaka saker upp!
Under tiden kan dina resor och ultraportabla enheter vara mer produktiva som ett resultat av några av programmen på den här listan!
Accentsconagua