Blok Photo: A Monochromatic Portfolio & Workshop Reservation Website
Overview
Blok Photo is a premium digital space designed for a professional photographer and educator. The project involved creating a high-end visual identity and a functional web platform from scratch. The goal was to bridge the gap between artistic expression (Portfolio) and business growth (Workshops). I handled the entire process, from UI/UX design to custom WordPress development.
My Role
End-to-End Web Designer: Created a minimalist, monochromatic visual system.
Full-Stack Developer: Built the site on WordPress using custom CSS and JavaScript.
UX Researcher: Designed an intuitive flow for potential students to browse and book workshops.
Home page
The Challenge
The client had no existing digital presence, making it impossible to showcase professional work or manage workshop inquiries. The requirement was a "distraction-free" environment that would let the photography take center stage while providing a clear, professional path for students to enroll in training sessions.
The Solution: Minimalist Architecture
I developed a sleek, monochromatic (black & white) interface that prioritizes imagery and typography.
Key Technical Features:
Custom Portfolio Engine: Developed a dynamic gallery with a custom JavaScript filtering system. This allows users to seamlessly switch between photography categories without page reloads, providing a premium "app-like" feel.
Educational Hub: Created dedicated landing pages for workshops, featuring clear information hierarchy and integrated contact funnels.
WordPress Foundation: Leveraged WordPress to ensure the client can easily manage content, while stripping away "bloat" to maintain high performance.
Responsive Precision: Every element was hand-coded to ensure the minimalist aesthetic remains perfect across mobile and desktop devices.
The Result (Development-Ready)
The project resulted in a fully functional MVP (Minimum Viable Product).
Design System: A complete, elegant UI kit ready for future scaling.
Functional Codebase: A custom-coded portfolio and contact system optimized for conversion.
Brand Positioning: The platform successfully positions the client as an authority in both the creative and educational photography space.
Tech Stack
Platform: WordPress
Code: Custom JavaScript (ES6+), CSS3, HTML5
Workshop showcase page
Portfolio page
Contact page
Behind the scenes look at portfolio category selector component.