'Net Features : zurb

Creative Design Tools for Non-Designers

Pete Prestipino — Thu, 11 Apr 2013 20:10:00 GMT

Face it; you're not a Web designer. You may try your digital best, but hey, you've never been trained in the art of virtual aesthetics. But that’s okay, because we can't all be Web Van Gogh's.

However, for those of us that run websites and don’t have a dedicated design team to allocate work to, it's still necessary to participate in the design process, from wireframing to reviewing, and all those little tweaks along the way.

Luckily, there are plenty of great creative design tools available on the Web that are easy enough that any non-designer can use them. Check out the list below to see if there’s something that can help you look like you play a designer on the Web.

deviantART muro

muro, by deviantART, is a browser-based HTML5 drawing application for the site’s members that allows them to create images from scratch, featuring over 20 brushes, multiple filters and the ability to add layers to an image.

Fluid UI

This is a mobile app prototyping tool that lets users quickly and easily create interactive mockups and wireframes of mobile applications for Android, iOS and Windows 8.

Label59

Ever had a great image to share that just needs a little explanation to make sense? Have you been looking for a better way to engage your audience with photos? Well, Label59 is for you, as this Web app provides an intuitive toolset that lets users label photos and even create an interactive presentation in minutes.

Sumopaint

Sumopaint offers a fast and simple graphics editor application for Web browsers, PCs or iPads that works in 22 different languages, and includes a basic version that is always free for everyone.

Actual Reports Designer

While Actual Reports Designer is really a multi-faceted tool for creating simple designs, it is particularly useful for non-designers that want to generate QR codes to market their services, products or content. The tool includes a library of over 500 industry standard signs and symbols to choose from, as well as a user-friendly drag-and-drop interface.

WeVideo

One of the more popular online video editors available, WeVideo includes three distinct editing modes (Storyboard, Timeline and Advanced) to allow users to edit videos however they’d like. In addition, it integrates with YouTube, Vimeo, Facebook, Instagram, Dropbox, Box and many other websites.

Balsamiq Mockups

This is another wireframing tool that basically lets users feel like they’re “drawing” an early version of their websites, while allowing for various tweaks and rearrangements at any time. Plus, it is collaboration friendly, so teams can create a design and modify it in real time during a meeting.

MindMeister

MindMeister is a mind mapping software with a particular focus on collaboration that has been used by everyone from EA to CNN to Oracle to help users visualize their thinking.

Pixlr

In the wake of Picnik, a number of free image editing services emerged, but none of them are as efficient and user-friendly as Pixlr, which is why it is now the Web’s most popular online photo editor.

Magisto

Turn everyday videos into memorable movies with Magisto, the automated online video editor the selects the best parts of a user’s video, adds the music, themes and effects they select, and the puts it all together to create ‘beautiful” films that can be easily shared with others.

Clue

This simple online application makes it easy (and kind of fun) to test what people remember on a website. Simply enter the URL into the empty bar to create a test, and then see what users report to be the most impactful elements of the page.

Bounce

Like Clue, this app was created by the folks at ZURB and makes it easy to share ideas on a website. Again, just enter a URL, and then users can highlight specific areas on a page and leave feedback for the website owner.

Moqups

It always helps to have a roadmap, so that’s why services like Moqups are so nice. This Web-based HTML5 application lets users create wireframes, mockups and prototypes of their websites with an incredibly intuitive interface.

IcoMoon

IcoMoon was the Web’s first custom icon font builder, meaning it allows users to choose specific icons that they need and turn them into a unique font to improve compatibility we various screen readers.

Sketchfab

Users can publish, embed and share interactive 3D models with Sketchfab. The tool supports 27 different native 3D formats with no plugin required and unlimited uploads.

HTML Banner Maker

Create banners that work across all devices using HTML5 with this Web app that requires no prior coding knowledge.

NodeFire

NodeFire is an HTML5-based interactive animation create that lets users quickly and easily design banners, advertisements, text effects, drop-down menus, scrolling items, marquees, buttons, mini games and much more.

TweenUI

With TweenUI, it takes no time at all to create sleek looking HTML5 banner ads that look great across mobile devices and tablets.

Mugeda

And if you’re looking to create rich media HTML5 ads just for mobile devices, you can turn to Mugeda, the cloud-based solution that can be easily integrated into a publisher’s existing ad platform.

Deliver Responsive Emails with Zurb

Allison Howen — Thu, 13 Dec 2012 20:00:00 GMT

Mobile has changed everything.

In fact, in 2012 most Web workers were focused on projects like building applications and launching mobile-optimized websites. But going into 2013, Web workers need to focus on other mobile initiatives, such as building email campaigns that display properly on all screen sizes.

This is because the increase of smartphone usage has led many consumers to check their emails while on the go, and messages that are not optimized for smaller screens are turning readers away. Luckily, there are solutions available that allow email marketers to assemble responsive emails campaigns, including Zurb’s responsive email templates.

Responsive emails automatically conform to the user’s screen, regardless of size, and Zurb has made five different templates available to the public. Each template comes with a separate CSS stylesheet and HTML file. Zurb notes that all CSS needs to be inline for HTML emails and that marketers will want to use a CSS inliner tool to send their messages, however, many email platforms will do this automatically. Learn more about how to get started with these templates here.

Build a Prototype, Test it with Solidify

Allison Howen — Thu, 18 Oct 2012 21:00:00 GMT

Testing is probably the most important aspect of website development, because it provides developers and site owners with evidence of how user-friendly specific design elements are.

However, sometimes the testing process can prove to be time consuming. The developers at Zurb had this issue in mind when they built a new Web application that allows users to quickly assemble interactive prototypes for user testing across all devices.

The application, called Solidify, allows users to build a clickable prototype with sketches, wireframes or mock-ups by uploading screens and then using hotspots to link them together. Then, users can decide to receive general feedback for specific tasks, on individual pages or the entire prototype.

After the prototype has been created, the developer can share the test with Zurb’s network of testers as well as through email and social media via a secure URL. After the test has been administered, Zurb provides its clients with detailed result reports, which can include tester comments. The results can also be sorted by demographic information, so that it is easy to view how a target audience interacts with the prototype. Then, the result reports can be used to analyze tester behaviors and make data-based decisions for optimizing website performance.

Solidify starts at a price point of $19 a month, however, the company is currently also offering a 30-day free trial.

Quickly Test Mobile Design Elements with Plunk

Allison Howen — Fri, 24 Aug 2012 19:20:00 GMT

Usability is everything – especially when it comes to mobile.

But creating a design that is truly user friendly requires an abundance of testing. This is where Plunk comes in handy. Plunk is a free Web app from ZURB that enables users to create click tests for design elements of a mobile app or website.

These tests reveal a lot about the usability of your mobile design, because they show where an audience clicks in response to a direct request. For instance, one Plunk example from Foursquare asks its audience to check into their current location. Once an audience member starts the test, they are presented with Foursquare’s app and have the opportunity to quickly click the requested call-to-action button.

In order to start testing with Plunk, users must visit plunkapp.com and upload a screen of a mobile Web page or application. Then, the test administrator can drag and drop a hot spot over the target that will be tested. After setup is complete, administrators can share the test, which is available for 48 hours, via email and social media in order to gather results. Then, test administrators can visit their reports page to view how many testers clicked the right location, which can help them decide if their site or mobile app’s design needs to be modified.