Share
Browsertoepassingen worden steeds vaker gebruikt en hun levensvatbaarheid voor gebruik in webdesign neemt gestaag toe. Natuurlijk hebben ze misschien niet de volledige grunt van desktop-gebaseerde applicaties, maar ze kunnen nog steeds zeer krachtig zijn, en ze hebben extraatjes die je normaal gesproken niet zult vinden in reguliere software.
Ten eerste zijn browsergebaseerde applicaties compatibel met verschillende platforms. Het maakt niet uit of uw favoriete desktop-besturingssysteem Linux, MacOS, Windows of zelfs ChromeOS is, zolang het maar over een browser beschikt die u goed kunt gebruiken. Afhankelijk van de apps, kunt u merken dat u ze zelfs kunt gebruiken om extra werk te verrichten op een iOS- of Android-tablet.
Ten tweede hebt u de mogelijkheid om overal toegang te krijgen tot de applicaties, zonder installatie of beheer. Draai je favoriete software op een computer die je normaal niet gebruikt. En maak je nooit meer zorgen over het opnieuw afhandelen van updates.
In dit artikel zullen we de status van browsergebaseerde applicaties in 2018 bekijken. We zullen kijken naar vier belangrijke gebieden die van belang zijn voor webontwerpers:
Laten we gaan!
Zelfs de beste vector- en UI-ontwerpsoftware op de desktop kan veel informatie vergen. Als zodanig is het vrij opmerkelijk hoe sterk de browser-apps in deze categorie nu zijn. Het is één ding om apps te maken die vergelijken op lichte taken, maar om professionele grafische ontwerpsoftware in de browser te maken, is iets heel anders. En toch lijken meerdere ontwikkelaars deze prestatie te hebben bereikt.
De volgende vier zijn mijn huidige topkeuzes voor vector- en UI-design-apps in de browser:
Figma is een toepassing die vierkant in het stuurhuis van de webontwerper valt. Hoewel het in staat is allerlei vectorwerk uit te voeren en over het algemeen een krachtige grafische ontwerptoepassing is, is het vooral geschikt voor interfaceontwerp voor websites en webgebaseerde apps.
Een van de opvallende kenmerken die het biedt voor webontwerpers is de mogelijkheid om meerdere afzonderlijke "frames" te maken, die op een vergelijkbare manier kunnen worden gebruikt als tekengebieden. U kunt bijvoorbeeld een kader maken om elke pagina in een siteontwerp weer te geven.
Waar het interessant wordt, is dat elk item binnen een frame, bijvoorbeeld een "contact" -knop, kan worden verbonden met een ander frame, zoals een frame dat een contactpagina weergeeft. Dit wordt gedaan door een verbindingslijn van de knop naar het doelframe te slepen, die de knop omzet in een "hotspot". Als in de presentatiemodus op de hotspot wordt geklikt, wordt het frame waarop het is aangesloten, geladen, waardoor deze functie ideaal is voor het simuleren van de verplaatsingsstroom van het ene deel van de webinterface naar het andere.
Wanneer de ontwerpfase is voltooid, maakt Figma het gemakkelijk om de informatie die nodig is voor codering te bemachtigen, zoals dimensies, posities, lettertype-instellingen, hexcodes enzovoort. Het kan ook CSS voor kopiëren en plakken genereren, u kunt het rechtstreeks in uw code invoegen. En wanneer afbeeldingsitems nodig zijn, kunnen ze allemaal tegelijk of afzonderlijk worden geëxporteerd.
Als je primaire taak in een browsergebaseerde vector-app UI's voor het web gaat ontwerpen, is Figma een redelijk moeilijke optie om voorbij te gaan.
Gravit Designer is een serieuze kanshebber in de vectorruimte als een allrounder, een veelzijdige grafische ontwerptoepassing. Het is volledig haalbaar om te gebruiken op professioneel niveau, iets dat opmerkelijker wordt gemaakt door het feit dat Gravit volledig, voor honderd procent, gratis is. Er zijn geen aankoopkosten, abonnementskosten of advertenties. Open gewoon de app en ontwerp deze weg.
De software bevat krachtige vectorgereedschappen zoals een klassieke pen, de superhandige Bezigon-tool en uitstekende gereedschappen uit de vrije hand en arcering. Het biedt de mogelijkheid om een oneindig canvas te hebben, en het heeft een lange lijst met voorinstellingen voor dimensies, zodat u met een klik op de knop kunt schakelen tussen 'Website - Enorm' en 'iPhone X'..
Het systeem "Pagina's" biedt u een manier om documenten van het type tekenbord te ordenen. Dankzij de combinatie van de ankers en symbolen kunt u herbruikbare elementen maken die zich semi-responsief gedragen wanneer ze op pagina's van verschillende formaten worden geplaatst.
Een van mijn favoriete Gravit-functies is het ongelooflijk flexibele systeem van meerdere vullingen, randen en effecten. Eén enkel item kan elk aantal vullingen, randen en effecten bevatten, elk met hun eigen overvloeimodi en dekkingsinstellingen, waardoor u zeer interessante ontwerpstijlen kunt maken.
Gravit wordt snel verbeterd, waarbij het ontwikkelteam zeer nuttige functies toevoegt met regelmatige tussenpozen. Bij de laatste grote update zijn symbolen en verbeterde ankers toegevoegd. Degene die eerder cloudopslag, Sketch imports en plugin-ondersteuning heeft toegevoegd. Gravit beweegt snel en verbetert vaak.
Als je op zoek bent naar een goed afgeronde applicatie waarin je alles kunt doen wat je met vectoren nodig hebt, zal Gravit hoogstwaarschijnlijk dat jeuken.
Vectr is een lichtere toepassing dan Gravit of Figma. Ik zou deze app beschrijven als een om te gebruiken wanneer je snel in en uit wilt stappen en zonder een steile leercurve. De tools en interface van Vectr zijn minimalistisch en intuïtief en de uitstekende reeks van interactieve tutorials waarmee u bij de eerste lancering wordt begroet, maken de software die veel sneller op te halen is.
Een van de meest interessante functies van Vectr is dat het via een plug-in kan worden gebruikt als een volwaardige grafische editor in een WordPress-beheerdersgebied, iets dat inderdaad erg handig kan zijn.
Als u niet veel gedoe wilt, maar wel een reeks eenvoudige tools wilt, kan Vectr de toepassing voor u zijn.
BoxySVG draait, zoals de naam al doet vermoeden, helemaal over SVG. Als u specifiek op zoek bent naar het ontwerpen van vectorafbeeldingen voor het web, is deze toepassing speciaal voor dat doel gespecialiseerd. BoxySVG probeert zich niet bezig te houden met gedrukte afbeeldingen, of interface-ontwerp, of iets anders dat het zou kunnen afleiden, omdat het een geweldig SVG-ontwerpprogramma is.
Het bevat SVG-specifieke functies, zoals het kunnen controleren van weergaveboxinstellingen, uitlijnen van objecten ten opzichte van het weergavevak en de behoud van beeldverhouding instelling - u hoeft niet na het exporteren in de code van uw SVG's te graven. En natuurlijk, omdat u ontwerpt in de browser, ziet u uw SVG's precies zoals ze verschijnen wanneer ze op het web worden geïmplementeerd.
Als SVG jouw spel is, met name voor het web, bekijk dan zeker wat BoxySVG te bieden heeft.
Wireframing is een categorie waarbij de huidige browsergebaseerde selectie mogelijk sterker is dan het bureaubladaanbod. Het kan helpen dat wireframing niet resource-intensief is en dat de vraag naar toegankelijke wireframes online sterk kan zijn vanwege de frequente behoefte aan samenwerking tijdens de planningsfase van een project.
Bekijk nu vier van de toonaangevende browser-gebaseerde wireframing-apps die nu beschikbaar zijn, in willekeurige volgorde.
MockFlow is waarschijnlijk een groot plezier voor veel webontwerpers vanwege het feit dat het beschikt over componenten die kunnen worden versleept en neergezet voor Bootstrap, Material Design, Foundation, KendoUI en een aantal andere populaire frameworks. Zoals te zien is in de bovenstaande afbeelding, zijn alle vertrouwde raamwerkcomponenten klaar voor gebruik, iets dat ongelooflijk nuttig zou kunnen zijn voor snelle prototyping als uw favoriete framework in de lijst met MockFlow-insluitsels staat.
Wanneer u MockFlow gebruikt om een draadframe te maken voor een op een raamwerk gebaseerd project, lijkt het er uiteindelijk op dat het uiteindelijke product uiteindelijk zal werken, terwijl het draadframe de capaciteit behoudt voor snelle bewerkingen en iteraties. Component-thema's zijn standaard vanille, maar elke component kan zijn kleur, grootte, lettertypen en dergelijke naar wens aanpassen.
Voor webdesign gerichte wireframing, vooral als u een framework gebruikt, heeft MockFlow veel te bieden.
Balsamiq is een cloud-gebaseerde wireframing-applicatie die eenvoudig en vrij intuïtief te gebruiken is. Aan de bovenkant van het scherm is een visuele weergave van componenten die dingen weergeven zoals apparaten, afbeeldingen, kopjes, alinea's, formulierelementen, enzovoort. Sleep ze naar het scherm om je wireframe te vormen. U kunt ook dieper inzoomen op subcategorieën om u te helpen de componenten te vinden die u zoekt.
De stijl van de componenten is redelijk statisch en de meeste zien eruit als handgetekende objecten. De startpagina van Balsamiq zegt: "Ze zien er expres uit als schetsen! Het moedigt brainstormen aan ". Deze brainstorm-focus houdt verband met de samenwerkingssystemen die het delen van teamleden mogelijk maken, waardoor Balsamiq het vroegst in het planningsproces van een project het meest thuis lijkt te zijn.
Als je een groot team hebt en ideeën moet uitwisselen tussen verschillende mensen voordat je je tanden zet in een ontwerp, is Balsamiq misschien de app voor jou.
Mockingbird is enigszins vergelijkbaar met Balsamiq, omdat u een selectie van gestandaardiseerde componenten krijgt die klaar zijn om te slepen en neer te zetten in uw draadframe, zoals knoppen, afbeeldingen, banneradvertenties, koppen enzovoort. Er kunnen meerdere pagina's worden gemaakt en met live-werkkoppelingen kunt u navigeren van mockup naar mockup terwijl u uw gebruikersinterface test of uw team of klanten in de buurt laat zien.
Samenwerking kan in real time worden gedaan; deel gewoon een link met uw collega of klant en zij kunnen wijzigingen en suggesties ter plekke communiceren.
Als je de grootste behoefte hebt aan efficiënte communicatie met mensen die zich op een andere locatie bevinden, kijk dan eens naar Mockingbird.
Wireframe.cc is iets van een spartaanse, minimalistische wireframing-tool die niet de toeters en bellen kent van onze andere drie applicaties. Het is echter ook de enige die volledig gratis is.
De componenten die beschikbaar zijn, zijn in feite gewoon rechthoeken met ronde of vierkante hoeken, ellipsen en tijdelijke aanduidingen voor afbeeldingen en tekst. U kunt kiezen uit de kleuren oranje, zwart, wit en enkele grijstinten. Naast deze functies hebt u ook enkele hulpmiddelen voor groeperen en uitlijnen en de mogelijkheid om annotaties toe te voegen.
Wireframe.cc is opzettelijk schaars en soms, wanneer je snel ideeën moet opdoen, is dat precies wat je nodig hebt. Er is hier geen verlamming door analyse, gewoon direct aan het werk.
De huidige WYSIWYG-editors vullen in zekere zin de rol die visuele ontwerpprogramma's zoals Dreamweaver en Frontpage gebruikten, maar op vele andere manieren zijn ze veel verder gegaan dan hun voorgangers. Ze kunnen nog steeds nieuwe webontwerpers helpen de touwtjes in handen te nemen, maar ze kunnen ook enorme tijdbesparingen opleveren in geavanceerde projecten wanneer ze door ervaren handen worden gebruikt.
Laten we eens kijken naar twee van de meest populaire webgebaseerde WYSIWYG-webontwerptoepassingen.
Webflow doet geweldig werk als nuttig voor zowel doorgewinterde webdesign dierenartsen en beginners. Dit komt omdat, terwijl alles visueel kan worden gedaan, u nog steeds werkt met dezelfde dingen die u gewend bent bij handcodering.
Je voegt divs en semantische elementen toe, je maakt CSS-klassen, je moet weten hoe absoluut en relatieve positionering werkt, en je bent verantwoordelijk voor het uitbouwen van je sites om responsief te zijn. Er is hier geen vliegende blind, je zult vroeg of laat moeten leren wat er achter de schermen gebeurt. Alles wat Webflow doet, is een visuele interface over de webontwerptechnieken die u anders handmatig zou doen.
Voor beginners tot webdesign kan dit veel doen om te helpen met het leerproces. Zien dat uw wijzigingen in realtime van kracht worden, kan een lange weg gaan. Voor veteranen is Webflow een geweldig hulpmiddel voor prototyping. Misschien geeft u er toch de voorkeur aan om uw eigen code te schrijven, maar Webflow kan u in staat stellen om veel sneller te bewegen wanneer u uw ontwerp verwijdert. Ik heb het persoonlijk gebruikt in combinatie met handcodering om strakke deadlines te maken bij meer dan één gelegenheid.
Dus als u een beginnende webontwerper bent die de leercurve tracht te verzachten, of een oude hand die tijd wil besparen, is Webflow de moeite van het bekijken waard.
Waar Webflow een visuele interface is over reguliere webontwerptechnieken, is Froont zeker gericht op het proberen zoveel mogelijk punten van het ontwerpproces te regelen om een zeer beginnersvriendelijk en snel ontwerpproces te creëren.
In plaats van divs, tekst of afbeeldingen toe te voegen, voegt u hele delen van een site tegelijkertijd toe. Je kunt bijvoorbeeld een navigatiebalk, een hero-eenheid, een inhoudsgedeelte, een aantal prijspanelen, een voettekst toevoegen en dat is een wrap. Froont heeft ook een vrij uitgebreide selectie van sjablonen, ook wel "Projecten" genoemd, die u kunt klonen om uw ontwerpproject te starten als u kiest.
Dat gezegd hebbende, zo ongeveer alles kan worden bewerkt zodra het op de pagina staat - schakel het gewoon in Expert modus om zaken als marges en uitlijning aan te passen.
Als je net bent begonnen met webontwerp of als je een proces wilt hebben dat zo handsfree mogelijk is, dan is Froont misschien wel jouw plekje.
Het vinden van een complete web-gebaseerde code-editor is nog steeds een beetje lastig. Er zijn nogal wat op het web gebaseerde editors die er zijn, maar als je op zoek bent naar iets met het soort functies dat je van je favoriete desktopcode-editor gewend bent, zullen niet alle opties geschikt zijn.
Dat gezegd hebbende, hier zijn twee editors die uit de verpakking springen, en die erg handig kunnen zijn voor het coderen onderweg.
Caret is een van de weinige web-gebaseerde codebewerkers waarmee u een lokaal bestand kunt openen. Dit heeft waarschijnlijk te maken met het feit dat het via de Chrome Web Store als een gewone app wordt geïnstalleerd en offline werkt. U krijgt een snelkoppelingspictogram voor uw bureaublad en het draait zonder dat er een browser chrome omheen draait.
De lijst met functies is behoorlijk indrukwekkend, vooral in het midden van een enigszins kaal browsergebaseerd codebewerkingslandschap. Caret heeft syntaxisaccentuering, thema's, meerdere cursors, een opdrachtenpalet, projectbeheer, ondersteuning voor plug-ins en een uitgebreid, vrij configureerbaar "user.json" instellingenbestand.
Caret is niet alleen gratis, het is ook open source onder de GPLv2-licentie. Installeer het vanuit de Chrome Web Store of, als u wilt, kunt u de repo klonen en de installatie zelf handmatig uitvoeren.
Als je een code-editor nodig hebt die overal naartoe kan gaan, en met name als je met een ChromeOS-apparaat onderweg bent, is Caret precies wat je nodig hebt.
CodeAnywhere staat niet toe dat u lokale bestanden opent, maar wat het wel doet, is snel en eenvoudig verbinding maken met een externe opslagprovider zoals GitHub, BitBucket, Dropbox of een FTP-server waarop uw bestanden zich bevinden. Dus als je toch al aan het einde van de dag je code naar externe opslag pusht, kan dit het proces een beetje soepeler maken.
CodeAnywhere heeft syntaxisaccentuering voor vijfenzeventig talen, het heeft vier thema's en acht kleurenschema's om uit te kiezen, het biedt codevoltooiing, lintvorming en meerdere cursors. Het heeft ook een ingebouwde terminal, samenwerkingshulpmiddelen en opgeslagen revisiegeschiedenis.
Een bijzonder aantrekkelijke functie is de "Containers" -service, dat zijn op de cloud gebaseerde omgevingen met CentOS of Ubuntu, en voorgeconfigureerd voor WordPress, NodeJS, Ruby en anderen.
Als u op zoek bent naar een eenvoudige manier om aan uw extern gehoste projecten te werken, of als het idee van "Containers" klinkt alsof uw projecten soepeler verlopen, kijk dan eens naar CodeAnywhere.
Het bereik voor browsergebaseerde foto-editors is iets schaarser dan onze andere categorieën, wat op dit moment niet verwonderlijk is, gezien het bewerken van foto's waarschijnlijk de meest middelenintensieve en moeilijk te bereiken is zonder desktopvermogen.
We hebben drie geschikte editors om uit te kiezen, maar twee ervan (Pixlr en SumoPaint) hebben Flash nodig, dus als het een tijdje geleden is dat Flash op je computer actief was, moet je het opnieuw stof afstoffen om het te kunnen gebruiken deze twee.
In dat geval, als u Flash wilt inschakelen, maar alleen voor specifieke apps, gaat u in Chrome naar chrome: // settings / content / flash, voeg vervolgens de URL van de app toe aan de lijst met toegestane sites.
Polarr doet het niet heb Flash nodig en is een nette applicatie voor het bewerken van foto's waarmee je snel afbeeldingen krijgt die er spiffy uitzien en klaar zijn voor gebruik in de inhoud van je sites. Het maakt het toevoegen van pro-ogende filters een eenvoudige 'one click'-affaire, er zijn diepgaande belichtings- en kleurregelaars en u kunt naar hartenlust inkorten, spiegelen, roteren en van grootte veranderen.
Het heeft zelfs een "Auto Enhance" -functie die uw beeld analyseert en opfrist zonder dat u een vinger ophaalt.
Polarr is gratis, maar je hebt de optie om 'Pro'-extra's te kopen als je dat wilt, zoals een tekstgereedschap, ruisonderdrukker, portretfilterset, landschapsfilterset, onder anderen. De volledige verzameling "Pro" -hulpmiddelen is $ 19,99
Als het je belangrijkste doel is om foto's te krijgen die er geweldig uitzien om online te plaatsen, is Polarr een fantastisch hulpmiddel om die klus te klaren.
Pixlr bestaat al een behoorlijk lange tijd. Vroeger had ik, als ik geen toegang had tot Photoshop, dit wat ik zou gebruiken, en het is wat ik aanbeveel aan mensen die beeldbewerking wilden doen, maar een software-aankoop niet konden rechtvaardigen.
Pixlr heeft de gereedschappen die je zou verwachten te vinden in een desktop rasterapplicatie, zoals potlood, penseel, gum, emmer, verloop, kloonstempel, basisvormtekening, tekst, vervagen, verscherpen, vlekken, ontwijken, branden enzovoort. Het heeft een eenvoudig laagstijlsysteem met slagschaduw, binnenschaduw, schuine rand, buitenste gloed en innerlijke gloed. En het heeft een uitgebreide lijst met filters en aanpassingen - houd er alleen rekening mee dat deze functies zijn niet niet-destructieve.
U kunt Pixlr gebruiken voor ontwerp, kunst uit de vrije hand en retoucheren en bewerken van foto's. Als u webgebaseerde software nodig heeft met meer desktopachtige tools dan Polarr, dan kan Pixlr dat gat misschien voor u invullen.
SumoPaint lijkt veel op Pixlr en komt uit hetzelfde tijdperk. Het heeft ook het soort tools dat je zou verwachten te vinden in een desktop raster-editor, plus een sterke selectie van filters en aanpassingen.
SumoPaint echter beschikt over geavanceerdere gereedschappen voor het maken van vormen, zoals sterren, pasteien, enzovoort. Bovendien heeft het een handig hulpmiddel voor het tekenen van symmetrie en een handig hulpmiddel voor vrije transformatie. Het heeft ook enkele extra laagstijlen: kleuroverlay, lijn, verloopafkanting en verloopgloed.
Over het algemeen lijken Pixlr en SumoPaint erg op elkaar en vullen ze in essentie dezelfde rol, dus als je op zoek bent naar een browser-gebaseerde applicatie van deze aard, kun je het beste proberen om te zien welke je het leukst vindt.
Dat concludeert onze 2018 round-up van de huidige staat van browser-gebaseerde software voor webontwerpers.
Samengevat:
Als een kanttekening voor de toekomst van browsergebaseerde applicaties moet je opletten voor de opkomst van WebAssembly, een opkomende technologie waarmee zelfs intensieve software zoals video-editors met bijna-native prestaties kunnen draaien. Dat zou de zaken echt kunnen opschudden!
In de tussentijd kunnen uw reizen en ultra draagbare apparaten productiever zijn als gevolg van sommige van de toepassingen op deze lijst!
Accentsconagua