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.
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.
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.
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.
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.
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.
PATTERNIZER
Patternizer allows you to create various stripe based patterns and export the code to use directly in the Web page.
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.
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.
TRIDIV
Tridiv is a web-based application that allows you to make 3D shapes with CSS.
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.
The post 32 Free-ish Interactive Design Resources appeared first on HOW Design.