The ultimate goal of web design is to change a certain behavior.

An important thing before we get started: What I’m talking about here is web design for commercial purposes, not for personal projects or pleasure. Otherwise the above quote won’t hold true. What I argue, however, is that when designing for the web for commercial purposes, like a project for a client or working on your own product/service, testing whether your design “works” needs to be an essential part of your to-do list.

The Definition of a Web Design That “Works”

In the general sense, when you say that something “works”, what you actually mean is that “thing” is helping you accomplish a particular goal. Examples:

• This dating technique “works” / This dating technique helped me accomplish the goal of getting a girl
• This study tip “works” / This study tip helped me accomplish the goal of passing my exam

And a special one for the ladies (not sure if they use this phrase often though):

• This type of makeup “works” / This type of makeup helped me accomplish the goal of getting more attention from men.

We use the “(something) works” phrase a lot in our real lives; yet, we don’t use it as often in the virtual world. So I’m assuming this title has given many people some puzzled looks and they’ve been wondering what it really means. When a business person says “this web design works”, what he really means is this:

“This web design helped me increase my leads/sales/brand awareness.”

In other words, this particular web design helped him get closer to accomplishing a business goal.

Why and How to Put Yourself in Other People’s (Business) Shoes

I have plenty of friends who are web designers and one thing I noticed about many of them is that they love what they do. They love to tinker with small details and get things just “right”. Even if that button is 1 pixel off, they’ll do everything to correct it.

One thing many (I’m not implying you’re one of them, just stating my experience) of them hate is business. “But I’m not a businessman” is one excuse designers often use. Well guess what: If you’re working on a project and getting a monetary compensation for it, yes, you ARE in the Web Design Business. And like with every business, the Basic Economics 101 principles apply:

• Price is dictated by supply/demand
• Buyers are trying to get the most for their money, while sellers are trying to do the least for the most money
• You need to satisfy your clients needs/wants in order to get repeated business

Think about the last part. How would you do that How would you get more repeat customers By making sure your web design project works and produces results.

Use Real, Objective Data to Prove Your Design Works

If you Are Redesigning a Website:

If you’re redesigning a website, it’s important to first take data from a sample of visitors who’ve seen the old design and then take the same type of data from visitors who were shown the new re-design. Your goal is to compare how users behave before and after the re-design.

Some Ideas:

• Write a set of questions related to the site (how visitors like the site, what do they think about the products and so on) and survey them using a tool like 4Suite or KISS Metrics
• Ask 30+ user to fill out a survey for the old web design (while it’s still there)
• After the redesign is up and running, ask the same questions to further 30+ people
• Compare the answers

Make sure that the only variable that changes is the design itself. It’s not recommended to change the text of the site because a lot of results from A/B and multi-variable testing has shown that this can have a profound results without even changing the site design at all. So changing just the design and not the text is a good place to start.

• Familiarize yourself with the various usability tools which can help people interact better with your site. Like with the previous idea, run them on the old version of the site and then on the new version and compare the results.

Mashable has an amazing list of some of the best usability tools out there. I won’t go into many of them, but here are some which left a good impression:

• Usabilla.com – I’ve seen many tools similar to Usabilla.com but they all have crazy prices starting from $200. This tool, however, has an acceptable price and some pretty neat features that allow you to track your users behavior and ask for their opinion.
• FiveSecondTest.com – A great tool that you can use for free (you need to “do tests to earn tests” or pay a certain price for X responses/month). This is great for testing the first impression people have for your site. The way it works is that users view your site for 5 seconds and then they answer questions you’ve set for them.

Here is one good question to ask people on FiveSecondTest (or any similar usability first-impression-testing site):

What is this site about

MarketingExperiments.com, which is probably the only company in the world that has conducted thousands of research articles on huge websites and published them for everyone to see. At a webinar the person who was in charge of the testing procedure/reviews said something I will never forget:

“Based on the thousands of tests we’ve done for our research partners, we’ve concluded that clarity trumps persuasion. If users arrived at your site and had no idea what it’s about, they’ll leave. Before pitching why customers should buy your product, answer their questions: “Where they are” and “What can they do here””.

• Google Page Speed – When redesigning, make sure your new design has better or at least the same load speed as the previous one. Why Because page speed has been correlated with how many people will buy from your site, how long they stay and many other types of interactions.

If you are making a site from scratch:

The same principles apply here as to redesigning a site with one very important twist:

When you are designing a site from scratch, you don’t have an old web design to compare your new design to. Invent one. Make several variations of your new design and A/B split test them to see which one makes people interact more. In other words, if you have several drafts of the same design that look different, try them all and see what works. Make your hypothesis on what you think would be the best performer and put your assumptions to the test. You’ll often be very surprised.

How to Persuade Clients That Testing Works

One of the best ways to persuade people to do or use something is with anecdotes. Sites like this are full of examples where changes, even if they were really small, produced drastically different results. 300% more people filled a form, 500% increase in sales and so on from a really small change. There are some really impressive stories that will persuade clients that they should test.

One question that might pop immediately is:

Why bother persuading my clients to test at all

Two words: REPEAT BUSINESS. If they see that with your web design they got 200% increase of sales, they’re more likely to hire you for their next project. It’s not just because they would be glad that you’ve done a great job, but also because they’d have more money to potentially invest into improving their designs.

What do you think

I’d love to hear you opinion on the pros and cons of testing whether your designs “work” and how to improve them. Let me know what you think in the comments below!

Comments and Reactions

In this quick tip I want to talk to you about one of HTML5s hidden beauties, the contextmenu. You have probably never heard of it before, but I assure you it is one of those attributes that could be really useful in certain situations.

What is the contextmenu attribute you may ask Basically, it allows you to add different options to a browsers ‘right-click menu’ with just a few lines of HTML and will even work with Javascript disabled. Although, and very sadly, it currently only works in Firefox.

Let me show you how it works:

Using contextmenu is a lot simpler than you may think. All you need is to add the contextmenu attribute like so:

 <section contextmenu="my-right-click-menu"> 
 <!-- 
     Add anything you want here
   -->
 </section>
 

As you can see you can add it just like you would add any id or class.

Next we create the menu:

 <menu type="context" id="my-right-click-menu">
 <!-- 
   Here we will add the new 'right-click' menu items 
   -->
 </menu>
 

As you can see the id of the menu must match the name of the contextmenu, this gives more flexibility allowing you to have more than one menu item on the page within different sections.

Next we will add the menu items. Firstly, I will add one menu item with just plain text and an icon, secondly I will add a link for sharing the current page on Facebook, and the third menu item will be a link for refreshing the page, creating a simple contextmenu with three menu items:

 <menu type="context" id="my-right-click-menu">
  <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
   <menuitem label="Share on Facebook" onclick="goTo('//facebook.com/sharer/sharer.phpu=' + window.location.href);"></menuitem>
     <menuitem label="Refresh" onclick="window.location.reload()"></menuitem>
   </menu>
 

You can also create sub menus just by adding another menu tag inside the existing one, like so:

 <menu type="context" id="my-right-click-menu">
  <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
 <menu label="Social Networks">
 <menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.phpu=' + window.location.href;"></menuitem>
 </menu>
     <menuitem label="Refresh" onclick="window.location.reload()"></menuitem>
   </menu>
 

As you can see with basic HTML5 you can create something really useful. But please be very careful when using it, as it is currently only supported by Firefox.

Direct animations and motion are a big part of the user experience. Not every website will include dynamic animations, but these tend to draw in a crowd of interested users. Stunning visuals can also cross a line and turn into annoying distractions from your content. Building purposeful websites is all about finding a balance between the dynamic elements and static elements in your layout, and how these ultimately affect the user experience.

For this article I’d like to delve into some of the more common trends related to animations in web design. I want to share some ideas for what presents clever, intuitive design skills vs annoyances to the average user. Perspective is everything and you have to cater each project for the largest demographic.

Building animation also doesn’t require lots of complex codes or backend scripts. Many open source JavaScript and even CSS libraries exist for this very reason. As the developer it is up to you to forage around the Internet and see what you can find. I will present a few live examples and strategies you may follow to achieve extraordinary results.

Menus with Flair

Navigation menu designs are a bit more complicated to pair with animation. But when done properly these nav menus provide an exceptional detail onto a website’s interface. You will want to ensure that the speed is quick enough to keep your visitors’ attention, but not so quick as to appear distracting. The links should also be easy to access and provide plenty of space for clicking. All this attention to detail leaves developers focusing more on basic UI than motion effects.

However I will point out one nice example on Design Sensory which uses a top-level menu along with submenu links. As you hover over each top link the new submenu options will appear below. This allows for quick access to all the menu links, and there is plenty of space for clicking. The only problem might be users who have poor vision and must struggle to read the smaller font sizes. But this functionality can obviously be adapted to suit other layouts with larger typography.

The Cabedge web design studio has a dropdown animation effect which fits brilliantly into the layout style. In the top ribbon you may hover over any of the links and generate a nice background hover effect. If you stay over the link for 1-2 seconds then a sub-menu will begin to animate and drop downwards. It’s a surprising effect when you are not expecting it! Both pleasing to the eye and useful for displaying extra content to visitors.

Parallax Background Scrolling

Parallax motion is very popular and much different from other styles in web design. Parallax sites often have changing background images to offer the appearance of 3-D motion. Meanwhile the static page elements rarely change and can even stay fixed to follow the user down while scrolling the page.

One infamous example is the Atlantis World’s Fair website design. As you move down the screen you will notice the main elevator shaft continues along with you. Then content appears to waver in and out of the various page segments. It is a nice use of faux motion because of how the layout is structured. Not every webpage is built for this type of parallax scrolling, but it does add a very nifty design feature.

One other great example can be found on the iPad app website for the game Fingerbilliards. The background was designed so that it appears like some of the balls are fixed on the screen. And then as you scroll up and down the page, elements come into view like a static layout. I particularly enjoy their design because the motion effects are parodied in the game itself! This works great for marketing because users who find this page will also make the connection and possibly make a purchase for the mobile app.

It is crucial to find a balance between dynamic effects and useful interface functionality. Designing a website with purpose is what adds more credibility to your animations. Parallax scrolling is just one example to define how an entire website layout may be created around motion.

Webpage Transitions

Animated transition effects between content on your page is another purposeful use of dynamic motion. These effects may follow content blocks or sliding panels, but also tooltips or highlight effects switching between elements. This design trend is often used in website tours where you are guiding the user between different page elements.

This very same type of example may be found on Mustache which uses similar page transitions when moving between content. This is a nice Ajax styled effect and does not require refreshing the whole webpage. Of course, users without JavaScript will be out of luck but any basic fallback method should work in its place.

A different type of page transition may be seen on Think Moto which is a German digital design agency. Clicking between links in the menu will slide the entire page out of view to focus on a new set of data. This is important to understand because the navigation will stay fixed as you scroll. This allows users to move between entire page designs without losing access to other links in the menu.

Dynamic Input Forms

Another popular aspect of motion design can be found in webpage forms. More specifically signup forms and contact pages often use motion to signify advanced jQuery Ajax calls. This allows developers to pass frontend information into the backend code without refreshing the page. Consider the MediaFire registration page as one simple example.

But animation effects can also be used on the form elements themselves. Newer CSS3 properties such as box shadows and transitions allow developers to create frontend animation effects right within the browser. This also allows for hidden notification badges or basic form validation – such as e-mail addresses or matching passwords. The goal is to offer a sleek and helpful user interface without interrupting the user’s signup process.

One other really cool input animation effect can be seen in the WordPress Twenty Eleven theme demo. In the top right corner you’ll notice the search bar is much smaller than usual. However once you click the menu will expand open and update the background color to a darker shade of grey. Very purposeful to save space when not needed but also allows users to interact with the search bar dynamically.

Final Thoughts

I don’t want to encourage web designers to push for motion effects in every project. There are some design niches which simply do not require a whole lot of animation. But this isn’t to say that you shouldn’t try out new ideas, test the waters and see how your users respond. The beauty of web design is learning from common mistakes or finding happy coincidences by them.

I hope this article may provide some ideas for developers and user experience designers interested in website motion. Animated elements are quick to draw a user’s attention and may often provide some type of functionality into the layout. We have covered a lot of great ideas which should get you started on the right track. But if we have missed any topics or resources feel free to share with us in the post discussion area.

Comments and Reactions

Recently I received a request at work for our logo in HD, I work at a company which provides funding to a range of organisations and producing HD videos wouldn’t be covered under the grant, so I pointed them in the direction of our eps files and queried how the logos would be used. The response They want to use them in print banners.

Like me this response might have amused you for the rest of the day. But on reflection it also made me think is HD print work such a crazy idea And how HD ready am I

As a jack of all trades (even though my job title is Web Editor) I occasionally have to turn my hand to print, video, social media, and I need to make sure that I am up to date with all the latest developments. With the query for HD logos being raised and the amount of articles that I’ve read around Retina display and designing for high definition, it started me on a quest to find out more information.

HD for print, is it as crazy as it sounds

In a word, yes. It is probably is as crazy as it sounds. However with the introduction of Retina display there are changes that are taking place to keep up with these new developments. For example, Adobe announced in August last year that they would optimise a selection of their software to help improve the display of the package itself and also text and images that they create. To quote Maria Yap from Adobe’s blog ‘to enable HiDPI display support in Photoshop requires the replacement of 2500 icons and cursors’ and highlights the changes that companies are making to ensure they are ready for the Retina display.

But that is specifically looking at Retina display and the initial query I received was for HD logos. Looking at it from this point of view does sound crazy. While the improvements to software for use on Retina display devices makes sense, to need a HD logo (if indeed there is such a thing) doesn’t. I spoke to my friend, and creative partner, Jo about whether HD for print was possible. As she mentioned, it isn’t necessary to work to a higher resolution than 300 dpi for print work, it is an industry standard and works well for the majority of print sizes. Working with vectors also helps to ensure a high quality and print of graphics, in the case of the initial question, pointing the organisation in the direction of our eps files would enable them to produce a high quality print of any size.

HD for web, where do I begin

This is where being HD and Retina display seems, on first glance, a minefield. Especially when you think about the number of devices that can be used to view a website, from a mobile, to a traditional desktop, to a television, to a tablet, the list seems a lot longer than it did 5 years ago!

Given the range of devices and to, hopefully, help keep things simple I’m going to consider HD and Retina the same thing. I do realise some of you reading this might be about to lynch me with that remark, especially as Retina is an Apple trademark rather than an industry wide term such as high definition. This article on why your HDTV is already a Retina display explains things far better than I can, and for me, highlights why we can consider that the same principles for designing for Retina will apply for HD.

Helpfully it also simplifies things to an extent, as I think trying to design/develop for HD and Retina while maintaining a responsive design would potentially have sent me over the edge! Being able to concentrate on designing for screens that have a higher resolution than 72dpi and those that do, to me, seems to be the main outcome of this technology and one of the most commonly referenced techniques is using scalable vector graphics. Again, pointing the organisation towards our logo files, all of 300dpi (a similar resolution to a Retina display) would, potentially, be a good first step as well.

Are you HD ready

For me, I think the next thing to think about to make sure I am HD ready is to look at who is coming to the site I am designing and developing. While I would like to create something that works across all devices by looking closer at the user, the experience I want them to have, and thinking about how they will access my information should enable me to develop my site to their needs. This might be making the decision on whether I design for all devices or focus primarily on desktop or mobile.

While I don’t think I’m 100% HD ready yet, I think that I can learn a lot from other disciplines to improve my websites and other work, ensuring I keep up to date with user experience is essential. I can also see a link with graphic designers and how they utilise vectors to crossover with what could be achieved with SVG. I’m looking forward to not only putting these into practice in my next piece of work but also picking the brains of my colleagues, seeking the advice of Twitter and googling to see the latest tips and techniques.

Sometimes, more so on a day where I’ve been struggling with a piece of code, I do wonder where it will all end and how on earth to keep up with the latest developments. But, on the good days, this is what keeps the job interesting, creative and cutting edge.

Image Source(s): Photo Icons & Movie Icons via Sutterstock.

Comments and Reactions

This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy 🙂 If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebook or by subscribing to our RSS feed. Our Weekly Design News has been…

Breathing life into digital design can be a tough call. A flat surface will always command less attention compared to the one that creates a 3D-feel. Adding depth to a flat page is a way to combat this. It creates a sense of realism and immediately adds interest. It’s also a helpful technique to emphasize particular elements within the page, such as interfaces or headlines, and helps create a hierarchy within the design. A lot of designers have produced unusual and creative ways to add depth, here is a look at some of these excellent examples plus some tips on how to add creative depth to your web designs:

Introduce a sense of perspective to boost realism, as can be seen in these cartoon-like designs.

Creating real looking interfaces and elements will make your design much easier to interact with. What’s more, in doing so you’ll increase the success of your call to action. As seen in the two examples below.

Layering your elements and playing with translucency is a brilliant way to add creative depth and interest, as can be seen in the two examples below, which uses the technique to create an unusual top-down perspective.

A wraparound is another technique to try. Check out the red ribbon and red thread seen in the examples below. It extends the real estate of the pages by giving the illusion of continuing behind it. It’s also an excellent way to accent a particular element on the page. You can use ribbons and threads for anything; dates, headlines, logos or featured items.

Just like you learnt back in your high school art class, creating a sense of depth-perspective follows a fairly basic set of rules. You need to follow consistent angles. You need to keep your horizontal alignment consistent. Keep tabs on your use of proportion and any changes across the horizontal space; check out these two creative classic examples.

Add a drop shadow to a non-uniform grid layout to enhance the effect even further.

0

By breaking your grid layout you can instantly add depth. Simply overlap a few elements on the page and depth, and a sense of order is created. It also stops the design from appearing too predictable.

1

2

Despite the flat elements of this design, the simple ribbon banner adds texture and depth.

3

Here is an example that uses all flat elements and sections, yet has still managed to create depth. It achieves this by overlapping the elements within the background across the entire design. By not employing this layering technique on the interfaces they are given excellent emphasis in contrast.

4

5

Using cut-out photography is a good technique to try. The application of drop shadows enhance the sense of realism and introduce a 3D quality, whether you’re using a lifelike element, as seen below, or a flat design feature.

6

7

Creative depth is achieved by the use of scenarios and stories, the 3D look is simple to achieve by taking offline design tactics and placing them online, for example symmetry and the use of prospective. If you are looking to create a unique web design think about what creative stories you can invent to add depth in web design.

You might also like…

Our 50 Favorite Web Designs from 2012

As someone who’s worked on both sides of the freelancer-client fence, I give a lot of “insider” advice to designers on dealing with their clients. One of the most common problems I hear is that designers would love to be able to turn down their worst clients – the ones who pay late, don’t pay at all, or who just generally cause way more trouble than they’re worth. But the problem, these designers tell me, is that they just can’t.

Image Source: Angry on Bad via Shutterstock

They have bills to pay, mouths to feed, and so on. Whenever I hear this complaint, I try to root out the source of it. What is causing these designers to have this mentality Why don’t they see themselves as capable of having the so-called “luxury” of refusing bad clients I think they’re looking at things from the wrong end. All they can see is ‘I need to pay my bills and can’t afford to be choosy,’ when the whole client relationship process is really about so much more than that.

Sitting Up Straight

When you start things off wrong, you will finish them wrong. That’s just a fact of life, and it applies to virtually everything. I’ll share an example from my own life that some of you have probably dealt with as well: design-related injuries. I had the world’s crappiest chair, which wrought major havoc on my back and shoulders until I finally replaced it this year. Most injuries to the back, shoulders, and wrists are caused by poor posture (and crappy chairs – I’m sure there’s a study on that somewhere).

If you sit down at your computer and your spine is bent in a weird position, or your hand is a bit crooked on the mouse, it’ll be okay for awhile. You’ll probably feel no pain for the first hour – maybe even two. But do that every day for a year and you’ll be in a brace and out thousands of dollars in physical therapy bills. How do you avoid that kind of catastrophe By sitting up straight with proper posture in the beginning. I know, I know – I sound like your Mother. But she was right. An ounce of prevention is worth a pound of cure and all that. And eat your vegetables!

You have to start in a good position to end up in one. If you want a lasting, mutually beneficial relationship with quality clients, the cold truth is that you may to have to make some short-term sacrifices in the beginning. You might have to go into a bit of a crunch financially (yes, I said it), or refuse to work with a certain type of client if you notice bad behavior start to crop up. This isn’t to uphold some lofty ideal of “honor” or anything, but simply because every crap job you take puts you that much further away from your true goal of doing work you love and are proud to display to others. It might seem irresponsible to take a loss over a quick, cheap gig, but if you have a truly valuable service to offer valuable clients, it’s actually irresponsible not to.

Image Source: Brainstorming via Shutterstock

Sit up straight! Stop seeing yourself as not “eligible” to refuse bad business. Instead, start seeing it as your duty to do so. How else are you going to make room for awesome clients if your time is being wasted by the crappy ones Work on changing yourself, rather than your clients. A bad client will never, ever, ever, ever change into a good one. Never ever. I can’t repeat this enough. You’re going to get sick of hearing it. But I still need to say it, because there are many, many designers out there who still don’t understand. It’s one of my main talking points for a reason; I see it over and over. Quit polishing the turds and find yourself some gold bouillon.

Dining Like Royalty

How does a designer go from struggling to put food on the table to beating clients away with the proverbial stick Many designers are offended at the suggestion that they turn away work – don’t you know I have a family to feed and/or beer to buy I get it. I know what it’s like to be a struggling freelancer, to have to take whatever work you can get. But I also know what it’s like to turn away work that doesn’t suit me as a professional. How I got from point A to point B is really not that complicated, nor is it a fluke or just my good luck. I’m not some rockstar creative with an overinflated opinion of myself, and you don’t have to be either.

Image Source: Strong Super Hero via Shutterstock

The key is to change your attitude. I acknowledged that I simply wasn’t going to be able to provide value to the right clients if I kept taking on the wrong ones. I had a great service that my ideal clients needed, and it was just plain irresponsible of me not to make room for them. You owe it to those dream clients, and to yourself, to focus in and weed the garden. Remember, niche = GOOD; generic = BAD. If you dedicate yourself to finding and helping people who “click” with you, you’ll soon be doing less work while making more money. And as a bonus, you’ll be way less stressed out and frustrated. Maybe fewer of you will have such horrific stories about bad clients and I won’t need to squawk so much about them. A gal can dream…

Adapt To New Opportunities

Human beings are extremely adaptable. Just look at how diverse we are. We’ve evolved to adapt to just about any situation – good or bad. If you’ve adapted to the lifestyle of taking whatever clients come your way and scraping to get by, don’t kid yourself that it’s anything more than that – an adaptation to a poor situation. (No, I did not mean for that to rhyme, but I’m going to leave it because I can. You’re welcome.) You may think that having an open-door policy with bad clients is just “how it is” for freelance designers, but it’s really not.

As a talented creative professional, you need to know that you are capable of a lot more than you give yourself credit for. Take control of your own thoughts and actions to make room for a new situation to adapt to. Create those new opportunities and don’t be afraid to eliminate what’s not working.

What Do You Think

Designers, have you eliminated the worst clients from your roster What strategies worked for you, and, more importantly, how has it improved your business

You might also like…

The Remote Designer – Jumping into the Cloud

Freelance work can be one of the most liberating work, especially when moving from agency or in-house, you will ever undertake in your career. And while it has plenty of benefits, especially when developing a career, it has no shortage of it’s own challenges. The ability to set your own schedule and work when/where you want is liberating, but it can also be more difficult to connect with clients, maintain a consistent workflow, and find inspiration in isolation.

Cloud Computing

Fortunately, the emergence of cloud computing has opened up a lot of opportunities for designers. It’s no longer necessary to overload your personal computer with large software packages and files, and back them up on several external hard drives just in case of possible crashes. The cloud enables you to store, back up and share files and programs on the web, which you can access from anywhere. It’s a revolutionary way of doing your work, and immediately streamlines your workflow.

If you’re interested in using the cloud, but unsure of where to start, try reading this cloud computing guide for a brief introduction (and a pretty funny video of people trying to explain what exactly the cloud is).

There are cloud apps specialized for virtually every aspect of designing, so here is a quick guide on useful web-based apps to get you started if you’re thinking about taking the freelance plunge:

For Client Collaboration

Dropbox: More or less a household name at this point, this is a free service that allots you 2GB of storage upon sign-up. It’s designed for any web user, which means that your clients will be able to easily use it to see any files you wish to share with them. It’s also a secure app for your own storage. For those who need more space, they do have many options to pay for increased storage.

Sugarsync: This is another comprehensive storage system that offers file and folder sharing. It is compatible with most devices, so is a great option for your clients to use with you.

Evernote: Not only can Evernote act as your own digital scrapbook to store research, inspiration and ideas, it’s a great app to take notes when meeting with clients. You don’t have to deal with lugging around a notebook and remembering where you put your notes; you can locate them any time and from any device after your meetings or collaborations.

Dealing with clients can be difficult to navigate at times for reasons other than technical ones, so here is a collaboration guide for more in-depth help for those with less experience with remote work.

Encouraging Team Effort

Basecamp: This is one of the most popular project management apps. It’s ideal for designers, because it tracks projects from start to finish, and is designed for teams to work together remotely. It stores and organizes all files, documents, discussion feeds and feedback all in one place, which makes it extremely easy to track what team members are doing, as well as the project as a whole.

Draftboard: Another great collaboration tool, this streamlines all communication and feedback on project mockups. Perfect for the remote designer, you can update your progress and receive feedback from other designers or clients in one fell swoop, without having to meet face to face.

Remote Coding

Codeanywhere: When inspiration hits when you’re on the go, use this browser-based coding tool, which allows you to draft web layouts on any mobile device. It has Dropbox integration, as well as mobile apps for all types of Smartphones.

CSSDesk: Design a creative website with this full-featured interface. It allows you to develop designs that are supported across all major desktop and mobile browsers.

Helpful Software

Adobe Creative Cloud: As a designer, this is an especially exciting cloud app for you. You’ve probably become accustomed to buying expensive software packages that take up ahefty chunk of your hard drive space, and then spending more to upgrade to the latest version. Well, not anymore! Adobe now offers access to its latest products with a membership. Instead of installing programs on your own computer, you can use them on any device, as well as enjoy exclusive membership features.

Printing

Google Cloud Print: Connect your printer to the web and print a document or image from any application or device. You can share printers with anyone you choose from your Google account for a more concrete version of Google Docs.

Typography and Color Guides

TypeCast: This aewsome tool lets you design and experiment, all in the browser, with web fonts and real content. You can try the most popular web fonts all in one place, including all weights and compare font combinations and build type systems very quickly.

Adobe Kuler: Another excellent tool for doing tests, this app is for creating color themes and palettes, which can then be exported to any CS5 program. You can also import photos to create color palettes based on their prominent colors.

Experimenting with different apps will allow you to decide what works best for you to make your remote design efforts a success.

You may also like…

The Art of Going Freelance

You may also like…

Comments and Reactions