{"id":15721,"date":"2026-08-30T03:21:35","date_gmt":"2026-08-30T03:21:35","guid":{"rendered":"https:\/\/www.airsang.com\/?p=15721"},"modified":"2026-10-17T16:19:50","modified_gmt":"2026-10-17T16:19:50","slug":"coupangastrae-makeup-brush-cleaning-liquid-product-detail-page-design-case-usage-steps-and-information-level","status":"publish","type":"post","link":"https:\/\/www.airsang.com\/fr\/coupangastrae-makeup-brush-cleaning-liquid-product-detail-page-design-case-usage-steps-and-information-level\/","title":{"rendered":"CoupangASTRAE Makeup Brush Cleaning Liquid product detail page design case: usage steps and information level"},"content":{"rendered":"<p class=\"wp-block-paragraph\"> In the Coupang product detail page design of ASTRAE Makeup Brush Cleaner, we organized the content around usage steps and information levels. Through concise white and gray, blue titles, and black bottle labels, product identification, partial descriptions, and scene information are arranged at different levels, allowing readers to continue to understand the products in a clear order. <\/p><figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th style=\"text-align:left\"> Services <\/th><th style=\"text-align:left\"> Industry <\/th><th style=\"text-align:left\"> Plate-forme <\/th><\/tr><tr><td> Coupang product detail page design <\/td><td> Beauty and personal care <\/td><td>Coupang<\/td><\/tr><tr><th style=\"text-align:left\"> Project requirements <\/th><th style=\"text-align:left\"> target market <\/th><th style=\"text-align:left\"> design style <\/th><\/tr><tr><td> Usage steps and information levels <\/td><td> Korean content display <\/td><td> Simple white and gray, blue title, black bottle label <\/td><\/tr><tr><th style=\"text-align:left\"> Project quotation <\/th><th style=\"text-align:left\"> Delivery content <\/th><th style=\"text-align:left\"> Delivery time <\/th><\/tr><tr><td>\uffe51,100<\/td><td> Version 1 product product detail page design <\/td><td> not disclosed <\/td><\/tr><\/tbody><\/table><\/figure><h2 class=\"wp-block-heading\"> Design challenge: Separate different reading tasks <\/h2><p class=\"wp-block-paragraph\"> This set of product detail pages should not only retain the appearance identification of ASTRAE makeup brush cleaner, but also accommodate different topics such as usage steps and information levels. Instead of letting each picture carry all the information repeatedly, we separated the whole, parts and scenes, and controlled the distance between titles, pictures and descriptions. <\/p><h2 class=\"wp-block-heading\"> Our design strategy <\/h2><p class=\"wp-block-paragraph\"> We use concise white and gray, blue titles, and black bottle labels to establish a continuous visual language so that the subject can be clearly identified from the background. The title uses an obvious font size and weight hierarchy, and the supplementary description is relegated to the next level to avoid decoration, photos and text competing for attention at the same time. <\/p><p class=\"wp-block-paragraph\"> In terms of content organization, we divide chapters according to the themes of real works: use larger pictures to establish overall relationships, use parts and diagrams to explain details, and then use bounded text areas or lists to organize supplementary information. Long pages create pauses through color blocks, cards, and white space between groups, and chapter switches can also be identified during continuous reading. <\/p><h2 class=\"wp-block-heading\"> Brand opening: large characters and single bottle form the focus <\/h2><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.airsang.com\/wp-content\/uploads\/airsang-posts\/746cb40002430c9b631617a7.webp\" alt=\"ASTRAE Makeup Brush Cleanser: Brand opening: large characters and single bottle form the focus\" class=\"\" width=\"780\" height=\"1112\"\/><\/figure><p class=\"wp-block-paragraph\"> We carry the theme with large blue characters with a handwriting feel, and the bottle is placed in the center of the white background. The black bottle label and blue title form a hierarchy, and the reflection increases the volume but does not occupy the line of sight. <\/p><h2 class=\"wp-block-heading\"> Content grouping: raw material graphics and product layering <\/h2><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.airsang.com\/wp-content\/uploads\/airsang-posts\/c7870b280f71cbd12532a9fb.webp\" alt=\"ASTRAE Makeup Brush Cleaner: Content Grouping: Raw Material Graphics and Product Layering\" class=\"\" width=\"780\" height=\"1500\"\/><\/figure><p class=\"wp-block-paragraph\"> We place the citrus graphic at the top, and the bottle and short label below. A large section of white background allows for a sense of breathing, making the theme, objects and descriptions clear. <\/p><h2 class=\"wp-block-heading\"> Close up of the bottle: hexagonal illustrations unfold around the subject <\/h2><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.airsang.com\/wp-content\/uploads\/airsang-posts\/3e3127b0d030797284ca174f.webp\" alt=\"ASTRAE Makeup Brush Cleanser: Close-up of the bottle: Hexagonal instructions unfold around the main body\" class=\"\" width=\"780\" height=\"975\"\/><\/figure><p class=\"wp-block-paragraph\"> We took the larger single bottle as the center, and thin lines connected the surrounding hexagonal information areas. The gray and white background and lighter text maintain a technical feel, and the outline remains prominent. <\/p><h2 class=\"wp-block-heading\"> Character card: two pieces of information have unified boundaries <\/h2><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.airsang.com\/wp-content\/uploads\/airsang-posts\/eeea13684f1576dea241fb46.webp\" alt=\"ASTRAE Makeup Brush Cleaner: Character Card: Two pieces of information have a unified border\" class=\"\" width=\"780\" height=\"975\"\/><\/figure><p class=\"wp-block-paragraph\"> We use two white rounded-corner cards to organize the character photos and descriptions, with green text as partial emphasis. The same card width and margins connect two themes. <\/p><h2 class=\"wp-block-heading\"> Operation tutorial: four-step diagrams corresponding line by line <\/h2><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.airsang.com\/wp-content\/uploads\/airsang-posts\/155bdf754b7092879e853851.webp\" alt=\"ASTRAE Makeup Brush Cleaning Solution: Operation Tutorial: Four-Step Illustrations Corresponding Line by Line\" class=\"\" width=\"780\" height=\"1650\"\/><\/figure><p class=\"wp-block-paragraph\"> We have divided the cleaning process into four steps, numbered in blue close to the corresponding photo. Pictures and descriptions are divided left and right, making the operation paragraphs on long pages easier to read one by one. <\/p><h2 class=\"wp-block-heading\"> Comparative display: the same brush head is displayed in the left and right columns <\/h2><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.airsang.com\/wp-content\/uploads\/airsang-posts\/87ccabfc1d1b1fac2ac5961c.webp\" alt=\"ASTRAE Makeup Brush Cleaner: Comparative display: the same brush head is presented in the left and right columns\" class=\"\" width=\"780\" height=\"750\"\/><\/figure><p class=\"wp-block-paragraph\"> We use pictures in the left and right columns to organize the before and after status, and gray and blue title bands to distinguish the columns. Similar crops and the same scale draw the reader&#8217;s attention to the visual differences in the picture. <\/p><h2 class=\"wp-block-heading\"> Dip Close-up: Circular Marker Positioning Observation Area <\/h2><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.airsang.com\/wp-content\/uploads\/airsang-posts\/b53f0725bfb297207f989652.webp\" alt=\"ASTRAE Makeup Brush Cleaner: Soaking Close View: Circular Marker Positioning Observation Area\" class=\"\" width=\"780\" height=\"825\"\/><\/figure><p class=\"wp-block-paragraph\"> We enlarge the brush in the container and place the circular dotted line on the area that needs attention. The explanatory text remains on the card below, and the scenes remain in direct correspondence with the markers. <\/p><h2 class=\"wp-block-heading\"> Data ending: product pictures and tables are divided into separate areas <\/h2><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.airsang.com\/wp-content\/uploads\/airsang-posts\/b9c84beaa7026e81bd356a46.webp\" alt=\"ASTRAE Cosmetic Brush Cleanser: Ending of information: Product pictures and tables are separated into separate areas\" class=\"\" width=\"780\" height=\"975\"\/><\/figure><p class=\"wp-block-paragraph\"> We place the bottles at the top and organize the dimensions and data themes in a concise table below. Font weight, horizontal lines, and white space work together to control density, and the final paragraphs should be kept regular. <\/p><h2 class=\"wp-block-heading\"> Deliver and design value <\/h2><p class=\"wp-block-paragraph\"> Through this version of the product detail page, we establish a continuous reading path around usage steps and information levels. Simple white and gray, blue titles, and black bottle labels connect different chapters. The image scale, text level, and white space jointly distinguish the primary and secondary, allowing the product overview and local descriptions to complement each other. <\/p><h2 class=\"wp-block-heading\"> Develop a clear Coupang visual expression for your product <\/h2><p class=\"wp-block-paragraph\"> You can provide us with product links, existing materials, and key points that need clarification. We will combine the product structure, style and usage scenarios to plan the appropriate picture group or product detail page content and layout. <\/p><div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\"><div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.airsang.com\/fr\/contactez-nous\/\"> Consult Coupang Visual Design <\/a><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p> We organized the Coupang product detail page design of ASTRAE Makeup Brush Cleaner around the usage steps and information level with concise white and gray, blue title, and black bottle label. We used real works to explain the picture and text level, detailed instructions, and reading order. <\/p>","protected":false},"author":1,"featured_media":15364,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[101,108,96],"class_list":["post-15721","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-studies","tag-beauty-personal-care","tag-coupang","tag-product-detail-page-design"],"_links":{"self":[{"href":"https:\/\/www.airsang.com\/fr\/wp-json\/wp\/v2\/posts\/15721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.airsang.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.airsang.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.airsang.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.airsang.com\/fr\/wp-json\/wp\/v2\/comments?post=15721"}],"version-history":[{"count":1,"href":"https:\/\/www.airsang.com\/fr\/wp-json\/wp\/v2\/posts\/15721\/revisions"}],"predecessor-version":[{"id":15791,"href":"https:\/\/www.airsang.com\/fr\/wp-json\/wp\/v2\/posts\/15721\/revisions\/15791"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.airsang.com\/fr\/wp-json\/wp\/v2\/media\/15364"}],"wp:attachment":[{"href":"https:\/\/www.airsang.com\/fr\/wp-json\/wp\/v2\/media?parent=15721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.airsang.com\/fr\/wp-json\/wp\/v2\/categories?post=15721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.airsang.com\/fr\/wp-json\/wp\/v2\/tags?post=15721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}