★ Ciao, sono Francesca★ Hi, I’m Francesca

UX/UI Designer & Front-End Developer

Progetto e sviluppo siti, portali e prodotti digitali chiari, accessibili e pronti per il codice, con oltre 7 anni di esperienza tra design e front-end.I design and build clear, accessible websites, portals and digital products, ready for code, with 7+ years of experience across design and front-end.

Guarda i progettiView workContattamiGet in touch

Progetti selezionatiSelected projects

Una selezione dei progetti a cui ho lavorato, tra UI/UX, sviluppo web e graphic design.A selection of projects I’ve worked on, across UI/UX, web development and graphic design.

Bando / MockupBid / Mockup

Brand per un eventoEvent branding

2019

Proposta grafica vincitrice di un bando pubblicoWinning visual proposal for a public tender

Scopri il progettoView project →
PortalePortal

Portale istituzionaleInstitutional portal

2022

UI/UX e front-end per un ente pubblicoUI/UX & front-end for a public body

Scopri il progettoView project →
UI/UX

Piattaforma gestionaleManagement platform

2023

Portale e gestionale interno, dai flussi all’interfacciaPortal & internal management tool, from flows to UI

Scopri il progettoView project →
PortalePortal

Portale di serviziServices portal

2021

Sito informativo e di servizi per la pubblica amministrazioneInformation & services website for the public sector

Scopri il progettoView project →
Design System

Design System

2024

Libreria componenti & style guide (Liferay)Component library & style guide

Scopri il progettoView project →
Graphic

Corporate & Social

2025

Brochure, infografiche & LinkedIn AdsBrochure, infographics & LinkedIn Ads

Scopri il progettoView project →
Bando / MockupBid / Mockup2019

Brand per un eventoEvent branding

Proposta grafica vincitrice di un bando pubblicoWinning visual proposal for a public tender

La sfidaThe challenge

Un’azienda doveva partecipare a un bando pubblico per un importante evento dedicato al digitale e le serviva una proposta grafica capace di distinguersi dagli altri concorrenti: un’identità visiva riconoscibile e un mockup del sito che rendesse concreta l’idea già in fase di gara.A company was taking part in a public tender for a major event dedicated to digital culture and needed a visual proposal that could stand out from the competition: a recognisable visual identity and a website mockup that made the idea tangible from the tender stage.

Cosa ho fattoWhat I did

Ho progettato l’identità visiva dell’evento e il mockup dell’interfaccia web, lavorando su layout, palette colori, tipografia e gerarchia dei contenuti. Con Adobe Photoshop e Illustrator ho realizzato tavole di presentazione chiare e coerenti, pensate per comunicare subito il concept alla commissione valutatrice.I designed the event’s visual identity and the web interface mockup, working on layout, colour palette, typography and content hierarchy. Using Adobe Photoshop and Illustrator, I produced clear, consistent presentation boards designed to get the concept across to the evaluation panel at a glance.

Il risultatoThe outcome

La proposta è risultata vincitrice e ha contribuito all’aggiudicazione del bando da parte dell’azienda. Un progetto che mi ha insegnato quanto un buon visual design possa pesare nelle decisioni, anche prima che una sola riga di codice venga scritta.The proposal won and helped the company secure the tender. A project that taught me how much good visual design can weigh in decisions, even before a single line of code is written.

PortalePortal2022

Portale istituzionaleInstitutional portal

UI/UX e front-end per un ente pubblicoUI/UX & front-end for a public body

La sfidaThe challenge

Un ente pubblico aveva bisogno di un portale istituzionale moderno, capace di organizzare una grande quantità di contenuti e renderli facili da trovare per cittadini e utenti con esigenze molto diverse, garantendo usabilità e accessibilità su tutti i dispositivi.A public body needed a modern institutional portal able to organise a large amount of content and make it easy to find for citizens and users with very different needs, while ensuring usability and accessibility on every device.

Cosa ho fattoWhat I did

Ho curato la progettazione UI/UX in Figma, dai wireframe ai prototipi interattivi, definendo l’architettura dell’informazione e i flussi di navigazione. Ho poi sviluppato il front-end su piattaforma Liferay: tema personalizzato, template FreeMarker, menu di navigazione, ricerca avanzata e gestione multilingua.I led the UI/UX design in Figma, from wireframes to interactive prototypes, defining the information architecture and navigation flows. I then built the front-end on the Liferay platform: custom theme, FreeMarker templates, navigation menus, advanced search and multilingual support.

Il risultatoThe outcome

Un portale responsive e coerente, in cui design e sviluppo parlano la stessa lingua. Seguire il progetto dall’interfaccia al codice ha permesso di ridurre i passaggi tra team e mantenere fedeltà al design fino al rilascio.A responsive, consistent portal where design and development speak the same language. Following the project from interface to code reduced hand-offs between teams and kept the build faithful to the design all the way to launch.

UI/UX2023

Piattaforma gestionaleManagement platform

Portale e gestionale interno, dai flussi all’interfacciaPortal & internal management tool, from flows to UI

La sfidaThe challenge

Un’organizzazione doveva digitalizzare processi interni complessi, fino ad allora gestiti in modo frammentato. Serviva un portale con area gestionale che rendesse semplici operazioni quotidiane ricche di dati, passaggi e ruoli utente diversi.An organisation needed to digitise complex internal processes that had until then been handled in a fragmented way. It needed a portal with a management area that made data-heavy daily tasks, with many steps and different user roles, simple.

Cosa ho fattoWhat I did

Sono partita dall’analisi dei flussi di lavoro per capire chi fa cosa e in quale ordine. Ho progettato user flow, wireframe e prototipi in Figma, validandoli con il team prima dello sviluppo, e ho definito un’interfaccia pulita per dashboard, tabelle, form e gestione di ruoli e permessi.I started by analysing the workflows to understand who does what and in which order. I designed user flows, wireframes and prototypes in Figma, validating them with the team before development, and defined a clean interface for dashboards, tables, forms and role and permission management.

Il risultatoThe outcome

Un gestionale più intuitivo, in cui le attività ricorrenti richiedono meno passaggi e gli utenti si orientano senza bisogno di lunghe spiegazioni. Il progetto ha confermato quanto la UX sia decisiva anche negli strumenti di lavoro interni, non solo nei siti pubblici.A more intuitive management tool, where recurring tasks take fewer steps and users find their way without lengthy explanations. The project confirmed how decisive UX is for internal work tools too, not just public websites.

PortalePortal2021

Portale di serviziServices portal

Sito informativo e di servizi per la pubblica amministrazioneInformation & services website for the public sector

La sfidaThe challenge

Un ente della pubblica amministrazione voleva un sito che fosse insieme informativo e di servizio: un unico punto di accesso dove i cittadini potessero trovare notizie, documenti e servizi online in modo chiaro, veloce e accessibile.A public administration body wanted a website that was both informative and service-oriented: a single access point where citizens could find news, documents and online services in a clear, fast and accessible way.

Cosa ho fattoWhat I did

Ho progettato l’interfaccia e la struttura dei contenuti con un approccio user-centered, organizzando le informazioni attorno ai bisogni reali degli utenti. Sul fronte tecnico ho sviluppato il tema Liferay, le strutture di contenuto, i template FreeMarker e le tassonomie per classificare e filtrare i contenuti.I designed the interface and content structure with a user-centred approach, organising information around users’ real needs. On the technical side, I developed the Liferay theme, content structures, FreeMarker templates and the taxonomies used to classify and filter content.

Il risultatoThe outcome

Un portale PA ordinato e responsive, facile da navigare per i cittadini e semplice da aggiornare per i redattori, grazie a contenuti strutturati e riutilizzabili.A tidy, responsive public-sector portal that is easy for citizens to navigate and simple for editors to update, thanks to structured, reusable content.

Design System2024

Design System

Libreria componenti & style guide (Liferay)Component library & style guide

La sfidaThe challenge

Con più portali Liferay attivi e più persone al lavoro, interfacce e componenti rischiavano di divergere, rallentando design e sviluppo. Serviva una base comune per garantire coerenza visiva e ridurre il lavoro duplicato.With several Liferay portals live and many people working on them, interfaces and components risked drifting apart, slowing down both design and development. A shared foundation was needed to ensure visual consistency and cut duplicated work.

Cosa ho fattoWhat I did

Ho creato e mantenuto un design system in Figma: libreria di componenti, stili tipografici, palette colori, spaziature e varianti, accompagnati da una style guide con le regole d’uso. Ho curato l’allineamento tra componenti di design e implementazione front-end sulla piattaforma Liferay.I created and maintained a design system in Figma: component library, type styles, colour palette, spacing and variants, together with a style guide setting out the usage rules. I kept design components aligned with their front-end implementation on the Liferay platform.

Il risultatoThe outcome

Un linguaggio visivo condiviso tra designer e sviluppatori, che rende i nuovi progetti più rapidi da avviare e più coerenti tra loro. Meno decisioni ripetute, più tempo da dedicare all’esperienza utente.A visual language shared by designers and developers that makes new projects faster to start and more consistent with each other. Fewer repeated decisions, more time for the user experience.

Graphic2025

Corporate & Social

Brochure, infografiche & LinkedIn AdsBrochure, infographics & LinkedIn Ads

La sfidaThe challenge

L’azienda voleva rafforzare la propria comunicazione e la presenza su LinkedIn con materiali coordinati, dall’offline al digitale, e contenuti capaci di raggiungere il giusto pubblico professionale.The company wanted to strengthen its communication and LinkedIn presence with coordinated materials, from print to digital, and content able to reach the right professional audience.

Cosa ho fattoWhat I did

Ho progettato materiali di comunicazione corporate come brochure, infografiche, presentazioni e gadget. Ho gestito la pagina LinkedIn aziendale occupandomi di piano editoriale, copywriting e grafiche, e ho curato campagne LinkedIn Ads, progettando le creatività in formato image e carousel.I designed corporate communication materials such as brochures, infographics, presentations and branded merchandise. I managed the company LinkedIn page, handling the editorial plan, copywriting and graphics, and ran LinkedIn Ads campaigns, designing image and carousel creatives.

Il risultatoThe outcome

Un’immagine aziendale più coerente su tutti i canali e una presenza social più curata e costante.A more consistent company image across every channel and a more polished, regular social media presence.

Cosa faccioWhat I do

Dall’idea al sito onlineFrom idea to live website

UX/UI design, sviluppo front-end e grafica: le aree in cui lavoro ogni giorno, seguendo i progetti dalla prima idea fino alla messa online.UX/UI design, front-end development and graphic design: the areas I work in every day, following projects from the first idea all the way to launch.

UX/UI Design

Interfacce intuitive che accompagnano l’utente verso il suo obiettivo. Wireframe e prototipi interattivi per verificare le idee prima di passare allo sviluppo.Intuitive interfaces that guide users towards their goal. Wireframes and interactive prototypes to test ideas before moving into development.

FigmaWireframePrototipiPrototypes

Sviluppo Front-EndFront-End Development

Siti web veloci, responsive e accessibili, con codice pulito e facile da mantenere. Interfacce in React e temi su misura per CMS come WordPress e Liferay.Fast, responsive and accessible websites, with clean, easy-to-maintain code. React interfaces and custom themes for CMSs like WordPress and Liferay.

ReactTypeScriptHTML / SCSSWordPressLiferay

Design System

Componenti, colori e regole raccolti in un’unica libreria: il prodotto resta coerente mentre cresce e il team lavora più veloce.Components, colors and rules gathered in one library: the product stays consistent as it grows and the team moves faster.

ComponentiComponentsStyle guideDocumentazioneDocumentation

Grafica e ComunicazioneGraphic Design & Brand

Brochure, infografiche, contenuti social e campagne LinkedIn Ads coerenti con l’identità del brand, online e in stampa.Brochures, infographics, social content and LinkedIn Ads campaigns consistent with the brand identity, online and in print.

StampaPrintSocialAds
Scopri il mio percorsoSee my journey →

UX/UI & Front-End

HTML / CSS / SCSSJavaScriptTypeScriptReactAccessibilità (WCAG)Accessibility (WCAG)Responsive designFigma Dev ModeWordPress / PHPLiferay / FreeMarkerBootstrapGitAI Tools

Grafica e ComunicazioneGraphic Design & Brand

FigmaIllustratorPhotoshopInDesignDesign SystemBrand & Print
Francesca Tronci
Chi sonoAbout

La designer che parla la lingua degli sviluppatoriA designer who speaks developer

Sono Francesca Tronci, UX/UI Designer e Front-End Developer con oltre 7 anni di esperienza. Ho iniziato scrivendo codice e poi sono passata al design: per questo progetto interfacce belle da vedere e realistiche da sviluppare, senza compromessi tra estetica e fattibilità.I’m Francesca Tronci, a UX/UI Designer and Front-End Developer with 7+ years of experience. I started out writing code and then moved into design: that’s why I create interfaces that are beautiful to look at and realistic to build, with no trade-off between looks and feasibility.

Ogni progetto parte dalle persone che lo useranno. Studio i flussi, disegno wireframe e prototipi interattivi in Figma e costruisco design system che mantengono il prodotto coerente mentre cresce. Curo l’accessibilità fin dal primo schizzo, perché un sito che tutti possono usare funziona meglio per tutti.Every project starts with the people who will use it. I map the flows, design wireframes and interactive prototypes in Figma and build design systems that keep the product consistent as it grows. I take care of accessibility from the very first sketch, because a site everyone can use works better for everyone.

Nel mio lavoro affianco i team di sviluppo su progetti per aziende ed enti pubblici, dall’idea alla messa online, e mi occupo anche di comunicazione visiva, dalla brochure alla campagna social. L’obiettivo è sempre lo stesso: meno passaggi di mano, meno sorprese e prodotti digitali che funzionano davvero.In my work I support development teams on projects for companies and public bodies, from idea to launch, and I also handle visual communication, from brochures to social campaigns. The goal is always the same: fewer hand-offs, fewer surprises and digital products that really work.

7+anni tra design e sviluppoyears across design and development
UX + Devun’unica figura, dall’idea al codiceone person, from idea to code
IT / ENprogetti seguiti in italiano e in ingleseprojects handled in Italian and English
LISconosco la Lingua dei Segni ItalianaI know Italian Sign Language (LIS)
CV

Il mio percorsoMy journey

Oltre 7 anni tra design e sviluppo, su progetti per aziende ed enti pubblici.7+ years across design and development, on projects for companies and public bodies.

EsperienzaExperience

2019 — ogginow
Web & UX/UI Designer
Extra Red Srl · Pontedera (PI)

UI/UX design in Figma, design system e sviluppo front-end di portali Liferay per clienti istituzionali e aziendali, oltre a grafica corporate e campagne LinkedIn Ads.UI/UX design in Figma, design systems and front-end development of Liferay portals for institutional and corporate clients, plus corporate graphics and LinkedIn Ads campaigns.

2018 — 2019
Sviluppatrice WebWeb Developer
Extra Cube Srl · Pontedera (PI)

Sviluppo front-end e amministrazione di portali enterprise Liferay: temi personalizzati, template FreeMarker e layout responsive con Bootstrap.Front-end development and administration of enterprise Liferay portals: custom themes, FreeMarker templates and responsive layouts with Bootstrap.

2018
Sviluppatrice WebWeb Developer
Mentarossa Comunicazione

Siti WordPress per clienti aziendali: temi e plugin su misura e landing page orientate alla conversione.WordPress websites for business clients: custom themes and plugins and conversion-focused landing pages.

2018
Sviluppatrice WebWeb Developer
IAMDEV S.T.P. · Pisa

Stage in sviluppo front-end: componenti HTML5, stili modulari in SCSS e template Twig.Front-end development internship: HTML5 components, modular SCSS styles and Twig templates.

FormazioneEducation

2017 — 2018
Tecnico Sviluppo Web — Communication DesignWeb Development — Communication Design
Istituto Modartech · Pontedera (PI)

Corso di specializzazione in communication design e sviluppo web: UI/UX, front-end, grafica e brand identity.Specialization course in communication design and web development: UI/UX, front-end, graphic design and brand identity.

2004 — 2011
Perito Ragioniere e Programmatore InformaticoAccounting & IT Programmer Diploma
ITC A. Pacinotti · Pisa

Basi di programmazione, database e processi aziendali.Foundations of programming, databases and business processes.