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.

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:

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

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>