Share
Browser-basierte Anwendungen werden immer häufiger und ihre Verwendbarkeit für die Verwendung im Webdesign steigt stetig. Sicher, sie haben vielleicht nicht die volle Grösse von Desktop-basierten Anwendungen, aber sie können trotzdem sehr leistungsfähig sein und sie haben Vorteile, die Sie normalerweise in normaler Software nicht finden.
Zum einen sind browserbasierte Anwendungen plattformübergreifend kompatibel. Es spielt keine Rolle, ob es sich bei Ihrem bevorzugten Desktop-Betriebssystem um Linux, MacOS, Windows oder sogar ChromeOS handelt, sofern Sie über einen Browser verfügen, der gut für Sie ist. Abhängig von den Apps stellen Sie möglicherweise fest, dass Sie diese sogar verwenden können, um zusätzliche Arbeit auf einem iOS- oder Android-Tablet zu erledigen.
Zweitens haben Sie die Möglichkeit, überall auf die Anwendungen zuzugreifen, ohne Installation oder Verwaltung. Starten Sie Ihre Lieblingssoftware auf einem Computer, den Sie normalerweise nicht verwenden. Und Sie müssen sich nie wieder um Updates kümmern.
In diesem Artikel werden wir den Status von browserbasierten Anwendungen im Jahr 2018 prüfen. Wir werden vier Schlüsselbereiche betrachten, die für Webdesigner von Bedeutung sind:
Lass uns gehen!
Sogar die beste Vektor- und UI-Design-Software auf dem Desktop kann ressourcenintensiv sein. Daher ist es ziemlich bemerkenswert, wie stark die Browser-Apps in dieser Kategorie derzeit sind. Es ist eine Sache, Apps zu erstellen, die sich mit leichten Aufgaben vergleichen lassen. Die Erstellung professioneller Grafikdesign-Software im Browser ist jedoch etwas ganz anderes. Und doch scheinen mehrere Entwickler dieses Kunststück erreicht zu haben.
Die folgenden vier sind meine aktuellen Top-Tipps für Vektor- und UI-Design-Apps im Browser:
Figma ist eine Anwendung, die direkt in das Radhaus des Webdesigners fällt. Obwohl es für alle Arten von Vektorarbeiten geeignet ist und generell eine leistungsstarke Grafikdesign-Anwendung ist, eignet es sich besonders gut für das Interface-Design für Websites und webbasierte Apps.
Eine der herausragenden Funktionen für Webdesigner ist die Möglichkeit, mehrere einzelne „Frames“ zu erstellen, die ähnlich wie Zeichenflächen verwendet werden können. Sie können beispielsweise einen Rahmen erstellen, um jede Seite in einem Site-Design darzustellen.
Interessant ist, dass jedes Element innerhalb eines Frames, beispielsweise eine Kontaktschaltfläche, mit einem anderen Frame verbunden werden kann, beispielsweise mit einer Kontaktseite. Dazu ziehen Sie eine Verbindungslinie von der Schaltfläche zum Zielframe, wodurch die Schaltfläche in einen "Hotspot" umgewandelt wird. Wenn Sie im Präsentationsmodus auf den Hotspot klicken, wird der Frame, mit dem er verbunden ist, geladen. Diese Funktion eignet sich ideal für die Simulation des Bewegungsflusses von einem Teil einer Web-Benutzeroberfläche zu einem anderen.
Wenn die Entwurfsphase abgeschlossen ist, können Sie mit Figma einfach die Informationen abrufen, die für die Codierung erforderlich sind, z. B. Abmessungen, Positionen, Schrifteinstellungen, Hexcodes usw. Es kann auch Copy & Paste-fähiges CSS generiert werden, das Sie direkt in Ihren Code einfügen können. Und wenn Image-Assets benötigt werden, können sie entweder auf einmal oder einzeln exportiert werden.
Wenn Ihre Hauptaufgabe in einer browserbasierten Vektor-App darin besteht, UIs für das Web zu entwerfen, ist Figma eine ziemlich schwierige Option, um vorbeizugehen.
Gravit Designer ist ein ernsthafter Anwärter im Vektorraum als vielseitige, vielseitige Grafikdesign-Anwendung. Die Verwendung auf professionellem Niveau ist durchaus machbar, was durch die Tatsache, dass Gravit völlig hundertprozentig kostenlos ist, noch bemerkenswerter wird. Es gibt keine Kaufgebühren, Abonnementgebühren oder Werbung. Öffne einfach die App und entwerfe weg.
Die Software enthält robuste Vektorwerkzeuge wie einen klassischen Stift, das sehr praktische Bezigon-Werkzeug und hervorragende Freehand- und Shading-Werkzeuge. Es bietet die Möglichkeit, eine unendliche Leinwand zu haben, und es verfügt über eine lange Liste von Dimensionsvorgaben, sodass Sie mit einem Klick von der Größe "Website - Riesig" zur Größe "iPhone X" wechseln können.
Das „Pages“ -System bietet Ihnen eine Art Artboard-Art, Dokumente zu organisieren, und die Anker- und Symbolsysteme ermöglichen es Ihnen, wiederverwendbare Assets zu erstellen, die sich auf Seiten unterschiedlicher Größe semi-responsiv verhalten.
Eine meiner Lieblingsfunktionen von Gravit ist das unglaublich flexible System aus mehreren Füllungen, Rändern und Effekten. Ein einzelnes Element kann eine beliebige Anzahl von Füllungen, Rändern und Effekten aufweisen, die jeweils eigene Mischmodi und Deckkrafteinstellungen haben, sodass Sie sehr interessante Designstile erstellen können.
Gravit wird rasch verbessert, und das Entwicklungsteam fügt in kurzen Abständen nützliche Funktionen hinzu. Das letzte große Update fügte Symbole und verbesserte Anker hinzu. Der zuvor hinzugefügte Cloud-Speicher wird von Sketch-Importen und Plugins unterstützt. Gravit bewegt sich schnell und verbessert sich häufig.
Wenn Sie nach einer abgerundeten Anwendung suchen, in der Sie alles tun können, was Sie mit Vektoren benötigen, wird Gravit höchstwahrscheinlich diesen Kratzer kratzen.
Vectr ist eine leichtere Anwendung als Gravit oder Figma. Ich würde diese App als eine Anwendung beschreiben, wenn Sie schnell ein- und aussteigen möchten und keine steile Lernkurve benötigen. Die Tools und die Benutzeroberfläche von Vectr sind minimalistisch und intuitiv, und die exzellente Serie interaktiver Lernprogramme, mit denen Sie beim ersten Start begrüßt werden, macht die Software viel schneller verfügbar.
Eine der interessantesten Funktionen von Vectr ist, dass es über ein Plugin als vollwertiger Grafikeditor innerhalb eines WordPress-Verwaltungsbereichs verwendet werden kann, was in der Tat sehr praktisch sein kann.
Wenn Sie nicht viel Aufhebens wollen, aber ein einfaches Set robuster Werkzeuge möchten, könnte Vectr die Anwendung für Sie sein.
Bei BoxySVG geht es, wie der Name schon sagt, um SVG. Wenn Sie speziell Vektorgrafiken für das Web entwerfen möchten, ist diese Anwendung nur für diesen Zweck spezialisiert. BoxySVG versucht nicht, sich um Druckgrafiken, Schnittstellendesign oder andere Faktoren zu kümmern, die davon ablenken könnten, dass es sich um ein hervorragendes SVG-Designprogramm handelt.
Es enthält SVG-spezifische Funktionen, z. B. die Möglichkeit, Ansichtsfeldeinstellungen, die Ausrichtung von Objekten relativ zum Ansichtsfeld und die erhalteAspectRatio Einstellung - Sie müssen den Code Ihrer SVGs nach dem Export nicht eingraben. Da Sie im Browser entwerfen, werden Ihre SVGs natürlich genauso angezeigt, wie sie bei der Bereitstellung im Web angezeigt werden.
Wenn es sich bei SVG um Ihr Spiel handelt, insbesondere für das Web, sollten Sie unbedingt herausfinden, was BoxySVG zu bieten hat.
Wireframing ist eine Kategorie, in der die aktuelle browserbasierte Auswahl möglicherweise stärker ist als die Desktop-Angebote. Es kann hilfreich sein, dass Wireframing nicht ressourcenintensiv ist und dass die Nachfrage nach online verfügbaren Online-Frames aufgrund der häufigen Notwendigkeit einer Zusammenarbeit während der Planungsphase eines Projekts stark sein kann.
Schauen Sie sich vier der derzeit führenden, browserbasierten Wireframing-Apps in keiner bestimmten Reihenfolge an.
MockFlow dürfte viele Webdesigner besonders erfreuen, da es Drag-and-Drop-Komponenten für Bootstrap, Material Design, Foundation, KendoUI und eine Reihe anderer beliebter Frameworks bereitstellt. Wie in der Abbildung oben zu sehen, sind alle bekannten Framework-Komponenten einsatzbereit. Dies könnte für Rapid Prototyping sehr hilfreich sein, wenn Ihr bevorzugtes Framework in der Liste der MockFlow-Einschlüsse enthalten ist.
Wenn Sie MockFlow verwenden, um ein Wireframe für ein Framework-basiertes Projekt zu erstellen, wird es dem fertigen Produkt letztendlich sehr ähnlich sehen, während das Drahtmodell die Kapazität für schnelle Bearbeitungen und Iterationen behält. Komponententhemen sind standardmäßig Vanille, aber für jede Komponente können Farbe, Größe, Schriftarten usw. je nach Bedarf angepasst werden.
Für webdesignorientiertes Wireframing, insbesondere wenn Sie ein Framework verwenden, hat MockFlow eine Menge zu bieten.
Balsamiq ist eine Cloud-basierte Wireframing-Anwendung, die einfach und intuitiv zu bedienen ist. Am oberen Rand des Bildschirms werden Komponenten angezeigt, die Geräte, Bilder, Überschriften, Absätze, Formularelemente usw. darstellen. Ziehen Sie sie per Drag & Drop auf den Bildschirm, um Ihr Drahtgitter zu bilden. Sie können auch detailliertere Unterkategorien aufrufen, um die gewünschten Komponenten zu finden.
Der Stil der Komponenten ist ziemlich statisch, die meisten sehen aus wie von Hand gezeichnete Objekte. Balsamiqs Homepage sagt: „Sie sehen absichtlich wie Skizzen aus! Es fördert Brainstorming “. Dieser Brainstorming-Fokus bezieht sich auf die Kollaborationssysteme, die den Austausch zwischen Teammitgliedern ermöglichen, sodass Balsamiq im Planungsprozess eines Projekts ziemlich früh zu Hause zu sein scheint.
Wenn Sie ein ansehnliches Team haben und Ideen zwischen mehreren Personen auspirschen müssen, bevor Sie Ihre Zähne in ein Design versenken, ist Balsamiq möglicherweise die App für Sie.
Mockingbird ähnelt Balsamiq insofern, als Ihnen eine Auswahl standardisierter Komponenten angezeigt wird, die per Drag & Drop in Ihr Drahtgitter eingefügt werden können, z. B. Schaltflächen, Bilder, Banneranzeigen, Überschriften usw. Es können mehrere Seiten erstellt werden. Mit Live-Links können Sie von Modell zu Modell navigieren, während Sie Ihre Benutzeroberfläche testen oder Ihr Team oder Ihre Kunden zeigen.
Die Zusammenarbeit kann in Echtzeit erfolgen. Teilen Sie einfach einen Link mit Ihrem Kollegen oder Kunden und er kann Änderungen und Vorschläge vor Ort kommunizieren.
Wenn Sie in erster Linie eine effiziente Kommunikation mit Personen benötigen, die nicht vor Ort sind, schauen Sie sich Mockingbird an.
Wireframe.cc ist so etwas wie ein spartanisches, minimalistisches Wireframing-Tool, das nicht das A und O der anderen drei Anwendungen hat. Es ist jedoch auch das einzige, das völlig kostenlos ist.
Bei den verfügbaren Komponenten handelt es sich im Wesentlichen nur um Rechtecke mit runden oder quadratischen Ecken, Ellipsen und Platzhaltern für Bilder und Text. Sie können zwischen den Farben Orange, Schwarz, Weiß und einigen Graustufen wählen. Zusätzlich zu diesen Funktionen verfügen Sie über einige Gruppierungs- und Ausrichtungswerkzeuge sowie die Möglichkeit, Anmerkungen hinzuzufügen.
Wireframe.cc ist absichtlich spärlich, und manchmal ist es genau das, was Sie brauchen, wenn Sie schnell Ideen einholen müssen. Hier gibt es keine Analyse-Lähmung, sondern macht sich sofort an die Arbeit.
Die heutigen WYSIWYG-Editoren erfüllen in gewisser Weise die Rolle, die visuelle Gestaltungsprogramme wie Dreamweaver und Frontpage verwendet haben. In vielen anderen Bereichen haben sie sich jedoch weit von ihren Vorgängern entfernt. Sie können neuen Webdesignern immer noch dabei helfen, die Seile zu erlernen, sie können jedoch auch in fortgeschrittenen Projekten beträchtliche Zeitersparnisse bieten, wenn sie von erfahrenen Händen verwendet werden.
Schauen wir uns zwei der beliebtesten Browser-basierten WYSIWYG-Webdesign-Anwendungen genauer an.
Webflow ist sowohl für erfahrene Webdesign-Tierärzte als auch für Anfänger sehr nützlich. Dies liegt daran, dass zwar alles visuell erledigt werden kann, Sie jedoch immer noch mit den gleichen Dingen arbeiten, die Sie beim Handcodieren gewohnt sind.
Sie fügen divs und semantische Elemente hinzu, erstellen CSS-Klassen, müssen wissen, wie die absolute und relative Positionierung funktioniert, und Sie sind dafür verantwortlich, Ihre Websites so zu gestalten, dass sie reaktionsschnell sind. Hier gibt es keinen Blindflug, früher oder später müssen Sie lernen, was hinter den Kulissen los ist. Alles, was Webflow tut, ist eine visuelle Oberfläche über die Webdesign-Techniken, die Sie sonst manuell ausführen würden.
Für Anfänger des Webdesigns kann dies sehr hilfreich sein, um den Lernprozess zu unterstützen. Wenn Sie sehen, wie Ihre Änderungen in Echtzeit wirksam werden, kann dies einen langen Weg gehen. Für Veteranen ist Webflow ein hervorragendes Werkzeug für das Prototyping. Möglicherweise möchten Sie trotzdem lieber Ihren eigenen Code schreiben. Mit Webflow können Sie sich jedoch schneller bewegen, wenn Sie Ihr Design ausspähen. Ich habe es persönlich in Kombination mit der Handcodierung verwendet, um bei mehr als einer Gelegenheit enge Fristen einzuhalten.
Wenn Sie also ein junger Webdesigner sind, der die Lernkurve glätten möchte, oder ein alter Hase, der Zeit sparen möchte, ist Webflow eine Untersuchung wert.
Wo Webflow eine visuelle Schnittstelle zu herkömmlichen Webdesign-Techniken ist, ist Froont bestrebt, möglichst viele Punkte des Designprozesses zu berücksichtigen, um einen sehr anfängerfreundlichen und schnellen Designprozess zu erstellen.
Anstatt Divs, Text oder Bilder hinzuzufügen, fügen Sie jeweils ganze Abschnitte einer Site hinzu. Sie könnten in eine Navigationsleiste, eine Heldeneinheit, einen Inhaltsbereich, einige Preisanzeigen, eine Fußzeile gehen, und das ist ein Wrap. Froont bietet auch eine große Auswahl an Vorlagen, die als "Projekte" bezeichnet werden, die Sie klonen können, um Ihr Konstruktionsprojekt zu beginnen, falls Sie möchten.
Das heißt, fast alles ist editierbar, sobald es auf der Seite ist - einfach einschalten Expertenmodus Dinge wie Ränder und Ausrichtung anpassen.
Wenn Sie gerade erst mit dem Webdesign beginnen oder einen Prozess benötigen, der darauf abzielt, so frei wie möglich zu sein, ist Froont vielleicht genau das Richtige für Sie.
Einen voll funktionsfähigen, webbasierten Code-Editor zu finden, ist immer noch etwas schwierig. Es gibt einige webbasierte Editoren, aber wenn Sie nach Funktionen suchen, die Sie von Ihrem bevorzugten Desktop-Code-Editor gewohnt sind, werden nicht alle Optionen für Sie geeignet sein.
Das heißt, hier sind zwei Editoren, die sich vom Pack abheben und für das Kodieren unterwegs sehr praktisch sein könnten.
Caret ist einer der wenigen webbasierten Code-Editoren, mit dem Sie eine lokale Datei öffnen können. Dies hängt wahrscheinlich mit der Tatsache zusammen, dass die Installation über den Chrome-Webshop wie eine normale Anwendung erfolgt und offline arbeitet. Sie erhalten ein Verknüpfungssymbol für Ihren Desktop und es läuft ohne Browser-Chrome.
Die Liste der Funktionen ist ziemlich beeindruckend, vor allem inmitten einer etwas unfruchtbaren, browserbasierten Code-Bearbeitungslandschaft. Caret verfügt über Syntax-Highlighting, Themes, mehrere Cursor, eine Befehlspalette, Projektverwaltung, Plugin-Unterstützung und eine umfangreiche, frei konfigurierbare Einstellungsdatei "user.json".
Caret ist nicht nur kostenlos, sondern auch Open Source unter der GPLv2-Lizenz. Installieren Sie es aus dem Chrome Web Store. Wenn Sie möchten, können Sie das Repo klonen und die Installation manuell durchführen.
Wenn Sie einen Code-Editor benötigen, der überall verfügbar ist, und insbesondere wenn Sie mit einem ChromeOS-Gerät unterwegs sind, ist Caret genau das Richtige für Sie.
In CodeAnywhere können Sie keine lokalen Dateien öffnen. Sie können jedoch schnell und einfach eine Verbindung zu einem Speicheranbieter von Drittanbietern wie GitHub, BitBucket, Dropbox oder einem FTP-Server herstellen, auf dem sich Ihre Dateien befinden. Wenn Sie also Ihren Code ohnehin ohnehin schon in einen externen Speicher verschieben, kann dies den Prozess etwas reibungsloser gestalten.
CodeAnywhere bietet Syntax-Hervorhebungen für fünfundsiebzig Sprachen. Es stehen vier Themen und acht Farbschemata zur Auswahl, Code-Vervollständigung, Flusen und mehrere Cursor. Es verfügt auch über ein integriertes Terminal, Kollaborationstools und einen gespeicherten Versionsverlauf.
Ein besonders attraktives Feature ist der "Containers" -Dienst. Hierbei handelt es sich um Cloud-basierte Umgebungen mit CentOS oder Ubuntu, die für WordPress, NodeJS, Ruby und andere vorkonfiguriert sind.
Wenn Sie nach einer einfachen Möglichkeit suchen, an extern gehosteten Projekten zu arbeiten, oder wenn die Idee von "Containers" klingt, als würden Ihre Projekte reibungsloser laufen, sehen Sie sich CodeAnywhere an.
Der Bereich für browserbasierte Fotoeditoren ist etwas spärlicher als in anderen Kategorien. Dies ist nicht weiter verwunderlich, da die Fotobearbeitung wahrscheinlich ressourcenintensiv ist und ohne Desktop-Stromversorgung nur schwer zu erreichen ist.
Wir haben drei fähige Editoren zur Auswahl, aber zwei von ihnen (Pixlr und SumoPaint) benötigen Flash. Wenn Sie also schon länger auf Ihrem Rechner Flash aktiviert haben, müssen Sie es erst wieder abstauben, um es verwenden zu können diese zwei.
Wenn Sie Flash jedoch nur für bestimmte Apps aktivieren möchten, gehen Sie in Chrome zu Chrome: // Einstellungen / Inhalt / Flash, Fügen Sie dann die URL der App zur Liste der zulässigen Websites hinzu.
Polarr tut es nicht Sie benötigen Flash und ist ein übersichtliches Fotobearbeitungsprogramm, mit dem Sie Bilder schnell in Szene setzen können und für den Inhalt Ihrer Websites geeignet sind. Das Hinzufügen professioneller Filter ist eine einfache Angelegenheit mit nur einem Klick, es gibt detaillierte Beleuchtungs- und Farbsteuerungen und Sie können nach Herzenslust beschneiden, drehen, drehen und die Größe ändern.
Es hat sogar eine "Auto-Verbesserung" -Funktion, die Ihr Bild analysiert und verfeinert, ohne dass Sie einen Finger anheben müssen.
Polarr ist kostenlos, aber Sie haben die Möglichkeit, "Pro" -Extras zu kaufen, wenn Sie möchten, wie z. B. ein Textwerkzeug, einen Rauschentferner, ein Hochpassfilterset und ein Querformatfilterset. Die gesamte Sammlung von Pro-Tools kostet 19,99 US-Dollar
Wenn es Ihr Hauptziel ist, Fotos großartig aussehen zu lassen, die online gestellt werden sollen, ist Polarr ein fantastisches Werkzeug, um diese Arbeit zu erledigen.
Pixlr gibt es schon lange. Wenn ich früher keinen Zugriff auf Photoshop hatte, würde ich dies verwenden. Ich empfehle es Leuten, die Bildbearbeitung machen wollten, aber keinen Kauf von Software rechtfertigen konnten.
Pixlr verfügt über die Werkzeuge, die Sie in einer Desktop-Rasteranwendung erwarten würden, z. B. Bleistift, Pinsel, Radiergummi, Eimer, Farbverlauf, Klonstempel, Grundformzeichnung, Text, Weichzeichnen, Schärfen, Flecken, Ausweichen, Brennen usw. Es verfügt über ein einfaches Ebenenstil-System, das Schlagschatten, inneren Schatten, Abschrägung, äußeres Glühen und inneres Glühen umfasst. Und es hat eine umfassende Liste von Filtern und Einstellungen - bedenken Sie jedoch, dass diese Funktionen dies sind nicht zerstörungsfrei.
Sie können Pixlr für das Design, das Freihandzeichnen und das Retuschieren und Bearbeiten von Fotos verwenden. Wenn Sie webbasierte Software mit mehr Desktop-ähnlichen Tools als Polarr benötigen, könnte Pixlr diese Lücke füllen.
SumoPaint ist Pixlr sehr ähnlich und stammt aus derselben Zeit. Es bietet auch die Art von Werkzeugen, die Sie in einem Desktop-Raster-Editor erwarten würden, sowie eine große Auswahl an Filtern und Anpassungen.
Jedoch SumoPaint hat fortgeschrittenere Werkzeuge zur Formerstellung, wie Sterne, Kuchen und so weiter. Darüber hinaus verfügt es über ein geschicktes Symmetrie-Zeichenwerkzeug und ein nützliches Werkzeug zur freien Transformation. Es gibt auch einige zusätzliche Ebenenstile: Farbüberlagerung, Kontur, Abschrägung und Farbverlauf.
Insgesamt sind Pixlr und SumoPaint sehr ähnlich und nehmen im Wesentlichen die gleiche Rolle ein. Wenn Sie also nach einer Browser-basierten Anwendung dieser Art suchen, ist es das Beste, was Sie tun können, indem Sie beide versuchen und sehen, welche Ihnen am besten gefällt.
Damit ist unser 2018-Überblick zum aktuellen Stand der Browser-basierten Software für Webdesigner abgeschlossen.
In Summe:
Als Hinweis für die Zukunft von browserbasierten Anwendungen sollten Sie nach dem Aufkommen von WebAssembly Ausschau halten, einer aufstrebenden Technologie, die selbst intensive Software wie Video-Editoren nahezu native Leistung bieten wird. Das könnte die Dinge wirklich aufmischen!
In der Zwischenzeit können Ihre Reisen und ultra tragbaren Geräte durch einige der Anwendungen auf dieser Liste produktiver sein!
Accentsconagua