Web Design Trends 2016: How Cards Dominate Design

by 

Practical as they are visually attractive, card interfaces are more than just a trend.

With 2014 marking the first time mobile internet usage exceeded desktop, web design is now favoring the small screen as responsive design becomes mandatory. The result: simple interface styles like the new flat designminimalism, and especially cards are more popular than ever.

How Cards Dominate Design

Source: Formerly Yes

The usefulness of the card UI pattern goes beyond loading times and translating across different screen sizes. Bite-sized content matches the attention span of most web users (especially on mobile devices). Nurtured by Pinterest and then popularized by social media sites like Facebook and Twitter, card UIs can now be found across websites of all industries.

In this article, we’ll explore the rise of the card UI pattern: why they’re useful, how they fit into responsive and material design, and what to expect from them in the future.

 

What’s Container-style Design?

To understand this pattern, you must first understand the card itself.

Cards are basically small containers of each information, with each card representing its own singular thought. A card can hold all types of content — visuals, text, links, etc. — but all fall under a single unified theme.

Filling the screen with such independent containers of information is what the Guardian calls the “container model.” This provides a mucher cleaner and instantly comprehensible interface, attuned to quick browsing so the user can go straight to what they’re looking for. (On top of that, this method lends itself to gesture controls, which we’ll explain below.) Useful and attractive: the benefit of the card UI pattern is two-fold.

 

Trello

Photo credit: Trello

Trello lets users create any card they want. Anyone can create “to-do” cards and categorize them as needed.

Not only does this illustrate the card’s flexibility, it also demonstrates its organizational power. Trello succeeds because their card format feels simpler than traditional list-style task managers.

 

UI Cards in Mobile and Responsive Design

As mentioned above, cards offer excellent compatibility with responsive frameworks, causing some like Des Traynor of Intercom to call it “the future of the web.” The pattern translates well to mobile devices for a variety of reasons, which we’ll explain now.

The Verge

Source:The Verge

 

First, in frameworks that expand and contract, cards grids can restructure themselves to fit any breakpoint or screen size. Designers can be quite flexible with the card’s aspect ratio (plus how groups of cards fit together). For example, you can set a fixed-width with variable height, using consistent spacing between cards.

Compare the above screenshot from The Verge to its mobile viewport below:

The Verge

Source: The Verge (mobile)

 

Notice how the text, image, and style of coloring remains the same as well. Cards allow for a consistent experience across devices.

You can see this advantage in play for the free design library offered by UXPin. Notice how cleanly the layout scales up from the mobile to full-size viewport.

Mobile Viewport: 

Mobile Viewport

Source:UXPin

Full-Size Viewport: 

Full-Size Viewport

Source:UXPin

Another advantage is how the card style fits accommodates gesture controls. On touch screens, the cards act as buttons without any extra effort. The idea is simple: tap the card to interact with the content.

As Fitts’s law applied to web design shows, the greater the clickable area of a button, the easier it is to interact with. How many times have we all struggled clicking the tiny text links on mobile devices?

Cards and Material Design

Material Design relies heavily on cards, and their thorough analysis of the technique holds a lot of weight. Their description of cards in the material design guide is worth checking up if you’re looking for a thorough explanation.

The Verge

Photo credit: Google

 

The Future of Cards

While the card UI pattern is constantly reshaping itself to fit new challenges, responsive and app design will probably be the most-affected design disciplines. As described in Web Design Trends 2015 & 2016, this shift is in part due to the paper-like influence Material Design is having over Android apps.

1. Technology

Cards might not remain static for long. As web performance improves, so too will the ability to support richer multimedia content. You’ll probably see much more detailed elements, such as auto-updating content that won’t slow down the entire experience.

Use Your Interface

Photo credit: Use Your Interface

Videos replacing images (an idea that some designers have flirted with for years) might become more popular. Use Your Interface (above) features animated GIF cards that make the homepage a joy to experience.

2. Deeper Interaction

In the near future, cards may also get more creative than acting as links. As we see with Material Design, cards vary depending on individual interactions, with such features as automatic sorting and real-time updates (i.e., weather forecasts).

Deeper Interaction

Photo credit: Google

Windows Phone has already started auto-sorting the cards , but there’s definitely potential to infiltrate the larger mobile user base.

 3. Size

Side-by-side with the trend of hero images, cards are also adopting a “bigger is better” policy.

Big cards allow for more detail and intricate typography, which means more opportunity for delightful visual design. When used interchangeably with smaller cards, larger cards allow for greater freedom in visual hierarchy.

How Arkitekter

Photo credit: How Arkitekter

HOW Arkitekter (above) mixes large- and medium-sized cards as part of its navigation. Some cards are links, while others simply provide static information. Wide gutters separate the cards, which provides plenty of breathing room.

4. Wearables

Thanks to Google Glass, cards have now been established as a staple of wearables UI design.

Wearables
Photo credit: Google

While critics may consider Google Glass a commercial flop, others think it has a chance in the business market. Regardless, wearables must make efficient use of space. Cards, then, are the most practical choice.

 

Takeaway

Across all mediums and devices, cards are becoming a mainstay for organization and functionality. Their current form may change as they evolve alongside technology, but their presence is ensured.

After all, these digitized squares are hardly the first form. Don’t forget that, not too long ago, cards were just sheets of paper that contained bits of information for one central idea.

 

9 Bank Marketing Ideas for 2016

Creative Evangelist at HyperDrive Interactive I FanMail Marketing I Founder, Brill Creative

I was recently asked by Marissa Wilson of Enplug to give my thoughts on marketing for the financial industry in 2016. Below is my response. At the bottom is a link to the full article with what myself and a couple of other industry leaders had to say.

 

“For marketers in the financial industry, embracing new technology can be an uphill challenge. With legal and compliance chiming in and an overall mistrust of banks within the general public, it isn’t easy.

Instead of worrying about checking off their social media to-do list, or jumping on board with the latest and greatest technology, banks need to leverage their data to better understand and serve their existing client base.

We see an incredible opportunity for banks to deliver much more personalized, relevant and timely messages to their current customers. We often get so excited about using technology that we forget about the human beings on the other end. Better to understand and nurture what you have than always be looking for more.”  — Dan Brill, Creative Evangelist

 

Read Marissa’s full blog post here

 

New Twitter Header Dimensions

Credits: post and template inspired by the amazing and ultra talented Canadian Pauline Cabrera @Twelveskip. Known for potent & thought provoking Blog headlines (like this one), blog posts and absolutely stunning templates similar to the one you see below. Check her out.


As most of you may already know, Twitter has rolled out their brand new design for everyone. Here’s some info and a template to help you get the most out of it without pulling your hair out.

TWITTER HEADER SIZE

Recommended Dimensions (6-10-14)

Twitter’s recommended dimensions for header photo is 1500px in width X 500px in height. But the size that we’ve found works really well is:

  • 1500px (width) X 421px (height)

You Should Use This Template

Twitter’s new header setup can be a bit complicated. You will lose the original quality of your image after the upload, so I suggest you to save your work in its highest quality.

Another problem is, the whole content of your image won’t fit in the header since it automatically gets cropped and upscaled for some reason, so you need to know the “visible” and “invisible” areas to make sure your followers can view what you want them to see on your header photo. Here’s the template I’ve made:

twitter-header-template-brillcreative

Click the image above to download the original size.

  • This template has been tested in different screen resolutions and in Twitter app using iPhone (5).
  • Do not add anything in the “invisible areas” or they will not show up.
  • You may still use the “invisible on iPhone app” parts but I suggest not to put anything important in those areas.

If you need help designing a creative new Twitter Header or any other custom graphics please don’t hesitate to reach out, we’re happy to discuss it with you:

danbrill@brillcreative.com

TEDxCincinnati and Brill Creative Make it Happen

Brill Creative is proud to partner with TEDxCincinnati and the TEDxCincinnatiWomen team to bring this exciting and inspirational event to our area. Much like the TED.com founders we too believe passionately in the power of ideas to change attitudes,lives and ultimately, the world.

Visit the site, learn more, get involved or become a sponsor yourself.

Public Distrusts Social Networks

There’s widespread concern about privacy on these networks, according to a new survey

May 25, 2010 – Mark Dolliver

The presence of one’s near and dear ones on an online social network doesn’t stop people from being wary of the network itself, according to the findings of a Vision Critical survey released this month.

Respondents to the polling (fielded online in March) were asked how trustworthy they think online social networks are. Few of the U.S. respondents said they regard such networks as “completely trustworthy” (5 percent) or “very trustworthy” (11 percent). Thirty-five percent rated them “fairly trustworthy.” Nearly half said they’re “not very” (32 percent) or “not at all” (17 percent) trustworthy. (The polling was also conducted among adults in Canada and Britain, but this story focuses solely on the U.S. responses.)

Privacy is clearly an underlying concern behind such broad distrust. Sixty-three percent agreed with the statement, “I am very concerned about my privacy on online social networks.” Fifty-five percent agreed that they “worry that online social networks are selling my personal information to advertisers.”

The survey also asked respondents whether they agree with the statement, “I don’t mind online social networks using my personal preferences to target ads I see because it means they’ll be more relevant.” Six percent “agreed strongly” and 20 percent “agreed moderately.” But they were far outnumbered by those who “disagreed moderately” (23 percent) or “disagreed strongly” (30 percent, with the rest declining to choose or saying the question doesn’t apply to them).

It’s not as though word of mouth from family and friends is regarded as gospel. Fewer than half (47 percent) rated as “completely” or “very” trustworthy “friends/family/contacts discussing or recommending a brand/product” in the context of a social network.

Despite such negative opinions, though, 48 percent agreed that online social networks “are good places for brands/products to advertise to consumers.” Indeed, 18 percent said they’ve “purchased a product because of something I saw on an online social network,” with the figure rising to 28 percent among the 18-34-year-olds.

Zippo Tries to Cash In on iPhone App

Can lighter company ignite a new revenue stream?
May 17, 2010 – Brian Morrissey

Zippo has been the case study for how to create a popular brand application for the iPhone. Now, the company hopes to turn that popularity into a new revenue stream.

The 78-year-old lighter brand has launched an in-app store that carries a line of skins for its Virtual Zippo Lighter application that will set back iPhone and iTouch users 99 cents. There are 150 premium skins, including imagery from Harley-Davidson, Bob Marley, The Who and Ozzy Osbourne. Zippo plans to add new skins each month.

Virtual Zippo Lighter launched in January 2009 as a simple application that lets users create a digital flame on their screens. It proved particularly popular for use at concerts during what the company deemed the “Zippo moment” of calling for an encore. Since its launch, the app has tallied over 10 million downloads.

While a smashing success for a brand app, Zippo can’t definitively say it has increased lighter sales, according to Brent Tyler, event marketing and promotions manager at Zippo. Site traffic has improved, though, he added.

“It’s not ideal, but that’s the reality,” he said.

Zippo is not the first brand to view the iPhone as a business opportunity. Kraft charges 99 cents for the iFood Assistant. Virgin Atlantic has a pair of premium applications: a $4.99 Flying Without Fear app and its recently released $1.99 Jet Lag Fighter.

The success of virtual goods sales on platforms like social gaming and mobile ringtones shows that consumers will shell out for virtual items so long as the price is right, said Jon Vlassopulos, CEO of Skyrockit, the developer that built the Virtual Zippo Lighter. There’s no reason brands can’t also play in the arena, he added.

“It’s a very interesting time for brands to use their marketing dollars to create new IP that’s advertising as content,” he said. “It can now become a new SKU or product beyond just communications.”

Apple "What Is iPad?"

Brand: Apple iPad
Agency: TBWA Media Arts Lab
Review Date: May 13, 2010

Great. Another iPad ad that makes me want to junk my Kindle. Amazon’s e-reader looks so sad and colorless in comparison. This new commercial from TBWAMedia Arts Lab sends me into another useless want-need internal debate. The spot poses the most basic question — “What is iPad?” A series of shots showing people using the ”beautiful” device to read newspapers and books, update Facebook pages and play music provides the answers. “There is no right way or wrong way to use it,” the voiceover says. It’s not only “crazy powerful,” but “magical” too. I can do without magic in my gadgets, but the case for a gorgeous do-all portable is compelling. Technophobes fear not — we’re informed that we “already know how to use it.” And for folks that just want to be trendsetters, “It’s already a revolution and it’s only just begun.” That’s the kind of not-so-subtle persuasion that stands to make the iPad the most culture-changing device since the iPhone. –Eleftheria Parpis

watch commercial

source

Born-Again Ads – The first generation of iPad marketing aims to give brands a turbo-charged sheen

May 10, 2010 – Eleftheria Parpis

Gap makes iPad play.
Michael Ancevic, svp, group cd at Mullen, is nearly as excited about Apple’s iPad as those in the publishing industry. (The only difference: his future may not depend on it.) While working on an ad that will run in a Conde Nast title on the new tablet — he declined to name the brand or magazine — he said, “We felt we were doing something that’s going to change everything. … It’s print on steroids. What if that photo came to life? What if you can see different angles of a certain product or demo it? It picks up where print left off.”

David Hewitt, mobile practice lead and cd for the Southeast region at SapientNitro, calls it “the most compelling mini-media consumption device” there is. Advertising on it, he adds, is as much about reaching the early influencers as it is about the buzz. “A lot of clients are using this as a first-to-market opportunity,” says Hewitt.

The industry has iPad on the brain, and agencies and brands alike are busy assessing ways to make their marks on the hottest new product to hit the technology sector since, well, the iPhone. Brands that have jumped in include Cadillac, which paired with trend-spotting site Cool Hunting (and BBH Labs) for an app that helps promote the CTS and CTS-V coupes, and Procter & Gamble’s Pampers, whose app, Hello Baby — its first mobile-device application — allows pregnant women to track their babies’ development.

Serena Connelly, cd at StrawberryFrog, which created the Pampers app, says that it was important for the brand to have an early presence. “Pampers wants to be present and part of innovations in technology that help to redefine mass culture,” says Connelly.

Apps are probably the easiest and most cost-efficient way for marketers to get into the iPad game because existing iPhone apps can be repurposed for the larger device. Dan LaCivita, president, Firstborn, says the agency is extending clients’ iPhone apps as well as creating new ideas.

“It all depends on the initial app itself,” says LaCivita. “If the apps can use the same functionality and it’s not a lot of redevelopment, the physics and math are going to be the same.” Size is the main issue, he adds: “For example, if you have an [iPhone] app that’s graphics heavy … we would have to redesign those images to make sure the quality is there, that the aspect ratio is correct.”

Hewitt, however, says taking the same app from iPhone to iPad is rarely optimal.
Text and graphics are going to get a little blurry, he notes, not to mention many popular iPhone apps rely on the phone’s camera and voice capabilities, features not yet available on the iPad.

Early entries that have optimized the features of the iPad so far, Hewitt says, are apps that allow users to manage their social networking, such as TweetDeck; to shop and browse, like apps for Gilt or eBay; or to watch videos, like those for YouTube and Yahoo Entertainment.

Because it’s so early in the game, the challenge, of course, lies in not knowing how much can be done on the iPad, and what will and won’t work.

“We haven’t even cracked the surface on the experiences we can create,” says Hewitt.

read more…

iPad Hits 1 Mil. Sales Mark in a Month

The iPhone took twice as long to reach the same milestone

May 5, 2010 – Antony Bruno, Billboard

For those wondering if the iPad would take off the way the iPhone did, Apple answered that question by revealing that it has sold 1 million iPads in less than a month.

By way of comparison, the iPhone took twice as long to reach the same milestone. And if you’re thinking these sales are merely indicative of only the Apple faithful buying up their new toys, two new developments point to additional sales success in the coming months.

First is the introduction Friday of the iPad 3G, which features both WiFi and wireless access to the AT&T network. It’s not clear how many of the 1 million iPads sold were for the initial WiFi-only verion and how many were for the iPad 3G. While more expensive, many fans have indicated their intent to wait for the more versatile iPad 3G before pulling out their wallets. Piper Jaffray analyst Gene Munster this morning estimated that Apple sold 300,000 iPad 3G devices this weekend.

Additionally, the 1 million sales are domestic only. Apple will begin shipping the iPad internationally later this month, opening multiple new markets for new sales.

Apple also said that more iPad users have downloaded more than 12 million apps for the device since it went on sale, and more than 5,000 apps have been created specifically for the iPad. Apple didn’t say how many were paid and how many were free. It also didn’t break out how many of the 12 million downloads were iPad-specific apps or those created for the iPhone which can also run on the iPad.

iPad Nation: Why marketers need to lay back and take notice

May 4, 2010 -By Ilana Bryant

The cultural hysteria around Apple’s new iPad has left many marketers wondering whether it really is a breakthrough platform or just a new flavor of Apple Kool-Aid. I suggest marketers sit up — or lean back or lie down or get in whatever position is best for using this titanium tablet — and take notice.

iPad sales hit 1 million in a third the time it took the iPhone, according to Apple. It works in more usage contexts than PCs, laptops and smartphones, and it will take companies where other technologies can’t go. It brings a brand into every room in the house in a larger, more consumable format, enabling people to relax with it on the sofa and use it lying in bed. And the potential for a 3G-enabled iPad outside the home is huge. (A harbinger is the current success of the Star Walk app that lets the user put the iPad up towards the sky and be an amateur astronomer.) I’m personally looking forward to outdoor iPad opportunities for auto, travel, and home and garden brands.

As far as it being a mobile-entertainment platform, it’s better for viewing content than laptops, reading devices or smartphones. Its larger screen and clever, wide-viewing angle feature ensure good views of the images even when the tablet is held sideways.

And TV advertisers, take note: Recent qualitative research from PHD among iPad owners indicates the iPad TV experience is so good that many respondents forecast it will replace the second and third TV in their homes and, possibly, their primary TV sets. ABC’s TV app, which offers free access to the network’s shows in exchange for users watching five traditional 30-second ads per hour, generated millions of ad impressions in the first 10 days of the iPad launch.

Additionally, the iPad can create stronger emotional experiences than a smaller screen — an obvious plus for brands. Removing the mouse brings the brand experience closer to the user, and the screen’s size means we’ve moved from widgets to truly sensory experiences. Both consumer and neurological research shows that being able to interact with brands through sight and sound experiences can result in stronger emotional connections, brand associations and memory recall.

Pampers leveraged this interaction with “Hello Baby,” its app designed especially for the premiere of iPad, which allows pre-natal moms to experience their baby’s changes week-by-week with simulated life-size, 3-D images and baby sounds.

The iPad’s cinematic, touch-screen experience is also game changing. People, for instance, are buzzing about the app Elements: Visual Exploration (an interactive look at the periodical table) because of its visually breathtaking approach to the normally mundane table. Imagine the potential of this device for the visuals in print magazines. The iPad also has a willing audience of e-readers waiting. According to a CNET poll taken last week, 20 percent of iPad owners bought it for the primary purpose of reading books and magazines.

Additionally, the tablet offers a unique platform for social interaction with a brand. If you have wrestled with others to view pictures, videos or text on iPhone handsets, you know the benefits of the iPad screen. It’s also great, of course, for movies and board games. I think we’ll see a lot of multiple-user games taking off.

The iPad, which is more like an appliance than a computer, also reaches less tech-savvy audiences with high-technology capabilities. Its menu of apps is simple to use, and there are no folders so you don’t have to worry about where you save stuff and where you install it. Once the iPad goes mainstream, it will be a perfect platform for older consumers.

We know that the iPhone interface has resulted in much greater Internet use than other smartphones. And it’s clear in its first month out that the iPad has had the same impact. According to Web metrics firm NetApplications, the approximately 500,000 iPad users have a larger Internet consumption — in terms of percentage of Web traffic terms — than 30 million-plus BlackBerry users over the same period.

There’s also the product lust it inspires — for itself — which will generate more usage and thus more marketing possibilities. It’s a beautiful device that inspires the visceral reaction, “I have to have one.” Just as the phonograph was originally invented as a telegraph recording device (a relatively vertical audience) and was quickly adopted as a music recording device, and Twitter evolved from being a tool for social updates to a social organizing tool, so the iPad will likely be embraced by users who will find additional applications for it.

The launch of Apple’s iAd service that allows app developers to create advertising experiences within applications also means there’s the potential to develop new kinds of in-app ad formats.

To put it simply: the iPad is a solution waiting for a problem. And when marketers start figuring out what problems the iPad can solve for them, things will really get interesting.

Ilana Bryant is chief strategy officer at StrawberryFrog. She can be reached at Ilana@StrawberryFrog.com.

Drop us a line!