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

 

How to Create Memorable, Shareable Emails

October 12, 2015 // 12:00 PM

How to Create Memorable, Shareable Emails [Infographic]

Written by Lindsay Kolowich | @

When was the last time you received a promotional email that made you smile, laugh, or really think? When was the last time you liked one so much that you forwarded it to a colleague, friend, or family member?

For most of us, this happens very rarely. Most consumers say the promotional emails they receive are forgettable — and definitely not worth passing on to others.

Memorable promotional emails are a dime a dozen — and yet, how memorable an email is correlates strongly with whether or not recipients forward it to others or share it with their social networks.

One big reason for lack of memorable email content? Poor mobile experience. As of June 2015, 48% of emails are being read on mobile devices … but only 56% of B2C brands are using mobile-friendly design techniques for their promotional emails.

Email marketers need to focus on creating email content that’s not only helpful, but also memorable and shareworthy. For tips on how to create more memorable emails, check out the infographic below by Litmus and Fluent.

— Article Source

Want great email marketing? If so, we should talk. Click here.

HyperDrive Announces Acquisition Of Brill Creative

HyperDrive Acquires Cincinnati Design Firm, Expanding Strategic
Creative Capabilities For Consumer Brand Clients

Pioneer of digital marketing adds Brill Creative to its roster of companies

Indian Hill, Ohio – October 11, 2015 – HyperDrive, a 15 year old digital marketing agency, today announced the acquisition of Blue Ash, Ohio, branding and design firm Brill Creative.

Opening its doors on January 1st 2001, HyperDrive is the first company in the Greater Cincinnati area to offer 1-to-1 relationship-driven digital marketing services. “We were founded on the first day of a new century based on the idea that marketing had changed fundamentally,” said Founder and CEO Dan Heimbrock. “HyperDrive started offering customer engagement, growth and retention strategies that were ahead of the curve, and they still are today,”

Also in 2001, HyperDrive established the first agency relationship with today’s leading email marketing service provider, ExactTarget (now Salesforce Marketing Cloud). Over the years, this relationship also helped spawn two HyperDrive other companies unique to the digital ecosphere – brand-fan email marketing specialist FanMail Marketing and content marketing automation software developer, StoryPorts.

Dan-Heimbrock – HyperDrive Interactive“We have a data-driven marketing mindset that believes consumers and B2B buyers deserve respect through timely, personalized and highly relevant messages from the brands they love,” said Heimbrock. “The addition of Brill Creative will further enhance our creative capabilities and we’re poised to raise the bar when it comes to delivering positive returns for our clients.”

HyperDrive believes the addition of Brill Creative adds more ways to satisfy complex client needs that require expert digital strategy, eye-catching design and targeted delivery.

Dan Brill - Brill Creative“Our creative concepts and high level design execution will combine well with HyperDrive’s analytics-driven and ROI-based strategic programs,” said company founder Dan Brill. “I feel that by working together we’ll be able to unlock untapped potential that provides quick and nimble response to client needs when it matters most.”

About HyperDrive

Headquartered in Northeast Cincinnati, HyperDrive is one of the nation’s leading direct-to-consumer marketing firms. The company develops digital marketing strategy, permission-based email marketing, CRM systems, online demand generation and creative branded experiences. Its growing client roster features Cincinnati area companies including LaRosa’s Pizzerias, Advance Pierre Foods, and Rent-2-Own; as well as national brands Dreamfields Pasta, Sysco Foods, and Crystal Deodorants. http://www.hyperdrivei.com

About Brill Creative
With offices currently in Blue Ash, Ohio, Brill Creative provides full-service branding and design services already enjoyed by a strong roster of B2C and B2B clients including Fifth Third Bank, AAA Allied Group, Transitions, Inc., and US Bank. http://www.brillcreative.com

Responsive Landing pages for StatzHub

StatzHub-Landing-Pages-Comps-web

NEW WORK: a few months ago Brill Creative teamed up with byDZGN Consulting and StatzHub to deliver the core landing page template for their innovative new sports app! After that we delivered the first few celebrity endorsed landing pages. A couple of names you may recognize: John Calipari, Steve Smith, Larry Fitzgerald, Rob Gronkowski

About StatzHub: Statzhub is the only venue where you’ll find comprehensive information on high school teams and athletes, as well as college and pro sports (including data going back to 1869).

We gather the latest from our reporters, team pages, conference sites, news outlets, social media and other fans to make the sports news you want available in real time in one arena. The power of Statzhub doesn’t stop there. We go the extra mile to bring together records, rules, schedules, weather, directions, and standings.

Learn more at https://www.statzhub.com/
Lear more about byDZGN: http://www.bydzgn.com

Drop us a line!