, ,

6 Design Trends to Watch for in 2014

It’s almost the end of the year, and you know what that means. It’s time for 2014 countdown lists! These are Atomic’s predictions for the upcoming year’s major trends in web design. These trends entered the stage in 2013, and we think they’ll stay big in the year ahead.

1. Responsive design. We’ve highlighted responsive design before. But we believe it’s much more than a passing fad. As we enter the era of phablets and smart watches, smaller laptops and longer iPhones, we think responsive design (and, specifically, a move toward unification) is here to stay. It’s become clear that designers can’t possibly keep up with all of the screen sizes available. Instead, we need to be designing websites that scale to fit.

2. Flat design. Call it the Jony Ive effect. Flat design means getting rid of 3D-like effects like bevels and drop shadows, and opting instead for crisp, textureless swaths of color. It’s right in line with responsive design trends (flat colors load quicker), and with the release of iOS7 this fall, is sure to become a sign of the times.

3. Minimalist design. Remember when we all needed to show off our web design chops with animated buttons, pop-up windows, tons of photos, and type so bright you had to squint? If the number of minimalist sites we’ve seen lately is any indication, it’s time to give that up. Minimalism is flat design taken a step further, removing not just color effects but all unnecessary features and content. In 2014, think lots of black and white, simple menus, quiet animations, and definitely, definitely no WordArt.

4. Full-width background images. Not quite ready to face the look of a stark-white site? One way to make your site pop—but still stick with the times—is with a high-quality background image that fills the entire screen. This only works if it’s executed right, though—take some time to learn the CSS tricks you should know to make images look beautiful on responsive sites.

5. Print-inspired typography. Proof that print will never truly die? Nostalgia for a simpler, pre-Snapchat era? Whatever the reason, typography and layouts resembling print publications have being springing up all over the Web. Fortunately for designers, staying hip doesn’t have to be a design headache. Typography options are growing and using web fonts is easier than ever.

6. Parallax scrolling. Parallax effects go hand-in-hand with the scrolling website mega-trend. It means that different elements on a web page scroll at different speeds, giving a sense of 3D movement. To avoid giving your site’s visitors motion sickness, use parallax scrolling in moderation. Check out a few great examples here.

2014 is sure to bring its own crop of brand-new design trends (who knows what we’ll be reviewing this time next year?). In the meantime, if you want to be on the cutting edge in web design, these are the trends to follow. At Atomic, we’ll be keeping our eye on what’s next as we continue to deliver great design to our clients.

Is your site looking a little, well, “last year”? Contact Atomic to get your website with the times.

, ,

Don’t Be a Copycat: 3 Web Design Trends to Avoid

As I’m sure you’ve noticed, Web design trends are changing fast. One week, a design technique is creative and cutting-edge. The next, it’s pathetically passé.

Why? Because the thing about trends is, once everybody catches on, they don’t seem all that cool anymore. (That doesn’t apply just to web design. Think of how quickly the Harlem Shake went from clever to ohmygod-make-it-stop overdone.)

I’m not saying you should pooh-pooh Web trends altogether. After all, ideas usually become popular for a reason: because they enhance user experience or offer new ways to present information. But if you’re a designer, try to understand why trends are useful before you imitate them blindly. Then, take those great ideas—and add your own twist.

Here are three trends I’ve noticed all over the Web lately. If you ask me, these are approaching Harlem Shake status. They’re all the rage now, but before long, they could make sites look out of date. Here’s how to use them without being just another hanger-on.

1. Continuous scrolling. As I wrote in a previous post, scrolling can be awesome for small sites, like product launches. Sites like this and this create a natural user experience where readers can passively scroll as they take in the “story” you have to tell.

On the other hand, one-page sites can be bad for SEO, because there’s less for Google to index. They can also be frustrating for users unfamiliar with the format or looking for specific info. If you must use a scrolling site, try anchor tags and “you are here” states to let the user know where they are on the page.

2. jQuery animations. JQuery is a great way to add a little something extra to your site. It can be used in so many ways, from animating drop-down menus to bringing background photos and other site elements to life.

The problem is that designers tend to go overboard. Too much animation can be overwhelming—and can lead to longer loading times, especially on mobile sites.

Here are examples from Apple and Tapmates of jQuery at its best. My advice: use animation in moderation.

3. Flat web design. Flat design—meaning sites without 3-D attributes like shadows, bevels, and gradients—has been huge this year. It’s great for responsive sites, since lack of texture means site elements can change format and load more easily. And flat design simplifies a site’s appearance, making users focus more on content. (It’s also part of a growing trend away from skeuomorphism.)

But I’ll be honest. I think flat design is often just an excuse for lazy designers to work less. The design possibilities in Photoshop are endless. And we should be creating sites that match our clients’ branding—not just ones that are easy.

If sites like this make sense for your brand, fine. But we shouldn’t be building them by default.

There’s no telling what trends 2014 will bring. My advice: don’t get too attached. Because if you think a trend is totally cool, chances are tons of others do, too. And if you want to stand out, you can’t just follow the crowd. To stay ahead of worn-out trends, you have to be ready to abandon convention and try something new.

Want a website unlike any other? Atomic’s designers can help create a site as unique as you are.

, ,

UI Design 101

Usability is a highly sophisticated field. And it’s constantly changing. To navigate that complexity, I keep six core principles of UI design in mind. They help me stay focused on what’s important.

You can apply these guidelines to any UI project you’ve got. Whether you’re designing web applications or washing machines, the principles stay the same.

Here they are.

Consider the people actually using your product. When I’m working on an interface, I imagine not just the general demographic I’m designing for, but the specific people. Instead of imagining “seniors,” for example, I imagine my dad or mom. How would they interact with the screen? What would frustrate them? Or make them smile?

Copywriters tell me that they work the same way. They imagine in great detail the person for whom they’re writing — even inventing details about their clothes, family, and hobbies. It helps them see their target audience clearly, and they write with more focus because of it.

Make it simple. It’s easy to get caught up in the coolness of your design. Or to shove elements in that users “might need.” Every so often, step back and remove every element that you possibly can from your interface. Be ruthless – don’t think anything is too clever or important to strip away.

Then, take a hard look at what’s left. Did you really need those extra elements? Or is the UI cleaner—and more user-friendly—without them?

Draw attention to what’s important. This guideline sounds basic—but it means everything. Think carefully about the number one action you want your users to perform. Then make that action the most prominent.

For Chipotle, that means putting “Create New Order” right at the top of the screen. For Dragon Dictation, it means placing a single red “record” button smack dab in the center of the interface—with nothing else around it.

Create barriers. On the opposite side, think about what actions you don’t want users to take—and put some barriers around them. For example, Amazon doesn’t mind if you read the “About” information on their web app. But it’s safely buried under a generic “More” navigation button.

Why? Because that information’s just not that important. It’s not central to the app’s core function: helping users quickly find and buy merchandise.

Get feedback. As a matter of fact, get lots of feedback. Share the UI with family, friends, focus groups. People who are familiar with web apps, and people who know nothing about them. Industry experts and kids just out of college. The more information you get on how real people interact with your UI, the more you can perfect it.

Just remember: collect all the data you want, but ultimately, you have to decide what’s the best design.

Consider someone performing a task a hundred thousand times. Think about the people who will use your application frequently. What are they going to get sick of? What’s going to slow them down?

For example, I hate the fact that you have to tap “Play” then “Submit” every turn on Words With Friends. That’s two taps for every single action a user performs! Multiply that by five games, two turns a day, for weeks on end. That’s hundreds of extra clicks.

Yeah, it’s just a game. But it still gets annoying. And you don’t want annoyed users for your web app.

Usability is a hugely sophisticated field, lots to learn, changing … never hurts to remember the basics.