Night City Web
A WordPress catalogue site for a family-run secondhand bookshop in Bologna, Italy, translating a cinematic dark aesthetic into a system a non-technical owner can manage independently.
Night City Web
A dark catalogue for secondhand sci-fi books.
NC-WEB-2024
THE GOAL
Give Citta Notturna a digital presence that reflects the identity of the books it sells.
Make the catalogue easy to browse and connect buyers directly to Amazon Italia.
Success signals
A visually distinct catalogue the owner can update independently, with a clear path from book discovery to purchase.
SCOPE
I led the project end to end: information architecture, visual system, page templates, and full implementation in WordPress.
The project involved direct collaboration with the client to translate a high-production visual reference into a system she could manage independently. The scope covered the live site, not a prototype.
THE PROBLEM
A Bologna bookshop with no digital presence wanted a site as atmospheric as the books it sells, manageable without technical support.
Client sentiment
No digital presence beyond Amazon Italia listings.
Generic catalogue sites felt misaligned with the identity of the books.
Content updates had to be possible without calling a designer.
CONSTRAINTS
Because this was a client project with fixed tools and a non-technical owner, the constraints were defined before any design decision was made.
These constraints didn't limit the design, they focused it. Working within a fixed platform, a non-technical client, and a cinematic reference that couldn't be directly replicated made every decision more deliberate and more defensible.
RESEARCH APPROACH
Content and design decisions were informed by a direct review of the client's inventory, analysis of the visual reference, and a competitive review of existing book catalogue sites.
Methods
Content audit of 404 book files to define data structure and template fields.
Visual reference analysis to identify transferable elements and WordPress constraints.
Competitive review of secondhand book catalogues and genre-specific retail sites.
Direct client collaboration to clarify inventory organisation and content priorities.
Inventory
404 books across sci-fi, each with a full review, technical data, and social media hashtags, supplied as individual text files by the client.
Design Criteria
Reflect the atmospheric identity of sci-fi a genre.
Surface book information clearly without feeling like a generic retail catalogue.
Support a non-technical owner updating content independently.
Connect every book directly to its Amazon Italia listing without friction.
Key findings
All 404 books follow a consistent structure ready to migrate into WordPress.
Condition, price, and Amazon Italia links are absent from all files to be added manually during the build.
Genre must be assigned as a WordPress category during migration.
Build a structure prepared for catalogue growth and future language expansion.
Pain-Point Audit
A review of four Italian used book sites: Libreria Lorici, Libreria Nanni, Libreria Aldrovandi, and Delos Store Bazaar, identified four problems present across all of them.
Competitive Analysis
Research signals grouped into four recurring themes, the patterns that directly shaped the design decisions.
Absent
Partial
Present
SYNTHESIS OUTPUTS
Client Types
Two visitor types shaped every structural and visual decision in the design.
The Browser
Primary motivation: discover books by genre, condition, or price before deciding.
Occasional visitor arriving through social media or search.
Needs
· Clear catalogue organised by genre or category.
· Book condition and price visible without opening the detail page.
· A direct path to the Amazon Italia listing when ready to buy.
The Enthusiast
Primary motivation: find a specific title or explore the full inventory of a niche genre.
Returning visitor with specific reading interests.
Needs
· Filters by genre, author, or condition.
· Enough detail per book to justify the purchase decision.
· Trust signals that the seller is credible and the inventory is real.
Information Architecture
The site is organised around three page types and a single navigation principle: visitors enter by genre and refine by condition or price.
Structure principle: every book is reachable in three clicks. Homepage to genre, genre to catalogue, catalogue to book detail and Amazon Italia.
Navigation
Homepage.
Catalogue, filterable by genre, condition, and price.
Book detail, with direct link to Amazon Italia listing.
Page types
Homepage, atmospheric entry point, featured books, genre navigation.
Catalogue, full inventory grid with filters.
Book detail, complete book information, images, and Amazon Italia CTA.
DESIGN PROCESS
The design was driven by two constraints working together: a visual reference that demanded atmosphere, and a client who needed to manage content independently.
Every structural and visual decision was tested against both.
Approach
Before designing any template, I audited the 404 book files to map the content fields, and reviewed competitor catalogues to identify what to avoid.
Wireframes for the three page types followed, built around the information hierarchy defined in the content audit.
Wireframes
Three page types — Homepage, Catalogue, Book Detail — wireframed before any visual decisions were made.
These decisions translate a high-production visual reference into a system a non-technical client can manage independently, without losing the atmosphere that made the reference worth pursuing.
THE SOLUTION
A WordPress site built around three page templates: homepage, catalogue, and book detail, designed to feel nothing like a generic book retail site, and simple enough for a non-technical owner to manage from day one.
Core logic
Every page uses the cityscape as a structural backdrop. Book content sits in front of it, not on top of a plain background. The atmosphere is constant, the content is always the focus.
Main Design Decisions
01
Atmospheric background as structural element
The cityscape defines page rhythm and depth without competing with book content.
02
Dark palette with selective accents
Near-black base with crimson tones. Accents reserved for titles, CTAs, and labels only.
03
Slide-out navigation
Keeps the hero cityscape uninterrupted across all pages.
04
Single conversion action
One CTA per book detail page, linking directly to Amazon Italia.
05
Book cards as self-contained units
Cover, title, author, genre, condition, and CTA visible without opening the detail page.
The primary visitor journey, from entry to purchase, mapped across all possible decision points, including browsing without intent, filtering by preference, returning to related books, and exiting to Amazon Italia.
Three page types, one consistent visual system. The cityscape holds the atmosphere, the content holds the attention, and every path through the site ends at the same place — the book, and the decision to buy it.
UI DESIGN
The visual system was built to translate a cinematic dark aesthetic into a maintainable WordPress interface, atmosphere without complexity.
Design tokens
A structured set of visual decisions applied consistently across every page type.
Four colour groups: Base, Backing, Background, and Light, establish the dark layering system. Six accent colours reserved for interactive elements and highlights.
Breakpoints: An 8-point spacing grid and defined breakpoints keep layout consistent across screen sizes.
Logotype: The client's existing symbol, a running rabbit skeleton, paired with the wordmark in condensed uppercase. Dark, distinctive, and slightly irreverent.
Button states: Five states across four button styles. The yellow accent button serves as the primary purchase CTA, immediately identifiable against the dark interface.
Typography
Open Sans was chosen as the single typeface across headlines and body text, nine weight and size combinations from Display down to Small body.
The decision prioritised readability of book reviews and technical data on dark backgrounds while maintaining a clean editorial character.
OUTCOME
Within weeks of going live, client was publishing independently, 397 of the 404 books uploaded by the client herself, without design support, exactly as the system was built to allow.
The full catalogue of 404 titles is now live, each with cover photography, technical data, a full review in Italian, and a direct link to the Amazon Italia listing. The three-click path from homepage to purchase works as designed.
The visual direction landed.
The site is already generating attention within the Italian sci-fi and fantasy reading community, an audience that had no local online catalogue to call their own before this one existed.
What this project proved
A cinematic visual reference doesn't have to stay a reference. With the right constraints and the right structure, atmosphere is buildable in WordPress.
The fastest way to validate a design system is to hand it to a non-technical user and step back.
Results
The three-click path from homepage to purchase works as designed. The site is already generating attention within the Italian sci-fi and fantasy reading community, an audience that had no dedicated local catalogue before this one.
What this project proved
A cinematic visual reference doesn't have to stay a reference. With the right constraints and the right structure, atmosphere is buildable in WordPress.
The fastest way to validate a design system is to hand it to a non-technical user and step back. Client's autonomy from week one was the clearest signal that the structure worked.
Learnings
A client publishing 397 books alone is the clearest proof a system works.
Visual ambition and WordPress constraints are not opposites, they sharpen each other.
A verbal brief works until it doesn't. Write it down from the start.
Night City Web
A dark catalogue for secondhand sci-fi books.
NC-WEB-2024
