İsmayıllı Peşə
Təhsil Mərkəzi
A modern digital home for Azerbaijan's vocational education
İsmayıllı Dövlət Peşə Təhsil Mərkəzi is a state vocational training center in Ismayilli, Azerbaijan — one of the region's key institutions for hands-on professional education since 1969. The center needed a complete digital presence that reflected its legacy while serving students, parents, and the wider community.
I was responsible for both the UX/UI design and frontend implementation — designing the full interface in Figma, then building it end-to-end in HTML, CSS, and JavaScript.
"Biz gələcəyin təməlini möhkəm qururuq"
The homepage communicates the center's mission immediately — building the foundations of the future. It leads with a bold hero headline, followed by program categories, success stories, featured student products, and a blog. The layout was designed to serve multiple audiences: prospective students, parents, and community partners.
- Clear hierarchy guiding visitors through the center's value proposition
- Program showcase with icons and descriptions for each vocational track
- Student product highlights integrated into the homepage flow
- Blog section for news and updates
- Responsive layout optimised for mobile-first browsing
Homepage — hero, programs, student products, blog
Students make it. The platform sells it.
The Məhsullar və Xidmətlər (Products & Services) page is one of the most unique aspects of this project. Students produce real goods — honey, ceramics, jams, textiles, woodwork — which are sold directly through the website. This page doubles as both a showcase of student talent and a live e-commerce-style catalog.
- Category-based filtering: all products, honey, ceramics, jam, weaving, woodwork
- Product cards with pricing in AZN and "Sifariş et" (Order) CTA
- "100% Təbii" and "Ən Yaxşı" badge labels for featured items
- Stats bar: 8 products · 1 category · 500+ customers · 100% satisfaction
- Custom order CTA section at the bottom
55+ years of excellence, told with a timeline
The Tarixçəmiz (Our History) page transforms the institution's rich history into an engaging visual journey. A vertical timeline takes users from the founding in 1969 through each major milestone — becoming an independent school in 1972, reaching peak enrollment in 1992, rebranding as a modern center in 2019, and the ongoing development era today.
- Interactive vertical timeline with milestone cards from 1969 to present
- Stats banner: 1969 founding · 55+ years · 5000+ graduates · 20+ awards
- Photo archive slider with historical imagery
- Mission, Vision & Values section with icon-based layout
- About Us content with team photograph
A color system rooted in institutional trust
The design language balances authority with accessibility. A deep purple primary color carries the weight of an established institution, while a clean off-white background and generous whitespace keep the experience approachable and modern. Typography is functional and legible — designed for a broad audience including older parents and community members.
Designed it. Then built it.
This project was a full-cycle delivery — from initial wireframes and visual design in Figma through to a coded, live website. Working across both disciplines meant I could make design decisions that were always grounded in implementation reality, and build features that stayed true to the original vision.
- User research and information architecture — mapping content for students, parents, and community
- Full UX/UI design in Figma — wireframes, high-fidelity screens, responsive layouts
- Frontend development in HTML, CSS, and JavaScript
- Product catalog UI with category filtering and e-commerce-style cards
- Interactive timeline component for the history page
- Photo archive slider and gallery implementation
- Performance optimisation and cross-browser testing
See it live
The website is live and serving İsmayıllı's vocational education community.