Iteratie 2 - Einanas/S12-proof-of-concept GitHub Wiki

funda-logo.zip

Om een betere beeld te krijgen over waar ik naar toe wil werken heb ik besloten om mijn schetsen te verbeteren dan wat ik de vorige iteratie had zodat ik een betere oplossingsrichting heb.

Ik heb wat aanpassingen gedaan en wat nieuwe schetstechnieken toegepast en nu is het wat beter en duidelijker voor mijzelf wat ik wil gaan doen en hoe ik het kan doen:

Ik heb twee schetsen gemaakt. De eerste is normaal en de tweede is voor de dropdown menu. Dit is de eerste breakdown schets. Ik heb het verdeeld in 2 delen:

• De eerste is met alles en heb voor elke stuk html code geschreven die erbij horen;
• De tweede is een wat simpele schets zodat ik voor mezelf duidelijk kan zien hoe ik het design kan indelen; Dit is de tweede breakdown schets, de dropdown menu. Ik heb er een breakdown schets van gemaakt en een wireflow zodat je kan zien wat er gebeurt als je op het menu knop drukt:

Ik heb een wireframe gemaakt zodat je kan zien wat er gebeurt als je een lijst wilt maken:

Ik heb 2 Ui States gemaakt:

1. Deze UI state gaat om dat je wilt drukken op het creëren van een lijst:
2. Bij deze UI State gaat het om dat je jouw lijst een naam wilt geven en vervolgens de optie krijgt om huizen te selecteren of om gewoon verder te gaan:

Ook heb ik een UML diagram gemaakt voor de pagina's.

Ik heb mijn website in drie delen gebouwd zoals je kon zien bij mijn breakdown schets.

• De eerste in een header. Ik heb eerst alleen de html code toegepast, ik moet nog alleen de css goed toepassen om de dropdown effect te creëren voor mobile first en dat wil ik bij de volgende iteratie doen. De Daaronder is het site opgedeeld in 2 secties:

• De eerste sectie is met knopjes voor je lijsten.

• De tweede sectie is waar je kan zien welke huizen er in je gemaakte lijst is.

Zoals je kan zien bij mijn schetsen wil ik eerst mobile first werken. Ik begon eerst met het overschrijven van code van mijn breakdown schets:

<section class="sectie1">
  <h1>lijsten</h1>
  <button class="listbutton">
    <img src="" alt="" class="lijst-foto">
    <p>Lorem, ipsum dolor sit</p>
  </button>
  <button class="listbutton">
    <img src="" alt="">
    <p>Lorem, ipsum dolor sit</p>
  </button>
  <button class="listbutton">
    <img src="" alt="">
    <p>Lorem, ipsum dolor sit</p>
  </button>
  <form method="post" class="createname">
    <button>
      <svg class="plus" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 
        width="30" height="auto" viewBox="0 0 256 256" 
        xml:space="preserve"></svg> 
      <p class="button-lijst">Maak een lijst</p>
    </button>
  </form>
  <form method="post" class="inputlist">
    <label class="createlist">
      <p>Geef je lijst een naam</p>
      <input type="text" name="listname" placeholder="Lijst naam">
      <button class="create">Maak aan</button>
      <button class="cancel">annuleren</button>
    </label>
  </form>
  <div class="succes">
    <p>U heeft "..." aangemaakt.</p>
    <p>Wilt u huizen toevoegen? 
      <a href="#">Ja</a> <!-- redirect to home page -->
      <a href="#">Nee</a>
    </p>
  </div>
</section>

<section class="sectie2">
  <% houses.forEach(house => { %>
  <div class="container">
    <picture class="img">
      <source srcset="https://fdnd-agency.directus.app/assets/<%= house.poster_image %>?format=avif" type="image/avif">
      <source srcset="https://fdnd-agency.directus.app/assets/<%= house.poster_image %>?format=webp" type="image/webp">
      <img src="https://fdnd-agency.directus.app/assets/<%= house.poster_image %>" loading="lazy" height="200" width="250">
    </picture>      
    <ul class="detail-info">
      <ol><p>Straat:</p><%= house.street %></ol>
      <ol><p>Huisnummer:</p><%= house.house_nr %></ol>  
      <ol><p>Kamers:</p><%= house.rooms %></ol>
      <ol><p>Makelaar:</p><%= house.agent %></ol>
      <ol><p>Prijs:</p><%= house.price %></ol>
    </ul>
  </div>
<%  }) %>
</section>

Vervolgens wilde ik verder werken met css met layout, kleur en vorm.

De kleur:

:root {
  /* 5 Primaire kleuren */
  --primary-white: #ffffff;
  --primary-weborange: #f7a100;
  --primary-regentblue: #e6f2f7;
  --primary-lochmara: #0071b3;
  --primary-mineshaft: #333333;  
  /* 10 Secundaire kleuren */
  --secundary-darkerorange: #de9000;
  --secundary-casablanca: #f8b73e;
  --secundary-saffronmango: #f8c463;
  --secundary-cedar: #53241b;
  --secundary-bahamablue: #006199;
  --secundary-curiousblue: #2c81b3;
  --secundary-steelblue: #478bb3;
  --secundary-malibu: #60c5f8;
  --secundary-silvertree: #66ba96;
  --secundary-petiteorchid: #e09199;
  /* 5 Grijstinten */
  --grijstint-gallery: #ededed;
  --grijstint-silver: #cccccc;
  --grijstint-silverchalice: #999999;
  --grijstint-dovegray: #666666;
  --grijstint-mineshaft: #333333;
}

Het werken aan de layout heeft mij even geduurd maar het ging eindelijk de goede kant op. Alleen de POST was een lastig ding om mee te werken.

Ik heb een lighthouse test gemaakt. FCP, LCP, CLS, SI zijn goed. Alleen TBT moet beter. Voor de TBT is het dit het geval: