Mathematics is beautiful. Sound a little strange? I was sure so when I first started designing. Mathematics is so boring. You might be surprised to find that the most beautiful designs, works of art, objects, and even people all have something mathematical in common. Especially the golden ratio, also known as the divine ratio, represented by the Greek letter Φ (phi). This tutorial will break down the layout of a website and how to divide it into golden ratios
Web page skeleton
These are the main elements of web pages. There are many different ways to organize them, but this layout is perhaps the most commonly used.
Container
All web pages use a container, mainly for the same purpose: to contain some page elements. However, this method is implemented differently. For example, the body tag or the most commonly used div. Even the table that was commonly used in the past (don't use table as your container, this is a broken method). Think of a container as the exterior wall of your house, which contains the bedrooms, kitchen, living room, etc.
Container type:
Liquid: Fill according to browser width.
Fixed: The specified width will not change according to the browser width.
Header
The header isn't really a specific element, although some people would argue that it is. It is used more at the top level of the web page where you place your logo, navigation bar, and tagline. Many people prefer to enclose these elements in a div to facilitate separation of page style and content. The header will be regarded as a container, so it has two types of options, namely liquid or fixed mentioned above.
Logo
Your logo is your identity and brand. The most commonly used method is to place the logo in the upper left corner of your header. Our reading habit is from left to right and top to bottom, so your log should be placed where visitors can see it at first sight.
Navigation
Page navigation is one of the most important elements; your visitors need it to use your site. It should be easy to find and use, which is why most people put it in the header section, at least near the top of the page.
navigation type:
Horizontal: horizontal display, called 'navigation'
Vertical: vertical display, called 'menu'
Main Content
Everyone (should) know that content is king! When people come to visit your site, it’s the main element they want to see. It should be the focal point of the web page, so visitors can quickly find what they are looking for.
Sidebar
The sidebar is an element that places your secondary content, such as some advertisements, site search, subscription links (RSS, Twitter, Email, etc.), contact methods, etc. This element is not required, although many sites use it. It is mostly placed on the right, but you can also place it on the left or on both sides, as long as it does not disrupt the browsing of the main content. Websites use horizontal or vertical navigation, and sidebars often use vertical navigation.
Footer
There is always a footer at the end of a web page to let your visitor know that he has reached the end of your web page. Like header, footer is not a special element. Include copyright, legal notice, and primary contact information in your footer. It is a good idea to include some important links, such as home page, contact page, etc. Some websites use this area to provide relevant materials or other important information.
"Whitespace"
You may have a strong desire to fill in the blanks on these pages, but please don't. "White space" is also very important. You can see how the NetTuts website effectively uses white space to create page balance and give a good feel.
The above is the skeleton of the web page. Now let's look at how to divide these elements into golden sections.
The Golden Section and Using Grids
Remember earlier when I said math was beautiful? We think visual appeal is based on proportions (e.g., the golden section). For thousands of years, artists, designers, architects, etc. have consciously or unconsciously used a common proportion to increase the beauty of their work. What is this magic number? 1.62 (actually 1.618...) I won't tell you the origin of this number, but I will tell you how to use it.
Using the golden section is very simple. For example, you might want to find the width of your main content and sidebar lists. You'll take the total width of your content area and divide it by 1.62. That gives you 555.55px. We don't need to be that precise, so we'll just use 555px. Now you know that your main content element is 555px wide and your sidebar is 345px. See how easy it is?!
But wait, the fun doesn’t stop there! You can also apply the golden section to the width and height of other elements.
Using Grids
If you are like most people, you don’t want to have to hold a calculator to calculate the golden ratio every time. Then the easiest way is to use grid. So what you need to do is divide your width or height into thirds.
To produce a more detailed grid, just continue dividing it into thirds. If you read the previous article "Intimate Contact with the Blueprint CSS Framework", you will see that the Blueprint CSS framework uses a detailed grid system. Not only is grid design easier and faster, but it also creates a beautiful layout. If you haven't used grid design yet, this is a great opportunity to try it out. You can download grid templates for fireworks, photoshops or other software from http://960.gs.
As you can see, NetTuts follows the golden ratio very well. The top third of the page is again divided into thirds, very close to the golden ratio. No wonder NetTuts’ design is so attractive!
If you are going to make a new design, I highly recommend finding some popular sites and reviewing their layouts and how they apply the golden ratio and grid. Then take some time to practice using the golden section and using grid in your layouts.