Tips for Web Page Layout and Typography

Page layout is a key point of web design: what goes in each page’s header, body and footer, and how that content is arranged, all demand careful design. Shenzhen Xiaozhushou Technology Co., Ltd. (XZS Tech), a web design company, shares the following layout and typography tips.

1. Frameworks

When laying out a page, web designers like to start by using rectangles to stand in for images and blocks of text, then refine step by step. In short, that is the wireframe of the page.

2. Emphasis

The emphasis in web design is not just a point but an area that attracts users, kept consistent with elements in non-emphasis areas. Elements in the emphasis area can stand out from the rest through space, form, structure, texture, position, direction, size, colour, density or visual weight.

3. Using geometric shapes

Web pages often use the characteristics of common geometric shapes in image design, so you need to understand the personality of each shape.

Rectangles are the most used shape in web pages, giving users a sense of stability, reliability and trust. Not only images but text paragraphs can be rectangular. Rounded rectangles are rectangles too, but less sharp, softer and more rounded.

Triangles are stable. Speaking of triangles, the pyramid comes to mind first; the structure itself is stable and gives users a sense of security, so subconsciously an upward triangle reads as shelter. When a triangle-based image appears on a page, it becomes the focus of the whole scene.

Circles represent completeness; their charm lies in harmony, so they suit any layout and create focus. But circular elements should not be too large, or they compress everything around them, especially text, undermining the breathing room of a rich page layout.

These are the tips for web page layout and typography: use all the elements sensibly, and the page achieves a harmonious, unified, full and refined design effect.

Want to talk through what you just read?

We work end to end, from product design to launch. Tell us about your scenario and we can start there.

Shenzhen XZS Technology Co., Ltd. · Tel 0755-82494862 · 13760424861

Contact us

← Back to News