Pages

Subscribe:

Ads 468x60px

Labels

Labels

Unordered List

Ordered List

Sunday, 28 June 2015

Popular design news of the week: June 22, 2015 – June 28, 2015

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

WhatsApp for Desktop – Beautiful Mac, Windows & Linux Desktop Client for WhatsApp

 

Trendy Web Color Palettes and Material Design Color Schemes & Tools

 

The Grid – Beta Rollout has Begun

 

Google has Quietly Launched a GitHub Competitor

 

McDonald’s New Takeout Bag Looks Exactly like One a College Student Designed 2 Years Ago

 

How Apple Could Modernise iMessage

 

Checklist of Skills and Tools Every Designer Should Learn

 

Apple Rumored to Be Working on a Crazy iPhone Design

 

Why your Website Continues to Disappoint

 

How to Make a Prototype in 3 Days

 

Amazon Echo is Available to Everyone Today

 

Why We Moved Our Company Blog to Medium

 

Twitter’s Biggest UX Problem: Who the Hell is it Designed For?

 

How Beats Tricks You into Thinking it Makes a Premium Product

 

Samsung Attaches Screen to Semi-truck to Show the Road Ahead

 

Gmail Formally Adds ‘Undo Send’ Option

 

The Best Brand Reactions to the Historic Gay Marriage Decision

 

2016’s Presidential Hopefuls Rebranded as Black Metal Bands

 

Google Maps: Yosemite Street View

 

Instagram: The all New Search and Explore

 

NASA Astronaut Uses Earth’s Glow to Light his Space Selfies

 

Woah, Man, Google Made a Computer Program that Makes Trippy Art

 

Google’s Street View Takes Armchair Climbers up El Capitan

 

How They Made True Detective’s Opening Credits so Eerie

 

Tumblr TV – your Endless Gif Channel

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

LAST DAY: Get Photo Creative with 30 Textured Geometric Masks – only $12!


Source

si pide pass es: Cameron Chapman

Saturday, 27 June 2015

Comics of the week #293

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…

I report, you decide

You know the drill

 

The destination isn’t worth the journey

 

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

350+ Watercolors and Paint Splats Design Kit – only $12!


Source

si pide pass es: Jerry King

Friday, 26 June 2015

How to design for multiple languages

The Internet isn’t all in English. I mean, I know this. You know this. But unless you actually have to stop and think about building a website in more than one language, you might not look closely at the issue.

And there are a few issues to consider. The basics are easy enough, as logical exercises, but it’s always the details that drive you mad. You have to step outside your cultural context and into someone else’s for a while. Think about how the change in language will affect every aspect of your design. Make sure every string of text on the site gets translated. Consider the usability implications. Research the devices your site will be viewed on in different parts of the world. Don’t forget any text in the images!

“See? It’s easy!”, he said, pouring himself his fifth cup of coffee that night.

Okay, it’s not that bad, but you are in for a long haul. I contend that accommodating content for two languages is three times the work as it is for for one. It may get a little easier after the second language, but not by much.

Before you start designing

Research the languages you’ll be including. If all you’re including is European-style languages, then you’re in luck! Most of them share a pretty similar alphabet, are written in the same format (left-to-right), and they’ll always take up the same amount of space!

Okay, that last one was an outright lie born of wishful thinking. It’s called “text swell”, among other things. A concept that might only take a couple of words and a small number of characters to express in English might take a heck of a lot more in another language. English may not be the most concise language out there, but it is one of the contenders. Spanish words tend to be longer than English words, and German words are much longer.

Then there are languages like Arabic, which not only use an entirely separate alphabet, but are written right-to-left. It might seem backwards to you (See what I did, there?), but people who grew up reading this way will also scan/navigate the page right to left.

That is all to say nothing of vertical text. Proper support for the languages which are written in vertical formats is a relatively new thing outside of (and I’m not kidding) Internet Explorer. (Yup, IE did something right, and did it first, in version 5.5.)

Firefox, Chrome, and Opera seem to have caught up with support for CSS3s writing-mode property, which allows you to switch between those horizontal and vertical orientations. Failing that, you can use the transform property as a fallback for older versions.

Best practices

So much of what constitutes “good design” in the case of multilingual sites will depend entirely on the site and the languages in question. Besides that, there are a few things I can recommend to make your users’ experience less complicated:

1) Let the user choose

For one, let me actually pick my language. It sounds obvious; but I’ve been to websites that would literally refuse to let me go to the English version just because I don’t live in an English-speaking location. They insisted on redirecting me to the Spanish version every time, even if I edited the URL manually. Let’s put that another way: the website directly inhibited my attempts to buy something from them by making me do it in a language other than my native tongue. This is how websites lose money.

2) Language choice isn’t an afterthought

Secondly, make the language picker easy to find. Half the multi-lingual site I go to stuck all of the language options at the bottom. That’s great if you know what you’re looking for. It’s less great for more inexperienced users. I suggest a one-time language picking option on a first visit to your site, and then a picker at the top of the page as well as one at the bottom.

3) Be consistent with all communication

Oh, and any and all e-mails sent after customers sign up should be in their language of choice. Again, obvious, right? Apparently not.

4) Match up information architectures

Fourthly, and this is a big one, if I’m in the middle of a site’s hierarchy, and I change the language, I should go to the equivalent page in a new language. example.com/en/products/coffeeflavor1 should turn into example.com/es/products/coffeeflavor1, and not example.com/es/.

(Note: On one occasion, I was redirected because they didn’t actually have a particular product available in my country. That sort of redirect merits an explanation to the user.)

5) Use professional translation

Lastly, don’t trust automatic translator services. Ever. Get it translated right, or not at all. Good content in other languages is expensive, but getting it wrong will cost you a lot more money.

Tools

So you wanna develop a multilingual site? I haven’t convinced you that it’s a horrible idea? Good.

Most of the larger CMSs have a multilingual system in place already. Many large sites are built on custom systems in any case. For the average designer/developer, the easiest way is probably WordPress with some plugins.

My favorite solution so far has to be using a multi-site installation and connecting the different “sites” as alternate versions. This provides the most power and flexibility, I think. Plugins that operate this way include: Multilingual Press, Multisite Language Switcher, and Zanto WP Translation.

Other WordPress based solutions include: WPML which takes a more classic approach, you write a post or page, define some extra languages for it, and it stores those translations as extra posts, those “extra posts” will be attached to the first, and show up in its place when the language is switched; or Polylang, and xili-language both of which operate similarly to WPML, but come with their own sets of features.

Some of these plugins will come with tools and built-in functions to help you translate any content that isn’t directly handled by WordPress. (I’m talking about text that might be hard-coded into your theme for one reason or another.) Others won’t. Take that into account as you pick your plugin.

Then get yourself another coffee. You’ll need it.

 

Featured image, translation image via Shutterstock.

Save $20 on SwatchMate Cube!


Source

si pide pass es: Ezequiel Bruni

Thursday, 25 June 2015

Free download: Chalk vector elements

All the time freelance web designers spend in coffee shops was bound to rub off sooner or later; whether it’s the hipster style aesthetic, or the dramatic scale they allow us to work on, everybody loves chalk art on blackboards.

Lettering experts have been incorporating this style in their work for a couple of years, and now you can too, absolutely free of charge.

This exclusive free download for WebdesignerDepot readers has been designed by vectoropenstock.com. It includes 100+ chalk designs, featuring badges, ribbons and labels, coffee and bakery emblems, love emblems, inspirational badges, and infographic elements.

The files are supplied as vectors (.ai) so you can resize them however you please without losing quality. What’s more they’re free for personal and commercial use.

Download after the preview:

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.



LAST DAY: Create Stunning Effects with Amberlight – only $9!


Source

si pide pass es: WebdesignerDepot Staff

Wednesday, 24 June 2015

Responsive design is failing mobile UX

It’s no longer enough to simply make sure your web content fits on a small screen. Google reinforced this precedent by updating its algorithm to emphasize the importance of carefully planned and well-executed responsive designs on mobile phones.

And it makes sense: Your viewers don’t need all the functionality of a desktop on a mobile device. In fact, they may want to remove some content and functionality when they’re on a smaller screen. After all, nobody wants to sort through pages of content just to find your company’s phone number. That’s the missing building block in a lot of companies’ web design foundations: true adaptivity.

Simply jamming your site into a version that fits on a mobile device is not enough. You need to take a close look at the complete user experience and how it should be changed to adapt to the different environments in which it’s being viewed.

The problem with responsive design

57% of mobile device users won’t recommend businesses with poor mobile site designs, and 48% say that businesses with mobile sites that don’t function properly have the appearance of not caring.

There are several problem areas that most companies run into with their responsive websites:

Image placement

Past design processes have dictated that the client approves static images and screenshots before the development phase. Today, design is more focused on the rearrangement of elements for different device dimensions and much less focused on the placement of static images.

Screen squeeze

Showcasing data on a small screen often makes it difficult to see or read content, especially tables of information. The W3C actually encourages brands to choose a method other than tables and tabs to present data; complicated user interfaces simply contain too much information for mobile devices to handle.

Perspective shift

Above all, the problem with responsive design is simply a matter of the customers’ perspectives vs. the companies’ perspectives. Unfortunately, most businesses tend to ask themselves what they want to tell their customers rather than how their customers want to view and interact with that information.

For example, while registration workflows are generally the most important aspect of web design, they’re often a low priority. That’s because businesses think more about the functionality they want customers to see than the logical point of entry and primary workflow the customers are looking for.

Simply put, responsive design isn’t the ultimate solution for giving users what they need from a website; it still leaves much to be desired.

Update responsive or upgrade to adaptive?

When it comes to web design, the key conversation brands need to have boils down to the concept of responsive vs. adaptive websites.

The responsive approach takes the current site and fits it to varying screen sizes, while the adaptive approach actually changes content and how it functions based on the screen size.

Responsive web design assumes that your content and functionality should be the same across all devices — but that’s not necessarily true

I generally advocate for more of an adaptive web design method, as opposed to simply stacking content, for one important reason: Responsive web design assumes that your content and functionality should be the same across all devices — but that’s not necessarily true. The key is to match the nature of the content with the use-case and the context in which users are looking at your website.

For example, let’s say you’re designing a responsive site for a brand in the consumer packaged goods or consumer gift industries. The promotions and offers pages for these types of sites generally receive the most online traffic. People rarely look at product details, but when they do, a great way to highlight those details is to show how they compare to other items. With that in mind, you should put product visualization and educational content on product pages so you can help consumers understand how to use and engage with your product.

For the consumer packaged goods industry, you want to get to know your customers and determine whether they’re pre-, in-, or post-store. You’ll need to create a different experience depending on where the customer is in the path to purchase.

Here’s a short breakdown of each path:

  1. Pre-store: People who are pre-store are probably going to get to the site through social media or an ad, and they’ll probably be looking for coupons, offers, or recipes (in the case of food).
  2. In-store: Once they’re in-store, they’re probably looking for coupons, reviews, or price comparisons with other sellers.
  3. Post-store: When they’re post-store, they’re probably looking for branded content.

Knowing where customers are in the path to purchase allows you to design the site in a way that meets these needs and more.

Adaptive design enables the customer to have a customized experience…based on the device he or she is using

Above all, you must put yourself in your customers’ shoes. For example, I shop at Trader Joe’s every week. It would be nice if I could plan out my meals in advance from my laptop and connect that plan to my shopping experience. In other words, I could tell the site what I would like to make for breakfast, lunch, or dinner. The site would then tell me all the products I would need to make those meals and create a mapped-out list for me so I would know which aisles to hit when I got to the store. All I would have to do is pull out my phone.

Adaptive design enables the customer to have a customized experience, such as this, based on the device he or she is using.

Optimize the customer experience by tailoring the design and information to the device. For example, if your customer is looking you up on a smartphone, make your phone number prominent and interactive so he or she can easily call. Is the consumer on a laptop? Perhaps it’s more important to present product information upfront. Figure out what it is that your customer needs based on the device being used, and deliver that experience.

You need to look at your site from users’ perspectives — no matter which device they’re experiencing it on. If your customers pull out their phones to look up your business, you’d better be ready to help them find what they need with the best possible design and functionality. If you don’t make it simple and seamless, they’ll just take their business somewhere else.

 

Featured image, mobile UX image via Shutterstock.

Fetching: Supercharge your Browser History – only $19!


Source

si pide pass es: Kevin Rice

Tuesday, 23 June 2015

What is a full-stack designer, and should you be one?

Being able to quickly and efficiently one-line our skills and the focus of our professional life has a lot of value. The title that we use can effectively tell others what we do, and where our career is heading. Despite this importance, titles are something many of us have trouble with.

designers who understand code, produce more realistic mockups

It’s definitely hard to find a title that clearly explains our skills and limitations as a professional. Understanding the full-stack terminology isn’t only beneficial to help give ourselves a title though. It’s also immensely valuable to become that team member who can step in at any phase of a project to help out. Or just to use the skills in planning ahead of what our main job focus may be (It’s common knowledge that designers who understand code, produce more realistic mockups). So, how do we get started?

What is a full-stack designer?

In the “old” days, it was fairly straightforward. There was very clear separation between the design and development groups, with very few people doing both. Now though, it’s fairly uncommon to find a web designer that doesn’t also do some sort of development or UX work as well. With many of us branching into more skills within our industry, we’re becoming increasingly more resourceful. The problem is that now a “web designer” could mean someone who only does design, does design and some code, or may even handle the full design to development process! We’ve become an industry of renaissance workers not content with learning just what we need to get by, and that’s a great thing.

“web designer” could mean someone who only does design, does design and some code, or may even handle the full design to development process!

Enter the full-stack designer. Being full-stack simply refers to someone who is cross-disciplinary. In this case, it’s referring to an individual who has the skills to carry a project through the first few major project phases. Full-stack developers have been around for years now, handling everything from front-end dev, back-end dev, back-end server management, and more.

I know what you’re thinking: “Great, another marketing phrase is just what this industry needs!” But I can assure you this one is sticking around, and it has more value than a hip moniker. Take a look at a large selection of job openings and you’ll undoubtedly find many “Product Designer” and “Full-Stack Designer” listings.

Fringe benefits of being full-stack

The benefits of expanding our skill sets are quite nice. Full-stack designers often end up with a more thorough understanding of their work, making it more consistent from research to production phases. Knowing the limitations and what to expect in development, while planning UX/UI wireframes, can keep concepts realistic. So not only are full-stack designers more knowledgeable about what can and cannot work elegantly in design, but they also have more realistic expectations before we even start pushing pixels or coding.

Having an expansive skill set is exceedingly beneficial to the people who employ us as well! Our employers are afforded a team member who can jump in and help even outside their area of focus. This means keeping teams lean and diversified with less people, and everyone having more of a grasp of the whole-picture.

There are countless good qualities about having such an expansive skill set, but the most important being you just learn more. Even having a basic foundation in development or another skill can increase the likelihood of learning more in that area. With that small nugget of knowledge already in place, pursuing further education is made easier as the content is already slightly more relatable. So next time you see that article about the skill you’ve been meaning to learn for ages, just go for it. You don’t have to be an expert by the end of it, you just have to remember enough to make next time easier.

The pitfalls of expansive skill sets

It’s taken us quite a while to even get where we are today in terms of education. Being able to instantly look something up and “accidentally” spend the next four hours learning about it is the fantastic future we live in. But, when you have dozens of technologies, practices, and skills to keep up to date, that process can easily result in a long “to-read” list. With so much to keep up with, it’s easy to simply not have enough time. That doesn’t mean we lose lose the skill altogether, it merely means that skill isn’t one of our highlights, so to speak. It’s very common that someone could be an expert with CSS/HTML, yet only have a basic working knowledge of JavaScript.

It’s not only hard to keep up with everything, but it’s also hard to pinpoint which technologies to invest our time with as well. With the industry growing at such a fast rate, there’s a new language, library, and use pattern by the end of each day. Anyone remember the days of jQuery vs MooTools vs JavaScript debates? Pinpointing which skills to learn, and which are merely passing fads can easily make or break a time investment.

Employers aren’t exempt from these pitfalls either. Being a much more skilled team member typically comes along with a higher salary. While most full-stack designers won’t cost the same as multiple designers and developers, they certainly cost a premium to be just as skillful.

Why are full-stack designers important?

Becoming a full-stack anything is special in and of itself. It’s investing quite a lot of time and effort into oneself professionally, most often outside the workplace. So what makes full-stack designers so important? Primarily, it’s the skills in their spectrum. Typically, designers are the ones organizing research, creating wireframes, checking out UX patterns, organizing UI design, and generally making sure we aren’t ending up with stunningly beautiful websites and apps that simply don’t have a purpose.

Being more than just a cog in the machine is what being full-stack is all about

Being more than just a cog in the machine is what being full-stack is all about. When it comes to design, that means defining what a project’s purpose and goals are in the planning phases while also keeping design and development limitations and goals in mind. Someone who can thoroughly manage and understand a project from its conception all the way to its first steps into development makes for a much more consistent experience. Some of the best websites, apps, and even products you’ve used were likely created or overseen by a manager with such a vast skill set to ensure such high quality.

The making of a renaissance worker

Expanding our skills and knowledge to become full-stack can be invaluable on a team, and an absolute necessity as a lone freelancer. With quality education becoming exceptionally easy to find, it’s become an enjoyable experience to learn more these days. The hard part it seems, comes with understanding which skills we should learn. Each person’s skill set is unique, and that’s what makes everyone uniquely valuable.

A few years ago, for example, having a hobbyist’s interest in social media almost instantly became an exceptionally valuable asset when the social media boom took off. Companies and agencies were looking left and right for people to help them manage their presence on such platforms. So how do we maximize our value by choosing the right skills?

The best way to pursue education is to always ask yourself what would make you more valuable at what you already do. For most designers, that means learning to code or pursuing a deeper understanding of the science and psychology behind UX design. But for other designers, the answer may mean focusing on print and branding design. It’s really hard to say which particular languages, assets, and skills are critical to have, especially in an industry as fast paced and diverse as ours. If you’re still stumped, take a look at job openings in positions you would enjoy filling. See what they’re requiring and, more importantly hoping for, in a candidate.

Conclusion

Titles are important, there’s no doubt about it. But only because they represent (albeit, poorly) the skills we possess. When it comes down to it, investing the time to further ourselves professionally by expanding those skills only benefits everyone involved. Continued education has always been a part of our fast paced industry, so let’s use that to our advantage and become the best full-stack workers out there.

 

Featured image, multi-task image via Shutterstock.

Marigold: Bundle of 8 Fabulous, Hand-drawn Fonts from Laura Worthington


Source

si pide pass es: Dustin Cartwright

Monday, 22 June 2015

60+ best free fonts, Summer 2015

2015 continues to be a fantastic year for fonts. Type designers are increasingly prolific and there’s a new design for every possible project, often completely free, or with a free option or weight.

There are a couple of dominant trends for Summer: The first trend is a revived interest in ethnic and folk art styles, like the colorful approach of Tripel Six, or the charming Quirko; the second trend is a move away from the geometric sans-serifs that we’ve seen recently, towards more humanist sans-serifs, like Qontra.

Today, we’ve compiled a list of the best free fonts that have been released, or received a major update, in the last three months. You’ll find whole families, treatments, display fonts, body fonts, and 1 or 2 oddballs. Browse through what’s available, try them out, and if you use them in a project, let us know!

 

Ailerons

 

Yeah Papa

 

Tripel Six

 

Gidole

 

Unna

 

Etna

 

Phelix Boomgartner

 

Glass Beads

 

Gone Typeface

 

Qontra

 

Hazer Typeface

 

Sensei

 

Prosto Sans Bold

 

Archivo Narrow

 

Geom

 

Reef

 

Fakedes

 

Grünwald

 

Ovalo

 

Brixton Line

 

Hamster Script

 

Ikaros

 

Order

 

Belladona

 

Brig

 

Rollerblade

 

El Capitan

 

Yarin

 

Lombok

 

Phage

 

Houston

 

Jazzball

 

Zike

 

Bomb

 

Ranger

 

Hero

 

Diana Sans

 

Barry

 

Badhead

 

Quirko

 

Layered Type

 

Blackberg

 

Shihan

 

Spumante

 

Ohitika

 

Royals

 

Charming

 

Metropolis

 

Ablax

 

Endless Neon Tube

 

Reverb

 

Helena

 

Fancy No Name

 

Cyn Forgiven

 

Eiga

 

Quip

 

Burst

 

Sen

 

Shiro

 

Vampyri

 

BSRU Bansomdej

 

Shumi

 

Fuerte



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


Source

si pide pass es: Paddi MacDonnell