# Cloud Product Website Design: A Purple Visual Argument Source: https://www.jvds.cn/en/share/ui-design/sedai-cost-mechanism-demo-u027 Language: en Published: 2026-10-11 Author: JVDS Design Studio Sedai’s cloud product website uses a glowing purple core to express a technical character, then incoming calls, cost bars, and checklists to address separate topics. Information takes more than one abstract illustration: brand atmosphere stays consistent while each reader concern gets its own image. ## Key takeaways - A glowing core and orbits provide a memorable image, with one button giving the hero a clear onward direction. - Three advertisements address finance, cost, and mechanisms separately, matching graphics to button text. - The white booking form reduces visual density, and its button explicitly identifies date and time selection as the next step. ## One central form leaves space in the hero The tablet page has a security-themed heading above a glowing sphere and translucent orbits, with Prediction Layer on the right. Purple gradients move from dark to light, and fine lines and dots surround the core, making a multilayer structure visually apparent. See why appears below as a dark purple rounded button. Heading, graphic, and entry align centrally without filling the hero with feature cards. The sequence is clear: recognize the proposition, then decide whether to explore its rationale. JVDS considers this suitable for technical products that still need explanation. A form can make the brand memorable but cannot explain the mechanism alone. Later pages should turn the pictured layers into [specific names, conditions, and examples](https://www.jvds.cn/en/share/website-design/b2b-homepage-hero-value-proposition) to carry interest forward. Security wording is promotional and does not become verified merely because the composition is complete. ![Sedai purple tablet hero with a security heading, glowing core and orbits, Prediction Layer label, and See why button](https://www.jvds.cn/upload/2026/1008/d187-tp/u027-i1.webp) Center of the product hero | One form and one entry establish a clear reading sequence. ## Three topics use three concrete images The left advertisement uses a phone call to address a CFO topic, with Scale Smart as its button. The incoming-call bar, answer symbol, and large time display are familiar, giving a business finance concern a concrete visual entry closer to everyday communication than a generic cloud illustration. The middle card shows monthly stacked cost bars, with red Waste above purple Usage, a legend at the lower right, and See how much as the button. Color and wording explain the components together, so readers need not infer the topic from bar height. Amounts and strong promotional claims remain illustrative copy, not visitors’ bills or verified savings percentages. The right card uses a Successful label and checklist steps, with How It Works as the button. Purple backgrounds, white headings, and rounded buttons are consistent, while the content addresses different questions. This pairing is useful: one brand language accommodates different reading tasks, and each landing page should continue its original topic. ![Three purple Sedai advertisements: a CFO call, red and purple cost bars, and a success checklist with different buttons](https://www.jvds.cn/upload/2026/1008/d187-tp/u027-i2.webp) Three advertisement columns | Within one brand style, graphics and entries are arranged by topic. ## Make the form quieter at booking time Book Your Demo switches to white against a pale-purple surround. Name and business email fields occupy three pale input boxes, with a dark purple button below. It connects to the brand without repeating complex glowing graphics, allowing labels and fields to take priority during entry. First Name, Last Name, and Business Email have required markers. Select Date & Time explains the next task more specifically than a vague submit label: contact details are followed by time selection. The close button has its own position at the upper right without competing with the main action. Further design could state demo content and time zone, then repeat date, time, and contact details on confirmation. Only the earlier booking stage is shown, so completion cannot be assessed. For B2B marketing pages, a short form helps, but a clear [expectation of the next step](https://www.jvds.cn/en/share/website-design/enterprise-contact-page-form-conversion) matters too. ![White Book Your Demo form with required name and business email fields, close at upper right, and Select Date & Time below](https://www.jvds.cn/upload/2026/1008/d187-tp/u027-i3.webp) Lower booking form | The button names the specific next task. ## Frequently asked questions ### Can a technical product use an abstract hero? It can establish a brand impression, but clear explanations of mechanisms and conditions should follow. Sedai provides See why as an onward route; the abstract graphic itself does not prove features or security. ### Can several advertisements lead to one page? They can share a framework while retaining their topics. A cost entry should explain components, and a mechanism entry should explain steps and conditions, rather than uniformly repeating the homepage slogan. ## Design review checklist - Match each advertisement’s graphic, heading, and button to one question. - Distinguish illustrative cost charts from actual business materials. - Check whether the booking button accurately describes the next task. ## Struggling to explain a cloud product on the homepage? If your business product involves costs, mechanisms, and demo conversations, first organize visitor questions into clear content threads, then unify visuals and booking entries. Bring product materials to discuss website structure and page design. JVDS Design Studio provides UI/UX design, website design, and development services to help organize interface, content, and implementation needs. [Contact JVDS to discuss your project](https://www.jvds.cn/contact)