//Design
UI / UX
Structure, hierarchy and prototypes before development.
Diego Pavanello · Front-end designer
Design and developmentfor your website.
I design interfaces and build websites with React, Next.js and WordPress for businesses, entrepreneurs and independent professionals. My work connects UI/UX design, content management and custom interactions.
Start a project About
I’m Diego Pavanello. I design and build interfaces.
SYS.CONFIG_01DESIGN + DEVELOPMENT
const craft = blend(design, engineering);const detail = measure(idea, pixel);I work on UI/UX design and front-end development, from page structure to implementation. I use Figma, React, Next.js and WordPress to connect the visual design with everyday content management.
Approach and inspiration
My approach starts with goals, audience and available materials. We define the scope together; I build the agreed elements and check the result in the browser and deployment environment.
Mountains inspire my visual language. On this site’s Italian homepage, that idea becomes a working example: an ACF-managed photograph turns into WebGL particles with local, gradual movement as the mouse passes over them.
Current co-pilots
ReactNext.jsGSAPThree.jsWebGLSCSSFigma
//Development
WEB
Responsive components connected to CMS content.
//Interaction
MOTION
Custom animation with static alternatives.
Selected work
05 / PROJECTSThe work, up close.
01
Elite Private Transfer
A multilingual private transfer website with an interactive 3D experience, WordPress-managed services and tours, and a guided quote enquiry.
02
Atlantic Partners
A custom WordPress corporate website connecting services, sectors and case studies through GSAP animation.
03
Presotto Ennio
A WordPress website for building systems, renewables, contract and luxury work, with a guided residential solar configurator.
04
MNTP Engineering
A WordPress engineering portfolio with category filters, dedicated project pages and animated typography.
05
La BiBi per Te
A WooCommerce shop for second-hand children’s items, with a catalogue, customer area and custom item and credit management features.
Services
What does your website need?
Start with design, development or work on an existing website. Each service has its own scope: the detail pages explain who it is for, the work involved, the approach and useful answers.
// SYSTEM_001
UI/UX design for websites and interfaces
I design website structures and interfaces in Figma. Before development, I organise content, user journeys and components to clarify what a person needs to see and do on each screen.
- Figma
- Design Systems
- Typography
- Prototyping
// SYSTEM_002
Front-end development with React and Next.js
I turn designs into web interfaces with React, Next.js and TypeScript. I connect pages, components and CMS content, taking the interface from desktop and mobile layouts through to deployment.
- React
- Next.js
- TypeScript
- SCSS
// SYSTEM_003
Custom WordPress websites and WooCommerce stores
I build custom WordPress websites and WooCommerce interfaces. I organise the administration fields so the pages and information included in the project can be updated without editing code.
- WordPress
- WooCommerce
- PHP
- Headless
// INTERACTIVE_004Signature
Creative development, animation and WebGL
I develop web animations and interactions with GSAP, Three.js and WebGL. The aim is to give an interface a distinctive behaviour while keeping content readable and providing an alternative when an effect is unavailable.
- Three.js
- WebGL
- GSAP
- Generative Web
Let’s make it clear.
From the first conversation to launch: useful things to know before getting started.
Have another question?01What does Diego Pavanello do?+
I design interfaces and build websites. My services cover UI/UX design, front-end development with React and Next.js, WordPress and WooCommerce, and interactions with GSAP, Three.js and WebGL.
02Which service does my website need?+
Start with UI/UX design if the structure and screens are not defined. Consider front-end development if you already have a design. WordPress manages content; WooCommerce adds selling features. Creative interactions should be selected around the content you want to highlight.
03Can I see how you work before making contact?+
Yes. The service pages describe the work and approach. The Projects page explains this website’s implementation: WordPress and ACF for content, Next.js for the front-end and a WebGL particle photograph on the Italian homepage.
04How do I request a proposal?+
Describe the website or work needed, the audience, pages and features. Mention available copy, images, brand materials or a Figma design, along with a budget and deadlines. The estimate depends on the agreed scope.
05Can we improve my existing website without starting over?+
Yes. We start by understanding what works and what gets in the way of your goals. Include the current website and the areas you want to improve: structure, interface, performance or content management. Reviewing it helps define a focused update or assess whether a rebuild makes sense.
06Do I need a Figma design or finished content?+
Not necessarily. You can start with an idea, an existing website or a finished design. Let me know which materials you have: brand assets, copy, photography and screens. Before development we agree on what is missing, who will prepare it and when it is needed.
07How much does a website cost and how long does it take?+
The scope depends on page types, features, available content and integrations. A presentation website and an online store involve different work. You can include an indicative budget and deadline in the form to help define a realistic scope; submitting it is not a booking or an automatic quotation.
08Will I be able to update the website in WordPress?+
For WordPress projects, we agree on the editable content: copy, images, projects and other information included in the scope. Administration fields are organised around the website. New layouts and features may still require development work.
09Do the animations work on mobile too?+
Interactions need to work with touch, without making essential information depend on hovering. Effects are adapted to screen size and motion preferences. If an effect is unsuitable or unavailable, content and links should remain usable.
10What happens after I send an enquiry?+
Your enquiry starts the conversation. We review goals, audience, materials and features, clarify questions and identify the work to assess. Scope, timing, costs and any ongoing support are agreed before work begins.
Contact
LET’S DISCUSSYOUR PROJECT.
Tell me what you want to build, who the website is for and which materials you already have. Include features, an indicative budget and deadlines if available: these help define the scope and proposal.