{"id":157,"date":"2024-01-24T11:11:49","date_gmt":"2024-01-24T10:11:49","guid":{"rendered":"https:\/\/ahmedkabbej.fr\/?page_id=157"},"modified":"2025-07-30T13:22:24","modified_gmt":"2025-07-30T11:22:24","slug":"ux-ui-and-web-dev-2","status":"publish","type":"page","link":"https:\/\/ahmedkabbej.fr\/?page_id=157","title":{"rendered":"Ux\/UI And Web Dev"},"content":{"rendered":"\n

Timeline Gobelins <\/strong>(visual studio code html css php JavaScript, Figma)<\/a><\/p>\n\n\n\n

\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

Design Sprint (Figma , post it drawing , brainstorming)<\/a><\/p>\n\n\n\n

\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

VintageLibrary<\/strong> (2D\/3D with GSAP & CSS Perspective)<\/a><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Sakura interactive scrollytelling (TypeScript) – Desktop only<\/a><\/p>\n\n\n\n

\"\"
Screenshot<\/figcaption><\/figure>\n\n\n\n

Visual Wonder <\/strong>(visual studio code html css php JavaScript)<\/p>\n\n\n\n

\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n

J’ai recr\u00e9\u00e9 la page d’accueil d’un site web avec une pr\u00e9cision absolue, en m’appuyant uniquement sur une image de r\u00e9f\u00e9rence. En utilisant VS Code, j’ai converti chaque \u00e9l\u00e9ment visuel en code HTML et CSS, garantissant ainsi une reproduction fid\u00e8le de la mise en page souhait\u00e9e. Cette exp\u00e9rience m’a \u00e9galement initi\u00e9 au responsive design, me permettant d’adapter le site \u00e0 diff\u00e9rents \u00e9crans. Une exp\u00e9rience formatrice qui a enrichi mes comp\u00e9tences en d\u00e9veloppement web et soulign\u00e9 l’importance de l’adaptabilit\u00e9 pour une exp\u00e9rience utilisateur optimale.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

Creation Application Panda Suite<\/strong> (Theme LA LA LAND)<\/p>\n\n\n\n

\n
\n
\"\"<\/a><\/figure><\/div>\n\n\n

Application<\/a><\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/a><\/figure>\n\n\n\n

Presentation<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n

hype tumult <\/strong>(motion design)<\/p>\n\n\n\n

\n
\n
\"\"<\/figure><\/div><\/div>\n\n\n\n
\n

En utilisant exclusivement l’outil plume dans Illustrator, j’ai entrepris de recr\u00e9er de mani\u00e8re d\u00e9taill\u00e9e une montre. \u00c0 travers une s\u00e9rie de courbes, de points d’ancrage et de manipulations pr\u00e9cises, j’ai soigneusement dessin\u00e9 chaque composant de la montre, des aiguilles au bo\u00eetier en passant par le cadran.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Amincika<\/strong> (Projet digital refonte graphique)<\/p>\n\n\n

\n
\"Amincika<\/a><\/figure><\/div>\n\n\n

J’ai r\u00e9cemment retravaill\u00e9 les flyers du cabinet de biochimie alimentaire Amincika, en leur donnant un nouvel \u00e9lan visuel et informatif. En plus de cela, j’ai \u00e9galement r\u00e9alis\u00e9 une vid\u00e9o de pr\u00e9sentation captivante pour mettre en valeur les services et les valeurs du cabinet.<\/p>\n\n\n\n

Fichiers (Appuyez sur le fichier souhait\u00e9.)<\/p>\n\n\n

\n
\"\"<\/a><\/figure><\/div>\n\n\n
\n
\n
\"\"<\/a><\/figure><\/div><\/div>\n\n\n\n
\n
\"\"<\/a><\/figure><\/div><\/div>\n<\/div>\n\n\n\n

Video Pr\u00e9sentation (Appuyez sur l’image)<\/p>\n\n\n

\n
\"\"<\/a><\/figure><\/div>\n\n\n

Dress x<\/strong> (projet digital, refonte graphique de la typo de l\u2019entreprise et la campagne publicitaire et boutique \u00e9ph\u00e9m\u00e8re)<\/p>\n\n\n\n

\"OUR<\/a><\/figure>\n\n\n\n

J’ai dirig\u00e9 le projet digital du site web futuriste Dress X, ax\u00e9 sur une refonte graphique compl\u00e8te et une r\u00e9vision de la typographie de l’entreprise. En parall\u00e8le, j’ai con\u00e7u et lanc\u00e9 une campagne publicitaire percutante, accompagn\u00e9e d’un \u00e9v\u00e9nement de boutique \u00e9ph\u00e9m\u00e8re pour renforcer la pr\u00e9sence de la marque dans l’univers num\u00e9rique et physique.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

TikTok (Appuyez sur la bande cinema souhait\u00e9)<\/p>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
boutique \u00e9ph\u00e9m\u00e8re<\/a>T\u00e9l\u00e9charger<\/a><\/div>\n\n\n\n

Pochette album<\/strong> (In Design\/Photoshop\/Illustrator)<\/p>\n\n\n\n

\"Patrick<\/a><\/figure>\n\n\n\n

Photoshop colorimetrie <\/strong>(Retouche photoshop)<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Photographie<\/strong> <\/p>\n\n\n\n

Lors d’un atelier de photographie, j’ai eu l’occasion de r\u00e9aliser plusieurs exercices de portraits d’objets et de prises de vue en perspective en utilisant un Panasonic GH5 II.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Fab lab story d\u00e9coupe laser<\/strong> (cr\u00e9ation artistique publicitaire et graphique)<\/p>\n\n\n

\n
\"miro-logo-flaticon<\/a><\/figure><\/div>\n\n\n

<\/p>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>
\n


FAB-LAB<\/a>T\u00e9l\u00e9charger<\/a><\/div>
<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n
\n

J’ai imagin\u00e9 une histoire passionnante et l’ai traduite visuellement \u00e0 travers un storyboard d\u00e9taill\u00e9. Par la suite, j’ai eu l’opportunit\u00e9 d’imprimer cette cr\u00e9ation sur papier puis de la d\u00e9couper avec la decoupe laser dans le laboratoire de l’\u00e9cole, concr\u00e9tisant ainsi mon travail cr\u00e9atif dans un format tangible et innovant.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Processing<\/strong> (Javascript debut)<\/p>\n\n\n

\n
\"Fichier:Processing<\/figure><\/div>\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Navis<\/strong> (competence plume illustrator)<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Timeline Gobelins (visual studio code html css php JavaScript, Figma) Design Sprint (Figma , post it drawing , brainstorming) VintageLibrary (2D\/3D with GSAP & CSS Perspective) Sakura interactive scrollytelling (TypeScript) – Desktop only Visual Wonder (visual studio code html css php JavaScript) J’ai recr\u00e9\u00e9 la page d’accueil d’un site web avec une pr\u00e9cision absolue, en… Poursuivre la lecture Ux\/UI And Web Dev<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-157","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/ahmedkabbej.fr\/index.php?rest_route=\/wp\/v2\/pages\/157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahmedkabbej.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ahmedkabbej.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ahmedkabbej.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ahmedkabbej.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=157"}],"version-history":[{"count":63,"href":"https:\/\/ahmedkabbej.fr\/index.php?rest_route=\/wp\/v2\/pages\/157\/revisions"}],"predecessor-version":[{"id":477,"href":"https:\/\/ahmedkabbej.fr\/index.php?rest_route=\/wp\/v2\/pages\/157\/revisions\/477"}],"wp:attachment":[{"href":"https:\/\/ahmedkabbej.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}