{"id":5819,"date":"2017-01-31T15:44:41","date_gmt":"2017-01-31T15:44:41","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=5819"},"modified":"2021-01-26T05:09:33","modified_gmt":"2021-01-26T05:09:33","slug":"golden-ratio-ui-design","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/golden-ratio-ui-design\/","title":{"rendered":"Golden Ratio in UI design"},"content":{"rendered":"<div id='gallery-1' class='gallery galleryid-5819 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1-oDGzIGJvh1Rd_acY70ywzA.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"400\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1-oDGzIGJvh1Rd_acY70ywzA.jpeg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1-oDGzIGJvh1Rd_acY70ywzA.jpeg 1000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1-oDGzIGJvh1Rd_acY70ywzA-600x240.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1-oDGzIGJvh1Rd_acY70ywzA-768x307.jpeg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\u201cGolden Ratio\u201d is of great importance in the design of architecture, appliances, logos and photos. I don\u2019t want to write about it a lot, you can learn it in Wikipedia. I will say briefly: our consciousness tends to harmony and beauty, and the \u201cgolden ratio\u201d is the elegant way to make a product more comfortable and nice for perception. Simply put, it\u2019s a tool to strike a balance in the design.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This technique is not so popular in the design of interfaces because it seems difficult. I will explain in simple terms how to build a classic golden ratio and how to apply it in practice.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"The 'golden ratio' is the elegant way to make a product more comfortable and nice for perception.\"<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Geometry<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Golden Ratio is the ratio of the parties to each other as 1: 1.618. It is pretty easy to build:<\/p>\n<div id='gallery-2' class='gallery galleryid-5819 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1es_-Y_Y2IcVoZPGysjNNuA.png'><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1es_-Y_Y2IcVoZPGysjNNuA.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1es_-Y_Y2IcVoZPGysjNNuA.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1es_-Y_Y2IcVoZPGysjNNuA-600x450.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1es_-Y_Y2IcVoZPGysjNNuA-768x576.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Draw a square<\/li>\n<li>From the middle of the square (A) draw a diagonal to the opposite corner (B).<\/li>\n<li>The resulting diagonal is the radius of the arc. We draw the circle to get a rectangle. The resulting shape of the square and the rectangle is the \u201cgolden rectangle\u201d.<\/li>\n<li>If we draw diagonally in large and small rectangle, then in the point of intersection we get a \u201cfocal point\u201d. It is a good idea to place the most important interface objects near this point to attract the attention of users.<\/li>\n<li>The unique property of this shape is that during its division, we obtain a smaller rectangle that consists of a square and a rectangle, a reverse \u201clarge.\u201d<\/li>\n<li>And the most beautiful thing is: if in each of the squares of the arc with the radius equal to the side of the square, we get the \u201cgolden spiral.\u201d<\/li>\n<\/ol>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The rectangle may be rotated and adjusted to the desired size of the canvas and the interface.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Now triangle<\/h2>\n<div id='gallery-3' class='gallery galleryid-5819 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1DvkxvAKDUVtd9cxHt_jzqg.png'><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1DvkxvAKDUVtd9cxHt_jzqg.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1DvkxvAKDUVtd9cxHt_jzqg.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1DvkxvAKDUVtd9cxHt_jzqg-600x450.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1DvkxvAKDUVtd9cxHt_jzqg-768x576.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Draw a triangle, one side of which is two times bigger than the other.<\/li>\n<li>Draw an arc from the center at the point (B) with radius AB. Arc crosses the hypotenuse with a point (D)<\/li>\n<li>Now draw an arc from the center point \u00a9 with radius CD and we get point (E)<\/li>\n<li>From the point (E) draw a straight line on the hypotenuse.<\/li>\n<\/ol>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As a result, we split the triangle into smaller triangles proportional to each other. By the way, there is a clearly noticeable \u201cGolden ratio\u201d of the two elements as 1: 1,618. That is one element is 1.618 from another element.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"It becomes clear why almost everything created by nature is the subject to the laws of Golden ratio\"<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Beauty of\u00a0nature<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If we continue to divide triangles and draw circles between them, it becomes clear why almost everything created by nature is the subject to the laws of Golden ratio, sometimes with the Fibonacci sequence:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89,\u00a0..<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">(each successive number is the sum of the previous two)<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-5823 alignnone\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/01\/1MUSs6EjrQC5lK2iIWRylDA.jpeg\" alt=\"1MUSs6EjrQC5lK2iIWRylDA\" width=\"800\" height=\"600\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1MUSs6EjrQC5lK2iIWRylDA.jpeg 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1MUSs6EjrQC5lK2iIWRylDA-600x450.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1MUSs6EjrQC5lK2iIWRylDA-768x576.jpeg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you take the \u201cGolden spiral\u201d and rotate it at an angle of 40\u00b0 or 60\u00b0 then you will create this beauty:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-5824 alignnone\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/01\/1cBP9tLhSk4PtA92_zeVZ4Q.jpeg\" alt=\"1cBP9tLhSk4PtA92_zeVZ4Q\" width=\"800\" height=\"600\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1cBP9tLhSk4PtA92_zeVZ4Q.jpeg 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1cBP9tLhSk4PtA92_zeVZ4Q-600x450.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1cBP9tLhSk4PtA92_zeVZ4Q-768x576.jpeg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here is an example with a smaller angle of rotation of 20\u00b0 and a reflection of the shape on the horizontal:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img decoding=\"async\" class=\"size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/01\/1bFZJJUhodm-RnQprMqlMYg.jpeg\" title=\"\" alt=\"\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">With the help of the golden ratio one can draw any shape used in the design of icons, logos, interfaces, etc.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img decoding=\"async\" class=\"size-full\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1HcpdEIapyrZdkOT0M6yXyA.png\" title=\"\" alt=\"\" \/><\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"If you draw a 'Golden rectangle', it becomes evident how to place elements.\"<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Design of mobile interfaces<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I made a couple of examples to demonstrate the \u201cGolden ratio\u201d. The first is a card product of ASOS store. On the first screen of the app only viewing of photos and actions is available: save in favorites, play video and share. It is uncomfortable because you should swipe the page to find info about size, colors, fabric description or to add to shopping bag. As a result, a \u201cquick\u201d viewing of products is very difficult.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you draw a \u201cGolden rectangle\u201d, it becomes evident how to place elements. This structure makes it possible to show the most appropriate user data on the first screen.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As we can see, in the \u201cfocal point\u201d we have action \u201cSave to favourites\u201d, one of the key actions in the app.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Elements are large and located within the comfortable distance from each other and from the edges of the screen, so they are easy to press with a thumb.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img decoding=\"async\" class=\"size-full\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1EzfnqOEo-AtnTC187HtQ_Q.jpeg\" title=\"\" alt=\"\" \/><img decoding=\"async\" class=\"size-full\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/19AMso4kde7oLyyt-bUS0wg.png\" title=\"\" alt=\"\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The second example is the blog post screen. Rectangle puts everything in places: we have quite a large photo and a large area for text. If the picture is based on the golden ratio, it is not distorted in a mobile size.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cElements are a comfortable distance from the edge of the screen, so they\u2019re easy to press with a thumb.\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Arrangement of elements \u201clike\u201d and \u201ccomment\u201d in the lower right corner makes it possible to make them larger, but unobtrusive. They do not overlap the image, but visible to the user.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-5829 alignnone\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1C2smWllYcpJ8JxXEzpAW9w.png\" alt=\"1C2smWllYcpJ8JxXEzpAW9w\" width=\"800\" height=\"600\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1C2smWllYcpJ8JxXEzpAW9w.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1C2smWllYcpJ8JxXEzpAW9w-600x450.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/1C2smWllYcpJ8JxXEzpAW9w-768x576.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">That\u2019s all. Hopefully now you are not afraid of proportion \u201c1: 1,618\u201d, and willingto try it to create user interfaces.<br \/>\n:)<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This post was originally published on <a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/blog.prototypr.io\/golden-ratio-in-ui-design-8d11e66582c3#.9rrx3zirg\">Mariya's Medium profile<\/a>.<\/em><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">\nFurther Reading:<br \/>\n<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/typography-can-make-break-design\/\">Typography Can Make or Break Your Design<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/enhance-user-experience-animated-transitions\/\">Enhance Your User Experience with Animated Transitions<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/run-empathy-user-journey-mapping-workshop\/\">How to Run an Empathy &amp; User Journey Mapping Workshop<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/\">Stop Talking and Start Sketching: A Guide to Paper Prototyping<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/basic-principles-visual-design\/\">The Basic Principles of Visual Design<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u201cGolden Ratio\u201d is of great importance in the design of architecture, appliances, logos and photos. I don\u2019t want to write about it a lot, you can learn it in Wikipedia. I will say briefly: our consciousness tends to harmony and beauty, and the \u201cgolden ratio\u201d is the elegant way to make a product more comfortable and nice for perception. Simply&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/golden-ratio-ui-design\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":86,"featured_media":5898,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5819","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"\u201cGolden Ratio\u201d is of great importance in the design of architecture, appliances, logos and photos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/golden-ratio-ui-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Golden Ratio in UI design | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"\u201cGolden Ratio\u201d is of great importance in the design of architecture, appliances, logos and photos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/golden-ratio-ui-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-31T15:44:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-26T05:09:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/GR_Cover_lg_1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1800\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/golden-ratio-ui-design\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/GR_Cover_lg_1.png\",\"width\":1800,\"height\":1200},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/golden-ratio-ui-design\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/golden-ratio-ui-design\/\",\"name\":\"Golden Ratio in UI design | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/golden-ratio-ui-design\/#primaryimage\"},\"datePublished\":\"2017-01-31T15:44:41+00:00\",\"dateModified\":\"2021-01-26T05:09:33+00:00\",\"description\":\"\\u201cGolden Ratio\\u201d is of great importance in the design of architecture, appliances, logos and photos.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/golden-ratio-ui-design\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/golden-ratio-ui-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/golden-ratio-ui-design\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/fdfa26fac7d64d142db16a6f79455169\"},\"headline\":\"Golden Ratio in UI design\",\"datePublished\":\"2017-01-31T15:44:41+00:00\",\"dateModified\":\"2021-01-26T05:09:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/golden-ratio-ui-design\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/golden-ratio-ui-design\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/golden-ratio-ui-design\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/fdfa26fac7d64d142db16a6f79455169\",\"name\":\"Mariya Tereshkova\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/da3902e878e4738801ea7bd664d919e1ee9729ebb3e512b87fdb109d32ccaa7e?s=96&d=mm&r=g\",\"caption\":\"Mariya Tereshkova\"},\"description\":\"Designer. Teacher. Live in St. Petersburg. Find out more at maws.ru. My community accounts: Dribbble, Behance.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/5819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=5819"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/5819\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/5898"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=5819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=5819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=5819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}