Overview
GRN Urban is a cultural guide to Granada combining an events calendar, themed walking routes, editorial guides and an itinerary planner. Its Spanish and English content connects places and activities across those sections.
From problem to outcome
-
The challenge
Events, routes, city guides and trip planning are different information needs. The brief was to bring them together so visitors could move from discovering an activity to planning a day around their interests and available time.
-
Information architecture
GRN Urban is structured around four sections: Events, Routes, Guides and Planifica. Events group activities by category and venue; Routes are organised by theme and available time; Guides provide context and link to related places and activities. Planifica is an itinerary builder for selecting and arranging activities.
-
Visual & interaction design
The visual direction draws on print cartography and editorial design. Vertical 'GRANADA' lettering, coordinate references and section labels frame the guide as a city volume. A restrained type system and grid organise cards, lists and long-form pages in both Spanish and English. Responsive layouts adjust spacing for smaller screens, while actions such as 'Ver todos' and 'Crear mi itinerario' make the next step clear.
-
Technical approach
Astro provides static generation for the content-led pages; richer JavaScript is reserved for interactions such as the itinerary planner. Tailwind CSS supports the project-specific styles. Semantic landmarks, skip navigation and responsive image handling form part of the implementation.
-
Outcome
The delivered guide brings events, routes, editorial guides and itinerary planning into one interface. The navigation connects those sections while keeping the editorial content and planning tool distinct.
- Astro
- Tailwind CSS
- GSAP