32 Free-ish Interactive Design Resources

If the software, apps and resources you need are touted as free, is it too good to be true? Not always. Find out why in HOW’s Spring 2015 issue, in which James Pannafino explores this subject in the Interactive column. Also in this issue: a robust page count filled with design inspiration galore.


We all like a deal. Or, even better, something that’s all together free. Although, in most cases, we know that something that may be free on the surface, isn’t really in the end. Long before the advent of the internet and open digital distribution, the term “gift economy” was used to explain when items were gifted or given out for free without any exchange of monetary funds. Because new interactive technologies have emerged, designers have been forced to rely on resources outside of their normal tool sets to get the job done.

With fierce competition between major companies and start-ups, a plethora of “free” tools and resources have been introduced in the design field. These free tools come in many different shapes and sizes, and it’s important to understand the various approaches and functions before we dive in and use them. In the Spring 2015 issue of HOW, James Pannafino dives into typical expectations that arise when you decide to take advantage of something that is free, well, free-ish.

But as an online accompaniment, he’s assembled a list of “free-ish” applications and resources to use during various stages of the interactive design process. Keep in mind that the different forms of “free” may change over time.

Freeish

Image by Bratislav Milenković

32 Free(ish) Interactive Design Resources

Coding Programs

While there are plenty of useful text editors that are worth paying for, such as Sublime Text and Coda, there are a number of open source and light weight versions that are very useful.

BRACKETS

Brackets is a open source text editor made with javascript that has visual tools integrated into its program.

KOMODO EDIT and TEXT WRANGLER

If you are in need of a text editor with basic coding functions and don’t mind using the free little brother version of a paid program, Komondo Edit and Text Wrangler (mac only) might do the trick.

Collaboration and Communication

Using web based tools for chatting and creating content have become common in the work place.

GOOGLE DOCS

Integrated within Google Drive, Google Docs is a web-based service that allows gmail users to collaborate on basic office suite programs (word processor, spreadsheet and presentation program).

SKYPE

A telecommunication program that’s been around for over a decade and is well known for its video chat and voicecall services.

TRELLO

Trello is a cloud based collaboration and project management application that uses a board system with cards to visually organize tasks and content.

Trello-home-hero

Design Creation Tools

While Adobe is the big kid on the block when it comes to design applications, there are other options with some powerful functions.

INKSCAPE

Inkscape is an open-source vector-editing program in the same vein as Adobe Illustrator.

eisvogal_blended2

GIMP

GIMP that stands for “GNU Image Manipulation Program” is an open-source raster based editing program, similar to Adobe Photoshop.

HONORABLE MENTION: These two programs are not free, but are affordable for the level of features they supply and offer a combination of vector and raster options: SKETCH and AFFINITY DESIGNER

Front-End Frameworks

The purpose of front-end frameworks is to increase development speed and encourage consistency across designs.

BOOTSTRAP

Originally started by employees from Twitter for internal use, it is one of the most widely used collections of free tools for creating websites.

FOUNDATION

Foundation is a mobile friendly responsive framework created by the product design company Zurb.

Foundation - interactive design resources

Graphic Resource Portals

Sometimes-open web searches don’t yield the best results. Having a site that starts the search for you is half the battle.

ALL THE FREE STOCK

All The Free Stock is a portal to access various free images, videos and icons sites.

THE NOUN PROJECT

The Noun Project is a collection of symbols by different designers that catalogs and aggregates them for others to use.

noun-project

Learning Resources

Learning code can be intimidating, but there are some great resources online. Here are a few free starting points for learning code.

CODECADEMY

Codecademy is an online learning platform that offers various courses on coding languages. The courses allow users to go through the process at their own pace, have visual examples and question and answer components.

DON’T FEAR THE INTERNET

This is a great introductory set of videos that help introduce non web individuals to the world of Internet coding. If you have ever met someone who said coding is too hard to learn, show them these videos to get them started.

HTML DOG

HTML Dog offers a series of online HTML, CSS and JavaScript articles and tutorials.

Previewing and Inspecting Code

While many browsers have built in developer tools sometimes you just need something that is more visual and accessible.

ACTIVATE X-RAY GOGGLES

X-Ray Goggles not only allows you to inspect the code in a webpage but also allows you to remix the text and images.

DIMENSIONS

This open source chrome browser extension allows for quick visual measurements between elements on a live web page.

PESTICIDE

This handy chrome extension allows you to see the outline of every element on the page with one click.

Prototyping

By putting a design in context it allows us to test the users’ ability to flow through a function of an application.

ICON STRIKE

A very simple but useful web site, icon strike allows designers to drag and drop an icon design file from their desktop and then quickly preview in context on a mobile device.

MARVEL APP

Marvel app allows designers to connect images from their Dropboxaccount and build realistic prototypes in no time.

POP – PROTOTYPING ON PAPER

POP app helps in quickly capturing UI sketches, creating click throughs and testing a users’ experience.

Visual Patterns

Patterns are a great way to add visual interest and mood to a design without overwhelming the composition with too much visual noise.

DELAUNAY TRIANGULATION PATTERNS

A free online tool that allows you to create variable geometric patterns and export them as images.

msurguy

PATTERNIZER

Patternizer allows you to create various stripe based patterns and export the code to use directly in the Web page.

patternizer

SUBTLE PATTERNS

Subtle patterns is a curated collection of tillable textured patterns that can be used as a background in a web page or image inside a design.

subtle-patterns

3D Modeling

Many 3D modeling programs are expensive and difficult to master, but that shouldn’t stop designers from exploring what three dimensional design programs have to offer.

BLENDER

Blender is a free 3D modeling, composing and animation application suite.

SKETCHUP MAKE

The free little brother of SketchUp Pro, SketchUp Make is an easy to use 3D program that can be used for personal and educational use.

sketchup

TRIDIV

Tridiv is a web-based application that allows you to make 3D shapes with CSS.

tridiv

Worth the Price

While these applications are not free, they are worth a look since they are relatively affordable and can be very useful for future interactive design endeavors.

CLOUDAPP

A speedy file, link, screen recording and share anything program.

FACEBOX

Fifty royalty-free photos of real people that can be use in anything from personas, presentations or web based projects.

SOUND KIT

High quality and professionally mastered UI sound effects that are royalty free and ready to use in your next mobile device prototype.


T7153The Complete Web Designer’s Idea Collection by Patrick McNeil

If you’re a web designer who is familiar with the experience of being in a creative rut, then the Complete Web Designer Idea Collection is for you! With all four volumes of Patrick McNeil’s The Web Designer’s Idea Book, you’ll have plenty of web design inspiration to get you through several rounds of creative block.

Within each of the four volumes in this exclusive and inspirational collection, you’ll find anywhere between 600 and 700+ examples of solid website designs. Not only will you benefit from visual examples of quality web design, but you can also utilize included helpful commentary from web design guru and author Patrick McNeil. Explore industry trends, themes, and styles in each volume, and use them to breathe new life into your own web design projects. Get it here.

COMMENT