Back to projects

DIGITAL IDENTITY / WEB DESIGN

STUDIO PROJECT

KOVA E01

A conceptual electric brand presented as a complete product launch. Silhouette, materials, energy and configuration form a story that moves from curiosity to an informed choice.

An independent AsturaWeb exploration. Digital experience design, rather than a client commission.

INDUSTRY
Electric automotive · Configuration · Launch
WEBSITE LANGUAGE
English
EDITION
2026
SCOPE
Identity, UI and production direction
The vehicle introduction: design, character and the way into configuration.WEBSITE DESIGN

01 / THE CONTEXT

A complex product. A precise journey.

KOVA E01 imagines an electric fastback and the digital system for discovering it. The website has two complementary modes: exploring the product and building a configuration. The proposal demonstrates product direction rather than announcing a real vehicle.

  • Product and material exploration
  • Configurator and trim comparison
  • Summary and interest registration

The artwork keeps its original language. The case study follows your chosen AsturaWeb language.

02 / THE CHALLENGE

Make technology understandable without turning every section into an endless specification sheet. Configuration must keep finish, wheels and interior compatible while the story remains immersive and fast.

THE IDEA

Graphite, silver and a restrained electric accent. Large sans typography, fine rules and precise product views. The same vehicle appears as a whole, a technical cutaway and a material study rather than a sequence of identical heroes.

03 / BEYOND THE HOMEPAGE

A complete system,
beyond the first screen.

Desktop places the vehicle beside its controls. Finishes and wheels have explicit selected states; trim comparison separates differences from shared features. The final summary keeps decisions visible before registering interest.

Configuration: finish, wheels and trim.WEBSITE DESIGN

THE PROJECT’S VISUAL LANGUAGE

Character, with purpose.

Colour & material

Graphite · silver · electric accent

Typography & hierarchy

Precise sans, generous headlines and consistently spaced technical labels.

Imagery & motion

Product views, cutaways and materials. Motion direction connects angles and variants; diagrams explain relationships without science-fiction effects.

KOVA E01 / 01

Understand what lies beneath.

Battery, cabin and structure have dedicated chapters. Cutaways and image scale support an explanation; typography and units keep emotion and specification connected.

Energy, range and concept chargingWEBSITE DESIGN
Cabin and materialsWEBSITE DESIGN
Proposed performance and specificationsWEBSITE DESIGN
Technical architecture and concept safetyWEBSITE DESIGN

KOVA E01 / 02

From comparison to a saved choice.

The comparison uses the same rows for each trim. The final step returns the complete configuration and one clear action: register interest. No payment is requested for an imaginary product.

Trim comparisonWEBSITE DESIGN
Final configuration and interest registrationWEBSITE DESIGN

04 / RESPONSIVE & INTERACTION

Another screen.
The same intention.

The vertical story gives each chapter one idea: form, energy or interior. Mobile configuration separates decisions into steps and keeps the summary near the action. E01, Configure, Specs and Reserve retain order and icons; technical details open without shrinking a desktop table.

KOVA E01 — Launch · long vertical story
Launch · long vertical story
KOVA E01 — Finishes and configuration
Finishes and configuration
KOVA E01 — Energy and specifications
Energy and specifications
KOVA E01 — Summary and next step
Summary and next step

FROM BRIEF TO SYSTEM

  1. 01Context
  2. 02Content
  3. 03Structure
  4. 04Visual direction
  5. 05UI system
  6. 06Responsive

Development, integrations and production validation belong to a later phase, defined around the actual scope.

05 / TECHNICAL DIRECTION

Designed with
production in mind.

A recommended implementation for this concept, not a claim about an already built or deployed website.

An implementation could load Three.js/WebGL only when opening the configurator, with images as a fallback. A typed state model would validate compatible options and serialise configuration. Transform animation and SVG diagrams would avoid heavy repainting; canvas sequences would have resolution limits and pause offscreen. Keyboard use, reduced motion and an HTML interest form would work without 3D. Figures, performance and prices in the visuals are invented concept targets, not measurements or a commercial offer.

  • React
  • TypeScript
  • Three.js / WebGL
  • SVG
  • Canvas
  • Semantic HTML, keyboard access and contrast
  • Responsive images and progressive loading
  • Indexable content and SEO structure

Hosting, consent-based measurement and structured data would be defined around verified information and practical needs.

LET’S TALK

A new website, a redesign or an idea you haven't quite worked out yet. Write to us and we’ll explore what makes sense together.

Tell us
what you have in mind.

Shape my project
What would you like to do?
The context

What kind of website do you have in mind?

Tell us what you do and what your new website should achieve.

Website type

Choose one. You can change it later.

What should this website achieve?
What does your business do? · Optional
Budget and timing Optional

This helps us understand the scope. It is not a quote or a delivery commitment.

What budget do you have in mind?
When would you like to get started?
What budget do you have in mind?
When would you like to get started?

Anything you’re unsure about can wait until we talk.

What is no longer working?

Tell us what needs to change and what is worth keeping.

What needs to change

Choose as many as you need.

What would you like to keep?
Is there a change that matters most? · Optional
Budget and timing Optional

This helps us understand the scope. It is not a quote or a delivery commitment.

What budget do you have in mind?
When would you like to get started?

Anything you’re unsure about can wait until we talk.

Where would you like to be found?

Tell us what you offer and where you want people to find you.

Where you want to reach people

Choose one. You can change it later.

What would you like to improve?
What do you sell or offer?

Add your website or briefly describe what you offer. Either is enough.

Which city, region or market do you serve? · Optional
Budget and timing Optional

This helps us understand the scope. It is not a quote or a delivery commitment.

What budget do you have in mind?
When would you like to get started?

Anything you’re unsure about can wait until we talk.

What do you have in mind?

You don’t need all the answers. Tell us what you want to achieve.

The shape of your idea

Choose one. You can change it later.

Who would use it?
What would you like to automate?
Where could AI help?
What would the platform connect?
What does your commerce project need?
Where would you like to start?
What would you like to make easier? · Optional
Budget and timing Optional

This helps us understand the scope. It is not a quote or a delivery commitment.

What budget do you have in mind?
When would you like to get started?

Anything you’re unsure about can wait until we talk.

The contact

Your contact details

A short description is enough. Please leave out sensitive information.

Your message is only sent when you choose “Send my project”.

hola@asturaweb.com

Based in Asturias. Working remotely across Spain, Europe and worldwide.

You don't need technical knowledge or a fully formed plan. Tell us what you do and what you’d like to improve. We’ll start there.

A tailored quote. A clear proposal, with no obligation.

TO GET THE CONVERSATION STARTED

  • What your business does
  • What you’d like to improve
  • Your current website, if you have one

Read the policy and browser storage inventory

ASTURA / BRIEF

Your project, made clear.

  1. 01The idea
  2. 02The context
  3. 03The contact
What would you like to do?

You can also contact us directly.

hola@asturaweb.comWhatsApp ↗