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.

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

Branding & website development (Healthcare)

Eperture-Responsive-website-mockup-Brill-Creative-web

Brill Creative was recently tasked with creating a new brand identity and website for Eperture. In their own words: “Eperture’s mission is to provide configurable technologies for solving client-centric challenges with easy to use solutions. The market for these solutions can be anywhere from commercial support for the elderly to home healthcare, health data management, hospital release patient support, telemedicine and home/facility healthcare support.”

We had a great experience working with the client. In fact, the response to the final logo comp was “BEAUTIFUL!” … and I think this comment from the owner sums it up pretty well:

I am so pleased with how well the website is coming along.  … when you are done with Eperture, would you create a website for another ‘to-be’ business of mine?

It doesn’t get much nicer than that.

Deliverables: logo and identity set / digital brand assets page / responsive website development / social media assets

 

Learn more about Eperture via Facebook: https://www.facebook.com/eperturedailydo

Website: http://eperture.net

Twitter: https://twitter.com/EpertureDailyDo

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

Responsive Website Design & Development for the Arthritis Foundation’s 2014 Bone Bash

Bone Bash promo comps_Responsive siteBrill Creative is a proud sponsor of the 2014 Arthritis Foundation’s 9th Annual Bone Bash event. We’re helping revamp just about everything and here’s a peek at the latest… a new fully responsive website! Be sure to check out www.bonebash.org and grab your tickets because this event Does sell out. Keep your eyes peeled for more artwork and updates as we get closer to the event. And than you for looking!  — Brill Creative – for the greater good.

 

A Brand Revitalization for MCNi

We’ve been hard at work on yet another RFP win! This time it’s for MCNi – Mobile Commerce Network Inc.

BC has been tasked with: a new logo and identity development, brand overhaul, new core website as well as UI/UX for their client facing web portals (served up primarily via iPads), mobile icon sets, and collateral / presentation templates. Good stuff!! Here’s a peek at where we are so far.

More about the client, in their words: “MCNi is a software development, support and distribution company with offices across the United States. We develop mobile distribution, warehousing, manufacturing and retail systems designed to improve efficiencies and eliminate manual tasks. All of our solutions are built around our motto – Our Job is to Understand You.”

More to come as we finalize and revitalize this brand! Thanks for looking. db


MCNi FB Promo Comps_1 MCNi FB Promo Comps_3MCNi-FB-Promo-Comps_2 MCNi FB Promo Comps_4

 

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.

5/3rd Bank “The Card That Rocks” Campaign

FTB-BC-01A_CB_CTR_5x12 Banners

Brill Creative– Card That Rocks evolution story

In April 2011 Brill Creative was asked by Fifth Third Bank to respond to a Request For Proposal. The assignment up for grabs was Fifth Third’s Campus Banking program with the objective of introducing a whole new student banking concept. The RFP indicated that the bank wanted to create buzz around this new product and develop a weekend kickoff event for college campuses. To that end, Brill Creative assembled its team and got to work.

A five-person creative gang rolled up its collective sleeves and cranked out multiple concepts during an enthusiastic, daylong work session. The intense work paid dividends when three solid concepts emerged: One Card To Rule Them All, Power To The Pupil and The Card That Rocks. Multiple sketches and rough layouts followed until final directions were chosen for each.

Card That Rocks
* special thanks to Don Marsh and Tom Holtkamp for their assistance with typography and illustration

OneCard-comp-LgP2TP-LgCTR-comp-Lg

As final executions for each campaign emerged, Brill Creative made its way to the Fifth Third tower for a high-energy, visually captivating presentation. Following the meeting, deliberation within Fifth Third ensued. A winning concept emerged unanimously.

The Card That Rocks!

This campaign was chosen based on its stylized look, extendable nature and youthful vernacular. Now, it was time to make stuff.

Brill Creative’s creative department got to work refining layouts, writing copy and arranging photo shoots and artwork. With so many elements required, a lot had to get done in a short amount of time. Nevertheless, the team delivered and final concepts were approved.

Then, it was off to Miami where Dan Brill oversaw a photo shoot for the ages. Behind the lens was none other than rock-n-roll photographer Jason Koerner. And the venue, the private gallery of a renowned guitar manufacturer, couldn’t have been a more appropriate backdrop. Four days of prep and shooting netted killer images that would bring the campaign to life.

6.3 – 6.7 – 2011 – Brill Creative To Collaborate With Renowned Music Scene Photographer

Dan Brill, Creative Director at Brill Creative, is in Miami working with one of the most highly regarded chroniclers of the rock world. A four-day still shoot for a Fifth Third Bank marketing campaign boasts the talents of Jason Koerner Photography, official photographer of the Fillmore Miami. Koerner and his lens have inventively documented many of the biggest names in music whenever they take the stage at this legendary venue. The shoot is on location at a world class guitar company’s Miami showroom.

Images were chosen and the final pieces were retouched, manipulated and built for production files. Everything came together to comprise an impressive,
multi-media campaign for the first Getting Started weekend at Cedarville University. All the elements were on display, accompanied by a soundtrack bumpin’ from a Fender amp. The event and elements were beloved by the client, students and parents.

Fifth Third Bank, Marketing, Design, Brill Creative, Cincinnati

CTRocks-web-iMac

Needless to say, the whole thing rocked. Check out the photo shoot of the event below.

Gallery: Fifth Third Bank – Card That Rocks, Cedarville University kick off photos
Thanks to all who participated in making this campaign a success. Dan Brill – President, CCO, Brill Creative, LLC

Put the partnership to work on your next project. For a no-cost, no-obligation consultation, call 513-272-1659. Or email ideas@brillcreative.com

(The high res image gallery below is temporarily down and being moved to a new server location… they will be live again soon)

Dan Brill, Brill Creative Miami photo shoot, Jason Koerner Photography, Fifth Third Bank, Marketing, Advertising, Design, Steve Zeigelmeyer

 

Drop us a line!