17
CARD BASED DESIGNS

Card Based Designs to Amplify UI Development

Embed Size (px)

Citation preview

Page 1: Card Based Designs to Amplify UI Development

CARD BASED DESIGNS

Page 2: Card Based Designs to Amplify UI Development

A PACK OF CARDS ?

• Little Rectangles Full Of Images And Text • With Varying Sizes• Balance User Interface Aesthetics With Good Usability • Cards Completely Change The User Experience• Add An Interesting UI Element

Page 3: Card Based Designs to Amplify UI Development

EXCELLENT METAPHORS

• We Have Seen Them Before– The Business Cards Or The Visiting Cards– They Look Like Real-World Tangible Cards

• Cards Are An Interaction Model • Intuitive & Represent Content Like Real Life• Great Concept To Communicate Quick Stories

Page 4: Card Based Designs to Amplify UI Development

MAKE CONTENT ORGANIZATION SIMPLE

• Divide Content Into Meaningful Sections• Group Sentences To Form One Piece Of Content

– Distinct Sections– Gather Various Pieces Of Information

• Delivers This Amazingly Fresh User Experience

Page 5: Card Based Designs to Amplify UI Development

VISUALLY PLEASING USER INTERFACES

• Represent Information Heavy On Visuals• Visuals Is The Strength Of Cards • The Elaborate Graphics Elevate Site Or App Design

Page 6: Card Based Designs to Amplify UI Development

DIGESTIBLE AND CONCISE

• Cards Are Design Containers • Placing Content Wisely Makes them Digestible And More Comprehendible• Easy And Pleasing For The User

Page 7: Card Based Designs to Amplify UI Development

RESPONSIVE AND MOBILE DESIGN

• Card-style Design Works Well Both For – Desktops And Mobile Devices– Offers Content In More Flexible Chunks– Good Choice For Responsive Design – Easily Scalable

• Easier To Create – A Single Aesthetic Across Multiple Devices– Create Consistent Experience

Page 8: Card Based Designs to Amplify UI Development

DESIGN WITH THE THUMB IN MIND

• Cards Are Made For A Thumb • Easy & Comfortable For Users Preferring Thumb Gestures• Simple & Intuitive

Page 9: Card Based Designs to Amplify UI Development

USING CARDS

Page 10: Card Based Designs to Amplify UI Development

STREAM

• Cards Are In A Continuous Stream & are best for Creating A Natural Timeline Of Events

• They Break Infinite Stream Into Small Packets Making Them Sharable

Page 11: Card Based Designs to Amplify UI Development

DISCOVERY

• Cards allow control to the users• Content of interest naturally reveals itself• Promotes the content view as preferred

Page 12: Card Based Designs to Amplify UI Development

DIALOGS

• Cards Are Content Containers Appropriate To Represent Actions• They Replace Dialog Boxes Tactfully

Page 13: Card Based Designs to Amplify UI Development

WORKFLOW

• Cards Are Easily Grouped Into Tasks & Derive logical Workflows

Page 14: Card Based Designs to Amplify UI Development

WHERE NOT TO USE CARDS

Page 15: Card Based Designs to Amplify UI Development

SPECIFIC CONTENT

• Homogeneous Content With Less Actions • Image Galleries Do Not Require Cards

Page 16: Card Based Designs to Amplify UI Development

LARGE SCREEN SIZE

• Mobile Design For Apps Are Not For Larger Screens• Cards Lack Comprehension And Aesthetics On A Large Screen

Page 17: Card Based Designs to Amplify UI Development

Visit http://www.spec-india.com/

&

Request a FREE POC to

Test Drive our Services