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.
Image by Bratislav Milenković
32 Free(ish) Interactive Design Resources
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.
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.
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).
A telecommunication program that’s been around for over a decade and is well known for its video chat and voicecall services.
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 is an open-source vector-editing program in the same vein as Adobe Illustrator.
GIMP that stands for “GNU Image Manipulation Program” is an open-source raster based editing program, similar to Adobe Photoshop.
The purpose of front-end frameworks is to increase development speed and encourage consistency across designs.
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 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 is a portal to access various free images, videos and icons sites.
The Noun Project is a collection of symbols by different designers that catalogs and aggregates them for others to use.
Learning code can be intimidating, but there are some great resources online. Here are a few free starting points for learning code.
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.
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.
Previewing and Inspecting Code
While many browsers have built in developer tools sometimes you just need something that is more visual and accessible.
X-Ray Goggles not only allows you to inspect the code in a webpage but also allows you to remix the text and images.
This open source chrome browser extension allows for quick visual measurements between elements on a live web page.
This handy chrome extension allows you to see the outline of every element on the page with one click.
By putting a design in context it allows us to test the users’ ability to flow through a function of an application.
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 allows designers to connect images from their Dropboxaccount and build realistic prototypes in no time.
POP app helps in quickly capturing UI sketches, creating click throughs and testing a users’ experience.
Patterns are a great way to add visual interest and mood to a design without overwhelming the composition with too much visual noise.
A free online tool that allows you to create variable geometric patterns and export them as images.
Patternizer allows you to create various stripe based patterns and export the code to use directly in the Web page.
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.
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 is a free 3D modeling, composing and animation application suite.
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 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.
A speedy file, link, screen recording and share anything program.
Fifty royalty-free photos of real people that can be use in anything from personas, presentations or web based projects.
High quality and professionally mastered UI sound effects that are royalty free and ready to use in your next mobile device prototype.
The 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.