xxvi studios

Role: back-end Designer & Developer
Timeline: 3 weeks
Scope: back-end design, UI/UX, appointment management, responsive build

Project Brief & Goals

When J26 (owner of XXVI Studios) asked me to build their mobile portfolio, they had a clear vision: a platform that showcases their full range of photography and creative work, communicates mood, personality and energy, and works just as well in PDF form as it does on the web. It needed to be lean, elegant, quick to load, intuitive to navigate, and designed so that new shoots or content could be added easily over time. The timeline was tight — just one week — so scope had to be sharply focused.

Research & Narrative Strategy

First, I reviewed J26’s catalogue of shoots — styles, lighting, composition, editing — to understand what makes their work distinct. Key traits emerged: bold contrasts, strong emotional tone, variety of subjects, dramatic lighting, editorial and commercial crossover. I also examined similar portfolios and studied what layout strategies help viewers immediately recognize skill range (e.g. alternating image sizes, overlay text, clean white space).

From that, I mapped a viewer narrative, deciding the flow: opening with a striking image, then grouping work to highlight style range (portrait, editorial, brand, experimental), then finishing with personal passion / conceptual projects. The aim: a visitor should scroll (or flip through PDF pages) and instantly get a sense of technical ability, creative vision, and energy.

Design & Build Process

• Day 1‑2: Layout & Template Creation
  I drafted several sitemap ideas and wireframes. Home / landing page, works‑gallery, individual project pages, “About / Contact,” plus a PDF export template. Chose a mobile‑first structure, ensuring vertical scroll feels natural. Designed with Canva’s site tools (since the portfolio is hosted via Canva), picked typography, colours, image treatments to match J26’s aesthetic.

• Day 3‑4: Content Integration & Image Optimization
  Selected the strongest images, edited for consistency (colour grading, exposure) so that when displayed side by side they “speak” together. Optimised for mobile (light‑weights, web‑friendly formats) and for PDF (good resolution, safe margins). Wrote succinct intro / project text for each project to support the narrative without overwhelming the visuals.

• Day 5: Viewer Journey & Visual Flow
  Attention to the transitions between projects, making sure page breaks and image groupings retain momentum. Introduced visual pauses (clean whitespace, minimal text) so the viewer’s eye rests. Ensured calls to action (contact, enquiry, next project) are simple but accessible.

• Day 6: PDF Export & Dual Functionality
  Designed the portfolio so that Canva’s PDF export yields a file that mirrors the website: same flow, same image order, same typography. Ensured that images are retained at high enough resolution for print or PDF viewing, text is legible, and layout works in both mediums.

• Day 7: Testing, Tweaks & Flexibility Setup
  Tested on a variety of devices (phones, tablets), and in PDF viewers. Noticed small issues (text overlap, image cropping) which were adjusted. Built page / project templates so that adding a new project later is as simple as duplicating a template, swapping images & text. Delivered to client, showed how to maintain and update.

Key Design Decisions & Justifications

• Viewer Narrative over Catalogue: Instead of just a flat list of projects, the flow was structured deliberately to highlight range and mood. This keeps engagement high, making skillset obvious from first glance.

• Visual Consistency: Colour tones, image sizes, margins, and typography were unified so that even highly varied shoots feel like part of a coherent whole.

• Dual‑Mode Format (Web + PDF): Because the client wanted a mobile/web site and a portfolio PDF that feels identical, design decisions always accounted for both. Margins safe for PDF print/export; image resolution mindful of both media.

• Ease of Updating: Template structure ensures that future content additions don’t break flow. New project pages will slot in; gallery can expand; narrative order can evolve.

Challenges & Workarounds

• Time Constraint: One week leaves little room for second‑guessing. To remedy this, I locked in the narrative flow early and did “content first” work (selecting/editing images) before heavy design, so I knew what visuals existed and could design around them.

• Image Heterogeneity: Shoots varied in style, lighting, aspect ratios. To maintain consistency, images were batch‑edited, cropped or letterboxed, and given common visual “glue” (e.g. similar aspect ratios, post‑processing treatment).

• PDF vs Web Differences: Certain spacing or layout features that look great on web don’t translate cleanly in PDFs (text wrapping, image bleed, margins). I tested frequently with PDF export, tweaked until both formats looked polished.

• Device Variation: Mobile screen sizes differ, plus PDF viewers’ zoom behaviors. I used responsive design rules, tested on multiple devices, and built in safe zones for images/text to avoid cut‑offs or unreadable text.

Final Reflections

In just one week, the site went from concept to a polished mobile portfolio that captures J26’s energy, mood, and range. The visitor journey is intentional: first impression strong, narrative flow clear, variety obvious. And because of deliberate choices around template design, image handling, and dual‑format delivery, it’s sustainable—easy to update, flexible for future growth.