Website
Thekra is a mural artist who uses vibrant visuals to tell stories and reimagine urban spaces. Together with Thekra and the team at silly.berlin, I built a responsive, animated, and easy-to-maintain portfolio site that reflects her bold, participatory artistic voice.
Product | Website, mobile-first |
Role | UI/UX designer, developer |
Skills | Design auditing & responsiveness, Spacing and typography systems, WordPress development (mobile-first), Lottie & scroll-triggered animation setup, Client documentation & handoff |
Team | Anna Skopp, Thekra Jaziri, silly.berlin |
Client | Thekra Jaziri |
All artworks shown are courtesy of the artist. |
Frankfurt Galluswarte subway station
1
Analyze client needs, evaluate the provided layout & sitemap, define clear project goals.
2
Review the existing design and extend it to tablet and mobile. Offer UX recommendations and apply typographic and spacing systems.
3
Build the site in WordPress from scratch. Bring it to life with subtle animations. Refine based on ongoing feedback.
4
Test across devices, ensure accessibility and responsiveness, and deliver a clear CMS usage guide for future updates.
Thekra at one of her workshops
Commissioned work
The initial PDF layout was designed for desktop only, with no mobile behavior or design logic defined. To adapt and extend it, I conducted a design audit and proposed:
UX improvements in structure and interaction
A Spacing rhythm using a 4px grid for consistency and clarity
A mobile-first approach optimized for all breakpoints
Design is not just what it looks like and feels like. Design is how it works. — Steve Jobs
To ensure visual consistency and scalability, I applied a system-based approach across all breakpoints:
Typography and spacing systems based on design logic, optimized for readability across breakpoints
Section-based structure with reusable components
Modular WordPress theme with block-based logic
#fcbe03 — Sunny Yellow
#eedbce — Almond
#fff4eb — Spring Wood
#3b00cc — Expressive Blue
#f8ff1d — Fluorescent Yellow
#8823ff — Mesmerizing Purple
#FFFFFF — White
#000000 — Black
Playful but minimal animations that support the artistic tone :
Interactive Lottie animations created from SVGs enhanced user participation and site personality
Smooth scroll behavior and interactive hover states
Page transitions that mimic preparing a blank canvas
Beauty and brains, pleasure and usability should go hand in hand. — Donald Norman
Clear, written CMS guide so the client feels confident updating and growing the site
© Anna Luise Skopp, 2024
Text, images, code made with 💕and ☕
Text, images, code made with 💕and ☕
© Anna Luise Skopp, 2024