Stefan Petit

Stefan Petit

Web designer · Suisse romande

PortfolioWeb designer

Stefan Petit

Je crée des sites web sur mesure. Je m'occupe du design, du code et de la mise en ligne.

  • Design · Développement · Mise en ligne
  • Suisse romande · travail à distance
  • Sites vitrines et sites d'entreprise

01 Manifeste

Un site doit être clair, rapide et agréable à utiliser. Je commence par la structure et les contenus, je dessine ensuite chaque page, puis je développe le tout en HTML, CSS et JavaScript. Ce que vous validez en maquette est exactement ce qui est mis en ligne.

02 Profil

Stefan Petit, en avatar 3D, un ordinateur portable dans les mains
Stefan Petit — web designer

Le design et le code,
par la même personne.

Je suis web designer en Suisse romande. Je crée des sites pour des indépendants, des marques et des PME : je définis la structure, je dessine les pages, puis je les développe et je les mets en ligne.

Je travaille surtout sur des sites vitrines et des sites d'entreprise. Chaque projet est réalisé sur mesure : pas de thème acheté, pas de gabarit. Le design est adapté à l'activité, aux contenus et au public visé.

Je gère aussi la partie technique : hébergement, nom de domaine, adresses e-mail, vitesse de chargement et bases du référencement. C'est ce qui me permet de suivre un projet de la première idée jusqu'au site en ligne.

D'où ça vient : mon parcours →

Basé en
Suisse
Je travaille
À distance, Suisse & France
Je livre
Design, développement, mise en ligne
Disponibilité
Ouvert aux projets

03 Compétences

Mes outils.
Cliquez sur une carte pour l'ouvrir.

Savoir-faire

04 Approche

Comment je travaille.
Quatre étapes.

01

Écoute & cadrage

Je commence par comprendre l'activité, le public visé et ce que le site doit permettre de faire. J'établis l'arborescence et je fais l'inventaire des contenus existants. Aucun design avant cette étape.

Livrables : périmètre écrit, arborescence, planning
02

Direction artistique

Deux pistes visuelles au maximum, chacune argumentée : typographie, couleurs, traitement des images, principe d'animation. Le style se fixe à cette étape, pour ne plus être remis en question ensuite.

Livrables : planche d'ambiance, page de référence
03

Design & prototype

Je réalise les maquettes de toutes les pages, en version ordinateur et mobile. Un prototype cliquable permet de tester la navigation avant de commencer le développement.

Livrables : maquettes complètes, prototype
04

Intégration & mise en ligne

Je développe le site, j'optimise le poids et la vitesse, je teste sur de vrais appareils, puis je mets en ligne : hébergement, domaine et adresses e-mail compris.

Livrables : site en ligne, suivi, documentation
05

Ensuite

Un site n'est pas figé. Je reste disponible pour les corrections, les ajouts de pages et les évolutions, et je documente ce qu'il faut savoir pour le faire évoluer sans moi.

Livrables : documentation, sauvegardes

05 Réalisations

Du design
à la mise en ligne.

Toutes les réalisations →

06 Exigences

Ce que je vérifie
avant de mettre en ligne.

01

Performance

Une page doit s'afficher vite, y compris sur un téléphone en réseau moyen.

  • Images converties en WebP, compressées et chargées seulement à l'approche de l'écran
  • Aucune bibliothèque externe quand je peux m'en passer
  • Poids de page mesuré avant livraison
  • Animations calculées par la carte graphique, jamais par la mise en page
Mesuré, pas supposé
02

Accessibilité

Un site doit rester utilisable par tout le monde, y compris sans souris.

  • Contrastes contrôlés sur chaque niveau de texte
  • Navigation complète au clavier, focus toujours visible
  • Hiérarchie de titres cohérente pour les lecteurs d'écran
  • Réglage « mouvement réduit » du système respecté
Testé au clavier et au lecteur d'écran
03

Code

Un site que quelqu'un d'autre peut reprendre six mois plus tard.

  • HTML sémantique, classes nommées clairement
  • CSS organisé et commenté, variables pour les couleurs et les rythmes
  • JavaScript sans dépendance, qui se dégrade proprement
  • Le contenu reste lisible même si le JavaScript ne se charge pas
Relu comme si je devais y revenir
04

Référencement

Être trouvé compte autant qu'être bien fait.

  • Titre et description rédigés page par page
  • Adresses lisibles et structure logique
  • Images décrites, pour les moteurs comme pour les lecteurs d'écran
  • Vitesse et rendu mobile, qui pèsent dans le classement
Les bases, faites correctement

07 Contact

Me joindre.

Une question sur l'un de ces projets, une collaboration, ou simplement l'envie d'échanger.

petit.stefan95@gmail.com