Apps That May Reduce Your “Science” Burden in Design

What is it that web designers dislike the most? Probably coding. And maybe a close second is prototyping for all devices. And anything that can make those kinds of things easier allows a designer to spend more time on the creative aspects of his work.

With that in mind, there are a number of great new apps that every designer should explore as potential additions to his/her toolkit!

FRONTIFY

What a great site for you to create your own style guides and store them in the cloud for future reference and for sharing. There are style guide templates for logos and images, color palettes, typography, icons, and your own text and media. The other big plus here is that you don’t have to manually create your own PDF style guides – you store them on Frontify and they can converted to PDF files for download, printing and sharing. Versioning keeps all older versions in the background to pull up at any time. You can start with their templates or research brand book examples to customize your own. All functions are accessible via API. Here’s an example of what you can do with just a logo, using Frontify’s own:

FRONTIFY

This is the basic logo. Frontify decided that the “drops” were key here, but that they could do a lot of others things, still keeping the logo consistent. Here are color changes:

FRONTIFY

And here is an example of a variation of the basic logo:

FRONTIFY

This is just one example of the design and color templates you can use to create unique style guides, and all components are interchangeable.

 

VISUAL COMPOSER

This app has been around for a little while, and you may already know of it, but you would be hard pressed to find another with the design options package. It has basically taken away the arduous tasks of planning and coding. You can have design layouts in just minutes, adding elements with a single click. The $25 price tag is well worth it. Buttons for everything; lots of animation options, immediate sharing options, and so forth. Over 40 content elements in this baby! It’s is really an all-purpose tool! If you are not sure about all of its features and how you can use this app, check out the video tutorials here.

VISUAL COMPOSER

There are great features that let you design your pages very quickly and you can modify almost any element. For example, there are several pre-defined grid elements that you can modify or an option to design your own grid.

If there is a downside to Visual Composer, it is that it leaves a lot of small code behind when you de-activate that has to be removed before starting a new theme. Here is an example of a design created through Visual Composer.

VISUAL COMPOSER

 

DESIGN HUNT

DESIGN HUNT

When your inspiration has just stalled, you probably seek it by searching for new websites that could give you great ideas. That can be a bit of a time-consuming task, so why not use a much more convenient method? Design Hunt is a “clearinghouse” of sorts, but it changes out its entire repertoire on a daily basis. It draws great new designs found on Pinterest, Dribble, Designer News, DesignInspiraton, and more and publishes them for designers who are look for some new inspiration and ideas. Now, you can go to one place every day and find a totally new collection.

 

TOOKAPIC

TOOKAPIC

A relative newcomer in the stock photo business, Tookapic now has over 11,000 stock photos, most for free, the rest at a small price. You may really like this better than the stock photo source you are now using – phenomenal color and clarity and really unique photos. Access their site and check out what they have. You may be surprised!

 

MARVELAPP

This free prototyping tool allows you to sketch and create mockups from your mobile or any other device and immediately see the prototype. From there, you can re-arrange, modify, add color, text, change forms, and do virtually anything, with immediate compatibility with any device. Once you name your project, you go immediately to the main interface and begin. Once finished, you can preview the entire design and interact with it to ensure everything works well.

MARVELAPP

To learn more about this phenomenal tool, visit the website and watch the demo – you will be thrilled with the ease of use. One of the best features is the ability to drop in image from anywhere (even Dropbox and sketch) and of any image type. You can also add a team if this is a collaborative project. The biggest downside to Marvel is that there are limitations with the free version, so you will definitely need to upgrade. Still and all, this is super easy to use – every bit as good as Justinmind.

 

ANIMATE CSS

If you create a lot of animation, you will definitely want this tool. Really cool features without having to write any code. There is a ready-to-use library of animation effects – over 50 actually – and you can easily customize for number of loops and duration. Animation adds great engagement and entertainment as long as you don’t over-do it!

If you are looking for a really complete array of features and options, however, CSS alone will not fill the bill. While certainly the debate about CSS and JavaScript continues, there are definitely ways in which they can be used together. For example, you have a great CSS animation designed, but you want it to slide in from the left when a user gets to a certain point in scrolling down. You will have to add JS to get that done. Understanding that CSS has its limitations and can be enhanced by JS is just wise use of tools that are available.

ANIMATE CSS

Nonetheless, Animate CSS is really easy to run. You download it, Attach CSS as well as jQuery and any other components you want and start animating. There is a great tutorials on YouTube to get you started.

 

COOLORS

If you happen to be color blind or just color-scheme challenged, this tool will develop an entire color scheme for you, or create one if you know where you want to begin. When you spot a color you like, lock it and then just keep clicking – you’ll get a complete scheme with as many colors as you want. This is especially helpful if you want to use color gradients. There is nothing really controversial about this tool – designers who use it love it; those who do not haven’ tried it yet. The only downside? It’s no longer free and you do have to have an iTunes account to download.

COOLORS
Automatic Color Scheme Generator for the Color-Challenged

 

CIRCULUS.SVG

This isn’t a comprehensive tool with lots of options, templates, and such, but here’s a unique way to design a menu, or several on as many pages as you wish! All you do is enter the specifics of what you want in your menu. You will then be provided detailed instructions on how to build it and imbed it in a specific page.

CIRCULUS.SVG
A Little Something to Better Engage Visitors

Circular SVG is probably superior to CSS for creating this kind of element. Once you download, you have 3 options: You can draw your sectors in a graphic editor, such as Sketch, and then export them as SVG, add interaction and imbed them; you can draw your sectors with code; or you can use the Circulus generator right in the app.

CSS allows you to create circular navigation, but there are a few browser bugs plus it’s just a lot of work. You have to start with a rectangle, break it apart, then skew and rotate those sections. And, if you use more than just icons in your sectors, it gets trickier.

Using SVG, you can draw any shape you want, using specific lines and arc commands to the “pie wedges” you want – here’s an example:

CIRCULUS.SVG

Once you have each of your wedges drawn and your icon and/or content imbedded, you simply join them.

 

METAFLOP

Tired of the same old fonts and letter styles? Create your own – no coding required – just click and drag. Changing out to unique fonts and styles for text may encourage visitors to actually read the content! This app is so cool, you will have a tough time not playing with it for hours. And you will never say that typography is the least sexy part of web design again.

It is so simple. You customize fonts from a series of slides that have different characteristics – height, aperture and contrast. You adjust until you have what you like and then download it as a web font package (free). There is also a library of pre-built fonts to choose from. Keep playing – you’ll see why type designers may be a “dying breed.”

METAFLOP
Capture Attention with Unique Fonts and Styles

 

FONTFLAME

FONTFLAME

This is really a “new kid on the block.” Fontflame attempts to relieve designers of just one more burden – finding font pairings that really work. Right now, it has 10 published pairings on its site but is adding daily. Examples of pairing, using Google’s free font library, include “Lobster-Asap” and “Roboto-Open Sans.” Additional libraries will be added soon. Keep an eye on this site – it will have much to offer in pairings soon.

 

FREELANCER PODCAST

FREELANCER PODCAST

Not an app or a tool – this is a weekly podcast for designers and developers that you will not want to miss. Hosted by Paul Jarvis, you’ll have access to new trends, apps and tools, and lots of really practical advice.

 

IN-VISION

Here’s a great prototyping tool that has several features not found in the others. Like all others, you create your mockup for any or all devices – you pick the ones you want. Once your prototype is created, you can preview it on all devices, and then send it off to clients or team members for review. They can comment right on the design itself, which is a huge plus. Two other nice features of In-Vision are a history mode, which lets you see all earlier versions of a design, and 3 demo projects for designers to work through until they are comfortable with all of the features.

IN-VISION

In comparing In-vision with Marvel app, the important differences are probably these:

  1. InVision has more features than Marvel, but that also makes it more complex. For example, it has more live collaboration features, a tool for annotation screenshots, and great history elements.
  2. Marvel has an iOS app and is currently working on apps for Android and iPad – InVision does not have these.
  3. InVision is probably better for a larger team, Marvel better for solo or small teams.

Comments from users of both of these apps would shed more light on which one is best for which purposes.

You probably have some favorite apps that fellow designers would love to hear about. Tell us what they are, and how they give you more time to be an artist.

Like the article? Share it.

LinkedIn Pinterest

One Comment

  1. Thank you for including Visual Composer page builder in your shortlist.

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *