Quick UI/UX Build — 3 Pages in Wise-style (Home, Auth, Dashboard) + Full Bootstrap HTML/CSS/JS
Budget: $30 – $250 USD
I need a UI/UX designer + frontend implementer to design and deliver production-ready HTML/CSS/JS for three pages in the style of Wise.com, following wise.design patterns and interaction quality.
Everything should mirror the Wise pattern, layout, spacing, typography, and micro-interactions—except colors (we’ll use our own color scheme).
If this goes well, the next project will be to convert these pages into React components (paid follow-up).
Scope (3 Pages – must cover all components)
Home Page
Hero, feature sections, benefit cards, trust/social proof, pricing snippet, FAQs, CTA/footer.
Global header/nav + mega menu patterns.
Login / Register Page
Auth forms (login, register, forgot/reset password).
Form validation states, errors, hints, success, disabled/loading, password strength, 2FA placeholder.
Dashboard Page
Sidebar/topbar layout, overview widgets, tables, filters, pagination, search, tabs, breadcrumbs, modals/drawers, toasts.
Profile menu, settings sections, empty states, skeleton loaders.
-----------------------
The above must collectively demonstrate all key UI elements: buttons (all variants/sizes/states), inputs (text, email, password, select, radio, checkbox, switch, textarea), date/time, file upload, steppers, tags/chips, badges, tooltips, dropdowns, alerts, banners, cards, accordions, progress bars, pagination, data tables, charts placeholder, and form validations.
Requirements
Design Language: Follow Wise.com look & feel and wise.design component guidelines (patterns, spacing, typography, interaction/animation behavior).
Color Scheme: Use our custom palette (don’t use Wise brand colors). Provide palette tokens (e.g., --color-primary, --color-accent, …).
Animations/Micro-interactions: Match Wise-level polish (hover, focus, pressed, loading, skeletons, transitions).
Accessibility: WCAG 2.1 AA (focus states, contrast, semantic HTML, ARIA where needed, keyboard nav).
Responsiveness: Mobile-first; support 320px–1440+.
Performance: Lightweight CSS/JS, no bloated frameworks. Prefer Bootstrap 5; if a utility framework is used, No heavy UI kits.
Code Quality: BEM or utility-first, componentized CSS, CSS variables for theme, reusable classes, clean structure.
_____
References:
wise.com
wise.design
Follow-up: Winner will be invited to a React Components build (same design system, componentized) Project.
Everything should mirror the Wise pattern, layout, spacing, typography, and micro-interactions—except colors (we’ll use our own color scheme).
If this goes well, the next project will be to convert these pages into React components (paid follow-up).
Scope (3 Pages – must cover all components)
Home Page
Hero, feature sections, benefit cards, trust/social proof, pricing snippet, FAQs, CTA/footer.
Global header/nav + mega menu patterns.
Login / Register Page
Auth forms (login, register, forgot/reset password).
Form validation states, errors, hints, success, disabled/loading, password strength, 2FA placeholder.
Dashboard Page
Sidebar/topbar layout, overview widgets, tables, filters, pagination, search, tabs, breadcrumbs, modals/drawers, toasts.
Profile menu, settings sections, empty states, skeleton loaders.
-----------------------
The above must collectively demonstrate all key UI elements: buttons (all variants/sizes/states), inputs (text, email, password, select, radio, checkbox, switch, textarea), date/time, file upload, steppers, tags/chips, badges, tooltips, dropdowns, alerts, banners, cards, accordions, progress bars, pagination, data tables, charts placeholder, and form validations.
Requirements
Design Language: Follow Wise.com look & feel and wise.design component guidelines (patterns, spacing, typography, interaction/animation behavior).
Color Scheme: Use our custom palette (don’t use Wise brand colors). Provide palette tokens (e.g., --color-primary, --color-accent, …).
Animations/Micro-interactions: Match Wise-level polish (hover, focus, pressed, loading, skeletons, transitions).
Accessibility: WCAG 2.1 AA (focus states, contrast, semantic HTML, ARIA where needed, keyboard nav).
Responsiveness: Mobile-first; support 320px–1440+.
Performance: Lightweight CSS/JS, no bloated frameworks. Prefer Bootstrap 5; if a utility framework is used, No heavy UI kits.
Code Quality: BEM or utility-first, componentized CSS, CSS variables for theme, reusable classes, clean structure.
_____
References:
wise.com
wise.design
Follow-up: Winner will be invited to a React Components build (same design system, componentized) Project.