Friday, 6 January 2017

Poll: When will you start using CSS Grid Layout?

January is the time most of us cease reflecting on the year gone by, and start looking to the months ahead. It seems everyone has different ideas on what to expect in 2017 (you’ll read ours next week) and one of the most anticipated changes this year, is the introduction of CSS Grid Layout.

Grid Layout allows us to define areas of a page, and determine how they stretch, scale, and respond to the viewport. Developed as a mature layout solution for the web, it delivers an unprecedented level of control in CSS, but if you thought Flexbox was a steep learning curve, you’ve seen nothing yet.

One of the reasons no one uses CSS Grid Layout right now is that it offers very limited support; currently, only IE10+ and Edge 12+ [doffs cap in Microsoft’s direction] offer any support at all. However that’s all about to change with full support across all major browsers expected to arrive around March.

layout is not really a progressive enhancement

Unfortunately, layout is not really a progressive enhancement. Layout determines many things, not least visual hierarchy, which can be instrumental in conveying meaning. And so, as exciting as Grid Layout is, the new design freedoms that it delivers seem hamstrung for now. The question is, when will CSS Grid Layout be reliable enough to be your default approach to layout online?

Probably the most pragmatic answer is: it depends on your target demographic. If you’re building a site for an online CSS conference sponsored by a browser manufacturer, you’re probably good to go; for every other purpose, the point at which CSS Grid Layout is commercially useful, may be a little hazier.

CSS Grid Layout is certainly coming soon, to a browser near you. It opens up new possibilities for layout. However, whether it’s usable outside of CodePen anytime soon, is another matter entirely.


180 Templates for Instagram, Facebook and Twitter – only $19!

Source

from Webdesigner Depot http://www.webdesignerdepot.com/2017/01/poll-when-will-you-start-using-css-grid-layout/

Thursday, 5 January 2017

3 web design errors that just won’t die

Web design has come a long, long way since the 1990s, when things like GeoCities and AOL dominated the Internet. Design itself has evolved, along with a deeper understanding of principles like usability and the user experience. There certainly hasn’t been a lack of studies examining everything from typography and site speed, to content above versus below the fold.

The Nielsen Norman Group is one of the premier user-experience consultations on the planet. It’s been in business for decades, conducting study after study on design, usability, and UX. In one of its earliest studies from all the way back in 1996—when “Friends” and “The X-Files” were still on TV—they identified 10 web design errors that were hugely problematic back then, in the very early days of the web.

You’d think that, 20 years later, as design has gotten more sophisticated and information about design has become much more accessible, designers would learn to avoid design mistakes, but a recent, large-scale usability study from 2016 by the NN Group found just the opposite to be true.

Instead of learning from past mistakes, designers have been continually repeating them throughout the decades. In fact, if there’s one thing that’s certain in web design, it’s that these errors continue to persist because designers keep forgetting the basics:

  • Enabling users to find information
  • Enabling users to read that information
  • Enabling users to understand where to click and where the destination is

A lack of clarity

One of the most stubborn errors designers continue to make on websites is not sympathizing with the need of users to clearly and easily understand what the site or its elements is about.

The study identified these mistakes surrounding a lack of clarity:

  • Unexpected locations for content
  • Competing links and categories
  • Hidden fees and prices

The study revealed how too many designers put content in places that users aren’t familiar with based on ordinary browsing habits. For instance, inaccurate or inappropriate category names that failed to match the expected content within the categories was a recurring problem.

Another issue was navigational categories or links that sound similar to each other, which hampers users from finding the information they want. In such a case, your users will likely end up leaving your site and going somewhere else, where content is sorted much more clearly.

Hidden fees and prices will also hurt your conversions because no shoppers want to feel like they’re being treated dishonestly. When it comes to money, your users want to know about everything they’ll have to pay for up front, at the beginning of a transaction. This refers to prices, subscription fees, convenience fees, and anything else where money is involved. From a pure design perspective, it’s a huge mistake if hiding fees and prices causes a loss of customers and transactions.

Overstock is a great example of full disclosure: note how big and bold its pricing information for products is.

UX problems

How easy your site visitors find that it is to actually use your site is integral to whether or not your site has good UX or not.

The NN Group’s study found these UX-related design mistakes that just won’t go away:

  • Islands of information
  • Link repetition
  • Stranding users on microsites
  • Inadequate search results
  • Flawed filters and facets

Two big design errors are isolated pockets of information on any given page that fail to link to other, related information on different pages and forcing users to repetitively click on what amounts to the same types of links to get specific information. Both design errors inconvenience your users by failing to provide them with the information they’re looking for in context.

Many sites feature subsites (think Yahoo). The problem is that some of these subsites provide users with no way of returning to the main site, creating a headache for them and stranding them where they don’t want to be. Yahoo is actually an excellent example of a main site and subsites done right, as users are never stranded and can always click on the home button to return.

On the issue of search, unfortunately, a lot of sites still either fail to search the entire site for search terms or return results that fail to even match users’ search terms in the first place.

And while filters and facets (essentially filters for various attributes of objects in a set of content) are well-intentioned, they’re much of the time either tagged incorrectly or are insufficient, thereby creating confusion.

Information architecture foul-ups

Information architecture should, in many ways, be the heart and soul of good design. Essentially, it’s what helps users understand your site environment and content quickly, so they find what they want. It involves labeling, organizing and structuring your content in the clearest way possible.

The usability study again found stubborn, repeated mistakes designers still make in this area, just as they did 20 years ago. These include:

  • Overwhelming users with excessive information
  • Presenting users with hidden links

Studies show that users don’t really read web content; it’s more like they skim or scan said content instead. That’s why content should be chunked, in small and short paragraphs, and broken up with everything from bullet points to enumerations for better reading. The last thing you want to do is put huge blocks of text before your users.
Wayfair.com is a case in point for how to present information to visitors. Note how its content is easily digestible, as it’s efficiently broken up.

On the problem of hidden links, you’d be surprised at how many times designers hide links to relevant site content—for example, the menu of a restaurant—in the same column as ads leading to external links. The long and short of it is that most users won’t be able to find such relevant links amidst all the ads, which makes considering the placement of relevant links extremely vital to design.

Will it get better soon?

Part of the problem is that many designers just aren’t usability experts, but that’s no excuse. When you’re designing, you have to be obsessed with providing your users with a superb UX. Otherwise, your site’s usability, conversions, on-page time, and sales simply drop—and no client will tolerate that.

It will be interesting to see if, in another 20 years, we still see studies like these, talking about how design errors from decades ago are still haunting our web-design community.

LAST DAY: Woodford Bourne PRO Family of 18 Vintage Grotesque-Style Fonts – only $15!

Source

from Webdesigner Depot http://www.webdesignerdepot.com/2017/01/3-web-design-errors-that-just-wont-die/

Wednesday, 4 January 2017

Yes, You Need a Pattern Library… Just Not Yet.

Designer guilt.

I feel it all the time, I’m sure you do too. I feel this guilt when I fail to do something that the design community has insisted that all designers must do.

When I jump right into high-fidelity prototypes, I feel guilty. When I rely too much on my own assumptions rather than user insights, I feel guilty. And, when I fail to start a pattern library at the outset of a new project, I feel guilty.

For the first two points, sure, you should feel guilty. These are best practices for reasons I won’t get into here. (Don’t believe me? Take a look here, and here.)

But should you feel guilty for not starting a pattern library?

I’ve realized that the answer is No. You shouldn’t.

I’m not suggesting you don’t need a pattern library at some point. You do. Just maybe not right now. In fact, creating an obligatory pattern library too early in your project could be slowing down your process.

How? Well, at the beginning of a project it’s beneficial to be a little messy. Keeping things loose is key to a Lean UX process as you test assumptions to determine what your users need. Now is not the best time to focus on your pattern documentation.

After a while, though, the strain of not having a pattern library will set in. You’ll know that it’s time to start investing in your pattern library when these four signs emerge:

You’re having the same discussions over and over again

Developers will often tell you they abide by the principle of DRY — Don’t Repeat Yourself. This keeps their code clean, and free of redundancies.

Pattern libraries can help product teams follow this principle as well.

By the time we were a few months into building our app, my team was feeling a sense of deja-vu when discussing our designs. What pattern do we use for opening a modal again? What should the text field look like on this page?

A shared pattern can help avoid these cyclical discussions. Now, when the question of what pattern to use comes up, we have a reliable point of reference.

Your team is referring to the same patterns by five different names

“Let’s use the modal that fades as it shoots up and has a typeahead search field.”

Yes, I said this in a meeting. No joke. This was one of those moments when the stark realization of our need for a pattern library set in.

Pattern libraries can help create a common language across your team, and departments. When you say “frying pan”, you can assume I have the appropriate image in my head. In the same way, you could say “Modal List Picker” and your team will know exactly what you’re talking about.

Small inconsistencies are mounting

It’s an unfortunate reality, but your app will have a few tiny fissures at the start. An outcast font here, some renegade margins there. That’s OK. You’re still figuring things out.

Over time, though, these tiny fissures begin to add up to more serious cracks in the user experience. Your app may start to feel unpolished, asymmetrical.

Malcolm Gladwell once wrote how people can detect fraudulent art within seconds. You don’t want to risk your users writing off your app in the same, unconscious manner.

The process of creating pattern library can help your team focus on identifying and fixing these inconsistencies before they get out of hand.

New teams are working on the product

During the initial stages of a new product, it’s common for a small team to take complete ownership. This keeps everyone focused, so they’re able to react to customer needs and insights as fast as possible.

As the product grows, the amount of teams and contributors will grow as well. Without pattern documentation, new teams may rekindle the pattern debates you thought were over.

A pattern library can help in communicating the what, how and why behind your patterns to new teams and stakeholders.

It’s best to remember that pattern libraries are tools, not dogma. Yet, if you’re designing a product, you’ll feel the guilt. You’ll worry you’ve ignored practical advice and have let your team down.

That’s OK. It’s more important to take some big leaps of faith, watch your ideas fail, and keep on learning and iterating.

You’ll build a pattern library someday, don’t worry. The time will come when you can’t ignore strain. Best of all, it won’t feel like an obligation.

It’ll feel like an epiphany.

 

[– This article was originally posted on Medium. Republished with the author’s permission. –]

Course Bundle: Clients From Hell’s Complete Guide to Freelancing

Source

from Webdesigner Depot http://www.webdesignerdepot.com/2017/01/yes-you-need-a-pattern-library-just-not-yet/

Tuesday, 3 January 2017

Building design success from failure

The longer you work as a designer, the more opportunities you’ll have to look back and say, “What was I thinking?” It’s a natural part of your evolution. Over time, both your skills and your portfolio will grow. As a result, you’ll undoubtedly find projects you’d do differently if you could go back in time.

Personally, I’ve designed (at least) a few websites that were total clunkers. Some of it is just that design trends change over time. But there are also sites that were just plain bad in any era. A few of them are still online and I can’t wait until they go away, hopefully to be replaced with a highly-profitable redesign.

But we humans, usually, learn from our past. And for designers, so much good can come from these experiences. Let’s explore the positives you can reap from the worst designs of your life.

Failure can be good for the soul

From the time we’re born, we are taught that failure is something to avoid. Some of us have quite a desperate fear of it. But in all reality, failure is a part of everyone’s life.

Learning to accept failure will ultimately lead you to a better place.

If all you’ve tasted is sweet success then you’re missing out. While none of us set out to fail on a project, there is an opportunity here for self-improvement.

Take a look at why the project failed, and, just maybe, it’s only a failure in your eyes. Look at the factors involved and figure out what, if anything, you might do differently if you had another chance.

When looking back, you may find that a client took your great idea and “tweaked” it until there was nothing left but rubble. Or, maybe you just royally messed up. Whatever the cause, you should be able to pinpoint some areas where you can improve.

For example, if client interference is a major culprit, you might learn to have a frank discussion with future clients about the pitfalls of such behaviors. Or, you might learn to leave that bold (hideous) color scheme alone.

Learning to accept failure will ultimately lead you to a better place. From it, you can move on and do better the next time around.

Discover the benefits of focus

Often, I’ve found that my design work is at its worst when I’m having trouble focusing. It’s easy to feel the need to keep plowing through your work – even when you’re just not feeling it. That’s when you’ll learn that it’s time to take a step back.

Go do something non-work related for a bit. When you get back to the old drawing board, you’ll feel more refreshed and ready to take on the task at hand.

Obviously, you don’t want to miss any important deadlines. But above all, quality will be appreciated more than speed. A design fail that occurred during a time where you felt rushed is a clear sign to slow down and do things right. Lesson learned.

Simple is better

There have been times when I tried to make something a little too perfect. Maybe I took a client’s direction too literally. Or I attempted to impress someone by doing something I’d never done before, and probably wasn’t too comfortable with.

You’ll often find that a more simple approach works best. Starting out simply doesn’t mean that you aren’t going to provide a detailed design in the end. On the contrary, starting with a simple concept can stir up the creative process and lead you to add in the finer points as you progress through a project.

Most of the time, a design is not going to be immediately perfect. There’s a method and process to creating something beautiful.

There are some projects you should just avoid

We all like to think that there’s nothing we can’t do. But over time you may find that there are certain projects that just aren’t a great fit. Looking back at my own mishaps, I see a common thread of people and projects that weren’t at all in my best interest.

…trying to fit a square peg into a round hole doesn’t work.

Especially when starting out in the design field, you might be tempted to take pretty much any work that comes along. You’re poor and a bit hungry. You’re trying to build a reputation.

The reality is that trying to fit a square peg into a round hole doesn’t work. Worse, it can actually do more harm than good to your confidence and reputation.

This doesn’t mean that you shouldn’t challenge yourself by trying something new and different. It’s more a matter of giving yourself the best chance to do your very best work. If you have serious doubts about a person or project, you might be better off going in another direction.

It’s all part of the experience

Even the most talented designers will have a few projects that just didn’t work out as well as they’d hoped. Some may be categorized as failures. What separates the best from the rest is the ability to get back up (and learn from) past mistakes.

As the old saying goes, “There’s no substitute for experience”. Experience is what allows us to expand our horizons and improve. It adds to our creativity and helps us become who we are.

Failure can serve as both an important teacher and reminder of what makes for great design. So, the next time you aren’t quite happy with how something turned out, don’t get too discouraged–although it is fine to have a brief period of mourning.

Instead, see it as an opportunity to become even better. Take what you’ve learned and chalk it all up to just another life experience. It will make the success of your next killer creation taste even sweeter.

Kameleon’s 1500 Color-Changing Vector Icons – only $27!

Source

from Webdesigner Depot http://www.webdesignerdepot.com/2017/01/building-design-success-from-failure/

Monday, 2 January 2017

Essential design trends, January 2017

New year, new design trends. One of the great things about web design is that it is constantly evolving. You can find trends or even just hints of things to come almost by chance as new ideas seem to populate all at once. This month’s examples are a lot of fun with websites using space in interesting ways, new online shopping experiences and the return of pastel color palettes.

Here’s what’s trending in design this month:

1) Exaggerated use of space

The right amount of space can make or break a design. Whether it is white, a background color or surrounds text or images, “empty” space in a design can speak volumes.

Exaggerated use of space is one of those design trends that can be a lot of fun, and when used well it can be rather effective in helping users know just how to look at or use a website or app. Open space is an extension of minimal styles that have been popular for some time, but with one major exception: Rather than a symmetrical outline with space all around, these designs balance images or text with space in a more asymmetrical format.

Think about it from the user perspective. They will likely be drawn immediately to the open part of the design (whether they think about it consciously or not). From there, the eye will hop to the more populated part of the design. The two step process grabs users’ attention and almost shows them where to look. (Pretty smart, right?)

This simple balancing act is visually interesting and great for making a strong impact. Look at the examples below and think about the space in relationship to what you see next:

Vera Wang: Space on the left moves the user to the clothing on the women. (Perfect for a fashion designer.)

Big Youth: Space around the text draws users to the headline. (The headline should always be one of the first things someone looks at on the page.)

David Robert: Space pulls the eye first to the person and then to his bio. Contrasting light and dark elements also help enforce this movement. (Interesting because you read from right to left and it feels quite creative. Something you’d probably look for in a designer.)

 

2) Shopping experiences

When it comes to shopping online, experience tend to fall into two categories: The almost seamless experience offered by major retailers such as Amazon or the clunky too-many clicks to checkout experience that is common among small shops.

There’s got to be something in the middle, right?

More retailers are opting for highly visual, more experiential design styles for their online stores. While the trend seems to work best for shops with only a few items to choose from, it’s a neat take on user experience.

The examples below tend to come from shops that are a little higher end and don’t hit you with huge navigation menus and hundreds of options right from the start. The focus is on the beauty or uniqueness of the item and the story behind it. Then on scroll or hover do you find that you can actually buy the item right there.

The design has a more visual feel, using Instagram-influenced photos, and card-style interfaces that encourage clicks. Items in these retail designs don’t seem to come with many options per item; items are more specifically made to order as is.

While this concept wouldn’t work well for shops with large inventories or complicated levels of options or customizations, it is a nice alternative for retailers that want to exhibit a high-end feel with a high-end design.

Each of these examples uses brilliant hover effects to show pricing but make the user want the item before they even think about impact to the pocketbook. The other commonality? You can’t find a single price until the scroll. The first screen is designed to increase desire through a product story.

3) Pastel color palettes

Softer colors are coming back in a big way. While brighter, bolder palettes have been the go-to for some time, that seems to be shifting.

The usage, however, is not. Pastel hues are being used with flat and material design projects in a way that gives new life to these design styles.

While you might think pastel colors are best saved for backgrounds, that’s not always the case either. While a pastel background can be easy to work with – many styles of text are highly readably on light backgrounds in darker colors – they can be used in other ways as well.

Pastel based images for hero headers and dominant imagery is popular. Many designers seem to be pulling color palettes from these images. (Or is it the other way around?) Either way, image and photo matching with pastels palettes can be a striking combination that set a softer tone, such as the website below for The Bridal Planner. The Infinity Foods uses a similar technique, pairing pastel neutrals with images that have a similar color theme.

Other designers are using less saturated color palettes as a new take on trends that some could argue to be overused. Rentberry uses a fun palette with a distinctly material style. What really makes the design pop is that it works and looks just as you would expect, but the color almost causes you to do a double-take. This little element of surprise is a fun bonus for users. (And an easy way for designers to make a mark on a design aesthetic that is all too common.)

Conclusion

While trends can be pinpointed in snapshots of time, they don’t always hang around. Which of these trends do you think is the most applicable to your projects? How do you see them evolving? (The shift in shopping experiences is intriguing and has the potential for staying power for low inventory, high end shops.)

<

p class=”p4″>What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.

Vintage Professional Display Fonts and Shapes Bundle – only $15!

Source

from Webdesigner Depot http://www.webdesignerdepot.com/2017/01/essential-design-trends-january-2017/

Sunday, 1 January 2017

Popular design news of the week: December 26, 2016 – January 1, 2017

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.

Evil Icons – Simple and Clean SVG Icon Pack

 

Google’s 2016 Year in Review

 

2017 Web Design Industry and Technology Trends

 

The Best User Interface Upgrades of 2016

 

Rellax.js – Lightweight, Vanilla Javascript Parallax Library

 

Vibrant Colors for Apps and Sites

 

3 Obsolete 1990s UX Design Classics that We Love

 

Review of Popular Design Trends for Interfaces in 2016

 

The Best Chrome Extensions to Boost your Productivity in 2017

 

Virtual “stress-o-meter” to Stay Calm and Carry on

 

YouTube Money Calculator – The Easiest Way to Estimate YouTube Earning Potential

 

10 Startups Web Designers Should Watch in 2017

 

A Design Yearbook of 2016 : Design Community has a Lot to Be Proud About

 

Design Trends in 2016 & What to Expect in 2017

 

3D Letters with Three.js

 

These are the Ugliest Tech Products of 2016

 

The Influence Of Color

 

2017 Trendy Google Fonts Combinations

 

Senior Designer Isn’t a Dead End: 3 Paths of Development for Experienced Designers

 

Forget Rose Gold. In 2016, Tech’s Big Color Trend was Ombré

 

My Lightbulb Moment with Modular Design

 

Musixmatch Brand Site

 

Google Shows HEX Values + Colour Picker in Search Results

 

Markdown.css: Make HTML Look like Plain-text

 

A Robot is Coming for your Job

 

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



Source

from Webdesigner Depot http://www.webdesignerdepot.com/2017/01/popular-design-news-of-the-week-december-26-2016-january-1-2017/