Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Sketch, Illustrator or Fireworks? Exploring A New Free UI Design App: Gravit

One of the most popular tools for screen design and illustration in the last couple of years has undoubtedly been Sketch, which became an important part of many designers’ responsive web design1 and mobile design and prototyping2 workflows.

However, an increasing number of other tools are becoming available. In this article, I will explore the first browser-based app to be viable in the vector illustration and UI design space: Gravit3.

Further Reading on SmashingMag: Link

First, a bit of background. I’ve been a fan of Adobe Fireworks for many years — I have used it for UI design, for digital illustration and for creating a quick mockup or wireframe every once in a while. (You can check Smashing Magazine’s Fireworks section8 for a quick refresher. Really, many excellent articles and tutorials are out there.)

I enjoyed Fireworks mostly as an illustration tool — I used it for all of my digital illustration work and in various side projects, such as my Friday Bunny9 series.

Friday Bunny by Ani Kostova, episode 65 (created in Adobe Fireworks)10

“Friday Bunny” illustration, episode 6511, created in Adobe Fireworks, all vectors. (View large version12)

Using Fireworks was intuitive to me, and its tools and features perfectly matched my needs.

Pig with Broken Banjo by Ani Kostova (created in Adobe Fireworks)13

“A Pig With a Broken Banjo” illustration, created in Adobe Fireworks, and posted as part of the Dueling Pigs With Banjos14 project. (View large version15)

So, back when Adobe declared16 that it would stop development of Fireworks, it was a sad day for me, as well as for many others who didn’t need the overcomplicated Photoshop and who favored the lightweight yet powerful Fireworks. Since then, many user interface designers have been searching for a reliable alternative, one such being Bohemian Coding’s Sketch17. Smashing Magazine even published not so long ago a pretty good collection of tips for people who want to switch from Fireworks to Sketch18.

Unluckily for some of us, Sketch is a Mac-only app, which means that if you don’t own a Mac, you won’t be able to even try it. So, here comes Gravit, a promising app that I discovered a few months ago as part of my research to find a good alternative to Fireworks.

Why Gravit? Mainly because Sketch and Affinity Designer19 (a Mac-only app, too) are not options for me. (Note: While my article was been prepared for publishing, the Affinity team announced that they’ll release a version of Affinity Designer for Windows20, but we’ll have to wait for the first public beta at least a few months.)

Don’t get me wrong — I’ve read many positive articles about Sketch, and I am sure it is a worthy alternative to Fireworks. However, being Mac-only is a serious limitation, in my opinion — what if you use both Windows and Mac and need to be able to run Sketch on both systems? What if you don’t use a Mac at all? (I’m not the only one21 who feels this way22.)

This is why Gravit raised my hopes. So, I decided to give it a try and test it seriously. After a few months of using it, I feel ready to review its features and offer some practical tips and tricks I’ve learned along the way.

Note: Some people still use Fireworks for illustration and UI design because it has excellent capabilities. However, development of Fireworks stopped over two years ago, and I strongly recommend finding a replacement, if you haven’t already.

A rocket illustration, created in Adobe Fireworks23

A Fireworks illustration created in 2014 by Fabio Benedetti — the illustration is from his article “Designing a Rocket Icon in Adobe Fireworks24.” (View large version25)
Ferrari 288 GTO, created in Adobe Fireworks26

A Fireworks illustration created in 2015 by James Parker27. (View large version28)

Let’s start with the basics.

What Is Gravit? Link

Gravit is a screen design (and collaboration) tool that runs in the browser, so it does not need installation or configuration. To try it, go to the sign-up29 page, create an account and then you can create (and save) your first design. Simple, huh?

Of course, a tool that runs in the browser has some pros and cons (both of which I’ll speak about in more detail further on). The main pro is that if you have access to a modern desktop browser, it doesn’t matter whether you use Gravit on Windows, Mac or Linux — it should run equally well everywhere. The downside of this is that your designs are kept on Gravit’s server, and without an Internet connection you won’t be able to access them. (Minor note: The development team recommends Chrome for running Gravit, but it performs well in Firefox, too.)

Gravit is free to use and, as far as I know, will always be free. I suppose some paid extras might be offered in future, though.

Now, I know what you’re thinking: “A design tool that works as a web app? Its feature set must be very limited.” Surprisingly, that is not the case.

Gravit’s feature set is actually quite solid, and some of its features are on par with those in Fireworks30, Sketch and even Illustrator31. Because Gravit was initially created in the spirit of FreeHand, the two have quite a few similarities, but many differences32 as well.

(In case you’re interested in ancient computer history: Macromedia FreeHand33 was a vector illustration tool similar to Illustrator, and it was quite powerful. Before Adobe acquired Macromedia, Macromedia decided to stop its development because many of its features closely overlapped Illustrator’s. FreeHand also integrated well with Fireworks and Flash, two design tools later acquired by Adobe, one of which, as mentioned, has been discontinued as well.)

I have many years of experience with Fireworks (and Illustrator), and I have been doing illustration work with Gravit for a few months now. I have to admit that, so far, I like Gravit. A few important features are still missing, but the development pace is fast and perhaps they will be added later. (Here’s to hoping, at least!)

“Totoro” is an illustration I created in Gravit while exploring its features.34

Totoro35” is an illustration I created in Gravit while exploring its features. (View large version36 or view in Gravit37)
“Plane” is another illustration I created in Gravit.38

“Plane” is another illustration I created in Gravit. (View large version39)

Features of Gravit Link

I use Gravit mostly as a tool for vector illustration. So, in the next section, I will review some of its most interesting features in more detail. But it should be pretty good for user interface design, too, because it has plenty of tools geared to UI designers.

“Buddies” is a little illustration I created in Gravit recently.40

“Buddies” is a little illustration I created in Gravit recently. (View large version41)

Interface Overview Link

If you have used other graphic design programs, such as Fireworks42, Illustrator43, Photoshop44 and Sketch, Gravit’s interface will immediately look and feel familiar to you. There’s the familiar main toolbar (at the top), a Layers panel on the left, and a Properties panel (called “Format” in Gravit) on the right.

Gravit user interface45

The current version of Gravit’s user interface. (View large version46)

The lone toolbar and two panels makes the user interface feel quite minimalist, but (as I discovered after spending some time with it) this is a result of some clever planning to reduce clutter. For example, unlike in Fireworks and Illustrator, Gravit has no dedicated Align panel; however, once you select one or more objects on the canvas, options to align them appear at the top of the Format panel. And if that’s not enough, you can access a few more advanced options simply by expanding this section in the panel. Smart!

Gravit user interface47

Aligning objects in Gravit: Why introduce a new panel if you can do everything with one? (View large version48)

Canvas Link

Let’s begin with the canvas because this is where everything starts.

In Gravit, the canvas can be a fixed width or infinite in size. To switch from fixed width to infinite (or vice versa) at any time, simply type 0 (zero) in either the “Width” or “Height” field in the Format panel. (One thing I’ve always missed in Fireworks is an infinite canvas. Fireworks allows only a fixed-width canvas of up to 6000 × 6000 or 10,000 × 10,00049 pixels. In this regard, Gravit is much closer to Sketch, which supports an infinite canvas as well, and I really like it.)

Switch to an infinite canvas in Gravit. (View video50)

Gravit’s canvas can be set to transparent, a solid color or a radial or linear gradient.

Vector Tools (Overview) Link

Most of the user interface design and digital illustration tasks involve working with vectors. Thus, the vector tools are the most widely used in any serious design application.

I am happy to say that the vector engine in Gravit is excellent — I have explored it extensively and I think it performs quite well. Here’s a list of vector tools currently available in Gravit:

  • Pen tool,
  • Bezigon tool,
  • Text tool,
  • Line tool,
  • Auto shapes: rectangle, ellipse, triangle, polygon and star.

Working with vectors in Gravit is intuitive, perhaps even more intuitive than in Fireworks or Illustrator. (I’ll talk about some of the vector tools in Gravit in more detail later in this article.)

There are also many options for selecting and subselecting objects, paths and vector nodes:

  • For example, in addition to the common Pointer tool and Subselection tool, you have a Lasso tool (for quickly selecting multiple objects) and a Layer tool (for selecting whole layers directly on the canvas).
  • The Pointer and Subselection tools work roughly the same way as in Fireworks and Illustrator. However, some smart little workflows are built in here. For example, double-click an object and it will switch to edit mode. Or select a group (a single click with the Pointer tool), and then you can subselect any object within the group without having to switch to the Subselection tool.

Here’s another thing that Gravit does well. If you select a rectangle with rounded corners and then scale it, the corners will not distort. (Fireworks would sometimes skew corners when a transformation is applied.)

Bitmap Tools (Overview) Link

Gravit supports some basic bitmap manipulation. You can quickly clip a bitmap object using a vector shape (see one of the following quick tutorials51 on using the clipping feature52), you can use different blending modes for bitmaps, and you can create masks with alpha transparency.

Apart from clipping, masking, adjusting blending modes, resizing and adding live filters, you can’t do much else with bitmaps in Gravit. There is no way to create marquee selections to cut or copy portions of a bitmap, and there are no tools for manipulating individual pixels. But how often would you miss advanced bitmap tools when you’re working on an illustration project or a user interface design? I have to admit that, when I am working on a digital illustration, I rarely need any bitmap tools at all.

Clipping objects in Gravit is easy — select two objects and press “Clip” in the main toolbar. Or cut the first object and go to “Edit” → “Paste Inside Selection” to paste in the second one. You’re not limited to clipping bitmaps either — you can clip vector shapes, too.53

Clipping objects in Gravit is easy — select two objects and press “Clip” in the main toolbar. Or cut the first object and go to “Edit” → “Paste Inside Selection” to paste in the second one. You’re not limited to clipping bitmaps either — you can clip vector shapes, too. (Image: Jason Parrish54, CC55) (View large version56)

Features are being added quite often, so if you can’t find one, chances are it’s coming in a future update. For example, as I was writing this, I learned that the much-needed Crop tool (for bitmaps) would appear in the next update57; indeed, within a few days, the tool showed up.

Crop tool58

New Crop tool59. (View large version60)

Nevertheless, when I used Fireworks, being able to quickly edit a bitmap object without having to switch to another program was quite useful in some cases. So, I would be happy to see more bitmap tools come to Gravit in the future.

Pen Tool and Bezigon Tool Link

A basic yet essential feature for designers and illustrators is the Pen tool, because of its flexibility and value when you’re quickly creating a wide range of editable lines, curves and shapes.

The Pen tool in Gravit works as I would expect. You can create vector points (vector nodes), connect them and create both straight and curved paths. When using the Pen tool, you can use modifier keys (Alt or Shift) and combinations thereof to easily switch between straight and curved paths, to set the created paths at 0-, 45- and 90-degree angles, and so on.

You also have the Bezigon tool, which nicely complements the Pen because it allows you to create complex vector shapes, while providing more control over each new node created. Using the Bezigon tool, it’s easy to create perfect circles, ellipses, wave shapes, spirals and other symmetrical vector paths.

Bezigon tool in Gravit.61

A few shapes I created using the Bezigon tool in Gravit. (View large version62)

Tip: To create a simple path using the Bezigon tool, click with the mouse (to create a point), move the mouse and click again (to draw a straight line between the two points); you will not notice any difference between this and the Pen tool. Things get more interesting when you use the following workflow: Click, hold Alt and click again; the next node will be created with two symmetrical handles attached to it, and their angle will change automatically depending on the next node created!

See a live demo of how I was able to create a perfect spiral with just a few clicks:

Click, hold Alt and click again — you’ll get a perfect spiral path! (I’ve switched on the Grid option in Gravit so that it’s easier to space out nodes at specific distances from each other.) (View large version63)

Mastering the Bezigon tool requires some time, but I think it’s worth it because it offers more possibilities than what you’d expect from the Pen tool. The following few tutorials might help:

Knife Tool Link

The Knife tool is also an important part of any illustrator’s workflow, and I was pleasantly surprised to find that Gravit’s Knife tool offers more options than the Knife tool in other design programs I’ve used.

In Gravit, you can cut objects using curved lines, not just straight lines (which is impossible in Fireworks). (View Video67)

For example, the Knife tool in Gravit can make multiple cuts in one pass (using both straight and curved lines), and you can cut text objects like any regular vector path.

Select the Knife tool, hold Alt and click a few times to make multiple cuts in one pass. To keep the Layers panel better organized, after you make multiple cuts in one pass, the Knife tool will create two groups of objects; however, these can easily be ungrouped at any time (Control/Command + Shift + G) if you need to tweak the individual shapes. (View video68)

Compound Shapes Link

Being able to non-destructively combine two or more vector objects is a key part of any designer or illustrator’s workflow, and this is why most design applications have such a feature.

But what are compound shapes? They are dynamic, editable groups of objects. You can combine multiple vectors into a single complex shape, and each component vector will remain editable on its own. Multiple combination methods allow the designer to choose whether shapes are added or removed and whether the shape or the negative space is the focus of the combining action.

Gravit has a compound shape feature that allows vector objects to be combined into a single group non-destructively. Four modes are available for combining shapes:

  • Union,
  • Subtract,
  • Intersection,
  • Difference.

One clear advantage of compound shapes in Gravit is that you can switch a shape from one type to another easily and as many times as needed. For example, a Union shape can be changed to Subtract using the dropdown menu next to the “Merge” button in the main toolbar, or by using the Format panel.

Note: In Gravit, the option to create a compound shape is called “Merge” in the main toolbar, but if you’re using the menus, you’ll find the same feature in “Modify” → “Create Compound Shape.”

Changing a compound shape’s type on the fly is easy, and you can split a compound shape into individual objects at any time.

The individual objects within a compound shape group remain fully editable. To edit them, simply subselect the individual shapes using the Subselection tool. You can also manipulate individual shapes within a compound shape group using the Layers panel — you can subselect them, change their stacking order and even add a new object to an existing compound shape group simply by dragging and dropping it from another layer into the compound shape’s group layer.

Converting a compound shape into a single path (i.e. a single vector object) is also possible by going to “Modify” → “Path” → “Convert to Path” (or Control/Command + Shift + P).

Tip: The same command in Gravit — “Convert to Path” — will also convert any auto shape object into a simple vector path.

When working on a more complex illustration or design in Gravit, you can even use nested compound shapes! Basically, you can insert a compound shape group into another one. This can be a pretty powerful feature when used in the right place, and I think it’s pretty special.

Exporting, Saving and Importing Options Link

You might feel your options are a bit restricted in this area, because Gravit currently supports exporting and saving to the following formats only:

  • PNG32 and PNG24;
  • JPG (exported JPG files are usually rather large because they are exported at the highest possible quality);
  • SVG.

Note: “Export” in Gravit is labeled “Download.”

You can import all of the file formats mentioned above, plus EPS (although that is limited).

In Gravit’s defence, SVG69 is more important than ever today, and the app offers excellent SVG support. It can both export to SVG and import SVG files. Importing is as easy as dragging and dropping to the canvas (or, in the menu, “File” → “Import” → “SVG”). What’s more, you can use the clipboard to copy and paste from Photoshop CC and Illustrator CC into Gravit (preserving the clipboard’s content as editable vectors), because the latest versions of these Adobe programs copy editable SVG vectors to the clipboard.

I have also tested SVG files exported from Gravit, and they display perfectly in Chrome and Firefox. While an exported SVG file sometimes exhibits a few differences from the original, this doesn’t worry me much because SVG exporting in Gravit is still a work in progress and constantly improving.

This SVG file, exported from Gravit, is rendered by the browser exactly as intended

This SVG file, exported from Gravit, is rendered by the browser exactly as intended. (Source: @gravit_io70) (View large version71)

(Note: Fireworks never supported SVG natively. Even if you get SVG support with the help of free extensions such as SVG Export72 or SVG Import73, you might often run into various problems, especially when dealing with more complex SVG files.)

Working With Color Link

Working with colors in Gravit is fairly straightforward. While the pop-up Color panel is a bit too minimal, it does the job. Recent update to the panel also introduced swatches and “Colors in use” (a feature that shows all colors used within the current document).

Gravit supports RGB and HSB color modes, which are more than enough for my needs. (It also supports CMYK, but because CMYK is for print only, I haven’t needed it in my workflow so far; however, Gravit can be used for print tasks74, too.)

Switch between color modes

Switch between color modes. (View large version75)

Gradients work like in Fireworks, too. And they are live, so it’s easy to transform them and see the changes in real time. Gravit has only two types of gradients, though: radial and linear (Fireworks has many more76). In Gravit, you can apply gradients to both fills and strokes, which is very useful. (Please note that in Gravit, “stroke” is labeled as “border,” just as in CSS77.)

In addition to the standard color options for fills (transparent, solid color, and radial and solid gradients), Gravit also has an option for background fill. You can also pick colors right from the canvas using the simple Eyedropper tool. And, just like in Fireworks, you have access to the system’s color picker.

Gravit has separate opacity settings for fill and stroke.

(Pre)view Mode Link

Gravit has four (pre)view modes: Full, Fast, Outline and Output, which give you a lot of flexibility. However, a “real pixels” preview mode is missing; so, if you zoom in, you’ll see that all of your vectors are perfectly smooth, no matter the zoom level (similar to how Illustrator works).

Meanwhile, Fireworks has only one preview mode for all of your design documents, “real pixels,” which means that when zoomed in, you would see the vectors exactly as they would be rendered when exported. This is a very useful feature for any UI designer or illustrator out there. Sketch also offers a real-pixels mode.

Personally, I prefer the real-pixels preview because it shows my illustrations for the screen more realistically. I hope this preview mode comes to Gravit in a future update.

Copy And Paste Object Attributes (And Other Small Enhancements) Link

Sometimes the little details (or a combination of several minor features) make an app very useful for certain purposes. I’ll list a few such features that I find particularly useful:

Copy and paste object attributes Link

Fireworks had one minor feature that I used every day. Select any object on the canvas, press Control/Command + C (or go to “Edit” → “Copy”), and then select any other object(s), and press Control/Command + Alt + Shift + V (or “Edit” → “Paste Attributes”); as a result, the attributes of the first object (the fill, stroke, live filters and their settings, etc.) will be applied to the other object(s).

In Gravit, you can copy and paste object attributes, too, except that the feature is called “Copy and paste style,” and the shortcuts are a bit different. To copy and paste an object’s attributes (or style) to the clipboard, select an object on the canvas and press Control/Command + C (or “Edit” → “Copy”), then select the other object(s), and press F4 (or “Edit” → “Paste Style”).

Other illustration tools might have a feature similar to this one, but as of a couple of years ago, I am pretty sure only Fireworks could copy and paste an object’s attributes so easily and effectively. Copying and pasting selected attributes78 from object to object was even possible! This is why I was so happy when I saw the same feature in Gravit, working in the same way.

Copy and paste attributes in Gravit. (View video79)
Fill and stroke color settings Link

Speaking of minor (but important) features, here’s another. In Gravit, if you select an object and then create a new object right after that, the new object will be created with the same fill and stroke color settings. This works the same as in Fireworks, and I find it really enhances my workflow!

In Gravit, accessing the stroke options (such as Ends, Joins and Position) is quite easy. You can also make the stroke solid, dashed or dotted, with numeric precision.

Ends, Joins and Position options for strokes in Gravit.80

Ends, Joins and Position options for strokes in Gravit. (View large version81)
Adjusting the dashed stroke with precision

Adjusting the dashed stroke with precision.
Math operations Link

Only recently, I discovered (quite by accident) that, just like in Sketch82, you can perform many math operations (such as add, subtract, multiply and divide) right from the Format panel! For example, if you select an object that is 440 pixels wide and, in the “Width” field, type 440 * 3, the object’s width will update to 1320 pixels. (This feature was always missing in Fireworks, unfortunately.)

Easily attach Arrows to paths Link

You can attach a few different types of arrows to any path on the canvas with just a couple of clicks. (In Fireworks, you could also attach arrows to paths; the feature could be found by going to “Commands” → “Creative” → “Add Arrowheads.”)

Adding arrows to paths in Gravit83

Adding arrows to paths in Gravit. (View large version84)
Smart options Link

Gravit has a smart duplicate feature (Control/Command + D). It allows you to duplicate objects while simultaneously applying multiple move, rotate, scale and skew transformations to each duplicated object. The command can be used to create equally spaced objects and to combine multiple transformations, while duplicating can produce many different effects. (A similar feature exists in Illustrator, called “Transform Again85” but with the same shortcut, Control/Command + D).

Gravit also supports smart guides (like Fireworks and Illustrator), which allow you to more easily position objects relative to each other and relative to the canvas. Also, the smart alignment guides allow you to more easily and more precisely create and position duplicates of objects at even distances from each other (or to reposition existing objects on the fly).

Smart alignment guides let you easily position objects at even distances while creating and/or moving them. In this example, while moving object C, you will see a subtle visual hint when the distance between B and C becomes equal to the distance between A and B86

Smart alignment guides let you easily position objects at even distances while creating and/or moving them. In this example, while moving object C, you will see a subtle visual hint when the distance between B and C becomes equal to the distance between A and B. (View large version87)
Auto shapes Link

Auto shapes (which are special vector objects) work similar to how they do in Fireworks. You can adjust their properties (for example, adjust the radius of rounded corners on a rectangle or the number of points on a star) using the Format panel or their yellow control points. Perhaps this would be better illustrated with a quick example (click the image to view an animated version):

Working with auto shapes in Gravit (view video88)
Zooming Link

If an object is selected, zooming in will zoom with that object in the center, just like in Fireworks. (If an object is not selected, zooming in will zoom towards the center of the canvas, as you would expect.) This might seem like a small enhancement, but believe me, if you constantly zoom in and out on details in your illustrations, you’ll save a lot of time with this smart zoom feature!

Collaboration and Other Features Link

Gravit has other features, some of which I haven’t fully explored yet.

  • With the collaboration feature, two or more designers can work on the same design from anywhere. (This is nice, but if you work alone, you might not need it.) Also, you can make any design either public (allowing anyone to see and comment on it) or private (allowing only you and your optional collaborators to see and edit the design). Some advanced permissions89 for design documents are coming soon.
  • In Gravit, you can create new designs from premade templates. However, I usually create illustrations from scratch, so I can’t comment on these.
  • Gravit has built-in access to a large library of SVG icons. Simply go to “Insert” → “Icon.” From there, you can browse the library or search for an icon by keyword. I’ve tried this feature a few times and it’s worked pretty well — as long as the library has the icon I’m looking for, of course.
    Working on a design and need to quickly insert a vector Facebook icon? Go to “Insert” → “Icon,” search for “Facebook,” and there you are!90

    Working on a design and need to quickly insert a vector Facebook icon? Go to “Insert” → “Icon,” search for “Facebook,” and there you are! (View large version91)
  • Gravit has over 40 live filters (or live effects). These can be added, removed and edited using the “Effects” section in the Format panel. The stacking order of filters can be easily changed by dragging and dropping, and multiple filters of the same type can be applied to any element. In this way, Gravit is as flexible as Fireworks.
    Live filters in Gravit can be added and removed, and their individual settings can be changed using the “Filters” section in the Format panel.92

    Live filters in Gravit can be added and removed, and their individual settings can be changed using the “Filters” section in the Format panel. (View large version93)
  • Gravit supports two advanced settings for fills on compound paths: “Non-Zero (Fill Holes)” and “Even-Odd (Keep Holes).” To access these settings, click on the “Advanced fill settings” icon in the Format panel. I believe this feature is also available in Illustrator, and Fireworks has it in the Path panel94.
    An example using a “Non-Zero (Fill Holes)” and “Even-Odd (Keep Holes)” fill in Gravit.95

    An example using a “Non-Zero (Fill Holes)” and “Even-Odd (Keep Holes)” fill in Gravit. (View large version96)

What’s Missing? Link

While I find Gravit to be quite a promising tool, I have to admit that it has some shortcomings — or rather things that could work better. Some of them are minor, while others more serious. Here’s my personal list:

Online Link

A major plus is that Gravit works in many desktop browsers and that all of your design projects will always stay in sync. Unfortunately, this could be also a serious problem. Go offline, and you will instantly lose access to all of your designs stored in the Gravit cloud. So, in the future, an offline, standalone version of Gravit would be more than welcome, or else you’ll have to say good-bye to the idea of working with Gravit on a long flight or when an Internet connection is otherwise unavailable.

Shortcuts Link

A desktop application has access to all possible keyboard shortcuts. A web app, on the other hand, is somewhat limited because the browser itself (where a web app runs) reserves some of the shortcuts for itself.

Performance Link

When working on more complex illustrations, I’ve noticed some performance issues. However, from experience, I know that Fireworks also slows down in similar situations. I hope future updates improve on this.

Mobile Link

When I hear that something is “cross-platform,” I almost always imagine that it works on any desktop, laptop, tablet or even smartphone. Gravit works well in desktop browsers (I use it in Chrome and Firefox most of the time, and the experience has been pretty smooth), but I don’t think it has been optimized for mobile browsers and devices — at least, not yet.

Features Link

Some features are still missing in Gravit. For example, the app does not support multiple pages within a single design, nor does it support symbols — two features that would be super-handy when working on a mobile or web design project. Also, there is no option to attach text to a path, no textures or patterns, no access to system fonts and no live prototyping. I hope future updates bring some or all of these, as I see updates97 are released often.

Bugs Link

Every design app out there has bugs and occasionally crashes or freezes. Unfortunately, Gravit is no exception. I once lost some changes I made to a design because the server was experiencing some issues (or maybe the app was being upgraded). I’ve also seen Chrome freeze once or twice when using Gravit, and sometimes I see a random bug or other strange behavior. The good news is that the Gravit team has a good support page (called “Community”); if you report a problem, chances are you’ll receive prompt feedback. Alternatively, you can share your feedback on the team’s Twitter account, @gravit_io.

“Plane” (version 2) suffers from the missing “Attach text to path” feature. Maybe in a future update?98

“Plane” (version 2) suffers from the missing “Attach text to path” feature. Maybe in a future update? (View large version99)

Conclusion: Would I Recommend Gravit? Link

The short answer is yes. I am still testing Gravit, but I find myself increasingly using it. The app is actively developed and has many of the tools I need for my illustration work. It’s also focused, geared to digital design and illustration tasks.

I am not part of Gravit’s development team, but I did contribute to the project voluntarily by reporting a few bugs that I discovered (and I was happy to see that a few were fixed soon after I reported them). I also created a funny illustration, which the team liked a lot and from which it adopted a mascot (the little monster Gravil100). I do empathize with the developers’ efforts, which is why I will definitely be keeping an eye on this project.

While the feature set is not complete yet, I am sure experienced designers and illustrators will find Gravit interesting and useful. It might also be suitable for people who want to experiment with design or illustration for the first time, and for designers who want to work together (because documents can be shared and edited online by more than one person — a feature that Fireworks and many other desktop design apps don’t offer). In time, if development keeps its current course, many people are probably going to like Gravit.

Up in the Air, created in Gravit Designer — a quick illustration inspired by Marko Stupic’s An Icon a Day project.101

I created “Up in the Air” in Gravit, a quick illustration inspired by Marko Stupic’s “An Icon a Day102” project. (View large version103)

In the modern graphic design world, dominated as it is by companies such as Adobe and by smaller teams making many new design apps (but developing exclusively for the Mac platform), it’s a breath of fresh air to see a team invest so much effort in creating an application that feels a bit different and that works not only on Macs. I think we need more competition in this field, because more competition means better, easier tools.

If you have tried Gravit104 already, I’d love to hear your experience. And if you have comments or questions about how to use any of its features, you’re welcome, too!

Author’s (last-minute) note: Some of the screenshots generated for this article might look slightly different from the most recent version of Gravit. The reason is that, while the article was being edited and proofread, Gravit’s team rolled out a new update, which, among other things, slightly changed parts of its interface, including the Format panel. I was able to update some of the screenshots, but not all.

(mb, al, ml)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2015/04/using-sketch-for-responsive-web-design-case-study/
  2. 2 https://www.smashingmagazine.com/2015/01/prototyping-ios-android-apps-sketch-freebie/
  3. 3 http://www.gravit.io
  4. 4 https://www.smashingmagazine.com/2015/04/using-sketch-for-responsive-web-design-case-study/
  5. 5 https://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
  6. 6 https://www.smashingmagazine.com/2017/04/symbols-sketch/
  7. 7 https://www.smashingmagazine.com/2010/09/the-power-of-adobe-fireworks-what-can-you-achieve-with-it/
  8. 8 http://www.smashingmagazine.com/category/fireworks/
  9. 9 http://www.molif.com/en/category/friday-bunny/
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/03/fridaybunny-in-space-65-by-ani-opt.png
  11. 11 http://www.molif.com/en/2011/04/15/friday-bunny-65-astrophobia/
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/03/fridaybunny-in-space-65-by-ani-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/03/pig-broken-banjo-by-ani-opt.png
  14. 14 http://banjopigs.blogspot.bg/2011/01/ani-kostova-bozgounova-broken-banjo.html
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/03/pig-broken-banjo-by-ani-opt.png
  16. 16 https://www.smashingmagazine.com/2013/12/present-future-adobe-fireworks/
  17. 17 https://www.smashingmagazine.com/tag/sketch/
  18. 18 https://www.smashingmagazine.com/2015/10/switching-adobe-fireworks-sketch-10-tips-tricks/
  19. 19 http://touchreviews.net/affinity-designer-mac-review-graphic-design-app/
  20. 20 https://affinity.serif.com/blog/affinity-is-coming-to-windows/
  21. 21 https://www.smashingmagazine.com/2015/10/switching-adobe-fireworks-sketch-10-tips-tricks/#comment-1284511
  22. 22 https://www.smashingmagazine.com/2015/10/switching-adobe-fireworks-sketch-10-tips-tricks/#comment-1284546
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/03/rocket-icon-design-opt-opt.png
  24. 24 https://www.smashingmagazine.com/2014/09/23/designing-a-rocket-icon-in-adobe-fireworks/
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/03/rocket-icon-design-opt-opt.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/03/jaguar-e-type-opt.jpg
  27. 27 https://dribbble.com/shots/2162785-Jaguar-E-Type-In-Vectors
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/03/jaguar-e-type-opt.jpg
  29. 29 http://www.gravit.io/signup
  30. 30 https://twitter.com/zachatkinson85/status/709122702666149888
  31. 31 https://twitter.com/2pointsomeone/status/699150267225210880
  32. 32 https://twitter.com/FreeHandForum/status/702312958651551744
  33. 33 https://en.wikipedia.org/wiki/Adobe_FreeHand
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/03/totoro-by-ani-opt.png
  35. 35 https://en.wikipedia.org/wiki/My_Neighbor_Totoro
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/03/totoro-by-ani-opt.png
  37. 37 https://www.gravit.io/@molif/document/V1_fDjjU/Totoro-finished
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/03/plane1-by-ani-opt.png
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/03/plane1-by-ani-opt.png
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/03/buddies-by-ani-opt.png
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/03/buddies-by-ani-preview-opt.png
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/03/fireworks-interface-overview-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2016/03/illustrator-interface-overview-opt.jpg
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/03/photoshop-interface-overview-opt.jpg
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/03/gravit-interface-overview-opt.png
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/03/gravit-interface-overview-opt.png
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/03/gravit-align-options-opt.png
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/03/gravit-align-options-opt.png
  49. 49 https://forums.adobe.com/thread/248564?start=0&tstart=0
  50. 50 https://vimeo.com/160647861
  51. 51 http://quick.as/enpxtb8q6
  52. 52 http://www.youtube.com/watch?v=CphBvV-Q58E
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/03/easy-clipping-in-gravit-opt.jpg
  54. 54 https://www.flickr.com/photos/arcticproductions/16155588769/
  55. 55 https://creativecommons.org/licenses/by-nd/2.0/
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/03/easy-clipping-in-gravit-opt.jpg
  57. 57 https://twitter.com/gravit_io/status/702520343022477313
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2016/03/gravit-crop-tool-preview-opt.png
  59. 59 https://twitter.com/gravit_io/status/702520343022477313
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2016/03/gravit-crop-tool-preview-opt.png
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2016/03/bezigon-examples-opt.png
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2016/03/bezigon-examples-opt.png
  63. 63 https://vimeo.com/160647854
  64. 64 http://quick.as/v6w7tpdry
  65. 65 http://www.youtube.com/watch?v=ofV0rnZT3lI
  66. 66 http://www.scritub.com/stiinta/tutorials/macromedia-freehand/Creating-Paths-with-the-Bezigo1842115512.php
  67. 67 https://vimeo.com/160647865
  68. 68 https://vimeo.com/160647873
  69. 69 https://www.smashingmagazine.com/tag/svg/
  70. 70 https://twitter.com/gravit_io/status/701420160394117120
  71. 71 https://www.smashingmagazine.com/wp-content/uploads/2016/03/r2d2-gravit-designer-vs-svg-preview-opt.png
  72. 72 https://www.smashingmagazine.com/2013/11/even-more-fireworks-extensions-optimized-design-workflow/#export-svg
  73. 73 https://www.smashingmagazine.com/2013/11/even-more-fireworks-extensions-optimized-design-workflow/#import-svg-in-fireworks
  74. 74 https://twitter.com/colorlavie/status/708208090949283840
  75. 75 https://www.smashingmagazine.com/wp-content/uploads/2016/03/gravit-color-panel-rgb-hsb-cmyk-opt.png
  76. 76 https://www.smashingmagazine.com/2013/12/present-future-adobe-fireworks/#gradients-made-easy
  77. 77 http://www.htmldog.com/guides/css/beginner/borders/
  78. 78 https://www.smashingmagazine.com/2013/09/optimizing-the-design-workflow-with-extensions/#paste-selective-attributes
  79. 79 https://vimeo.com/160647859
  80. 80 https://www.smashingmagazine.com/wp-content/uploads/2016/03/stroke-options-gravit-opt.png
  81. 81 https://www.smashingmagazine.com/wp-content/uploads/2016/03/stroke-options-gravit-opt.png
  82. 82 https://twitter.com/sketchsources/status/689485400398663682
  83. 83 https://www.smashingmagazine.com/wp-content/uploads/2016/03/arrows-in-gravit-opt.png
  84. 84 https://www.smashingmagazine.com/wp-content/uploads/2016/03/arrows-in-gravit-opt.png
  85. 85 http://veerle-v2.duoh.com/blog/comments/transform_again_in_illustrator/
  86. 86 https://www.smashingmagazine.com/wp-content/uploads/2016/03/smart-alignment-guides-preview-opt.png
  87. 87 https://www.smashingmagazine.com/wp-content/uploads/2016/03/smart-alignment-guides-preview-opt.png
  88. 88 https://vimeo.com/160647857
  89. 89 https://twitter.com/gravit_io/status/702553916173651970
  90. 90 https://www.smashingmagazine.com/wp-content/uploads/2016/03/insert-facebook-icon-opt.png
  91. 91 https://www.smashingmagazine.com/wp-content/uploads/2016/03/insert-facebook-icon-opt.png
  92. 92 https://www.smashingmagazine.com/wp-content/uploads/2016/03/live-filters-in-gravit-preview-opt.png
  93. 93 https://www.smashingmagazine.com/wp-content/uploads/2016/03/live-filters-in-gravit-preview-opt.png
  94. 94 https://www.smashingmagazine.com/wp-content/uploads/2016/03/path-panel-adobe-fireworks-preview-opt.png
  95. 95 https://www.smashingmagazine.com/wp-content/uploads/2016/03/non-zero-vs-even-odd-opt.png
  96. 96 https://www.smashingmagazine.com/wp-content/uploads/2016/03/non-zero-vs-even-odd-opt.png
  97. 97 http://www.gravit.io/updates
  98. 98 https://www.smashingmagazine.com/wp-content/uploads/2016/03/plane2-by-ani-opt.png
  99. 99 https://www.smashingmagazine.com/wp-content/uploads/2016/03/plane2-by-ani-opt.png
  100. 100 http://www.molif.com/en/2016/03/10/do-you-know-gravil/
  101. 101 https://www.smashingmagazine.com/wp-content/uploads/2016/03/up-in-the-air-by-ani-opt.png
  102. 102 https://dribbble.com/sweetness-every-day
  103. 103 https://www.smashingmagazine.com/wp-content/uploads/2016/03/up-in-the-air-by-ani-opt.png
  104. 104 http://www.gravit.io/

↑ Back to top Tweet itShare on Facebook

Ani is a freelance illustrator and editor with more than 10 years of print and digital design experience. Ex-editor-in-chief of the Bulgarian edition of .net magazine and the lifestyle/fitness magazine bb-team.org. Mother of a girl, loves books, music & riding her bicycle. Main passion: to create joy. Her place online is molif.com.

  1. 1

    Dan Williams

    April 4, 2016 7:22 am

    Nice article, just for yours and everyone’s knowledge, sketch and designer are soon to be Windows apps too… So your options will be more

    0
  2. 7

    Really? Well, I know about Affinity Designer, but Sketch for Win is news to me. That will be nice indeed… but I will believe when I see it.
    Glad you liked the article. :-)

    2
  3. 8

    Fantastic write-up Ani! Great to see some worthwhile apps getting some of the limelight.

    5
  4. 9

    Adrian Versey.

    April 4, 2016 8:00 am

    Thanks for a great article. I shall definitely be trying Gravit it looks very promising.

    1
  5. 10

    One of the most important features in vector editor for me is pressure sensevity for strokes. I used to draw with Wacom, and Adobe Illustrator supports it. I see no chance for a web editor to support tablets for now.
    Adobe products have no alternatives for me!

    -4
    • 11

      Not sure why you’d think there are no alternatives to Adobe software? Affinity Designer supports pressure, as does Corel Draw

      0
  6. 12

    Andrew, you are sadly right about the pressure sensitivity. But who knows what the future holds for us? I never said that Gravit is a complete alternative to all Adobe products, right? It would be too much to expect at this point, anyway. :-)

    4
  7. 13

    Interesting. Thank you.

    Two questions:

    1) How does it compare to Canva, which I believe is also vector based.

    2) Can it produce print-ready output? Or is it strictly for screen resolution based designing?

    0
    • 14

      1. Canva is limited in the case of vector design. It is not designed as a vector tool, rather a quick design and go app.
      2. We are currently working on more print features (and support) along with PDF support. Furthermore, we are researching into the world of Web-To-Print, which has been highly requested in the design world. As Ani has stated, we love hearing feedbacks and feature ideas from our community members. So if you think we should add more print features and have a general idea of how it should function, we would love to hear it!

      6
    • 15

      1) I haven’t tried Canva (not yet), so cannot comment on that really. :)

      2) Yes, Gravit can be used for print-ready output as far as I know (for example, here’s someone who created business cards with its help — https://twitter.com/colorlavie/status/708208090949283840) but I am using it for screen-related tasks only.

      3
  8. 16

    As a previous fireworks user I find this so refreshing. Despite how many features Illustrator has, it still feels counter-intuitive to use. I miss Fireworks options panels so much. When asked what tools I need at work, I had to leave Fireworks behind, because they were only including it in full bundle.. Sad times. Also, people who use PS for web design don’t know what they’re missing.

    Sketch is cool. For mac users. But what if I find Linux to be the best OS for me?

    6
    • 17

      If you’re subscribed to Creative Suite, Fireworks CS6 is still available here: https://helpx.adobe.com/x-productkb/policy-pricing/cs6-product-downloads.html

      I plan to continue using it until there’s a viable Windows alternative. Keeping an eye on Adobe XD http://www.adobe.com/ie/products/experience-design.html

      0
      • 18

        I still use it. I will probably continue to use Fw a lot more before I quit or some OS force me to do it… But that will never stop me from looking around for interesting new kids on the playground. ;-)

        4
    • 19

      For Linux, have you tried Inkscape? I’ve used the Windows version (it’s available for Mac and Linux too).

      It’s pretty versatile vector drawing tool, and it’s free.

      8
      • 20

        I’m using Inkscape (commercially) and I believe it’s rather underrated tool. Especially because it’s free. Also using Gimp and it’s well paired with Inskcape.

        2
      • 21

        Yes, very strange to see no mention of Inkscape, which is powerful AND free AND runs on Windows. It’s UI isn’t as contemporary (since it exists for some years already), but that’s no reason to dismiss it.

        Gravit looks good, though! Absence of many hot-keys makes working with it much slower, but it is nice to have a browser-based tool for quick designs, or even not so quick ones. I’ll see, may be it’ll grow on me :)

        0
  9. 22

    Bononymous Usar

    April 4, 2016 11:51 pm

    I downloaded the Windows desktop app for this a year or two ago. It was made in NW.js and was unfinished at the time. I wish they still supported this route. NW.js lets you make cross-platform desktop apps using web technology. So they could have maintained the same codebase and only removed a few of the desktop-only features when online. Which I believe was their original plan.

    Here’s the old desktop app for windows: http://imgur.com/cNtAPIv

    0
  10. 23

    Jeff Roberts

    April 5, 2016 1:23 pm

    Please check out inkscape….as some who has been vector in since before corelDraw v1….inkscape is open source and run on win 10 and osx

    You won’t be sorry

    5
  11. 25

    A maybe naiive question – anything for pen/pressure support? I think at least Chrome supports it. Thanks.

    0
    • 26

      Sadly, so far Gravit doesn’t have this feature. But considering their ambition, I think in the near future they might add it. :-)

      1
  12. 27

    Jasper Levi

    May 20, 2016 12:12 pm

    Adobe has come out with Experience Design, which is a viable alternative. The Mac version is out, and the Windows one comes out later this year.

    https://www.adobe.com/in/products/experience-design.html

    0
  13. 28

    Kirsty Sweeney

    June 24, 2016 12:36 pm

    I feel old, I was trained on Freehand and Quark. All very much things of the past. Sorry to see Fireworks go. Interested to see all the new stuff Adobe is working on. Not least the Animate CC which track movement via webcam. Have had much fun with Vectors making some funny cartoons. #Thinkpeacock

    However for mobile app prototyping I have been using UXpin which has photoshop import and makes prototyping an app a breeze.

    0

↑ Back to top