mirror of
https://old.git.ood.ovh/flambyte/RUX.git
synced 2025-04-28 22:37:51 +02:00
ending code, add 3D illu, all stuff
This commit is contained in:
parent
573cb54ee0
commit
b496133192
47 changed files with 992 additions and 368 deletions
File diff suppressed because it is too large
Load diff
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB |
BIN
assets/images/amandine.png
Normal file
BIN
assets/images/amandine.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 446 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 716 KiB |
BIN
assets/images/banceau.png
Normal file
BIN
assets/images/banceau.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 281 KiB |
BIN
assets/images/banceau@2x.png
Normal file
BIN
assets/images/banceau@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 779 KiB |
BIN
assets/images/bancs.png
Normal file
BIN
assets/images/bancs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
assets/images/bancs@2x.png
Normal file
BIN
assets/images/bancs@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
assets/images/bancsv2.png
Normal file
BIN
assets/images/bancsv2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
assets/images/bancsv2@2x.png
Normal file
BIN
assets/images/bancsv2@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
BIN
assets/images/bloopersPNG.PNG
Normal file
BIN
assets/images/bloopersPNG.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 382 KiB |
BIN
assets/images/celia.png
Normal file
BIN
assets/images/celia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB |
BIN
assets/images/jessy.png
Normal file
BIN
assets/images/jessy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
BIN
assets/images/justin.png
Normal file
BIN
assets/images/justin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
assets/images/patio.png
Normal file
BIN
assets/images/patio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 424 KiB |
BIN
assets/images/patio@2x.png
Normal file
BIN
assets/images/patio@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 716 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 231 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 405 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 448 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 436 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 780 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 808 KiB |
BIN
assets/images/pneu.png
Normal file
BIN
assets/images/pneu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
assets/images/pneu@2x.png
Normal file
BIN
assets/images/pneu@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 349 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 232 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 556 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 356 KiB |
BIN
assets/images/taboisret.png
Normal file
BIN
assets/images/taboisret.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 592 KiB |
BIN
assets/images/taboisret@2x.png
Normal file
BIN
assets/images/taboisret@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 828 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 414 KiB After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1 MiB After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 431 KiB After Width: | Height: | Size: 1,001 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 435 KiB After Width: | Height: | Size: 1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.9 MiB |
|
|
@ -29,20 +29,6 @@ if(activeTheme !== null){
|
||||||
// permet de prendre en compte la dernière modification du theme.
|
// permet de prendre en compte la dernière modification du theme.
|
||||||
|
|
||||||
|
|
||||||
// navigation
|
|
||||||
|
|
||||||
let navButton = document.querySelector(".btn--burger")
|
|
||||||
|
|
||||||
navButton.addEventListener("click", toggleNavigation)
|
|
||||||
|
|
||||||
function toggleNavigation() {
|
|
||||||
if (!document.body.hasAttribute("data-menu")) {
|
|
||||||
document.body.setAttribute("data-menu", true);
|
|
||||||
|
|
||||||
} else {
|
|
||||||
document.body.removeAttribute("data-menu");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//BURGER MENU // FERMER NAV QUAND ON CLIQUE SUR UN LIEN //
|
//BURGER MENU // FERMER NAV QUAND ON CLIQUE SUR UN LIEN //
|
||||||
|
|
||||||
|
|
|
||||||
450
index.html
450
index.html
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="fr">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
<meta name="twitter:site" content="pina-vetrano.be">
|
<meta name="twitter:site" content="pina-vetrano.be">
|
||||||
<meta name="twitter:title" content="PVetrano — RUX">
|
<meta name="twitter:title" content="PVetrano — RUX">
|
||||||
<meta name="twitter:description" content="L'atelier rethinking user experience — à HEAJ de Pina Vetrano">
|
<meta name="twitter:description" content="L'atelier rethinking user experience — à HEAJ de Pina Vetrano">
|
||||||
<meta name="twitter:image" content="http://www.pinavetrano.be/projets/iolce/assets/images/logo_dark.svg">
|
<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:site_name" content="RUX — rethinking user experience ">
|
||||||
<meta property="og:title" content="vetrano-pina — RUX">
|
<meta property="og:title" content="vetrano-pina — RUX">
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
<meta property="og:image" content="assets/images/logo_dark.svg">
|
<meta property="og:image" content="assets/images/logo_dark.svg">
|
||||||
<meta property="og:image:width" content="1800">
|
<meta property="og:image:width" content="1800">
|
||||||
<meta property="og:image:height" content="945">
|
<meta property="og:image:height" content="945">
|
||||||
<link rel="icon" type="image/x-icon" href="./assets/images/logodark.svg">
|
<link rel="icon" type="image/x-icon" href="assets/images/logodark.svg">
|
||||||
<title>RUX Pina Vetrano — DWT — Heaj</title>
|
<title>RUX Pina Vetrano — DWT — Heaj</title>
|
||||||
<!-- CSS and Javascript -->
|
<!-- CSS and Javascript -->
|
||||||
<link rel="stylesheet" href="assets/css/normalize.css">
|
<link rel="stylesheet" href="assets/css/normalize.css">
|
||||||
|
|
@ -30,8 +30,6 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body data-theme="light">
|
<body data-theme="light">
|
||||||
<!-- <img class="full-width mgrid-start02 tgrid-start01 tgrid-end03 dgrid-start dgrid-end06" src="assets/images/akitadog.jpg"
|
|
||||||
alt="akita dog sur le site">-->
|
|
||||||
<header>
|
<header>
|
||||||
|
|
||||||
<button class="js-theme-trigger">
|
<button class="js-theme-trigger">
|
||||||
|
|
@ -39,47 +37,10 @@
|
||||||
<path
|
<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" />
|
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>
|
</svg></button>
|
||||||
<div class="header__linklogo">
|
|
||||||
|
|
||||||
<a href="index.html">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.75 71.07">
|
|
||||||
<defs>
|
|
||||||
<style>
|
|
||||||
.cls-1 {
|
|
||||||
fill: #fff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</defs>
|
|
||||||
<path class="cls-1"
|
|
||||||
d="m76.58,53.64c2.59,0,2.92,1.8,2.92,2.81,0,6.97-13.83,14.17-20.91,14.17-15.52,0-24.85-25.08-30.81-25.08-1.91,0-1.57,2.7-1.57,6.75-.11,3.49.22,4.16,2.47,6.18,1.35,1.24,1.91,2.14,1.91,3.15,0,4.61-9.11,9.44-16.42,9.44S.45,66.12.45,62.52c0-1.12.67-2.02,3.15-3.37,2.7-1.57,3.04-3.37,3.26-23.5.22-14.62.45-18.89-.67-20.02-1.91-1.91-6.18-2.25-6.18-5.74C0,1.69,22.83.68,30.13.68c17.88,0,31.37,7.2,31.37,16.76.11,10.23-14.39,20.35-14.39,22.15,0,2.7,14.17,15.63,22.49,15.63,2.92,0,4.61-1.57,6.97-1.57Zm-35.54-31.03c0-5.51-5.85-12.26-10.46-12.26-3.37,0-4.5,3.71-4.5,14.28v8.66c0,3.15,1.46,3.82,2.14,3.82,5.06,0,12.82-8.66,12.82-14.5Z" />
|
|
||||||
<path class="cls-1"
|
|
||||||
d="m119.69,59.83c0-2.93-.11-4.5-.79-4.5-.56,0-1.24.79-2.25,2.59-4.83,8.55-11.58,13.16-19,13.16-10.12,0-15.74-11.58-15.74-25.41-.11-17.2,8.43-45.66,25.75-45.66,2.93,0,4.05.79,4.05,2.03,0,1.01-.56,2.02-1.12,2.7-3.04,3.04-7.76,21.81-7.87,32.39,0,2.93-1.01,17.09,5.4,17.09,7.2.11,11.81-22.27,12.37-31.71.56-8.55-2.47-7.31-2.47-12.15,0-7.53,13.38-9.33,19.11-9.33s9,1.91,9,5.17c0,2.93-5.28,5.17-7.08,8.32-1.24,2.25-1.46,12.71-1.46,26.99v8.88c0,4.61,1.68,6.97,5.17,6.97,2.93,0,4.39-2.13,7.2-2.13,1.91,0,3.04.9,3.04,3.15,0,1.57-.45,2.25-6.18,6.52-5.51,4.16-10.91,6.18-16.19,6.18-7.2,0-10.91-3.71-10.91-11.24Z" />
|
|
||||||
<path class="cls-1"
|
|
||||||
d="m155.38,63.42c0-2.36,1.8-3.82,4.39-4.72,1.91-.67,4.61-1.46,6.52-2.7,6.29-4.5,16.19-13.05,16.19-16.19,0-1.8-12.37-20.58-14.51-22.38-3.15-2.59-8.21-1.35-8.21-4.5,0-4.16,17.43-12.93,25.53-12.93,2.02,0,3.15.56,3.15,1.91,0,.9-.11,2.25-.34,4.16-.45,4.05,1.91,9,6.97,15.85,2.47,3.49,3.37,4.05,4.5,4.05,3.26,0,11.58-7.76,11.58-10.23,0-.9-1.24-1.57-2.7-2.47-2.36-1.35-3.6-2.36-3.6-3.94,0-3.93,11.47-9,20.46-9,5.06,0,8.43,1.57,8.43,3.82,0,1.57-1.57,3.26-5.17,6.86l-21.92,22.26c-2.02,2.02.79,7.08,2.02,8.66l7.31,9.45c3.49,4.5,3.94,6.07,9,6.07,3.26-.11,4.72.67,4.72,2.36,0,5.17-9.44,11.24-17.65,11.24-2.48,0-6.3-1.68-9.33-5.62l-10.35-13.27c-1.68-2.25-2.47-2.93-3.6-2.93-3.6,0-9.33,6.75-9.33,11.24,0,1.35.56,2.14.56,3.26,0,3.71-6.52,7.31-13.15,7.31s-11.47-3.71-11.47-7.65Z" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="header--second">
|
<div class="header--second">
|
||||||
|
|
||||||
|
|
||||||
<button class="btn--burger">
|
|
||||||
<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path
|
|
||||||
d="M19.5 7C17.567 7 16 5.433 16 3.5V3.5C16 1.567 17.567 4.08341e-07 19.5 3.23847e-07V3.23847e-07C21.433 2.39353e-07 23 1.567 23 3.5V3.5C23 5.433 21.433 7 19.5 7V7Z"
|
|
||||||
fill="white" />
|
|
||||||
<path
|
|
||||||
d="M35.5 7C33.567 7 32 5.433 32 3.5V3.5C32 1.567 33.567 4.08341e-07 35.5 3.23847e-07V3.23847e-07C37.433 2.39353e-07 39 1.567 39 3.5V3.5C39 5.433 37.433 7 35.5 7V7Z"
|
|
||||||
fill="white" />
|
|
||||||
<path
|
|
||||||
d="M3.5 7C1.567 7 -6.84959e-08 5.433 -1.5299e-07 3.5V3.5C-2.37484e-07 1.567 1.567 4.08341e-07 3.5 3.23847e-07V3.23847e-07C5.433 2.39353e-07 7 1.567 7 3.5V3.5C7 5.433 5.433 7 3.5 7V7Z"
|
|
||||||
fill="white" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
</button>
|
|
||||||
<div class="btn__lightdark--blockd">
|
<div class="btn__lightdark--blockd">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -89,30 +50,36 @@
|
||||||
|
|
||||||
<ul class="list--header">
|
<ul class="list--header">
|
||||||
<li>
|
<li>
|
||||||
<a class="link link--header" href="#partie0">//00</a>
|
<a class="link link--header" href="#partie0">0</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a class="link link--header" href="#partie1">//01</a>
|
<a class="link link--header" href="#partie1">1</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="link link--header" href="#partie2">//02</a>
|
<a class="link link--header" href="#partie2">2</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a class="link link--header" href="#partie3">//03</a>
|
<a class="link link--header" href="#partie3">3</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="link link--header" href="#partie4">//04</a>
|
<a class="link link--header" href="#partie4">4</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="link link--header" href="#partie5">//05</a>
|
<a class="link link--header" href="#partie5">5</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="link link--header" href="#partie6">//06</a>
|
<a class="link link--header" href="#partie6">6</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="link link--header" href="#partie7">//07</a>
|
<a class="link link--header" href="#partie7">7</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="link link--header" href="#partie8">8</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="link link--header" href="#partie9">9</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
@ -124,75 +91,54 @@
|
||||||
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="header__navigation--m">
|
|
||||||
<ul class="list__m--header">
|
|
||||||
<li>
|
|
||||||
<a class="link link--header" href="#partie0">Partie //00</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<a class="link link--header" href="#partie1">Partie //01</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="link link--header" href="#partie2">Partie //02</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<a class="link link--header" href="#partie3">Partie //03</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="link link--header" href="#partie4">Partie //04</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="link link--header" href="#partie5">Partie //05</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="link link--header" href="#partie6">Partie //06</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="link link--header" href="#partie7">Partie //07</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="headback">
|
<div class="headback">
|
||||||
<div class="fond">
|
<div class="fond">
|
||||||
<img class="headtitle" src="/assets/images/headlogo.png"
|
<img class="headtitle" src="assets/images/headlogo.png"
|
||||||
alt="illustration portant les initiales de l'atelier Rethinking User Experience. RUX">
|
alt="illustration portant les initiales de l'atelier Rethinking User Experience. RUX">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<section class="grid grid--content">
|
<section class="grid grid--content" id="partie0">
|
||||||
<div class="strip strip--1"></div>
|
<div class="strip strip--1"></div>
|
||||||
<h1 class="title mgrid-start01 mgrid-end04 dgrid-start01 dgrid-end06" id="partie0">Synopsis</h1>
|
<h1 class="title mgrid-start01 mgrid-end08 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
<p class="mgrid-start01 mgrid-end04 dgrid-start04 dgrid-end06 partie1_blackfill">L’atelier RUX (rethinking UX)
|
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
|
est de
|
||||||
réaliser une interface adaptée et
|
réaliser une interface adaptée et
|
||||||
compréhensible pour
|
compréhensible pour
|
||||||
l’utilisateur, pour une
|
l’utilisateur, pour une
|
||||||
navigation facile et rapide”</p>
|
navigation facile et rapide”</p>
|
||||||
<div class="strip strip--2"></div>
|
<div class="strip strip--2"></div>
|
||||||
<p class="mgrid-start02 mgrid-end05 dgrid-start05 dgrid-end06 partie1_blackfill">Le directeur de la Haute école
|
<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 à
|
Albert Jacquard nous à
|
||||||
donner une mission ! </p>
|
donner une mission ! </p>
|
||||||
<div class="strip strip--3"></div>
|
<div class="strip strip--3"></div>
|
||||||
<p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end05 partie1_blackfill">Repenser notre cours de récré
|
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05 partie1_blackfill">
|
||||||
|
Repenser notre cours de récré
|
||||||
</p>
|
</p>
|
||||||
<p class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end06 partie1_blackfill">Notre budget est limité à 200k€
|
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end05 partie1_blackfill">Notre
|
||||||
+-</p>
|
budget est limité à
|
||||||
|
200k€
|
||||||
|
+- </p>
|
||||||
<div class="strip strip--cash"></div>
|
<div class="strip strip--cash"></div>
|
||||||
<figure class="img__content dgrid-start04 dgrid-end06">
|
<figure class="img__content tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end03">
|
||||||
<img class="image_undertxt image_undertxt--iv" src="assets/images/plancour.png"
|
<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"
|
srcset="assets/images/plancour@2x.png 2x"
|
||||||
loading="lazy" decoding="async">
|
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>
|
<figcaption class="figcaption">schéma illustré de la cour</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
<figure class="img__content dgrid-start02 dgrid-end05">
|
<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"
|
<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" loading="lazy" decoding="async">
|
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>
|
<figcaption class="figcaption">Photo prise de la cour "plan large"</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</section>
|
</section>
|
||||||
<section class="grid">
|
<section class="grid" id="partie1">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie1">Création de l'Équipe</h2>
|
<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">
|
<div class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end05">
|
||||||
<ul class="discu__liste">
|
<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--pink"> On choisit quel nom pour la Team ? (Célia)</li>
|
||||||
|
|
@ -204,15 +150,18 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="grid grid--mega section__color section__color--pink">
|
<section class="grid section__color section__color--pink" id="partie2">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie2">Prémices</h2>
|
<h2 class="title mgrid-start01 mgrid-end07 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
<p class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end05">Et c’est à ce moment précis que l’on a mis la
|
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>
|
première vitesse.</p>
|
||||||
<p class="dgrid-start04 dgrid-end06">Notre
|
<p class=" tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end05">Notre
|
||||||
tout nouvel atelier consistait à
|
tout nouvel atelier consistait à
|
||||||
repenser l’usage de la cour en proposant des moyens d’agencement. Pour réaliser cela, on a eu recours à
|
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>
|
notre stratégie d’apprentissage ! </p>
|
||||||
<p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end07 content__objet">
|
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end07 content__objet">
|
||||||
La fusion d'un <span class="highlight">travail collaboratif</span>, des travaux de recherches qui nous
|
La fusion d'un <span class="highlight">travail collaboratif</span>, des travaux de recherches qui nous
|
||||||
permettent d’aller découvrir le monde
|
permettent d’aller découvrir le monde
|
||||||
extérieur et <span class="highlight">nos utilisateurs</span> et le travail pratique, ainsi que la partie
|
extérieur et <span class="highlight">nos utilisateurs</span> et le travail pratique, ainsi que la partie
|
||||||
|
|
@ -222,37 +171,52 @@
|
||||||
faire plus élégant.
|
faire plus élégant.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<section class="grid section__color section__color--green">
|
<section class="grid section__color section__color--green" id="partie3">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie3">Prémices bis</h2>
|
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
<p class="mgrid-start01 mgrid-end04">La première étape à été d'<span class="highlight">observer la
|
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'<span class="highlight">observer la
|
||||||
cour</span> afin d'avoir un visuel plus
|
cour</span> afin d'avoir un visuel plus
|
||||||
globale sur la cour.</p>
|
globale sur la cour.</p>
|
||||||
<p> Une fois terminé, la classe qui était bavarde se retrouve tout de suite dans un silence le plus total.
|
<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
|
J'écrivais beaucoup de questions que je pourrais poser au directeur. Seulement les questions n’ont pas
|
||||||
été posées dans un <span class="highlight">ordre précis.</span></p>
|
été posées dans un <span class="highlight">ordre précis.</span></p>
|
||||||
<p class="mgrid-start02 mgrid-end05">Le directeur, celui qui était censé répondre à nos questions, a
|
<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>
|
commencé à expliquer la situation. En faisant cela, il a transformé nos questions en réponses.</p>
|
||||||
<p>Voici les questions:</p>
|
<p class="mgrid-start02 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05">Voici les questions:
|
||||||
<a href="https://miro.com/app/board/uXjVPsdXjzw=/?share_link_id=851619025509" target="_blank"
|
</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>
|
title="Sur Miro">Aller sur Miro</a>
|
||||||
<p class="mgrid-start01 mgrid-end05">
|
<p class="mgrid-start01 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05">
|
||||||
Les questions ont été posées au directeur. Il nous a expliqué son point de vue, sa vision des choses. Il
|
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
|
avait en tête de créer un axe qui nous permettrait de nous diriger plus facilement vers le Bâtiment
|
||||||
et C. En gardant bien en tête que bien souvent, manque de place oblige sur les parkings, les gens se
|
A, B et C. En gardant bien en tête que bien souvent, manque de place oblige sur les parkings, les
|
||||||
parquent là. </p>
|
gens se
|
||||||
<p class="mgrid-start01 mgrid-end05">
|
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
|
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
|
lieux d’exposition, déco des murs, activités, zone de
|
||||||
lecture. Distribution des diplômes. Lieu de concert. Boîte à livres. </p>
|
lecture. Distribution des diplômes. Lieu de concert. Boîte à livres. </p>
|
||||||
</section>
|
</section>
|
||||||
<section class="grid">
|
<section class="grid" id="partie4">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie4">Guide d'entretien</h2>
|
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
<p class="mgrid-start01 mgrid-end05">Alors pour cette étape, je suis partie du principe que je ne sais pas
|
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
|
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 <span class="highlight">les utilisateurs, leurs
|
camarades, il est important de comprendre <span class="highlight">les utilisateurs, leurs
|
||||||
raisonnements</span> comment ils utilisent la cour, leur temps libre.</p>
|
raisonnements</span> comment ils utilisent la cour, leur temps libre.</p>
|
||||||
<p> Et pour cela, on prépare un <span class="highlight">guide d'entretien</span></p>
|
<p class="mgrid-start01 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05"> Et pour cela, on
|
||||||
<details class="section__color--slot" open="">
|
prépare un <span class="highlight">guide d'entretien</span></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>
|
<summary class="title__slot">Voici le guide d'entretiens en entier:</summary>
|
||||||
<ul class="guide__liste">
|
<ul class="guide__liste">
|
||||||
<li class="title--medium guide__el">Introduction :</li>
|
<li class="title--medium guide__el">Introduction :</li>
|
||||||
|
|
@ -297,7 +261,7 @@
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</details>
|
</details>
|
||||||
<details class="section__color--slot details__QR" open="">
|
<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>
|
<summary class="title__slot">Réponses généralisé:</summary>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Q : Que penses tu de l’HEAJ et de ses environnements ?</li>
|
<li>Q : Que penses tu de l’HEAJ et de ses environnements ?</li>
|
||||||
|
|
@ -313,75 +277,90 @@
|
||||||
<li>R : Des tables, du sport, <span class="highlight">de la verdure.</span></li>
|
<li>R : Des tables, du sport, <span class="highlight">de la verdure.</span></li>
|
||||||
<li>Q : Si ton dessin se réalisait, passerais-tu plus de temps dans la cour ?
|
<li>Q : Si ton dessin se réalisait, passerais-tu plus de temps dans la cour ?
|
||||||
</li>
|
</li>
|
||||||
<li>R : oui principalement</li>
|
<li>R : Oui principalement</li>
|
||||||
</ul>
|
</ul>
|
||||||
</details>
|
</details>
|
||||||
<figure class="img__content">
|
<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"
|
<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">
|
alt="photo représentant une de nos interview" loading="lazy" decoding="async">
|
||||||
<figcaption class="figcaption">Une de nos plus belles interview</figcaption>
|
<figcaption class="figcaption">Une de nos plus belles interview</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</section>
|
</section>
|
||||||
<section class="grid section__color section__color--blue">
|
<section class="grid section__color section__color--blue" id="partie5">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie5">Top Task & fonctions</h2>
|
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
<p class="mgrid-start01 mgrid-end05">Le résultat de interviews ont démontré que ce qui revenait souvent était la
|
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é <span class="highlight">d’ajouter des verdures</span>, ainsi qu’un espace pour travailler. </p>
|
volonté <span class="highlight">d’ajouter des verdures</span>, ainsi qu’un espace pour travailler. </p>
|
||||||
<p class="mgrid-start02 mgrid-end06">Suite à cela, on pouvait choisir quel
|
<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>
|
Top task nous intéressait le plus parmis celle qu'on aurait voté.</p>
|
||||||
<figure class="img__content">
|
<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"
|
<img class="image_undertxt" src="assets/images/votetop.png" srcset="assets/images/votetop@2x.png 2x"
|
||||||
alt="photo représentant une de nos interview" loading="lazy" decoding="async">
|
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>
|
<figcaption class="figcaption">On avait droit à 3 votes maximum.😇</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</section>
|
</section>
|
||||||
<section class="grid section__color section__color--blue">
|
<section class="grid section__color section__color--pink" id="partie6">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie6">Audits</h2>
|
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
<div class="slideshow-container">
|
class="number-nav">6 </span>Audits
|
||||||
<p class="mgrid-start01 mgrid-end05 slide_set">J'ai beaucoup aimé la préparations de nos audits. C'est à
|
</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
|
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
|
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 <a href id="#partie7"> partie 7</a>, on y trouve mon croquis qui rentre en lien avec les images
|
supports pour les plantes. Dans la partie 7, on y trouve mon croquis qui
|
||||||
|
rentre en lien avec les images
|
||||||
ci-dessus.
|
ci-dessus.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="mySlides fade">
|
<div class="mySlides fade">
|
||||||
<figure class="img__content img__content--slide">
|
<figure class="img__content img__content--slide dgrid-start02 dgrid-end04">
|
||||||
<img class="image_undertxt image_undertxt--slide" src="assets/images/plante.jpg"
|
<img class="image_undertxt image_undertxt--slide" src="assets/images/plante.jpg"
|
||||||
srcset="assets/images/plante@2x.png 2x" alt="photo représentant une de nos interview"
|
srcset="assets/images/plante@2x.png 2x"
|
||||||
loading="lazy" decoding="async">
|
alt="image de succulents accroché à des bouchons de liège." loading="lazy" decoding="async">
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mySlides fade">
|
<div class="mySlides fade">
|
||||||
<figure class="img__content img__content--slide">
|
<figure class="img__content img__content--slide dgrid-start02 dgrid-end04">
|
||||||
<img class="image_undertxt image_undertxt--slide" src="assets/images/plante2.png"
|
<img class="image_undertxt image_undertxt--slide" src="assets/images/plante2.png"
|
||||||
srcset="assets/images/plante2@2x.png 2x" alt="photo représentant une de nos interview"
|
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">
|
loading="lazy" decoding="async">
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mySlides fade">
|
<div class="mySlides fade">
|
||||||
|
|
||||||
<figure class="img__content img__content--slide">
|
<figure class="img__content img__content--slide dgrid-start02 dgrid-end04">
|
||||||
<img class="image_undertxt image_undertxt--slide" src="assets/images/plante.png"
|
<img class="image_undertxt image_undertxt--slide" src="assets/images/plante.png"
|
||||||
srcset="assets/images/plante3@2x.png 2x" alt="photo représentant une de nos interview"
|
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">
|
loading="lazy" decoding="async">
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
<div class="mySlides fade">
|
<div class="mySlides fade">
|
||||||
|
|
||||||
<figure class="img__content img__content--slide">
|
<figure class="img__content img__content--slide dgrid-start02 dgrid-end04">
|
||||||
<img class="image_undertxt image_undertxt--slide" src="assets/images/rest2.png"
|
<img class="image_undertxt image_undertxt--slide" src="assets/images/rest2.png"
|
||||||
srcset="assets/images/rest2@2x.png 2x" alt="photo représentant une de nos interview"
|
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">
|
loading="lazy" decoding="async">
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mySlides fade">
|
<div class="mySlides fade">
|
||||||
|
|
||||||
<figure class="img__content img__content--slide">
|
<figure class="img__content img__content--slide dgrid-start02 dgrid-end04">
|
||||||
<img class="image_undertxt image_undertxt--slide" src="assets/images/rest4.png"
|
<img class="image_undertxt image_undertxt--slide" src="assets/images/rest4.png"
|
||||||
srcset="assets/images/rest4@2x.png 2x" alt="photo représentant une de nos interview"
|
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">
|
loading="lazy" decoding="async">
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -395,35 +374,157 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
<section class="grid section__color">
|
<section class="grid section__color section__color--green" id="partie7">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie7">User Journey</h2>
|
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
<h3 class="title mgrid-start01 mgrid-end04"></h3>
|
class="number-nav">7 </span>User
|
||||||
<p class="mgrid-start01 mgrid-end04">Les User journey, est utilisés pour les recherches et améliorations selon
|
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
|
un ou des
|
||||||
problème(s) trouvé(s), cela permet d’améliorer nos projets et de trouver une solution plus optimale pour le
|
problème(s) trouvé(s), cela permet d’améliorer nos projets et de trouver une solution plus optimale pour le
|
||||||
projet.</p>
|
projet. <span class="highlight">Slidez</span> pour naviguer dans les différentes situations</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li class="slide"> <img class="image_slide" src="assets/images/user1.png" alt="User journey réalisé"
|
<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">
|
srcset="assets/images/user1@2x.png 2x" loading="lazy" decoding="async">
|
||||||
</li>
|
</li>
|
||||||
<li class="slide"> <img class="image_slide" src="assets/images/user2.png" alt="User journey réalisé"
|
<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>
|
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é"
|
<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>
|
srcset="assets/images/user3@2x.png 2x" loading="lazy" decoding="async"></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<section class="grid">
|
<section class="grid section__color section__color--blue" id="partie8">
|
||||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie7">Intégration</h2>
|
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
|
||||||
<figure class="img__content">
|
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"
|
<img class="image_undertxt" src="assets/images/plancroquis.png" srcset="assets/images/plancroquis@2x.png 2x"
|
||||||
alt="photo représentant une de nos interview" loading="lazy" decoding="async">
|
alt="photo représentant un plan de la cour avec des croquis coloré illustrant des idées." loading="lazy"
|
||||||
|
decoding="async">
|
||||||
|
|
||||||
</figure>
|
</figure>
|
||||||
|
<figure class="img__content dgrid-start02 dgrid-end05">
|
||||||
|
<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">grid-end06
|
||||||
|
<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>
|
||||||
|
<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 <span class="highlight">testant </span>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">
|
<aside class="grid reseaux">
|
||||||
<h2>Retrouvez-moi sur :</h2>
|
<h2 class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end03">Retrouvez-moi:</h2>
|
||||||
<ul class="reseaux__liste">
|
<ul class="reseaux__liste mgrid-start01 mgrid-end05 dgrid-start03 dgrid-end05">
|
||||||
<li class="reseaux__el">
|
<li class="reseaux__el">
|
||||||
<a href="https://www.behance.net/pinavetran661a">
|
<a href="https://www.behance.net/pinavetran661a" target="_blank">
|
||||||
<span class="reseaux__txt">Behance</span>
|
<span class="reseaux__txt">Behance</span>
|
||||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||||
viewBox="0 0 24 24">
|
viewBox="0 0 24 24">
|
||||||
|
|
@ -432,7 +533,7 @@
|
||||||
</svg></a>
|
</svg></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="reseaux__el">
|
<li class="reseaux__el">
|
||||||
<a href="https://dribbble.com/Lilflamby">
|
<a href="https://dribbble.com/Lilflamby" target="_blank">
|
||||||
<span class="reseaux__txt">dribbble</span>
|
<span class="reseaux__txt">dribbble</span>
|
||||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||||
viewBox="0 0 24 24">
|
viewBox="0 0 24 24">
|
||||||
|
|
@ -441,18 +542,9 @@
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="reseaux__el">
|
|
||||||
<a href="https://medium.com/@pinavetranopro">
|
|
||||||
<span class="reseaux__txt">medium</span>
|
|
||||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
||||||
viewBox="0 0 24 24" fill-rule="evenodd" clip-rule="evenodd">
|
|
||||||
<path
|
|
||||||
d="M12 0c-6.626 0-12 5.372-12 12 0 6.627 5.374 12 12 12 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12zm6.974 17.557v-.235l-1.092-1.072c-.096-.073-.144-.194-.124-.313v-7.874c-.02-.119.028-.24.124-.313l1.118-1.072v-.235h-3.869l-2.758 6.88-3.138-6.88h-4.059v.235l1.308 1.575c.128.115.194.285.176.457v6.188c.038.223-.032.451-.189.614l-1.471 1.784v.235h4.17v-.235l-1.471-1.784c-.158-.163-.233-.389-.202-.614v-5.352l3.66 7.985h.425l3.143-7.985v6.365c0 .17 0 .202-.111.313l-1.13 1.098v.235h5.49z" />
|
|
||||||
</svg></a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="reseaux__el">
|
<li class="reseaux__el">
|
||||||
<a href="https://www.instagram.com/pina.p_f/">
|
<a href="https://www.instagram.com/pina.p_f/" target="_blank">
|
||||||
<span class="reseaux__txt">Instagram</span>
|
<span class="reseaux__txt">Instagram</span>
|
||||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||||
viewBox="0 0 24 24">
|
viewBox="0 0 24 24">
|
||||||
|
|
@ -463,7 +555,7 @@
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
<li class="reseaux__el">
|
<li class="reseaux__el">
|
||||||
<a href="https://www.linkedin.com/in/pina-vetrano-55b4a1235/">
|
<a href="https://www.linkedin.com/in/pina-vetrano-55b4a1235/" target="_blank">
|
||||||
<span class="reseaux__txt">Linkdin</span>
|
<span class="reseaux__txt">Linkdin</span>
|
||||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||||
viewBox="0 0 24 24">
|
viewBox="0 0 24 24">
|
||||||
|
|
@ -473,7 +565,7 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="reseaux__el">
|
<li class="reseaux__el">
|
||||||
<a href="https://twitter.com/PetitFlamb">
|
<a href="https://twitter.com/PetitFlamb" target="_blank">
|
||||||
<span class="reseaux__txt">Twitter</span>
|
<span class="reseaux__txt">Twitter</span>
|
||||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||||
viewBox="0 0 24 24">
|
viewBox="0 0 24 24">
|
||||||
|
|
@ -484,7 +576,7 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="reseaux__el">
|
<li class="reseaux__el">
|
||||||
<a href="mailto:pinavetranopro@gmail.com">
|
<a href="mailto:pinavetranopro@gmail.com" target="_blank">
|
||||||
<span class="reseaux__txt">Me Contacter</span>
|
<span class="reseaux__txt">Me Contacter</span>
|
||||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||||
viewBox="0 0 24 24">
|
viewBox="0 0 24 24">
|
||||||
|
|
@ -494,7 +586,7 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="reseaux__el">
|
<li class="reseaux__el">
|
||||||
<a href="https://github.com/Pina-Vetrano">
|
<a href="https://github.com/Pina-Vetrano" target="_blank">
|
||||||
<span class="reseaux__txt">Github</span>
|
<span class="reseaux__txt">Github</span>
|
||||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||||
viewBox="0 0 24 24">
|
viewBox="0 0 24 24">
|
||||||
|
|
@ -508,16 +600,14 @@
|
||||||
</aside>
|
</aside>
|
||||||
<footer>
|
<footer>
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="list--footer">
|
<ul class="footer__liste">
|
||||||
<li class="link link--footer"><a href="http://dwm.re/"><img class="DWT" src="assets/images/dwt.svg"
|
<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>
|
alt="Logo de l'option DWT de la HEAJ."></a></li>
|
||||||
<li class="link link--footer"><a href="ui-kit.html" title="UI-KiT">UI-Kit</a>
|
|
||||||
</li>
|
|
||||||
<li class="link link--footer"><a href="credits.html" title="Crédits">Crédits</a></li>
|
|
||||||
<li class="link link--footer"><a href="case-study.html" title="case-study">Case-study</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
<small class="footer__date link link--footer"><a class="copy" href="https://pinavetrano.be/">Pina
|
<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>
|
Vetrano</a> © <span class="date"></span></small>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
|
||||||
133
uikit.html
133
uikit.html
|
|
@ -1,5 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="fr">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
|
@ -10,7 +11,7 @@
|
||||||
<meta name="twitter:site" content="pina-vetrano.be">
|
<meta name="twitter:site" content="pina-vetrano.be">
|
||||||
<meta name="twitter:title" content="PVetrano — RUX">
|
<meta name="twitter:title" content="PVetrano — RUX">
|
||||||
<meta name="twitter:description" content="L'atelier rethinking user experience — à HEAJ de Pina Vetrano">
|
<meta name="twitter:description" content="L'atelier rethinking user experience — à HEAJ de Pina Vetrano">
|
||||||
<meta name="twitter:image" content="http://www.pinavetrano.be/projets/iolce/assets/images/logo_dark.svg">
|
<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:site_name" content="RUX — rethinking user experience ">
|
||||||
<meta property="og:title" content="vetrano-pina — RUX">
|
<meta property="og:title" content="vetrano-pina — RUX">
|
||||||
|
|
@ -20,17 +21,129 @@
|
||||||
<meta property="og:image" content="assets/images/logo_dark.svg">
|
<meta property="og:image" content="assets/images/logo_dark.svg">
|
||||||
<meta property="og:image:width" content="1800">
|
<meta property="og:image:width" content="1800">
|
||||||
<meta property="og:image:height" content="945">
|
<meta property="og:image:height" content="945">
|
||||||
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.svg">
|
<link rel="icon" type="image/x-icon" href="assets/images/logodark.svg">
|
||||||
<title>RUX Pina Vetrano — DWT — Heaj</title>
|
<title>RUX Pina Vetrano — DWT — Heaj</title>
|
||||||
<!-- CSS and Javascript -->
|
<!-- CSS and Javascript -->
|
||||||
<link rel="stylesheet" href="assets/css/normalize.css">
|
<link rel="stylesheet" href="assets/css/normalize.css">
|
||||||
<link rel="stylesheet" href="assets/css/style.css">
|
<link rel="stylesheet" href="assets/css/style.css">
|
||||||
<script src="assets/js/app.js" defer></script>
|
<script src="assets/js/app.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<title>RUX</title>
|
<body data-theme="light">
|
||||||
</head>
|
<header>
|
||||||
<body>
|
|
||||||
<h1 class="title title">RUX</h1>
|
<button class="js-theme-trigger">
|
||||||
<!--https://www.youtube.com/watch?v=vJNVramny9k use this ?-->
|
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
|
||||||
</body>
|
<path
|
||||||
</html>
|
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>
|
||||||
|
</header>
|
||||||
|
<section class="grid grid--content" id="partie0">
|
||||||
|
<div class="strip strip--1"></div>
|
||||||
|
<h1 class="title-uikit mgrid-start01 mgrid-end07 dgrid-start01 dgrid-end07"><span class="number-nav">0 </span>Synopsis</h1>
|
||||||
|
<p class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end06 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 dgrid-start03 dgrid-end06 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 dgrid-start02 dgrid-end06 partie1_blackfill">Repenser notre cours de récré
|
||||||
|
</p>
|
||||||
|
<p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end05 partie1_blackfill">Notre budget est limité à 200k€
|
||||||
|
+- </p>
|
||||||
|
<div class="strip strip--cash"></div>
|
||||||
|
<figure class="img__content 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 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="partie4">
|
||||||
|
<h2 class="title mgrid-start01 mgrid-end04 dgrid-start01 dgrid-end06"><span class="number-nav">4 </span>Guide d'entretien</h2>
|
||||||
|
<p class="mgrid-start01 mgrid-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 <span class="highlight">les utilisateurs, leurs
|
||||||
|
raisonnements</span> comment ils utilisent la cour, leur temps libre.</p>
|
||||||
|
<p class="mgrid-start01 mgrid-end05 dgrid-start02 dgrid-end05"> Et pour cela, on prépare un <span
|
||||||
|
class="highlight">guide d'entretien</span></p>
|
||||||
|
<details class="section__color--slot 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 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 <span class="highlight">manque de vie</span> dans
|
||||||
|
l’école</li>
|
||||||
|
<li>Q : Si tu devais améliorer une partie de l’école, laquelle serait-il ? Pourquoi ? Comment ?
|
||||||
|
</li>
|
||||||
|
<li>R : <span class="highlight">Plus de vert</span>, 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 <span class="highlight">verdure</span> et <span class="highlight">de la
|
||||||
|
vie</span> 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, <span class="highlight">de la verdure.</span></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 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>
|
||||||
Loading…
Add table
Reference in a new issue