by Julya Buhain . 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:
10 years later, I can access the same format of content from my browser, with roughly the same functionality.
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.
LINK TO WEBSITE
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.
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.
LINK TO THE WEBSITE
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.
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?’
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.
LINK TO WEB SITE
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 Facebook, Twitter and Google+ profiles. Lastly, our RSS Feeds is open for subscription, so that you can stay creative.