Skip to content

3. Bouwen

Jump to bottom
SamaraFellaDina edited this page Jan 26, 2024 · 23 revisions

Welke pagina ga je redesignen?

Voor Enrise moet er dus een pagina opniew moeten ontworpen die goed bij de huisstijl past van het bedrijf. Ik heb voor deze opdracht het onderstaande voorbeeld genomen:

image

Link naar het voorbeeld

Wat valt je op aan de huidige pagina?

  • Het past niet zo goed bij de huisstijl van Enrise
    • Hieronder zie je de twee websites naast elkaar. De "whitepaper download page" die ik opnieuw ga vormgeven staat links. De originele site van Enrise staat rechts.

image

  • Verschil in:
    • Typografie
    • Kleurgebruik
    • Headers

Mobile first

Tijdens het bouwen van een ontwerp kan je verschillende manieren gebruiken om een ontwerp goed te organiseren.

  1. Zet de pagina op met de HTML elementen en echte content
  2. Style eerst een one-colomn-layout in de huisstijl
  3. Gerbuik een media-query voor een breakpoint, stijl de layout en zorg voor een vloeiende overgang.
  4. Daarna enchancen.

Zet de pagina op met de HTML elementen en echte content

Allereerst de HTML ingericht en dit geinspireerd vanuit de schets mee. Daarmee is er gekeken naar hoe ik de vormgeving precies moest opstellen.

Waardoor het ontwerp er eerst zo uit zag:

image

Style eerst een one-colomn-layout in de huisstijl

Wat is belangrijk om in te voegen voor het maken van de huisstijl?

  • Kleuren importeren
    • Deze in de root plaatsen.
  • Eventuele andere content plaatsen
    • foto's
    • fonts
    • logo's
    • iconen

Importeren van de fonts

root goed invoegen

Ik had gekeken naar het voorbeeld van FDND, deze zag er als volgt uit:

   --white: #fff;
   --blueberry: #050542;
   --turquoise: #66e5bf;
   --lavender: #a675f5;
   --attention: #050542;
   --attention-background: #05054233;
   --call-to-action: #fffc86;
   --rounded: .4rem;
   --pilled: 1.4rem;
   --shadow: .3rem;
   --border: .15rem;

Ikzelf had de kleuren van Enrise in de :root geimplenmenteert van het project

    --primairy-yellow: #F2A900;
    --primairy-light-yellow:#FDF2D9;
    --primairy-black: #000;

    --gray-light: #C8C9C7;
    --gray-regular:#75787B;
    --gray-dark:#53565A;

@Font-face invoegen

Natuurlijk is het belangrijk om de juiste fonts in te voegen. Het valt me verder op de Enrise in hun eigen site een ander gedrag heeft bij het gebrui van typografie wanneer je die vergelijking ziet, daarom wil ik dat in dit ontwerp meenemen.

@font-face {
    font-family: "DM Sans";
    src: 
    url('/assets/fonts/DMSans/DMSans_24pt-Regular.ttf')format('truetype');
}

@font-face {
    font-family: "Crimson text";
    src: 
    url('/assets/fonts/CrimsonText/CrimsonText-Regular.ttf')format('truetype');
}

Form invoegen

Ik heb ook een form ingevoegd, aangezien je straks alle de essentiele info moet kunnen invoegen.

        <section class="download-form">
            <div>
                <h2>Download de longread</h2>

                 <form>
                    <ul>
                        <li>
                            <label for="email">E-mail
                                <input type="email">
                            </label>
                            <br>
                        </li>
                        
                        <li>
                            <label for="pnumber">Telefoonnummer
                                <input type="number">
                            </label>
                            <br>
                        </li>

                        <li>
                            <label for="work-function">Wat is je functie?
                                <input type="text">
                            </label>    
                            <br>
                        </li>
                    </ul>
                </form>
                <div>
                    <button>Download longread</button>
                    <button class="privacy">Privacybeleid</button>
                </div> 
            </div>
        </section>

Ontwerp

Uiteindelijk heb ik de gehele pagina opgemaakt.

image

Hoe heb je het grid opgemaakt?

Ik heb gemaakt van flex-box en daardoor de opmaak gemaakt.

main {
    display: flex;
    flex-direction: column;
    align-items: center;  
    flex-wrap: nowrap;
    gap: 2em;

}

Gerbuik een media-query voor een breakpoint

Nu is het belangrijk om een @media-query in te voegen aan de code. Ik heb uiteindelijk twee media-queryingevoegd.

M (800px)

@media (min-width: 800px )  {


    .heading-content {
        background: var(--primary-light-yellow);
        display: flex;
        flex-direction: row;
        margin: 0 auto;
        align-items: center; 
        padding: 0;   
        width: 100%;

    }

    .heading-content div:nth-child(1){
        margin: 0;
        margin-left: auto;
    }

    .heading-content div:nth-child(2) {
        margin: 0;
        margin-right: auto;
    }

    .heading-content img {
        display: block;
    }

    .download-form .form-privacy  {
        text-align: right;
        width: fit-content;
        font-size: .8em;
    }

    .download-form-complete button {
    display: flex;
    padding: .5em;
    flex-direction: row;
    justify-content: flex-start;
    width: fit-content;
    }

}

Wat gebeurd hier?

  • Ik heb vanaf deze grootte er voor gezorgd dat de mockup verschijnt van de whitepaper. Op mobiel kan deze namelijk te prikkelig zijn, waardoor hij bij grotere schermen als sfeer kan dienen.
  • Dit zorgt ervoor dat deze naast de heading moet staan. Hiervoor heb ik in de media-query toegepast dat ze naar elkaar toe rijken, omdat anders wanneer je de pagina breeder maakt hij anders verder van elkaar af zou staan.

image

L (1024px)

  • Vanaf een groter scherm gaat de <form> en de informatieve content naast elkaar staan om zo een duidelijker overzicht te krijgen

image

Enhancen

XS

Tijdens het checken van responsiveness, zag ik dat de teksten uiteindelijk te groot werden voor het scherm. Waardoor ik een extra media-query heb toegepast.

  @media (max-width: 350px) {
  
    body,
    input,
    button {
      font-size: 10px; /* Adjust the percentage for smaller screens */
    }
  }

Voor schermen die nog kleiner zijn, wordt ervoor gezorgdt dat de tekst uiteindelijk mee schaalt.

image

Formulier

Ik had in mijn eerste versie van de website een formulier gemaakt, alleen had ik deze niet goed opgebouwd. Deze heb ik dus later gewijzigd, met daarnaast de css aan te passen, zodat het goed gelinked blijft.

Hoe zag de code eruit?

 <form>
                    <ul>
                        <li>
                            <label for="email">E-mail
                                <input type="email">
                            </label>
                            <br>
                        </li>
                        
                        <li>
                            <label for="pnumber">Telefoonnummer
                                <input type="number">
                            </label>
                            <br>
                        </li>
Waarom is dit niet goed opgebouwd?

Het kan ervoor zorgen dat er in andere browsers de stijl niet goed aanbrengt. Ook hoef je deze elementen niet apart te selecteren

Wat heb je anders gedaan in de nieuwe code.

                    <form>
                            <label for="email">
                                <input type="email" id="email" name="ename" placeholder="E-mail*" required>
                            </label>

                            <label for="phone">
                                <input type="tel" id="phone" name="phone" placeholder="Telefoonnummer">
                            </label>

                            <label for="work-function">
                                <input type="text" id="work-function" name="wname" placeholder="Wat is je functie?">
                            </label>    
                            
                            <button class="form-finish">Download handboek</button>
                    </form>

Ik heb bij alle code de <ul> en <li> elementen verwijderd. Zo blijft het beter gestructueerd en zit er geen overbodige code in.

Interactie

Bij 2. Ontwerpen heb ik gekeken naar het schetsen en realiseren van een interactie. Maar hoe ga ik deze maken in mijn code?

image

De code bestaat eigenlijk uit verschillende stappen. Je wilt de overlay die over het formulier heenkomt eerst laten verschijnen, maar hij kan nog niet meteen zichtbaar zijn, dus hij moet een opacity: 0; hebben. Waarom eigenlijk? Omdat er ook nog een animatie plaatsvind om organisch en proffesioneel over te komen. De stappen zijn eigenlijk als volgende.

  1. De bevestiging heeft een display: none;
  2. Wanneer op de knop wordt gedrukt, veranderd de class naar block i.p.v none.
  3. waarna een animatie afspeelt waar de opacity van 0 naar 1 gaat.
  4. Zorgen dat de animatie blijft staan, nadat de animatie/transition is afgespeeld.
  5. eventueel corrigeren gebasseerd op feedback

1. De bevestiging heeft een display: none; 

<div class="download-form-complete">
                <article>
                    <h2>Bedankt!</h2>
                    <p>Je ontvangt de keuzegids in de mail. Niks ontvangen?<br> <a href="chrome-extension://efaidnbmnnnibpcajpcglclefindmkaj/https://19526340.fs1.hubspotusercontent-na1.net/hubfs/19526340/Whitepapers%20en%20Downloads/E-commerce%20Platform%20Keuzegids%202023%20-%20Enrise.pdf">Download hier de keuzegids</a></p>
                </article>
            </div>

Ik had deze html ingevoegd onder het <form>, dit wordt namelijk de overlay die bevestigd dat alles is verstuurd.

.download-form .download-form-complete {
    background: var(--primary-yellow);
    position: absolute;
    z-index: 2;
    display: none;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
}

Hier zie je dan ook dat ik een display: none heb toegepast, omdat hij in de eerste stap helemaal niet mag bestaan.

2. Wanneer op de knop wordt gedrukt, veranderd de class naar block 

var buttonFinishForm = document.querySelector(".form-finish");
var DownloadFormInput = document.querySelector(".download-form-input")
var DownloadFormComplete = document.querySelector(".download-form .download-form-complete")

buttonFinishForm.addEventListener("click", function(e) {
    console.log("clicked!!");
    DownloadFormComplete.classList.add("download-form-complete-in");
    DownloadFormComplete.classList.add("download-form-complete-add");
});


DownloadFormComplete.addEventListener("animationend", function() {
    // This function will be called when the animation is complete
    console.log("Animation complete!");
    DownloadFormComplete.classList.add("download-form-complete-show");
})

Hiervoor heb ik in javascript een aantal commands voor gemaakt om zo de juiste classes toe te voegen.

  1. Eerst heb ik geselecteerd
var buttonFinishForm = document.querySelector(".form-finish");
var DownloadFormInput = document.querySelector(".download-form-input")
var DownloadFormComplete = document.querySelector(".download-form .download-form-complete")
  1. Waarna ik een `EventListener heb ingevoegd.
buttonFinishForm.addEventListener("click", function(e) {
  1. Met tot slot een ClassList invoegen om zo de classes te bepalen
DownloadFormComplete.classList.add("download-form-complete-in");

3. waarna een animatie afspeelt waar de opacity van 0 naar 1 gaat.

  1. Dit is de eerste staat
.download-form .download-form-complete-add {
    display: inherit;
    opacity: 0;
}
  1. Waarna de class verschijnt
.download-form .download-form-complete-in {
    animation-name: fade-in;
    animation-duration: 1s;
    animation-delay: .3s;
}

@keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}    
}

4. Zorgen dat de animatie blijft staan, nadat de animatie/transition is afgespeeld.

Hij moet nadat de @keyframes zijn geweest wel blijven staan, waardoor ik deze class heb ingevoegd.

.download-form .download-form-complete-show {
    display: inherit;
    opacity: 1;
}

image

5. Feedback

Ik kreeg al snel feedback van een docent, waar wordt verteld dat ik gebruik maak van @keyframes terwijl ik beter gebruik had kunnen maken van transitions. Dit heb ik behandeld in een issue. Hierin bekijk ik eigenlijk anders moet doen en vertel ik ook eerst dat ik niet begrijp waarom het niet werkt.

image

Waarna ik al snel de connectie maakte dat ik transitionend meost gebruiken i.p.v `animationend. Waarna de code het wel deed.

image

Ik heb in de issue ook mijn commit geplaatst, waar je alle wijzigingen kan vinden.

  • Ik heb de @keyframes kunnen weghalen en kunnen vervangen door transition 
.download-form .download-form-complete-in {
    transition-duration: 1s;
    transition-delay: .3s;
    opacity: 1;
}
Clone this wiki locally