Design Trends for 2017

While 2016 was an exciting year for design – there was a shift toward mobile-first design, video and rich imagery were hotter than ever, and animations became the norm – I’m even more excited about what we can expect to see in 2017.

 

A few weeks ago, Creative Director Alex Pineda and I held a webinar with CEO Joanna Pineda to talk about the trends that are emerging in 2017, and how you can give your members the best user experience possible by incorporating them into your web presence.

Curious about what’s in store for 2017? Check out our recap video:

 

Whether your plans for 2017 include a large-scale website redesign, building a brand new website from scratch, launching an app, or simply refreshing a few of your key pages, we’d love to help you incorporate some of these trends!

 

Which design trends are you most excited about for 2017? 
Jaime Quiroz

Front End Developer

Flexible Layout Color with CSS3 Gradients

Sometimes designers will get imaginative and create what I call an “infinite sidebar”. This is when you have a column of content on a webpage with a background color that extends to the edge of your screen (while still maintaining a fixed width for the wrapping element of the pages content – for centering purposes).

This sort of thing may initially seem like it wouldn’t really work but thankfully implementing this on a web layout is simple thanks to CSS gradients.

CSS gradients can be a headache to keep up with – the syntax is not the same across the board for browsers. We at matrix use Compass to make our lives easier. The relevant SASS that generates the gradient in this example:

.wrap {
	@include background(linear-gradient(left, #FFF 50%, #2980b9 50%));
}

The basic idea is you have two columns, one white and one blue. To create the illusion of an “infinite sidebar” a CSS gradient (left half white – right half blue) is applied to a “wrap” element, which the layout elements are contained within.

The color stop of the CSS gradient is hidden by an “inner” element (the container with a fixed or max-width). The “inner” element has a white background color, is centered on the page and is positioned on top of the wrap element.

Flexible Layout Color - demo image 1

If you then apply the same color from the gradient to the second column within the “inner” element you’ll have the “infinite sidebar” effect:

Flexible Layout Color - demo image 2

Of course the best way to understand what’s going on is to inspect the demo I’ve set up and then try it for your self!

This also gracefully degrades in browsers that don’t support CSS gradients (check it out on IE9 or less – it looks like a standard sidebar with a background color)

View the demo here.

What’s your favorite CSS design trick?

5 Top Sources for Free Stock Photos

Stock photography, when used properly, can be a real visual asset to your site. However, there is a lot of garbage to sift through to get to the good stuff and the process can be down right tedious and expensive. If you have a website or blog, there is a solid chance Professional photographer takes posed photoyou’ve run into the problem of finding quality images at an affordable price.

The major problem with stock houses is that their overly posed, stiff images tend to be severely dated, but yet they still want you to pay a premium for them. That doesn’t always seem like a good deal to me, so when I have time—and a small budget—as a designer, I tend to look at these top five free stock photography sites first.

1. Wikimedia Commons

All of the images on this site are uploaded with Creative Commons licensing, and are owned by the individual users, not Wikimedia. Creative Commons licensing basically means the photographer is graciously letting you use their image for free, but be sure to read the terms, sometimes there are conditions.

2. Compfight

This site is great because it allows you to filter Flickr images though Creative Commons, making the process much easier. The images are all uploaded by real users, and therefore appear much less stocky.

3. Stock.xchng

This is a more traditional stock house, just without stock house pricing.

4. morgueFile –  The word “morgue” is taken from the name of the room from the publishing world in which all clippings and image files were kept. Probably not what most people think of when they hear “morgue.”

5. Wylio

This site was set up with the blogger in mind. They make it easy to search, resize, download and imbed images into your blog all at once. 5 free images per month, with reasonably priced upgrades. You just have to grant access to your Google picasa web album.

Bonus! 6. Unsplash

This is technically a Tumblr page, not a searchable stock site. It’s full of beautiful, artistic, completely free, do whatever you want to them, images created by the people at ooomf. If you subscribe to their page, they’ll send ten new images to your inbox every ten days. And who doesn’t want eye candy sent to their inbox?

Knowing when you can and cannot legally use an image can be challenging, so make sure you read—and follow— the licensing info that accompanies the image. You don’t always have to “get what you paid for,” you just have to know where to look.

What’s your favorite free or low-cost resource for stock imagery?

Summer Intern

The Psychology of Web Response Times

Hi!  I’m David Reich, and I’ve been interning at Matrix Group for the summer. I’ll be writing a post summarizing my experience here before I leave, but I’ve still got a bit more time, so today I’m posting some slightly more technical content. clock close up

One of the most interesting things I did for my internship was research. A few times, I was assigned to study and summarize certain aspects of web development.  This meant I got to learn about both my research topics and, just as usefully, how to write professionally.

Recently, I did some research about design and psychology of response times in application development. Not just web app development, either – the principles that apply to Matrix Group’s products are just as applicable to other types of interaction between humans and systems like games, telephones, or even conversations.

Temporal Cognition: how long is too long?

When interacting with a well-designed piece of software, the user enters into a ‘conversational’ mode with it. Users receive useful responses just as quickly as in a verbal interaction, and feel just powerful as when manipulating physical tools. The application moves at the same speed they do, and never interrupts their thought processes, so they can reach a productive state of ‘flow’.

That’s for a well-designed application. What, then, is the quantitative difference between software that works with the user and software that breaks their concentration? In 1993, Jakob Nielsen described three boundaries that separate the two. George Miller, 25 years before, went into greater detail with a similar conclusion. In the context of user-interface design, that research might seem ancient, but in psychology it isn’t. People today have the same temporal cognition that they did forty years ago. Miller’s research isn’t outdated; it’s categorical.

First Boundary

Nielsen’s first boundary lies at 0.1 seconds.

A tenth of a second: this is time that it should take for a character to appear on the screen after being typed, for a checkbox to become selected, or for a short table to sort itself at the user’s request.  When it takes less than a tenth of a second for the user’s command to be executed, the user feels like they’re in direct control of the software – as direct as flipping a light switch or turning a doorknob.  People won’t even register waiting times of less than 0.1 seconds.  If an application takes half a second to run a JavaScript function, though, users will perceive the computer taking control.

Second Boundary

The second boundary is at 1 second according to Nielsen, but 2 seconds by Miller. In either case, it’s the point at which the user is in danger of losing their productive sense of flow. When the user is forced to wait for less than 2 seconds, they’ll notice a delay, but it probably won’t feel unnecessary or distracting. For delays between 0.1 and 2 seconds, a progress indicator is unnecessary, and might even be distracting.

Third Boundary

Neilsen and Miller also disagree over the time of the third boundary. Nielsen puts it at 10 seconds, and Miller at 15. This third boundary is the point when the user loses focus on the application and shifts their attention to something else. It should be avoided whenever possible. Times in between the second and third boundaries – between 2 and 10 seconds – should have some sort of progress indicator.  A spinning cursor is appropriate for times in the lower end of that range. For times above 10 seconds, assume that the user’s focus on their task has been lost, and that they’ll need to reorient themselves when they return to the application. A progress bar that either estimates the percentage of completed processing or provides some feedback about the current task is vital. Waiting times of longer than 10 seconds should only be used when the user has just completed some task, and the user should be allowed to return at their own convenience.

Key Landmarks

Those three boundaries – 0.1, 1, and 10 seconds – are the key landmarks of responsiveness for web applications. I would attribute Nielsen and Miller’s disagreement over precise numbers to the vagueness and context-dependency of the entire question. Nielsen’s numbers, powers of ten, are prettier and easier to remember, but Miller’s may be more psychologically accurate.

A lot of this sounds very academic and theoretical, but it could be meaningful for success of a web-based business: according to WebPerformanceToday.com, 57% of consumers say that they’re likely to abandon a page if it takes more than three seconds to load.

Sources:

Do you agree with these studies? How long do you wait for a task/web page to complete or load?