{"id":6388,"date":"2015-03-23T18:17:38","date_gmt":"2015-03-24T01:17:38","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=6388"},"modified":"2020-04-22T06:38:39","modified_gmt":"2020-04-22T13:38:39","slug":"new-e-book-web-ui-design-human-eye-layout-typography","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/","title":{"rendered":"New e-book: Web UI Design for the Human Eye (Layout &#038; Typography)"},"content":{"rendered":"<p>In our latest <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/visual-web-ui-design-content-typography\/\">free e-book<\/a>, we examine how to prioritize visual and text content in your UI design. Our goal is to show you how to design for what users care about most, even if your content isn&#8217;t finalized.<\/p>\n<p>Take a peek inside the book!<\/p>\n<p>No matter how beautiful your site looks, users come to your site for the content. Unless the design frames the content in a visually digestible manner, studies show that your users will probably leave within 10 seconds.<\/p>\n<p>In this <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/visual-web-ui-design-content-typography\/\" target=\"_blank\" rel=\"noopener noreferrer\">free e-book<\/a>, we take a practical approach to&nbsp;content-first design, typography, and scannable UI layouts. We favor real-world application over dry theory, so we&#8217;ve provided only the most straightforward and actionable tips.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/visual-web-ui-design-content-typography\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6391\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/Screen-Shot-2015-03-23-at-6.09.20-PM.png\" alt=\"content patternts and typography ebook\" width=\"650\" height=\"472\"><\/a><\/p>\n<p>You&#8217;ll find 5 chapters of practical advice in <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/visual-web-ui-design-content-typography\/\">the e-book<\/a> discussing:<\/p>\n<ul>\n<li>Different tactics of including real content in your UI design even if your content is still rough<\/li>\n<li>The pros and cons of the F versus Z pattern for designing easily scannable web interfaces<\/li>\n<li>Visual best practices based on UI designs from almost 30 companies including&nbsp;<strong>Design Milk, Hulu, The New Yorker,&nbsp;<\/strong>and&nbsp;<strong>AirBnB.&nbsp;<\/strong><\/li>\n<li>How to structure your typography to enhance your overall UI and specific sections of content<\/li>\n<\/ul>\n<p>So take a look, and feel free to share if you find it helpful!<\/p>\n<p style=\"margin-bottom: 35px;\"><span style=\"background: #3ca7dd; padding: 15px; font-weight: bold; border-radius: 4px; border: 1px solid #3ca7dd; border-bottom: 1px solid #2f97cb;\"><a style=\"color: #ffffff; text-decoration: none; font-size: 18px;\" href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/visual-web-ui-design-content-typography\/\">Download free e-book<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Free e-book on how to design UI layouts for the content your users crave. 27 best practices from Hulu, AirBnB, Design Milk, and more. <\/p>\n","protected":false},"author":9,"featured_media":6393,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,8,11,4,21,6,7],"tags":[],"class_list":["post-6388","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-prototyping","category-tutorials","category-ui-design","category-usability-2","category-ux-design","category-web-design"],"yoast_title":"E-book: Web UI Design for the Human Eye","yoast_metadesc":"Free e-book on how to design UI layouts for the content your users crave. 27 best practices from Hulu, AirBnB, Design Milk, and more.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>E-book: Web UI Design for the Human Eye<\/title>\n<meta name=\"description\" content=\"Free e-book on how to design UI layouts for the content your users crave. 27 best practices from Hulu, AirBnB, Design Milk, and more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"New e-book: Web UI Design for the Human Eye (Layout &amp; Typography)\" \/>\n<meta property=\"og:description\" content=\"Free e-book on how to design UI layouts for the content your users crave. 27 best practices from Hulu, AirBnB, Design Milk, and more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-24T01:17:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-22T13:38:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/blog-book-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"330\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jerry Cao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jerry Cao\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-e-book-web-ui-design-human-eye-layout-typography\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-e-book-web-ui-design-human-eye-layout-typography\\\/\"},\"author\":{\"name\":\"Jerry Cao\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"headline\":\"New e-book: Web UI Design for the Human Eye (Layout &#038; Typography)\",\"datePublished\":\"2015-03-24T01:17:38+00:00\",\"dateModified\":\"2020-04-22T13:38:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-e-book-web-ui-design-human-eye-layout-typography\\\/\"},\"wordCount\":228,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-e-book-web-ui-design-human-eye-layout-typography\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/03\\\/blog-book-1.png\",\"articleSection\":[\"Blog\",\"Prototyping\",\"Tutorials\",\"UI Design\",\"Usability\",\"UX Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-e-book-web-ui-design-human-eye-layout-typography\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-e-book-web-ui-design-human-eye-layout-typography\\\/\",\"name\":\"E-book: Web UI Design for the Human Eye\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-e-book-web-ui-design-human-eye-layout-typography\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-e-book-web-ui-design-human-eye-layout-typography\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/03\\\/blog-book-1.png\",\"datePublished\":\"2015-03-24T01:17:38+00:00\",\"dateModified\":\"2020-04-22T13:38:39+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"description\":\"Free e-book on how to design UI layouts for the content your users crave. 27 best practices from Hulu, AirBnB, Design Milk, and more.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-e-book-web-ui-design-human-eye-layout-typography\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-e-book-web-ui-design-human-eye-layout-typography\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-e-book-web-ui-design-human-eye-layout-typography\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/03\\\/blog-book-1.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/03\\\/blog-book-1.png\",\"width\":720,\"height\":330,\"caption\":\"blog book 1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/new-e-book-web-ui-design-human-eye-layout-typography\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New e-book: Web UI Design for the Human Eye (Layout &#038; Typography)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\",\"name\":\"Jerry Cao\",\"description\":\"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.\",\"sameAs\":[\"http:\\\/\\\/uxpin.com\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/jerrycao\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"E-book: Web UI Design for the Human Eye","description":"Free e-book on how to design UI layouts for the content your users crave. 27 best practices from Hulu, AirBnB, Design Milk, and more.","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:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/","og_locale":"en_US","og_type":"article","og_title":"New e-book: Web UI Design for the Human Eye (Layout & Typography)","og_description":"Free e-book on how to design UI layouts for the content your users crave. 27 best practices from Hulu, AirBnB, Design Milk, and more.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/","og_site_name":"Studio by UXPin","article_published_time":"2015-03-24T01:17:38+00:00","article_modified_time":"2020-04-22T13:38:39+00:00","og_image":[{"width":720,"height":330,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/blog-book-1.png","type":"image\/png"}],"author":"Jerry Cao","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jerry Cao","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/"},"author":{"name":"Jerry Cao","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"headline":"New e-book: Web UI Design for the Human Eye (Layout &#038; Typography)","datePublished":"2015-03-24T01:17:38+00:00","dateModified":"2020-04-22T13:38:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/"},"wordCount":228,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/blog-book-1.png","articleSection":["Blog","Prototyping","Tutorials","UI Design","Usability","UX Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/","name":"E-book: Web UI Design for the Human Eye","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/blog-book-1.png","datePublished":"2015-03-24T01:17:38+00:00","dateModified":"2020-04-22T13:38:39+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"description":"Free e-book on how to design UI layouts for the content your users crave. 27 best practices from Hulu, AirBnB, Design Milk, and more.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/blog-book-1.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/03\/blog-book-1.png","width":720,"height":330,"caption":"blog book 1"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-layout-typography\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"New e-book: Web UI Design for the Human Eye (Layout &#038; Typography)"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18","name":"Jerry Cao","description":"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.","sameAs":["http:\/\/uxpin.com"],"url":"https:\/\/www.uxpin.com\/studio\/author\/jerrycao\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/6388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=6388"}],"version-history":[{"count":0,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/6388\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/6393"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=6388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=6388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=6388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}