Tom Fishburne shares a pretty funny comic on how to give and receive feedback. While this is from a Marketing standpoint, we can (as designers) also learn from this.
For us in the creative industry, getting buy-in to our ideas or concepts is paramount. I’ve personally have experienced every one of this feedback. Sometimes delivered in a rather unpleasant manner. As Designers and Design Thinkers, we have to seek creative ways to deal with such feedback that goes beyond just doing good work.
Often this includes being vigilant with meeting minutes or what agencies call “client contact reports”, identifying roles and responsibilities very early in the project, ensuring you understand the needs of all direct and indirect stakeholders and finally building a good rapport with your client to tease all of this information out.
This is a really nice and timely reminder to all, including myself.
Tom Fishburne shares a pretty funny comic on how to give and receive feedback. While this is from a Marketing standpoint, we can (as designers) also learn from this.
For us in the creative industry, getting buy-in to our ideas or concepts is paramount. I’ve personally have experienced every one of this feedback. Sometimes delivered in a rather unpleasant manner. As Designers and Design Thinkers, we have to seek creative ways to deal with such feedback that goes beyond just doing good work.
Often this includes being vigilant with meeting minutes or what agencies call “client contact reports”, identifying roles and responsibilities very early in the project, ensuring you understand the needs of all direct and indirect stakeholders and finally building a good rapport with your client to tease all of this information out.
This is a really nice and timely reminder to all, including myself.
There are some mind-blowing types that radiate of marvelous high-tech Magic and exude an image of sophistication and a subtle sense of brutality. Whether it is a flawlessly reproduced steampunk style lettering that just fascinates by polished shiny bronze surfaces and inventive construction. Or it is a gloomy yet bold and grotesque professionally executed neon sign planned down to the latest detail and enlivened through a series of special effects. It is certainly an eye catcher that can outshine, or at least stand with other original, jaw-dropping fonts in equality. In order to convey the powerful atmosphere of mechanization and advancement, artists render splendid compositions. Lettering can be literally assembled with the help of highly realistic mockups of tubes, cylinders, bulbs, then further enhanced through flawlessly treated textures of wood, metal, plastic,or glass and finished off through a plenty of complementary objects with a rustic or rough nature. Such projects are true pieces of art that demonstrate not only a skill level but also imagination and creativity of a designer. The list below includes some spectacular representative examples of this sort of typography. Enjoy and let us know what you think about them Veej – Vintage Neon Creator: Veej February Update […]
* You might also be interested in the following articles:
Has web design lost its soul? And is responsive design to blame? These questions, posed by my friend and colleague Noah Stokes1, are provocative to say the least. After all, the responsive web has made browsing on our ever increasing collection of Internet-connected screens not only possible, but enjoyable.
Our priority as designers must be to solve problems; perhaps more than anything else, this is what we do. Responsive web design is a fantastic solution to the problem of creating virtual experiences that adapt to different devices. There are other problems out there that we’re called on to solve, though, not least of which is to make content of all kinds appear interesting and engaging. A page of plain text becomes a beautiful blog post, a mess of unconnected JPGs becomes a professional portfolio.
The question, then, becomes: can we succeed at solving both of these problems?
What We’ve Gained
There’s no doubt about it, the web has become an aesthetically beautiful place. Simple, attractive sites that are built on solid grid layouts have become the standard. The wild west of the web has been tamed. Law and order in the form of frameworks and fluid grids have taken over and peace reigns throughout the land.
All of this is a good thing. The benefits of simple, attractive sites are both clear and plentiful:
Familiar and easy for users to navigate (when done correctly).
Prototyping is (relatively) fast and easy.
Heavy standardization of site-building techniques (assembly lines have replaced artisans).
Fast layout leads to big cost savings (which may or may not be passed down to the customer).
Strict grid layouts lend themselves to responsive design (the minimal layout trend is driven heavily by this need).
2 A stroll through a web design gallery like Awwwards3 reveals hundreds of fantastic sites that fit the criteria of simple and attractive sites. (View large version4)
It can’t be overstated that there is immense value in standardization and associated techniques. Countless individuals and small businesses benefit from having simple, attractive (and not at all unique) sites to share their brand with the world. However, that’s just one side of the story.
What We’ve Lost
Taken in individual doses, the average professional website today looks great. Compare even a lowly designer’s portfolio site today to the best design agency sites ten years ago, and you’ll have to concede that we’ve gotten a lot better at this web design thing. However, as you look around, it’s easy to come to the conclusion that everything is starting to look the same.
Have designers lost that pioneer spirit? Has creativity been sacrificed on the altar of convenience? Before answering these questions, let’s take a look at what’s causing the lack of variation in web design today.
Reasons Why Sites All Look The Same
What’s the driving force behind the feeling of sameness that we get as we look around the web today? What’s to blame? As it turns out, it’s not as simple as pinning it all on one tool or method. RWD might contribute, but it’s just one item in a long list. Here are a few of the likely suspects.
Layout
Limited layout ideas are one of the most prominent and obvious reasons for a lack of variation on the web. Strip out colors, animations, parallax scrolling effects and the like, and you start to see that a few basic layouts rule the web. How many sites can you name that use only slight variations of these five layouts?
This is what Noah meant when he lamented that all he saw were “boxes and grids everywhere.” We seem to have reached a stagnation point where unique layouts are a lost art.
Responsive Web Design
Once upon a time, you could guarantee that everyone visiting your website would be doing so on a low-resolution desktop computer screen. These days, websites that look great on almost any viewport at any resolution aren’t a luxury, they’re a necessity. Basic, fluid-width, collapsing grids make responsive web design a much simpler process than more organic layouts.
Frameworks
Web design frameworks have the potential to rapidly speed up both design and development workflows. For many, they’re the safest, most straightforward route to a responsive, cross-browser website. As a bonus, they also take care of simple styling for all manner of common elements, from buttons to forms. The incredible popularity of tools like Bootstrap and Foundation leads to thousands of web designers using the exact same codebase, layouts, and even aesthetic style on every project they take on.
Prototyping Tools And Processes
Even our blank-canvas design process has intentionally reduced creativity from the design process. Most prototyping tools encourage and perhaps even force you to use standardized, boxy elements that conform to strict grid layouts.
7 Many prototyping tools encourage common grid layout structures. (View large version8)
High-Quality Free Photos And Graphics
Never before have beautiful, free design assets been so readily available. Again, convenience and affordability reign supreme, so we see designers flocking to free photo sites, pulling from the same small (but growing) pool of resources.
In the last two years, how many sites have you seen using one (or both) of the two photos above? If you browse the web regularly, I’d wager the number is in the dozens.
This goes way beyond photos, extending to icons, fonts, patterns, and so on. The upside here is that designers with zero budget can still make great looking sites; the downside is that every other designer is doing the same thing with the same resources.
Design Trends
To some designers, “trend” is a dirty word. It shouldn’t be though. Pick a decade in the 20th century and examine its design trends. What you find is fascinating. It gives that time period its own distinct style and personality, and is often a reflection of the entire culture. Even if you can’t see it, it’s happening right now in your work. Everything you see and experience is affecting what you do, and the web amplifies this like never before. The result is a lot of designers gaining inspiration from the same sources and pursuing the same trends.
You And Me
Every tool and resource listed above is incredibly valuable. These things make our jobs easier, open up web design and development to more people, and save clients money. I didn’t choose them arbitrarily, I use them. If we’re looking for someone to blame for a lack of variation in web design, I’ll raise my hand. It’s me. And while I don’t think every project merits a unique design, I’d like to tip my hat to the designers out there who are trying to do something more interesting.
It’s also important to note that you can use any or all of the above and still create a unique design. It’s all in how you wield the tools that are available to you.
How To Challenge The Status Quo
At this point, you’ve already decided whether or not you care if your site designs are unique. Maybe that’s not your thing — that’s completely acceptable. If you find yourself wanting to break out of your typical workflow, though, here are a few ideas to get you going and some sites that serve as great examples.
Get Weird With Layout
Close your prototyping app, take out a pen and some paper, and think about how you can make an interesting, usable layout that’s not something you’ve ever done before.
Phases Magazine
Phases Magazine1917 is a good example of a site doing something unexpected with layout. It’s boxy — there is a grid at play here — and yet somehow they made it feel totally outside the typical web design experience (the screenshot doesn’t really give you a good feel for it; be sure to visit the site). If you see this and think, “Whoa, that’s weird,” good! That’s what they’re going for. Some will love it, some will hate it, but I really like that they’re trying something different.
Unfortunately, the site’s overall experience is quite poor. There’s some unnecessary scrolljacking, and the seemingly responsive layout breaks massively in certain viewports.
Also, they have a bit of fun with scrolling, but it’s not disrupting in the least, and it fits with the haphazard visual theme of the site. The logo starts off as a jumble of letters, but as you scroll, they fall into place and form “Curious Space” in the navigation bar.
Another interesting example is Le Temps d’un trajet3634. Once again, we see a non-standard grid, but instead of being sporadic, the layout is more intentional and clustered.
Each block in the arrangement is a static image that turns into a short video on hover. The coolest part, though, is how the grid shifts fluidly to accommodate focusing on different nodes.
Don’t Be A Square
One easy way to give your site a different atmosphere is to think outside the box. As cringeworthy as that sounds, when you open yourself up to different geometry, things can get really interesting.
Check out the hexagon hive that Built By Buffalo4139 has going on. This gallery design doesn’t translate nicely to mobile, so they simply switch to rectangles at one of their breakpoints. This is a great example of doing something unique where appropriate, but realizing where the boundary should be drawn to give your users the best possible experience.
One of my favorite sites in this vein that I’ve seen recently is Anakin Design Studio4644. Not only is the layout beautiful and unpredictable, the shapes at play here are all far outside what you’d expect scrolling through today’s websites.
As you can see, the huge, masked typography makes a bold impression. Beyond that though, if you move down the page you see a display of recent work. Most designers would put a simple rectangular thumbnail grid here and call it a day, but Anakin has played with the shapes to make it a lot more interesting. They’re still rectangular images, but they’ve used white backgrounds to create the illusion of varying shapes.
Sites like Fixate5754 and For Better Coffee5855 combine illustration with organic, crazy-busy layouts that make for powerful and memorable experiences.
The layouts above only seem complex because of the artwork; in reality, they can be pulled off fairly easily. Custom illustration work is a fantastic way to communicate a unique brand personality in a world lost in minimal thumbnail grids that all look the same.
For Better Coffee uses entertaining animations to track the coffee bean through the coffee creation process as you scroll. The experience is smooth, and it doesn’t jump the page to predefined points, so scrolling becomes a story-telling feature.
60 A coffee bean falls toward a grinder as the page is scrolled. (View large version61)62 Further down the page, scrolling pours fresh coffee into a cup. (View large version63)
HappyFunCorp
While we’re on the topic of beautifully illustrated sites, you should check out HappyFunCorp64.
At first, it seems like a fairly normal site with some fun little animations. The cool part happens when you start to navigate. The scene on the homepage serves as the basis for the rest of the site, so when you follow a link, instead of loading a brand-new page it zooms in to a detail of the whole scene.
It’s quirky, but I love the original thinking that went into it. Also, because the navigation is still presented in a standard way means that there’s no learning curve for users. The whole experience in delightfully unexpected, but in a way that doesn’t contradict how you normally interact with a site.
Vary The Experience
One basic expectation that users have is that everyone who lands on the same site will receive the same experience; a fun way to do something different is to toss that out the window. Vasilis van Gemert’s site6967 not only uses a unique, overlapping box layout, it also changes its entire color scheme for every visit.
Another way to make your site design unique is to decide on an entertaining or interesting theme that you can use as the basis of all your design decisions. This provides a nice framework for everything you do and encourages you to explore beyond traditional UI.
While not appropriate for all sites (a government website, for instance), for things like event announcements or small company pages it can be refreshing. The new site for dConstruct 20157573 is a great example of this idea.
As you can see, they went for a retro-futuristic vibe, heavily reminiscent of The Jetsons77. The result is a site that’s flat out fun to scroll through as you discover the how they present each new section.
There are a couple of really great things to note about this site. First of all, the headline treatments are wonderfully retro, using a combination of Lamplighter Script and Andes.
The best part, though, is that these are live web fonts with the diagonal direction implemented via a simple CSS skew. The repetition of diagonal lines throughout the site helps the design feel both consistent and creative.
80 With creative use of styled web fonts, all the text is selectable. (View large version81)
This site is a great example of how responsive design doesn’t have to be boring. The layout doesn’t feel boxy or typical, and yet it manages to reflow nicely to any viewport size. In fact, I really love how creative they were with transforming elements for smaller screens. For instance, as your viewport shrinks, the ticket graphic shown below jumps into an animated transform that shifts from horizontal to vertical orientation. It’s a tiny detail, but it’s clever and shows how much thought was put into every aspect of the layout.
82 For narrow viewports, the ticket flips from horizontal to vertical. (View large version83)
Hats off to Clearleft84 for the great work on this one.
Use Stock As An Input, Not An End Result
I work at Creative Market85, so I’m absolutely in favor of using great stock graphics, fonts, photos, and more. Quality stock resources can be immensely helpful for every designer, but how you use them is an important consideration. Whether you’re using some interesting vector artwork, an icon set, or a full-blown website theme, consider putting in some extra effort so that your implementation doesn’t look exactly like that of everyone else. The vast majority of people downloading that asset won’t bother with much or any customization, so a little bit goes a long way.
The Trouble With Unique Sites
Finding sites that are truly surprising and unique is a tall order. I put in hours of site searching to prepare for this article and still feel like I have very little to show for it. One overwhelming trend I’ve found is that it often feels like the only designers really pursuing unique web design are producing sites with wonky user experiences.
Experimentation is great, but sites that confuse users with weird, unexpected and unpleasant UX often fall short of their goals. Many of these sites take a step backwards by presenting us with Flash-like experiences: long loading times, overly ornate animations, jumpy scrolling, and complex user flows. There is a middle ground. You can create beautiful, unique looking websites without trying to reinvent the interaction wheel.
Web Design Lives
Standardization and predictable design will always have their place on the web. In fact, they may be the best possible solution for presenting most types of content to most screens. That said, we should let our creative instincts fight it out with our analytical instincts from time to time.
Let’s do our part to make sure the web remains what it has always been: a place for technology, art and design to overlap in new and interesting ways. Be a pioneer, try something you’ve never seen anyone do — and yes, make lots of mistakes along the way. It’s great to create something weird every now and then, even if other people hate it. That’s how this crazy thing called the web was built, and that’s how we’ll keep pushing it forward.
Ultimately, despite the fact that plenty of sites look pretty similar, I don’t believe that web design has reached a point of stagnation. There are countless extremely talented designers creating unbelievable sites, constantly raising the bar for their peers. This topic is wide open for debate, though. I’d love to hear your thoughts about the state of design on the web, and who you think is doing the most interesting work.
Has web design lost its soul? And is responsive design to blame? These questions, posed by my friend and colleague Noah Stokes1, are provocative to say the least. After all, the responsive web has made browsing on our ever increasing collection of Internet-connected screens not only possible, but enjoyable.
Our priority as designers must be to solve problems; perhaps more than anything else, this is what we do. Responsive web design is a fantastic solution to the problem of creating virtual experiences that adapt to different devices. There are other problems out there that we’re called on to solve, though, not least of which is to make content of all kinds appear interesting and engaging. A page of plain text becomes a beautiful blog post, a mess of unconnected JPGs becomes a professional portfolio.
The question, then, becomes: can we succeed at solving both of these problems?
What We’ve Gained
There’s no doubt about it, the web has become an aesthetically beautiful place. Simple, attractive sites that are built on solid grid layouts have become the standard. The wild west of the web has been tamed. Law and order in the form of frameworks and fluid grids have taken over and peace reigns throughout the land.
All of this is a good thing. The benefits of simple, attractive sites are both clear and plentiful:
Familiar and easy for users to navigate (when done correctly).
Prototyping is (relatively) fast and easy.
Heavy standardization of site-building techniques (assembly lines have replaced artisans).
Fast layout leads to big cost savings (which may or may not be passed down to the customer).
Strict grid layouts lend themselves to responsive design (the minimal layout trend is driven heavily by this need).
2 A stroll through a web design gallery like Awwwards3 reveals hundreds of fantastic sites that fit the criteria of simple and attractive sites. (View large version4)
It can’t be overstated that there is immense value in standardization and associated techniques. Countless individuals and small businesses benefit from having simple, attractive (and not at all unique) sites to share their brand with the world. However, that’s just one side of the story.
What We’ve Lost
Taken in individual doses, the average professional website today looks great. Compare even a lowly designer’s portfolio site today to the best design agency sites ten years ago, and you’ll have to concede that we’ve gotten a lot better at this web design thing. However, as you look around, it’s easy to come to the conclusion that everything is starting to look the same.
Have designers lost that pioneer spirit? Has creativity been sacrificed on the altar of convenience? Before answering these questions, let’s take a look at what’s causing the lack of variation in web design today.
Reasons Why Sites All Look The Same
What’s the driving force behind the feeling of sameness that we get as we look around the web today? What’s to blame? As it turns out, it’s not as simple as pinning it all on one tool or method. RWD might contribute, but it’s just one item in a long list. Here are a few of the likely suspects.
Layout
Limited layout ideas are one of the most prominent and obvious reasons for a lack of variation on the web. Strip out colors, animations, parallax scrolling effects and the like, and you start to see that a few basic layouts rule the web. How many sites can you name that use only slight variations of these five layouts?
This is what Noah meant when he lamented that all he saw were “boxes and grids everywhere.” We seem to have reached a stagnation point where unique layouts are a lost art.
Responsive Web Design
Once upon a time, you could guarantee that everyone visiting your website would be doing so on a low-resolution desktop computer screen. These days, websites that look great on almost any viewport at any resolution aren’t a luxury, they’re a necessity. Basic, fluid-width, collapsing grids make responsive web design a much simpler process than more organic layouts.
Frameworks
Web design frameworks have the potential to rapidly speed up both design and development workflows. For many, they’re the safest, most straightforward route to a responsive, cross-browser website. As a bonus, they also take care of simple styling for all manner of common elements, from buttons to forms. The incredible popularity of tools like Bootstrap and Foundation leads to thousands of web designers using the exact same codebase, layouts, and even aesthetic style on every project they take on.
Prototyping Tools And Processes
Even our blank-canvas design process has intentionally reduced creativity from the design process. Most prototyping tools encourage and perhaps even force you to use standardized, boxy elements that conform to strict grid layouts.
7 Many prototyping tools encourage common grid layout structures. (View large version8)
High-Quality Free Photos And Graphics
Never before have beautiful, free design assets been so readily available. Again, convenience and affordability reign supreme, so we see designers flocking to free photo sites, pulling from the same small (but growing) pool of resources.
In the last two years, how many sites have you seen using one (or both) of the two photos above? If you browse the web regularly, I’d wager the number is in the dozens.
This goes way beyond photos, extending to icons, fonts, patterns, and so on. The upside here is that designers with zero budget can still make great looking sites; the downside is that every other designer is doing the same thing with the same resources.
Design Trends
To some designers, “trend” is a dirty word. It shouldn’t be though. Pick a decade in the 20th century and examine its design trends. What you find is fascinating. It gives that time period its own distinct style and personality, and is often a reflection of the entire culture. Even if you can’t see it, it’s happening right now in your work. Everything you see and experience is affecting what you do, and the web amplifies this like never before. The result is a lot of designers gaining inspiration from the same sources and pursuing the same trends.
You And Me
Every tool and resource listed above is incredibly valuable. These things make our jobs easier, open up web design and development to more people, and save clients money. I didn’t choose them arbitrarily, I use them. If we’re looking for someone to blame for a lack of variation in web design, I’ll raise my hand. It’s me. And while I don’t think every project merits a unique design, I’d like to tip my hat to the designers out there who are trying to do something more interesting.
It’s also important to note that you can use any or all of the above and still create a unique design. It’s all in how you wield the tools that are available to you.
How To Challenge The Status Quo
At this point, you’ve already decided whether or not you care if your site designs are unique. Maybe that’s not your thing — that’s completely acceptable. If you find yourself wanting to break out of your typical workflow, though, here are a few ideas to get you going and some sites that serve as great examples.
Get Weird With Layout
Close your prototyping app, take out a pen and some paper, and think about how you can make an interesting, usable layout that’s not something you’ve ever done before.
Phases Magazine
Phases Magazine1917 is a good example of a site doing something unexpected with layout. It’s boxy — there is a grid at play here — and yet somehow they made it feel totally outside the typical web design experience (the screenshot doesn’t really give you a good feel for it; be sure to visit the site). If you see this and think, “Whoa, that’s weird,” good! That’s what they’re going for. Some will love it, some will hate it, but I really like that they’re trying something different.
Unfortunately, the site’s overall experience is quite poor. There’s some unnecessary scrolljacking, and the seemingly responsive layout breaks massively in certain viewports.
Also, they have a bit of fun with scrolling, but it’s not disrupting in the least, and it fits with the haphazard visual theme of the site. The logo starts off as a jumble of letters, but as you scroll, they fall into place and form “Curious Space” in the navigation bar.
Another interesting example is Le Temps d’un trajet3634. Once again, we see a non-standard grid, but instead of being sporadic, the layout is more intentional and clustered.
Each block in the arrangement is a static image that turns into a short video on hover. The coolest part, though, is how the grid shifts fluidly to accommodate focusing on different nodes.
Don’t Be A Square
One easy way to give your site a different atmosphere is to think outside the box. As cringeworthy as that sounds, when you open yourself up to different geometry, things can get really interesting.
Check out the hexagon hive that Built By Buffalo4139 has going on. This gallery design doesn’t translate nicely to mobile, so they simply switch to rectangles at one of their breakpoints. This is a great example of doing something unique where appropriate, but realizing where the boundary should be drawn to give your users the best possible experience.
One of my favorite sites in this vein that I’ve seen recently is Anakin Design Studio4644. Not only is the layout beautiful and unpredictable, the shapes at play here are all far outside what you’d expect scrolling through today’s websites.
As you can see, the huge, masked typography makes a bold impression. Beyond that though, if you move down the page you see a display of recent work. Most designers would put a simple rectangular thumbnail grid here and call it a day, but Anakin has played with the shapes to make it a lot more interesting. They’re still rectangular images, but they’ve used white backgrounds to create the illusion of varying shapes.
Sites like Fixate5754 and For Better Coffee5855 combine illustration with organic, crazy-busy layouts that make for powerful and memorable experiences.
The layouts above only seem complex because of the artwork; in reality, they can be pulled off fairly easily. Custom illustration work is a fantastic way to communicate a unique brand personality in a world lost in minimal thumbnail grids that all look the same.
For Better Coffee uses entertaining animations to track the coffee bean through the coffee creation process as you scroll. The experience is smooth, and it doesn’t jump the page to predefined points, so scrolling becomes a story-telling feature.
60 A coffee bean falls toward a grinder as the page is scrolled. (View large version61)62 Further down the page, scrolling pours fresh coffee into a cup. (View large version63)
HappyFunCorp
While we’re on the topic of beautifully illustrated sites, you should check out HappyFunCorp64.
At first, it seems like a fairly normal site with some fun little animations. The cool part happens when you start to navigate. The scene on the homepage serves as the basis for the rest of the site, so when you follow a link, instead of loading a brand-new page it zooms in to a detail of the whole scene.
It’s quirky, but I love the original thinking that went into it. Also, because the navigation is still presented in a standard way means that there’s no learning curve for users. The whole experience in delightfully unexpected, but in a way that doesn’t contradict how you normally interact with a site.
Vary The Experience
One basic expectation that users have is that everyone who lands on the same site will receive the same experience; a fun way to do something different is to toss that out the window. Vasilis van Gemert’s site6967 not only uses a unique, overlapping box layout, it also changes its entire color scheme for every visit.
Another way to make your site design unique is to decide on an entertaining or interesting theme that you can use as the basis of all your design decisions. This provides a nice framework for everything you do and encourages you to explore beyond traditional UI.
While not appropriate for all sites (a government website, for instance), for things like event announcements or small company pages it can be refreshing. The new site for dConstruct 20157573 is a great example of this idea.
As you can see, they went for a retro-futuristic vibe, heavily reminiscent of The Jetsons77. The result is a site that’s flat out fun to scroll through as you discover the how they present each new section.
There are a couple of really great things to note about this site. First of all, the headline treatments are wonderfully retro, using a combination of Lamplighter Script and Andes.
The best part, though, is that these are live web fonts with the diagonal direction implemented via a simple CSS skew. The repetition of diagonal lines throughout the site helps the design feel both consistent and creative.
80 With creative use of styled web fonts, all the text is selectable. (View large version81)
This site is a great example of how responsive design doesn’t have to be boring. The layout doesn’t feel boxy or typical, and yet it manages to reflow nicely to any viewport size. In fact, I really love how creative they were with transforming elements for smaller screens. For instance, as your viewport shrinks, the ticket graphic shown below jumps into an animated transform that shifts from horizontal to vertical orientation. It’s a tiny detail, but it’s clever and shows how much thought was put into every aspect of the layout.
82 For narrow viewports, the ticket flips from horizontal to vertical. (View large version83)
Hats off to Clearleft84 for the great work on this one.
Use Stock As An Input, Not An End Result
I work at Creative Market85, so I’m absolutely in favor of using great stock graphics, fonts, photos, and more. Quality stock resources can be immensely helpful for every designer, but how you use them is an important consideration. Whether you’re using some interesting vector artwork, an icon set, or a full-blown website theme, consider putting in some extra effort so that your implementation doesn’t look exactly like that of everyone else. The vast majority of people downloading that asset won’t bother with much or any customization, so a little bit goes a long way.
The Trouble With Unique Sites
Finding sites that are truly surprising and unique is a tall order. I put in hours of site searching to prepare for this article and still feel like I have very little to show for it. One overwhelming trend I’ve found is that it often feels like the only designers really pursuing unique web design are producing sites with wonky user experiences.
Experimentation is great, but sites that confuse users with weird, unexpected and unpleasant UX often fall short of their goals. Many of these sites take a step backwards by presenting us with Flash-like experiences: long loading times, overly ornate animations, jumpy scrolling, and complex user flows. There is a middle ground. You can create beautiful, unique looking websites without trying to reinvent the interaction wheel.
Web Design Lives
Standardization and predictable design will always have their place on the web. In fact, they may be the best possible solution for presenting most types of content to most screens. That said, we should let our creative instincts fight it out with our analytical instincts from time to time.
Let’s do our part to make sure the web remains what it has always been: a place for technology, art and design to overlap in new and interesting ways. Be a pioneer, try something you’ve never seen anyone do — and yes, make lots of mistakes along the way. It’s great to create something weird every now and then, even if other people hate it. That’s how this crazy thing called the web was built, and that’s how we’ll keep pushing it forward.
Ultimately, despite the fact that plenty of sites look pretty similar, I don’t believe that web design has reached a point of stagnation. There are countless extremely talented designers creating unbelievable sites, constantly raising the bar for their peers. This topic is wide open for debate, though. I’d love to hear your thoughts about the state of design on the web, and who you think is doing the most interesting work.
Today, we’re happy to release a very large icon set: the freebie contains 500 icons in four editable variants: outlined, solid, webby and flat, covering all sorts of various categories. The icons allow you to customize the stroke width and style, not to mention that you can change the color of the elements. They’re carefully crafted on a 60px grid which gives each icon consistency and crispness on all displays.
Smashicons come in several styles. The AI and Sketch formats come in four styles: outline for mobile use; solid for hover state; webby for web; and flat for any creative project. The PSD format comes in two styles: outline for mobile use, and solid for hover states.
This icon set is licensed under a Creative Commons Attribution 4.0 International License1. You can use the icons in commercial as well as personal projects, including software, online services, templates and themes. You may modify the size, color or shape of the icons. No attribution is required. However, reselling bundles or individual pictograms is not allowed.
“Through Smashicons we wanted to translate profound thoughts into icons and give designers as well as developers the possibility to get straight to work when it comes to implementing icons in their projects. We tailored Smashicons to be as non-intrusive as possible by providing PNG and SVG files for each of our 14,000 icons, but also creating the icon set on all major design platforms: Illustrator, Photoshop (outline and solid) and Sketch. This means that using icons in your creative projects has never been easier.”
Huge thanks to Oliver12 for releasing the icons — we sincerely appreciate your time and effort! Keep up the brilliant work!
Today, we’re happy to release a very large icon set: the freebie contains 500 icons in four editable variants: outlined, solid, webby and flat, covering all sorts of various categories. The icons allow you to customize the stroke width and style, not to mention that you can change the color of the elements. They’re carefully crafted on a 60px grid which gives each icon consistency and crispness on all displays.
Smashicons come in several styles. The AI and Sketch formats come in four styles: outline for mobile use; solid for hover state; webby for web; and flat for any creative project. The PSD format comes in two styles: outline for mobile use, and solid for hover states.
This icon set is licensed under a Creative Commons Attribution 4.0 International License1. You can use the icons in commercial as well as personal projects, including software, online services, templates and themes. You may modify the size, color or shape of the icons. No attribution is required. However, reselling bundles or individual pictograms is not allowed.
“Through Smashicons we wanted to translate profound thoughts into icons and give designers as well as developers the possibility to get straight to work when it comes to implementing icons in their projects. We tailored Smashicons to be as non-intrusive as possible by providing PNG and SVG files for each of our 14,000 icons, but also creating the icon set on all major design platforms: Illustrator, Photoshop (outline and solid) and Sketch. This means that using icons in your creative projects has never been easier.”
Huge thanks to Oliver12 for releasing the icons — we sincerely appreciate your time and effort! Keep up the brilliant work!
CSS and JavaScript provide access to all the elements of an HTML document – of course also to texts; however, this is limited to titles and paragraphs. Accessing single sentences and words is not that comfortable; unless they are wrapped, for example, with “” elements. The JavaScript library Blast.js makes sentences, words, and single characters accessible through CSS and JavaScript. This is a real basis for impressive typography animations. How Blast.js Works Blast.js comes from the digital pen of the Velocity.js developer Julian Shapiro from San Francisco. The MIT license is free of charge for commercial and personal projects. It is not hard to use, but you may need some explanations. Blast.js builds up on jQuery, so you need to incorporate both into the HTML document. Then the text can be easily prepared, so that each sentence, each word, and each character can be accessed through CSS or JavaScript. $(“p”).blast({ delimiter: “word” }); In the above example, all words within “
” elements are wrapped with a “” element. These “” elements are classed as “blast”. Other delimiters are “sentence” which wraps sentences with a “”, and “character” which covers single characters – including punctuation marks. If the text already has […]
* You might also be interested in the following articles:
I recently wrote about RemoteIE which is a tool created to help developers on non-Windows OS’es to test for Microsoft Edge and Internet Explorer 11. It uses Microsoft’s RemoteApp virtualization software to create a browsing session without the need to install a VM. Developers have been sending us a lot of requests to expand it out to other versions of IE. One of the big limitations, though, is the fact that you can’t access resources or sites locally hosted on your development machine. This is a cumbersome limitation and narrows the usability of the tool for testing. It’s been nagging at me for awhile that we couldn’t use this in this fashion, but this past week I found a solution that I wanted to share. ngrok – Secure Tunnels to Localhost Enter ngrok, a very cool, lightweight tool that creates a secure tunnel on your local machine along with a public URL you can use for browsing your local site. When ngrok is running, it listens on the same port that your local web server is running on and proxies external requests to your local machine. This was the secret sauce I was looking for to allow RemoteIE to be […]
* You might also be interested in the following articles:
People have many tough decisions to make; whether they should use your application or website to accomplish a task shouldn’t be one of them. Your design team can take advantage of our knowledge of the human mind and human behavior by accounting for a number of heuristics, or mental shortcuts, that researchers have identified.
You might be familiar with the term “heuristic” from the UX research method of heuristic evaluation. A heuristic evaluation involves experts evaluating the interface and interactions of a system based on accepted usability best practices. Forget about that for now. In psychology, a heuristic is simply a fancy word meaning mental shortcut. We have so many decisions to make on a daily basis; there is no way we could think about all of the pros and cons of each option. Our minds would be overloaded and we would stop functioning. Some of our decisions become habitual and we make them without thinking. We use heuristics for many other decisions that are routine or that we need to make quickly.
Daniel Kahneman and Amos Tversky, two highly regarded academics in the field of economics are responsible for much of what we know about heuristics. In 1979, the researchers published an influential article in the journal Econometrica1 (PDF). The researchers’ thinking on heuristics and decision-making was well received, with Kahneman being honored with a Nobel Prize in economics based in part on this work.
People frequently use heuristics to make decisions; you should use them to your advantage in your design. Here, we’ll discuss four common heuristics that researchers have identified, with examples of how to address them in digital design.
Default Effect
The default effect is the tendency for people not to adjust the default settings of a product. For example, someone purchasing a new car insurance policy is most likely to default to the most popular policy that meets the minimum standards. Why would they spend time becoming an expert on insurance terminology when the insurance company has clearly labeled one policy as meeting the standard? Similarly, someone purchasing a new stereo might not adjust the factory settings. Most people don’t know much about the intricate details of how to tune a stereo; they would assume that the experts who built the stereo shipped it with the best settings as the default.
Not accounting for the default effect could lead to users experiencing frustration and inconvenience and selecting incorrect options, such as with a household item or a website.
Beyond this, researchers have tied the default effect to life or death consequences. Default settings are credited with affecting public health campaigns2 (PDF). Researchers studied differences in European countries that have organ donation defaulted to opt-in versus ones defaulted to opt-out. Countries that default to opt-in had statistically significantly higher donor rates, when controlling for other relevant variables. It seems that making people opt in to organ donation is as big of a barrier as making them opt out. In this situation, making opt-in the default can passively save lives; making opt-out the default can do the opposite.
How the Default Effect Applies to Design
Your product’s default settings are critical; users assume you have their best interests in mind. Jared Spool of UIE reports on a study3 he conducted that found fewer than 5% of users adjusted any of the default settings in Microsoft Word. At the time, auto-save was defaulted to inactive; people were not actively auto-saving their work because they assumed that functions like that were already defaulted to be active. Similarly, a 2011 study4 (PDF) found that Facebook users are confused about the privacy settings and usually assume they have more privacy by default than they really do. Account for the users’ best interest when setting defaults — even if it means more work in coding and design.
Each product will have unique needs and options for default settings. Your design team will need to conduct research with users or potential users. Interview or survey as many users as possible to get a feel for the following:
What default settings do users assume will exist?
Through which channel do users assume they will receive notifications of product updates (for example, via email or through push notifications)? Is auto-update the preferred default setting?
Do users assume that your product is pre-set to consume minimal power, or would they prefer the fastest, most-power-consuming experience out of the box?
Do users assume their posts or comments are shared with only certain groups, or are posts public?
Do users assume your product automatically backs up information on a regular basis?
What products will users expect or need yours to be compatible with out of the box? How are you communicating this to them?
How do users want information to be communicated — including, what default alerts will users receive?
What is the main context of use? For example, should your product default to invitation-only mode if it is something that enables users to share information or files with others?
Your team can use this information to inform the default settings of your product, as well as to communicate your product to new users. You will need to account for two issues in your communication to users: what the default settings are and how users can change them. You can do this through a comprehensive onboarding experience, one that takes new users through the settings and explains the default options and how to update them. You can also do this through effective messaging and guidance within your product.
Slack5, the team communication platform, provides a good example of how to make users aware of the default settings and how to update them. As you can see in the screenshot below, Slack provides clear notifications about settings both within the preferences section and when the product is being used.
6 Slack makes users aware of the default settings and how to change them. (View large version7)
Scarcity Heuristic
People are motivated to action when they perceive an item’s availability to be limited in quantity or time. People like to feel they are members of an exclusive group or have access to things that others would consider valuable. The more scarce something is perceived to be, the more it is assumed to be valuable, thus promoting action. We see this when an e-commerce website shows us that a product’s quantity is limited or that a limited number of users will have access to a product.
How the Scarcity Heuristic Applies to Design
Your design team should identify opportunities to enhance the user’s perception of scarcity of your product’s availability or exclusivity. Are you able to offer a pre-release to people who agree to purchase the final product? If so, consider doing that. Can you offer different levels of membership or access to your product? A certain number of users will want to enjoy the feeling that they have access to features or functionality that others don’t have. Can you show users how much of your product remains? Dick’s Sporting Goods (shown below) is an example of how many e-commerce websites apply the scarcity heuristic: putting certain items on sale for a limited time.
Scarcity is a powerful motivator to get users to commit to your product, but it can also backfire. I have unsubscribed from countless retailers that have bombarded me with daily emails promoting a “24-hour-only sale” or the like. I not only unsubscribe from these emails, but lose trust in that retailer. Your users don’t have the time or desire to delete your daily “24-hour-only sale” emails. Send them one email, occasionally, that offers a real limited deal — or else find a different strategy.
8 Dick’s Sporting Goods offers “flash” sales on its website. The flash sale is a regular feature, although the items on sale change. Users might check back regularly to see what new items are on sale. (View large version9)
Naïve Diversification
The naïve diversification heuristic states that people tend to make choices that are more diverse when multiple options are presented to them at once, rather than sequentially. For example, when asked to choose five candies from a selection of ten types, people will tend to choose a variety. On the other hand, when asked to choose one candy from among ten types once a week for five weeks in a row, people are more likely to select the same one. This heuristic has major implications for when and how we present our users with options. People choose what they really want when forced to make a single choice, but are more random when given the option.
How Naïve Diversification Applies to Design
Naïve diversification is relevant to digital design because people are easily distracted. Keep them on task by making your interactions as user-friendly and focused as possible. Consider the desired outcome of your users’ engagement with your product: Do you want them to make one particular choice or a variety of choices. If you want users to make one choice, present them with one choice at a time, over time. If you want them to select multiple or diverse options, allow them to select from all available options at once.
Woot10, a discount goods website, focuses on one screen of information when users are creating an account. Users are asked to provide only basic information on one screen to begin. The vendor can get more detailed information once users have signed up and have seen the value of the product.
11 Woot removes distractions and focuses on acquiring critical information from users. (View large version12)
Offer a personalized experience that focuses the user’s attention on the information or products they need, based on who they are. You can also combat naïve diversification by surfacing recommendations based on affinity analysis13 and the user’s past behavior. Amazon provides an excellent example of how to address naïve diversification; it attempts to do most of the thinking for the customer when it surfaces various data:
“buy it again” (previously purchased items);
previously viewed items;
recommendations based on current and past purchases;
what other users have purchased when they have purchased a product you are viewing.
Users know they will have a quick experience when they go to Amazon to purchase a product they have viewed or purchased in the past; this keeps them coming back. As it turns out, users don’t want to go somewhere else and start all over with a new browsing and purchasing history.
14 My wife’s Amazon recommendations, heavily influenced by a recent addition to our family. (View large version15)
Fluency Heuristic
People tend to make decisions based on which option is easiest to process; speed is king. The fluency heuristic comes into play when someone has to choose from among multiple options that lead to similar outcomes. An example would be someone being asked what they would like to eat for lunch. Ten things might come to mind very quickly. The fluency heuristic suggests that the person will end up choosing the option that comes to mind most quickly; they would assign a higher value to that option because they can retrieve it from memory most quickly.
Another example would be to ask someone about the best way to bake a cake. The solution that comes to mind will most likely be based on the person’s experience and preference. They will likely value that option as the highest (or best), even if they subsequently think of other (potentially better) options, due to the speed at which they were able to process the original thought.
What would your first thought be if you suddenly felt a sharp pain in your chest as you are reading this article: Heart attack? Heartburn? Too much coffee? Pulled muscle? Your first reaction will likely be the one you consider the most valid. If you thought it was a heart attack and called an ambulance, only to find it is heartburn, you would feel embarrassed. If you thought it was heartburn and took an antacid but it turned out to be a heart attack, you would be dead. Your initial thought will likely dictate the action you take.
How the Fluency Heuristic Applies to Design
The fluency heuristic suggests that users will choose the option that they can process the fastest, because they will think that is the best option. This speaks to the need for your team to understand the user’s point of view when you present them with information and options. You need to understand the user’s current reference point for the functions you want to include in your design. You also need to communicate in language that is free of jargon and easily understood. Some areas to apply these principles include the following:
Search
How are you presenting search results to users? They will assume that the results they easily understand have priority over others. Is that true? Do your results highlight key words and phrases that make the connection to the initial query clear to users?
Content
How are your presenting content and topics? Users will assume that content that is easier to understand (quicker to process) is more important. Present content that is easy to understand first in order to coax users to a more in-depth exploration of the topic. Also, don’t, for example, use four fonts and four colors in the same paragraph; that would impede the reader’s ability to process the information.
Updates and alerts
How are you ordering and titling alerts? Users will regard the first alerts they can process as the most critical. “Security warning!” is faster to process than “Potential unauthorized account usage detected!”
Navigation
Is your navigation’s hierarchy inline with the user’s understanding of each major content area? If your website is about food and recipes, you wouldn’t include “Food” as a submenu of “Recipes”; you’d want them both to be immediately visible to users.
16 Like Google, people assume that results that are easy to process and related to their topic are most important. (View large version17)
The fluency heuristic has implications for how you market your product. Will potential users receive and process the message that your product meets their need? Have you made sure your product is the first one that comes to mind as a solution to the problem you are designing for? Do users have an immediate positive reaction upon hearing of your product? Try to keep your product near the top of all review lists (with positive reviews) and any other websites that consolidate and list what is available for users in your field. Users associate the quickest and easiest option to process — most likely the one at the top of the list — as being the best option.
The fluency heuristic also applies to those of us on design teams. We, too, might assume that the first option that comes to mind is the best. Have we verified this with users? If the first solution that comes to mind is to make a product social or to make it mobile-focused, what are you basing that on? Do you tend to assume that users want the thing that comes up first in team meetings? If so, you need to step back and make better-informed decisions. Testing ideas through usability testing, contextual inquiry and other UX research methods of gathering direct feedback from potential users will help us avoid assuming that the idea most quickly processed is the best.
Case Study: Expedia
There is no one-size-fits-all solution for applying heuristics to a design. Work with your design team (including researchers and developers) to identify which heuristics most apply to your product. Let’s walk through a brief case study of how Expedia, the online travel company, hits and misses the marks covered in this article.
I frequently use Expedia to research and book trips for work and leisure. Expedia has accounted for a number of heuristics that make it easier for me to book a trip. As you see in the image below, Expedia defaults to my home airport (Philadelphia) when I land on its home page. It knows my home airport because it asked me to identify it during the onboarding process. Otherwise, I’d probably not have taken the time to update my settings.
Expedia also defaults to searching for roundtrip flights. I’m not sure if this is based on my behavior, but I am sure that I have never used Expedia to do anything other than book a roundtrip flight. I don’t mix my flight bookings with hotel bookings. Finally, Expedia provides a default alert at the top of the page informing me of credit I have to use as a result of points earned through its loyalty program. Although I wouldn’t normally book a hotel room through Expedia, I might do so if the room were free. I would not have any idea of my rewards balance if the default was to hide this message.
Expedia addresses naïve diversification in at least two ways in the image below. First, it defaults to booking a flight from my home city to the last city I searched for. This is great if I am picking up where I left off: My dates are set, my location is set, I don’t need any more options, and I am focused on this flight. However, I can easily diversify by clicking “Add a hotel” and/or “Add a car.” This will bring up additional search options, diversifying my experience if I want. If I don’t come back to book this trip to Columbus, I can navigate to the “My Scratchpad” area and see all of the flights I have searched for over a period of time. This also addresses naïve diversification, allowing me to easily stay focused on booking the flight I need, not getting lost daydreaming about a fantasy trip to some exotic location. If I am traveling for business and in a hurry, Expedia has met my needs by focusing on the naïve diversification heuristic.
Expedia addresses scarcity in a number of ways. The image below shows some of the sales Expedia highlights on its home page. Each deal is tied to a specific timeframe. The “Daily deal” description states that a new deal is offered daily (if so, I approve). The Father’s Day coupon is a promotion to encourage use of the Expedia app. Unfortunately, the Expedia app suffers many usability issues and is disconnected from the desktop experience. I would not recommend driving traffic to another channel until you have made that channel’s experience fully functional.
Expedia’s product inherently addresses fluency. If it didn’t, Expedia wouldn’t stand a chance in its market. Expedia consolidates a number of airline and hotel websites. Users will recognize the ease with which they can compare a number of airlines, hotels and car rental providers on Expedia’s website alone, rather than navigating to multiple websites for each category of travel.
Take another look at the images above and see whether you can find other ways in which Expedia addresses the heuristics we’ve covered. Can you find any ways that Expedia could improve on how they address any of the heuristics? Again, you don’t need to address every heuristic in every experience, as long as the approach is seamless and makes for a better experience.
Conclusion
We strengthen a design when we reduce the user’s cognitive load. We can accomplish this by accounting for heuristics. Heuristics do not involve trickery or deceit; they take advantage of an understanding of users and human behavior. We have discussed four of the many heuristics you can account for in a design. Review your current design and any future designs to determine how you might account for one or more of them. Also, try to recognize where you or your colleagues might be using a heuristic (for example, the fluency heuristic) in your assumptions about users and the features in your design.
Additional Resources
“Heuristics and Biases in Retirement Savings Behavior,” Shlomo Benartzi and Richard H. Thaler, The Journal of Economic Perspectives (2007), pages 81–104
“Heuristic Decision Making,” Gerd Gigerenzer and Wolfgang Gaissmaier, Annual Review of Psychology (2011: 62), pages 451–482
“Prospect Theory: An Analysis of Decision Under Risk,” Daniel Kahneman and Amos Tversky, Econometrica: Journal of the Econometric Society, (1979), pages 263—291.
You can learn about the application of more heuristics and other psychological concepts to digital design in my upcoming book Design for the Mind. Order the early-access version of the book from Manning Publications.
