Articles

15 Web Apps for Web Designers

by . April 7th, 2014

As technology changes and improves, the web shapes itself around it. If you told me two years ago that I could code a website using browser applications, I would have laughed and asked if you were kidding. Now, when I’m on the fly – I’ve found that coding on browsers has become as second nature as breathing and I strain to remember the last time I installed an .app file into my system. There are some in browser IDE’s that let me do more than Dreamweaver.

My logic is that if I can find a Cloud Based Alternative or if a website can do it for me – why bother wasting hard drive space? More often than not, there’s some solution of my problem available that doesn’t require me to install anything.

Like most designers, I’m a digital native. A product of Gen Y through and through. My memories of the early 2000’s are covered in bloated browsers and applications that tried to be the best at everything ever. Development is a different playground now that Apps are more focused with helping the user get things done. Usability, experience and interface now carry as much as weight as the programming.

Let’s take a then and now. Back in 2004, AOL desktop application looked something like this:

sc

10 years later, I can access the same format of content from my browser, with roughly the same functionality.

UIevolution

How much we can do on the web and the web’s evolution will never cease to amaze me, so here’s a few web apps that will really show case the power of the browser and will hopefully try to help you in your workflows.

01. Koding

LINK TO WEBSITE

koding

Koding is a social coding software on steroids. It’s being hyped around in development scene, and for fairly good reasons. There’s an almost limitless range of support, coupled with a built in community for criticism and questions. Loving what they’re doing with it so far and I can’t wait to see where this is going to go.

02. Frooont

LINK TO WEBSITE

froont

Froont is similar to Koding in that it’s also an IDE, but this one has the primary focus on responsive web design. It’s a gorgeous editor that lets you work on the visual side of responsive web design, while still churning out validated code proving to be more than just a simple visual tool.

03. Surfly

LINK TO THE  WEBSITE

surfly

Think of a remote desktop, where one user controls everything and the other gets to watch. Surf.ly is sort of like that but for the browser. There’s a lot of potential with this app when you’re telecommuting and need to hash things out with the designer/developer half of the creation process, or showing clients how things work and flow.

04. SpringLoad’s Responsinator

LINK TO WEBSITE

responsify

 

Responsive testing is the key to prosperity. This neat little tool basically showcases some of the more common formats to make things easier for front end developers. If anything, it will help answer the question: ‘is this div too big?’

 

05. Flexible Math

LINK TO WEBSITE

flexiblemath

A lot more basic then the rest of the apps here, but good grief – a godsend none the less. Now, you don’t have to struggle with pixels and wrangle your calculator for percentage calculations. It cuts the coding process by half.

06. IXD Checklist

LINK TO WEB SITE

ixdchecklist

Have you ever worked on a site and asked yourself  questions like-  will the user understand this? What are they getting out of it and how can I improve their experience? This checklist is a holy grail of things you should double check before your website goes live.

07. Alto

LINK TO WEBSITE

alta

AOL Strikes again. Alto is a gorgeous e-mail client with a keen focus on typography. It lets you run through photos sent to you and attachments with ease. It also gives you a round up/pie chart on which social networks are taking up your inbox space. Bonus! It lets you sign into multiple Gmail accounts.

Screencap blurred due to privacy. 

08. Icebergs

LINK TO WEBSITE

icebergs

A crude way to describe Iceberg, is that it’s basically the love child of Pinterest and Del.Icio.us but for tailored for designers. It’s a more organized way to social bookmark. Installing the browser extension that comes with it is highly recommended. Primarily, I use it as a tool to filter and organise my inspirations. I’ve found that most designers/devs are like pack rats when it comes to links, so this is another nice way to keep them all in order.

09. Mural

LINK TO WEBSITE

murally

Web Designers tend to be very visual thinkers. Murally provides an online white board to map out your ideas. This is great for brainstorming projects, so you can collaborate and see things from a far.

10. Feed.ly

LINK TO WEBSITE

feedly

In this industry, its very important to stay on top of trends and know what’s going on. I can and will always stress about how important it is for you to be up to date when it comes to web designing.

11. GoMockingBird

LINK TO WEBSITE

gomockingbird

An old favourite. Go Mockingbird is the tool I use most frequently when it comes to wire-framing. It also supports 960gs so you can mock up with a grid.

12. PSD Validator

LINK TO WEBSITE

psdvalidator

Are your PSDs friendly for other designers or do they make absolutely no sense at all? We all have different file naming methods and quirks when we use Photoshop. The PSD validator tries to streamline things. I’d use it if I was working on a single PSD wtih a team of designers.

13. Clara.io

LINK TO WEBSITE

clara

Clara is an amazing 3D program that’s accessible on any modern browser. It’s definitely not as powerful as MAYA or Zbrush, but I can see the potential to make some amazing results.

14. TriDiv

LINK TO WEBSITE

trivdiv

TriDiv is similar to Clara in that it’s an in-browser 3D rendering program. It’s a lot simpler in terms of functionality, but it does offer something different in that it exports to CSS3. The potential is limitless if you can creatively apply this to a web page.

15. Stylify

LINK TO WEBSITE

stylyfy

It’s hard not to look at a website with a gorgeous color palette and think – “What did they use?” or ask yourself what font that is. This little tool helps you peak at other designer’s style guides.

Did we forget anything or did you have fun using any of these tools? Let us know your thoughts by leaving a comment below. You can also hit us up on our FacebookTwitter and Google+ profiles. Lastly, our RSS Feeds is open for subscription, so that you can stay creative.

ABOUT THE AUTHOR: