www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

State of Browser-Based Web Design Applications: 2018

Browser-based applications are becoming more and more prevalent, and their viability for use in web design is steadily increasing. Sure, they might not have the full grunt of desktop-based applications, but they can still be very powerful regardless, and they come with perks you typically won’t find in regular software.

First, browser-based applications are cross platform compatible. It doesn’t matter if your preferred desktop OS is Linux, MacOS, Windows or even ChromeOS, as long as it has a browser you’re good to go. Depending on the apps, you might find you can even use them to get extra work done on an iOS or Android tablet.

Second, you have the ability to access the applications anywhere, with zero installation or management. Spin up your favorite software on a computer you don’t normally use. And never have to worry about handling updates again.

In this article we’ll check out the state of browser-based applications in 2018. We’ll be looking at four key areas that matter to web designers:

  • Vector and UI
  • Wireframing
  • Code Editing
  • Photo and Raster

Let’s go!

Vector and UI

Even the best vector and UI design software on the desktop can be resource intensive. As such, it’s quite noteworthy how strong the browser apps in this category are right now. It’s one thing to create apps that compare on light tasks, but to make professional grade graphic design software in the browser is quite another. And yet, multiple developers seem to have achieved this feat.

The following four are my current top picks for vector and UI design apps in the browser:

Figma

Figma is an application that falls squarely in the web designer’s wheel house. While it is capable of doing all kinds of vector work and is a powerful graphic design application in general, it is especially well suited to interface design for websites and web based apps.

One of the standout features it offers for web designers is the ability to create multiple individual “frames”, which can be used in a similar way to artboards. For example, you might create a frame to represent each page in a site design.

Where it gets interesting is that any item within a frame, say a “contact” button for example, can be connected with another frame, such as one depicting a contact page. This is done by dragging a connecting line out from the button to the target frame, which converts said button into a “hotspot”. In presentation mode, if the hotspot is clicked it will load up the frame it is connected to, making this feature great for simulating the movement flow from one part of a web UI to another.

When the design stage is done, Figma makes it easy to grab the information required for coding, such as dimensions, positions, font settings, hexcodes and so on. It can also generate copy & paste ready CSS you can plug straight into your code. And when image assets are needed, they can be bulk exported all at once or individually as required.

If your primary task in a browser based vector app is going to be designing UIs for the web, Figma is a pretty hard option to go past.

  • Pricing: Free for up to three projects, $12 p/m for unlimited projects and team oriented features.
  • Website: www.figma.com

Gravit

Gravit Designer is a serious contender in the vector space as an all-rounder, multi-purpose graphic design application. It’s entirely viable to use at a professional level, something that is made more remarkable by the fact Gravit is completely, one hundred percent, free. There are no purchase fees, subscription fees or advertising. Just open up the app and design away.

The software includes robust vector tools such as a classic style Pen, the super handy Bezigon tool, and excellent Freehand and Shading tools. It provides the ability to have an infinite canvas, and it has a long list of dimension presets so you can switch from “Website – Huge” size to “iPhone X” size with the click of a button.

The “Pages” system gives you an artboards-type way of organizing documents, and the anchors and symbols systems combined allow you to create reusable assets that behave semi-responsively when placed on pages of different sizes.

One of my favorite Gravit features is its incredibly flexible system of multiple fills, borders and effects. A single item can have any number of fills, borders and effects, each with their own blending modes and opacity settings, allowing you to create very interesting design styles.

Gravit is being rapidly improved, with the development team adding highly useful features at frequent intervals. The last major update added symbols and enhanced anchors. The one before that added cloud storage, Sketch imports and plugin supports. Gravit moves fast and improves often.

If you’re looking for a well-rounded application in which you can do just about anything you need with vectors, Gravit is most likely going to scratch that itch.

Vectr

Vectr is a more lightweight application than Gravit or Figma. I’d describe this app as one to use when you want to get in and out quickly, and without a steep learning curve. Vectr’s tools and interface are minimalist & intuitive, and the excellent series of interactive tutorials you are greeted with on first launch make the software that much faster to pick up.

One of Vectr’s most interesting features is that, via a plugin, it can be used as a fully fledged graphics editor inside a WordPress admin area, something that could be very handy indeed.

If you don’t want a lot of fuss, but you do want a straightforward set of robust tools, Vectr could be the application for you.

BoxySVG

BoxySVG, as the name suggests, is all about SVG. If you are specifically setting out to design vector graphics for the web, this application is specialized for just that purpose. BoxySVG is not trying to concern itself with print graphics, or interface design, or anything else that could distract from it being a great SVG design program.

It includes SVG specific features like being able to control view box settings, alignment of objects relative to the view box, and the preserveAspectRatio setting–no need to dig into the code of your SVGs after export. And of course, because you’re designing in the browser, you’ll be seeing your SVGs exactly as they’ll appear when deployed to the web.

If SVG is your game, particularly for web, definitely check out what BoxySVG has to offer.

Wireframing

Wireframing is a category where the current browser-based selection might actually be stronger than the desktop offerings. It may help that wireframing is not resource intensive, and that demand for accessible wireframes online might be strong due to the frequent need for collaboration during a project’s planning stage.

Check out four of the leading browser-based wireframing apps available right now, in no particular order.

MockFlow

MockFlow is likely to be of particular delight to many web designers due to the fact it has drag and drop ready components for Bootstrap, Material Design, Foundation, KendoUI and a number of other popular frameworks. As seen in the image above, all the familiar framework components are ready for use, something that could be incredibly helpful for rapid prototyping if your favorite framework is in the list of MockFlow inclusions.

When you use MockFlow to create a wireframe for a framework-based project it’s going to look very much like the finished product ultimately will, while the wireframe will retain the capacity for quick edits and iterations. Component theming is vanilla by default, but each component can have its color, size, fonts and so on customized as needed.

For web design focused wireframing, especially if you are using a framework, MockFlow has a whole lot to offer.

  • Price: Free for one user, sharing restrictions removed from $14 per month
  • Website: mockflow.com

Balsamiq

Balsamiq is a cloud-based wireframing application that is simple and quite intuitive to use. Across the top of the screen is a visual display of components representing things like devices, images, headings, paragraphs, form elements and so on. Drag and drop them onto the screen to form up your wireframe. You can also drill down further into subcategories to help you find the components you’re looking for.

The style of the components is fairly static, with most looking like hand drawn objects. Balsamiq’s homepage says, “They look like sketches on purpose! It encourages brainstorming”. This brainstorming focus ties into the collaboration systems that allow sharing between team members, making Balsamiq seem most at home fairly early in the planning process of a project.

If you have a sizable team and need to hash ideas out between several people before sinking your teeth into a design, Balsamiq might be the app for you.

Mockingbird

Mockingbird is somewhat similar to Balsamiq in that you are presented with a selection of standardized components ready to drag and drop into your wireframe, such as buttons, images, banner ads, headings and so on. Multiple pages can be created, and live working links can allow you to navigate from mockup to mockup as you test out your UI or show your team or clients around.

Collaboration can be done in real time; just share a link with your colleague or customer and they’ll be able to communicate changes and suggestions on the spot.

If your foremost need is efficient communication with people who are off site, take a look at Mockingbird.

Wireframe.cc

Wireframe.cc is something of a spartan, minimalist wireframing tool that doesn’t have the bells and whistles of our other three applications. However it’s also the only one that’s completely free of charge.

The components you have available are basically just rectangles with round or square corners, ellipses, and placeholders for images and text. You can choose from the colors orange, black, white and a few shades of grey. In addition to these features you also have some grouping and alignment tools, and the ability to add annotations.

Wireframe.cc is deliberately sparse, and sometimes when you need to get some ideas down fast that’s exactly what you need. There’s no paralysis by analysis here, just getting straight down to work.

WYSIWYG

Today’s WYSIWYG editors in some ways fill the role that visual design programs like Dreamweaver and Frontpage used to, but in many other ways they’ve progressed well beyond their predecessors. They can still help new web designers learn the ropes, but they can also be massive time savers in advanced projects when used by experienced hands.

Let’s take a closer look at two of the most popular browser based WYSIWYG web design applications.

Webflow

Webflow does a great job of being useful to both seasoned web design vets and beginners alike. This is due to the fact that while everything can be done visually, you are still working with all the same things you’re used to when hand coding.

You’ll add divs and semantic elements, you’ll create CSS classes, you’ll need to know how absolute and relative positioning works, and you’ll be responsible for building out your sites to be responsive. There’s no flying blind here, sooner or later you’ll have to learn what’s going on behind the scenes. All Webflow does is put a visual interface over the web design techniques you’d otherwise be doing manually.

For beginners to web design, this can do a lot to help with the learning process. Seeing your changes take effect in real time can go a long way. For veterans, Webflow is a great prototyping tool. You might still prefer to write your own code, but Webflow can allow you to move much faster when hashing out your design. I’ve personally used it in combination with hand coding to make tight deadlines on more than one occasion.

So if you’re a fledgling web designer looking to smooth the learning curve, or an old hand looking to save time, Webflow is worth looking into.

  • Price: Free for two projects, $16 p/m for ten projects, $35 p/m for unlimited projects.
  • Website: webflow.com

Froont

Where Webflow is a visual interface over regular web design techniques, Froont is definitely aimed at trying to take care of as many points of the design process as possible to create a very beginner friendly and fast design process.

Rather than adding divs, or text, or images, you’ll add entire sections of a site at a time. You might drop in a nav bar, a hero unit, a content section, some pricing panels, a footer, and that’s a wrap. Froont also has quite an extensive selection of templates, referred to as “Projects”, which you can clone to begin your design project should you
choose.

That said, just about everything is editable once it’s on the page–just toggle on Expert Mode to adjust things like margins and alignment.

If you are just getting started in web design or you need a process aiming to be as hands free as possible, Froont might be right up your alley.

Code Editors

Finding a full featured web-based code editor is still a little tricky. There are quite a few web based editors out there, but if you’re looking for something with the type of features you’re used to from your favorite desktop code editor not all of the options will suit.

That said, here are two editors that stood out from the pack, and could be very handy for on the go coding.

Caret

Caret is one of the few web-based code editors with which you can open a local file. This is likely to do with the fact it installs, through the Chrome web store, like a regular application and works offline. You’ll get a shortcut icon for your desktop, and it runs without any browser chrome around it.

The list of features is quite impressive, particularly in the midst of a somewhat barren browser-based code editing landscape. Caret has syntax highlighting, themes, multiple cursors, a command palette, project management, plugin support, and an extensive, freely configurable “user.json” settings file.

Not only is Caret free, it’s also open source under the GPLv2 license. Install it from the Chrome Web Store, or if you’d prefer you can clone its repo and handle installation manually yourself.

If you need a code editor that can go anywhere, and in particular if you’re a dev on the move with a ChromeOS device, Caret could be just what you need.

CodeAnywhere Editor

CodeAnywhere doesn’t allow you to open local files, but what it does do is quickly and easily connect with a third party storage provider like GitHub, BitBucket, Dropbox or an FTP server, on which your files are located. So if you’re already pushing your code to external storage at the end of the day anyway, this can make that process a little smoother.

CodeAnywhere has syntax highlighting for seventy-five languages, it has four themes and eight color schemes to choose from, it offers code completion, linting and multiple cursors. It also has a built in terminal, collaboration tools, and saved revision history.

One particularly compelling feature is it’s “Containers” service, which are cloud-based environments running CentOS or Ubuntu, and preconfigured for WordPress, NodeJS, Ruby and others.

If you are looking for an easy way to work on your externally hosted projects, or if the idea of “Containers” sounds like it would make your projects run smoother, take a look at CodeAnywhere.

  • Price: Free for basic features, or from $2 p/m for revisions system, from $7 p/m for containers and additional features.
  • Website: codeanywhere.com

Photo and Raster

The range for browser-based photo editors is a little more sparse than our other categories, which is not surprising at present given photo editing is probably the most resource intensive and difficult to achieve without desktop power.

We do have three capable editors to choose from, however two of them, (Pixlr and SumoPaint), require Flash so if it’s been a while since you had Flash active on your machine you’ll need to dust it off again in order to use these two.

On that note, if you want to enable Flash but only for specific apps, in
Chrome go to chrome://settings/content/flash, then add the
URL of the app to the list of allowed sites.

Polarr

Polarr does not need Flash, and is a neat photo editing application that lets you quickly get images looking spiffy and ready for use in your sites’ content. It makes adding pro-looking filters a simple one click affair, there are in depth lighting and color controls, and you can crop, flip, rotate and resize to your heart’s content.

It even has an “Auto enhance” function that will analyze your image and spruce it up without you lifting a finger.

Polarr is free, but you have the option to buy “Pro” extras if you wish, such as a text tool, noise remover, portrait filter set, landscape filter set, among others. The entire collection of “Pro” tools is $19.99

If your main goal is to get photos looking great for posting online, Polarr is a fantastic tool to get that job done.

Pixlr (Requires Flash)

Pixlr has been around for quite a long time. Back in the day, if I didn’t have access to Photoshop this is what I would use, and it’s what I recommended to people who wanted to do image editing but couldn’t justify a software purchase.

Pixlr has the tools you’d expect to find in a desktop raster application, such as pencil, brush, eraser, bucket, gradient, clone stamp, basic shape drawing, text, blur, sharpen, smudge, dodge, burn and so on. It has a simple layer style system that includes drop shadow, inner shadow, bevel, outer glow and inner glow. And it has a comprehensive list of filters and adjustments–just bear in mind that these functions are not non-destructive.

You can use Pixlr for design, freehand art, and photo retouching and editing. If you need web-based software with more desktop like tools than Polarr, Pixlr just might fill that gap for you.

SumoPaint (Requires Flash)

SumoPaint is very much like Pixlr, and harkens from the same era. It also has the type of tools you’d expect to find in a desktop raster editor, plus a strong selection of filters and adjustments.

However, SumoPaint has more advanced shape creation tools, like stars, pies and so on. In addition, it has a nifty symmetry drawing tool, and a useful free transform tool. It also has some extra layer styles: color overlay, stroke, gradient bevel and gradient glow.

Overall, Pixlr and SumoPaint are very similar and fill essentially the same role, so if you’re looking for a browser-based application of this nature the best thing you can do is give both a try and see which one you like best.

Wrapping Up

That concludes our 2018 round up of the current state of browser-based software for web designers.

In summary:

  • Vector editors are powerful and there’s some stiff competition.
  • Wireframing tools cover the spectrum from one color minimalist to full framework-based prototyping.
  • Code editors are not plentiful, but the standouts have some very compelling features.
  • Raster design apps need some love as Flash still lingers on, but Polarr is an outstanding photo editing app.

As a note for the future of browser-based applications, keep an eye out for the rise of WebAssembly, an emerging technology that will allow even intensive software like video editors to run with near native performance. That could really shake things up!

In the meantime, may your travels and ultra portable devices be more productive as a result of some of the applications on this list!