Bruce and I were talking about product roadmaps, which describe features the team commits to ship over the next few releases. For most organizations, everything revolves around the roadmap.

Marketing uses the roadmap to plan the stories they’ll tell to entice new customers (and get existing ones to upgrade). Customer support uses it to ensure reps are trained to help with new features. And, of course, product development uses it to allocate resources and to speed future development.

It was while we were discussing roadmaps that Bruce shattered my world with a single word: Themes. Themes are an alternative for features. Instead of promising to build a specific feature, the team commits to solving a specific customer problem.

Apple products are described as minimalistic, but ‘minimalistic’ shouldn’t be confused with ’simple.’ There’s nothing simple about the surfacing efforts on their hardware products. It’s not something the average Apple product owner is likely to be aware of unless pointed out by their Industrial Designer friend.
A ‘secret’ of Apple’s physical products is that they avoid tangency (where a radius meets a line at a single point) and craft their surfaces with what’s called curvature continuity. Once you know how to spot it on products, you’re likely to start seeing it (or more likely the lack of it) all around you.
The spotter’s guide to good surfacing.
Here are two products that are basic rectangular boxes with a rounded edge (the one on the left also has some unpleasant drafted walls, but that’s another article about how to become a hardware design snob). Look at the beginning and end of that rounded edge on the main surface. See how there’s a sharp shift in highlight? That’s the result of tangency.

Diverse UI is a free set of user images that can be used in personal or commercial projects.

We built Diverse UI because who we assume our users are, and how we represent that in our visuals, affects who those users turn out to be. We want those users to be diverse. For more information, we wrote a blog post about why we think diversity in UI mockups is important.

There are a lot of fantastic resources out there. When it comes to the technical how-to, most of what’s out there was written by Rachel Andrew. If you don’t know her work, take some time to get to know her and follow her.

So here are the links to resources I recommend. I will keep updating this list:

Susan Kare’s original artwork for the Windows 3.0 Solitaire game is featured on our new set of playing cards. The release of these cards coincides with the 25th anniversary of the original Solitaire computer game. This deck includes two jokers, designed by Kare exclusively for the Areaware release.

Now that we’ve established the three criteria for evaluating an icon’s effectiveness, let’s see how the hamburger icon stacks up (if you’ll pardon the pun):
Representation: It depends. Is it representing a stacked list of menu items? If so, good. If not, reconsider.
Usage: it depends. Is it being used as an excuse to throw literally all your navigation behind it? If so, reconsider. Prioritise. Decide what needs to be visible, and what can be tucked away.
Clarity: it depends. Is the icon labelled? If so, good. If not, less good.
So there you go. The answer to the question “Is the hamburger icon good or bad?” is a resounding and clear “It depends.”

Erik Spiekermann has forgotten more things than most successful and creative people know in their lifetime. Now in his sixties (68), the German-born designer and typography guru remains as excited about the future as ever.

Erik Spiekermann is one of the most well-known and creative thinkers in design. A type, information and graphic designer by trade, he began his career teaching at the London College of Printing in the 1970s. In 1979, Spiekermann co-founded MetaDesign in Berlin, and in the 1980s, at the cusp of the PC revolution, he co-founded FontShop, a distributor of electronic fonts. He has designed fonts such as Berliner Grotesk, ITC Officina, Nokia Sans and FF Meta. He is also the co-founder of design house Edenspiekermann. He divides his time between Berlin and the Bay Area.

Welcome to the third annual edition of the ten most popular web fonts of the year as featured on Typewolf. Based on font usage data from 365 websites featured over 2015, these are the ten fonts that were used the most often. You can check out the previous year’s lists for 2014 and 2013 as well.

While reviewing the data for this year, I noticed something a little disconcerting: this year’s top ten list is almost identical to the top ten list from 2014. Other than swapping out Franklin Gothic with Brown, these are exactly the same ten fonts that were featured the most on Typewolf last year.

I curate all the sites featured on Typewolf – so I may be partially to blame for this – however, the sites I feature tend to be a solid representation of what is popular in the design community. About one-third of the sites featured are submissions that people send to me while the remaining two-thirds are sites that I find featured on other popular design gallery sites, Designer News, Twitter, etc. Overall, I think this list generally shows what fonts are most popular with designers at the moment.

So in the spirit of hopefully making type a little more diverse on the web, I decided to list four alternatives for each of the ten fonts featured here. The alternatives all fit a similar aesthetic yet aren’t used quite as much. They may be worth looking into if you want to stand out a little from the crowd.

As always, this is an independent source of data that includes all fonts regardless of where the fonts can be purchased (including indie foundries that don’t make their fonts available on popular services such as MyFonts and Typekit).

Animation and responsive design can sometimes feel like they’re at odds with each other. Animation often needs space to do its thing, but RWD tells us that the amount of space we’ll have available is going to change a lot. Balancing that can lead to some tricky animation situations.

Embracing the squishiness of responsive design doesn’t have to mean giving up on your creative animation ideas. There are three general techniques that can help you balance your web animation creativity with your responsive design needs. One or all of these approaches might help you sneak in something just a little extra into your next project.

Brain Pickings has a free weekly interestingness digest. It comes out on Sunday mornings and offers the week’s most unmissable articles across creativity, psychology, art, science, design, philosophy, and other facets of our search for meaning.

Pixels are not what most designers are thinking about when they launch Adobe Illustrator, but there are some pretty awesome things Illustrator can do with them. By default Illustrator is set up to be a resolution independent vector drawing and print layout tool — in short, not for pixels — but in this tutorial we will go over a few techniques which can add pixel-perfect design to it's list of uses.
As regular Medialoot visitors will know, I have previously posted a few articles discussing the advantages of using Fireworks instead of Photoshop for certain design tasks, this tutorial will hopefully do something similar for Illustrator by demonstrating it's widely unknown ability to work well with pixels.

This tutorial takes you through the process of creating a simple user interface and adding the custom behavior that transforms the interface into a working app. The finished app will run on iPhone and iPad.

This tutorial teaches you how to:

Use Xcode to create and manage a project
Identify the key pieces of an Xcode project
Run your app in iOS Simulator
Create a basic user interface in a storyboard
Preview your user interface
Adopt Auto Layout to add flexibility to your user interface

Color Hunt is a curated collection of beautiful colors, updated daily.
We collect and bring you the best color schemes you can use for anything.
By creating smart and simple compositions of several tones, we provide beautiful palettes of colors that work together.

Start with language
Language is fundamental to collaboration. In her book How to Make Sense of Any Mess, Abby Covert says that the biggest obstacle teams face is the lack of a shared language. To help establish that shared language, she suggests that we discuss, vet, and document our ontological decisions in the form of “controlled vocabularies.”

In short, we should start with language, not interfaces.

For about a year now, our team at FutureLearn, an open education platform, has been experimenting with a modular approach. I’d like to share a few ways we have tried to hone a shared language to help our team transition into modular design.

I recreated the IF by IFTTT user onboarding in five different high-fidelity prototyping tools to get an idea of the differences between them: Proto.io, Pixate, Framer, Facebook’s Origami and RelativeWave’s Form.

When loading fonts, we have the opportunity to use CSS alone, or to use JavaScript and CSS together. Conventional web development wisdom often suggests that we should only turn JavaScript when we need to. In this situation, JavaScript is necessary to influence how readers perception of how quickly the fonts have loaded, based on the state they are.

A CSS-only approach, recommended by default on Google Fonts and some other services, would have you drop in a <link> tag or use a CSS @import statement:

All too often mobile forms make use of dropdown menus for input when simpler or more appropriate controls would work better. Here's several alternatives to dropdowns to consider in your designs and why.

Managing consistent, typographic rhythm isn’t easy, but when the type is responsive, things get even more difficult. Fortunately, Sass maps make responsive typography much more manageable.
Writing the code is one thing, but keeping track of font-size values for each breakpoint is another — and the above is for paragraphs alone. Throw in h1 to h6s, each with variable font sizes for each breakpoint, and it gets cumbersome, especially when the type doesn’t scale linearly.

I believe one of the biggest flaws of today’s tools is their failure to allow designers to easily work with real data. Because of this, designers often fill their mocks with idealized information that is anything but representative. Beautifully composed photos. Perfectly sized bits of text. Just the right amount of content to fit. We spend an inordinate amount of time making our pixel-perfect fabrications. We then make sub-optimal decisions based on this, considering only our single, perfect state. We are surprised when our designs are implemented because we forgot to solve a variety of edge cases and problems. When we don’t work with real data, we deceive ourselves.

In contrast, when designers work with real data they design in reality. They allow data to inform and constrain their work. Their decisions are wholly informed; implementation details carefully considered; edge cases solved. They build empathy for how their users will actually experience things in a variety of contexts. They are not surprised when their designs get implemented because they’ve been using real data all along.

I’m happy to introduce ish. 2.0. For the uninitiated, ish. is yet another viewport resizing tool. It’s called “ish.” because it focuses on general ranges (small-ish. medium-ish. large-ish.), rather than popular device widths. It’s our jobs as web designers to make sure our interfaces look and function across all screen sizes, and ish. is here to help.

CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity.

Finally, thanks to Flexbox, we have a solution.

This site is not another CSS framework. Instead, its purpose is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. And with the recent release of Internet Explorer 11 and Safari 6.1, the latest Flexbox spec is now supported in every modern browser.

Check out the demos below. View the styles in the Web inspector or dive into the source to see just how easy CSS layout will become once Flexbox becomes mainstream.

I’ve received a few questions recently about how I create the letterpress style texturing that appears on pretty much every retro/vintage design I make. Today’s tutorial will show you a quick and easy way to give your logos and typography that ink stamp style effect that originated from the old letterpress style printing technique.

It’s tempting to rely on menu controls in order to simplify mobile interface designs —especially on small screens. But hiding critical parts of an application behind these kinds of menus could negatively impact usage.

“Flags” are 247 icons — in GIF and PNG formats — representing most countries in the world as small pixel icons. These flag icons are available for free use for any purpose with no requirement for attribution.

Although the syntax might be initially confounding, flexbox lives up to its name. It creates intelligent boxes that are stretchable, squeezable and capable of changing visual order. It provides simple solutions to layout paradigms that CSS has always struggled with: vertical centering and equal heights. Flex items are truly accommodating and a pleasure to work with.

Working with color while designing is really about creating another dimension in your medium. Choosing a successful palette creates a foundation for adding meaning and hierarchy to your design. Although it may seem overwhelming at first, choosing a palette can be a very straightforward process.

I’ve found that three colors are all you need – and choosing them doesn’t have to be arduous. Equally, putting them to use shouldn’t be stressful. In this post I’ll introduce some basic color theory and share a few tips I’ve learned along the way. Hopefully, it will help inform your choice and use of color – enjoy.

Choosing the ideal typeface for what you are trying to communicate can be frustrating with the available font browsing interfaces. Wordmark.it is designed to help with this font selection process by quickly displaying previews of any text with the fonts installed
on your computer.

Type a word or a phrase in the text box 1 and click the load fonts button.
Scroll through the previews and choose the ones you are interested in by clicking on them.
Click the filter selected button 2 to isolate selected previews.
Finally note down the names of the selected fonts to be used in your image or text editing software.

You can also:

Adjust the size of the previews by entering a pixel value 3 or by clicking the smaller / bigger buttons 4
Invert preview colors 5 to test the fonts on a dark background.
Toggle between lower case (aa), Title Case (Aa) or UPPER CASE previews(AA) 6
Adjust letter spacing (tracking) of fonts in selections (<> button when you move your mouse over preview tiles)
Zoom in to explore intricate details of fonts in selections (+ button when you move your mouse over preview tiles)
Drag and sort the order of previews in selections to compare similar fonts side by side.
How It Works?

Wordmark.it detects the fonts installed on your computer with the help of a simple Adobe Flash script and displays the results using HTML and JavaScript. You need to have Flash plugin installed and JavaScript turned on. Font rendering relies on browser's capabilities and some of your installed fonts may not show up due to their names not being recognized by some browsers. Wordmark.it also works on iPhone and iPad without Flash, make sure to give it a try.

Gridset for design
Designing grids with Gridset is as easy as dragging guides in Photoshop or Fireworks. Gridset provides whatever you need: PNGs, a comprehensive cheat sheet and CSS.
Gridset for prototyping
Put the calculator back in the drawer. By simply adding classes to your HTML, Gridset allows you to build responsive prototypes fast, without doing any maths.
Gridset for production
Gridset provides all the measurements and tools you’ll need to integrate with your existing markup, without the need for any new classes or HTML.

Our conscious minds want to draw one shape, but our eyes need to see another. Part of typeface design is managing this eternal friction between logic and optics. It’s always there, no matter the style.

This new series of posts will explore what I call “typeface mechanics”, the behind-the-scenes work that makes typefaces visually functional. It is what placates the stubborn oddities of human perception, helps or hinders the user, and informs long-standing conventions of design.

The typeface design process has many counterintuitive moments. One of the earliest pertains to vertical position and size, which we expect to be consistent among letters. We could simply pick a measure and apply it everywhere. But this straightforward and logical plan would fail, thanks to our eyes and brains.

Square shapes like H have a simple and stable relationship to the baseline and cap height. Their upper and lower edges coincide with these boundaries and stay put. But only a narrow sliver of an O is the full height, and the rest of the shape falls away. The parts that are too short greatly outnumber the parts that are big enough, so we conclude — wrongly, but very reliably — that the round shape is too small.

braver11d
Yeah, this is basically just a nightmare in CSS. Most fonts are made to sit on a line, not in the middle of a box. CSS however somehow wants to have them in the middle of the "line-height", a concept that didn't previously exist. So while fonts are drawn in a box, that box doesn't need to be filled fully and there was previously no reason for that box to have the same amount of space at the top as it has at the bottom: as long as it sits on the baseline it used to be fine. Most fonts we still use, like Helvetica (1957) or Courier (1955), are pretty much ancient.
This creates problems: a font might not visually sit in the vertical middle of a box in CSS. In fact, it may vary wildely between fonts (i.e. Helvetica,Arial,sans-serif could go all over the place depending on the font selected).
In my experience Safari on OS X is very reliable, perhaps because compensates for a lot of fonts. The rest is basically a crap-shoot and you're left making presumptions about sizes and relative amounts of padding required.

So there is no right way, frustratingly. Safari implements it in accordance with the intention of CSS in a way you can actually make stuff look right. Font rendering on Apple software is still ages beyond the rest in every possible way. The others are perhaps more "straight" but in a way that's almost impossible to work with.

What is Entypo+?
Entypo+ is the third version of a free suite of premium quality pictograms. It’s released under the license CC BY-SA 4.0. Each pictogram has been drawn for pixel perfection at a size of 20 x 20 pixels and with a very consistent style. The difference between this version of Entypo and previous ones is that the suite now only consist of SVG images. There is no fonts or PSD.

HAND-PICKED TALES from
ÆSOP’S FABLES
with HAND-PICKED TYPE from
GOOGLE FONTS
There are over 650 Google Fonts available for free. But, pairing typefaces isn’t easy and many of those fonts don’t work for typical websites. Part of the 25x52 initiative, this collaborative, ongoing project offers inspiration for using Google’s font library.

You’re a designer, web brand, agency, conference, start-up, app developer, or community. You’d love to make t-shirts, right? Of course you would. So why haven’t you? We’ll tell you why...it’s hard. Finding a good print shop is hard. Learning about screenprinting is hard. Customer service is hard. Shipping is hard. It’s all a big pain in the butt.

What if you could post your t-shirt design for sale in a high-quality, design-focused online t-shirt shop and have someone else take care of all the dirty work for you? No buying hundreds of shirts upfront. No inventory. No shipping. No customer service. No risk. Sounds great, right?
THAT'S WHERE WE COME IN. HERE'S HOW IT WORKS.

Are most of your users skipping the optional fields on your form? You might not need that extra information, but having it could help you learn more about users and give them a better experience. If you want more users to fill out the optional fields on your form, avoid marking required fields and mark optional ones only.

Design isn't hard to learn. That's because most of us are already building products and are familiar with what design means. What used to be complex and confusing is now simple and effective, thanks to Sketch, an app that is entirely focused on user interface design. Unlike Photoshop, you don't need to worry about photo editing and the hundreds of other settings that are noises to designing a simple application.

Sketch uses one unit, styles only relevant to UI design, a built-in iPhone previewing tool called Mirror and Artboards, the most efficient way to template multiple screens.
Everything is already in vector, so you don't have to worry about designing for multiple devices. And delivering assets is a breeze.

It's only been one year since Sketch has completely changed my design workflow. As a design application that I spend 8 hours a day on, there is no other tool that has influenced my life more than Sketch. The growth that I see for Sketch is out of this world; new resources and plugins are coming out almost on a daily basis. This tiny team of 4 is innovating at a faster rate than the gigantic team building Photoshop.

The friendly and wonderfully helpful Google Play team suggested that navigation drawers (which I’m referring to here as a side menu or side navigation) were the new way to go and would be the preferred design pattern for our Android app.

And so about six months ago, we decided to take the plunge and switch to a side navigation. To make sure people knew about all the available views and options we had the app start up by showing the navigation drawer open:

When we launched the new version the user reviews were great (“Love the new design, 5 stars”).

But when we looked at our analytics, it was a disaster! Engagement time was halved!

In a study by Google in August of 2012, researchers found that not only will users judge websites as beautiful or not within 1/50th — 1/20th of a second, but also that “visually complex” websites are consistently rated as less beautiful than their simpler counterparts

Moreover, “highly prototypical” sites — those with layouts commonly associated with sites of its category — with simple visual design were rated as the most beautiful across the board.

In other words, the study found the simpler the design, the better.

But why?

In this article, we’ll examine why things like cognitive fluency and visual information processing theory can play a critical role in simplifying your web design & how a simpler design could lead to more conversions.

We’ll also look at a few case studies of sites that simplified their design, and how it improved their conversion rate, as well as give a few pointers to simplify your own design.

Since this opportunity only occurs during the slow-motion part of the video, we wanted to make sure users understood that the video would be moving on if they didn't choose a product quickly enough. So, we added a countdown timer to the top right of the screen, which finishes when the slow-motion segment ends.

Codepen Example

I was pretty happy with the final effect, which uses only a little CSS and some JS class juggling.

The use of web fonts has continued to explode in 2013 – designers are no longer content with using standard system fonts like Arial and Georgia. On my side project Typewolf, I categorize the latest website designs by the web fonts they use. These are the ten most popular fonts I’ve noticed from analyzing font usage on Typewolf in 2013.

We use a lot of icons on lonelyplanet.com and recently went through the task of transferring them from an icon font to SVG files. I wanted to share why we did this along with some of the current limitations to SVG and how we got around them.

What is Spur?
Spur is a fun and easy way to critique web designs in ways you’ve never done before. Just paste a URL (or upload an image) and you’ll be able to use seven different tools to help you find what’s working (and what isn’t!).

We're obsessed with building beautiful and functional template designs (themes) to use with your WordPress powered website. We'll worry about the design details and clean code so you can stay focused on writing great content and running your business.

The piece was essentially grounded on the principles of Stage Magic, invoking five of the basic categorizations of Illusionary.. These Categories greatly informed the conceptual and aesthetic foundation and were fused with a graphic design aesthetic heavy in Minimalistic Form and Illuminated Geometry.. This direction was then placed into a projection-based Physical Installation, where all the 'magic' was captured live and in-camera, filmed documentary-style with no post effects or treatment; in essence the immense technology behind the curtain being completely masked from the viewer by the methods used to capture the performance.. This quote by Science-Fiction writer and Inventor Arthur C Clarke perfectly summarizes the film's foundation:

"Finally, a way to quickly build good-looking landing pages without the hassle."
"Looking to build a beautiful marketing site in 5 mins? You need Modulz."
"Modulz is Bootstrap for landing pages. Finally, I can design beautiful sites for my products."

People get confused, frustrated, and angry while using websites. They sigh, they groan, and sometimes they even shout. I see it happen with my own eyes each and every day.

Over the years at UserTesting.com we’ve literally watched hundreds of thousands of usability studies, which gives us a unique perspective into some of the most common issues that impact users. I’d like to share five of those insights with you.

Apple fan fiction is more popular than ever and usually takes the form of mockups of designs for new products and alternate designs for existing products. There's been a recent burst of creative energy unleashed on Dribbble around the idea of an iPhone with a screen that wraps completely around the device (or at least down around the sides).