Analysis of the methods of visual structure layout design for children's websites

1. Warm and gentle
Children's website visual structure layout design analysis, PS tutorial, 123WORDPRESS.COM

Related address: http://www.web-designers.cn/post.aspx?id=2481
High-brightness, low-saturation yellow and green colors create a soft and warm atmosphere, and important information is highlighted with higher-saturation green and red. The randomly sized circles superimposed in the background add a dreamy and lovely atmosphere. The rest of the design elements, such as the cloud-like curved edges, the stitching of the logo and navigation, the pins on the navigation bar background, the baby diary stickers, the baby photo hangtags, and the handwritten fonts of the text titles are all used around the entire design style to create an overall warm atmosphere.
2. Spring is here, when everything comes back to life
Children's website visual structure layout design analysis, PS tutorial, 123WORDPRESS.COM

Website address: http://tf.dtbaker.com.au/preview/?theme=26&style=0
This design also looks soft, like the spring that has just arrived, with tender green everywhere. The color scheme uses a combination of two high-brightness, medium-to-low saturation yellow and green. The navigation also uses continuous cloud-like arcs and handwritten fonts to add a cute and warm atmosphere. The main visual illustration plays a very important role in enhancing the overall design atmosphere. The banner hung on the tree has the blog logo written on it, which adds interest. However, the square layout similar to a web page is quite conventional and lacks creativity and breakthrough.
3. Colorful and sunny spring
Children's website visual structure layout design analysis, PS tutorial, 123WORDPRESS.COM

Related address: http://themeforest.net/theme_previews/92492-kids-toys
The illustration background composed of sky, clouds, mountains, sun, grass and various cartoon animals and plants with very high color saturation and brightness is the most important element in creating the overall atmosphere. In order to blend the background into the overall design, the logo banner is hung in the air by a bird, and the airship pulling the search box is also floating in the blue sky. The watercolor ink and handprints on the left side of the main content area and the dynamic star shape leaping out on the right side further enhance the joyful and lovely atmosphere. The cloud-shaped navigation bar and cute handwritten text are a bit rough, but still continue the same design style. The two sunny and cheerful family photos in the main content area make people feel the spring and warmth.
4. Fresh and soft
Children's website visual structure layout design analysis, PS tutorial, 123WORDPRESS.COM

Related address: http://tf.dtbaker.com.au/preview/?theme=22
Large areas of low-saturation, high-brightness, greenish blue give this design a calm, fresh and soft psychological feeling. Combined with the pink, red, yellow and green local colors, the entire design breaks away from the overly monotonous color scheme. Other design elements worth noting in this design include: 1. The background material similar to the plaid pattern; 2. The cloud-shaped edge of the main content area; 3. The handwritten fonts of the logo, navigation text, and title; 4. The curved tags and buttons; 5. The low-key illustration background added to each content area.
5. Flexible layout
Children's website visual structure layout design analysis, PS tutorial, 123WORDPRESS.COM

Website address: http://www.freesam.com/
The first impression of this design is the information layout that breaks the framework and the numerous fragmented information blocks. The different design methods of different information areas make people want to explore. The cute style runs through the entire page, and the combination of white and highly saturated and bright green and orange gives the page a refreshing feeling. Hand-drawn style illustrations are an indispensable element in children's websites and can greatly enhance the overall atmosphere of the website. The circular and large-rounded border design style also fits the style of the entire page. The designs of the constantly appearing tags and punched calendars echo each other and serve the functional purpose of dividing various information areas. Most importantly, this design breaks away from the limitations of the main content area framework of the previous designs, and is more free in layout. As a children's website, this kind of creative approach is necessary.
6. Warm atmosphere
Children's website visual structure layout design analysis, PS tutorial, 123WORDPRESS.COM

Website address: http://kidsplus.shinhan.com/
This is a full-Flash Korean site with quite a lot of atmosphere. The creation of atmosphere is directly related to the large-scale use of yellow and orange. Although the main colors are these two colors, they are not limited to these two colors. Pink, purple, blue, and green also appear in this design, but in terms of color proportion, they are much less, so it is possible to enrich the color scheme without being overwhelming, diluting or contradicting the overall atmosphere. The entire page is not completely filled with yellow. The white color of the bottom footer not only provides a stable horizontal plane for the main visual that resembles an open greeting card, but also adds a breathable psychological feeling to the entire design. Cartoon patterns are superimposed on a large area of gradient yellow background, adding layers to the design and creating the tone of the design. The multi-color puzzle scheme of the logo echoes the puzzle pattern of the background. The large rounded tag that extends the line of sight downward is used as the navigation design style, and a handwritten cartoon font is used. The circular tag on the right side of the related activity content also adopts a similar design. It can be observed that the rounded white stroke is repeated in this design, which can be considered as a detail consideration for website design related to children.
7. Fresh and elegant oriental style
Children's website visual structure layout design analysis, PS tutorial, 123WORDPRESS.COM

Website address: http://www.agabangncompany.com/cha/index.jsp
Large areas of white, a blurred watercolor background, and warm family photos in the main visual part make this design give people a soft and fresh feeling. The elements on the page, such as navigation, are not overly decorated, which is what makes this design bold. However, we usually think that if we don’t add some layer style effects, it will feel awkward and not a design. The reason is that we don’t have a general design direction in our minds and are completely driven forward blindly by inertia. We have no idea what the final design will look like or where we are going. This design taught us design ideas on a larger scale, allowing us to try different design methods and go further in design.
8. The importance of early creativity
Children's website visual structure layout design analysis, PS tutorial, 123WORDPRESS.COM

Website address: http://www.toysrus.co.kr/index.jsp
The blue background forms a sharp contrast between the color of the toy display hall and the main information area, making the main information area stand out from the background. The idea of an open toy box is not only related to the theme of the website, but also adds more fun. This idea was completed before starting to work on the specific design. So when designing a website, the work done before opening Photoshop actually plays a very important role in the direction of the design. This part includes the research phase and sketching, which is essential to designing a good website.
9. Quiet color scheme
Children's website visual structure layout design analysis, PS tutorial, 123WORDPRESS.COM

Website address: http://www.babymeal.co.kr/
This is an example of a design that uses a yellow, orange to brown color scheme. It is basically a combination of the same hue and different levels of colors, so overall the atmosphere will be quieter than a variety of color schemes with large jumps. Since the business of this website is to provide nutritious meals for infants and young children, a warm and calming color scheme would be more suitable.
10. The lower part is slightly broken
Children's website visual structure layout design analysis, PS tutorial, 123WORDPRESS.COM

Website address: http://www.gymboree.co.kr/
The use of a variety of high-brightness and saturation colors is still the most common idea in children's website design. The homepage of this website has a relatively large amount of information. The part above the main visual has a clear structure and a good visual experience, but the part below the main visual has too many columns and the organization is not clear enough, making it look a bit fragmented. If the four parallel sections of "Play", "Art", "Music" and "Family" were more clearly divided visually, and the title text jumped out of the surrounding body text, the visual effect might be better. However, it can be seen that the designer uses white, brighter gray and a variety of colors in the main information area, trying to create a refreshing and clean atmosphere. However, the organization and visual presentation of information are not good enough and can be more in-depth and thoughtful.

<<: CSS code for arranging photos in Moments

>>: Analysis of the principle of Nginx using Lua module to implement WAF