2017年12月12日 星期二

How to use structured grid in custom website design?

Website design, the best print and digital designers are those who use the grid. In many cases, it may give up the grid, but you usually create high quality work if you learn the grid structure and make up the rules. Grid design is one of the most important components of the structure layout. A web site uses a grid to balance the text, image, and the elements of the whole page. How to use structured grid in custom website design?
 Website design
Although there are many free open source grid systems, you will often learn to create your own better. This article will cover the benefits of custom web design and how to create your own grid from scratch.
1, I pre planning
This usually takes the form of a quick sketch. Some designers like digital work, while others prefer pencils and paper. There is no right or wrong way of saying that there is only the best way to do it. Stick to a method that allows you to quickly find the best fit for you.
When you are sketching, you need to think about the whole composition. Design a grid that fits your content. Don't be afraid to move things around. Generally, the wireframe is used to record your original ideas. At this stage, there are no mistakes, only experiments. Find a way to organize grid structures, and to identify patterns by persistence and measurable space.
2, early drafts of a notebook
This will be better to create your own grid, starting with a trusted grid system. This allows you to focus more on the content organization, rather than in a specific column / slot value. Use this notebook as the initial stage of the test field. Learn how to create repeatable patterns that allow users to learn what they expect when they browse the web.
3, spacing mode
Symmetric rhythm is an important part of the grid design, especially on the verbose vertical web site. The content should have a natural flow pattern to guide the visitors in the whole page. One way to find a natural rhythm is to study other websites. Measuring the distance between paragraphs, vertical space is the most important, but the level of space on the network also plays a role.
4. Look at the grid layout site in real time
Remember, the template mode is relative to the following rules. The best designers rely on their grid as a compass. Sometimes breaking the grid is a good idea to help an element highlight the surrounding elements. When it comes to pattern recognition you need to create some similar duplicates. Look at the layout at the same time for the tourists, but don't be too rigid. I know it looks like a false comment, but with practice, you will learn when to follow the pattern and when to break them.
5, grid design in practice
As long as you feel comfortable with your method, it's not important to create a grid. Once you've already solved a horizontal grid, it's a good idea to organize a vertical grid, also called a baseline. The function of the vertical grid is to organize printing to make it in a natural rhythm with other elements.
When combined, you will have a powerful tool that can help you organize and adjust the layers to make them comfortable together. The best grids are not seen by the users, but their existence can be felt in all aspects of the design.
6, transcendental structure
After creating a grid, you need to learn how to use it for the content layout. It's clear that your skills will improve, but there are some typical rules that you should remember. Try to see beyond the grid structure and imagine how to combine the content together. Web design is specially designed for content and each layout should reflect this accordingly.
Try to adjust the paragraphs to fit them in the middle, not the right side. Add some extra space, and the following content gives the impression of a "new" page.
Another attempt is to merge different grids into another one of a unified system. For example, from GridSET Gerstner. This design uses the same width as the 6-column grid and the four - column cover.
Unsymmetrical design of 7 and fonmon grid systems
Another advanced technology, you may try to use an asymmetrical grid. Fonmon is another example that uses a 5 column with a different width of GridSET. Although it is nontraditional, it can help you break the stereotyped structure and restructure your design ideas.

沒有留言:

張貼留言