RUX/index.html

288 lines
No EOL
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<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/iolce/assets/images/logo_dark.svg">
<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>
</head>
<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>
<button class="js-theme-trigger">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
<path
d="M13 9h9l-14 15 3-9h-9l14-15-3 9zm-8.699 5h8.086l-1.987 5.963 9.299-9.963h-8.086l1.987-5.963-9.299 9.963z" />
</svg></button>
<div class="header__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">
<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>
<div class="header__navigation">
<nav>
<ul class="list--header">
<li>
<a class="link link--header link--active" href="#partie0">Partie //01</a>
</li>
<li>
<a class="link link--header" href="#partie1">Partie //02</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="header__navigation--m">
<ul class="list__m--header">
<li>
<a class="link mlink--header mlink--active" href="#partie0">Partie //01</a>
</li>
<li>
<a class="link mlink--header" href="#partie1">Partie //02</a>
</li>
</ul>
</div>
<section class="headback">
<div class="fond">
<img class="headtitle" src="/assets/images/headlogo.png"></img>
</div>
<!--<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.awesome-layouts</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>-->
</section>
<section class="grid">
<div class="strip strip--1"></div>
<h1 class=" title mgrid-start01 mgrid-end04" id="partie0">Phase 0 : Synopsis</h1>
<p class="mgrid-start01 mgrid-end04 partie1_blackfill">Latelier RUX <strong>(rethinking UX)</strong> est de
réaliser une interface adaptée et
compréhensible pour
lutilisateur, pour une
navigation facile et rapide”</p>
<div class="strip strip--2"></div>
<p class="mgrid-start02 mgrid-end05 partie1_blackfill">Le directeur de la Haute école Albert Jacqard nous à
donner une mission ! </p>
<div class="strip strip--3"></div>
<p class="mgrid-start01 mgrid-end04 partie1_blackfill">Repenser notre cours de récré</p>
<figure class="img__content">
<img class="image_undertxt" src="assets/images/plancour.png" srcset="assets/images/plancour@2x.png 2x"
alt="plan de la cour de la Haute École Albert Jacquard" loading="lazy" decoding="async">
<figcaption class="figcaption">schéma illustré de la cour</figcaption>
</figure>
<div class="strip strip--cash"></div>
<p class="mgrid-start01 mgrid-end04 partie1_blackfill">Notre budget est limité à 200k€ +-</p>
<figure class="img__content">
<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">
<figcaption class="figcaption">Photo prise de la cour "plan large"</figcaption>
</figure>
</section>
<p class="grid__discu">
<h2 class="title mgrid-start01 mgrid-end04" id="partie1">Création de l'Équipe</h2>
<div class="mgrid-start01 mgrid-end04">
<ul class="discu__liste">
<li class="discu__el discu__el--pink">— On choisit quel nom pour la Team ?</li>
<li class="discu__el discu__el--blue">— Les Rases moquettes en référence au fait quon va réajuster la cour
!</li>
<li class="discu__el discu__el--green">— Hahahahaha, allez !
</li>
<li class="discu__el">On se met au boulot !</li>
</ul>
</div>
<div class="grid grid--content">
<p class="mgrid-start01 mgrid-end04">Pour bien commencer nimporte quel projet il faut avant tout … un client ! Le client nous a demandé de
concevoir et repenser lagencement de la cour de lécole, cependant il nous a donné des contraintes et a
répondu à certaines de nos questions.</p>
<p class="mgrid-start02 mgrid-end04">Et cest à ce moment précis que lon a mis la première vitesse. Notre tout nouvel atelier consistait à
repenser lusage de la cour en proposant des moyens dagencement. Pour réaliser cela, on a eu recours à
notre stratégie dapprentissage ! </p>
<p class="mgrid-start01 mgrid-end04 content__objet">
La fusion d'un <mark>travail collaboratif</mark>, des travaux de recherches qui nous permettent daller découvrir le monde
extérieur et <mark>nos utilisateurs</mark> et le travail pratique, ainsi que la partie individuelle pour mettre en œuvre notre
site web, <mark>mon site web~</mark>, qui représente le fruit de notre travail. On réalisera alors notre étude de cas ! Ou notre <mark>Case-study</mark> pour
faire plus élégant.</p>
</div>
</section>
<aside class="grid reseaux">
<h2>Retrouvez-moi sur :</h2>
<ul class="reseaux__liste">
<li class="reseaux__el">
<a href="https://www.behance.net/pinavetran661a">
<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">
<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://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">
<a href="https://www.instagram.com/pina.p_f/">
<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/">
<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">
<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">
<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">
<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>
</main>
<footer>
<div>
<nav>
<ul class="list--footer">
<li class="link link--footer"><a href="http://dwm.re/"><img class="DWT" src="assets/images/dwt.svg"
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>
<small class="footer__date link link--footer"><a class="copy" href="https://pinavetrano.be/">Pina
Vetrano</a> © <span class="date"></span></small>
</nav>
</div>
</footer>
</body>
</html>