{"id":1853,"date":"2016-12-15T09:53:53","date_gmt":"2016-12-15T17:53:53","guid":{"rendered":"http:\/\/areteworks.local\/?p=1853"},"modified":"2018-01-05T11:31:29","modified_gmt":"2018-01-05T19:31:29","slug":"user-interface-card-design","status":"publish","type":"post","link":"https:\/\/areteworks.com\/user-interface-card-design\/","title":{"rendered":"Card-structured layout in User Interface Design"},"content":{"rendered":"<p>With mobile internet usage surpassing the desktop, User Interface Design is now favoring the small screen as responsive design becomes mandatory. Simple interface styles like flat design, and in particular the use of cards, are more popular than ever.<\/p>\n<p>Cards are small individual containers of information, with each card representing its own singular thought. A card can hold all types of content \u2014 visuals, text, links, etc. \u2014 but all fall under a single unified theme. Card UI patterns are incredibly useful in numerous ways. It provides a much cleaner and <a href=\"https:\/\/areteworks.com\/work-notables\/\">instantly comprehensible interface<\/a>, especially on mobile devices. The utilization of bite-sized content and masonry-style framework translates easily across different screen sizes. Card grids can expand and contract, restructuring themselves to fit any breakpoint or screen size. Card design is also perfect for the attention span of most web users. Additionally, Card design adheres nicely to the <a href=\"http:\/\/spot.colorado.edu\/~moriarts\/vctheorysurvey.html\">visual literacy<\/a> of today&#8217;s end users. Images elevate mobile app design, because images draw the user\u2019s eye efficiently and immediately.<\/p>\n<p>Most social media has moved to a Card Design framework. Twitter, Google and Facebook are moving towards using cards. Pinterest is built completely around the use of cards. Cards may ultimately end up being a trend similar to Skeumorphism, but many of its elements seemed build to have staying power.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1854 size-medium\" title=\"User Interface example\" src=\"https:\/\/areteworks.com\/wp-content\/uploads\/2016\/12\/ui-example-224x300.jpeg\" alt=\"User Interface example\" width=\"224\" height=\"300\" srcset=\"https:\/\/areteworks.com\/wp-content\/uploads\/2016\/12\/ui-example-224x300.jpeg 224w, https:\/\/areteworks.com\/wp-content\/uploads\/2016\/12\/ui-example.jpeg 236w\" sizes=\"(max-width: 224px) 100vw, 224px\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With mobile internet usage surpassing the desktop, User Interface Design is now favoring the small screen as responsive design becomes mandatory. Simple interface styles like flat design, and in particular the use of cards, are more popular than ever. Cards are small individual containers of information, with each card representing its own singular thought. A&hellip;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Card-structured layout in User Interface Design - Areteworks<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/areteworks.com\/user-interface-card-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Card-structured layout in User Interface Design - Areteworks\" \/>\n<meta property=\"og:description\" content=\"With mobile internet usage surpassing the desktop, User Interface Design is now favoring the small screen as responsive design becomes mandatory. Simple interface styles like flat design, and in particular the use of cards, are more popular than ever. Cards are small individual containers of information, with each card representing its own singular thought. A&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/areteworks.com\/user-interface-card-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Areteworks\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-15T17:53:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-05T19:31:29+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/areteworks.com\/wp-content\/uploads\/2016\/12\/ui-example-224x300.jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steven Liu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/areteworks.com\/#website\",\"url\":\"https:\/\/areteworks.com\/\",\"name\":\"Areteworks\",\"description\":\"UI UX Design Company\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/areteworks.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/areteworks.com\/user-interface-card-design\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/areteworks.com\/wp-content\/uploads\/2016\/12\/ui-example-224x300.jpeg\",\"contentUrl\":\"http:\/\/areteworks.com\/wp-content\/uploads\/2016\/12\/ui-example-224x300.jpeg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/areteworks.com\/user-interface-card-design\/#webpage\",\"url\":\"https:\/\/areteworks.com\/user-interface-card-design\/\",\"name\":\"Card-structured layout in User Interface Design - Areteworks\",\"isPartOf\":{\"@id\":\"https:\/\/areteworks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/areteworks.com\/user-interface-card-design\/#primaryimage\"},\"datePublished\":\"2016-12-15T17:53:53+00:00\",\"dateModified\":\"2018-01-05T19:31:29+00:00\",\"author\":{\"@id\":\"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a\"},\"breadcrumb\":{\"@id\":\"https:\/\/areteworks.com\/user-interface-card-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/areteworks.com\/user-interface-card-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/areteworks.com\/user-interface-card-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/areteworks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Card-structured layout in User Interface Design\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a\",\"name\":\"Steven Liu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/areteworks.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g\",\"caption\":\"Steven Liu\"},\"url\":\"https:\/\/areteworks.com\/author\/steven-liu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Card-structured layout in User Interface Design - Areteworks","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/areteworks.com\/user-interface-card-design\/","og_locale":"en_US","og_type":"article","og_title":"Card-structured layout in User Interface Design - Areteworks","og_description":"With mobile internet usage surpassing the desktop, User Interface Design is now favoring the small screen as responsive design becomes mandatory. Simple interface styles like flat design, and in particular the use of cards, are more popular than ever. Cards are small individual containers of information, with each card representing its own singular thought. A&hellip;","og_url":"https:\/\/areteworks.com\/user-interface-card-design\/","og_site_name":"Areteworks","article_published_time":"2016-12-15T17:53:53+00:00","article_modified_time":"2018-01-05T19:31:29+00:00","og_image":[{"url":"http:\/\/areteworks.com\/wp-content\/uploads\/2016\/12\/ui-example-224x300.jpeg"}],"twitter_card":"summary","twitter_misc":{"Written by":"Steven Liu","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/areteworks.com\/#website","url":"https:\/\/areteworks.com\/","name":"Areteworks","description":"UI UX Design Company","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/areteworks.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/areteworks.com\/user-interface-card-design\/#primaryimage","inLanguage":"en-US","url":"http:\/\/areteworks.com\/wp-content\/uploads\/2016\/12\/ui-example-224x300.jpeg","contentUrl":"http:\/\/areteworks.com\/wp-content\/uploads\/2016\/12\/ui-example-224x300.jpeg"},{"@type":"WebPage","@id":"https:\/\/areteworks.com\/user-interface-card-design\/#webpage","url":"https:\/\/areteworks.com\/user-interface-card-design\/","name":"Card-structured layout in User Interface Design - Areteworks","isPartOf":{"@id":"https:\/\/areteworks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/areteworks.com\/user-interface-card-design\/#primaryimage"},"datePublished":"2016-12-15T17:53:53+00:00","dateModified":"2018-01-05T19:31:29+00:00","author":{"@id":"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a"},"breadcrumb":{"@id":"https:\/\/areteworks.com\/user-interface-card-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/areteworks.com\/user-interface-card-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/areteworks.com\/user-interface-card-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/areteworks.com\/"},{"@type":"ListItem","position":2,"name":"Card-structured layout in User Interface Design"}]},{"@type":"Person","@id":"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a","name":"Steven Liu","image":{"@type":"ImageObject","@id":"https:\/\/areteworks.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g","caption":"Steven Liu"},"url":"https:\/\/areteworks.com\/author\/steven-liu\/"}]}},"_links":{"self":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/posts\/1853"}],"collection":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/comments?post=1853"}],"version-history":[{"count":0,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/posts\/1853\/revisions"}],"wp:attachment":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/media?parent=1853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/categories?post=1853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/tags?post=1853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}