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

4 ways to create richer web experiences

Posted:Thu, 31 Jul 2014 08:15:03 +0000

The Web has evolved a lot from being a simple document repository, and we now have browsers capable of rich visual interactions on desktop as well as mobile.

Because I’d like to talk about where the Web is headed in this article, many of the features I’ll cover may have limited support, so it is important to use resources like caniuse.com which has a robust list of features and charts specifying where they are supported.

Let’s take a dive into the four ways you can enhance your site UX:

1. CSS

CSS is the styling language for our documents, we tend to think of this in simple terms like changing font size or color, but it is becoming increasingly powerful with features like transforms and animations. We’re also getting new features to make it even more powerful.

If you’ve used Vector Masks in tools like Photoshop, you should be familiar with the idea behind CSS Clip Paths. This feature allows you to define a shape in CSS that defines the transparent and opaque parts of your HTML content. These work great with CSS Transitions for hiding and revealing UI elements. Similarly CSS Masks are making their way to the Web, which allow you to define the transparent parts of your content using an image. This allows you to use transparency more effectively in your designs for visual interest or textures.

2. SVG

Most of the images we find on the Web today are raster images, made up of pixels. This means that as we scale them or view them on higher resolution devices they get pixelated.

Vector graphics are awesome because they are made up of geometric primitives that retain their crisp edges at any size.

SVG is the vector format for the Web. We can use it to display graphics and even manipulate and animate its properties with CSS. Where SVG gets really powerful is when we combine it with scripting. Snap is a JavaScript library that makes it easy to manipulate and animate SVG content. It’s focused on modern browsers, so it supports the newest SVG features like groups and clip paths. Snap is open sourced on GitHub and we even used it to create a rich animated banner ad, you can read more about it in my blog.

And here’s a sample of an ad we did using SVG.

3. 2D Canvas

2D Canvas is another powerful feature of the Web optimized for drawing shapes and images. It provides a JavaScript API that gives you granular control over your canvas element. It also gives you the freedom to integrate other forms of media, such as video, creating the potential for rich interactive buttons that play, pause or scrub video footage. 2D Canvas now supports blend modes, which allow you to mix the colors of layers in visually interesting ways, which you can read more about here.

We’re also starting to get support for alpha video that allows us to more seamlessly integrate video into our content. A fun example of alpha video is in OK Go’s music video ‘WTF’.

OK Go is known for elaborate music videos, and in this particular video they shot choreography in front of a green screen. Then using post processing continued to render the footage on top of itself creating a cool echo effect where the transparency was. We can reproduce this effect using 2D Canvas, but we can take it a step further and make it interactive using features like canvas blend modes to create new visual effects in real-time.

4. WebGL

WebGL provides a low level API for drawing hardware accelerated 2D and 3D graphics. The potential here is console style games, like Grand Theft Auto 5 running right inside your browser. As you can imagine WebGL gets somewhat complicated, fortunately open-source libraries like Three.js provide a great entry point with great examples to get you started.

GitHub has become a great resource for the open source community. You can find Three.js and Snap on GitHub as well as other great libraries making it easier to do amazing work on the Web. I often put experiments and tools I make on GitHub as well, such as a camera spline tool I used to create camera paths for Three.js to fly through 3D worlds.

As we can see the Web is becoming increasingly diverse and powerful, it’s an exciting time to be a Web developer. The variety of technologies and resources we have access to are constantly growing, and it’s fun to see the rich experiences people are creating with them.

LAST DAY: UX Web Tiles for Flow Diagrams and Sitemaps – $24!

Source
10 rules for designing emails your customers will want to read

Posted:Wed, 30 Jul 2014 08:15:18 +0000
Email continues to be one of the most popular ways that companies interact with their customers. As with everything else in the design world, how you design an email will have a tremendous impact on things like the click rate and the retention of your subscribers.

When you design for email, you should make the most of the fleeting opportunity you have to make an impression on your subscribers. One of the Cialdini principles of persuasion applies here: if you offer your readers great value through your email, they’ll gladly reciprocate by taking the time to read through and click on any links.

Of course, designing for email also entails responsive email design since almost half of all email opens today occur on a mobile device. Here are the can’t-miss components of successful email design.

1) Transparency counts

Double-check the kinds of subject lines, copy, sender names and even preheaders that you use. Never make any of these ambiguous or confusing for your readers. Otherwise, they’ll be so much likelier to mark your emails as junk or outright delete them.

Instead, always tell your readers your identity, what they’re reading and what the benefits of reading will be. The trick is to get all of this information as close to the top of your email as you can. Having all this information stare your readers in the face as soon as they open your email means your proposition won’t be ignored.

This example shows two emails where the sender name’s in a huge font, the subject line’s crystal clear and the benefits of reading are staring the subscriber right in the face.

2) Follow a conventional pattern

This is the one time when being conventional and not doing something unexpected helps your cause. People are going to expect certain commonalities in all emails they open. For instance, when designing for handheld devices, be sure to make big as well as easily clickable and tappable buttons for your links. It’s best to even make them 100% of the width of the screen because users want to tap with either thumb!

If you place additional links in the copy of your email, make sure that they appear in contrasting and bold colors to make them stand out and scream for attention. Never put links too close together since it would be annoying if users accidentally tap the wrong link.

Finally, see to it that you also make the advantages of clicking so obvious that they can’t be missed. A good way of achieving this is to combine the advantages of a click with the button itself. For example, ideal button copy would be “get your free demo now.”

Here’s a good example of using bold colors in email links to get the attention of readers.

3) Minimalism: say more with less

No one makes time to read that much, especially mobile users, so don’t write a lot in your email copy. Readers will simply scan the email for stuff that holds their interest instead of reading the entire email word-for-word. Split up the chunks of text into small pieces that are easier to consume.

A marketing email, for example, has the objective of getting readers to click back to your website. Don’t stall this intended outcome with a long piece of text. At any rate, longer text just makes it so much more tempting for readers to send your email to the trash.

See these examples of how minimalist emails appear in Evomail.

4) Promote scan-friendly reading

Readers love to scan emails, so make them easy to scan. You’ll accomplish this by dividing your text into delineated and orderly chunks that get right to the point. The use of crystal-clear headings and the emphasis of significant concepts in bold will empower your scanning subscribers to get to the gist straightaway.

Geico’s transactional email illustrates scan-friendly emails to the hilt.

5) Say as much as you want, just later on

Design your email copy so that the most gripping and shorter details come first; only include your longer content after that. This way, you aren’t making any of your readers slog through the longer content, save for the ones who really want to read the longer content. So there is a place for longer content in email marketing, but it just has to come in the right place in the email.

6) Reiterate the call to action

In marketing emails, the call to action is the whole reason for sending your readers the email to begin with. It therefore pays to repeat the call to action later on in the email, particularly if your email has longer content. No one wants to scroll all the way back to the beginning of the email to see the call to action again.

MailChimp’s email repeats its call to action at the top and then again at the bottom.

7) Limit the number of choices

An excess of choices in your email will cause a cognitive overload on your subscribers, so they’ll be that much less likely to actually go ahead and make a decision. Ponder carefully over just what the minimum requirement would be to get a reader to click to go to your site. You want to just gradually introduce this necessary detail to the reader. If you give him too much information at the beginning, then he’ll be likelier to abandon his task.

8) Rely on that whitespace

Whitespace is very effective even in email design. Whitespace is highly useful when it comes to breaking apart crucial bits of information to make it easier for the reader to absorb important details. If you’ve got a lot of elements that are the same size as well as weight, then incorporating whitespace allows readers’ eyes to focus on the stuff that matters. Without whitespace, your email body can appear as a formless, huge block that readers may just skip over.

Here, you can see how whitespace focuses the reader’s attention to the marketing message.

9) A special word on responsive email design

Today, people are looking at their mobile devices around 150 times a day! In addition, 4 out of 5 people will delete emails if they fail to look good on their mobile devices. All this means that you have to focus more intently on bringing your message across to your readers more efficiently than ever.

The media query @media is used in responsive email design. @media is a unique set of CSS styles that behave like either dynamic rules or conditional statements. They can help you create emails that are more readable on various screen sizes.

What they do is identify a device’s screen size and then various sets of rules that apply to said screen size. Based on specifically what you want to accomplish, media queries may be easy or hard to implement. Note that these won’t work in all email clients and also need more planning as well as testing than ordinary emails.

Based on your specific screen size, media types define the exact CSS styles to utilize. Essentially, this media type says, if your email’s viewed on a screen size that’s 480px or smaller, use the following CSS.

So that would be: @media screen and (max-width: 480px)

Responsive email support

Currently, not all handheld devices and clients support responsive email. That’s why designers must keep abreast of what devices and clients support responsive email. That’s why it’s a really good idea to actually test your emails out in a bunch of different devices and clients, so that you can be sure.

Here is where responsive emails are currently supported:
- Android 4.x Email OEM app
- iOS Mail app
- Windows Phone 7.5
- BlackBerry Z10
- BlackBerry OS7
Here is where responsive emails are currently not supported:
- Android Gmail app
- iPhone Gmail app
- iPhone Yahoo Mail app
- iPhone Mailbox app
- Blackberry OS5
- Android Yahoo Mail app
- Windows Phone 7
- Windows Phone 8
- Windows Mobile 6.1
10) Design email for readers

As with all other aspects of web design, the job of designers is to design for the user in order to enhance the user experience. That has to be priority number one. Otherwise, your emails won’t be a big hit with your readers and subscribers.

There are so many things to consider, everything from transparency and following a conventional pattern to minimalism and whitespace. If you want to reach folks on mobile, you have to also figure in responsive email design. Keeping these tips in mind will greatly help with your email click rate.

Featured image/thumbnail, email image via Shutterstock.

LAST DAY: UX Web Tiles for Flow Diagrams and Sitemaps – $24!

Source
The best free WordPress plugins for August 2014

Posted:Tue, 29 Jul 2014 08:15:21 +0000
Ladies, Gents… welcome back! It’s time for another round of WordPress plugins that you might just find useful. As per usual, I’ve installed every plugin listed here and given it a test.

We have a variety of plugins, too. Some of them add features to WordPress, integrate with third-party services (which seems to be a theme this month), or merely refine existing features.

As always, let us know in the comments if we’ve missed one of your favorites, or if you have any feedback on the plugins we’ve featured.

Conversion optimization by 40Nuggets

Okay, this plugin has its pros and cons. First off, allow me to state its purpose: increase your conversions.

It integrates your WordPress install with the 40nuggets website to create Call to Action (CTA) campaigns, for free.

These CTAs are delivered by modal windows. I know. The thought makes me sick too. I just really, really hate it when an unsolicited modal window comes out of nowhere, blocks the rest of the page, and forces you to deal with it before you can continue browsing the site.

But it’s like any tool: it’s all about how you use it. From the admin interface, you can change the modal window to a “slide-in” affair which won’t disrupt the experience too badly. Pair this with the plugin’s advanced CTA campaign options and conversion reports, you have a powerful tool for attracting new, regular readers.

What’s more, the whole thing is driven by what’s called an “Algorithmic Intelligence”, which will decide when is the best time to show a notification to an individual user. If you want more refined control, you can set the calls to action to show themselves after a certain number of page views.

Other features I like: you can choose to display CTAs only to anonymous users, and how often to show them to an individual user (I’d recommend only once). You can also choose to show them after the user has spent a specific amount of time on the site. You can customize the design of the slide-in CTA, or code your own. You can set CTAs to remain inactive if an individual user has already seen a different one. You can make them appear only in certain subsections of your site.

Features I don’t like: Well, the traditional modal windows aside, you can set these Calls to Action to appear when a user tries to leave your website. I hate that. I REALLY hate that. You can also set them to appear on every page view, and other annoying things like that.

In other words, this plugin has the potential to be a powerful and useful tool for increasing your regular readership. It could also be used to nag your users into leaving forever. Be careful with it.

(Crazy idea: have a slide-in notification that shows up maybe once or twice a month with no call to action, just a compliment for your readers. “You’re awesome!”, that sort of thing.)

WPCore plugin manager

This is one of my favorites for the month. It makes use of another third-party service; but again, it’s free.

WPCore allows you to create collections (lists) of plugins hosted on wordpress.org. Then, using their WordPress plugin, you can install/activate the entire collection in one go.

While signing up for their service will allow you to create your own collections, either public or private, you don’t need to. There are a number of public collections of plugins that anyone can use.

For people who make a lot of WordPress sites, this could drastically streamline the initial set-up, especially if you use a lot of plugins.

Resume Builder

I’ve never really thought of using WordPress for building résumés visually, but this tool makes it quite easy. You get the standard introduction section, skill list, and so on. But then, you can build more detailed, customized sections for your résumé.

Then, you can use shortcodes to call in each section individually, should you so desire, giving you more precise control over the layout on the front end.

Since the résumés themselves are custom post types, you can create and post any number of them. The potential use cases for this plugin are interesting to ponder. Perhaps a site where anyone in a particular location/industry can post their résumé? It could also be used to build a directory of local celebrity profiles, or any number of things you can imagine.

Esty360

The misspelled title aside — an error that doesn’t exactly inspire confidence — this is a simple and reliable way to display the contents of your Etsy shop on your WordPress site.

I won’t go into too much detail here. It’s integrated with an online store, and it works. Those who want to know more should check out the official documentation.

Instagram Feed

Need a quick and easy way to pull your own, non-private, Instagram feed onto a post or page with a shortcode? Now you have it.

Install it, and head over to the configuration options. The layout can be percentage-based, but it’s not quite responsive. Further configuration of the gallery layout will require editing some CSS yourself.

SVG Support

WordPress normally doesn’t allow for the uploading of SVG files into the media library for security reasons. If you want to work with SVG files, install this plugin, and go.

Additionally, it makes things easier for those who want to use CSS to style their SVG images directly. If you have multiple authors on your WordPress site, you can limit the ability to upload SVG images to Administrators.

Remove problematic formatting options from tinyMCE

I know I have, more than once, felt a certain amount of trepidation when handing over websites to my clients. When provided with WYSIWYG functionality, they will almost invariably use it, sometimes to disastrous effect.

In other words, they’ll try to right-align (or center) something that should not be right-aligned (or centered) and screw your layout all to hell.

There are ways around this, and many plugins designed to manage TinyMCE, allowing you to customize it to your will. This one, despite its unwieldy name, does not allow for feature-by-feature customization. Instead, it provides a set of reasonable defaults, and leaves it at that.

Mind you, there’s nothing to stop your clients from making seventy-eight percent of their text ALL-CAPS AND BOLD TOO; but there’s only so much you can do.

GuideMe

Handing a WordPress site you just built over to someone else, and want to give them some easy visual references? This tool allows you to select any public page or post on your site, and tie tooltip notes to any element on that page/post.

These tooltips will only display to logged-in site administrators, and they are crazy easy to manage. What’s more, because they are tied to specific elements, and not absolute positions, they work just fine with responsive layouts.

Junk Deleter

Warning: back up your database before you try this one!

Junk Deleter promises to clean up your database, making it run faster. How does it do this? Well, here’s a list of everything it cleans out:
- Old drafts (the ones that have not been edited in the past X days).
- Post revisions.
- Automatically created drafts (auto-drafts).
- Posts in the trash section.
- Orphan postmeta entries (the postmeta whose post no longer exists in the database).
- Pending comments older than X days
- Comments in the spam section
- Comments in the trash section
- Pingbacks and trackbacks
- Orphan comment meta entries
This cleanup can be performed on a weekly or monthly basis. I installed it on my test install, tried the cleanup, and nothing broke. That’s the closest thing to a guarantee that you’ll get out of me.

Bonus: Romance admin color scheme

Are you building a WordPress website for Barbie? Do you like pink? Do you want your WordPress admin side to be pink? Get your pink UI here!

Okay, speaking from a usability standpoint, I think this plugin could be improved with a bit more contrast, especially in the navigation bar on the left. The main shade of pink used is a bit too light, and makes my eyes blur the white text.

I’d also take the word “Romance” out of the title. I’ve never actually understood what the color has to do with the concept. Besides, everyone knows romance is red (at least in North America…).

LAST DAY: UX Web Tiles for Flow Diagrams and Sitemaps – $24!

Source
How to design a successful web app walkthrough

Posted:Mon, 28 Jul 2014 08:15:27 +0000

We’ve all interacted with an app walkthrough at some point or another. Heck, some of us designed them.

But when you take a look at the design literature out there, you will notice there is very little that specifically deals with app walkthroughs. They are such an important aspect of an app’s overall experience because, after all, they are the first interaction a user has with an app (if the walkthrough is present that is).

In this post, I have gathered a few tips for you by observing current apps to see what they do with their app walkthroughs and what we can learn from them.

Should your app have a walkthrough?

I wanted to start this post by pointing out that there are some apps with should have walkthroughs but don’t, and some apps that have them but shouldn’t.

The purpose of a walkthrough is to provide insight about what your app can do. If your app is simple enough, or self-explanatory enough, it may not need a walkthrough, in which case save your time for something more vital.

But, if your app has hidden functionality, a walkthrough is a great place to demo it, so that users don’t miss out.

Take Litely for example. Litely is a photo editing app and it has a bunch of hidden gestures that can improve the experience of the overall app. It lets you view the picture, before you added any filters, by simply taping the photo with two fingers. Instagram lets you do this too but it uses only one finger. No one knows about this functionality because Litely doesn’t tell you about it; if you discover this functionality in Litely, you do so by accident.

On the other hand we have an app like SoundCloud, which has a lovely looking walkthrough at the beginning of the app experience. However, one of the screens explains to you something very obvious: how to follow another user and what to expect from the search icon. You’d be ard pressed to find an app user who doesn’t understand the magnifying glass icon, so when it comes to this specific screen from SoundCloud there’s little to gain from wasting a user’s time. The walkthrough would have been just as successful without it.

Pay attention to the design

It’s hard to create a walkthrough if you haven’t created the app, so walkthroughs are often created last. This frequently leads to a lot of inconsistencies.

If you are going to have a walkthrough, make sure the design of it is just as solid as the rest of your app. A good looking walkthrough is important because it is in fact the first thing your users will see. It’s crucial to have the walkthrough implemented in your brand’s style so you don’t confuse users.

Take advantage of graphics and animations

Walkthroughs are so much more engaging when they use great pictures or images. Better yet, walkthroughs that use animations are great at catching users’ attention. The best example of this is Box. Box is a cloud based file storing app; when you first use their app they have a quick walkthrough where they demonstrate to you how the app is versatile and supports many different file formats across various devices.

Better yet, the walkthrough uses a single file and it animates it as the file jumps from one slide to another. The experience is so pleasant because it’s clever and looks really well thought out. The visual design of the walkthrough is good too as the slides/pages have a clean design.

Make it interactive

Because a walkthrough is supposed to educate your user about how your app works you might want to consider making it interactive. The best way to get people to see the cool functionality of your app is by making them use it. The current version of Mailbox, an email client app, has a nifty walkthrough that tells you about the hidden functionality of sorting email by swiping it left or right. It tells you that if you swipe right the email will archive; next, it makes you do it. It can be a dangerous decision to make users interact with your walkthrough but in Mailbox’s case the request is simple, all the user has to do it swipe! It’s a brilliant idea show the user exactly what they can expect from the app.

If done right, an interactive walkthrough can be a fun way to get people excited about using your product.

Provide an easy way to skip

I’m sad to say some users will not care for your walkthrough no matter how great looking, how well thought out, or how informative it may be.

It’s a good idea to not block people from using your app, and you don’t want users who aren’t interested in the walkthrough compelled to complete it. An easy solution is to have a simple skip button whether it literally says “Skip this” or it’s a big ol’ X in the top right corner of the screen. If you go with a button you have some room to play with copy; you can say something like “I’ve got this!” or a little bit bolder like “I’ve got it, let me use it.” Have fun with it and maybe you’ll convince your user to stick it out.

Lovely is an app that does this well. When you first open the app there is a walkthrough but you can always skip it by pressing the big orange button that says “Get Started”. It’s always there, from the beginning and not just towards the end.

There are other options available to you. What you can simply do is allow users to freely swipe through the walkthrough. In the case of Box, all a user has to do is wipe left a few times to get through to the end and use the app. There are no gimmicks implemented by the app that stop you from doing just that.

Authentic Weather is another example. When you download the app all you get is a simple page screen walkthrough, which disappears when you tap it anywhere. The walkthrough is then done and the user can enjoy the app. If someone cares to read what the screen said, great! If not, they are into the app now anyway.

Walkthroughs and onboarding

Sometimes walkthroughs incorporate onboarding or they are not actually walkthroughs at all and the user has to create an account in order to use the app. Whether or not this is the right thing to do is a whole other discussion. I will point you towards this article, which talks about why you might not want to do that: Two Reasons to Forgo Sign Ups and Let People Use Your Product First. If you are making people follow a strict sign up from the get-go consider these two scenarios.

Scribe is an app which lets you share information between your iPhone and you Mac such as phone numbers or images. In order to use the app you have to connect the two. When you open the app for the first time, it gives you specific and clear instructions on how to proceed. It tells you exactly what to do and if something goes wrong it even provides solutions. The app goes out of its way to help users in completing the onboarding with ease.

Crazy Blind Date was a dating app from OKCupid that found users blind dates, as the name suggests. In order to create an account the user had to upload a photo first. The experience of doing so could be terrifyingly difficult. The copy was actually incorrect – you could also upload a photo – but you could not upload a photo if your phone was offline, fail to take one and the icon itself is not prominent enough. This poor usability is probably the reason Crazy Blind Date is no longer available.

Featured image/thumbnail, uses iPhone 5c mockup by Ben Lee

LAST DAY: UX Web Tiles for Flow Diagrams and Sitemaps – $24!

Source
Comics of the week #245

Posted:Sat, 26 Jul 2014 09:08:35 +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…

An i want it ASAP

In medical terms…

They keep coming back

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

LAST DAY: UX Web Tiles for Flow Diagrams and Sitemaps – $24!

Source
I hate design…now what?

Posted:Fri, 25 Jul 2014 17:15:18 +0000
So you’ve been working as a designer for the past few years. You’re good at it. You’re successful. Maybe even really successful. You’ve had big-name clients, your name is out there, and you’re being sought out by agencies and clients.

In other words, you’ve made it. You’ve achieved what a lot of designers only dream of.

Or maybe you’re still trying to get your name out there, after investing years into honing your skills and your résumé.

But in either case, you’ve come to a startling realization: design may be how you make your living, but you actually hate it; you don’t look forward to work; you don’t get excited about new projects or new client; you’re looking for any other creative outlet you can find, while design just pays the bills.

You have three basic options at this point: you can quit design and find another line of work. For some that’s practical, but for others, not so much. You can keep going the way you’ve been going, hating your work but continuing because it pays the bills and you’re already good at it. Or, you can figure out a way to recapture your passion for design and start loving your work again. That’s what we’re going to talk about here.

Why do you hate it?

The first step in figuring out how to rekindle your passion for design is to figure out why you’ve grown to hate it in the first place. There are a few common culprits:
- boredom
- disappointment with where you are in your career
- feeling like you’re not doing anything important
- general burnout
- lack of direction
- lack of confidence in your work or your skills
- depression in general (which is making you hate more than just design)
Any of those can lead you to hate your work.

Boredom with your work is incredibly common, and often ties directly into disappointment with where you are in your career. If you’re not getting the kinds of projects you really want to be working on, then you’re likely going to grow bored with what you do. Especially if you view it as being too easy or below your skill level.

This is directly related to feeling like you’re not doing anything important, too. While design has a great impact on the everyday lives of people, it can also feel like a fairly superficial impact unless you’re working with organizations that are directly making a positive impact in the world.

Burnout is often the most toxic reason for hating your work, though it can also be the easiest to deal with. A lack of direction or confidence can also be dealt with fairly easily, once you’ve identified the issue.

General depression is something that’s best dealt with by a medical professional, so if that’s where you find yourself, seek professional guidance first. Then turn to the other tips here to specifically address your lack of passion for your work.

Find some new inspiration

If you’re bored with your work, one of the easiest ways to regain your passion is to find some new sources of inspiration. Sometimes it’s just a case of seeing the same things, day in and day out.

Look for new design galleries, blogs, and even specific designers to follow. But don’t limit yourself to just other website designs.

Look at other types of design and art, like photography, packaging design, signage, and the like. But also look at things outside of the design and art worlds. Look to the world around you. Look at sites that aren’t related to design, per se. Things like fashion blogs, Pinterest, and Tumblr can be a great way to find new inspiration that isn’t the same old stuff you’ve been seeing for months.

Challenge yourself

Taking on new challenges can really reignite your passion for the design world. Challenges can alleviate boredom, as well as give you new skills to further your career. That can lead to new opportunities and new clients.

Taking on new challenges is great whether you’re bored with design in general, or if you’re unhappy with where your career is. It can also bolster your confidence in your skills, if you successfully complete a project you feel is a challenge.

If you don’t have any opportunities from paying clients for challenging projects, then look for personal projects you can complete. This could be a redesign of your portfolio, a theme design you might want to sell, or a side project you’ve been considering for awhile.

Find a mentor, or mentor someone else

If you’re not confident in your skills, or you feel like your skills have stagnated, then look for a mentor. You can do this directly or indirectly.

The first method involves actually contacting a designer you admire and asking for their help. You don’t necessarily have to ask for a formal mentorship, but simply emailing them and telling them that you admire their work and would it be okay if you occasionally ran things by them is often enough. Don’t be discouraged if your first choice doesn’t have time. Move on to someone else.

The second method involves more of an indirect mentorship. In other words, find a designer you admire who has a blog or otherwise shares information about their work and their process, and soak up everything they have to say about design. You can do this with more than one designer, too, if you choose.

If your problem is more that you don’t feel like you’re doing anything important, then consider mentoring someone else. Posting on your blog, Twitter, Facebook, etc. that you’re looking for someone to mentor is probably the best way to find someone. Then make yourself available to that person when they have questions or ask for feedback. Just make sure that you keep your advice entirely constructive and helpful, and offer them ideas for solutions rather than just telling them they’re doing something wrong.

Re-educate yourself

Taking a class or seminar, attending workshops and conferences, or otherwise continuing your education is a good way to get interested in design again. Your local community college or adult education center likely has some courses, which might fit depending on your level or existing expertise.

Otherwise, check out more advanced online courses and more focused seminars, workshops, and events aimed at educating designers. There are tons of options out there, with many of the leading design websites now putting together conferences.

Build a team

Sometimes the challenge is that we can only do so much on our own. If you’re a freelancer who’s been working solo for years, you may find that you have a lot more interesting opportunities if you team up with other designers and developers. Look to your current circle of professional contacts and reach out to those who seem to be working on projects similar to your own, or projects of the type you’d like to be working on.

Your team doesn’t necessarily have to be local. You can easily take on remote work regardless of where in the world you or they are.

Make sure that you agree on some kind of structure, however informal, for this type of arrangement. Are you planning on bringing each other onboard for every project, or just a few? How will you decide? And what about payment arrangements? It’s best to have these things clarified before you actually start working together to avoid future conflict.

Outsource and delegate

While teams can be great for some things and some projects, sometimes the issue has more to do with the day-to-day tasks that aren’t specifically design-focused. This includes things like managing client contact, bookkeeping, and the like. These things can quickly drain your energy and leave you with less time for the more skilled tasks you might actually enjoy doing.

This is when outsourcing or delegating to other employees is a good idea. Figure out the necessary tasks that don’t necessarily have to be done by you, and find someone else to do them. If you can free up more of your time to focus on the parts of your job you used to enjoy, then you may find that your passion returns. This can be a huge help if burnout in general is your problem.

Freeing up time to focus on the parts of design that you love (or once loved) saves frustration and makes it easier to do great work. And doing work you can be proud of can make a sizable difference in how your feel about your work overall.

Set some new goals

It’s easy to stagnate and find that your career isn’t moving forward. When that happens, your passion wanes and you start hating your job.

What you need are some new goals. Look at the goals you’ve already achieved, and figure out where you can go from there. Your new goals can be income-based, client-based, achievement-based, or based on anything else you choose. For example, you might have met your goal of gaining ten new clients last year. So this year you might want to aim for twenty. Or maybe last year you were nominated for an award and this year your goal is to actually win that award (or be nominated for more).

Stop procrastinating

Burnout can lead to procrastinating on projects, either personal or for clients. That procrastination leads to excitement, because suddenly you have to rush to meet deadlines, which can give you energy. But that procrastination can also lead to more frustration and more burnout, especially when you procrastinate to the point where you never move forward.

Stop procrastinating and instead take the time to do better work. Get your projects done early and reward yourself. Find the simplest solutions for personal (or even client) projects so you can get them done. Sometimes we make things overly complicated when a simple solution would work just as well.

Take some time off

Sometimes, what you really need when you’ve lost your passion, is to take time off. That could mean taking time off on a regular basis during the day (like finishing work at 5 every day and taking your evenings off, or taking an hour lunch break and getting away from your desk every day), or it could mean taking a few days (or even weeks) off.

A lot of self-employed people, both in and out of the design field, don’t take vacations on any kind of regular basis. Many don’t even take weekends off, and often work way more than 8 hours a day. That kind of schedule isn’t sustainable, and you’re bound to burn out eventually.

If that’s where you find yourself, then do what you need to do to take a break. Even if all you can manage is a long weekend, you’d be surprised at how much it can recharge you and bring back your enthusiasm for your work. Making vacations and other time off a regular part of your schedule will help prevent burnout in the future.

Be thankful

One often-overlooked way to regain your enthusiasm is to be thankful for what you have. Think about how many people would love to be in your position. Think about what you’ve achieved and how far you’ve come since you started.

Sometimes appreciating what we have is enough to give us the energy we need to keep going forward.

Conclusion

Losing your passion for design isn’t the end of the world, nor is it necessarily the end of your career. Try the techniques and ideas above to see if you can find new enthusiasm for your work. You may be surprised by what a difference a few small changes can make.

LAST DAY: UX Web Tiles for Flow Diagrams and Sitemaps – $24!

Source
Deal of the week: 100 professional fonts designed by Ingimage

Posted:Fri, 25 Jul 2014 08:15:56 +0000

We can never get enough fonts, so we’re always extra excited when our sister-site, MightyDeals.com, manages to pull together a super fonts deal.

This week, MightyDeals are offering 100+ professional grade fonts, for just $19, that’s just $0.19 per font!

Designed by Ingimage, this collection, which includes both display and body fonts, is bound to keep even the most hungry of typophile’s busy.

There’s all kinds of font-goodness in here, from the hand-writtern delights of Vicentino, to the architectural Maychurch, to the vintage delights of Hedgerow; there really is something for every taste and style in this collection.

All fonts come in both OpenType and TrueType formats, suitable for Mac and Windows. And you’ll find a ton of features packed into the files, including specialist kerning pairs, extended character sets, international currency and glyphs, and a lot more besides!

The regular retail price of this awesome set of fonts is $99, but for a limited time you can download all 100+ fonts for just $19. That’s an amazing 81% discount!

Head over to MightyDeals to grab this deal today.

LAST DAY: UX Web Tiles for Flow Diagrams and Sitemaps – $24!

Source
Discover the Web’s best design resources with oozled

Posted:Thu, 24 Jul 2014 08:15:36 +0000

“Curated resources for everything design related.” So?

“oozled brings together 586 curated resources in 41 categories.” Gaah!

“Subscribe to as many or as few categories as you want and create your own feed based on your interests.” OK. Now you have my attention.

Oh, and “Submit a Resource”… I’m in.

The story of oozled

Inspired by a talk he gave at his local college, web/user interface designer Dan Edwards compiled a list of books, apps and websites that would be a great guide for the students. It was when he posted that list of 80 items to Medium that he discovered not only did people value it as a resource, but also as something to be part of, and to contribute to (at launch, the article had over 50,000 visits and over 800 recommendations).

By April 2014, Dan had added over 230 resources. Some were his discoveries, but most were contributed by readers.

Propelled by the enthusiasm of the community, Dan partnered with designer/developer Ryan Taylor, and in May this year the beta of oozled was launched.

How it works

oozled appears to be primarily a mobile site, skipping a lot of standard wide-screen navigation and bringing you straight to an app experience. That said, I was able to explore the site on my laptop without becoming annoyed with the interface.

You can browse the resources without signing up, but you’d be missing a big chunk of the magic. oozled allows you to filter its content by a wide range of needs and interests, including tech (such as HTML6, CMS and JavaScript), business (Meetups, Legal, Payment Solutions, etc.), design thought (Colour, Motion Graphics, Responsive Web Design) and of course, inspiration (which they may have actually succeeded at making a less-unwieldy category group—go see).

Signing up allows you to create a personalized feed, and it’s easy to cull it any time: a checkbox near the filter title immediately deletes it from your feed page.

Notes

“Inspiration” tends to be too much like my kitchen’s “miscellaneous” drawer; that out-of-control collection of items I no longer feel safe putting my hand into. Pretty pictures, smart design solutions, influential projects… according to whom? Still, in the process of learning what oozled had to offer, it was the topic link I clicked first.

I was surprised to discover that I wasn’t disappointed. The expected websites were there, but so were a number of newer sites, with fresh perspectives.

Once I extricated myself from niice.com (though I may be leaving the tab open, like, forever), I went back to get a deeper look. The range of categories is relevant for designers and developers, freelancers and studios. There are a few I’d want to add though, and I wonder how they plan to scale their list as it inevitably grows.

I highly recommend the “Just Handy” category, with its collection of web design tools, such as a grid calculator, free placeholder images and a px-to-em conversion tool. The Latest 50 is an interesting category, but doesn’t provide an add-to-feed checkbox, and doesn’t show up in your personal feed. The rest of the categories will be up to individual tastes and needs.

One feature request so far: I’d love a way to filter individual items out of a category.

It was impressive to see that they already have a revenue model in place that integrates elegantly with the experience, and gives hope they’ll be able to make this project a sustainable one.

LAST DAY: UX Web Tiles for Flow Diagrams and Sitemaps – $24!

Source
How to make whitespace work on the Web

Posted:Wed, 23 Jul 2014 08:15:30 +0000

The term white space is sometimes used interchangeably with negative space, and the concept is the same. Though the term refers to “white” space in particular, the area in question does not have to be white at all. It’s just the empty space around the elements of a webpage layout.

Space like this can come in many different forms, such as the space in between images and graphics, gutters, margins, columns and even lines of type. While it seems to be made of “nothing”—only in that no other design element occupies the space—white space should not be treated in that manner. Treating it as “nothing” can lead to missed opportunities in designing something truly aesthetic and appealing.

White space, done right, can actually provide a good amount of benefit to web design. Instead of reducing white space in web design, go against the grain and make sure to increase white space on a webpage. Some well-known and popular brands are already moving in this direction, and it’s time that more designers followed their lead.

More white space equals a more luxurious brand and website

Clients typically want designers to use up as much space as possible on a website since it can be costly to pay for site real estate, and there are screen limits to where messaging can be included. However, doing the opposite—increasing white space—prompts the designer to craft a smarter brand message in a more restrictive space.

In addition, perception will be that a website with more white space is one whose content is more vital than its screen space. As a result, a brand seems more luxurious because it appears able to sacrifice more screen space to focus on its content messaging instead.

Luxury brands haven’t failed to understand this phenomenon and regularly use more white space to achieve this precise effect. Pottery Barn is a well-known retailer of more upscale home furnishings, and its website’s smart use of white space reflects this to a tee. White space dominates on the homepage, with a lot of it existing on the sides of the page to better direct site visitors’ attention to its deals and promotions in the middle of the page. Even the brand name itself features generous white space between the characters at the top of the page.

White space to promote smooth searches

A simple, though ideal, demonstration of the effective simplicity of white space can be seen in two major search engines: Google and Yahoo Search.

Google understands precisely that users looking for a certain search topic don’t want to be distracted with loud backgrounds and ads. Therefore, white space dominates the entire Google search engine page, with the actual search only occupying a thin sliver of space in the middle of the page. Similarly, Yahoo Search embodies this smart use of white space, too. While the webpage does have a pretty long menu bar at the top, the idea’s the same: a lot of white space so that the user can concentrate on the search and nothing but the search.

Readability and legibility get a much-deserved boost

Readability and legibility on any given website are bolstered when white space is smartly used. If the text on a page is squished together excessively, then it will get in the way of a comfortable reading experience, which hampers the overall user experience. More white space improves the reading experience by making text easier to scan, adding also to comprehension.

One individual’s site that has a handle on this principle is Information Highwayman, which is the site of D Bnonn Tennant, a copywriter and marketer. As someone who boasts he knows what great web content can do for any small business, it’s reassuring to see that Tennant practices what he preaches on his own site. The spacing between characters in the headline copy, text and menu bar is conducive to ensuring readability and legibility.

White space can also be used in between different sections of content, not only to improve the reading experience, but to break up various parts of content for easier absorption of information. Andrew Lucas’ site demonstrates this nicely. He’s a web designer from London, and he uses white space effectively on his homepage.

It makes colors more vivid

Perhaps the most direct, though simplest, benefit of white space is that it makes other colors on a website stand out to the point that they’re brighter than ever. This is very helpful for catching the eye of the site visitor, as the colors’ depth, richness and even intensity are emphasized more than ever.

The web designer behind the I Am Dan website gets this so well that he epitomizes this concept on his homepage with his sparse use of color. Much of his website is just white space that’s broken up by the rare splash of red. Because of this tactic, the red colors highlighting links to his portfolio and inviting site visitors to browse his site stand out effectively, thus increasing the chances that visitors will complete the call to action.

Zurb is a web-design company that also demonstrates how white space can make colors stand out. Its homepage is characterized by one solid color at the top of the homepage and colorful icons to different webpages (right by the fold). Aside from this minimal use of color, the whole design of the homepage features white space.

Simple colors like green, orange and red will have the effect of creating a look that’s both pleasant and well-focused. Both of the sites mentioned above take a minimalist approach to color because there is so much white space. As a result, the colors are used very judiciously, which makes users appreciate them all the more.

White space is not wasted space

Web designers have to increasingly move away from the mistaken belief that they have to cram every element and color possible into the screen when designing a site. As illustrated in the examples above, white space can make a powerful impact when it’s used in such a way to highlight a brand’s content, boost readability and legibility and make minimalist colors stand out.

The phrase “less is more” truly applies to the whole concept of white space, no matter how you look at it. In a broader sense, this take on minimalism in web design has also been getting popular lately, and it’s certainly a trend that will continue.

LAST DAY: UX Web Tiles for Flow Diagrams and Sitemaps – $24!

Source
AddThis Pro introduces new pro tools for website owners

Posted:Tue, 22 Jul 2014 12:15:09 +0000

We all know the importance of social media; content may be king, but it’s a king without a castle if no one is visiting your site.

What all website owners need is a way to encourage new traffic, and retain old users. Sure, Google can help a bit, but the real prize is success on social media, and for that you need something like the AddThis social sharing tool.

You’ll have seen AddThis on any number of sites, including this one where we’re currently testing it out, and the company are now releasing AddThis Pro, an enhanced set of tools designed to increase social media engagement and track your success.

It’s easy to be cynical about AddThis, there are countless tools online claiming to drive more traffic to your site, and they rarely pay off. However, in the case of AddThis Pro, there may be some truth to the bold claims: simply by switching to the Pro option, The Cool Rental Guide increased sharing by 140%; that’s an incredible return on investment, but they’re not alone: Merchtable achieved a 41% increase in pageviews and a 25% increase in sales; and Hijos Del Atomo reduced their bounce rate by 7.75% in just three weeks!

Our favourite feature of AddThis Pro is that it modifies the social media options it displays, dependent on the current site visitor. It’s a great way to show users that you care about them.

There’s only really two downsides to AddThis Pro: firstly the widespread use of the tool means that the default buttons will look pretty generic pretty quickly — fortunately the dashboard has a ton of customization options and if you want to mix in your own code you can do even more.

Secondly, AddThis Pro has a tendency to convince you to use all of its tools, on every page, which is hovering around the area of spamming your own users — on this front you just need to exercise some restraint, test which option works best for you and your users, and then focus on that.

All in all, a 50% higher clickthrough rate, which is what AddThis Pro claims to deliver, is a huge boost for any site.

Social sharing isn’t AddThis’ only strength, the web tool also features advanced reccomendations, that ensures that when users are finished with your content, they’ll keep reading instead of closing the browser tab and taking their attention elsewhere.

Analytics, dynamic recommendations, and engaging mobile-friendly social media sharing all combine to drive your content to new heights, and make AddThis Pro an great tool for anyone serious about their site’s performance.

Visit AddThis

Update: several concerns have been raised about addThis’ use of so-called canvas fingerprinting. addThis have released a blog post that they hope will allay your concerns, you can read it here.

LAST DAY: UX Web Tiles for Flow Diagrams and Sitemaps – $24!

Source