Webdesigner Depot

syndicated content powered by FeedBurner

FeedBurner makes it easy to receive content updates in My Yahoo!, Newsgator, Bloglines, and other news readers.

Learn more about syndication and FeedBurner...

Current Feed Content

Comics of the week #272

Posted:Sat, 31 Jan 2015 09:46:27 +0000

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

A conditioned response

Check the expiration date

Know your limitations

Can you relate to these situations? Please share your funny stories and comments below…

200+ Professional Photoshop Actions – only $17!

Source
How to perfect your websites with marginal gains

Posted:Fri, 30 Jan 2015 08:15:20 +0000

A little over a decade ago, British competitive cycling was nowhere. With a couple of notable exceptions — Tom Simpson in the ‘60s and Chris Boardman in the ‘90s — no British cyclist had made a significant impact on a sport dominated by France, Belgium, Italy, Spain, and Australia.

Then, in 2003, British cycling appointed Dave Brailsford as performance director, who introduced marginal gains. Marginal gains is a philosophy that — rather than focus on sweeping change — identifies small improvements which when aggregated, result in significant progress.

Subsequently, at Beijing in 2008 the team took 17 Paralympic, and 8 Olympic golds. Four years later in London they took 8 Paralympic, and 8 Olympic golds. The achievement was capped by back-to-back victories in the 2012 and 2013 Tour de France, the first British victories in the history of road cycling’s premier event.

“If you broke down everything you could think of that goes into riding a bike, and then improved it by one percent, you will get a significant increase when you put them all together.” — Dave Brailsford

Marginal gains in web design

Since the British cycling team shocked the nation by not falling off their bikes, marginal gains has become something of a rallying cry for business. But whereas businesses typically need to restructure, and drive this change from the boardroom, it’s a philosophy that dovetails neatly into existing web design practice.

Marginal gains is an iterative approach to problem solving, as favored by lean startups. Through the use of design patterns, most websites perform broadly similarly to their competitors; that being the case, even a minute improvement is sufficient to make a website stand out.

1% is, of course, not a literal figure. It’s impossible to quantify a design improvement in terms of a percentage. And even when a percentage can be found by measuring conversions, or performance, it’s not always desirable to do so. The key point, is that marginal gains focuses on small improvements.

Finding 1%

Adopt the mindset that there is a 1% improvement to be found in every element of your website. The benefit of 1% is that it’s an attainable target.

Naturally some elements of a project have greater scope for improvement than others. Areas that tend to lend themselves to marginal gains, are the elements that are often ignored by a traditional waterfall process.

For example, error messages are commonly not copy written, and rarely designed, because they’re invented by the development team during coding. That tends to result in human-friendly messages such as Error 427: Expected data.

To find 1% improvements, teams need to adopt a multi-disciplinary approach. Every element needs to be planned, designed, and engineered. And processes must not be put into silos. That’s not to say that every designer needs to understand OOP, or that every developer needs to be able to adjust tracking. But a collaborative effort, in which roles overlap, will prevent elements falling down the cracks.

Copy that is generated by code; UI elements that aren’t predicted in style tiles; interactions that are added post-build; these are all areas rife for improvement.

The easy 1%

The key to a marginal gains approach is that everything can be improved, and that every incremental step is worthwhile when viewed as part of a whole.

we want the 1%, but we don’t want to pay for it

When optimizing an image, there is a tendency to save in accordance with default application settings: commonly we’ll save a JPG at 60%, then try and drop it to 40%. If the resulting quality is too low we revert to 60%. But we only need to find 1% so try saving your JPG at 59% quality. In a few quick tests I found that dropping 1% off the quality resulted in an average 3% reduction in filesize — the benefit is disproportionate to the cost.

Never use a webfont that you can’t subset. Minify CSS and JavaScript. If you’ve got a 2 minute video on your site that’s 2880 frames, cut 29 of them, just over a second, and you’ve found your 1%.

There are substantial improvements to be found if we invest time and effort. For example, replacing JavaScript libraries with vanilla JavaScript will reduce your site’s footprint. However libraries such as jQuery bring benefits like simplicity, and maintainability, that outweigh their cost.

The key to success with marginal gains is that the cost of implementation is negligible: we want the 1%, but we don’t want to pay for it.

The essential 1%

We’ve known for a long time that users don’t read websites. Whilst we carefully craft content, our users are extracting everything they need to know from a couple of button labels. Whether they scan in an ‘F’ pattern or click around until they hit something that looks interesting, users focus on extreme details.

That’s why micro-copy is such a big deal. It may be a hint, or an error message, a score we share on Twitter, or the labels on our menu; users spend more time with micro-copy than anything else on our sites. However, micro-copy is also the copy that is least likely to be designed, or provided by a client. Micro-copy is too often an afterthought that exists in the cracks.

We all create passwords, most of us create them daily. So most of us have experienced the red asterisk that lets us know that our suggested password has not met with approval: we submit an account creation form only to find that we needed 8 characters; try again and we need less than 12; try again and we need a number; once more, we need uppercase and lowercase; try again and we need punctuation; try again, and we need different punctuation. It usually takes me about three attempts before I start to wonder if I really want the account after all.

We have to write the error message to tell the user they’re wrong anyway, micro-copy alongside the form, clearly stating the rules, helps them get it right first time and has a negligible implementation cost.

The perfect 1%

If there’s one area that fully embraces marginal gains, it’s typography. Finding the correct measure, the optimal leading, and making use of advanced features such as smart quotes, ligatures and small caps provides a measurable improvement in readability.

There is no downside to good typography

Typography is as much science as art, with precedents created by the way the human eye and brain, process written language. As such, there are rules that define how we use it, meaning sweeping changes are rarely desirable. Typography is all about finding multiple 1%s to improve the whole.

If you’re looking for 1% in your design work, focus on typography. Not only is it 95% of web design, it’s also a discipline that’s perfectly aligned with marginal gains. There is no downside to good typography.

The value of 1%

1% is an easy figure to bear in mind, but it‘s plucked from the air. What matters is making small improvements that carry a negligible cost.

Any improvement to an already refined website is incrementally harder. Finding a 10% performance boost will introduce unwanted side-effects such as loss of quality. If we can find 1% in ten different areas we can make the same 10% performance boost with no pay off.

1% improvements have little benefit on their own, but taken as a whole marginal gains is a process that will make your websites stand out.

Featured image, teamwork image via Shutterstock.

200+ Professional Photoshop Actions – only $17!

Source
How much should you charge for design?

Posted:Thu, 29 Jan 2015 08:15:03 +0000
How many times have you asked yourself this question?

A potential client wants your proposal for a design project. You’re sitting in front of your computer, scratching your head. You ask Google, your friends in Facebook, your Linkedin groups. You browse designers’ forums. You’ve found some price lists. Are they relevant for you? Are they relevant for this particular project? Can you use it as is?

You then think of your former projects. You charged x for a website design, and y for creating those restaurant menus. What can you deduce from this? You’re not sure. And indeed, how much should you charge? This must be the single most frequent question creative freelancers ask; and it seems like no one out there is sure what to do.

What’s wrong with price lists?

I used to have my own fixed price list:
1. A logo design = $xx
2. A wordpress website design with 5 templates = $yy
3. Mobile design for an app =$zz
and so on… (It’s more detailed of course, but you get the point.)

My price list was based on what I charged for my former projects, and on data my colleagues shared with me. Once in a while I updated it. Many freelancers and design studios I know use such a price list, so I thought I should too.

One day, sitting at my favourite cafe, Shelly the waitress approached me…
“You’re building websites, right?”, she asked.
“Sure”, I said.
“So… I’m in a band. We need a simple website. How much would you charge for building us one?”
She put on her cutest face.
“Well, I usually take…”

I couldn’t finish that sentence. I knew exactly how much a waitress earned in this cafe. So I knew she couldn’t afford my services.

“Listen, let’s sit together for an hour or two. I’ll show you how you can build your own website for free. There are a few platforms for just what you need.”

I felt bad asking her for money.

Walking out the cafe that day, I understood something about pricing. I couldn’t ask hipster-musician Shelly for her money. But if the manager of a large company would ask me to build him a website, I should charge him twice my usual rates. Why? because he has the money. Just like Shelly doesn’t.

These are values I have – and they are not included in my pricing as a factor. I do not consider myself a socialist or something, I just want money from whoever has it.

There are many factors we forget to include in our pricing.

“I wouldn’t do it for a million bucks”

We all have red lines. Things we’d never do – not even for a million bucks. Well… as Demi Moore showed us in Indecent Proposal, that is arguable.

What do you do when you need to write a proposal for a project that will make you hate yourself? I’ll tell you what I do. I give it a sky-high price.

For example, I have a personal problem with dating websites. I think they are awful. So if someone asks me to build one, I would price it really high. So high, that I would probably not get the job. I don’t feel bad if I lose this project, because I didn’t want to do it anyway. And what if the client wants to pay me that much? Well, then I might be able to quiet my inner voice. Just to be honest, I do have a real red line. It’s gambling websites. Those make me puke, and not even a million dollars will change my mind. I mean, not even half a million. Or is it $100K?

This principle goes the other way, too. When someone offers me a project that could change my life – I price it not-so-high. In order to work with people I admire, I’m willing to use my lowest rates. It’s worth more than the money. Though, I’d still ask for what I need to survive. I can’t be creative when I imagine my landlord’s face in front of me.

Money can motivate me get out of bed

Sometimes I need to send a proposal for a super boring project. I can’t imagine waking up in the morning to this boredom. Like when I had to build a news website for some old guys in Washington. They were nice people, but the website wasn’t anything cool or funky. Quite the opposite.

Should I turn it down just because it’s boring? Not at all. If I get enough money, I’ll have the motivation to get up in the morning and start working. And vice versa: if this is an awesome project, I can live with less. My motivation is then built from loving what I’m doing.

And what about my reputation? Don’t forget that the projects you’re working on are the ones you’ll have in your portfolio. Those projects will attract the same type of clients. As they say: “shitty projects attract shitty clients”. So I’m charging more to work on a project that I won’t put in my portfolio. I have to compensate myself for not doing something that can push my career forward.

I mean, it’s not like I’m telling the client, “Your project bores me, hence I want twice the money.” Instead, I’m just taking a risk by putting a higher price. If I lose it – maybe it’s for the best. At least now I’m free to hear about other opportunities. And if I get the project, I’m paid well enough to give up other potential projects.

“How much should I charge?”

So I’m not using price lists anymore. How do I calculate my prices then? With three simple steps:
1. I have calculated my hourly rate. This is the rate I need to get in order to maintain my lifestyle.
2. I then estimate the amount of hours I need to work on this project. I add extra hours for meetings, emails, change requests, etc. In my case I use 30% extra for the overhead.
3. Then I add the rest of the factors, just like I described before. Is it a boring project or a dreamy one? Will I use it in my portfolio, or would I hate myself for doing this?
“You should take yourself more seriously”, a Zen monk once told me. The biggest problem with using a price list is that it doesn’t include you in the picture. You are not a robot. Don’t price your work without including factors that take into account your feelings, motivation, and the value of your future.

It’s high time you started pricing like a pro.

Featured image, money image via Shutterstock.

200+ Professional Photoshop Actions – only $17!

Source
Theme.co releases awesome update for X theme

Posted:Wed, 28 Jan 2015 08:15:15 +0000

When you’re looking for a WordPress theme, one of the most important features is that it shouldn’t look like a WordPress theme. With a startling array of customization options, Theme.co’s X theme, is probably one of the least theme-like themes available.

Right from the outset X pushes the boundaries of what is traditionally thought of as a WordPress theme, it feels like an extension to the whole of WordPress, a way of building WordPress sites that doesn’t rely on WordPress expertise. Using X feels like using a supercharged version of WordPress.

X comes with 4 basic stacks — template styles — the default, a flat design version, a minimal version, and a magazine-style version. And of course, there’s all the basic options you’d expect with a premium WordPress theme: Google fonts, WooCommerce integration, a responsive grid, and tons of navigation options, including three-tier dropdowns.

One of our favourite features of X is its Page Builder, which allows you to build up your pages by dragging and dropping elements; perfect for those who don’t have any development experience. But advanced users aren’t left out: X also includes a comprehensive set of shortcodes, for speedy expert development.

One of X’s key features is a series of blank page templates, allowing you to create virtually any layout you like — even specialist single-page websites.

One of the main reasons businesses choose WordPress is that, like most CMSs, it gives them the ability to keep their site fresh with constant revisions. X makes this safer, with its excellent live preview, allowing customers to fiddle with their sites, without affecting the live customer-facing version until they’re satisfied.

X has one of the simplest approaches to theme customization ever, and even allows you to export and import settings, so you can transplant designs to other X theme installations.

What’s more, customization options are handled by WordPress’ native theme customizer, providing an intuitive interface that many clients will already be familiar with. This is central to Theme.co’s approach, because whilst they’ve set out to improve WordPress, they haven’t tried to replace it, and all of X’s features use the core WordPress functionality where possible.

X is one of the most popular WordPress themes ever made, and it’s now on its third iteration. New for version 3 are a dozen dedicated plugins that you won’t find in any other theme: Slider Revolution is a dynamic, responsive, slider generator; Visual Composer lets you quickly layout templates with shortcodes in a visual interface; Contact Form 7 is a simple form styled to match X’s stacks. They’ve been carefully developed to ensure they’re perfectly compatible with X.

The benefit of new functionality being added as plugins is that only those users who want to features need load the code, users who don’t want those features have faster, more streamlined sites.

You can even white-label X, so you can deliver incredible WordPress experiences, without ever letting your clients in on your secret.

Of course, none of this is worth a penny if you can’t get it working. Happily, one of the first thing X customers rush to praise is the amazing support provided by Theme.co’s staff. Purchasing a license for X gives you free access to a members’ area, where you’ll find clear documentation, articles, video tutorials, and a support forum in which dedicated support staff are friendly and helpful.

There are a lot of WordPress themes on the market, and some of them offer similar functionality to X, but we’ve not seen one with the same number of customization options. Plus the simplicity with which you’re able to make X theme your own, means that it outstrips even the better site builders, finally making WordPress a one-size fits all solution.

[– This is a sponsored post for Theme.co –]

200+ Professional Photoshop Actions – only $17!

Source
How to boost your personal brand as a designer

Posted:Tue, 27 Jan 2015 08:15:00 +0000
Perception is everything! Many famous creatives grew to fame because people knew about them, more than their work. Should you create a persona of yourself that’s bigger than life? Does it lead to higher fees or fear that you command higher fees? How do you deal with clients who have elevated you to heights higher than you have elevated your own self worth?

I had a boss who told me that when she started her million-dollar business, she made sure her stationery, cards, etc. were the best stock, printing and design she could get. She said it sold her company to prospects before she had ever opened her office. Without sounding cocky, you must sell yourself to a prospective client so they feel they are lucky to have you as their designer.

Don’t stand for being beaten up

We all know the type of client who wants everything for nothing. They make lame promises, threats, and insults to put designers in their place. They want to make the designer feel as low as dirt, hoping the designer will work for free, or very little. We complain about these types of clients but do little to correct their behavior. It’s time to nut up, or shut up!

The first thing you must understand is that there is a difference between having the confidence to elevate yourself in the eyes of the client, and being a douche-bag to others around you. Too often, designers beat on each other. Most designers, if not all, carry a fear that their peers won’t respect their work. The truth is: it only matters what the client and you think of your work.

In art school, where teachers post your work on the wall for critiques, allowing every member of the class to enjoy the sound of their own voices, the lesson is not to see what you did wrong… or right. Class critiques are to teach you how to hear criticism of your work from others. We know not every student in your class will make it in the creative field. In some schools, the rate of graduates who find work in their area of study is as low as 12%, so why would 88% of the critiques mean anything to you?

The art school critiques are misplaced lessons. They should not be for you learning to take criticism, but for you to learn how defend your design decisions and how to convince clients you made the right ones.

I’ve always been amazed at the amount of working professionals who ask other designers what they think of their design ability. My quick and pointed answer when I’m asked to look at someone’s portfolio, is to ask them what they think of their work. If they say they don’t know or aren’t confident about their decisions, they’ll never make it in the creative field until they grow a pair and find confidence in their ability to love their own design decisions.

Other designers are not your partners

There are numerous self-congratulatory groups on Facebook, LinkedIn and sites like Dribbble where such “designers” go for affirmation – usually from other designers who have time on their hands because they’re not busy with work of their own.

If you ask ten designers what they think of your design, you will get ten different opinions of what you did wrong. The only thing you did wrong was ask other designers for their subjective opinions. It’s not that they’re wrong, they just aren’t right. They weren’t there with the client, they didn’t hear the creative brief and they weren’t privy to the changes the client wanted. They also aren’t the ones who sign your checks. So perk up, because you’ll never know what the client will think until you show it to them.

If you are busy seeking the approval of other designers, how can you be confident enough to seek the approval of a client?

I love retelling the story of a local designer who specialized in real estate design. He created templates for real estate agents to order sales sheets for each new property listing and he made a large, six-figure salary. His family enjoyed a good life, he put money away and saved for his kid’s college fund. He also felt like he wasn’t a “true designer” because other designers made fun of his work.

Those designers who passed judgement on his specialty were always unemployed, complained about the lack of work, but somehow felt they were better than this man; and their opinions drove him insane. He shouldn’t have cared that others had some weird standard of what a designer should be. Part of their standard was to not be able to find work or pay their bills.

Pluck up your courage and confidence

If you aren’t confident with your own design ability, you have to discover why. Are you just not happy with the final design when you are left to your own decisions? Do client changes send you into an indecisive depression?

When you are going to present preliminary sketches to a client, do you obsess over the worst one, hoping it won’t be picked? Then get rid of it! If only two sketches are exciting to you out of three, then present two sketches. If the client asks why there aren’t more, say these two are the strongest concepts that will solve the design solution. If they want to see more, make them tell you why the presented solutions don’t solve the problem. Assert your professionalism and don’t position yourself as a design slave.

When you let go of the part of you that is more concerned about what other designers think and concentrate on what you like about your work, you will find your creative juices flowing freely. That will end up pleasing your clients. Project approved, check received, design successful! That’s all you need to be a great designer.

Be big in your own mind

Getting back to perception, it’s odd how some clients think. At one of my corporate jobs, the head of the creative department told all freelancers that they had to brand themselves as a large studio, and not just as Jane Doe Design. They needed to have a studio name that made it seem like the company was dealing with large, multi-designer studios. Yes, it was ridiculous because that would leave out Milton Glaser Design and other well-known design firms, but the perception was what won out.

Now you need to think big. As odd as it may sound, bull honky makes the world go around. Well, maybe it’s not that odd, so why not join society and hype yourself? I’m not telling you to lie and cheat. I’m telling you to start focusing on the positive things about yourself, and not the negative things that keep you down.

Like the lesson from my former boss who set herself up as a professional before she even started work, you need to ooze success. This goes for networking and how you present yourself and your brand, to how you speak to people. Humble-but-confident is the key. Almost, as my old boss used to say, as if you don’t care if they become your customer or not.

My old boss would actually kick people out of her office, and I was always amazed that they would come back, begging to deal with her. She was very talented and it showed. There is also the human response to want what you can’t have.

Some of my biggest clients were people who approached me with offers for me to do freebies or work cheap. It was my polite manners and insistence that I could not work cheaply that made me one of the highest paid freelancers among my peers. When the higher pay wasn’t available, I negotiated less work, such as one concept presentation, and limited changes. All the time, having a cool exterior, I was falling apart in one big panic attack inside. When that doesn’t show on the outside, people, as hard-arsed as they may be, decide your poker face is enough to convince them that you can’t be pushed around.

It is true that there are some people who only offer free work opportunities to freelancers, but there are those who decide they will pay a fair wage when confronted professionally and convinced that you are worth the payment.

Conclusion

I was impressed with an art student I met at a Phoenix, Arizona art school where I was a guest speaker. She had the swagger, but without the attitude. Her portfolio was expensive and professional, well put together, like a book and not a mish-mash of sloppy samples just thrown in. Her outfits were always well put-together, her cards, stationery and website were clean and beautiful, and she spoke with a confidence that made me think she was an older student and not someone right out of high school. She was set apart from the other students and she obviously didn’t care. She had her target of success in sight. She is a very rare example of an art student who has it so together, but doesn’t step on others to elevate herself.

We’ve remained friends and I’m fascinated by her quick rise to success. I wasn’t the same way in art school. It took me years and plenty of hard and painful lessons to find the right balance of ego and attitude. If I could summarize the lessons I’ve learned to ooze success, even when times are tough, as they can be for all of us, they are these:
1. Don’t get cheap with your brand! Your brand is the first impression of your professional standing.
2. What matters is a satisfied client and your opinion of yourself and your abilities. Ignore what other designers think. They don’t pay your bills.
3. Negativity is a drain of valuable energy. Worry about your career, and not the careers of others.
4. Don’t brag, but don’t shrug and talk your work down either.
5. Always smile at a client and never take an insult of a bad offer personally.
6. Never lose your cool! Look at every situation as a test of your ability to solve a negotiation in your favor.
7. It’s artwork not artplay! Don’t let clients get that mixed up.
8. Stand your ground. Walking away from a non-paying, or low-paying project costs you nothing.
9. Start your first fee offer high. If you agree to a discount, then you won’t lose income and the client will appreciate your flexibility, without losing respect for your professionalism.
10. Your career is your life! Take it seriously and don’t let your peers sabotage it with their opinions or standards. Misery loves company. Quit that company!
200+ Professional Photoshop Actions – only $17!

Source
The ultimate guide to SVG

Posted:Mon, 26 Jan 2015 08:15:41 +0000
Imagine you could embed an image in a web page, scale that page to any size, and never lose image quality. Well, you can. It’s totally possible, we just haven’t been doing it as much as we should.

Images with fixed sizes such as JPG files, GIFs, and PNGs have their place on the Web, but their inherently static nature conflicts with the way the Web is going. As we move to responsive, flowing designs, the more irritating it gets to have to deal with images that are fundamentally not responsive. It’s frustrating beyond belief when I realize that it’s becoming best practice to create and serve several different versions of each image on your site.

I realize that there are good, technical reasons for this. It’ll be a long time before anyone creates an infinitely scaling photograph, for example. However, photos are not the be-all and end-all of imagery. Vector graphics have come a very long way. They’re going a long way yet.

When I was first looking for the solution that lead me to the SVG, I didn’t know how much it would change how I make websites. I am still surprised how often SVG has become the solution to more and more problems. — A Bit About SVG by Philip Zastrow

They can be more difficult to acquire, because not every web designer is an illustrator. Photos are plentiful and good stock imagery is easy to find. Vector graphics, on the other hand, are often of low quality, or perhaps you just can’t find the right one. Hiring illustrators is expensive.

But as support for vector graphics grows online, so will their use. It’s time for everyone to learn how to implement them on their websites, and use them creatively. Images as responsive as our websites are the future.

Meet the SVG file…

What is SVG and why should you use it?

Alright, for the newbies among us, SVG stands for Scalable Vector Graphics. SVG files are rather simple things, in theory. They’re just text files with a bunch of XML inside. Every bit of visual information in an SVG file is defined by human-readable code, which is then calculated and rendered by your browser, graphics software, etc.

This means that although SVG files aren’t as complex as, for example, a photograph formatted as a JPG, they’re infinitely more flexible. They can be altered manually in a text editor. They can be altered by code, such as JavaScript and CSS. They can be compressed to almost ridiculously small sizes.

So you write HTML? JavaScript? CSS? Good. Then you already know a lot of what you need to know to get writing SVG. — Why Aren’t You Using SVG? by Jonathan Cutrell

In other words, they’re specifically designed to be used alongside other web technologies. They’re perfect for us.

In the late ‘90s, Macromedia and Microsoft (and other companies) introduced VML, and then Adobe (and other companies) presented PGML as possible solutions for vector images in websites to the W3C (and possibly as alternatives to the old PostScript format). The W3C said, “No, we’re gonna do our own thing; but thanks for the ideas!” The result was the SVG Working Group.

In September 2001, SVG 1.0 became an official W3C recommendation, and the rest is history. Sort of. Internet Explorer lagged behind in adopting the SVG format, surprising no one. Since then, there have been updates geared toward mobile devices, and more with clarifications.

Even now, the SVG Working Group is creating SVG 2 which will include more integration integration with things like HTML5, CSS, and the WOFF font format.

It’s got support

The only version of Internet explorer you have to worry about right now is IE8. That’s it. Everyone else has more or less full SVG support. Yes, you may run into bugs on occasion, even in the “good” browsers, but it’s still worth it. Not only will working around them keep your problem solving skills sharp, but the more we use this technology, the more browser developers will support it.

Here’s the deal: there’s no reasonable excuse to avoid using SVG for vector graphics on the Web (with a PNG fallback, primarily for IE < 9 and older Android). — SVG, Use it Already by David Bushell

Check out caniuse.com for a more in-depth analysis of what works and what doesn’t in which browsers.

Everything’s responsive… or it should be

Internet technology has gone way, way beyond the static websites we used to know. It’s time for our images to catch up, plain and simple. When you have to make an icon, use SVG. When you have to use an illustration, go for SVG if you can. If you want an abstract, but still simple website background, use SVG.

From our experience developing responsive websites, we’ve learned that Scalable Vector Graphics (SVG) is one of the best file formats to use. Not only do SVG images scale well without becoming blurry, but they also offer a number of other benefits to developers, search engine optimisers and the end user. — We’re Using SVG for Website Build. Should You be Too? by Shay Porteous

I’m not a fan of the retina screen technology, especially because I don’t have one. It’s not jealousy. Well, it’s not only jealousy. The simple fact is that Retina screens have gone and made serving up images that much more complicated. SVG, being infinitely scalable, can help to minimize the problem.

Accessibility

Users who are visually impaired generally browse the web with everything zoomed in a little. When regular images get zoomed in, they lose quality. SVG won’t do that, so why not take advantage of it to give the visually impaired a quality experience?

It can help to future-proof your website

Technology is always changing. What’s here today could be gone in a while, but SVG will most likely be around for a while, yet. As long as the W3C sets the global industry standards, it seems that SVG will continue to be the de-facto standard for vector graphics in the browser. Use it now, and your websites will be set for a good, long time.

So it saves space, decreases load time and saves me time. It’s a change of tactic that has paid off and hopefully I’ll have opened someone else’s eyes to the potential benefits of opting for SVG before other image formats. — How and why you should use SVG images on your site by Sean MacEntee

SVG Tutorials & How-tos

So you’re convinced. SVG is cool, it’s the future, it’s time to learn it. Luckily for everyone, this is the Internet. You just know that people have spent precious hours upon hours creating free training material for anyone who wants it. People who do that sort of thing are the people who make the Internet awesome.

Then, of course, we went and spent hours looking through the various tutorials to find the best ones out there. You can thank us later. For now, there’s reading to be done!

Note: Keep in mind that SVG files are all XML code, so many of these tutorials are developer-focused or just have a lot of code in them. We’ve included both tutorials focused on the basics, and on specific, creative uses for SVG, so don’t skip this part.
- Using SVG: Chris Coyier has been writing easy-to-understand CSS and HTML tutorials for years at css-tricks.com. His primer on SVG is no different. I’ll be including links to lots of basic explanations and tutorials, but this is where I’d start. This tutorial includes basic instructions for Adobe Illustrator users.
- How to Get Started With SVG: I’d be remiss if I didn’t include WDD’s own contribution to SVG education. The ever-fantastic Sara Vieira covers creating your graphics, exporting them, cleaning up the code, moving presentational attributes to CSS files, and more.
- Resolution Independence With SVG: If it’s web-related, then Smashing Magazine probably has an article about it. They cover the basics of the SVG format with their usual style and attention to detail.
- Scalable Vector Graphics (a Series of Articles): Hongkiat.com is another resource for quality web and graphics-related learning. Instead of just providing one long article, they’ve published an entire series of them by Thoriq Firdaus. The English is sometimes a bit lacking, but the instructions are still clear and easy to understand.
- Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS: This is a video of a presentation given at CSSconf EU 2014. In it, Sara Soueidan provides a number of tips, tricks, and even a few hacks for applying styles and animation to SVG on the web. It’s half an hour long, so get comfy and keep something to make notes with on hand. It’s completely worth your time.
- Exporting SVG for the web with Adobe Illustrator CC: Adobe Illustrator users should check this out. One of Adobe’s own blogs gives detailed, and I mean very detailed, instructions about how to export SVG files for the Web. Learn how to optimize them down to the smallest file size for the Web.
- SVGBasics: This entire website is dedicated to teaching people how to create SVG graphics from scratch with XML. I recommend this for who’s dealing with the actual back-end — or even front-end — of any website. Knowing how the code works can go a long way to solving problems on the fly.
- SVG Tutorial by Jakob Jenkov: Another developer-centric set of tutorials, here. The big difference? The author included video versions of each section. If you learn better by having both visuals and audio to go with your lessons, this is a good place to start.
- The Simple Intro to SVG Animation: The title says it all. David Walsh explains how to set up your SVG elements for animation, which attributes to use for different elements, which libraries to use, and more. It’s not a full guide, but it will introduce you to the basic concepts necessary to start animating.
- An introduction to SVG animation: This tutorial goes into a little bit more detail about exactly how to go about animating your SVG objects. On top of that, it addresses some common issues that you may run into when animating, so it’s worth a read.
- How to: Export multiple icons to SVG files from Adobe Illustrator: Creating a set of SVG icons in Illustrator? Keeping them all in one Illustrator file? Export them all to their separate files in a single click.
- Animate Text with SVG Paths: Does exactly what it says in the title. Get your animation on, maybe use it on a logotype. It certainly looks cool enough…
- Animate SVG Icons with CSS3 & JavaScript: One of SVG’s biggest uses is for icons, and with good reason. Make one file, use it anywhere in your site or app, at any size. What more could you ask for? This tutorial shows you how to animate those icons on hover.
- Creating a Scalable SVG Infographic: Infographics are one of the Internet’s favorite ways to consume facts these days. Why not make them infinitely scalable? Throw in some animation, and you could very well blow some minds.
- Making a SVG HTML Burger Button: Say what you will about the hamburger button, it’s probably not going anywhere. You may as well use SVG and animation to make it the shiniest, coolest hamburger button you can. This one covers how to animate paths and strokes to make one button literally turn into another, so give it a look.
- Snap.svg Examples and Tutorials: This is a guide to using the Snap.svg JavaScript library (see the “Tools” section below) section below. It’s designed to help you get started with creating SVG elements in JS, and animating them, making them interactive, and so on.
- Introduction to Raphaël.js: Raphaël.js is one of the big SVG-related JavaScript libraries out there, and this article teaches you how to use it. (Again, see the Tools section below.)
- Animated SVG Icon: People seem to like animated icons a lot, so you may as well learn every approach to making them that you can. Here we see the Snap.svg library in action once more, as the author creates, and then animates, a media player “play” button.
- Clipping in CSS and SVG — The clip-path Property and Element: Here’s a nice long article about how to use SVG clipping to make pictures inside shapes, and pictures inside huge text. You might consider using it to make big fancy headlines that are SEO friendly because search engine bots can read them.
- Making SVGs Responsive With CSS: Although SVG files are infinitely scalable, the methods used to put them inside a web page can sometimes cause issues. This tutorial from codrops explains just how to fix the various problems you may encounter.
- Shape Hover Effect With SVG: Create a smooth and classy-looking animated hover effect for image previews. (Check out the demo.)
- An SVG Primer for Today’s Browsers by the W3C: Not quite last, and certainly not least, we have a resource provided by the people who came up with the whole SVG format in the first place: the W3C. It’s not a basic tutorial or an introduction. According to the preface, it was created for professional programmers, graphic designers with “a strong technical bent”, and others who don’t mind getting down to the nitty gritty.
- SVG Tutorial by MDN: Like SVGBasics, this is a rather extensive set of tutorials, provided by the Mozilla Developer Network. Extensive as it is, though, the tutorial itself is considered “under development”. For example, this can currently be seen on the “Filters” page, which is empty. According to the page itself the tutorial is in an early stage of development. If you’re able, please help out by chipping in and writing a paragraph or two. Extra points for writing a whole page.
SVG Tools

One of the many advantages to SVG’s open nature is that anyone can make software for it. There are no licensing restrictions or fees to pay, just an open standard for people to use. As you might expect, many developers have done exactly that.

Tools for creating and using the SVG format abound. They range from large software packages which include the option to export SVG as an afterthought, to vector drawing apps which use SVG as their primary format, and more.

A quick Google search for “SVG tools” returns “About 37,000,000 results”, so you know there’s a lot out there.

Where then, should you begin?

Premium Applications

The big names in graphics creation all support SVG. Adobe Illustrator, Corel Draw, even various products from Xara — yes, Xara is still a thing — they can all import, edit, and save files in the format. (Illustrator has been known to put some odd things into SVG files, though, so you have to be careful with the export settings.)

Inkscape

If you’re not already using a vector graphics package, Inkscape is a fantastic place to start. Created in 2003 as a fork of another open source project called Sodipodi (which was based on yet a another OSS project), Inkscape has become the standard for free, cross-platform vector graphics software. It’s not quite as feature-filled as Adobe Illustrator, but it’s more than enough for most vector projects.

Serif DrawPlus Starter Edition

Serif is a company that makes pretty good graphics creation and desktop publishing software. All of their main software offerings come with free “Starter Editions”, and their vector drawing app is no exception.

Don’t let the “Starter Edition” bit fool you, though. It might not have everything the pro version does, but it can get the job done in most cases. Unless you’re an illustrator by trade, this app can and will meet your needs… provided you’re on Windows. Sadly, it’s not cross-platform. Also, registration is required for the download.

Karbon

Part of the Calligra office suite, which is primarily for Linux, Karbon is a fully-featured vector graphics editor. It’s got all the basic tools, and a few things besides. Installation on Mac and Windows is difficult at present, though not impossible.

PrintDesign

The name sounds like a software package from the 90s, I know, but it’s actually pretty new. In fact, it’s the successor to the old sK1 illustration app, which has been discontinued. PrintDesign is currently in the “preview” stage, and has both Linux and Windows versions. It’s not ready for production use yet, but it’s a project worth watching.

SVG-edit

The name’s a bit on-the-nose, perhaps, but the software is more than capable. SVG-edit’s based entirely on web technologies, specifically HTML5, JavaScript and CSS. This means that there’s no server-side functionality. What’s more, it’s Open Source, meaning you can download it, put it on your own server, or even just use it from the desktop.

It’s got a feature list long enough to make many a desktop app jealous, and runs faster than most of them, so give it a whirl.

Janvas

Janvas is the only web-based app on this list that isn’t strictly free. There’s a thirty-day trial period, after which a subscription costs 26 Euros per year. If none of the other web-based SVG editors make you happy, though, you might actually consider it.

The drawing tools are advanced and familiar enough, every variable is editable in the side-bar, and you can save your documents to Google Drive. You can create templates, collaborate on drawing documents, and even include CSS and JS files made to interact with the graphics.

All in all, it’s a solid offering.

Mondrian

Small. Sleek. Simple. Mondrian is yet another open source offering, and it’s a lot smaller than most. It doesn’t even have a text tool… but it does simple drawings very well. You can open files from the hard drive or a URL, grab embed code for your website, or just save your drawing as SVG or PNG. It may not be as advanced as other apps, but it just feels nice to use, and the pen tool feels natural.

Draw SVG

Draw SVG is another web-based SVG editor with all of the features you should ever need. It’s strongest point seems to be the sheer speed with which it loads and draws things. Sadly, however, the user interface is seriously flawed. Still, it’s there and it works, should you ever need it.

SVG Libraries

Developers rejoice! We have some links here for you too. After all, SVG isn’t just another graphics format. It’s code. It’s code that can be linked to, or embedded. It can be interacted with and changed on the fly. With math!

Snap.svg

Snap is a JS library for generating and interacting with SVG. It’s designed for modern browsers. Yup, that means it only supports IE9+… but if older browsers are not your concern, go for it.

Raphaël

Raphaël, unlike Snap, is compatible with older browsers. In fact, it can work with IE6+, Safari 3+, and Chrome 5+. If you’re developing something for an enterprise system where users might be on older machines, for example, Raphaël might be your best bet.

jQuery SVG

Like SVG and jQuery? I’m not really surprised. jQuery has, perhaps, lost some of the spotlight attention that it once had, but it’s still a go-to library for many of us.

jQuery SVG, then, is quite possibly the plugin you’re looking for. It’s got functions for animations, making graphs, and even extensions. That’s right, extensions for a plugin. Browser support is IE9+, but older versions of IE can be used with the appropriate browser plugins installed.

I wouldn’t depend on users having those plugins, though.

SVGMagic

SVGMagic is a drop-in, jQuery-based, solution for older browsers (IE 7 & 8). Instead of manually creating fallback images for each and every SVG file you use, this plugin can generate them on the fly. It handles background images just fine as well.

How does it do any of this? It detects whether or not the user’s browser can handle SVG. If so, it goes to sleep. If not, it contacts a server-side PHP script and tells it to create a PNG file of the SVG images in question with the necessary dimensions.

Once done, the PHP script sends the URLs to these temporary fallback images back to the jQuery plugin, and the default URLs are replaced. This obviously takes time, so you can optionally specify a placeholder image to be shown while the conversion takes place.

One caveat: currently it can’t handle too many images at once. You wouldn’t want to use this technique on pages with more than a few SVG files.

SVG.JS

Lastly, here’s an option for the byte-counters. SVG.JS weighs in at only 11.8kbs when gzipped. Despite its small size, it supports an impressive number of features (as listed on the project’s page):
- Animations on size, position, transformations, color
- Painless extension thanks to the modular structure
- Various useful plugins available
- Unified api between shape types with move, size, center
- Binding events to elements
- Full support for opacity masks and clipping paths
- Text paths, even animated
- Element groups and sets
- Dynamic gradients
Read the documentation for more info.

Stock SVG

Not everyone’s an illustrator. At least, I’ve certainly never been good at it. Thus, stock illustrations become an invaluable resource. It can be hard to find good stuff, though. What doesn’t look like Microsoft clipart is often limited in scope, or expensive.

Don’t lose hope, though. There is a lot of stuff out there that is of good quality. If it doesn’t perfectly meet your needs, well, it’s vector art. Chances are that it can be tweaked to meet your needs if you have a basic knowledge of vector graphics software.

SVG can do more than just stock illustrations, though. You can also create patterns, large fancy backgrounds that don’t eat up bandwidth, and more. Let’s have a look at what people have made for the rest of us:

SVG Clipart on openclipart.com

SVG, as an open format, has many open source enthusiasts as fans. As a result, it’s one of the primary formats used in what might be the largest collection of free clip art out there.

And a lot of it is clipart-ish. And a lot of it’s amateur work. There are some quality graphics though, if you look. Hey, it’s free.

SVG Stock

SVG Stock is a small site, with a relatively small, but excellent collection. It’s mostly icons and device mockups, but they are all of high quality. If you need either of those two things, start here.

SVG resources on deviantart.com

Ah DeviantArt, that giant community is still going strong. Head to the stock images category and search for SVG (or click the link above). Again, the quality will vary, but there’s good stuff there if you have the time to look.

SVG Patterns Gallery

A small gallery full of SVG-based patterns. It’s designed as more of a show-case, but the source files are all there for your convenience.

SVG Patterns from svgeneration.com

svgeneration.com includes a lot of SVG patterns for your use. The site comes with editing options for each pattern, and you can edit the code directly on the site to see your changes in action. Not only is this a great resource for pre-made patterns, but you can find out a lot about how they’re made in the first place.

SVG Clipart

The art on this site is distinctly old-fashioned cartoon style. It, quite frankly, won’t be what everyone’s looking for, but it’s there for those who want that classic feel to their illustrations.

SVG Studio

SVG Studio is offering thousands of illustrations with a distinctly modern feel. You can buy them in small sub-sets, or download their entire catalog at once. That will set you back 500 USD, which, for 3000 illustrations, is not that bad a deal.

SVG on the larger stock sites

I can’t say much about the art offered on each site, because it varies widely by the contributor with no overall style. The biggest names are istockphoto.com, shutterstock.com, bigstockphoto.com, and canstockphoto.com.

SVG Inspiration

We can read all the introductions that we want, and follow all the tutorials out there. We can become experts in each and every aspect of the SVG specification, and yet we might still be incredibly boring about it. We have to look at all of the potential in any given technology to make the most use of it.

That’s often easier said than done, however. It often helps to have a reference point, something amazing to look at, and show us exactly what kind of awesome things we can do with what we’ve got. That’s what sites like Webcreme did for web design in general. That’s what CSS Zen Garden, and all of the CSS galleries that came after it, did for CSS layouts.

As of yet, I have not found any gallery sites dedicated to what can be accomplished via SVG combined with other web technologies, and that might help. In the meantime, here’s a showcase of awesome stuff we’ve found:

Snap Display Ad

This example is part of the Snap.svg collection on CodePen. Need a perfect example of how SVG could be used to revolutionize online ads? This is it.

Think about it: some ad companies are still selling ads based on pixel size. This makes no sense in the age of infinite variation in screen sizes, and Retina screens to boot. Until we come up with a better system than visual ads, SVG could at least help us to make ads fit into the responsive nature of web design.

See the Pen Snap Display Ad by CJ Gammon (@cjgammon) on CodePen.

Jtop desktop interface

The Mozilla Developer Network, an entity that I keep running into as I research web technologies in general, has also produced some interesting stuff made with SVG. For instance, they went and made an entire desktop interface based entirely on web technologies like HTML5, JS, SVG, and CSS. It’s fast, customizable, and I almost wish it were part of a real OS.

A Time of Reflection

Brought to us by ShinyDemos (which is in turn brought to us by the people at Opera) A Time of Reflection will literally just overlay a clock over a live feed from your webcam. Well, if you give it your permission, and you actually have a camera, anyway. But the point is that it shows how SVG masks can be overlayed on almost anything.

oblurlay

Through a combination of CSS, SVG, and jQuery, oblurlay creates exactly what its name suggests: a blurry overlay, iOS style. It’s a jQuery plugin, so implementation is not difficult, and it neatly showcases how SVG filters can be applied to all kinds of things, not just the SVG objects themselves.

Codrops demos

Codrops (previously mentioned in the tutorials section) has produced quite a number of fascinating, impressive, and just plain pretty demos to showcase what SVG can do. Each deserve its own proper section in this article, but there are so many that I’m putting them all in one. If you don’t look at anything else from this “Inspiration” section, look at these. Check out the demos, and download the source files. Then go thank the guys at Codrops. They deserve it.

Note: not all of these are SVG-focused, but they do all use SVG graphics in some fashion.

Page Loading Effects: a set of creative page loading effects that use SVG animations with Snap.svg. The idea is to show an overlay with a interesting shape animation while new content gets loaded.

Ideas for Subtle Hover Effects: some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements. They also use SVG. Go check out the demo for the second set of effects.

SVG Drawing Animation: a little experiment that explores the use of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them.

Off-Canvas Menu Effects: some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.

Tooltip Styles Inspiration: a small collection of various hover tooltip styles and effects for your inspiration. Using CSS transforms, border-radius and SVG shapes we can create modern looking and interesting tooltips.

Notification Styles Inspiration: some simple ideas and effects for unobtrusive website notifications. A little script is employed for showcasing some styles and CSS animations are used for the effects.

Inspiration for Custom Select Elements: some inspiration for styling a custom version of the select element. There are many possibilities and today we are exploring some ideas of how to let the user select a choice in style.

Inspiration for Inline Anchor Styles: some inspiration for creative and modern inline anchor styles and hover effects using different techniques like pseudo-element transitions and SVGs.

Arrow Navigation Styles: some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects.

Wobbly Slideshow Effect: the slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh’s Dribbble shot and was made using Snap.svg and morphing SVG paths… Please note that this is highly experimental and tested only in the latest versions of modern browsers.

Wrapping it up

SVG, while not yet one of the most widely used image formats out there, is well documented, strongly supported, and it’s a big part of the Internet’s future. If you’re not using it as part of your design process yet, it’s probably time to start.

Featured image, seamless vector image via Shutterstock.

200+ Professional Photoshop Actions – only $17!

Source
Our favorite tweets of the week: January 19, 2015 – January 25, 2015

Posted:Sun, 25 Jan 2015 09:45:18 +0000

Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

Is there a sense of visual balance in your web design? http://bit.ly/1yPsSMz

The Difference Between Visual Art and Graphic Design http://bit.ly/15wcQgk /@speckyboy

Some Ideas for Checkout Effects http://bit.ly/186X0dt via @hongkiat

Nice roundup: 30 Creative Beer Bottle Label & Packaging Designs http://bit.ly/1B83ouw via @chrisspooner @BrushLovers

Interactive storytelling for Coca Cola http://bit.ly/1yUML7S

Microsoft officially announces Project Spartan, its new web browser for Windows 10 http://bit.ly/1xBsAWQ /@verge

Why skeuomorphism is like a classic car http://bit.ly/15hVDGO

MailChimp for Designers http://bit.ly/1yPlpNy

Beautiful illustrations by Brian Miller with a vintage feel http://bit.ly/1yjHHYz via @LLGDnet

Funny: Emoji Masks http://bit.ly/1rHW94O

Jack Black explains why he loves California, and it is awesome http://bit.ly/1B9Yopj

Amazing topo…typography by Shahin Haghjou http://bit.ly/1J5em5X

A designer’s guide to setting the mood with lines http://bit.ly/17PhFCT

Tips & tricks: How and where to outsource your #WordPress related work http://bit.ly/1xrsWz3

Amazon Echo review http://bit.ly/1J58hXa via @verge

10 designs for the future of space travel http://bit.ly/1sURNi8 /@dezeen

Interesting read for designers: Why you should embrace inconsistency http://bit.ly/150u7NX /@invisionapp

Elon Musk plans to launch 4,000 satellites to deliver high-speed Internet access. Wait ’til you read why http://bit.ly/1Atqau4

The languages and frameworks that you should learn in 2015 http://bit.ly/17Yi2Lo Do you agree?

Teehan & Lax join Facebook http://bit.ly/1sseBjg

Be My Eyes – Lend your Eyes To The Blind http://bit.ly/1KURLNh

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

200+ Professional Photoshop Actions – only $17!

Source
Comics of the week #271

Posted:Sat, 24 Jan 2015 09:08:06 +0000

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Don’t let the name fool you

No too mobile

Cliché come true

Can you relate to these situations? Please share your funny stories and comments below…

200+ Professional Photoshop Actions – only $17!

Source
101 inspirational quotes for designers

Posted:Fri, 23 Jan 2015 08:15:32 +0000

All designers need a little inspiration from time to time. So it’s lucky for us that there are thousands of designers, educators, philosophers, writers, and business people willing to hand out advice for free. What is more, the Web is packed with designers and illustrators who’ve put pen to paper (or finger to trackpad) to render these thoughts as posters, t-shirts, and murals.

From James Victore’s “There are no shortcuts”, to Bill and Ted’s “Be excellent to each other”, there is a wealth of good advice ready to help you out.

Today I’ve put together 101 inspirational quotes for designers, covering everything from dealing with clients to getting your priorities straight. There are even a few life lessons thrown in that apply to almost everyone. Even if the quote in question doesn’t ring true for you, the variety of different lettering and typography styles on display is an inspiration in itself. Enjoy!

200+ Professional Photoshop Actions – only $17!

Source
21 collaboration tools to streamline your teamwork

Posted:Thu, 22 Jan 2015 08:15:06 +0000

If you work with a team, then you may be struggling with the question of how to best collaborate. Sure, you can e-mail files around; but that quickly gets cumbersome, and can make it hard to keep track of which is the current version. If two team members make changes at the same time, integrating them can become a nightmare.

If you’re still using email as your primary means of communicating with your remote team (or even the team in your office) then you really need to look into a dedicated collaboration tool. This list presents more than twenty of the best, though of course there are tons of others out there.

There are free and premium tools available to fit every price range and virtually every possible usage need. Check them out, compare, and get your collaboration out of your inbox!

Premium tools

There are a ton of premium tools out there for team collaboration, in a wide range of prices and features. Be sure to check out what’s included in each package carefully to make sure it will suit your needs before buying.

GoVisually (from $15 per month)

GoVisually makes it simple to get feedback on designs from everyone on your team. It includes simple threaded conversations, as well as the ability to put comments directly on your designs. That helps ensure everyone is on the same page when making changes to a design.

When you need to make changes to a design, you can drag and drop your new designs onto the old ones, with complete version control and tracking (including comments on older versions).

Their plans start at $15/month for up to 20 projects with unlimited collaborators and designs, with unlimited project plans starting at $150/month.

Red Pen (from $5 per month)

Red Pen is a fast feedback tool for teams. Just drag and drop your design into the app and invite collaborators. Commenting is done in real-time, with collaborators able to see your comments as soon as you enter them. You can see who’s viewing the file at a given time.

You can invite collaborators via email, or share a private link to the files you want feedback on. You can have as many collaborators as you want, without restrictions. And of course there are organizational tools you can use to keep up with multiple projects, and there’s version control to make revisions easier.

There’s a fourteen day free trial, and then after that paid plans start at just $5/month for 5 projects.

Cage (from $24 per month)

Cage offers easy collaboration for teams, with simple tools for sharing, managing, and approving creative work. You can add notes directly to the work, keep track of revisions (and even share those revisions with clients so they can view progress), and get faster approval from clients.

Cage provides a single dashboard from which you can manage and organize projects, clients, teams, and even tasks. Project sharing is seamless, with a built-in address book. You can upload images, videos, and even Photoshop files.

Personal plans start at $24/month, with 1GB of storage and two team members, with premium plans for $179/month that include 30GB of storage and unlimited team members.

Concept Inbox (from $14 per month)

Concept Inbox provides tools for design teams, developers, and startups to communicate on creative projects. You can easily annotate designs and provide better feedback to reduce the number of change requests. It includes organizational tools, version control, and task management.

It works from anywhere, and lets you annotate all types of creative works. It even includes tools for creating interactive, high-fidelity prototypes without requiring any technical skills. And of course it offers real-time collaboration, activity feeds, easy sharing, and asset management. There are even tools for live meetings and presentations.

Plans start at $14/month for 3 projects, with team plans starting at $49/month. A free trial is available with each plan.

Mural.ly (from $10 per month)

Mural.ly offers online brainstorming and collaboration tools. You can organize all your thoughts visually, in one place, and then seamlessly work with your team as if you were in the same room.

Unlike many other team collaboration tools out there, Mural.ly is designed to be used as soon as you start brainstorming, rather than once you already have a design to share. It gives you a clear understanding of your design vision from the beginning, making the entire process smoother and more efficient.

A single user account starts at $10/month, with enterprise-level plans for up to 50 users for $1,099/month.

ProofHub (from $15 per month)

ProofHub includes tools for collaboration and planning, organizing work, and making sure delivery happens on time. It includes more project management tools than many of the other offerings here, alongside the design collaboration tools.

It offers tools for sharing ideas, planning your work, creating and organizing notes, tasks, documents, files, and tracking time. It also has chat, custom roles, Gantt charts, personalization, and more.

Plans start at $15/month for 10 projects and unlimited users, and go up from there, to $149/month for unlimited projects.

Conceptboard (from free)

Conceptboard gives you flexible online workspaces for team collaboration. It offers in-context feedback for faster iterations, with instant access in your browser. There are whiteboard and chat tools, too, and even video. There are real-time collaboration and discussion tools, with a record of all your ideas and conversations.

There’s SSL protection for your content, and even dedicated server data encryption if you need it. You can share individual boards and content only with those you want.

A basic single user account with standard features is free, while team plans start at just $30/month.

Share Square (from free)

Share Square is a digital pinboard that makes it easy to gather, organize, and structure your ideas and inspiration. There are team collaboration tools, so you can share your ideas and projects. It includes real-time collaboration, and comes as either a Mac, PC, or web-based app. The free plan allows up to 10 uploads per pinboard, while pro accounts offer unlimited uploads and dedicated support for €100/year.

Glip (from free)

Glip is a slightly different way to collaborate with your team, based on replacing your email inbox. It includes a variety of features for collaboration, including video chat, storage, and team and project management functions. It includes file sharing with Google Drive and Dropbox, email integration, lightweight collaborative document editing, team calendars, and more.

Glip integrates with Github, Dropbox, Zendesk, Stripe, Mailchimp, Hangouts, and many other services, with more on the way. It’s built around conversations, which can greatly improve the way remote teams work.

There’s a free plan that offers up to 10,000 posts, 5GB of storage, and 500 minutes of video chat, as well as up to 5 external integrations. Paid plans start at just $5/person per month.

Flowdock (from free)

Flowdock is a team inbox with chat features built in. It includes drag and drop uploads, tagging of other team members, and more. There’s threaded chat to keep track of conversations more easily, and you can see who’s typing, similar to Facebook chat.

It also includes 1-on-1 private chat, file uploads and storage, image previews, status updates, and message editing. And you can comment on anything you see or do, to give context when you need it. Flowdock integrates with a variety of other services, including Basecamp, Aha!, FogBugz, Deveo, Breeze, Redmine, and many more.

Pricing is simple, with free plans for teams of five or less, non-profits, and students, and paid plans for just $3 per user per month.

Free tools

While premium tools often have better support and more features, there are tons of great free tools out there, too! Some of these have fairly bare-bones features (which may be all you need), while others offer more features than most premium solutions.

Marqueed (free)

Marqueed is a free way to markup and discuss images online. You can easily add multiple images with the drag and drop interface, either from your computer or another browser window. Adding collaborators is simple via email.

Collaborators can point to areas and have threaded discussions right on the image. There’s even a freehand drawing tool for more options.

Framebench (free)

Framebench works with a variety of file types: images, spreadsheets, PDFs, documents, presentations, and video. It includes organizational tools, lets you get feedback from clients, and includes group chat.

Framebench can also integrate with a number of your favorite apps, including Dropbox, Basecamp, and Google+. It has real-time collaboration tools, called TableTop Sync, and shows you who’s online browsing the files you’re browsing. It has versioning tools, too, of course.

Notism (free)

Notism is a free collaboration app that works for design and video projects. You can comment with text or a sketch, with several drawing tools. Video collaboration can be done in real-time, with the option to add notes, sketches, and selections to the video timeline.

You can opt to see the live cursor of everyone who’s currently online, and highlight specific areas if you want to point out larger areas of your layout, rather than a specific pinpoint. There are also built-in tools for managing tasks, it works with Basecamp and Asana, and there’s version control. Notism even has tools for creating interactive prototypes, a big step up from many other collaboration tools.

Apollo (free)

Apollo is a free web-based feedback app that includes email integration, unlimited members, and unlimited notes. There’s an audit trail for accountability of all activity, as well as an overview mode so you can see everything your team is working on.

It includes basic notation tools that work for web designs, graphic designs, documents, photos, and more.

Skwibl (free)

Skwibl is an efficient way to give and receive feedback on creative projects. Just upload your media, invite collaborators, and discuss the design. Projects can be discussed in real-time or any time. There are sketching tools, as well as a pen, highlighter, and commenting tool.

You can assign tasks using the note tool, manage projects, trace recent activities, and more. You can sign up with email, or using Google+, Facebook, or LinkedIn.

DesignDrop (free in beta)

DesignDrop is a super easy way to get quick feedback. Just upload a design, share a short URL with your team or client, and get feedback with visual annotations.

It’s a quick way to get real-time feedback. It’s free as long as they’re in beta, though pricing after that isn’t clear.

Prevue (free)

Prevue is a design sharing tool for designers and agencies. It has a drag and drop interface, tools for project management and feedback, and simple annotation tools.

It’s simple to use, and quick to get started with. There are over 20,000 agencies and design teams already using it.

Trello (from free)

Trello lets you visually organize anything and share it with anyone you choose. You can drag and drop “cards” between lists to show your progress on various items, add as many people as you want, add and reorder lists as needed, and more.

Trello’s main strength is its adaptability. It’s simple but powerful, and allows for instant feedback. It works with Google Drive, Dropbox, Box, and OneDrive. There are tools for checklists, labels, due dates, and more. And there are apps for the web, Android, iOS, Kindle Fire, and Windows 8.

While Trello is mostly free, there is a “Business Class” paid account with team super powers and more administrative control. But, the free accounts will work for the majority of teams.

Bounce (free)

Bounce, from Zurb, makes it easy to share ideas on a website or image. Just enter a URL (or upload an image file), then click and drag to make notes. You can share with anyone when you’re done providing feedback.

This is a great way to collaborate on something like a redesign, as you can leave feedback right on the live site, without having to download screenshots and then re-upload them somewhere.

RealtimeBoard (free)

RealtimeBoard is an online whiteboard that more closely resembles a real-world whiteboard. You can visualize your workflow, and it works well for collaborating on both brainstorming and product design. It can even be used as an educational whiteboard.

Skitch (free)

Skitch, from Evernote, makes collaboration, sharing, and feedback quick and easy. You can draw directly on an image, from your desktop, tablet, or phone. It has simple annotation tools for drawing shapes, arrows, and quick sketches.

Conclusion

There are tons of great team collaboration tools out there. On the free end, I’m a fan of Trello and Notism, if for no other reason than their awesome UIs, though the other offerings may suit your needs better. As far as premium tools go, Red Pen gets major points for ease of use, while Mural.ly is super flexible. All of the tools listed here, though, are excellent products worth checking out!

200+ Professional Photoshop Actions – only $17!

Source