Адаптивная верстка сайта интернет-магазина

A modern corporate catalog website needs to be developed for a company engaged in the production and sale of metal-plastic windows. The main target audience: developers; construction companies; architects; designers; corporate clients. The website https://pravilnieokna.com.ua/ can be used as a style and execution reference. However, the new website should not be a copy. A unique design is required, focusing on working with B2B clients. The following needs to be implemented: modern responsive design; user-friendly product catalog; “About the Company” section; “Production” section; “For Developers” section; “Completed Projects” section; “Certificates” section; “Contacts” page; feedback forms; form for sending a project or specification with the ability to attach files; basic SEO optimization; user-friendly website management system (preferably WordPress or another modern solution). The website should look modern, work quickly, and inspire trust among large clients. When responding, please indicate: the cost of development; the deadlines for completion; which CMS or technology the website will be developed on; what is included in the cost; examples of similar works (mandatory); suggestions for improving the structure and functionality. Priority will be given to contractors with experience in developing corporate websites and B2B catalogs.

A complete redesign of the existing online store ROBO is needed: https://robo.org.ua/ The site is already operational, with products and basic functionality available. It is necessary not to create a new site from scratch, but to completely overhaul its design, page structure, and user journey to purchase. The main goal of the redesign is to make the site modern, user-friendly, clear, and maximally sales-oriented. The primary traffic will come from Meta advertising — Facebook and Instagram. Most buyers view the site from smartphones, so special attention should be paid to the mobile version. A person visiting the site for the first time from an ad should immediately understand: — what the product is; — what its main advantages are; — how much it costs; — what is included in the package; — how delivery and payment are handled; — whether the store can be trusted; — how quickly to place an order. It is necessary to analyze the existing site, identify the main problems in design, structure, and usability, and then propose a new UI/UX design in Figma. Full computer and mobile versions of the site need to be developed. What needs to be developed: Header of the site. The header of the site needs to be completely redesigned for both computer and mobile versions. The header should include: — store logo; — "Product Catalog" button; — main category menu; — site search; — phone number; — quick contact button; — working hours; — favorites; — personal account, if used; — cart with the number of products; — mobile burger menu; — information about delivery, payment, or current promotions. The header should be compact, clear, and not take up too much space. When scrolling the page, a fixed shortened header with the main elements: logo, catalog, search, and cart should be provided. Mobile menu. A convenient mobile menu needs to be developed separately, which will include: — product catalog; — categories; — search; — contacts; — delivery and payment; — warranty and returns; — reviews; — favorites; — cart; — contact buttons via phone or messengers. Homepage. The homepage needs to be developed with: — a main banner with a clear offer; — promotional products; — popular categories; — bestsellers; — new arrivals; — discounted products; — advantages of the store; — information about delivery and payment; — customer reviews; — trust block for the store; — recommended products; — answers to frequently asked questions; — subscription or call to view the catalog; — footer of the site. The homepage should not be overloaded. Its main task is to quickly direct the user to the desired product or category. Product category page. It is necessary to develop: — category name; — short description; — subcategories; — filters; — sorting; — product cards; — labels "Hit", "New", "Discount"; — current and old price; — rating; — number of reviews; — add to cart button; — option to add to favorites; — pagination or "Show more" button; — mobile version of filters. Product cards should be modern, clear, and not overloaded with unnecessary information. Product page. The product page is the most important part of the site. It should combine the functionality of an online store and the structure of a selling landing page. It is necessary to develop the correct sequence of blocks that will help the user quickly make a purchase decision. In the first screen of the product page, there should be: — product name; — article number; — rating; — number of reviews; — photo gallery; — product video; — current price; — old price; — discount size; — availability information; — color or configuration options; — quantity of products; — main "Buy" button; — quick order button; — short main advantages; — delivery information; — payment information; — warranty and returns; — package information. After the first screen, the following should be placed: — short block of main advantages; — demonstration of the product in real use; — problem that the product solves; — detailed description; — photos and videos; — main characteristics; — what is included in the package; — usage instructions; — comparison with other products or regular analogs; — who the product is suitable for; — delivery and payment block; — warranty and return conditions; — customer reviews; — reviews with photos and videos; — questions and answers; — recommended products; — related products; — products that are often bought together; — repeated call to place an order. In the mobile version, a fixed bottom panel with the price and "Buy" button should be created. It is also necessary to provide convenient switching between sections: — description; — characteristics; — reviews; — questions; — delivery and payment. Delivery and payment block. A separate clear block needs to be developed, which will specify: — delivery by Nova Poshta; — estimated delivery time; — option to pay upon receipt; — online payment; — payment to the account; — delivery cost; — conditions for free delivery, if applicable; — exchange and returns; — warranty. This information should be visible near the "Buy" button and also duplicated lower on the page. Reviews. A modern review block needs to be developed: — overall product rating; — number of reviews; — distribution of ratings; — buyer's name; — review date; — "Verified Purchase" label; — review text; — photos; — videos; — product rating; — store response; — "Leave a review" button; — review sorting. Reviews should inspire trust and be easy to view from a smartphone. Product characteristics. A separate clear block of characteristics needs to be created. Characteristics should be displayed in the form of a structured list or table that looks good on both computer and smartphone. Questions and answers. A block needs to be developed where buyers can: — view popular questions; — open and close answers; — ask their own question; — see the store's response; — view the date of the response. Cart. A full and mini version of the cart needs to be developed. The cart should include: — product photo; — name; — selected configuration or color; — price; — old price; — quantity; — option to remove the product; — promo code; — order total; — delivery cost or information about it; — recommended products; — "Place Order" button; — "Continue Shopping" button. Order placement. The order placement should be as simple as possible without unnecessary fields. Main fields: — name; — phone number; — locality; — Nova Poshta branch or parcel terminal; — delivery method; — payment method; — order comment; — promo code; — order composition; — total amount; — order confirmation button. It is also necessary to provide a message about successful order placement. Site search. It is necessary to develop: — search bar; — suggestions while typing; — popular search queries; — products in results; — categories in results; — search results page; — message if nothing is found. Favorites. A page of selected products needs to be developed with the ability to: — view saved products; — remove products; — add products to the cart; — continue shopping. Information pages. Design needs to be developed for the following pages: — delivery and payment; — warranty; — exchange and returns; — about the store; — contacts; — privacy policy; — public offer; — frequently asked questions. Contact page. It is necessary to provide: — phone number; — email; — working hours; — messengers; — social networks; — feedback form; — legal information about the store. Footer of the site. The footer of the site needs to be completely developed. The footer should include: — logo; — brief information about the store; — catalog; — popular categories; — information for buyers; — delivery and payment; — exchange and returns; — contacts; — working hours; — social networks; — payment methods; — legal information; — privacy policy; — public offer. System pages and messages. Design for the following states needs to be provided: — product added to cart; — product added to favorites; — form filling error; — product out of stock; — empty cart; — empty favorites; — nothing found; — 404 page; — successful order placement; — payment error; — page loading; — cookie usage message. Design system. A unified design system needs to be created, which will include: — colors; — fonts; — headings; — buttons; — input fields; — product cards; — icons; — spacing; — modal windows; — messages; — active and inactive states; — hover states; — mobile components. All elements should be designed as components in Figma. Target audience: Buyers from Ukraine looking for products for home, cars, children, electronics, gifts, and useful gadgets. A significant portion of users come to the site from Facebook and Instagram ads. They primarily use smartphones and may be seeing the ROBO brand for the first time. Therefore, the site should: — load quickly; — inspire trust; — clearly show product advantages; — not overload the user; — simplify order placement; — look good on different screen sizes; — motivate the user to buy the product. Designer requirements: — experience in designing online stores; — experience in creating selling product pages; — understanding of UI/UX; — understanding of mobile adaptation; — ability to work in Figma; — understanding of user behavior coming from ads; — portfolio with similar works; — readiness to justify proposed solutions; — ability to make adjustments after the design presentation. Expected result: — complete design of the online store in Figma; — computer version; — mobile version; — design of all main pages; — design of main system states; — components and design system; — clickable prototype of main pages; — clear file structure; — preparation of layouts for handover to the programmer; — specified sizes, spacing, fonts, colors, and states of elements. Programming and layout are not required at this stage. A complete UI/UX design in Figma is needed. In response to the project

1. Title Motion Designer: Lottie Animation of Face Analysis for Landing (Web, Vector)2. What We Do One vector animation is needed for the hero section of the landing page of a web product (AI face analysis, playful format). Plot: a stylized wireframe face (linear, semi-transparent, drawn by an artist — not a photo). Landmark points (eyes, nose, jawline, eyebrows) sequentially "sit" on it, with a light grid built between them. In the end, 2–3 small score cards gently "fly out" from the face (e.g. Curiosity 88 / 100). Behavior: build-in on load (the grid builds up, cards appear, ~3–4 s) → then a quiet seamless loop (~8–12 s): the grid barely "breathes," cards gently pulse. No sharp movements.3. Style Aesthetics: editorial, clinical, grey — calm light "studio air," thin lines, soft light from within. Tone reference — QOVES face-analysis (premium "medical-analytical report" × magazine spread). Important — tone: this is a playful vibe analysis, NOT a medical scan and NOT facial recognition. No IDENTIFIED frames, crosshairs, red, "security" HUD, cyber-neon. Points and annotations should feel interesting and light, not like biometric surveillance. Palette and typography — strictly according to the extract at the end of this document (adherence to the palette is a condition for acceptance). References I am adding: QOVES aesthetics + 2–3 examples of Lottie in grey-clinical / wireframe style + a screenshot of the hero where the animation will be (there are glass cards nearby — the animation should coexist with them, not compete).4. Technical Requirements Format: Lottie JSON, transparent background. File size: ≤ 150 KB (ideal ~80–100 KB). 30 fps. No raster images inside — everything is vector (no embedded PNG/JPG). Minimum masks and large gradients; no effects that Lottie does not render natively (complex blur, some merge-paths). Must test export specifically in the web player (lottie-web / LottieFiles preview), not just in After Effects. Mobile: plays correctly and reads on real iOS Safari and Android Chrome; on a narrow column, the face/grid is not cut off, cards do not exceed boundaries; smoothly on budget Android. Artboard that scales cleanly in the range of ~360–700px width. Delivered with a reduced-motion frame — static final state (built grid + cards) for prefers-reduced-motion.5. Deliverables + Rights The contractor delivers: Lottie JSON for the landing. Reduced-motion static frame (SVG or PNG). Editable source file — After Effects project file (.aep) with all layers and labeled groups. (Optional / bonus) "quiet" light version for the login page from the same layers — if you stay within budget; otherwise, it will be moved to the next stage. Rights: full transfer of exclusive property rights + unlimited commercial use. The contractor confirms that all elements are original or licensed for commercial use. Fonts in the cards — free Google Fonts (Hanken Grotesk, JetBrains Mono), no paid font traps.6. Process Style frame on the first day — one static frame of the future animation for style approval. I confirm the same day. After my "okay" — animation. 2 rounds of revisions included in the price. Payment in stages through Safe agreement: part after style frame approval, the rest — after acceptance of final files. Important quick start: style frame on the first day, so respond only if you are truly available now.7. Budget and Timeline Budget: $150 for the full scope with deliverables and rights (fixed). Timeline: 4 days from the start.8. What to Send in Response 1–2 works specifically in Lottie / motion (not just static illustrations). Short comment: how you see this style according to our reference. Confirmation that you can start immediately and provide a style frame on the first day. Responses without Lottie examples and without a style comment will not be considered.Palette Extract (to be given to the selected contractor) This is all the color/typography information needed by the artist. Full CSS/repository is not provided. Background: neutral light #f2f5f7. Grid lines, face outline, text: grey "ink" tones —#1f2730 (main), #56606c (secondary), #8a93a0 (lighter). Single accent — only on landmark points: grey-slate #505c65 (deeper variant #3b4651). No other accents should be used. Prohibited: any other colors, saturated gradients, rainbows, neon, red, heavy shadows. Shadows — only soft, low opacity, with a cool tint. Score cards (trait-reveal): semi-transparent "glass" tiles (frosted, light blur, thin light edge); large number — thin weight 300, elegant, not bold; label — small mono-font, ALL CAPS, spaced tracking. Fonts: Hanken Grotesk — trait names, labels (weight 300–500). JetBrains Mono — small labels, indices, digital signatures (e.g. / 100). Tone in one line: calm almost white studio air, illuminated from within; thin lines; one grey-slate accent touches only the grid nodes.

Good day, colleagues. Due to issues with the designer, we needed to start the redesign of the pages yesterday. I am attaching the layout in Figma of the pages that are ready - Figma Ready now: Main, Catalog, Product Card. What needs to be drawn: Personal Account, Cart, Order Placement, Quality and Control, Certificates, Blog, and internal blog page. I ask those who have really studied: the layouts that are already ready, the technical specifications, and prototypes — to write a control response with the technical specifications. Technical specifications - Click Prototypes - Click

It is necessary to professionally design an online store on the Khoroshop platform, making it modern, convenient, and visually appealing. Requirements: Design the main page in a unified corporate style. Set up beautiful banners, categories, and product blocks. Improve the visual design of product and category cards. Create convenient navigation and structure for the main page. Set up attractive displays for promotions, new arrivals, popular products, and brands. Optimize the site's display on mobile devices. Propose improvements for UX/UI if necessary. Utilize the capabilities of the Khoroshop platform without compromising site loading speed. Advantages: Experience in designing stores on the Khoroshop platform. Portfolio of completed projects. Understanding of modern UX/UI and e-commerce principles. Knowledge of SEO requirements when designing the site. When responding, please send: links to stores you have designed on Khoroshop; a brief description of completed works; cost and timeline for project completion.