mirror of
https://old.git.ood.ovh/flambyte/RUX.git
synced 2025-04-28 18:14:45 +02:00
695 lines
No EOL
58 KiB
HTML
695 lines
No EOL
58 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">
|
||
<script src="assets/js/app.js" defer></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
|
||
</script>
|
||
</head>
|
||
|
||
<body data-theme="light">
|
||
<header>
|
||
|
||
<div class="header__navigation">
|
||
|
||
<nav>
|
||
|
||
<ul class="navlink__list">
|
||
<li class="navlink__el">
|
||
<a class="link" href="#partie1">
|
||
<span class="navlink__txt">Scope</span>
|
||
<svg class="navlink__icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<g clip-path="url(#clip0_4_64)">
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M12 5.47369C8.39561 5.47369 5.47368 8.39562 5.47368 12C5.47368 15.6044 8.39561 18.5263 12 18.5263C15.6044 18.5263 18.5263 15.6044 18.5263 12C18.5263 8.39562 15.6044 5.47369 12 5.47369ZM4.21053 12C4.21053 7.69799 7.69799 4.21053 12 4.21053C16.302 4.21053 19.7895 7.69799 19.7895 12C19.7895 16.302 16.302 19.7895 12 19.7895C7.69799 19.7895 4.21053 16.302 4.21053 12Z"
|
||
fill="var(--color-link)" />
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M12 1.26316C6.07021 1.26316 1.26316 6.07021 1.26316 12C1.26316 17.9298 6.07021 22.7368 12 22.7368C17.9298 22.7368 22.7368 17.9298 22.7368 12C22.7368 6.07021 17.9298 1.26316 12 1.26316ZM0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z"
|
||
fill="var(--color-link)" />
|
||
<path
|
||
d="M15.3684 12.8421L15.3684 11.1579L23.7895 11.1579L23.7895 12.8421L15.3684 12.8421Z"
|
||
fill="var(--color-link)" />
|
||
<path
|
||
d="M0.210526 12.8421L0.210525 11.1579L8.63158 11.1579L8.63158 12.8421L0.210526 12.8421Z"
|
||
fill="var(--color-link)" />
|
||
<path d="M11.1579 1.05263H12.8421V8.63158H11.1579V1.05263Z"
|
||
fill="var(--color-link)" />
|
||
<path d="M11.1579 15.3684H12.8421V23.3684H11.1579V15.3684Z"
|
||
fill="var(--color-link)" />
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_4_64">
|
||
<rect width="24" height="24" fill="white" />
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="navlink__el">
|
||
<a class="link" href="#partie2">
|
||
<span class="navlink__txt">Demande</span>
|
||
<svg class="navlink__icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M23 18.4146C22.5214 14.4023 20.7984 14.4023 17.7352 14.4023C14.6721 14.4023 12.63 14.4023 11.0346 14.4023C10.0108 15.138 9.40487 16.3457 10.556 17.2682M14.8635 18.4145C12.8059 18.2092 11.1986 17.7832 10.556 17.2682M22.0428 23L14.3849 22.4268L11.0345 21.8536L10.972 21.8411C9.13617 21.4747 7.44002 20.6003 6.07661 19.3174L1.46223 14.9755C0.504957 14.4022 0.98365 11.3931 3.37676 12.1096C5.29122 12.6828 10.1668 17.2682 10.556 17.2682"
|
||
stroke="var(--color-link)" stroke-linecap="round" />
|
||
<path
|
||
d="M13.6346 9.34349C13.2175 9.34349 12.8793 9.05454 12.8793 8.6981V7.94767C12.8793 7.203 13.5822 6.62909 14.4083 6.39157C14.7858 6.28303 15.1132 6.13681 15.3906 5.95291C16.0053 5.55402 16.3127 5.00554 16.3127 4.30748V4.07479C16.3127 3.5097 16.1034 3.06094 15.6849 2.72853C15.2663 2.38504 14.7039 2.2133 13.9976 2.2133C13.239 2.2133 12.6308 2.39612 12.173 2.76177C11.9234 2.96695 11.7192 3.20353 11.5602 3.4715C11.3549 3.81773 10.8943 4.03734 10.469 3.901C10.1014 3.78318 9.89546 3.44147 10.054 3.13463C10.1344 2.9791 10.226 2.82711 10.3287 2.67867C10.5641 2.34626 10.8519 2.05817 11.192 1.8144C11.5451 1.55956 11.9571 1.36011 12.428 1.21607C12.8989 1.07202 13.4417 1 14.0564 1C15.2729 1 16.2342 1.28255 16.9405 1.84765C17.6468 2.41274 18 3.17729 18 4.14127C18 4.67313 17.8888 5.13851 17.6665 5.5374C17.4572 5.92521 17.1825 6.25762 16.8424 6.53463C16.5024 6.81163 16.1165 7.03324 15.6849 7.19945C15.5602 7.24747 15.4354 7.29134 15.3107 7.33104C14.7918 7.4962 14.39 7.89264 14.39 8.36573V8.6981C14.39 9.05454 14.0518 9.34349 13.6346 9.34349ZM13.6444 13C13.2259 13 12.9185 12.9114 12.7223 12.7341C12.5392 12.5568 12.4476 12.3241 12.4476 12.036V11.8199C12.4476 11.5319 12.5392 11.2992 12.7223 11.1219C12.9185 10.9446 13.2259 10.856 13.6444 10.856C14.063 10.856 14.3638 10.9446 14.5469 11.1219C14.7431 11.2992 14.8412 11.5319 14.8412 11.8199V12.036C14.8412 12.3241 14.7431 12.5568 14.5469 12.7341C14.3638 12.9114 14.063 13 13.6444 13Z"
|
||
fill="var(--color-link)" />
|
||
</svg>
|
||
|
||
</a>
|
||
</li>
|
||
|
||
<li class="navlink__el">
|
||
<a class="link" href="#partie3">
|
||
<span class="navlink__txt">Entretien</span>
|
||
<svg class="navlink__icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<g clip-path="url(#clip0_4_64)">
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M8.00002 8.00376C7.91509 8.00126 7.82984 8 7.74429 8C3.18479 8 0 11.5765 0 15.9884C0.193011 18.9345 1.57579 20.4847 2.003 20.9637C2.06092 21.0286 2.10128 21.0739 2.11872 21.1002C2.16894 21.1761 1.84812 21.4511 1.44391 21.7977C0.671938 22.4595 -0.404189 23.3821 0.219179 23.6761C0.997316 24.0431 4.11598 24.0106 6.39386 23.9869C6.89629 23.9817 7.35781 23.9769 7.74429 23.9769C12.3038 23.9769 16 20.4003 16 15.9884C16 15.9833 16 15.9782 16 15.9731C15.6022 15.9614 15.2115 15.9224 14.8298 15.8581C14.8306 15.9015 14.831 15.9449 14.831 15.9884C14.831 19.7058 11.703 22.7993 7.74429 22.7993C7.33366 22.7993 6.8609 22.8043 6.35297 22.8096L6.35255 22.8096L6.3524 22.8096C5.477 22.8188 4.49716 22.8292 3.55079 22.817C3.03206 22.8103 2.5426 22.7969 2.10925 22.7736L2.1732 22.7189L2.17333 22.7188C2.28651 22.6219 2.40044 22.5245 2.52078 22.4181C2.64415 22.3091 2.79272 22.1741 2.91005 22.0424C2.96224 21.9839 3.06378 21.8655 3.14564 21.7087L3.14679 21.7065C3.18465 21.6342 3.49042 21.05 3.09135 20.447C3.02005 20.3393 2.9086 20.2163 2.87298 20.1771L2.86432 20.1675C2.80393 20.0997 2.73493 20.022 2.65571 19.926C2.49846 19.7355 2.29826 19.4697 2.09534 19.1208C1.6958 18.4339 1.27029 17.399 1.16904 15.9497C1.18732 12.1514 3.89699 9.17755 7.74429 9.17755C7.86096 9.17755 7.97691 9.18024 8.09208 9.18555C8.0322 8.79995 8.0008 8.40533 8.00002 8.00376ZM1.14019 23.7182C1.13182 23.7323 1.13465 23.7305 1.14252 23.7143L1.14019 23.7182Z"
|
||
fill="var(--color-link)" />
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M9.16895 7.98843C9.16895 11.7058 12.297 14.7993 16.2557 14.7993C16.6665 14.7993 17.1394 14.8043 17.6475 14.8096C18.5229 14.8188 19.5028 14.8292 20.4492 14.817C20.9679 14.8103 21.4574 14.7969 21.8907 14.7736C21.8694 14.7554 21.8481 14.7371 21.8268 14.7189C21.7136 14.622 21.5996 14.5245 21.4792 14.4181C21.3559 14.3091 21.2073 14.1741 21.09 14.0424C21.0378 13.9839 20.9362 13.8655 20.8544 13.7087L20.8532 13.7065C20.8153 13.6342 20.5096 13.05 20.9087 12.447C20.9799 12.3393 21.0914 12.2163 21.127 12.1771C21.1308 12.1729 21.1338 12.1696 21.1357 12.1675C21.1961 12.0997 21.2651 12.022 21.3443 11.926C21.5015 11.7355 21.7017 11.4697 21.9047 11.1208C22.3042 10.4339 22.7297 9.39899 22.831 7.94974C22.8127 4.15138 20.103 1.17755 16.2557 1.17755C12.297 1.17755 9.16895 4.27109 9.16895 7.98843ZM24 7.98843C23.807 10.9345 22.4242 12.4847 21.997 12.9637C21.9391 13.0286 21.8987 13.0739 21.8813 13.1002C21.8311 13.1761 22.1519 13.4511 22.5561 13.7977C23.3281 14.4595 24.4042 15.3821 23.7808 15.6761C23.0027 16.0431 19.884 16.0106 17.6061 15.9869C17.1037 15.9817 16.6422 15.9769 16.2557 15.9769C11.6962 15.9769 8 12.4003 8 7.98843C8 3.57654 11.6962 0 16.2557 0C20.8152 0 24 3.57654 24 7.98843ZM22.8598 15.7182C22.8682 15.7323 22.8653 15.7305 22.8575 15.7143C22.8583 15.7156 22.8591 15.7169 22.8598 15.7182Z"
|
||
fill="var(--color-link)" />
|
||
<path
|
||
d="M16.3622 9.15604C16.0145 9.15604 15.7327 8.9313 15.7327 8.65407V8.0704C15.7327 7.49121 16.3185 7.04484 17.0069 6.8601C17.3214 6.77568 17.5943 6.66196 17.8255 6.51892C18.3378 6.20867 18.5939 5.78208 18.5939 5.23914V5.05816C18.5939 4.61864 18.4195 4.26961 18.0707 4.01107C17.7219 3.74391 17.2532 3.61033 16.6646 3.61033C16.0324 3.61033 15.5256 3.75253 15.1441 4.03692C14.9362 4.19651 14.766 4.38051 14.6335 4.58894C14.4624 4.85823 14.0786 5.02903 13.7241 4.92299C13.4178 4.83135 13.2462 4.56558 13.3784 4.32693C13.4453 4.20595 13.5216 4.08774 13.6072 3.97229C13.8034 3.71375 14.0432 3.48968 14.3266 3.30008C14.6209 3.10187 14.9643 2.94674 15.3567 2.83471C15.7491 2.72267 16.2014 2.66666 16.7137 2.66666C17.7274 2.66666 18.5285 2.88642 19.1171 3.32594C19.7057 3.76546 20 4.3601 20 5.10987C20 5.52354 19.9073 5.88549 19.722 6.19574C19.5476 6.49737 19.3187 6.75591 19.0353 6.97137C18.752 7.18682 18.4304 7.35918 18.0707 7.48845C17.9668 7.5258 17.8628 7.55992 17.7589 7.5908C17.3265 7.71925 16.9916 8.0276 16.9916 8.39556V8.65407C16.9916 8.9313 16.7098 9.15604 16.3622 9.15604ZM16.3703 12C16.0215 12 15.7654 11.931 15.6019 11.7932C15.4493 11.6553 15.373 11.4743 15.373 11.2502V11.0822C15.373 10.8581 15.4493 10.6771 15.6019 10.5392C15.7654 10.4013 16.0215 10.3324 16.3703 10.3324C16.7191 10.3324 16.9698 10.4013 17.1224 10.5392C17.2859 10.6771 17.3677 10.8581 17.3677 11.0822V11.2502C17.3677 11.4743 17.2859 11.6553 17.1224 11.7932C16.9698 11.931 16.7191 12 16.3703 12Z"
|
||
fill="var(--color-link)" />
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M4 15.3333C4 14.9651 4.31236 14.6667 4.69767 14.6667H9.96899C10.3543 14.6667 10.6667 14.9651 10.6667 15.3333C10.6667 15.7015 10.3543 16 9.96899 16H4.69767C4.31236 16 4 15.7015 4 15.3333Z"
|
||
fill="var(--color-link)" />
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M4 18C4 17.6318 4.31236 17.3333 4.69767 17.3333H9.96899C10.3543 17.3333 10.6667 17.6318 10.6667 18C10.6667 18.3682 10.3543 18.6667 9.96899 18.6667H4.69767C4.31236 18.6667 4 18.3682 4 18Z"
|
||
fill="var(--color-link)" />
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_4_64">
|
||
<rect width="24" height="24" fill="white" />
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
<li class="navlink__el">
|
||
<a class="link" href="#partie3">
|
||
<span class="navlink__txt">Solutions</span>
|
||
<svg class="navlink__icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M12.4566 0.0401843C11.5308 -0.0407208 10.7633 0.0122601 10.3767 0.0956426C5.87389 1.06692 4.27383 4.51917 4.01063 7.49886C3.95546 8.12338 4.11447 9.26776 4.50183 10.4069C4.8884 11.5438 5.5354 12.7751 6.5315 13.4949C7.26183 14.0227 7.82262 14.6679 8.20181 15.2586C8.59212 15.8666 8.75559 16.362 8.76262 16.5855L8.77566 17H15.1592L15.221 16.6428C15.2613 16.4098 15.4416 15.9985 15.7217 15.5177C16.047 14.9594 16.5124 14.4917 17.0394 14.0041C17.1222 13.9275 17.2068 13.8501 17.2926 13.7717C17.7392 13.3636 18.2163 12.9275 18.6152 12.4306C19.943 10.7763 20.0623 8.85868 19.98 7.87877C19.9288 5.8916 19.401 4.3719 18.5922 3.22155C17.7827 2.06998 16.7096 1.31406 15.6113 0.827382C14.5155 0.34185 13.3897 0.121732 12.4566 0.0401843ZM17.8576 3.70098C18.5593 4.69913 19.0474 6.05794 19.0932 7.91164L19.0935 7.92433L19.0946 7.93697C19.1688 8.79491 19.0609 10.4778 17.9133 11.9076C17.5599 12.3478 17.141 12.7312 16.6948 13.1395C16.6058 13.2209 16.5157 13.3034 16.4248 13.3875C15.8918 13.8806 15.3423 14.4224 14.9479 15.0993C14.7429 15.4513 14.5564 15.8203 14.4426 16.1451H9.58303C9.47908 15.7511 9.25908 15.2803 8.95644 14.8089C8.52684 14.1396 7.89401 13.4109 7.06387 12.811C6.28537 12.2485 5.7115 11.2185 5.34503 10.1408C4.97936 9.0654 4.85316 8.04202 4.89473 7.57135C5.13856 4.81104 6.58067 1.79052 10.5706 0.929885C10.84 0.871767 11.5096 0.81583 12.3764 0.891583C13.2359 0.966693 14.2582 1.16881 15.2405 1.60407C16.2202 2.03819 17.155 2.70163 17.8576 3.70098Z"
|
||
fill="var(--color-link)" />
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M9.31343 16.7826H14.6866C15.0163 16.7826 15.2836 17.0746 15.2836 17.4348V17.5652C15.2836 17.9254 15.0163 18.2174 14.6866 18.2174H9.31343C8.98371 18.2174 8.71642 17.9254 8.71642 17.5652V17.4348C8.71642 17.0746 8.98371 16.7826 9.31343 16.7826ZM14.6866 16C15.412 16 16 16.6424 16 17.4348V17.5652C16 18.3576 15.412 19 14.6866 19H9.31343C8.58804 19 8 18.3576 8 17.5652V17.4348C8 16.6424 8.58804 16 9.31343 16H14.6866Z"
|
||
fill="var(--color-link)" />
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M9.55814 19.5714H14.4419V20.4286H9.55814V19.5714ZM15 19V21H9V19H15Z"
|
||
fill="var(--color-link)" />
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M14.8758 21C14.9566 21.2112 15 21.435 15 21.6667C15 22.9553 13.6569 24 12 24C10.3431 24 9 22.9553 9 21.6667C9 21.435 9.0434 21.2112 9.12423 21L14.8758 21ZM14.0612 21.7778L9.93875 21.7778C10.0134 22.5431 10.8522 23.2222 12 23.2222C13.1478 23.2222 13.9866 22.5431 14.0612 21.7778Z"
|
||
fill="var(--color-link)" />
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M8.12196 4.42771C8.05461 4.42771 8 4.4865 8 4.55902V7.46395C8 7.59948 8.20513 7.6718 8.3045 7.5886C8.36097 7.54133 8.42159 7.49953 8.48567 7.46395C8.56126 7.42198 8.64168 7.38866 8.72578 7.36522C8.72778 7.36466 8.72978 7.36411 8.73179 7.36357C8.82345 7.33858 8.91945 7.3253 9.01833 7.3253C9.66108 7.3253 10.1821 7.88629 10.1821 8.57831C10.1821 9.27033 9.66108 9.83133 9.01833 9.83133C8.91945 9.83133 8.82345 9.81805 8.73179 9.79306C8.72978 9.79252 8.72778 9.79196 8.72578 9.79141C8.64168 9.76796 8.56126 9.73465 8.48567 9.69268C8.42158 9.6571 8.36097 9.6153 8.3045 9.56803C8.20513 9.48483 8 9.55714 8 9.69268V12.5976C8 12.6701 8.05461 12.7289 8.12196 12.7289H10.8269C10.9249 12.7289 10.9852 12.849 10.9425 12.944C10.8952 13.0494 10.8562 13.1628 10.8269 13.2825C10.8084 13.3578 10.7938 13.4355 10.7834 13.5152C10.7833 13.5157 10.7832 13.5163 10.7831 13.5168C10.7706 13.6128 10.764 13.7118 10.764 13.8129C10.764 14.7144 11.2851 15 11.9278 15C12.5706 15 13.0916 14.7144 13.0916 13.8129C13.0916 13.7118 13.0851 13.6128 13.0725 13.5168C13.0725 13.5163 13.0724 13.5157 13.0723 13.5152C13.0618 13.4355 13.0472 13.3578 13.0288 13.2825C12.9995 13.1628 12.9605 13.0494 12.9132 12.944C12.8705 12.849 12.9308 12.7289 13.0288 12.7289H15.8076C15.8745 12.7289 15.9289 12.6709 15.9296 12.5988L15.9549 9.7112C15.956 9.5799 15.7716 9.50888 15.6735 9.58688C15.6161 9.63254 15.5547 9.67265 15.4899 9.70648C15.4077 9.74937 15.3201 9.78217 15.2285 9.80336C15.2264 9.80384 15.2243 9.80432 15.2222 9.80479C15.145 9.82218 15.0649 9.83133 14.9828 9.83133C14.3401 9.83133 13.819 9.27033 13.819 8.57831C13.819 7.88629 14.3401 7.3253 14.9828 7.3253C15.0725 7.3253 15.1598 7.33622 15.2437 7.3569C15.2458 7.35741 15.2478 7.35793 15.2499 7.35846C15.341 7.38149 15.428 7.41606 15.5095 7.46064C15.5737 7.49578 15.6344 7.53713 15.6911 7.58397C15.7878 7.66394 15.9734 7.59666 15.9745 7.46537L16 4.56026C16.0006 4.48726 15.9458 4.42771 15.878 4.42771H13.0124C12.9059 4.42771 12.8451 4.28532 12.8991 4.18651C12.9442 4.10403 12.9823 4.01548 13.0124 3.92208C13.041 3.83315 13.0624 3.73983 13.0757 3.64318C13.0759 3.64207 13.0761 3.64095 13.0762 3.63983C13.0864 3.56492 13.0916 3.48803 13.0916 3.40964C13.0916 2.63112 12.5706 2 11.9278 2C11.2851 2 10.764 2.63112 10.764 3.40964C10.764 3.48803 10.7693 3.56492 10.7795 3.63983C10.7796 3.64095 10.7798 3.64207 10.7799 3.64318C10.7932 3.73983 10.8147 3.83315 10.8433 3.92208C10.8734 4.01548 10.9115 4.10403 10.9566 4.18651C11.0106 4.28532 10.9498 4.42771 10.8433 4.42771H8.12196ZM15.2507 6.55772C15.1631 6.54435 15.0737 6.53742 14.9828 6.53742C13.9359 6.53742 13.0872 7.45116 13.0872 8.57831C13.0872 9.70547 13.9359 10.6192 14.9828 10.6192C15.0614 10.6192 15.139 10.614 15.2152 10.604L15.2035 11.941H13.0288C12.3079 11.941 12.0139 12.7517 12.2544 13.2871C12.3177 13.4279 12.3599 13.6081 12.3599 13.8129C12.3599 13.9579 12.3388 14.0388 12.3238 14.078C12.3105 14.1126 12.2984 14.1251 12.2895 14.1328C12.2631 14.1559 12.1668 14.2121 11.9278 14.2121C11.6888 14.2121 11.5926 14.1559 11.5661 14.1328C11.5573 14.1251 11.5451 14.1126 11.5319 14.078C11.5169 14.0388 11.4958 13.9579 11.4958 13.8129C11.4958 13.6081 11.538 13.4279 11.6012 13.2871C11.8418 12.7517 11.5477 11.941 10.8269 11.941H8.73179V10.5959C8.8253 10.6113 8.92101 10.6192 9.01833 10.6192C10.0652 10.6192 10.9139 9.70547 10.9139 8.57831C10.9139 7.45116 10.0652 6.53742 9.01833 6.53742C8.92101 6.53742 8.8253 6.54537 8.73179 6.56068V5.21559H10.8433C11.2324 5.21559 11.5 4.94939 11.6177 4.68991C11.7324 4.43696 11.7549 4.09382 11.5873 3.78707C11.5321 3.68595 11.4958 3.5569 11.4958 3.40964C11.4958 2.97645 11.7679 2.78788 11.9278 2.78788C12.0878 2.78788 12.3599 2.97645 12.3599 3.40964C12.3599 3.5569 12.3236 3.68595 12.2683 3.78707C12.1008 4.09382 12.1233 4.43696 12.238 4.68991C12.3557 4.94939 12.6233 5.21559 13.0124 5.21559H15.2624L15.2507 6.55772Z"
|
||
fill="var(--color-link)" />
|
||
</svg>
|
||
|
||
</a>
|
||
</li>
|
||
<li class="navlink__el">
|
||
<a class="link" href="#partie4">
|
||
<span class="navlink__txt">Croquis</span>
|
||
<svg class="navlink__icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<g clip-path="url(#clip0_4_64)">
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M19.9285 0.422336C20.5113 0.878588 21.9754 2.0934 23.2123 3.33787C23.8979 4.02767 24.0843 4.7289 23.9676 5.3458C23.8596 5.91617 23.5044 6.34904 23.2006 6.58812L20.9287 9.06455C20.9252 9.06832 20.9217 9.07202 20.9181 9.07565L9.06478 21.0019C9.02343 21.0435 8.97314 21.075 8.91779 21.094L0.505755 23.9794C0.368685 24.0264 0.216979 23.9915 0.113874 23.8892C0.0107699 23.7869 -0.0260373 23.6347 0.0187958 23.4962L2.69535 15.2247C2.71401 15.1671 2.74595 15.1147 2.78856 15.0718L14.8331 2.95315C14.8378 2.94838 14.8427 2.94374 14.8476 2.93923C15.4848 2.36231 16.9323 1.05345 17.6216 0.436977C18.0607 0.0441773 18.5515 -0.0414521 18.9738 0.0162949C19.38 0.0718514 19.7242 0.258524 19.9285 0.422336ZM18.8708 0.778721C18.6367 0.746701 18.3787 0.789311 18.1296 1.01206C17.5355 1.54343 16.3744 2.59249 15.6588 3.23994L20.6367 8.24843L22.661 6.04199C22.6767 6.02484 22.6939 6.00917 22.7125 5.99516C22.9125 5.84425 23.1494 5.55556 23.2163 5.20183C23.278 4.87617 23.2095 4.42325 22.6715 3.88195C21.4626 2.66558 20.0226 1.47079 19.4571 1.0282L19.4529 1.02496C19.3383 0.932717 19.1195 0.812733 18.8708 0.778721ZM20.107 8.80361L17.8756 6.55847L6.4769 18.0273L8.78525 20.195L20.107 8.80361ZM8.06691 20.573L3.23673 16.037L0.982649 23.0029L8.06691 20.573ZM3.60916 15.3343L5.91751 17.502L17.3348 6.0144L15.1034 3.76926L3.60916 15.3343Z"
|
||
fill="var(--color-link)" stroke="var(--color-link)" stroke-width="0.4"
|
||
stroke-linejoin="round" />
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_4_64">
|
||
<rect width="24" height="24" fill="white" />
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
|
||
</a>
|
||
</li>
|
||
<li class="navlink__el">
|
||
<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>
|
||
</li>
|
||
</ul>
|
||
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</header>
|
||
<main class="main">
|
||
<div class="headback">
|
||
<span class="bg"></span>
|
||
<div class="fond">
|
||
<h1 class="title title--head"><span class="RevealUX">R</span>ethinking<span class="RevealUX"> U</span>ser E<span class="RevealUX">x</span>perience</span></h1>
|
||
</div>
|
||
</div>
|
||
<section class="grid" id="partie1">
|
||
<div class="strip strip--1"></div>
|
||
<h2 class="title mgrid-start01 mgrid-end08 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07">
|
||
Scope
|
||
</h2>
|
||
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05">
|
||
L’atelier RUX
|
||
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">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">
|
||
Repenser notre cours de récré
|
||
</p>
|
||
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end05">Notre
|
||
budget est limité à
|
||
200k€
|
||
+- </p>
|
||
<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="partie2">
|
||
<h2 class="title mgrid-start01 mgrid-end07 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07">Demande
|
||
</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>
|
||
<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">
|
||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07">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" id="partie3">
|
||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07">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="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="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" id="partie5">
|
||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07">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, quel espace nous intéressait le plus parmis celle qu'on aurait voté.</p>
|
||
<h3>On avait droit à 3 votes maximum.😇</h3>
|
||
<canvas id="myChart"></canvas>
|
||
</section>
|
||
<section class="grid section section--besoin" id="partie6">
|
||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07">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>
|
||
<div class="besoins">
|
||
<p class="besoins__el">Créer plus d’espaces pour se restaurer</p>
|
||
<p class="besoins__el besoins__el--white">Créer un espace pour travailler</p>
|
||
<p class="besoins__el besoins__el--dark">Aménager un espace vert</p>
|
||
<p class="besoins__el">Créer des espaces pour se détendre</p>
|
||
<p class="besoins__el besoins__el--white">Lieux pour sociabiliser se rencontrer</p>
|
||
<p class="besoins__el besoins__el--dark">Créer un espace pour des activités sportives</p>
|
||
<p class="besoins__el">Créer un espace pour s'amuser</p>
|
||
<p class="besoins__el besoins__el--white">Rendre l’espace vivant / agréable </p>
|
||
<p class="besoins__el besoins__el--dark">Création d’aménagement accessible pour personne à mobilités
|
||
réduites</p>
|
||
<p class="besoins__el">Créer un espace artistique</p>
|
||
<p class="besoins__el besoins__el--white">Créer un espace d’information</p>
|
||
<p class="besoins__el besoins__el--dark">Créer un espace couvert </p>
|
||
</div>
|
||
</section>
|
||
<section class="grid" id="partie4">
|
||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07">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" id="partie8">
|
||
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07">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">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>
|
||
</main>
|
||
</body>
|
||
|
||
</html> |