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

Intriguing study reveals the secrets of successful infographics

Posted:Tue, 11 Mar 2014 08:15:23 GMT
What makes an infographic successful? As designers, we want it to achieve a balance of two main things:
- Did the reader get the message we wanted them to get?
- Was the message memorable?
Doctoral student Michelle Borkin of Harvard’s School of Engineering and Applied Sciences worked with collaborators to collect, analyze and present 2,070 single-panel visualizations from a range of publications and websites.

In the “largest scale visualization study to date,” they asked, “What Makes a Visualization Memorable?”

Caveat

Memorability is very important, but still just half the recipe.

The researches did not look at how well viewers understood the images, just how well they remembered them. Borkin’s next steps are to measure comprehension: that new study is already in progress.

This study represents the first step in their research, as they explore what makes an effective infographic, but it already raises questions about what designers have believed so far.

What they did

First, the team created a “visual taxonomy” of the images, identifying them by qualities like chart types, number of colors and presence of human-recognizable objects. They also classified attributes like the presence of non-essential decoration and “visual density” (a.k.a. clutter).

“Redesign Your Place” infographic designed for DMC Bologna, by Jacopo Ferretti

Then they chose 410 images that evenly represented the range of their sources (like news, science and the infographics site, visual.ly) as well as the range of qualities they’d identified. Using that group, they ran an online experiment (using Amazon’s Mechanical Turk) in which participants watched a stream of images and clicked a button whenever they saw one they believed had been shown before.

What they learned

To the surprise of the researchers, bar graphs and charts did poorly. It turns out (news flash) they all kinda look the same. The most memorable images contained “human recognizable objects.” Think mundane stuff like photos or illustrations of bottles, animals and shoes, not to mention people.

“Who is Occupy Wall Street” infographic created for Fast Company, by Jess3

Other important points:
1. Color made a huge difference: the more, the better.
2. Images with more clutter were highly memorable. How much more memorable? A lot.
3. Images with lots of circles and rounded corner graphics also ranked high.
More about clutter

Plenty of psychology lab studies show that simple and clear visualizations are easier to understand. However, researchers have also found that “chart junk” (a term coined by Edward Tufte, so important it gets its own Wikipedia entry) can improve retention because it forces us to work harder at understanding a graph, resulting in better comprehension.

Again, understanding what makes an infographic memorable is only the first step to creating more effective presentations. According to Borkin, “Making a visualization more memorable means making some part of the visualization ‘stick’ in the viewer’s mind.” She emphasizes that we also need to learn how to make sure that what sticks is our intended message, and not the eye candy.

Mega Design Bundle from Inventicons – only $30!

Source
What’s new for designers, March 2014

Posted:Mon, 10 Mar 2014 08:15:05 GMT

The March edition of what’s new for web designers and developers includes new web apps, photoshop plugins, productivity tools, graphics programs, CSS frameworks, jQuery plugins, and some really great new fonts.

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.

Designer Candies

Designer Candies offers up freebies for designers on a regular basis. Freebies include textures, templates, brushes, and more.

IM Free

IM Free is a collection of free stock photographs from IM Creator. You can search for images or browse by subject.

Speed Design with Illustrator

Speed Design with Illustrator is a selection of 14 tips for speeding up your design process with Illustrator. It includes tips for things like dynamic buttons and starter templates.

Readerrr

Readerrr is a new RSS reader that’s easy to use but balanced for web designers, with a built-in syntax highlighter and more designer-centric features in the works.

Zurb Quips

Zurb Quips is a library of design stats from a variety of sources. It’s a well-organized source of meaningful and accurate stats that you can use to keep on top of what’s happening in the design world.

Cerberus

Cerberus is a set of solid patterns for responsive emails that even work in Outlook. Optimize your emails for small screens with just a few simple patterns.

Dollar Photo Club

Looking for affordable stock photos and vectors? Dollar Photo Club offers 26 million stock photos for just $1 an image.

Glyphr Studio

Glyphr Studio is a free HTML5-based font editor that makes is simple for design hobbyists to create their own fonts, practically eliminating the barrier to entry.

Stripe Checkout

Stripe Checkout is an embeddable payment form for mobile, tablet, and desktop devices that makes it easy for customers to pay instantly. Checkout is continuously working to refine and optimize your sales funnel for you.

Grid Style Sheets

Grid Style Sheets uses the Cassoway Constraint Solver algorithm (the same one Apple uses to compute native layout) to replace the browser’s layout engine and reimagine CSS layout.

ScrollMagic

ScrollMagic is a jQuery plugin for creating scroll interactions, including starting animations at a specific scroll position, synchronizing an animation to scrollbar movement, and more.

Future52

Future52 is a project that features 52 designers with 52 creations over 52 weeks. There are three creations up so far, and you can follow them on Tumblr for more.

Atom

Atom is a hackable text editor from GitHub. You can customize it to do whatever you need, or just use it out of the box.

Type-Finder

Type-Finder is a quick questionnaire that lets you easily find reputable typefaces to meet your needs. Just answer five questions and you’ll get a list of great fonts to choose from.

Type Quest

Confused about how to use OpenType Webfont features? Type Quest is a great learning resource that will teach you everything you need to know to take advantage of all the features OpenType Webfonts offer.

Dewey

Dewey is a better bookmark system for Chrome. It gives you the ability to add custom tags and screenshots, and you get smarter search.

Panda

Panda (formerly Geisha) offers up daily inspiration to designers, either as a website or in a Chrome extension. Easily browse Designer News, Dribbble, Behance, and more in one place.

Ink

Ink is a free Photoshop documentation plugin. It lets you add extra information to your mockups so your developers have a better understanding of how the final output should look.

Random User Generator

This Random User Generator plugin for Photoshop makes it simple to create random users to add to your mockups, complete with names and photos. You can choose whether you want male or female users (or both), and adding them to your mockup is as simple as dragging and dropping or cutting and pasting.

Sache

Sache is a directory of Sass and Compass extensions for your projects. Just browse for the extension you want (you can also sort by tag), or add your own.

Lightly Icons

Lightly Icons is a set of 350 pixel-perfect iOS7 icons inspired by Neue Helvetica. It comes in several file formats, including PNG, PSD, AI, EPS, and SVG, all for $19.

HapTime.in

HapTime.in is an alternative to timers and spreadsheets that makes it simple to easily keep track of your time. There’s nothing to install (just a web app), and tracking is as easy as tapping.

Hemingway

Hemingway is a great free app for improving your writing. It highlights all sorts of common writing pitfalls, including overly complex sentences, adverbs, phrases that could be simpler, passive voice, and more.

Cute Grids

Cute Grids is a clean, responsive grid base for your designs. It’s mobile first, includes five media queries based on em widths, and has detailed documentation.

TLDRLegal

TLDRLegal is a resource for finding easy-to-read summaries of popular software licenses in plain English. You can search or browse, or sign up for updates.

Essay ($10)

Essay, from Ten Dollar Fonts, is a bold all-caps display font inspired by black weight type set in books from the mid-20th century, rock music, and athletics, among other influences.

Voyager ($10)

Voyager is a geometric sans serif typeface that’s highly legible, but with enough personality to be used as a display font, too.

Magnifique ($10)

Magnifique is inspired by decorative French and Italian cafe lettering dating back to the early 1900s. It’s modern while still capturing the romance and elegance of these cultures.

Campton (free)

Campton is a geometric sans serif font based on the neutrality trend of the early to mid twentieth century. Light and bold weights are free, others start at $30.

Courtesy Script Pro ($59)

Courtesy Script Pro is a Victorian-inspired hand-lettered typeface with the look of custom stationery. The lowercase is notably understated while the capitals offer a variety of stroke weights and flourishes.

Wood Nouveau JNL ($25)

Wood Nouveau JNL is inspired by hand cut wood type popular between the Victorian era and the 1920s, as well as the hippie counterculture that came later.

Jayhawker ($15)

Jayhawker is a stylized retro display font that’s great for drop caps, posters, headlines, and more.

LHF Chicago Script ($52)

LHF Chicago Script is a Charles Borges’ script with several OpenType features, including automatic ligatures and manual stylistic alternates.

Pintanina ($50)

Pintanina is a bold display font with definite pop culture and comic book stylings.

Maculature ($29)

Maculature is a grungy, uneven typeface inspired by old posters and ads. It’s legible while still being distressed, and includes some ancillary graphemes, ornaments, and rough lines.

Mega Design Bundle from Inventicons – only $30!

Source
Our favorite tweets of the week: March 3, 2014 – March 9, 2014

Posted:Sun, 09 Mar 2014 09:22:20 GMT

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

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

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

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

Sarah Parmenter explores how to tackle the gender gap in the design industry http://depot.ly/unpX5

Why it’s sometimes best to turn down work: http://depot.ly/umb31 via @CreativeBloq

Nice: Examples of the Effective Use of #Typography in Web Design http://depot.ly/umaKu via @onextrapixel

What Does a Histogram Tell Us? http://depot.ly/umaFf

Learn how to swap faces with Photoshop http://depot.ly/ulKW3

A stylesheet analysis too that runs metrics on your stylesheets & reports on their complexity http://depot.ly/uj1Iz /@smashingmag

5 awesome Ghost themes you can learn from http://depot.ly/uj1vi

Retro goodies: 12 Polish movie posters that you will adore http://depot.ly/uj0s8

The science of emotion in marketing: how our brains decide what to share and whom to trust http://depot.ly/uhfJD *Interesting read via…

Even PayPal Tries to Get Away With Not Paying for Stock Photos http://depot.ly/ugzb0

Here’s a nice list of books to read for an aspiring graphic designer http://depot.ly/udap2

Funny: The client is always right poster series http://depot.ly/ud8wd via @speckyboy

Proof that B2B logos need not be boring http://depot.ly/udcdR

Zach @Holman: Only 90s web developers remember this http://depot.ly/udbOd

Fake UI: A Tumblr blog cataloging fake user interfaces seen in movies and TV – http://depot.ly/uaLVj

Code Guide – Standards for developing flexible, durable, and sustainable HTML and CSS http://depot.ly/uaLIC

Designer, speaker and philosopher @reichenstein talks typography, Japan and hairdressing – http://depot.ly/uaLzG /@netmag

Things you can do to Improve Page Load Times http://depot.ly/uaJlN

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

Mega Design Bundle from Inventicons – only $30!

Source
Comics of the week #225

Posted:Sat, 08 Mar 2014 09:53:55 GMT

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…

3D dessert

Non converting visitors

Negative cubicle

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

Mega Design Bundle from Inventicons – only $30!

Source
The secrets of successful website content

Posted:Fri, 07 Mar 2014 08:15:17 GMT

Do you know why book stores are closing at a frightening pace? Because people don’t read books anymore. They say they do, but overruns on actual books are killing publishers… and distributors and stores.

It’s a sad fact but what does it have to do with my website/blog content? Everything, because it’s a trend a savvy businessperson will heed—consumers aren’t reading!

This isn’t a condemnation of digital devices. I love them! But I also love reading. It was my love of reading that led me to the love of writing… and the realization that I needed to edit myself more and more. Some experts claim people only finish 65% of an article, and then only if it was really interesting; anything over 300 words is a waste of valuable space and effort. It’s not the rule but it’s a growing factor in content creation and how humans continue to communicate.

Brevity is the soul of wit. ~ William Shakespeare

How non-reading affects all of us

Non-reading? Is that a good term for it? Maybe that’s a bit too far but we must return to the matter at hand: developing your website to reach the lowest common denominator while not alienating other followers and prospects.

I could post lots of opinions and studies that say people are reading less, but does anyone really disagree? (Tell us in the comments section.) Let’s just assume, for the sake of this side of the argument, that there is a dire need to make things “comprehension friendly” in all of your communication materials.

Have you ever heard of “The Elevator Speech”? It’s how you would sell your business to someone as they travel the average 60-90 seconds in an elevator. Why under two minutes? Because that is the time we have to capture their attention in our sales pitch, and most people can’t focus for more than 90 seconds. So… what’s on the front page of your website?

How much do you tell the casual visitor in the hope that it will convert them into a customer? I’ve seen 300-word introductions that tell us exactly what the site owner does. I’ve also seen life stories spilled out in a rambling rant. Some people believe it “humanizes” them in the eyes of potential clients. It does… which is why they get bored and zone out to what you’re saying in written content. How do you communicate if people won’t read your sales pitch?

Brevity is a great charm of eloquence. ~ Cicero

Dumbing it down

Yet another questionable label for meeting the interests of the masses. Remember the fuss over the single-page website? A brilliant solution to foster simplicity, but not every website can get away with that, or so I’m always told. Well, the next step is following the reduction prompted by text-speak and tweet-length.

How about one of those walk-on videos where I can explain what I do? How often have you sat through one of those without clicking off the presentation? What’s the option? Reading the material? What is it people will read or watch?

It is my ambition to say in ten sentences what others say in a whole book—what other men do not say in whole books. ~ Friedrich Nietzsche

Speak in sound bytes

If you haven’t paid attention to the political scene around the world or had any heated debates with others on the subject, then you aren’t on Facebook enough! If you know what I mean, then you know how people love to quote talking points. It’s those little sound bytes we hear on certain news broadcasts and humor monologues on late night shows. This is how people are speaking and absorbing information. Videos over a minute and a half won’t get as many hits as videos under a minute. Get right to the point!

A recent client wanted a growing list of something or the other, fed to people who were ready to take on the project, making them read five… no, ten… maybe 20 reasons they should want this product. My advice was not to take seven pages to sell them on what they already want. The client felt that more is better and the product will sound more important, surrounded by flowery copy. I gather after he slept on it, he realized that too much is just that. When it comes to words, stating the same thing over and over does not give the illusion of quality content. You keep people’s attention by being short and to the point. In a way, you’re respecting people’s precious time and, when it comes to reading, their patience.

Be sincere, be brief, be seated. ~ Franklin D. Roosevelt

Repeating yourself

It’s important to respect the time-taken and willingness to read what you have to say. It’s like when I’m asked to review a designer’s or illustrator’s portfolio. I have to stop them from going into long descriptions of each sample piece. I usually hold up my hand to signal they should halt speaking and I continue looking at their book. When I’m done looking at the entire book, seeing if there’s a leave-behind piece and/or the proper identification of who the designer or illustrator is and how to contact him or her, I explain to the teary-eyed, nervous wreck of a creative standing in front of me, that I merely wanted to see how much their portfolio spoke for itself.

That seems to be an alien concept to most graduating art school seniors as well as many professionals. Even with the advent of digital slide shows, short and sweet is always better. Less samples but better ones make a more memorable book. Think in terms of a child’s bedtime book vs. the novel Moby Dick. The bedtime book is over in ten minutes, the child is asleep and the purpose is fulfilled—sleep time is sold! With Moby Dick, it’s over 800 pages of allegory for a simple message spoken in the first 20 pages anyway. When selling yourself, don’t be a Moby Dick!

That writer does the most, who gives his reader the most knowledge, and takes from him the least time.”~ Charles Caleb Colton

Doy, duh, doy, doy!

When I write, I use a handy app that rates among other content elements, how “good” and article is by the reading level. Apparently anything over an 8th grade reading level loses points for “readability.” That’s frightening. It’s also reality. More students in college but none of them can read at a college level?

When I was in art school, I had an advertising teacher who spoke of “hot” and “cool” media. “Hot media” is an interaction of the user where the user didn’t have to participate much more than just having to be present to observe. “Cool media” on the other end, is reading. You are fully involved with creating the interaction. We are in the age of “magma media.”

This isn’t to say communication is dead. Use less to sell more, but use more to close that sale. When dealing in a creative brief, contract, or email updates, stay transparent and overly complete ad nauseam. I guess, if I had to end this article quickly, and to give a little gem to those who read on this far, rely on people’s imagination to sell creative points but don’t trust the subtleties of language when you’re communicating your point to someone else.

If you can’t write your idea on the back of my calling card, you don’t have a clear idea. ~ David Belasco

Featured image/thumbnail, reading image via Shutterstock.

Mega Design Bundle from Inventicons – only $30!

Source
Deal of the week: 1,000 images with no backgrounds

Posted:Thu, 06 Mar 2014 19:15:48 GMT

We all use stock images everyday. Whether it’s a business man in a suit, or a girl riding her bike, images enhance the way our designs are perceived.

But have you noticed how often, when the figure in the foreground of an image is perfect, the background is all wrong? Sure, the suited guy is perfect for your design, but the New Mexico backdrop he’s standing in is useless for the Chicago-based client you’re working for.

The only answer is to crack open Photoshop and start masking the image. Even then, after hours of work, you’re left with an image with inconsistent lighting. And the hair, has anyone ever managed to cut out hair properly?

Happily, we have got a solution: our sister-site, MightyDeals.com, has arranged a massive discount of 1000 stock images with transparent backgrounds.

These awesome shots are ready to be layered over the background of your choice. You can position them in any setting you like, or simply add a plain color background that fits your branding. Either way, the result is a professional looking image that appears to be a bespoke shot.

The 1000 stock images covers dozens of scenarios, like business, dancing, shopping, surfing the web, and socializing. So whatever you’re looking for you’ll find something appropriate here.

Every image is saved at 300dpi for maximum flexibility and supplied as a PNG. There’s even a searchable image catalogue to make finding the perfect image a little simpler.

All images are royalty free, and if you’re a theme developer you can purchase a developer’s license to use them in your templates.

The regular retail price of this useful collection is $99, but for a limited time you can get all 1000 stock images for $35, a 65% discount! Head over to MightyDeals to download them now.

Mega Design Bundle from Inventicons – only $30!

Source
21 insightful social media infographics

Posted:Thu, 06 Mar 2014 08:15:27 GMT

In an era of information overload, words by themselves can fall flat.

Infographics do more than present data — they capture the eye and tell a story, engaging the viewer who might otherwise have ignored the content.

When text, images, and creative design come together in one smart package, a sort of visual shorthand is produced. Besides taking complex information and presenting it in a readable way, infographics hold great marketing potential; web traffic is increased and your SEO is benefitted, thanks to the viral nature of this gripping medium coupled with the power of social media.

It’s only appropriate, then, to take a look at some of the more interesting and effective infographics on the topic of social media and networking. From Facebook to Twitter to Instagram, the power of new media has transformed not only our personal lives but also the nature of doing business. Keeping up with the science and the trends is half the battle — luckily, these clever infographics help us do just that. Enjoy!

1) 100 social networking facts & statistics

2) Social media statistics by Huffington Post

3) Social media zoo

4) Social media explained with girl scout cookies

5) Like us!

6) Don’t be a twit: tweet your customers!

7) 20 reasons to switch to Google+

8) Instagram’s facts

9) How users interact on Pinterest

10) Top 10 ways to optimize your business’ YouTube channel

11) The future of marketing: blogging and social media

12) The art of getting retweets

13) Google+ for business

14) The anatomy of a fan

15) LinkedIn bootcamp

16) Email marketing

17) Small business and social media

18) The social media checklist

19) Time spent statistics

20) Social media spending

21) Around the world in social networking

Mega Design Bundle from Inventicons – only $30!

Source
The best way to serve fonts to your website

Posted:Wed, 05 Mar 2014 19:15:00 GMT
Web design came of age the day webfonts entered wide-spread usage. Prior to that point it’s arguable that we were less designers than engineers.

However, the enthusiasm with which we’ve grabbed at font options in web design has lead to a bewildering array of choices; so much so that many designers opt for the path of least resistance, allowing the desire for simple implementation to dictate their typography.

If you know what you’re looking for, all of the options are simple. In this article we’ll arm you with the knowledge you need to make informed decisions when choosing between font technology.

We’re going to illustrate these options by focussing on the best way to deliver an all-time classic typeface, Garamond.

Font stacking

Having extolled the virtues of webfonts, the first option we’ll consider uses no webfonts at all. Font stacking is a CSS technique in which you specify a number of fallbacks starting with your first choice and ending with a catch-all solution.

There are lots of font stacking resources online, but one of my favorites is cssfontstack.com, it’s a great starting point for a font stack, but be aware that more often than not you’ll need to bring some expertise to bear.

According to cssfontstack.com Garamond is available as a system font on 49.91% of Macs and 86.47% of Windows machines. That’s pretty good, but not good enough. Here’s the suggested font stack that covers all bases:
```
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
```
The question is, how can we improve this?

Well, we know that there are numerous versions of Garamond available, so we can add in a variation in the second slot as a minor compromise.

Secondly I disagree that either Baskerville or Times are adequate substitutes for Garamond, so let’s drop them. Hoefler Text works well in place of Garamond, so that can stay. We need to add serif as a final catch-all, but as most systems use Times as their default serif, let’s slot in the far superior Georgia for anyone who’s slipping through the cracks.

Our final modified font stack looks like this:
```
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;
```
The majority of viewers are going to see Garamond, a few others will see a reasonable compromise and a tiny minority will just get their default serif font.

Pros & Cons

Font stacking is free, by far the fastest solution, and depending on your chosen typeface can be very effective; in the case of Garamond there’s a good argument for calling this ‘job done’.

There is however, one major problem with font stacking, especially with a typeface like Garamond: there are so many pirate versions in circulation that it’s impossible to know which font is named “Garamond” on the user’s system, not only can we not be sure the design is consistent with our expectations, the scale of the font may be radically different from the version in our design. (Technically, there’s nothing preventing a copy of Arial being renamed “Garamond”, in which case our font stack would use that.)

Font stacking is therefore a superb back-up, and should be considered for use in conjunction with all of the solutions below, but it’s less than ideal as a primary solution.

Google Fonts

Google Fonts is, for many designers, the point at which they end their search. For a grand total of $0 you can easily load webfonts into your site using CSS.

The only downside is that the number of typefaces on offer is extremely limited. Typefaces such as Roboto and PT Sans owe their popularity as much to their free availability on Google Fonts, as to their design qualities.

Currently, the only variation of Garamond available on Google Fonts is EB Garamond, an attempt to open source the Garamond typeface. But the flaw with this version is that there’s only one weight and style available; there’s no bold or italic. The designer Georg Duffner has generously made his work in progress available on Bitbucket but it’s not production ready.

Pros & Cons

Google Fonts is a great budget solution and ideal for situations where you may be footing the bill rather than your client. Being able to specify your fonts in CSS is as simple as can be.

The big flaw with Google Fonts is that despite their marketing, there’s very little choice. If you’re looking for a webfont of Open Sans then you’re in the right place, but if you want a font like Garamond—which is hardly obscure—it’s a wash-out.

Self-hosting

Self-hosting is a hugely underappreciated approach to webfonts. Its key attraction is the ability to subset fonts, an option so attractive almost all streaming services attempt to emulate it.

If you have a desktop copy of Garamond on your system, open it up and you’ll see a bewildering number of characters. Subsetting a font is the process of deleting non-essential characters resulting in a smaller file size and speedier delivery.

Of course, the characters you require will depend on the site you’re building: if you’re building a tourist guide to Dubrovnik you’ll probably need Serbian Cyrillic characters; if you’re reproducing the collected works of Shakespeare it’s unlikely you’ll need an @ symbol.

In order to subset a font, you’ll need font editing software. There are many options available from the free FontForge to the premium FontLab Studio. To produce a subset version of the font, simply select a glyph you don’t want, and delete it, then save the file into your project folder. (Be careful not to overwrite your original font file!)

The full .ttf file for Adobe Garamond Pro is 606Kb. Stripping it down to basic latin characters and punctuation reduces it to 56Kb. Multiply that across several weights and styles and you’re saving a couple of Mb in downloads for your users.

Self-hosting desktop fonts

Most font files you have installed will be TrueType (.ttf) with a smattering of OpenType (.otf). You can save these to your server and specify them in your CSS.

Support for .ttf and .otf file formats is widespread across all modern browsers except IE (even the latest version) and some mobile browsers (including legacy versions of iOS Safari).

To increase your coverage you’ll need several additional formats. .eot works for IE, .woff will work for most browsers and is the W3C’s preferred format, .svg will work on legacy browsers. There’s a number of web services that will generate these formats for you from your .ttf file, one of the most popular being Font Squirrel’s.

The downside with converting desktop fonts for use online is twofold: firstly, you are almost certainly not licensed to do so; and secondly, desktop fonts are almost always optimized for print, they simply do not render well on screen.

Self-hosting webfonts

Font foundries have finally woken up to the fact that there is a huge market for webfonts. As a result they have not only tightened up their licensing, but they’re working towards optimizing their back-catalogs for screens.

Foundries supplying dedicated webfonts provide all the required formats, quality-checked and ready for upload to your server. What’s more you’re still free to subset a file, and you’re not dependent on a third party server’s uptime.

There are numerous places you can purchase webfonts, two of the key players in the field are FontShop.com and MyFonts.com.

Returning to our Garamond quandary, we can see that MyFonts have a number of different versions of Garamond on offer. We can license Adobe Garamond in several weights, restricted to 250,000 pageviews, for around $180.

FontShop also have a number of webfont versions of Garamond available. URW Garamond Web provides every weight and style we could possibly want, all with a generous 500,000 pageviews per month. What’s more, FontShop have a dedicated subsetter to optimize your shiny new font purchases. Unfortunately you pay a premium for all this, around $680 for the full font family.

Pros and Cons

Self-hosting enables subsetting. It ensures you stay in control of your font delivery, and avoids any kind of dependency on third party servers.

What’s more, if you’re purchasing a professional webfont you can expect the quality to be extremely high.

Self-hosting also appeals to those of us who prefer to “own” our fonts rather than renting them. Of course, in legal terms there’s very little ownership at all, but a one-off fee sits more comfortably that a subscription for many people.

The only downside of self-hosting is the substantial price. Not only will you need to pay for the font, but you may need to factor hosting and bandwidth costs into your figures.

Webfont services

Just like Google Fonts, webfont services deliver fonts to our browsers via simple CSS. Unlike Google Fonts, there’s a huge range to choose from.

There are a number of different vendors to choose from, and I particularly like Hoefler & Frere-Jones’ cloud.typography service. However, as with many smaller vendors, their usefulness is entirely dependent on the availability of the typeface you’re looking for. The closest font Hoefler & Frere-Jones can supply is Hoefler Text, however if we’re paying a premium we shouldn’t need to compromise.

The largest player in webfont streaming is Adobe Typekit. The quality of their fonts is very high, the implementation is simple, and most importantly they have a huge catalogue to choose from.

Typekit provides a range of subscriptions ranging from $24.99 per year for 50,000 views per month, to $99.99 per year for 1,000,000 views per month. However, if you’re a Creative Cloud member the Portfolio Plan is included in your subscription; meaning that for most web designers Typekit is a free solution.

A quick search tells us that there are several versions of Garamond, including Adobe’s own, available on Typekit. And, there is also a very limited subsetting feature that allows us to reduce the file size a little.

Pros and Cons

Webfont streaming services provide a large varierty of excellent quality fonts, that are easy to add to your site.

In the case of Typekit, if you’re already a Creative Cloud member, then free access makes this an even more appealing option. However, if you’re not a member then you’re facing a choice between paying a substantial subscription and tying yourself to Adobe.

My principle concern with any streaming service is that you are entirely dependent on a third party server’s performance. If their server goes down, so does a substantial part of your branding.

Which is the right choice?

As with so many things, the answer is: it depends on your project. But there are some decisions that we can make based on our Garamond test:

Font stacking is a no-cost backup, it provides an on-brand solution if and when font files go missing or streaming services run slow. It should always be implemented on any site, but relying on it, even for something as common as Garamond is potentially hazardous.

If the font you’re looking for is available to stream for free, either via Google Fonts, or for example if you have a Creative Cloud subscription, then this is a good choice. As I have a Creative Cloud subscription I would be tempted down this route, although the lack of real subsetting would be a concern.

If you have the budget, then self-hosting a professional webfont is the best choice. The relatively modest cost—when compared to stock photography—is easily justified by the huge speed boost subsetting delivers.

In an industry where we’re minifying JavaScript files to save a few Kb, shaving hundreds of times that amount from a single file is a no-brainer.

Featured image/thumbnail, download image via Shutterstock.

Mega Design Bundle from Inventicons – only $30!

Source
19 hipster logos redesigned for corporate America

Posted:Wed, 05 Mar 2014 08:15:51 GMT

There’s a trend right now, that wavers between irritating and inspired, for redesigning corporate logos in a hipster style.

Certain that hipsters could take it as well as dish it out, and inspired by the nearly infamous hipster logo generator, recently Whit Hiler and the team at Cornett Integrated Marketing Solutions decided to turn the trend on its head and redesign a collection of hipster (or rather, hipsterish) logos in the spirit of all that is corporate.

I found the hipsterish-to-corporate exercise deeply disturbing, as if this is what hell looks like from inside a descending handbasket, but I couldn’t stop looking. It’s illuminating to see the warmth and character slowly strangled from a company’s logo to be replaced with soulless corporate gradients and sharp edges. It says as much about the popularity of hipster design, as it does big-business branding.

My personal favorite is the Urban Outfitters logo (no change). What’s yours?

Mega Design Bundle from Inventicons – only $30!

Source
How do you portray women on the Web?

Posted:Tue, 04 Mar 2014 08:15:54 GMT

Search for “woman” on virtually any stock photo site and you’ll get plenty of options.

Women in skimpy dresses. Women in bikinis. Half-naked women. Fully naked women posed so that it’s not technically pornography. Women working out in what basically amounts to underwear. Women in wedding dresses. Women indulging themselves in a massage, or chocolate-covered strawberries, or at the salon. You might even come across an image of a princess or two.

Sure, you might find an image of a woman working. But she undoubtedly looks stressed out, at her wits end, and ready to call it quits. To find a stock photo of a woman who actually looks in control at work is equivalent to finding a unicorn in the wild.

Stressed woman image via Shutterstock.

Take a look at stock themes pretty much anywhere online—even a lot designed by women—and you’ll find examples of these kinds of stock photos, if a woman even appears in the photos at all. Of course, there are exceptions, but they’re few and far between when you look at the overall numbers.

Why is this the norm?

Of course, part of the explanation for this may have to do with the abysmal numbers of women in the technology industries. While it’s hard to find concrete numbers, what is available is pretty disheartening.

Pinterest engineer Tracy Chou has created a public Google spreadsheet that details how many female engineers are employed by some leading tech companies. Out of companies with more than 10 employees, only 9 out of the 86 companies listed have more than 25% female engineers. That’s barely over 10%, and barely higher than the number who have no female engineers. Not a single one of those companies has over 35% female engineers.

The world of design isn’t much better. Instead of roundups of the best female web designers out there, we get roundups like this one that instead tell us who the 20 hottest female designers are. Their head shots are given much more prominence than their work. After all, a talented female designer isn’t nearly as valuable as a hot female designer. And the saddest part? That link is the first one that shows up when you search Google for “female web designers”. (FYI, the second link is also about “hot” female designers, though at least that one leaves out the head shots.)

According to some numbers I’ve seen, the ratio of male to female web designers is somewhere along the lines of 3:1. That’s a big disparity. And no one is quite sure why it exists.

The lack of women in the tech industry is obviously one part of the problem, though it’s just one aspect. What might be even more relevant when it comes to the reasoning behind the prevalence of these stock images is one of the oldest sales rules in the book…

Sex sells

We all know that sex sells. Or at least it’s supposed to. So using sexy, provocative imagery in our designs kind of makes sense.

But at the same time, you’re potentially alienating a lot of people. There are a ton of women out there who don’t like to see images that objectify them (no surprise there). There are a growing number of men who are also sick of being bombarded with these images. And honestly, a stock photo of a woman in a bikini should not be necessary when you’re trying to sell a website theme.

I don’t know about you, but all the offices I’ve ever worked in, I’ve never seen any of my colleagues dressed like this:

Business woman image via Shutterstock.

The same goes for these images of women who look entirely stressed out by technology and work life. There are plenty of women out there, myself included, who work with tech on a daily basis, without getting any more stressed out than our male colleagues. So why do we feel the need to show women as unable to cope with these daily demands?

Finally, an alternative

While it’s all well and good to complain about the portrayal of women in stock photography, there wasn’t much we could do about it. We were stuck with what was available. Not many projects have the kind of budget necessary for a photoshoot to get images that better represent women. It’s just not feasible.

Thankfully, there are people and organizations in the industry who recognize this. Getty Images is one such company. They’ve partnered with Lean In to create a collection of more than 2500 powerful images showing women, girls and the people who support them.

These images are fantastic. There are women from all walks of life, from all sorts of professions, doing all sorts of things. But the key here is that all of these women appear perfectly capable. They are not buckling under pressure; they are living their lives and doing their things, and are confident in that position.

Plenty of the images in this collection also include men, in the roles of partner, colleague, father, and more. It is by no means an anti-male collection, and in no way does it show women in a positive light at the expense of men.

There is a huge amount of diversity in the images, with women from around the world featured. There are women of all ages, too. It’s a really wonderful cross-section of what it means to be a woman, and gives designers and others using stock photos a wealth of options. It’s a welcome change to the industry, and hopefully other companies will follow suit.

Mega Design Bundle from Inventicons – only $30!

Source
The best free WordPress plugins for March 2014

Posted:Mon, 03 Mar 2014 08:15:54 GMT

Welcome, friends, to WebdesignerDepot’s monthly WordPress plugin roundup, March 2014 edition.

Every time I write one of these articles, I aim to include plugins that meet a variety of needs. This month however, there is a common thread amongst some (not all) of them: communities. More specifically, some of these plugins would be most useful on WordPress-based community sites. Anyone can use them of course, but they seem better-suited to WordPress sites with large numbers of users.

That said, look through the list. Try them out, have fun, and let us know what you think!

Simple Exclude Categories

Simple Exclude Categories provides additional settings for the Reading section in your settings menu. Simply put, it allows you to exclude entire categories of posts from your home page. There are numerous possible uses, especially if you can’t, or don’t know how to make custom post types.

FTP Sync — theme, media & plugin files

FTP Sync is one of the more interesting plugins on this list for a couple of reasons. First, there’s the functionality itself, which could speed up the process of deploying small changes to WordPress sites. Secondly, you can use the same plugin to create remote backups via FTP. Sadly, SFTP is not yet supported, but that’s coming.

The developer gives this interesting recommendation on the plugin’s WordPress.org page:

For best results, setup your local site’s wp-config.php to use your remote site’s database so you every time you sync your files even the database will match up with everything (since it’s the same database!).

WP Report Post

Remember what I was saying about plugins better suited to communities? WP Report Post is one of them. It adds a simple text link preceded by a small red icon to the header or footer of your post. You can, as an alternative, insert the link manually.

Clicking on that link loads a small form which allows the user to express why they think the post is inappropriate. On the admin side, you’ll see all flagged posts listed much as they appear on the All Posts screen. You’ll have the option to unpublish the post, delete it, or just delete the report.

Youtube Like Rating

Like Youtube’s rating system? You can use Youtube Like Rating to add “thumbs up” and “thumbs down” buttons to each and every post (“Green vs. Red bar” included!). You can allow everyone to vote, or only registered users. You can also enable voting on comments.

WP Product Review

Want to write product review on your blog without creating a custom post type? Once WP Product Review is installed, just make a new regular post. At the bottom of the page, you’ll be asked if this post is a review or not. Selecting “Yes” opens up a whole bunch of extra fields, where you can list things like the product’s features, its pros and cons, add a product image, and so on.

Sender

Another great one for communities, Sender does just that; it allows you to send custom e-mails to all users. It’s a simple plugin, there’s no WYSIWYG editing, just a text field for your message. You can choose to send the e-mail to all users, or just select the ones you want.

You are given the option of sending the e-mails through the Wp-mail function, PHPs default mail function, or the SMTP server of your choice.

WP Notifications Manager

WP Notifications Manager provides a simple interface for disabling the e-mail notifications that WordPress sends out. You can disable/enable the New User e-mails and Password Change e-mails separately. Additionally, you can have these e-mails sent to a different address, if you don’t want it going to the main e-mail.

Launch Check

Launch Check performs a couple of basic yes/no tests to see if you’re still using the default WordPress tagline, if you’ve opened up your site to search engines, and if you’ve installed Google Analytics. If your site fails any of these tests, you’re presented with notifications on the Admin side.

I’d like to see further development to this plugin. For example, if there was a plugin to remind me to change URLs in the content that still include “localhost”…

Contact Form 7: Wysiwyg Field

I don’t normally like just throwing WYSIWYG functionality around, but if you really want to have this option for text areas in your contact forms, it’s there. Just install this plugin, edit your form, and go. (Requires the Contact Form 7.)

Cookieless Comments

WordPress uses cookies to remember things like names, e-mail addresses, and so on for people who comment on your site regularly. If your site is based in the EU, there’s a law that says you have to inform users about the use of tracking cookies on your site.

If you’d rather not bother setting up a notification of some sort, you can use Cookieless Comments to simply disable those cookies. It’s not an ideal solution, perhaps, but it works.

WP Pipes

Now, I’m not a developer, so I have a limited comprehension of how “pipes” work. As I understand it, they are a means of aggregating/pulling information for display elsewhere. With WP Pipes you can add Yahoo-like pipe functionality to your WordPress install.

A quick test reveals that you can use this plugin to pull in posts from RSS feeds, and re-publish them (link your sources, people). You can also select specific categories of posts (and, I assume, custom post types) and publish them in a separate RSS feed.

You can do more, of course, but that’s for brighter minds than mine to figure out.

Inline Comments

Feeling the Medium comments-on-paragraphs jealousy? Feel jealous no more! Register your site with Disqus, and this plugin will give each paragraph in your posts its own comment thread.

Mind you, I do worry a bit. I’ve seen how long Disqus threads can take to load sometimes, and I wonder if using this system for each and every paragraph might be frustratingly slow. Still, I feel like it’s a step in the right direction. Having immediate context for a comment thread is a wonderful thing.

Simply Map Me

Use a lot of Google map embeds on your website? Instead of pasting the full embed code into the Text view of your post every time, just grab Simply Map Me. Once activated, just use type in a location (ie. Toronto, Ontario) and wrap it with the [map] short-code.

Bonus: WordPress Bitcoin

I marked WordPress Bitcoin as a “bonus” because I don’t know enough about Bitcoin to test it properly. Apparently, you can use it to accept Bitcoin payments via your WordPress site.

As a non-developer, I cannot speak to its security, either. Any cryptocurrency enthusiasts out there who want to give this a try?

Have you used any of these plugins? Have we missed one of your favorites? Let us know in the comments.

Featured image/thumbnail, uses news image via Shutterstock.

Mega Design Bundle from Inventicons – only $30!

Source
Our favorite tweets of the week: February 24, 2014 – March 2, 2014

Posted:Sun, 02 Mar 2014 09:25:55 GMT

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

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

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

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

Iconic Brand Packaging Simplified & Abstracted to Dots by Silas Amos http://depot.ly/u5Myj

Warner Bros. Logo Design Evolution http://depot.ly/u4mre

An interesting technique: Building Progressively Enhanced Websites with Backbone + CSS Transforms http://depot.ly/u5MfT /@smashingmag

Some things can’t be wireframed http://depot.ly/u4mmr

Scenes from an Internet http://depot.ly/u4lF9

Screencast: CSS Animation Events Explained! http://depot.ly/u4lAF

Confused About REM and EM? http://depot.ly/tZWAz via @jeremybchurch

What happens when placeholder text doesn’t get replaced http://depot.ly/tZWxu

Abstract Mix of Chemistry and Photography via @fubiz – http://depot.ly/tXgTg

The 9 best browser-based photo editing tools available today http://depot.ly/tXcL7 via @TheNextWeb

“Why I Sketch Every Day” – @tchurch: http://depot.ly/tXbQN

20 Top Photo Manipulation Tutorials via @tutsplus http://depot.ly/tXbCj

John Zeratsky: Understanding Entrepreneurial Design http://depot.ly/tXb1t

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

Get all 20 Fonts in Yellow Design Studio’s Gist Family – only $14!

Source
Comics of the week #224

Posted:Sat, 01 Mar 2014 09:54:02 GMT

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…

Minimalist in design only

Nickels and dimes

Flat designer

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

Bootstrap 3.0. Starter Kit PRO: 35 Responsive Templates – only $9!

Source
Deal of the week: Learn to build a flat responsive website from scratch

Posted:Fri, 28 Feb 2014 16:15:47 GMT

Whoever you are, and however you choose to work, there’s one skill that’s imperative for any web designer and that’s knowing how to build a responsive website. Even designers who outsource their code need to understand exactly how the process works.

With the steady growth of mobile and the practical realities of deploying multiple sites, any web designer that isn’t building responsive websites won’t be a web designer for long.

So we’re delighted that our sister-site, MightyDeals.com, has managed to arrange a huge discount on this fantastic series of instructional videos by 1stWebDesigner.

The step-by-step course will teach you to build a flat, responsive site in 54 lectures totaling over seven hours of content. Learn at your own pace and re-watch the tutorials as often as you like.

This fantastic guide is ideal for beginners and pros alike, beginning with core wireframing concepts you’ll be guided through Photoshop, grid systems, and HTML & CSS. Leaving you with the knowledge to deploy client sites to a full range of devices, from desktop to tablet and smartphone.

I have some basic Photoshop, HTML, and CSS skills but these lectures added so much more. One of the best features of the course is the progression from a wire frame layout to completed webpage – step by step, design to code. I’m looking forward to creating some responsive websites and exploring flat design. Many resources are provided with links to handy tools for developers. It’s also great to be able to download lecture pdfs and video for viewing offline. – Sue Bell

This course fit right in with my current level of web development skills. It taught me a good thought process for tackling the project from start to finish. For me, I prefer to code relatively from scratch rather than use themes or templates (as I find them too restrictive or find them more difficult to learn) and this course teaches you just that. From mind, to paper, to photoshop, to web, seamlessly! I recommend this course to anyone wanting to learn how the pros do it right. – Mathieu Leclerc

I still can’t believe I built my own website. I’ve purchased books and watched videos on how to create websites, since I consider myself a complete beginner. Unfortunately never got anywhere, either because it wasn’t well explained, presented or had outdated lessons. Now, this course I admit, was longer than I expected, but at least by sticking through I can proudly say I have built my own flat responsive website. – Ri Jimmy

This superb course normally retails at $197, but for a short time, you can download all seven and a half hours of content for just $37. That’s an amazing 81% discount! Jump over to MightyDeals to grab this offer today.

Have you taken 1stWebDesigner’s Flat Responsive Web Design course? How much did you learn? Let us know in the comments.

Bootstrap 3.0. Starter Kit PRO: 35 Responsive Templates – only $9!

Source
50 essential freebies for web designers, March 2014

Posted:Fri, 28 Feb 2014 08:15:33 GMT

New projects are being released all the time that make us excited, curious, inspired and sometimes a little bit jealous. Today we continue our monthly series of the very best free resources for web designers with a collection that includes cool scripts, awesome fonts, great ideas, and must-see experiments.

If this collection is anything to go by, March is shaping up to be a fantastic month. Whether you’re a designer, developer, or enthusiast we’re sure you’ll find something here to feed into your next project.

The Amazing Pattern Library

Library with beautiful patterns.

Bebas Neue

Very popular sans serif font family.

CSS loading animation

Colorful dots animation.

Vertical rotating text

Pure CSS experiment for rotating text.

Horse icons

100 icons in SVG and JPG formats.

Uijunction

420 icons for iOS and Android environments.

Assorted textures

10 abstract textures in high resolution.

Adam

All caps serif font for headlines and posters

Rambla alt

Humanist font best suited for medium to long text.

Vector ribbons

Set of flat ribbons in different styles.

Typebase.css

Minimal customizable typography stylesheet.

Ifvisible.js

Nice way to determine if a user is idle or active on a page.

Margot

Font optimized for large sizes, suited to a great variety of projects.

Infinity Wall

Code for a tiled background that loops infinitely.

3D geometric background

Shiny, geometric background in high resolution.

Guarantee labels

Nice set of editable vintage labels.

Aurora font

Font inspired by sci-fi movies and games.

Email template PSD set

Set of 3 clear, well designed templates for email campaigns

jQuery Tocible

Lightweight table of contents.

Grid animations

2 Outstanding animation effects for grid elements.

Blenda Script

Experimental font inspired by Lobster.

iPhone color picker

Code experiment for selecting colors for projects.

Falling

Geometric, futuristic font for headlines and posters.

Smartstart

Nice web project that shows all the info you need on a single page.

Blue circles background

Background design in EPS format for any kind of project.

iOS 7 icons

More than a hundred iOS 7 icons.

CSS parallax

Parallax scrolling effect made in pure CSS.

Brochure template

Template for health and nutrition companies.

Dribbble shot previewer

Useful mockup that will allow you to see a Dribbble preview of your designs.

Chase

Sleek and chic font with plenty of style.

Browsersync

Keep multiple browsers & devices in sync when building websites.

Fit.js

Fit things into other things.

Slidebars

jQuery plugin to implement revealing menus.

Long shadow icons

Set of 40 well crafted flat color icons with a long shadow effect.

Radikal

Flat and colorful newspaper template.

Ribbon Alphabet

CDR vectors set of letters and numbers.

PSD logo pack

Package of 9 logo designs to use in your next project.

Scrollreveal.js

Animations revealed on scrolling.

Simplecart.js

Lightweight, fast and easy to use shopping cart.

Threedify

Code experiment that creates 3D views of webpages.

ExtractCSS

Extracts the CSS classes and styles from HTML documents and outputs them as a stylesheet.

Magic Dust

Nice high resolution abstract background with blur and sparkles effect.

Joint.js

Modern library for interaction with diagrams.

Resume template

Minimal design resume based in 2 grids.

3D hover effect

Effect that turns a simple image into a 3D structure when hovered over.

Bak

Single page, flat corporate template.

Flat UI kit

Clean and light colored interface with more than 80 elements.

Mondrian

Simple vector graphics web app.

Grafana

Feature rich graph editor.

Fabric textures

More than a hundred seamless patterns for backgrounds.

Have you used any of these freebies in a project? Have we missed one of your favorites? Let us know in the comments.

Remove Image Backgrounds with PhotoScissors (Win/Mac) – only $9.97!

Source
Adobe’s new product integration streamlines content across devices

Posted:Thu, 27 Feb 2014 14:15:36 GMT

One of the big challanges for large companies, especially in the digital age, is establishing and maintaining brand consistency. A corporation like Sony for example, wages a daily war to ensure consistent communications across five continents.

Although we often think of publishers to be exclusively involved in news and magazine industries, all corporations typically publish thousands of documents per year; they include websites, microsites, reports (statistical and financial); there are point of sale promotions, internal communications, instruction manuals and legal documents. Increasingly, for reasons both economic and environmental, the emphasis is being placed upon digital delivery and especially mobile delivery.

Today Adobe announced that they’re integrating their Digital Publishing Suite with Adobe Experience Manager, in an effort to capture a larger market share of this growing sector.

DPS and Adobe Experience Manager make it significantly easier for publishers and brands to produce consistent, rich content for customers on mobile and the Web. — Nick Bogaty, head of digital publishing, Adobe

Adobe believe that the integration of the two platforms as part of the Adobe Marketing Cloud, together with the combination of Adobe Analytics will streamline delivery, speeding up production and reducing costs for thousands of digital content publishers worldwide.

Centralizing assets is not a new idea. From the dawn of the Internet, corporations maintained extranets as repositories for multi-Mb PSDs featuring board-authorized stock photography and artwork. Designers would simply access the resources, regionalize it, and publish. Even now, companies use services like Dropbox to host assets available by invitation only. Many large companies, Twitter for example, even host public repositories of key assets such as their logo together with usage instructions, in an attempt to maintain brand integrity.

The difference with Adobe’s approach, is that they are serving the assets directly. Templates are designed allowing content authors to drag and drop assets—from text right up to video—into new editions of publications, from where they can be pushed out in a fraction of the time of the traditional process. Digital Publishing Suite is already being used by the likes of Condé Nast to speed up production, reduce costs and ensure consistency.

Adobe DPS is the go-to solution for publishing our magazine apps on mobile devices. The integration of Adobe Experience Manager not only enables us deliver a consistent Vanity Fair experience on multiple platforms, we have advanced our on-sale date by five days. — Emily Smith, director of operations for corporate editorial, Condé Nast

Initially this may appear to be another attack on the design industry from a large company intent on WYSIWYGing a design process. In reality, it empowers designers by limiting the role of artworker, providing a system that needs to be designed, and reducing the repetitive board-room approval process that plagues in-house teams.

It also strikes a blow for those arguing that a responsive solution isn’t always the best option by enabling native apps, distinct from a core website, to achieve similar levels of consistency.

It’s unlikely that Adobe’s latest move will affect the working lives of most freelancers or small teams, but in-house designers and consultancies that work with global brands can anticipate it playing a big role in the next couple of years.

Are you planning to use Adobe’s DPS in conjunction with AMC? How do you maintain consistency across platforms? Let us know in the comments.

Remove Image Backgrounds with PhotoScissors (Win/Mac) – only $9.97!

Source
The best of DesignFaves.com, February 2014

Posted:Thu, 27 Feb 2014 08:15:39 GMT

For designers passionate about the latest developments across the full spectrum of visual design, there’s a brand new site that features some of the most exciting, innovative and inspiring design projects taking place today. Every day our sister-site, DesignFaves.com, trawls the web seeking out the projects with the most buzz surrounding them and delivers a compact, visual summary right to your inbox.

Focused on all fields of design, you’ll find graphic design, art, architecture, furniture design, fashion, branding, photography, and everything else that’s visual and engaging.

You can sign up for the newsletter and get your daily dose of design inspiration each morning, or browse through the site when you’re feeling tapped for new ideas. Whoever you are, and whatever you love, you’ll find fresh projects on DesignFaves.com.

Every month we’ll be bringing you a summary of the best the site has to offer, here are our favorite projects for February:

Action packed car jumps or weird hovering automobiles?

Solemn chapel is iconic testament to enduring culture

Hypnotic video of an endlessly walking and transforming creature

Family photos with mannequins poke fun at the American dream

Printable touch technology might revolutionize manufacturing

8,000 sheets of rice paper assembled into massive ‘boat’ installation

12 hilarious pictures of dogs transformed into fashion models

Delicate sculptures created through paper folding

‘Sad Keanu Reeves’ meme is now a 3D printed figurine

Simple street art personifies inanimate objects

Miniature clones help this photographer at work

18 classic rock album covers… minus dead band members

Intimate ocean photos give a new perspective on waves

Stitching the industrialization of daily life

Learn about this man’s shocking method to document his travels

Which of these posts is your favorite? What would you like to see DesignFaves.com cover? Let us know in the comments.

Remove Image Backgrounds with PhotoScissors (Win/Mac) – only $9.97!

Source
Free download: Icons8 sports icon pack

Posted:Wed, 26 Feb 2014 16:15:54 GMT

It’s tricky to find a good set of icons, most packs have one or two useful graphics and then a lot of filler. So it’s refreshing to discover an approach like the one used by Icons8; every day they check the most requested icons from their community, design the three most popular and add them to their collection. It’s a great way of ensuring that their icons are relevent to their users.

Icons8 have also generously designed this set of 53 sports icons, exclusively for WebdesignerDepot readers. They come as EPS and SVG vectors, so you can be sure they’ll scale to whatever size you need them to.

Amongst our favourites are the dynamic canoeist digging deep into the water; the anatomy icons, especially the lungs and abs; and the lovingly detailed climbing gear.

Icons8 make a range of different icons, from the popular iOS7 style with over 1200 icons, to the Windows 8 icon pack with over 1600 icons. There’s a new Android icon pack and their brand new app, allowing you to search for icons and drag and drop straight into applications like Photoshop is available now for Mac and Windows.

You can download the files beneath the preview:

Have you used Icons8′s icons in a project? Which of these sports icons works best for you? Let us know in the comments.

Pay with a Tweet

Download now

Please enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.

I agree to receive weekly newsletters from WebdesignerDepot.com. Unsubscribe at any time. Your email will not be sold/rented.

Remove Image Backgrounds with PhotoScissors (Win/Mac) – only $9.97!

Source
Project post-mortems: how to successfully conclude any project

Posted:Wed, 26 Feb 2014 08:15:17 GMT

It’s launched. It’s live. It works.

You designed, built and tested it, grieved nixed ideas and celebrated solved quandaries. The gears are whirring on their axles and your final invoice is paid. Your project is done. Mostly.

Before you move on to the next looming deadline, did you make some time to review the project, and clear your head along with the whiteboard? A post-launch review, or post-launch audit (a.k.a. post-mortem), is hopefully more than just mulling things over in your head, or even with your partner over a beer.

Larger companies that have lost cross-functionality can tragically blow this part by making the post-mortem a frightening blame game. Do a web search for “post-launch review templates” and you’ll get over 7,000,000 results. If that’s your world, make sure you do your own, real and private assessment. It will help you turn experience into craftsmanship, and make your best practices even better. The better templates will help you break the evaluation process into measurable parts, to get specific, and to write stuff down, but here’s a “what and why” overview. The intent here is to ensure a positive and productive post-mortem.

1) What went wrong?

And how can you do it differently next time? Beyond, “Right. Never work with that jerk again,” it’s more valuable to get as specific as you can. If the client turned out to be a pain, consider what clues about their character you can learn to recognize next time. For example, you may now be more on the alert when a new client balks loudly at the price. It could be a warning that this project will cost you (in revisions, stress, disappointing results, etc.) more than it actually earns.

That may be too nightmarish an example. Maybe it’s easier to look at strategies to address that other age-old problem: preventing expensive last minute changes.

On the other hand, if you’re not happy with how you yourself handled some part of the project, again, identify the specifics so that you can give yourself a chance to handle things differently next time. Learn what events trigger irrational behavior and decisions, or pick a tech skill demand that turned out to be over your head: plan to take it to the next level.

2) What went right?

Name a few things that worked great, and figure out why. In detail. Specifics are important here, too. “The site looks fabulous because I’m awesome,” can be broken down into, “I’m super proud of how even the smallest details on the home page strengthen the brand. This happened because we spent more time getting to know the history of the client’s business, and got excited about their future vision.”

For some, the “what went right” step is a tempting one to gloss over, but it’s just as important as step #1. Force yourself to come up with five things that worked, even if you only go into detail about one or two.

3) Organize and archive your creative assets

With the next project breathing down your neck, this is another item that can be forgotten, or rushed. Put away those last-minute assets that fell to the wayside as the deadline loomed and things went nuts. Was there some nice artwork you created that got dropped, or can be reused? File it with your royalty free resources, or wherever you’ll be able to find it when you need it. Toss or file any printouts you had pinned to the wall for reference while the project was in full swing. Place purchased and licensed photos, fonts, etc. in clearly marked folders with licensing info. Backup the completed project.

4) Update your portfolio

Prepare and upload your best work. Include peripheral materials as well as page layouts. If your architecture for this project was a thing of beauty, give it some polish, add a note about its history, and let rest of the world appreciate it, too. If the going was rough, this step ties in nicely with #2. For example, although the whole project seemed like a waste of time, remember that set of nice icons you created? Post those.

5) Make sure you are in the loop for ongoing analytics

Even if you’re a freelancer, it’s in your best interests to stay informed about the status of the website you worked on. Access to reports will help you improve future work and encourage a longer-term relationship with your client. It sets up an ongoing conversation, making it more likely they’ll come back to you for revisions, or for the next project. Besides, you might like to know if features that seemed snazzy right up to launch are driving users crazy. It’s not pleasant to get news like that, but it’s even less pleasant to keep making the same mistakes. Having actual numbers is also an excellent way to demonstrate measurable results, particularly for a redesign… which, by the way, also means you should have analytics in place and running before you start the project, so you can measure change.

6) Documentation

If this wasn’t built into the project process, then do what you can to find the time to do it now. This is essentially, but often not only, a style guide. What you are doing is leaving “tracks”, either for yourself should you be asked to handle revisions, or for newcomers, to help them recognize patterns, stylesheet rules, etc. Within the corporate world, if no post-launch documentation processes are in place, do what you can to convince management to give you the chunk of time you need. If you’re independant, it’s up to you to make this a priority. Hopefully, you included post-launch documentation in your project estimate.

Knowing what went right, what went wrong, and what you plan to do differently has become a much more fluid art for projects that are created to live on the ever-changing web. That’s another reason to make sure you establish and continue evolving your approach to the Project Post-mortem. Besides, we have a tendancy to hold on to the bad stuff, letting it turn into worry, weighing us down, while we discount the good (gender note: studies show that women professionals tend to do this even more). With a conscious process, we can harvest valuable lessons from the entire project, reverse that negative trend, and make great work greater.

How do you round off a project? What final steps are essential? Let us know your thoughts in the comments.

100 Premium Infographics from Ingimage – only $18!

Source
How to create horizontal scrolling using display:table-cell

Posted:Tue, 25 Feb 2014 08:15:14 GMT
Horizontal layouts of all kinds have intrigued me ever since I found out you could do that. I don’t know exactly why I’m fascinated with them… maybe it’s just my inner rebel talking. Whatever the reason, I’m just about ready to declare vertical scrolling obsolete, passé, and soooo last millennium.

Okay, that’s not really what I mean. Still, with the sudden increase in the amount of touch screens lying around, it becomes more difficult to assert that “up and down” are our best options. “Right and left” have become viable directions for content placement, as long as you’re not dealing with substantial volumes of text.

I never bothered to really build any horizontal layouts, though. The technical problems and limitations always seemed to outweigh any stylistic or navigational benefits there might be. That was before, however; and this is now…

I came across the technique described in this article the way I usually come across things: by trying to do something else entirely. I was attempting (you can laugh) to create a CSS grid framework based on display: table-cell (okay, stop laughing now).

Well, for reasons that now seem obvious, it didn’t work. You try making a responsive image grid with the table-cell property. Go ahead, I’ll wait.

Simply put, table cells are designed to form a single, horizontal row. (I said stop laughing!) That’s what they do, and they don’t like it when you try to make them do anything else. I gave up on that project. A few weeks later, though, I was considering redesigning my portfolio again.

I thought it would be nice to put all of my projects on one page. I considered several organizational solutions for displaying my web, writing, and photography projects, and came up with this: I want to display these three categories as horizontally scrolling rows of thumbnails.

That’s when it hit me: “Table cells would be perfect for that. Also, you can vertically center things inside them! I’m so smart it hurts!” [Some dramatization here.]

I haven’t gone and redesigned my site yet, instead, I coded up the two examples of my technique that are in the .zip file linked to at the bottom of this article.

Making it work

So, to give you a visual, here’s a demo I’ve worked up.

Here’s how each row is marked up:
```
<div class="horizontal">
 <div class="table">
 <article>
 <h3>Project Title</h3>
 </article>
 
 </div>
</div>
```
From there, the CSS required to make it work is simple enough:
```
// This container element gives us the scrollbars we want.
div.horizontal {
    width: 100%;
    height: 400px;
    overflow: auto;
}

// table-layout: fixed does a lot of the magic, here. It makes sure that the "table cells" retain the pixel dimensions you want.
.table {
    display: table;
    table-layout: fixed;
    width: 100%;
}

// Arranging your content inside the "cells" is as simple as using the vertical-align and text-align properties. Floats work, too.
article {
    width: 400px;
    height: 400px;
    display: table-cell;
    background: #e3e3e3;
    vertical-align: middle;
    text-align: center;
}

// Some styling for contrast.
article:nth-child(2n+2)
{
    background: #d1d1d1;
}
```
Some horizontal layout techniques require the container element (div.horizontal, in this case) to have a defined pixel width equal to the combined width of the elements it contains. Other techniques require display: inline-block; I’m not a fan of this technique. With table-cell, just keep adding elements whenever you need to, and you’re good to go — it’s perfect for use with a CMS.

Making it full-screen

Okay, the other kind of horizontal layout is the full-screen horizontal layout. Creating this with the table-cell property requires some JavaScript. I used jQuery to speed things up. The JS requirement might make this technique more situationally useful, but it’s still cool.

Here’s a working demo.

The markup is similar:
```
<div class="horizontal">
    <div class="table">
        <section>
            <h1>Full-Screen Horizontal Layouts</h1>
            <p>Made with <code>display: table-cell;</code></p>
            <p>By Ezequiel Bruni</p>
        </section>
        
    </div>
</div>
```
Here, however, it’s just one “row” that’s been made to fit the size of the browser window. Each <section> has, in this case, also been made to fit the browser window.

Here’s the CSS:
```
// Don't touch this part. It helps.
html, body {
 width: 100%;
 height: 100%;
 overflow: hidden;
}

// In this case, I didn't want a scrollbar, so I used overflow: hidden. The container element is more essential than ever, though. The body element will not do.
div.horizontal {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: static;
}

.table {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

.table > section {
    width: 1600px; // The width is based on my monitor. It's replaced by jQuery anyway. Percentage widths do not work.
    height: 100%;
    display: table-cell;
    background: #e3e3e3;
    vertical-align: middle;
    text-align: center;
}
```
As stated above, percentage widths do not work. Pixel widths are required. If you want to make each section fit your window dimensions, you’ll need to do it with JavaScript:
```
$(window).load(function() {
    var vWidth = $(window).width();
    var vHeight = $(window).height();
    $('.table > section').css('width', vWidth).css('height', vHeight);
});

$(window).resize(function() {
    var vWidth = $(window).width();
    var vHeight = $(window).height();
    $('.table > section').css('width', vWidth).css('height', vHeight);
});
```
You’ll notice that I also added the height. Well, that’s for Firefox. Firefox doesn’t play nice with percentage heights on the table-cell elements (incidentally, Firefox also throws a hissy fit if you make cells relatively positioned, and place absolutely positioned elements inside them).

Well, that’s my technique for horizontally placing content. You can download the source files here.

Have you designed a horizontal site? Have you used a different technique for horizontal scrolling? Let us know in the comments.

Featured image/thumbnail, sideways image via Shutterstock.

100 Premium Infographics from Ingimage – only $18!

Source
The ultimate guide to logo design

Posted:Mon, 24 Feb 2014 08:15:30 GMT
There are some companies out there that would have you believe that designing a logo is as simple as slapping together some type and a shape or two. But there is so much more to designing a good logo than just that, regardless of what some may say.

A lot goes into a great logo design. While a logo seems like just a little thing to create, it represents an entire company or brand, and must convey identity, values, and more. You can’t think of it as just a “little” design job. It can be the most important design a company has, and one that guides future design and branding decisions. With this guide you’ll learn all the steps necessary for creating a fantastic logo for your own project or a potential client’s.

What makes a good logo?

A good logo is powerful. Whether it includes imagery or only type, a good logo has a certain power to it that makes it stand out.

On that note, a good logo is unique. It won’t be confused with logos for other companies, particularly a business’s competitors.

Along the same lines, a good logo is recognizable. It can become associated with a specific business quickly and easily.

A good logo is timeless, too. It should stand up and still look current 10, 20, or even 50 years down the road. That’s a lot easier said than done.

A good logo also re-inforces your brand. It should convey the appropriate mood, tone, and feeling for your business. Whether you choose to make your logo literally represent your business type is up to you, as there are advantages and disadvantages to each approach. But in either case, it needs to support your brand.

A really good logo also conveys the core message of your company. It relays the qualities, skills, and values that your company believes in.

Types of logos

There are three main types of logos: there are logotypes, which are typography-based logos; there are literal logos, where the imagery used directly ties to the type of business (such as a dress for a clothing store); and abstract logos, where the logo imagery isn’t obviously linked to the type of business and may be based more on a feeling or mood.

Logotypes

Logotypes are very common, and often include a distinctive twist or adaptation on an existing typeface or font. Logotypes can be particularly useful for diversified companies who are involved in more than one business (such as GE or DuPont).

The Sky Production logo is a great example of a logotype that ties imagery into the lettering. The “S” is made from cloud shapes, while the side borders look like the edges of film. It’s a great example of pushing the boundaries of what a logotype can be.

The simple triangle shapes that stand in for the A’s in the SiO Athletica logo are bold and modern, and can be repeated throughout signage and other branding materials whenever an A appears, reinforcing the brand. Consider similar treatments when creating your own logos.

While this doesn’t instantly strike one as a logotype, the shape of the logo is actually created by four B characters. It’s creative and memorable, without being complicated.

The Cube logo is simple and straightforward, with a single line turning a square into a stylized letter C.

The Folkdeer logo incorporates antlers into the typography, blurring the line between a logotype and a logo with literal imagery.

Literal imagery

Literal logos are also very common, and can instantly lend meaning to a company’s name, if it’s not abundantly clear. Local and small businesses, in particular, seem to be particularly fond of this type of logo. This may be in part because these logos are easily recognizable and leave little open to interpretation (though some do make clever use of double meanings and hidden imagery).

A bike chain is a very literal image for a bike shop or other bike-related business, as shown in this logo for The Ride.

The Herschel Supply Co Winter Club Collection logo is another great example of literal imagery, this time in the form of mountains and trees.

This Meatlovers Gourmet Burger & Cie logo with a sandwich in the shape of a heart is literal while remaining minimalist and modern. It shows that even logos with literal imagery can be fun and unexpected.

The Greenly logo uses leaves in their logo, which makes perfect sense for an eco-friendly company.

The rocking chair in the Brooklyn & Co logo makes perfect sense for a furniture company.

The Plumbline Media logo almost looks abstract, until you see that it’s simply a book (representing media) with a simple plumbline in the spine.

Abstract imagery

Abstract logos are also very useful for diversified businesses, as they convey mood and tone much more than specific business type. A logo doesn’t have to directly convey what a business does. Consider the Nike Swoosh, McDonald’s Golden Arches, or the Apple logo.

This Ease logo is a good example of an abstract image that conveys the appropriate mood.

The logo for Austariff, which is an Australian solar feed-in incentive, is reminiscent of the sun, while also incorporating a leaf shape (which makes sense for the renewable energy industry). The shape is used in interesting ways throughout their branding materials.

The Stylish Eve logo is based on the form of an apple, but taken to an abstract end. It’s a good example of taking something associated with a name (the name Eve has strong associations with apples) and stylizing it to create an evocative logo.

The Warped Vision logo uses abstract shapes that are reminiscent of a few things, and doesn’t give any real indication of what the company does.

The Futural logo is completely abstract, and yet gives a sense of modernity and the future, making it an excellent choice based on the company’s name.

Research, research, research

The first step in designing a great logo for your client is to get a good design brief. Your client should give you background information on their business, including any previous logos they’ve used. It’s important for you to gather information beyond what your client provides though, both directly from them and on your own.

Ask your client specific questions to get clarification on anything you’re not 100% sure of in the brief. It’s better to ask questions and be clear on what your client expects and needs in the beginning, rather than spend countless hours on revisions down the road, or risk losing the client because they feel you didn’t listen to them (even if they were the ones who were unclear).

You’ll need to research your audience. Who is the logo going to be seen by? In other words, who are your client’s customers? You’ll also want to know where the logo is going to be used, and in what formats. This is important, as it can determine limitations on your designs, such as the necessity of the logo to work well in black and white (in case your client still uses newspaper advertising or the like).

How much is too much?

A lot of designers who have never designed logos before are probably wondering how much research they really need to do. At what point do you know too much about your client’s business? How much research is really necessary just to design a logo?

The answer to that is that you really can’t be too well-informed about your client when it comes to creating a logo. This is a major component to their brand, and their face to the world. Think about how recognizable some logos have become. No one needs to see the word “Nike” associated with their swoosh logo; they immediately recognize the swoosh and associate it with the brand. When you see the Starbucks mermaid, you know what company it represents. When you see an apple with a bite taken out of it, you know it’s Apple.

Do you think the designers behind those logos thought they could just wing it based on nothing more than what’s contained in the company’s brochure or about page? Granted, sometimes a great logo can be created without a ton of back story from the company. But additional information in those cases almost certainly would not have hurt the process.

Spend the time to get to know the company you’re designing for. Understand their values. Understand their position in the market. Understand how their customers view them. If it’s a new business, then understand how they want their customers to view them, and where they want to be positioned in the market.

While it’s certainly possible to design a logo based on nothing more than a two or three paragraph design brief, you’ll produce better work if you take the time to delve deeper than that. Set aside an appropriate amount of time to research and plan your logo design process, and you’ll see better results and have happier clients.

Inspiration

Once you’ve done all the research you can manage and know your client’s business inside and out, it’s time to look for some inspiration. Sure, in some rare cases you might come up with the perfect idea for the logo while still in the research stage, but in all likelihood, you won’t. You’ll need to go looking for some inspiration and ideas elsewhere.

When looking for logos to pull ideas from, look for logos from both similar companies and entirely different ones. Spend some time looking through inspiration galleries, logo roundups on blogs, and even just searching for logos in Google Images.

While you’re looking at all these logos, resist the urge to imitate any of the ones you see. Imitation may be the sincerest form of flattery, but you’re not doing yourself or your clients any kind of favor by imitating another company’s logo.

Remember what I said about a good logo being unique? It’s an important quality to remember as you’re looking at the work of others. The idea here is to find ideas that you can use to inspire your own original design. Not ideas you can tweak but effectively copy.

When looking at these logos for inspiration, consider the different types of logos and which seem to be most prevalent in your client’s industry. Are most of the logos abstract? Literal? Typographic?

Just because 80% of the companies in an industry have literal logos doesn’t mean that your client has to. But it’s important to think about whether breaking with the established standard fits with the client’s values. If they’re a very traditional company, then sticking with what’s already been established might be wise. Then again, if they’re trying to break in as a different option, or if they’re trailblazers, then consider deviating from the established path.

Logo inspiration resources

There are tons of great galleries online for finding inspiration for your logo designs. Here are ten of our favorites:

Logos on Creattica

Logopond

Logofaves.com

Logosauce

LogoMoose

LogoGala

Logospire

LogoLounge

Logo of the Day

Logoed

In addition to galleries, there are plenty of logo roundups out there to provide additional inspiration. And of course we’re surrounded by logos in our everyday lives, on products, in advertising, online, and more.

Sketching initial designs

By now, you should be fully immersed in the brand. You should know them as well as you know your own business. This allows you to more easily create appropriate sketches for the initial designs.

Consider creating a matrix of possible design options, based on the different kinds of logos and the different symbology that might be appropriate for your client. For example, you may create a series of logotype ideas, a series of ideas based on pictograms tied to the company name, and a series of ideas tied to the industry in which they work. Creating quick sketches of these in a matrix format allows you to see them all at a glance, and may let you see ways to combine different ideas in interesting new ways.

One thing to keep in mind, right from the start, is that you should keep all of your sketches. What may seem like a bad idea on your first round of initial sketches might be the start of something brilliant later on. If you’ve tossed out your early sketches, thinking they were garbage, you might not be able to recapture the ideas later.

This is also the part of the process where you may be tasked with choosing a typeface for the logo and any accompanying slogans. Consider creating an entirely original type treatment for the logo, rather than using an existing font if you want to create something absolutely unique.

If designing completely original type isn’t within the scope of the project, then consider making changes and customizations to an existing typeface. This can be a great way to get a custom look without investing the time and resources necessary for a completely original type design.

In some cases your client may already have an established typeface, and whether you can deviate from that or not will depend on the particular project. If you do opt to deviate from it, be wary of what the reaction from the company or their clients might be.

In these cases, making adjustments to the existing typeface being used can be an excellent solution. It can keep any established attachment to the existing logo or company identity, while still presenting something new and updated.

It’s important to think about any double meanings or hidden meanings or imagery that might appear within a logo. These can be a clever way to make your logo very memorable and recognizable. Consider logos with dual meanings or hidden imagery. Here’s an example of a great “hidden” second image in a logo:

While you may choose to purposely include (or not include) secondary imagery and meanings in your logo designs, you need to be aware of potential hidden meanings, words, or images. It’s completely possible for words to escape our notice during the design process, only to be discovered by the client or the client’s customers after the logo has been made public. These negative aspects can be amusing at best, or a real PR nightmare for your client at worst.

The negative space created by your logo design can be used to create secondary imagery, too, or to further simplify the main imagery in your design. Consider how the negative space can be used to better define your logo or to further reinforce your client’s image and values in the design. Look at how negative space is used in the logo below to spell out the word “one” while also using the numeric character:

One common pitfall for designers is the use of passive imagery over active imagery. For example, a designer may choose to use an image of a bear in their logo. The designer’s first instinct may be to just use a silhouette of a bear’s head. This is passive imagery; it’s just sitting there. By contrast, a silhouette of a bear doing something (such as catching a fish from a stream or standing on its hind legs) is active, and is more striking and memorable. It gives the sense that the company the logo represents is doing things, rather than just sitting there. Look at how dynamic and interesting the running fox is in the logo below:

Don’t be afraid to experiment in your sketches. Try the unexpected. Try the crazy idea that you’re sure won’t work but can’t stop thinking about. This is the time in the design process to humor every idea you have. Sure, you might set aside most of them, but you may stumble upon a great idea during the process. And one bad idea might lead you into a good idea, or even a great idea. So take the time during this initial sketching phase to play around and experiment.

Paper vs. screen

When you’re sketching your designs, you may be wondering if it’s better to sketch on paper or with your computer or tablet.

While it’s really up to you as a designer which one you’re more comfortable working with, you may find that sketching on paper is more efficient to start with. You’re also less likely to erase and change things when working on paper.

The other benefit to paper is that it creates a disconnect that tells your brain that this is not the final work, and that it’s okay to be messy and work quickly. Since most of us are used to polishing our designs on a computer and creating finished projects, we can have perfectionist tendencies when working on a screen versus working on paper.

Of course, if you feel you work more efficiently sketching on screen with a graphics tablet, then by all means do so. A nice in-between can be working in a drawing app on your tablet. The benefit here is that it’s more streamlined to import your sketches into your graphics program of choice when you start on the refinement process.

Reflection and refinement

Once you have a bunch of sketches, you may want to immediately dive into perfecting one or more of them to show your client. Or, alternatively, you may find that you’re completely overwhelmed by how many ideas you’ve come up with, and have no idea which one(s) to move forward with.

This is why it’s so important to take some time away from your designs and reflect on them. If you can take a couple of days to think and step back, that’s great. If not, try to at least sleep on your designs so you can approach them with fresh eyes. And if even that’s not possible (and it might not be if it’s a rush job or there are other time constraints), then at least go get a cup of coffee, have lunch, or take a walk.

Time allows you to distance yourself from your designs. You’ll be less likely to choose your “favorite”, or the one that took the most time, or the one that “just came to you” if you have this space. Instead, you’ll be able to more easily look objectively at the logo sketches and see which one makes the most sense for your client, regardless of your own personal attachments.

Once you’re back at your computer and looking at your sketches, you’ll need to consider a few things before deciding which logo concepts are most appropriate to move forward with and present to your client or other decision makers.

First of all, make sure that you’re aware of pertinent cultural differences. So many businesses are now global in scope that it’s vital that they understand the potential symbology and meaning their logo might carry in other countries and cultures they do business with. Even purely local businesses need to be aware of these things, especially if there is a large immigrant population or ethnic group in their community.

For example, in many countries a “thumbs up” is considered a positive symbol, and that everything is okay. But in Sardinia, Greece, and some Islamic countries, it’s a rude sexual sign. In other words, don’t try to present a thumbs-up symbol in a logo for a Greek restaurant.

Once you’ve narrowed down which logo sketches you want to move forward with, it’s time to make some refinements. The point of the sketching process was just to get your ideas in their roughest form onto paper (or pixels).

Make sure the logo concepts you choose work on dark and light backgrounds equally well. You never know where your logo design will end up, and changes down the road to the company’s website or other branding materials shouldn’t make the logo obsolete. Logos should transcend other brand design changes for the most part, unless an entire re-branding effort is undertaken (and even then sometimes the logo will persist). That means your logo needs to be as flexible as you can make it.

Your logo should be as simple as possible. Keep simplifying and removing elements until you’re left with the minimum to get your message across. In fact, one useful strategy here is to keep removing things until the message is lost, then add back until it becomes clear again. In many cases, simplicity equals a certain timeless quality that will survive trends and fluctuations in what’s popular from one year to the next.

When creating your initial sketches, you may not have taken into account the company’s slogan or other phrases that might commonly be used adjacent to the logo. But it’s important that your logo and slogan work well both together and separately. Try out different ways of combining the two, and different ways of styling each so that they work well in either situation.

The colors you use in the design can have a huge bearing on how the final logo design is perceived. You may be working with a strict established color palette that the client furnishes, or you may be free to use whatever colors you like. In all likelihood, the client will at least provide input on the color families they would like the logo to use (or that it must use).

In either of the last two cases, you need to carefully consider how using different tones of a color can impact the final perception. For example, using bright saturated colors is going to give a very different impression than using muted tones or pastels. When a logo design isn’t quite working for you and you can’t put your finger on why, consider tweaking the color palette first to see if that fixes the problem.

Color palettes should be among the last steps in the logo design process. Make sure that your designs can function in monochrome as well as color for the most versatility.

You should also make refinements to the typeface you’ve either chosen or designed specifically for this logo. Small adjustments to typography, like changing line weights, eliminating certain aspects of individual characters or elements, or similar changes can have a profound effect on the overall design, and turn it from good to great.

Choosing a logo

At this point, you probably have two or three logos in something close to a final state. In all likelihood, you’ll want to present these to your client or other decision makers for a final decision on which logo will be used.

But, just because you have three designs doesn’t mean you have to immediately present all three. Instead, you may choose to present just one logo at first, and see how your client reacts. This can be a particularly useful tactic if your client has been unfocused throughout the design process, and you worry they may be unhappy with whatever you present. Getting feedback on one design so that you can then either make adjustments to that design or know which of your other designs is most likely to please the client can be a good strategy.

Plus, giving your client too many choices may make it harder for them to make a decision. Or worse, they may ask you to scrap all three and do a fourth (and a fifth, and a sixth). After all, if you were able to design three logos so easily, then surely it’s not a big deal for you to design a few more.

Make sure you have a well formed opinion about each logo, and why it’s a good fit for your client. The best clients will ask for your guidance on which logo is truly the best fit for them, and being able to give them thoughtful insight into why each one works reinforces your expertise as a designer.

You may also want to consider presenting the logo in context so your client can better visualize how it will look in practice. Mock up the client’s website, business cards, or other materials with the new logo. It’s a big help to clients, who may not be able to easily visualize an end result like you can as a designer.

In the end, it’s up to your client to choose which logo they think will best fit their company. And to request any changes or adjustments, per your design contract.

What to do with the final design

Once the final design has been chosen, you need to create the deliverables for your client. Make sure your design is responsive and looks good at both large and small sizes. Your logo design is likely to be used on screen in a variety of sizes, as well as possibly used in print (which means assets at a minimum of 300dpi will be required). Of course, you’ve designed the logo in a vector graphics program and have the vector files, but you should also provide your client other, more user-friendly file types that they can use. Be sure you take the time for proper hinting in your non-vector files, so that they appear cleaner and more polished. When you pull a vector file into Photoshop or another raster graphics program, you’ll end up with all sorts of pixelation around the edges of your design, which should be removed for the cleanest end result.

You should also create a style guide for the final logo design and associated branding to show what adaptations are and are not acceptable. Create a list of dos and don’ts for how to use the logo, including whether it’s okay to do things like outline it or place it in a box. For some great inspiration on how to compose a design style guide, check out 10 Magically Meticulous Design Style Guides from Creative Bloq.

Some words on typography

Here are some great tips for better using typography in your logo designs.
1. Don’t use a typeface that’s already used in an iconic logo. Of course, there are exceptions to this rule, such as typefaces that are used in a lot of iconic logos (like Helvetica).
2. Make sure your typeface matches the tone of the brand. Serious brand = serious typeface. Traditional brand = traditional typeface. Modern brand = modern typeface. You get the picture.
3. Be wary of “trendy” fonts. What’s trendy today is dated tomorrow.
4. Likewise, avoid gimmicky fonts. There are tons of free decorative fonts out there, and it can be tempting to use them. In a word: don’t. For one, they’re probably already being used in crappy logos the world over. Second, most of them aren’t designed all that well (there’s a reason they’re free).
5. Make adaptations to existing typefaces in your designs. Add a curve, change the aspect ratio, remove some elements, or whatever else you need to do to make it your own and make it better fit your client’s brand.
6. Look at how other logos are using typography. While you shouldn’t steal ideas from other designers, looking at how another designer approaches a specific design challenge is smart. Take the strategies that make sense in the context of your project and adapt them to suit your specific needs.
7. Avoid using multiple fonts. It’s best to stick to one, two if you absolutely have to. Anything more than that and you’re taking a huge risk that is unlikely to pay off except in the most exceptional circumstances.
8. Experiment with things like kerning, letter spacing, and line height in your logo design, and see how merging letterforms can add interest and make your logo stand out. Here’s a great example of how positioning characters along two different planes can add interest and a sense of whimsy to your logo:
What clients (should) look for

Now that you know what goes into a good logo, you might wonder what a potential client, who needs a new logo, will be looking for in a designer (or at least what they should be looking for).

Do you have proven experience? And happy past clients? Those are both key. Testimonials can go a long way toward giving your potential client peace-of-mind in choosing to work with you. It’s all about social approval and validation. Other things that give clients some reassurance are things like design awards you may have won or work you’ve had published. Don’t be shy about including these things in your portfolio.

Your timeframe and price are also going to be big factors in whether a potential client chooses to work with you over your competition. While being the lowest-priced designer isn’t doing you or your client any favors, being the highest-priced means you better have the skills and credentials to back it up. Because honestly, if it comes down to you and another designer, and your potential client is fine with the quality of your work and the other designer’s work, it’s almost certainly going to come down to price and turnaround. Make sure you’re providing appropriate value for the cost.

How you communicate and your level of professionalism is also key. Make sure that you respond promptly to any communication from your client, and that you present yourself in a professional way at all times. It doesn’t matter if this is your first paid logo project or your ten thousandth, as far as your client is concerned, how you interact with them is the only thing that matters.

Logo design case studies

Looking at case studies that spell out exactly how a logo was designed can be a great help to new logo designers. It gives you clearer insight into how these steps apply in the real world. Here are a few to check out:

Logo Design Process for Just Creative Design’s Award Winning Logo covers how the logo for this iconic company was created, with handy images along the way.

Dache: Logo Design Process covers how famous Swiss logo designer David Pache, of Dache, goes about creating a logo.

This Logo Design Process and Walkthrough for Vivid Ways from Spoon Graphics shows how they created this colorful logo, including client feedback.

This post on the Duoh! blog, Logo Design for Social Signal, details the process for creating this logo, from the design brief on.

Check out Just Creative’s process for the A-List Blogging Bootcamps Identity Design, including how they got the job in the first place.

The Bounty Bev Logo Design Process gives a quick rundown of how Centresource created a fantastic logo in just a week.

Logo Process – Apple & Eve [nude] Identity Development is a fascinating look at what was a very challening and potentially disastrous logo design.

Logo Design Process for FITUCCI is another great case study from JUST Creative.

Creating a Rockstar Brand, Logo & Styleguide in Illustrator is a more tutorialized look at the creation of a logo and associated branding materials for Rockable Press, from VectorTuts+.

This Mentaway Logo Design Case Study from Abduzeedo shows how the Mentaway logo was designed, from initial inspiration and conception to the final design.

Resources and tools

While many designers are likely going to want to break out Adobe Illustrator or another vector graphics program to create their logos, you might be wondering whether there are any free apps or other tools out there for creating logos. The good news is that there are plenty; the bad news is that not all of them create great (or even good) results. But on that note, here are some of the better logo apps online.

Graphic Springs makes it simple to create a logo in just five steps. They offer a fairly extensive collection of stock images to choose from.

Squarespace Logo is a new tool from the popular website provider. It’s a decidedly more modern and streamlined design tool than most of the others here.

DesignMantic offers a large selection if images you can incorporate into your logo design. Just enter your company name and they’ll generate a number of mockups you can customize, or sort the designs by industry.

LogoGenie lets you create a logo in just three steps: pick your industry and icon, choose your font, add effects, and you’re done.

Logaster is an easy to use logo design app. Just enter your business name and type, choose your logo concept, edit it, and download your final design.

LogoYes makes it fast and easy to create logos, with a ton of stock images to choose from.

LogoMaker is a simple and fast logo creator. You can get up to 6 gif files for free, or pay for high resultion files.

Conclusion

The creation of a logo may seem like a very straightforward proposition to the novice designer, but creating a truly exceptional logo, one that can stand the test of time, is a much more involved process. It’s key to take the time necessary to properly create a logo, whether it’s for yourself or a client.

Not doing so can result in creating a poorly-designed logo that doesn’t properly represent the brand and doesn’t present a positive image to the public. It’s damaging to your reputation, and will quickly lead to a loss of clients.

Following the advice above will help you avoid that, and help you create excellent logos that will bolster your reputation and improve your clients’ businesses.

Do you design logos professionally? What advice would you offer prospective logo designers? Let us know in the comments.

eBook: Kyle Bragger’s On Building Community Products – only $5!

Source
Our favorite tweets of the week: February 17, 2014 – February 23, 2014

Posted:Sun, 23 Feb 2014 09:41:09 GMT

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

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

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

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

Daniel Sax created The Gap Typography series, inspired by Ira Glass, and this is the result: http://depot.ly/tMdeO

CSS Vertical Centering http://depot.ly/tMbHf

This: 54.000 people playing Pokemon using IRC http://depot.ly/tMcDY via @marcofolio

Just because professional designers can use responsive design frameworks, should they? http://depot.ly/tMcqB via @smashingmag

3 Solutions for Supporting Internet Explorer from @davidwalshblog – http://depot.ly/tMbsL

How SVG Line Animation Works http://depot.ly/tMb6F via @Real_CSS_Tricks

Ink: A simple Photoshop documentor plugin http://depot.ly/tMaYM

So, why is the mouse cursor slightly tilted and not straight? http://depot.ly/tMaNq #UX

DEWEY: Better bookmarks for Google Chrome http://depot.ly/tMaIH

A New Car UI: How touch screen controls in cars should work http://depot.ly/tM9gG

The 10 laws of Photoshop etiquette http://depot.ly/tJVMt via @CreativeBloq

Polish your skills with this tutorial: Create Lathed 3D Objects in Photoshop CS6 Extended http://depot.ly/tJWLS via @tutsplus

Great idea: The keyboard made especially for Photoshop users http://depot.ly/tJSGu

Avoid a design disaster with Mockup Everything’s over 150 realistic mockup templates: http://depot.ly/tJKeo

Stunning illustrations for Codex Seraphinianus: the most mysterious and weird book ever http://depot.ly/tJS2J

The Differences Between Programmers and Coders http://depot.ly/tHAvr

2014 – the year of parallax? http://depot.ly/tHAoQ

Useful Learning Resources For Web Designers http://depot.ly/tHwYs via @smashingmag

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

eBook: Kyle Bragger’s On Building Community Products – only $5!

Source
Comics of the week #223

Posted:Sat, 22 Feb 2014 09:44:12 GMT

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…

Outdated database

All in One page

Jack Daniels’ influence

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

eBook: Kyle Bragger’s On Building Community Products – only $5!

Source
Nothing left to say? The decline and fall of blog comments

Posted:Fri, 21 Feb 2014 08:15:45 GMT

It’s fair to say that blogs like this one have experienced a dip in comments of late. Social media shares remain high, emails still bulge in our inboxes, subscribers continue to sign up for newsletters, but the comment section of individual articles is conspicuously bare.

As a general trend, Twitter mentions tend to outweigh comments by 100 to 1, which leads one to ask: “Do we really need comments at all?”

There was a time when email was fun; back when you set up your first Hotmail account, and received your first mail. Then, about two minutes later, our inboxes were flooded with spam. What happened when sorting through the dross in our inboxes became too time-consuming? We turned to social networks for our messaging, and the same process is now being applied to blog comments; where once we posted a thoughtful response, now we tweet a short quip.

Who’s that trip-trapping across my blog?

Ask anyone involved in a moderately successful blog and they’ll tell you their number one problem: Without moderation our comment sections are unreadable; we don’t delete comments that disagree with us—most bloggers see disagreement and debate as very healthy—we don’t even remove factually inaccurate comments, all we do is delete the staggering amount of spam that is fired at us on a daily basis.

I’m one of several members of staff who moderate comments for WebdesignerDepot and I spend around an entire working week, each year, managing comments. This is the principle argument used by bloggers to turn off comments on their sites. However, it’s an argument that misses the point entirely. If the amount of spam delivered to your blog is rendering comments unviable, then your problem isn’t comments, it’s spam.

Whilst spam is infuriating for bloggers, it’s laboriously removed and doesn’t affect the volume of comments being posted because commenters rarely see it. What does negatively affect comments is trolling.

A recent study by Canadian psychologists has confirmed that trolls tend to be narcissistic, machiavellian, sadistic and psychopathic. Whilst it’s gratifying to find academics confirming exactly what we all suspected, it’s no comfort to the thousands of people who are abused everyday via the largely anonymous medium of blog comments.

As your mother probably told you: “If you ignore them, they’ll go away.” Unfortunately it seems for many people, the only way not to feed trolls is not to comment at all.

Micro-comments

When comments are enabled on a blog, the blog owner, or editorial team have the responsibility for curating everyone’s opinion. Social media on the other hand is self-curating.

The edge that social media has over blog comments—apart from the ability to block trolls and spammers—is kudos. Whether it’s your follower count, your friends, or your plus ones; engaging with a blog via social media increases your perceived value to the community.

To comment on a blog is to enhance the blog, to tweet about a blog is to enhance yourself. Social media enables us to generate our own micro-comments; we get the credit for our time and our ideas.

The deal is not one-sided of course. Blogs may lose a lot of valuable content that would once have graced their comment sections, but in its place they receive tens of thousands of personal endorsements. Google, Facebook, StumbleUpon, Twitter, et al may have built the APIs but it’s site owners that rushed to integrate them.

Social media is a great liberator, it provides individuals with the opportunity to be tribal, the chance to tell the world what they think. Commenting on a blog is like wearing a political T-shirt beneath a sweater: very few people will ever know where you stand.

A comment by any other name would smell as sweet

We love reading comments from readers, we really do. Even when a comment points out a typo, or a technical mistake, that connection with an audience is why writers write. A blog, at its heart, isn’t a magazine; it’s a community. There are thousands of books and video tutorials available on web design, but the value of this blog—in fact any blog—is that it’s a two-way conversation. If we lose that conversation, we lose the essence of what makes the blog worthwhile.

This is why, whilst approaches to comments are changing, and methods of implementing them differ, comments are still integral to most blogs. Medium, for example, famously doesn’t use comments; they have notes instead, which are simply comments posted to the side of the article instead of the bottom.

There is also a rise in the number of casual bloggers. Taking a cue from the self-interest of social media there is a growing trend for people to maintain blogs purely for the purpose of responding to other blogs. The responses are more considered, the SEO benefits for both parties are obvious, and the commenter retains control of their ideas.

The future of blog comments is almost certainly intimately entwined with social media. In place of a comments section you’ll start to see a whole timeline of embedded tweets, with one user replying to another in chains of ideas conducted elsewhere, and simply reproduced on the blog concerned.

The challenge then, for anyone who runs a blog, is not to address the decline of comments; but rather, to engage with their audience via new comments channels.

If a tree falls in the forest…

The logic of turning off comments permanently, and taking all audience-engagement onto social media has undeniable benefits; from easy spam and troll management, to reader motivation, it’s the way the online landscape is shifting.

However, one thought keeps returning to me: That is, that an article with no comments is one individual’s ideas; when comments are introduced the ideas become truly public domain. Sure, you can tweet WebdesignerDepot, or even me personally, but the immediacy of Twitter is also an impermanence. When comments are attached to an article, it creates a repository for the ideas to be recorded and to grow.

If social media commoditizes individuals, then comments commoditize ideas. If we value the community over individuals, we won’t make the leap to social media just yet.

Do you comment on blogs or prefer social media? Should WebdesignerDepot remove its comments section? Let us know your thoughts in the comments (or on social media).

Featured image/thumbnail, ghost town image via Shutterstock.

Supernett Family: 6 Hand-Drawn, Sans-Serif Fonts – only $14!

Source
Deal of the week: Learn to use WordPress in 1 hour

Posted:Thu, 20 Feb 2014 19:15:28 GMT

WordPress is a Web phenomenon. It powers a gazillion blogs and almost as many websites. As a technology, it’s unique in that the learning curve isn’t too steep, but there is a vast amount to learn and understand.

What that means is that web designers need to understand WordPress, and almost as importantly, they need to be able to explain it to their clients.

The best way to get ahead in this game, is to find the right teacher. That’s why we’re delighted that our sister-site, MightyDeals.com, has arranged this tremendous discount on a set of video tutorials that will get you up to speed on WordPress in just 1 hour!

Whether you’re turning down freelance work because the clients always ask for WordPress, or if you’re looking to move into CMS-backed web design, perhaps you’re even thinking of starting your own blog; the WP101 video tutorial series will teach you everything you need to know in the time it takes to watch your favourite TV show.

This 28-part series has helped 15,000 people master the fundamentals of WordPress. Learn at your own speed by playing and pausing whereever you need to, you can even rewatch videos to nail the trickier concepts. Displayed on an HTML5 video player you can watch the videos anywhere; at your desk, or even on your commute. There’s even an exclusive members-only forum, so if you hit on something that just isn’t sticking in your head, you can get help.

The price you pay includes free updates, so unlike many of the video series out there, when WordPress is updated—which happens a lot—key videos will be updated too.

“WP101 is a hugely valuable educational tool for our users. Shawn is an absolute pleasure to work with and constantly going beyond the call of duty!” — Mark Forrester, Co-Founder of WooThemes

“The WP101 videos have become a key part of our support for new users especially. There is never a day that goes by I do not send one or more customers right to the videos.” — Grant Griffiths, Co-Founder of Headway Themes

“In terms of presentation, WP101 is by far the best site for impeccable WordPress video training. The quality of these videos is really top notch, and Shawn Hesketh, the author, has really created something of high quality here. This is a highly recommended training resource!” — Jean Galea, Founder of WP Mayor

“In my quest for quality ‘how to’ videos, I stumbled upon WP101 and couldn’t be happier. As a former teacher, I can attest these videos are spot on in their timing, scope and sequencing. Broken down into manageable units, the content is expertly delivered and simple to digest. I plan to point my WordPress clients to this site.” — Melissa Bruneau, Graphic & Web Designer

“Shawn’s video tutorial style is exemplary. Unlike some other WordPress video tutorial makers I know, Shawn does not shoot from the hip. His presentations are polished and precise. When you think about the time and care taken to make these tutorials, the decision to pay a few dollars doesn’t get much easier than this!” — Mark McLaren, Online Marketing Consultant

“I’ve spent years looking for a site that actually lives up to its promise of being for new WordPress users. New WordPress users want to know how to create posts and pages, upload media, and what the difference is between categories and tags. WP101 is the only site I’ve ever found that addresses those requirements.” — Chris Howard, three4one design

The regular price of this video series is $79, but for a limited time you can get lifetime membership for just $19, that’s an incredible 76% discount!

Jump over to MightyDeals.com right now to grab this offer today.

Have you used Shawn Hesketh’s WordPress 101 video series? Why do you want to learn WordPress? Let us know in the comments.

Learn to Build a Flat Responsive Website from Scratch – only $37!

Source