Back to projects

DIGITAL IDENTITY / WEB DESIGN

STUDIO PROJECT

Fuera de Ruta

A small-capacity campsite for people looking for trees, fresh air and a simple stay. The concept presents pitches and cabins without turning them into a resort: landscape opens the experience, but practical conditions matter as much as emotion.

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

INDUSTRY
Camping · Hospitality · Stay selection
WEBSITE LANGUAGE
Spanish
EDITION
2026
SCOPE
Identity, UI and production direction
01 — The campsite at dawn: landscape, small capacity and space between stays.WEBSITE DESIGN

01 / THE CONTEXT

Choosing a place, with your feet on the ground.

Fuera de Ruta addresses couples and small groups comparing ways to sleep before choosing dates. The proposal brings accommodation, terrain and visit preparation together. Photographs show damp grass, shadows and used materials; they promise neither perfect nature nor a real location.

  • Dates, guests and accommodation at first glance
  • Schematic map with practical information for every pitch
  • Stay summary without real booking or payment

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

02 / THE CHALLENGE

An attractive photograph does not explain where to park, whether electricity is available or how far one pitch sits from the next. The challenge was to make those answers visible before asking for a booking, without turning the homepage into an administrative form.

THE IDEA

Pine green organises the wayfinding, mist white supports reading and yellow marks the next decision. A humanist sans keeps the tone approachable; compact numbers distinguish pitches and cabins. The map is explicitly schematic: it helps compare positions without pretending to be real geography.

02 — A stay at human scale: canvas, natural light and everyday objects.WEBSITE DESIGN

03 / BEYOND THE HOMEPAGE

A complete system,
beyond the first screen.

Navigation beneath the landscape leads to the place, accommodation, activities and preparation. Dates and guests appear immediately. In the second view, selecting P04 connects an area on the map with its size, shade, power supply and distance to facilities. The summary retains that pitch, two guests and two nights: each amount can be traced through to the demonstration total.

03 — Desktop homepage: landscape, dates, accommodation and practical information.WEBSITE DESIGN
04 — Campsite plan and details of the selected pitch.WEBSITE DESIGN

THE PROJECT’S VISUAL LANGUAGE

Character, with purpose.

Colour & material

Pine for orientation, mist for reading, slate for data and yellow for choosing. Colour distinguishes functions without turning every block into a card.

Typography & hierarchy

Humanist lettering accompanies the landscape; pitch indices use a more compact register, useful when relating the map to its details.

Imagery & motion

A damp morning and an open tent in close-up. Photography connects the landscape with the everyday act of preparing a stay.

04 / RESPONSIVE & INTERACTION

Another screen.
The same intention.

On mobile, exploring and choosing dates remain separate actions. The form becomes short rows; prices and equipment stay beside each accommodation image. The summary orders arrival, departure, guests and conditions before the action. Long images scroll inside the shared phone, without shrinking a desktop composition.

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.

Conceptual visual study: photographs and interface images generated and selected for the project. The depicted websites are not connected to live services.

Visual study with complete interfaces presented as images. Dates, prices and availability are demonstrations; no inventory, payments or booking service is connected. The portfolio provides real enlargement, keyboard access and mobile scrolling.

  • Art direction
  • Interface design
  • Responsive WebP
  • 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

Anything else we should know? (optional)

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.com ↗WhatsApp ↗