Web UX Design with the Golden RatioHow to design web experiences that draw along natural linesKenneth ReillyBlockedUnblockFollowFollowingMay 11Screenshot of a concept website designed around the Golden Ratio (1.
618)IntroductionIn this article, we‘ll take a look at the Golden Ratio, also known as Phi or φ, and how it can be applied to the design of a simple responsive web page.
If you’re not familiar with the Golden Ratio, also known as the Divine Proportion, it’s a fascinating number that appears everywhere from art and architecture to the DNA double-helix and other manifestations of nature.
Here are a few simple definitions of Phi:a + b is to a as a is to b(a + b) / a = a / bφ = 1.
618…We won’t go into great detail about the number φ itself, however, we can get an idea of how to work with it in Photoshop by creating a 1366×768 “Web Most Common” image (chosen for convenience only) and then adding a vertical guide line at x = 1366px / 1.
618 like so:Screenshot of Photoshop with a 1366×768 artboard and a vertical guide at x = 1366 / 1.
618For a horizontal guide that follows suit, simply place it at y = 768 / 1.
618 the same way we created the previous one.
To continue this pattern, simply keep dividing the result by 1.
618, such as y₂ = (768 / 1.
618) / 1.
618 and so forth.
Now that we have our definition of φ out of the way along with a simple example of how it works, let’s move on to the construction of the website.
Defining the HTML structureThis static website contains only one HTML file, index.
html showing metadata, Open Graph, Twitter Card, and other informationThe head contains the usual title and meta tags, some Open Graph and Twitter Card information, and various things for analytics.
What is not found here is a reference to the main .
js file, which is instead loaded towards the end of the HTML file near the footer to allow the DOM parser to work through the HTML first, without having to rely on a handler.
This is a simple case of course and there are other ways to handle loading .
js files (this being one of them).
html showing the body with header, nav, and main elementsWithin the body of this document we find an input checkbox, header, nav, and a few main elements, most of which are hidden from view by default and have been collapsed in the screenshot for clarity.
The body and header also contain schema.
org microdata to assist search engines, social media websites, and other systems with rendering rich content previews correctly.
html showing the footer and script tagsTowards the end of index.
html we find the usual footer with copyright and contact information, followed by the script tag that loads js/main.
That does it for our HTML, which is kept as clean as possible for clarity and efficiency.
Next we’ll take a look at the CSS for this website.
Defining CSS imports, fonts, and variablesFor this concept website, I chose to use pure CSS3 for simplicity and to really get a feel for what can be done with the features available in the current specification.
I kicked around the idea of developing a lean preprocessor and lightweight syntax to augment the features available in CSS3, however that will have to be the subject of another project sometime in the future.
Here is a look at the main CSS file css/style.
css, along with css/fonts.
css with imports, and css/fonts.
css with font definitionsThere are five import statements to import the actual project CSS, one of which is open in the above screenshot.
Next up is css/vars.
css with CSS3 features variables and calc() used to calculate dimensionsHere we have a bunch of variables defined, starting with the familiar number 1.
618 which is what we will use to calculate out the rest of the metrics.
The variables –golden-height-root and –golden-width-root are set to values 100vh and 100vw respectively, and a series of calculations are performed following the pattern we covered earlier, in which we keep dividing the result of the previous calculation by 1.
618 until we have enough values.
The same thing has been done for variables that will be used with flexbox, stopping at eight steps for the height and width calculations, and four steps for flexbox.
Additionally there are a few root metrics defined for later use to set the height of the header, footer, and other elements.
Next, let’s look at the rest of the file:css/vars.
css showing brand colors, backgrounds, and scroll bar stylesAlso within css/vars.
css are definitions for social network and local brand colors, foreground and background colors, and webkit scrollbar overrides.
That sums up our variable definitions, so let’s check out the layout next.
Defining page layout CSSNext up is the file in which most of the actual UX is defined, css/layout.
css with the basic screen layout definedThis website makes extensive use of flexbox, which provides a powerful set of options to define how child elements draw within their parent containers.
The body is configured to display flex children in a single row, and the header (which is also a child of the body) is set to override its default behavior and instead expand to the full width of the screen and affix itself to the very top.
There is also a reference to h-blink-in which we will look into later along with a few other animations used on this site.
Also note that we have the property animation-fill-mode set to forwards, which causes the animation results to persist when it reaches the end, rather than resetting back to the start.
Both the body padding and the header height are set to –header-root, which was previously set to –golden-height-fourth in css/vars.
This is how the header is rendered on a modern browser:Screenshot with the header and some of its calculated property valuesThe header takes up a nice portion of the top of the screen, and scales across various screen resolutions perfectly unlike a header with a fixed height of 48px for example, which will have randomly different proportions depending on the screen size, from 1/16th the height of “Web Most Common” to 1/32th the height of a 2017 13" MacBook Pro.
Sometimes fixed dimensions are preferred, but this provides a good example of working with proportions.
Next up, also in css/layout.
css, we have styles for the nav menu:css/layout.
css showing navigation menu stylesIn the nav selector, we have a new variable called –margin base which is set to the value of –golden-height-sixth, with the top and left margins set to this value.
Note that “sixth” in this context means the sixth step in the series of division by 1.
618, and not one-sixth of something.
The flex property is set to –golden-flex-third, which takes the number 1 (the max value) and divides it by 1.
618, then takes that result and divides it by 1.
618 again, and repeats the process once more for the final value.
This results in a nav menu that takes up an area of the screen that is proportionally scaled along the lines of nature, rather than some arbitrary value like 25% or 33% — or worse, randomly placed with no regard to how it fits into the big picture.
Also, we have a few more animations such as v-drop-in on the menu itself and fade-in on the nav buttons.
The animation-delay properties are set to .
24s and .
Here is how the navigation menu renders in WebKit:Screenshot showing the nav menu and calculated property valuesThis nav element scales nicely along with the screen all the way down to the mobile breakpoint set in css/responsive.
css which we‘ll get to in a moment.
Next, we’ll look at style properties for the main element and its children:css/layout.
css showing selectors for main and some of its childrenThe main selector has a few things going on.
The flex property, set to the value of –golden-flex-first, will cause the element to occupy a space with a width equal to (100% / 1.
Like the nav before, this element’s –margin-base is also set to the value of –golden-height-sixth, with the top and left margins set to this value.
You may have noticed that for both the nav and main elements, a height factor is used to set margins both horizontally and vertically.
This was a personal choice to give a square look to the padding, instead of having a giant left padding on wide screens.
This demonstrates the use of judgment rather than strictly following rules, where at some point the added precision actually lowers the quality of the final product.
The key here is to know when to apply a logical rule, and when to allow breathing room.
Here is how the main element renders:Screenshot of the main element — note the intentionally unused area to the right of mainBy design, the main element does not extend out to the far right of the screen.
This is because the nav element was not configured to use the remainder of the screen minus the main element, which would have resulted in a much wider menu that would appear somewhat confusing.
So, the size of the menu is reduced a step, leaving the extra space off to the right to align the content towards the center of the screen.
The area on the right could be a sidebar for some kind of social interaction, metrics, or anything else, and that may be the case in the future, but for now its left blank by design.
Last but not least is the footer which is similar to the header but occupies the bottom of the screen:css/layout.
css showing footer selector and child selectorsThe footer is effectively just a copy of the header, which has been updated with a new background style and containers for various elements like copyright information and social network links.
Notice the selector footer > div:nth-child(1) which selects the first div that is a direct child of footer.
This particular div element has a flex value of –golden-flex-first, and since its parent occupies the full width of the screen, this element has a width of (100% / 1.
618) which takes up the larger part of the footer.
css with selectors for various children of footerThe second div has a flex value of –golden-flex-second, giving it a width of 100% – (100% / 1.
618) which is the smaller sub-section of the footer.
There are various properties set for centering footer content and enabling transitions on hover, among other things (including a few styles not in the screenshots).
Here is how the footer renders:Screenshot of the footer — basically a modified copy of the headerThe footer places the social media buttons in an evenly-spaced group off to the right in the smaller golden section of the screen, while the contact information is drawn towards the left edge of the larger section on the left.
This covers the basic structure of the page as defined in HTML5 and CSS3.
Let’s take a look now at some responsive overrides to re-draw these same components on the screen in a mobile-friendly way.
Defining Responsive CSSToday, a website is more or less expected to render at least somewhat correctly on smartphones and tablets instead of being fixed to 1280×1024 or whatever resolution the developer’s monitor happened to be that day.
While it’s not practical to expect a responsive website to render perfectly 100% of the time with no errors or glitches, aiming for as good as possible will generally result in something that works good enough most of the time.
Let’s take a look at our next file, css/responsive.
css showing the phone breakpoint (max-width: 480px)The file css/responsive.
css is somewhat lengthy and contains some unused selectors from a previous version of this website, so we won’t dive into this file much, but we’ll go over a few basic concepts.
For a more in-depth look, take a look at the source on GitHub and check out the website here.
A few key differences exist here versus the standard full-screen style.
The original header height is sub-divided by 1.
618 and a few things like margins and font size are updated.
Next, let’s take a look at the mobile menu button:css/responsive.
css with “hamburger” button selected using body > inputOf particular interest here is the styling which creates the mobile hamburger menu button.
This is implemented with a checkbox input that is directly under the body element, which is not visible on screens wider than 480px.
When checked, this checkbox “button” causes the nav to be displayed:css/responsive.
css with the selector body > input:checked ~ navThe CSS selector body > input:checked ~ nav will select a nav element that is the general sibling of the menu “button” input element, when the input element is checked, and apply the various styles necessary to draw the mobile menu on the screen.
Again, flexbox is used to position items in the menu.
Here is what the mobile menu looks like rendered on a phone-sized device:Screenshot of the mobile nav menu with the selector body > input:checked ~ navWhen the burger menu is tapped, the nav menu is drawn on the screen to reveal the menu buttons.
Also, using similar means, the mobile footer is vertically stretched to reveal the social buttons, and collapses back to normal when anything on the screen is tapped, which we will examine later in detail.
Defining CSS AnimationsOur final CSS file of the day is the self-describing css/animations.
css with various animation keyframesWe won’t go too far deep into the animations on this site, however there aren’t many of them anyway and the concepts are straightforward.
In our animation toolbox we have a few individual animations such as fade-in and h-blink-in, each of which controls the animation of a different component of the page.
Most of these animations are used with styles in which, for example, the opacity or height of an element will be set to 0 and updated throughout the animation cycle, effectively drawing the element on screen with a blinking flash or some other effect.
Many of the effects are staggered with cumulative animation-delay values such as .
24s or .
36s which cause the screen elements to appear to be drawn one after another in quick succession, producing for example a counter-clockwise paint effect as in the case with our website here.
This wraps it up for our overview of the CSS for this site.
Let’s take a look at the one JS file in this project, js/main.
js with its two methods, init() and on_click_nav()The one JS file on this particular website has two methods, init() and on_click_nav().
The init() function retrieves DOM references to the navigation buttons and page sections, and binds an event handler to each button that will cause on_click_nav() to be called when a button is clicked, which in turn causes the controller to remove the .
selected class from the currently selected button and apply it to the clicked button, and also hides the currently visible main element and displays the recently selected one.
ConclusionThe Golden Ratio is a useful design concept that can be applied to web design with a few basic calculations to provide a base set of metrics to work with.
This example happens to be a simple website, however these concepts apply to design in general and this format could be adapted for mobile applications and other basic uses by simply dividing the screen metrics by 1.
I hope you enjoyed this article and found it useful.
Thanks for reading!.