mirror of
https://old.git.ood.ovh/flambyte/RUX.git
synced 2025-04-28 22:37:51 +02:00
621 lines
No EOL
39 KiB
HTML
621 lines
No EOL
39 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:creator" content="@pinavetrano">
|
||
<meta name="twitter:site" content="pina-vetrano.be">
|
||
<meta name="twitter:title" content="PVetrano — RUX">
|
||
<meta name="twitter:description" content="L'atelier rethinking user experience — à HEAJ de Pina Vetrano">
|
||
<meta name="twitter:image" content="http://www.pinavetrano.be/projets/rethinking-ux/assets/images/logo.png">
|
||
|
||
<meta property="og:site_name" content="RUX — rethinking user experience ">
|
||
<meta property="og:title" content="vetrano-pina — RUX">
|
||
<meta property="og:description" content="L'atelier rethinking user experience — à HEAJ de Pina Vetrano">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://pinavetrano.be/">
|
||
<meta property="og:image" content="assets/images/logo_dark.svg">
|
||
<meta property="og:image:width" content="1800">
|
||
<meta property="og:image:height" content="945">
|
||
<link rel="icon" type="image/x-icon" href="assets/images/logodark.svg">
|
||
<title>RUX Pina Vetrano — DWT — Heaj</title>
|
||
<!-- CSS and Javascript -->
|
||
<link rel="stylesheet" href="assets/css/normalize.css">
|
||
<link rel="stylesheet" href="assets/css/style.css">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@600&display=swap" rel="stylesheet">
|
||
<script src="assets/js/app.js" defer></script>
|
||
</head>
|
||
|
||
<body data-theme="light">
|
||
<header>
|
||
|
||
<button class="js-theme-trigger">
|
||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
|
||
<path
|
||
d="M13 9h9l-14 15 3-9h-9l14-15-3 9zm-8.699 5h8.086l-1.987 5.963 9.299-9.963h-8.086l1.987-5.963-9.299 9.963z" />
|
||
</svg></button>
|
||
|
||
<div class="header--second">
|
||
|
||
|
||
<div class="btn__lightdark--blockd">
|
||
|
||
</div>
|
||
<div class="header__navigation">
|
||
|
||
<nav>
|
||
|
||
<ul class="list--header">
|
||
<li>
|
||
<a class="link" href="#partie0">0</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="link" href="#partie1">1</a>
|
||
</li>
|
||
<li>
|
||
<a class="link" href="#partie2">2</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="link" href="#partie3">3</a>
|
||
</li>
|
||
<li>
|
||
<a class="link" href="#partie4">4</a>
|
||
</li>
|
||
<li>
|
||
<a class="link" href="#partie5">5</a>
|
||
</li>
|
||
<li>
|
||
<a class="link" href="#partie6">6</a>
|
||
</li>
|
||
<li>
|
||
<a class="link" href="#partie7">7</a>
|
||
</li>
|
||
<li>
|
||
<a class="link" href="#partie8">8</a>
|
||
</li>
|
||
<li>
|
||
<a class="link" href="#partie9">9</a>
|
||
</li>
|
||
</ul>
|
||
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</header>
|
||
|
||
<div class="headback">
|
||
<div class="fond">
|
||
<img class="headtitle" src="assets/images/headlogo.png"
|
||
alt="illustration portant les initiales de l'atelier Rethinking User Experience. RUX">
|
||
</div>
|
||
</div>
|
||
<section class="grid grid--content" id="partie0">
|
||
<div class="strip strip--1"></div>
|
||
<h1 class="title mgrid-start01 mgrid-end08 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||
class="number-nav">0 </span>Synopsis
|
||
</h1>
|
||
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05 partie1_blackfill">
|
||
L’atelier RUX (rethinking UX)
|
||
est de
|
||
réaliser une interface adaptée et
|
||
compréhensible pour
|
||
l’utilisateur, pour une
|
||
navigation facile et rapide”</p>
|
||
<div class="strip strip--2"></div>
|
||
<p class="mgrid-start02 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end05 partie1_blackfill">Le
|
||
directeur de la Haute école
|
||
Albert Jacquard nous à
|
||
donner une mission ! </p>
|
||
<div class="strip strip--3"></div>
|
||
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05 partie1_blackfill">
|
||
Repenser notre cours de récré
|
||
</p>
|
||
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end05 partie1_blackfill">Notre
|
||
budget est limité à
|
||
200k€
|
||
+- </p>
|
||
<div class="strip strip--cash"></div>
|
||
<figure class="img__content tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end03">
|
||
<img class="image_undertxt image_undertxt--iv" src="assets/images/plancour.png"
|
||
srcset="assets/images/plancour@2x.png 2x"
|
||
alt="plan de la cour de la Haute École Albert Jacquard schématisé" loading="lazy" decoding="async">
|
||
<figcaption class="figcaption">schéma illustré de la cour</figcaption>
|
||
</figure>
|
||
<figure class="img__content tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end05">
|
||
<img class="image_undertxt" src="assets/images/cour.png" srcset="assets/images/cour@2x.png 2x"
|
||
alt="plan de la cour de la Haute École Albert Jacquard, plan large" loading="lazy" decoding="async">
|
||
<figcaption class="figcaption">Photo prise de la cour "plan large"</figcaption>
|
||
</figure>
|
||
</section>
|
||
<section class="grid" id="partie1">
|
||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||
class="number-nav">1 </span>Création
|
||
de l'Équipe</h2>
|
||
<div class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end05">
|
||
<ul class="discu__liste">
|
||
<li class="discu__el discu__el--pink"> On choisit quel nom pour la Team ? (Célia)</li>
|
||
<li class="discu__el discu__el--green">— Les Rases moquettes en référence au fait qu’on va réajuster la
|
||
cour
|
||
! (Pina)</li>
|
||
<li class="discu__el discu__el--blue">— Hahahahaha, allez ! (Amandine, Célia, Jessy, Justin et Pina)
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
<section class="grid section__color section__color--pink" id="partie2">
|
||
<h2 class="title mgrid-start01 mgrid-end07 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||
class="number-nav">2 </span>Prémices
|
||
</h2>
|
||
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05">Et c’est à ce moment
|
||
précis que l’on a mis la
|
||
première vitesse.</p>
|
||
<p class=" tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end05">Notre
|
||
tout nouvel atelier consistait à
|
||
repenser l’usage de la cour en proposant des moyens d’agencement. Pour réaliser cela, on a eu recours à
|
||
notre stratégie d’apprentissage ! </p>
|
||
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end07 content__objet">
|
||
La fusion d'un travail collaboratif, des travaux de recherches qui nous
|
||
permettent d’aller découvrir le monde
|
||
extérieur et nos utilisateurs et le travail pratique, ainsi que la partie
|
||
individuelle pour mettre en œuvre notre
|
||
site web, qui représente le fruit de notre travail. On réalisera alors notre étude de cas ! Notre
|
||
Case-study pour
|
||
faire plus élégant.
|
||
</p>
|
||
</section>
|
||
<section class="grid section__color section__color--green" id="partie3">
|
||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||
class="number-nav">3 </span>Prémices
|
||
bis</h2>
|
||
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05">La première étape à été
|
||
d'observer la
|
||
cour afin d'avoir un visuel plus
|
||
globale sur la cour.</p>
|
||
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05"> Une fois terminé, la
|
||
classe qui était bavarde se
|
||
retrouve tout de suite dans un silence le plus total.
|
||
J'écrivais beaucoup de questions que je pourrais poser au directeur. Seulement les questions n’ont pas
|
||
été posées dans un ordre précis.</p>
|
||
<p class="mgrid-start02 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05">Le directeur, celui qui
|
||
était censé répondre à
|
||
nos questions, a
|
||
commencé à expliquer la situation. En faisant cela, il a transformé nos questions en réponses.</p>
|
||
<p class="mgrid-start02 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05">Voici les questions:
|
||
</p>
|
||
<a class="mgrid-start02 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05"
|
||
href="https://miro.com/app/board/uXjVPsdXjzw=/?share_link_id=851619025509" target="_blank"
|
||
title="Sur Miro">Aller sur Miro</a>
|
||
<p class="mgrid-start01 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05">
|
||
Il nous a expliqué son point de vue, sa vision des choses. Il
|
||
avait en tête de créer un axe qui nous permettrait de nous diriger plus facilement vers le Bâtiment
|
||
A, B et C. En gardant bien en tête que bien souvent, manque de place oblige sur les parkings, les
|
||
gens se
|
||
parquent à coté du préau. </p>
|
||
<p class="mgrid-start01 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05">
|
||
Il imagine cela comme un Forum ( une zone de discussion). Où il y aurait la possibilité de manger, des
|
||
lieux d’exposition, déco des murs, activités, zone de
|
||
lecture. Distribution des diplômes. Lieu de concert. Boîte à livres. </p>
|
||
</section>
|
||
<section class="grid" id="partie4">
|
||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||
class="number-nav">4 </span>Guide
|
||
d'entretien</h2>
|
||
<p class="mgrid-start01 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05">Alors pour cette étape,
|
||
je suis partie du
|
||
principe que je ne sais pas
|
||
ce qu'il faut pour résoudre ce besoin. Même si nos futurs utilisateurs sont des élèves comme moi et mes
|
||
camarades, il est important de comprendre les utilisateurs, leurs
|
||
raisonnements comment ils utilisent la cour, leur temps libre.</p>
|
||
<p class="mgrid-start01 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05"> Et pour cela, on
|
||
prépare un guide d'entretien</p>
|
||
<details class="section__color--slot tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05" open="">
|
||
<summary class="title__slot">Voici le guide d'entretiens en entier:</summary>
|
||
<ul class="guide__liste">
|
||
<li class="title--medium guide__el">Introduction :</li>
|
||
<li>Bonjour, nous sommes étudiants en deuxième année de l’option Web.
|
||
Bienvenue et merci de bien vouloir participer à notre interview.
|
||
Je vais te poser des questions sur ta vie en tant qu’étudiant. Toutes tes réponses seront
|
||
correctes. Cette interview sera enregistrée, retranscrite et ne durera que 5min. Ta
|
||
participation peut être anonyme. Nous n’utiliserons ces données que dans le cadre scolaire.
|
||
</li>
|
||
|
||
<li class="title--medium guide__el">Echauffement :</li>
|
||
|
||
<li>Peux-tu te présenter ? </li>
|
||
<li>Quels sont tes passe-temps ? </li>
|
||
<li>Kotes-tu sur Namur ? Sinon d'où viens-tu ? Comment viens-tu à l’école ?</li>
|
||
<li>Quels sont les indispensables d’un étudiant ? En dehors du cadre de l’école ou non ?</li>
|
||
<li>Que penses-tu de l’HEAJ et de ses environnements ?</li>
|
||
|
||
<li class="title--medium guide__el">Questions générales :</li>
|
||
|
||
<li>Si tu pouvais importer un élément de ton ancienne école dans l’HEAJ lequel serait-il ? </li>
|
||
<li>Dans quels endroits de l’école te sens-tu le moins à l’aise ?
|
||
</li>
|
||
<li>Dans quels endroits de l’école te sens-tu le moins à l’aise ? </li>
|
||
<li>Dans quels endroits extérieur te sens-tu le mieux ? Pourquoi ? </li>
|
||
|
||
<li class="title--medium guide__el">Approfondissement :</li>
|
||
|
||
<li>Si tu devais améliorer une partie de l’école, laquelle serait-il ? Pourquoi ? Comment ?
|
||
</li>
|
||
<li>Si tu avais une baguette magique, que changerais-tu par rapport à la cour de l’école ?</li>
|
||
<li>Tu pourrais nous faire un petit dessin de ta cour idéale ?
|
||
</li>
|
||
<li>Si ton dessin se réalisait, passerais-tu plus de temps dans la cour ?
|
||
</li>
|
||
<li class="title--medium guide__el">Clôture de l’entretien :</li>
|
||
|
||
<li>Nous t’avons posé des questions sur ta condition de vie en tant qu’étudiant ainsi que sur
|
||
l’école. Aurais-tu quelque chose à rajouter ?
|
||
</li>
|
||
<li>Merci pour ta participation ! Bonne journée.</li>
|
||
|
||
</ul>
|
||
</details>
|
||
<details class="section__color--slot tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05 details__QR" open="">
|
||
<summary class="title__slot">Réponses généralisé:</summary>
|
||
<ul>
|
||
<li>Q : Que penses tu de l’HEAJ et de ses environnements ?</li>
|
||
<li>R : Les locaux sont mal indiqués, triste et manque de vie dans
|
||
l’école</li>
|
||
<li>Q : Si tu devais améliorer une partie de l’école, laquelle serait-il ? Pourquoi ? Comment ?
|
||
</li>
|
||
<li>R : Plus de vert, retravailler les extérieurs avec des jeux </li>
|
||
<li>Q : Dans quels endroits extérieur te sens-tu le mieux ? Pourquoi ? </li>
|
||
<li>R : Là, où il y a de la verdure et de la
|
||
vie en générale.</li>
|
||
<li>Q : Si tu avais une baguette magique, que changerais-tu dans la cour ?</li>
|
||
<li>R : Des tables, du sport, de la verdure.</li>
|
||
<li>Q : Si ton dessin se réalisait, passerais-tu plus de temps dans la cour ?
|
||
</li>
|
||
<li>R : Oui principalement</li>
|
||
</ul>
|
||
</details>
|
||
<figure class="img__content tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end03">
|
||
<img class="image_undertxt" src="assets/images/interview.png" srcset="assets/images/interview@2x.png 2x"
|
||
alt="photo représentant une de nos interview" loading="lazy" decoding="async">
|
||
<figcaption class="figcaption">Une de nos plus belles interview</figcaption>
|
||
</figure>
|
||
</section>
|
||
<section class="grid section__color section__color--blue" id="partie5">
|
||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||
class="number-nav">5 </span>Top Task
|
||
& fonctions</h2>
|
||
<p class="mgrid-start01 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end03">Le résultat de
|
||
interviews ont démontré que ce qui
|
||
revenait souvent était la
|
||
volonté d’ajouter des verdures, ainsi qu’un espace pour travailler. </p>
|
||
<p class="mgrid-start02 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end03">Suite à cela, on
|
||
pouvait choisir quel
|
||
Top task nous intéressait le plus parmis celle qu'on aurait voté.</p>
|
||
<figure class="img__content tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end04">
|
||
<img class="image_undertxt" src="assets/images/votetop.png" srcset="assets/images/votetop@2x.png 2x"
|
||
alt="tableau comportant une colonne avec les différentes tâches et l'autre des votes que les élèves ont attribués."
|
||
loading="lazy" decoding="async">
|
||
<figcaption class="figcaption">On avait droit à 3 votes maximum.😇</figcaption>
|
||
</figure>
|
||
</section>
|
||
<section class="grid section__color section__color--pink" id="partie6">
|
||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||
class="number-nav">6 </span>Audits
|
||
</h2>
|
||
<div class="slideshow-container dgrid-start02 dgrid-end04">
|
||
<p class="mgrid-start01 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end03 slide_set">J'ai
|
||
beaucoup aimé la préparations
|
||
de nos audits. C'est à
|
||
dire chercher
|
||
un peu partout des idées venant des architectes, des passionés par de la récup pour créer des bancs, des
|
||
supports pour les plantes. Dans la partie 7, on y trouve mon croquis qui
|
||
rentre en lien avec les images
|
||
ci-dessus.
|
||
</p>
|
||
|
||
<div class="mySlides fade">
|
||
<figure class="img__content img__content--slide dgrid-start02 dgrid-end04">
|
||
<img class="image_undertxt image_undertxt--slide" src="assets/images/plante.jpg"
|
||
srcset="assets/images/plante@2x.png 2x"
|
||
alt="image de succulents accroché à des bouchons de liège." loading="lazy" decoding="async">
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="mySlides fade">
|
||
<figure class="img__content img__content--slide dgrid-start02 dgrid-end04">
|
||
<img class="image_undertxt image_undertxt--slide" src="assets/images/plante2.png"
|
||
srcset="assets/images/plante2@2x.png 2x"
|
||
alt="image de plantes accroché de façon linéare grâce à des bouteilles en plastique pour détergent à lessive liquide coloré."
|
||
loading="lazy" decoding="async">
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="mySlides fade">
|
||
|
||
<figure class="img__content img__content--slide dgrid-start02 dgrid-end04">
|
||
<img class="image_undertxt image_undertxt--slide" src="assets/images/plante.png"
|
||
srcset="assets/images/plante3@2x.png 2x"
|
||
alt="images représentant des plantes accroché à une palissade. Les plantes sont mis dans des grandes bouteilles en plastique."
|
||
loading="lazy" decoding="async">
|
||
</figure>
|
||
</div>
|
||
<div class="mySlides fade">
|
||
|
||
<figure class="img__content img__content--slide dgrid-start02 dgrid-end04">
|
||
<img class="image_undertxt image_undertxt--slide" src="assets/images/rest2.png"
|
||
srcset="assets/images/rest2@2x.png 2x"
|
||
alt="image de terrain avec des pneus fixé au sol, d'autres sont juste posé au sol et des mini bancs coloré en bois."
|
||
loading="lazy" decoding="async">
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="mySlides fade">
|
||
|
||
<figure class="img__content img__content--slide dgrid-start02 dgrid-end04">
|
||
<img class="image_undertxt image_undertxt--slide" src="assets/images/rest4.png"
|
||
srcset="assets/images/rest4@2x.png 2x"
|
||
alt="image d'une structure circulare en bois. Les palettes entourant le cercle et une surface surelevé du sol en bois est faite pour s'asseoir."
|
||
loading="lazy" decoding="async">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
<div class="element_dot">
|
||
<span class="dot"></span>
|
||
<span class="dot"></span>
|
||
<span class="dot"></span>
|
||
<span class="dot"></span>
|
||
<span class="dot"></span>
|
||
</div>
|
||
|
||
</section>
|
||
<section class="grid section__color section__color--green" id="partie7">
|
||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||
class="number-nav">7 </span>User
|
||
Journey</h2>
|
||
<p class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end04">Les User journey, est utilisés pour les
|
||
recherches et améliorations selon
|
||
un ou des
|
||
problème(s) trouvé(s), cela permet d’améliorer nos projets et de trouver une solution plus optimale pour le
|
||
projet. Slidez pour naviguer dans les différentes situations</p>
|
||
<ul>
|
||
<li class="slide"> <img class="image_slide" src="assets/images/user1.png"
|
||
alt="User journey réalisé sous forme d'une image d'un personnage 3D et de tableau expliquant le déroulement de l'étape"
|
||
srcset="assets/images/user1@2x.png 2x" loading="lazy" decoding="async">
|
||
</li>
|
||
<li class="slide"> <img class="image_slide" src="assets/images/user2.png"
|
||
alt="User journey réalisé sous forme d'une image d'un personnage 3D et de tableau expliquant le déroulement de l'étape"
|
||
srcset="assets/images/user2@2x.png 2x" loading="lazy" decoding="async"></li>
|
||
<li class="slide"> <img class="image_slide" src="assets/images/user3.png"
|
||
alt="User journey réalisé sous forme d'une image d'un personnage 3D et de tableau expliquant le déroulement de l'étape"
|
||
srcset="assets/images/user3@2x.png 2x" loading="lazy" decoding="async"></li>
|
||
</ul>
|
||
</section>
|
||
<section class="grid section__color section__color--blue" id="partie8">
|
||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||
class="number-nav">8 </span>Croquis
|
||
</h2>
|
||
<p class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end03">Les croquis sont là pour prévisualiser nos idées
|
||
à partir des informations que l'on a précieusement recueillies.</p>
|
||
<p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end04">Cette partie qui suit le User Journey m'a permis
|
||
de prévisualiser mes idées. Il suffit de rassembler ce que j'ai obtenu pour créer proprement mes éléments
|
||
verts ainsi que un
|
||
endroit pour se restaurer lorsqu'il pleut ou qu'il fait beau. J'ai trouvé pas mal d'éléments récupérable
|
||
pour permettre de se soulager quant à la question du budget. Où du moins, comment les 200 000€ vont
|
||
être
|
||
distribué.</p>
|
||
<h3 class="title title--medium tgrid-start02 tgrid-end05 mgrid-start02 mgrid-end04 dgrid-start02 dgrid-end05">
|
||
RUX est un puzzle dont on
|
||
assemble les pièces
|
||
chaque jour.</h3>
|
||
<figure class="img__content dgrid-start02 dgrid-end04">
|
||
<img class="image_undertxt" src="assets/images/plancroquis.png" srcset="assets/images/plancroquis@2x.png 2x"
|
||
alt="photo représentant un plan de la cour avec des croquis coloré illustrant des idées." loading="lazy"
|
||
decoding="async">
|
||
|
||
</figure>
|
||
<figure class="img__content dgrid-start02 dgrid-end04">
|
||
<img class="image_sequence" src="assets/images/bancs.png" srcset="assets/images/bancs@2x.png 2x"
|
||
alt="Illustration 3D d'un banc formant un S fait de bois pour la surface du dessus et de pierres."
|
||
loading="lazy" decoding="async">
|
||
<figcaption class="figcaption"> → Représentation 3D d'un banc formant un S dont la boucle entoure l'arbre.
|
||
</figcaption>
|
||
</figure>
|
||
<figure class="img__content dgrid-start02 dgrid-end03">
|
||
<img class="image_undertxt" src="assets/images/bancsv2.png" srcset="assets/images/bancsv2@2x.png 2x"
|
||
alt="Illustration 3D d'un banc formant un S fait de bois pour la surface du dessus et de pierres et des tiges métalliques"
|
||
loading="lazy" decoding="async">
|
||
</figure>
|
||
<p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end04"> → Le banc forme un S dont la boucle entoure
|
||
l'arbre.
|
||
Il est en bois pour la superficie du dessus, le reste pourrait des morceaux de pierres que l'on cellerait
|
||
avec des tiges métalliques, par exemple.</p>
|
||
<figure class="img__content dgrid-start02 dgrid-end04">
|
||
<img class="image_sequence" src="assets/images/banceau.png" srcset="assets/images/banceau@2x.png 2x"
|
||
alt="Illustration 3D d'une structure rectangulaire en brique. Un espace dans le rectangle contient de l'eau et de la verdure. Un espace pour deux personnes gère l'espace restant du rectangle."
|
||
loading="lazy" decoding="async">
|
||
<figcaption class="figcaption"> → Le banc se trouve dans l'emplacement creux. À coté se trouve un
|
||
emplacement d'eau.
|
||
</figcaption>
|
||
</figure>
|
||
<p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end04">Cette idée d'utiliser des briques apporte un coté
|
||
frais. Le petit espace rectangle remplis d'eau et de végétation est situer à coté du banc en bois qui
|
||
pourrait nous procurer une sensation de calme.</p>
|
||
<figure class="img__content dgrid-start02 dgrid-end05">
|
||
<img class="image_sequence" src="assets/images/pneu.png" srcset="assets/images/pneu@2x.png 2x"
|
||
alt="Illustration 3D d'un gros pneu utilisé pour être assis dessus." loading="lazy"
|
||
decoding="async">
|
||
<figcaption class="figcaption"> → Un gros pneu posé au sol et que l'ont peut tirer.
|
||
</figcaption>
|
||
</figure>
|
||
<figure class="img__content tgrid-start01 tgrid-end05 dgrid-start03 dgrid-end05">
|
||
<img class="image_sequence image_sequence--m" src="assets/images/taboisret.png"
|
||
srcset="assets/images/taboisret@2x.png 2x" alt="Illustration 3D d'un tabouret en rondin sur roulette."
|
||
loading="lazy" decoding="async">
|
||
<figcaption class="figcaption"> → Tabouret contenant des roulettes
|
||
</figcaption>
|
||
</figure>
|
||
<p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end04">Un couteau à bois, des vis des roulettes et le
|
||
plus beau rondin de bois suffit à créer un tabouret mobile !</p>
|
||
</section>
|
||
<section class="grid" id="partie9">
|
||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||
class="number-nav">9
|
||
</span>Intégration</h2>
|
||
<h3 class="title--medium mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end05">Et c’est à ce moment précis que
|
||
l'on ralenti.</h3>
|
||
<p class="dgrid-start02 dgrid-end05">Je prends conscience des impasses qui se sont mis peu à peu sur mon chemin
|
||
en codant.</p>
|
||
<p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end04">
|
||
Tout d'abord il y a eu le burger menu. La navigation avait un fond bleu, et était placée de façon latérale,
|
||
sur le coté gauche du mobile. Mais en le testant sur le téléphone, je me suis
|
||
bien vite rendue compte que ça n'était pas facile d'accéder aux différents liens avec une main.</p>
|
||
<p class="dgrid-start02 dgrid-end05">On navigue très peu souvent sur un smartphone en ayant celui-çi posé sur un
|
||
bureau. On ressent très vite le besoin de le maintenir en main pour avoir une libertée de controle. C'est
|
||
pourquoi elle se trouve en bas. J'ai fais en sorte que l'utilisateurs (et moi même lors des phases de
|
||
tests), puisse navigué librement et rapidement. De plus, je l'ai remontée pour qu'elle soit au-dessus des
|
||
menus principaux (comme le bouton "retour en arrière" et le bouton "Home") affichés sur les smartphones.</p>
|
||
<p class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end04">Finalement, cet atelier m'as appris à mieux gérer
|
||
ma méthode de travail. Je trouvais intéressant d'aller directement voir les utilisateurs en face à face pour
|
||
qu'ils me parlent d'eux, leurs vécus, leurs ressentis. J'aime beaucoup ces échanges sociaux et avec un
|
||
objectif derrière ça rend l'atelier plus divertissant. J'ai du m'adapter à pas mal de situation, mais je les
|
||
ai surmonté. Ensuite ces ajouts d'éléments 3D de la cour, je trouvais vraiment chouette de proposer quelques
|
||
prototypes basés sur toutes nos recherches.</p>
|
||
</section>
|
||
<aside class="grid equipe">
|
||
<p class="el__equipe tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end05">L'équipe des Rases Moquettes</p>
|
||
<ul class="equipe__liste mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end04">
|
||
<li class="equipe__el">
|
||
|
||
|
||
<a href="https://amandine-zone.be/projets/rethinking-ux" target="_blank">
|
||
<span class="equipe__txt">Amandine Zone</span>
|
||
</a>
|
||
</li>
|
||
<li class="equipe__el">
|
||
|
||
<a href="https://celia-delaunois.be/projets/rethinking-ux/" target="_blank">
|
||
<span class="equipe__txt">Célia Delaunois</span>
|
||
</a>
|
||
|
||
</li>
|
||
<li class="equipe__el">
|
||
<a href="https://jessy-allard.be/projets/rethinking-ux/" target="_blank">
|
||
<span class="equipe__txt">Jessy Allard</span>
|
||
</a>
|
||
</li>
|
||
<li class="equipe__el">
|
||
|
||
<a href="https://justin.willemet.be/projets/rethinking-ux" target="_blank">
|
||
<span class="equipe__txt">Justin Willemet</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
|
||
</ul>
|
||
</aside>
|
||
<aside class="grid reseaux">
|
||
<h2 class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end03">Retrouvez-moi:</h2>
|
||
<ul class="reseaux__liste mgrid-start01 mgrid-end05 dgrid-start03 dgrid-end05">
|
||
<li class="reseaux__el">
|
||
<a href="https://www.behance.net/pinavetran661a" target="_blank">
|
||
<span class="reseaux__txt">Behance</span>
|
||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M8.84 10.835h-1.965v-1.859h1.783c1.878 0 1.646 1.859.182 1.859zm5.789 1.058h2.624c-.115-1.687-2.36-1.81-2.624 0zm-5.9.396h-1.854v1.947h1.824c1.782-.001 1.673-1.947.03-1.947zm15.271-.289c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-13.357-.733c1.668-.853 1.607-3.981-1.587-4.028h-4.056v8.73h3.771c3.958 0 3.891-3.967 1.872-4.702zm3.357-3.166h4v-.875h-4v.875zm4.943 3.693c-.545-3.505-6.053-3.711-6.053.872 0 4.526 5.18 3.818 5.949 1.56h-1.848c-.645.748-2.508.531-2.404-1.184h4.41c.009-.555-.009-.953-.054-1.248z" />
|
||
</svg></a>
|
||
</li>
|
||
<li class="reseaux__el">
|
||
<a href="https://dribbble.com/Lilflamby" target="_blank">
|
||
<span class="reseaux__txt">dribbble</span>
|
||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M11.455 9.985c-1.419.417-3.11.632-5.067.646.405-1.654 1.518-3.03 3.003-3.784.777 1.016 1.464 2.063 2.064 3.138zm.965 1.93c-.124-.28-.254-.559-.391-.835-1.622.51-3.561.769-5.804.772l-.008.148c0 1.404.504 2.692 1.34 3.695 1.266-1.901 2.891-3.164 4.863-3.78zm-3.97 4.641c1.569 1.225 3.671 1.589 5.624.836-.252-1.488-.65-2.94-1.19-4.352-1.819.542-3.285 1.714-4.434 3.516zm7.075-9.13c-.977-.754-2.197-1.209-3.525-1.209-.49 0-.964.068-1.418.184.764 1.028 1.441 2.086 2.035 3.172 1.236-.524 2.204-1.24 2.908-2.147zm8.475 4.574c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5 0c0-3.866-3.135-7-7-7s-7 3.134-7 7 3.135 7 7 7 7-3.134 7-7zm-5.824-1.349c.157.324.305.651.447.98 1.26-.217 2.641-.204 4.143.042-.073-1.292-.566-2.474-1.354-3.403-.807 1.005-1.89 1.798-3.236 2.381zm.914 2.132c.489 1.309.865 2.651 1.119 4.023 1.312-.88 2.241-2.284 2.497-3.909-1.317-.228-2.522-.268-3.616-.114z" />
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="reseaux__el">
|
||
<a href="https://www.instagram.com/pina.p_f/" target="_blank">
|
||
<span class="reseaux__txt">Instagram</span>
|
||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z" />
|
||
</svg>
|
||
</a>
|
||
|
||
</li>
|
||
<li class="reseaux__el">
|
||
<a href="https://www.linkedin.com/in/pina-vetrano-55b4a1235/" target="_blank">
|
||
<span class="reseaux__txt">Linkdin</span>
|
||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z" />
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
<li class="reseaux__el">
|
||
<a href="https://twitter.com/PetitFlamb" target="_blank">
|
||
<span class="reseaux__txt">Twitter</span>
|
||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z" />
|
||
</svg>
|
||
|
||
</a>
|
||
</li>
|
||
<li class="reseaux__el">
|
||
<a href="mailto:pinavetranopro@gmail.com" target="_blank">
|
||
<span class="reseaux__txt">Me Contacter</span>
|
||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 .02c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.99 6.98l-6.99 5.666-6.991-5.666h13.981zm.01 10h-14v-8.505l7 5.673 7-5.672v8.504z" />
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
<li class="reseaux__el">
|
||
<a href="https://github.com/Pina-Vetrano" target="_blank">
|
||
<span class="reseaux__txt">Github</span>
|
||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
</aside>
|
||
<footer>
|
||
<div>
|
||
|
||
<nav>
|
||
<ul class="footer__liste">
|
||
<li class="footer__el"><a href="http://dwm.re/"><img class="DWT" src="assets/images/dwt.svg"
|
||
alt="Logo de l'option DWT de la HEAJ."></a></li>
|
||
</ul>
|
||
<small class="footer__date link footer__el"><a class="copy" href="https://pinavetrano.be/projets/"
|
||
target="_blank">Pina
|
||
Vetrano</a> © <span class="date"></span></small>
|
||
</nav>
|
||
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
|
||
</html> |