← All projects

Lucas EscuínAlamar

A warm editorial experience that turns essential podiatry-practice information into a journey that is easy to understand and act on.

Explore demo Request a quote
portfolio.local/demos/lucas-escuin
Lucas Escuín Alamar hero on desktop
Lucas Escuín Alamar hero on mobile
  • Personal narrative
  • Editorial grid
  • Direct contact
  • Accessible responsive UI
Sector
Podiatry
Contribution
Visual direction · UX/UI · Front end
01

The commercial challenge

Warmth is also built through hierarchy.

Need

Useful information was split across healthcare registration, location, accessibility, telephone and social profiles. The opportunity was to bring it together without falling into interchangeable clinical design.

Objective

Introduce the practitioner, explain the care journey and lead to booking, directions or contact with a calm, direct hierarchy.

Designed response

I defined the single-page architecture, visual direction, editorial grid, responsive system, microinteractions and anchor navigation.

Built with

HTML5CSS3JavaScriptLenisIntersectionObserverResponsive UI

Validated with

Playwright QA1440 / 390 px
02

Interface evidence

The solution on screen

Lucas Escuín Alamar original hero
01

A named practitioner, not a directory

The hero prioritises practitioner, specialism and action. Its asymmetric composition adds character without reducing clinical clarity.

  • Immediate hierarchy
  • Direct phone CTA
  • Location photography as evidence
Care process adapted to mobile
02

Three moments explain the care journey

Short stages replace a generic clinical list with a sequence that stays clear on mobile.

  • Sequential reading
  • Generous controls
  • Stable order across viewports
03

Commercial journey

From a personal introduction to direct booking.

  1. 01

    Introduce

    Name, specialism and proposition open the journey.

  2. 02

    Explain

    The care process reduces uncertainty.

  3. 03

    Locate

    Address and accessibility prepare the visit.

  4. 04

    Contact

    Phone, Maps and Instagram remain one step away.

Lucas Escuín Alamar mobile composition

Demonstrated capabilities

A warm clinical identity that remains easy to navigate.

Grid, typography and direct actions demonstrate art direction, content architecture and responsive execution in one page.

Discuss a project
04

Verifiable build

The engineering stays available without slowing the story.

Solution

A linear architecture brings practitioner, process, visit and contact together.

Solution

Different crops and scales reuse it honestly without simulating a larger gallery.

Solution

The grid becomes a vertical sequence while retaining titles, marks and actions.

Built features

Interactions with a specific purpose.

  • Floating header
  • Anchor navigation
  • Local Lenis scroll
  • IntersectionObserver reveals
  • Phone CTA
  • Maps and Instagram links
05

Implementation quality

A compact presence with practical information and its own character.

Responsive

The editorial composition becomes one column and keeps contact prominent at 390 px.

Accessibility

Semantic HTML, visible focus, descriptive links and progressive motion that never blocks content.

Performance

Direct HTML, CSS and JavaScript with a small runtime footprint and limited assets.

Delivered

  • Single-page presentation
  • Three-stage care process
  • Visit and accessibility block
  • Phone and external contact links

Does your offer need this kind of clarity?

Let’s design a website that helps people understand, trust and act.

Tell me what the business sells, what content exists and where the decision stalls today. We will define scope before quoting.

Request a quote