3. Bouwen

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:

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.

Verschil in:
- Typografie
- Kleurgebruik
- Headers

Mobile first

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

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:

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.

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.

L (1024px)

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

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.

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?

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.

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

<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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly