Instagram story viewer> @ejnalo> Posts

EjNalo

@ejnalo

28

followers

47

following

🪶 UI/UX • Web • Graphisme
Je suis aussi photographe: @ejnalo.pics

POSTS STORIES REELS TAGGED

Download All

11

0

22 days ago

Les DINGUERIES que les développeurs ont normalisées
Vous n'êtes pas prêts !

1. Celui qui n’indente pas son code
Envoie un selfie quand tu vas coder en Python pour la première fois stp

2. Celui qui pousse un commit risqué un vendredi aprem
Ça c'est de la malveillance, il faut se méfier des gens comme ça. Vraiment. Fuyez.

3. Celui qui code 100% à l'IA
On les voit vos failles de sécurité, vos UX fragiles et votre UI horrible

4. Celui qui développe sous Windows
Pourquoi s'infliger ça ?

5. Celui qui a développé Windows
Pourquoi nous infliger ça ?

6. Celui qui nomme ses commits « . »
Pour avoir testé, je ne recommande pas du tout: aucune traçabilité, collaboration impossible, bref l'enfer.

Abonnez-vous à @ejnalo pour plus de contenu !
#dev #github #vscode #conventions #collaboration by @ejnalo

15

0

2 months ago

Les balises sémantiques sont apparues dans les versions récentes de HTML, dans le but de rendre votre code lisible auprès du développeur ou de l’algorithme qui passera derrière vous. En fournissant un nom explicite à l’élément, elle permet d’être clair quant à son rôle dans la structure de la page.

Les balises HTML de base sont <div> et <span>. Grâce aux balises sémantiques, la structure de votre document est beaucoup plus explicite.

Quand ils lisent une page, les navigateurs y injectent un style CSS prédéfini pour chaque balise sémantique: Si vous placez une balise <b>, le texte apparaîtra en gras sans que vous ayez besoin de définir une classe ".bold" (ou peu importe le nom que vous choisissez)

Elles sont aussi utiles pour le référencement: Les balises <h1> sont souvent utilisées par les moteurs de recherche pour déterminer le titre de votre page quand les données meta sont absentes. De plus, les utiliser rend votre page conforme au cahier des charges imposé par ces derniers.

La dernière utilité que je vais mentionner dans ce post: l’accessibilité. Les dispositifs (VoiceOver, claviers braille, etc.) s’aident de ces balises pour se repérer dans la page, pour différencier un bouton d’un champ de texte, différencier un article d’un haut de page, etc.

Attention: Tu ne dois pas t’interdire les <div> et les <span> ! Utilisés avec habileté, ils restent très utiles pour t’aider à développer et peuvent rester lisibles. Utilise-les juste en dernier recours

TL;DR
Les balises sémantiques servent à:
- Rendre ton code lisible,
- T’épargner du CSS inutile,
- Améliorer le référencement,
- Rendre ta page plus accessible,
- D’autres avantages techniques

Abonne-toi à @ejnalo et @mmi.place si tu ne veux plus rien rater sur le Développement Web et sur le BUT MMI !

#html #tuto #mmi #dev #accessibilite
(Merci à @babine_55 pour l'idée) by @ejnalo

16

6

2 months ago

5 sites qui t'aideront DE OUF au quotidien !

En tant que designer, y’a plein de side quests chiantes que tu n’as pas envie de faire toi-même.
Laisse-moi donc te montrer ces cinq sites qui changeront drastiquement ta manière de bosser et te permettront de booster ta productivité.

1. ray.so
Ce site te permet de transformer tes scripts en images esthétiques. Tu peux même choisir le thème que tu veux (Tailwind CSS, Vercel, Github...) et customiser plusieurs paramètres.

2. heroicons.dev (et son grand frère feathericons.dev)
Ce site répertorie les icônes du site original heroicons. Il te génère leur code et t’as juste à copier-coller. Idem si tu bosses en Vue ou en React. T'auras même les imports qui vont avec !

3. colorhexa.com
Le seul endroit où tu trouveras une couleur, sa complémentaire, la cousine germaine de la complémentaire. Ce site t’offre une carte d’identité précise ET un catalogue bien garni de couleurs relatives et voisines à une couleur donnée.

4. coolors.co
Le site idéal si t’es en manque d’inspi pour ta palette. Tu peux générer ta propre palette, ou en piquer une parmi les 10 millions de palettes déjà générées.

5. tailwindcss.com
Je parlerai du goat Tailwind un jour. Dans la documentation on retrouve plus de douze couleurs définies, avec des teintes de sombre à clair. Pratique quand tu ne sais pas quel rouge utiliser !

Hésite pas à t'abonner si tu veux plus de publications en rapport avec le design UI/UX et le BUT MMI !
#uiux #tailwind #butmmi #mmivelizy #tuto by @ejnalo

18

0

3 months ago

Ça fait maintenant plusieurs semaines que je me mets à suivre des comptes spécialisés en design UI/UX pour améliorer mon niveau. Ce faisant je pensais rentabiliser un minimum le temps que je passe sur mon tel. Au lieu de ça, j’ai juste dressé un constat plus qu’alarmant:

Sur la totalité des comptes que j’ai suivis (près d'une vingtaine), près de la moitié s’intéressait plus au sujet de l’IA qu’au design lui-même. Pire encore, les carrousels étaient eux-mêmes générés par IA... et c’était flagrant: aucune hiérarchie, mots très mal orthographiés, aucune âme... pour ne citer que les éléments les plus dérangeants.

On a à gagner avec l’IA: lui donner la responsabilité de notre interface c’est épargner des heures à tout concevoir et modéliser... Mais on a aussi à perdre. Le robot derrière n’a pas de personnalité: on se retrouve avec un design froid, sans but précis, même sans identité.

Demain, peut-être que je prompterai moi aussi. Mais l’émotion - quasi nulle - qui se dégagera de mon produit est déjà présente dans tous les autres à l’heure actuelle. En voulant gagner du temps sur un marché qui va de plus en plus vite, on en perd le seul élément qui nous distingue des autres.

C’est ballot je trouve. Et toi, t'en penses quoi ? by @ejnalo

11

0

3 months ago

8

0

3 months ago

15

0

3 months ago

🗓️ 2026 | Robots en typo

Dans le cadre d'un TP réalisé en BUT MMI, il nous était demandé de réaliser trois robots avec des caractères. L'idée était de les assembler sans modifier leur formes, et sans créer de figure autre que ces lettres, en utilisant leurs empattements pour les associer. Viennent ensuite plusieurs trames pour colorer l'ensemble, avec des motifs plus ou moins denses pour simuler une variation de luminosité. by @ejnalo

4

0

3 months ago

🗓️ 2025 | Premiers visuels de Beam

Faut savoir qu'en 2025 je rêvais de plus en plus de voir Beam venir au monde, et ce rêve avait déjà deux ans à l'époque. Je me suis donc directement lancé dans les maquettes, sur mobile à l'époque histoire de commencer à lui donner vie. Ces maquettes n'ont rien à voir avec ce que Beam est en train de devenir, mais elles ont très fortement influencé le projet à ses débuts. Ça vous plaît ? by @ejnalo

8

2

3 months ago

🗓️ 2024 | Remake de Whatsapp

Les images parlent pour elles-mêmes. by @ejnalo

8

0

3 months ago

🗓️ 2024 | Emploi du temps scolaire avec un design futuriste

Yamaha MT-07 en fond, image provenant du site officiel (yamaha-motors.eu)

⚠️ Les données affichées ici sont tronquées et ne correspondent pas à l'emploi du temps original. by @ejnalo

6

0

3 months ago

🗓️ 2023-2024 | Designs par-ci par-là

Depuis que je connais Figma j'ai eu l'occasion de réaliser plusieurs concepts visuels, des logos aux interfaces en passant par des posts destinés aux réseaux sociaux. Voici 5 aperçus des réalisations que j'ai faites lors de mes débuts sur le logiciel.

1. Écran d'accueil de Pearl OS. Ce design est censé proposer une vision différente des systèmes d'exploitation actuels. Je posterai sûrement une publication plus détaillée à l'avenir.

2. Remake de WhatsApp.

3. Remake de Discord.

4. Conception d'une interface pour Scratch sur mobile, avec une vision qui se rapproche plus de son aspect social.

5. La toute première version de ce qu'était censé être Beam, un projet personnel toujours en développement.

Dites-moi quel est votre favori ! by @ejnalo

5

3

3 months ago