Sprint 02🛠 - JuulVrasdonk/ilojo-bar GitHub Wiki

Op Maandag besloten we dat we eerst in Figma een ontwerp zouden maken. We hebben een besluit genomen omdat wij dit zelf fijner vinden werken. Maar ook om op Vrijdag al echt ons concept aan Femke te kunnen tonen. We hebben namelijk best wel wat goede ideeën, maar het is nog maar de vraag of Femke dat ook zo vindt.

We begonnen eerst maar eens met het bepalen van grote bepaalde elementen voor de look-feel van de site. Hierin begonnen we te kijken naar verschillende fonts.

Uiteindelijk kozen we uit deze fonts, het Roxborough CF font, in combinatie met Helvetica Neue. Dit voegde samen om een soort krantenkoppen effect te creëren.

Hiervoor hebben Daan en ik echter wel het een en ander geïtereerd.

Op Woensdag hebben we ons design helemaal afgemaakt in Figma. In de schetsen van vorige week wilde we al het journalistieke werk van Femke door laten schemeren. Dat wilde we ook laten zien in het uiteindelijke werk. Daan kwam op het idee om een soort papier-effect door de pagina heen te laten lopen. De verhalen worden van elkaar onderscheidden door verschillende kleuren papier en de papier scheuren op de achtergrond. Sommige afbeeldingen zijn voorzien van soort polaroid achtige border.

We hebben best wel wat tijd besteed in Figma. Misschien iets te veel. Ik vind het zelf echter wel belangrijk dat de beleving er goed uit ziet. Ik kan een betere beleving ontwerpen in Figma omdat ik moeite heb met het echt kloppend maken van een concept in code. Ik zie dit dus puur als investering in een beter eindproduct.

Bekijk ons design onderaan de pagina

Op Donderdag hebben Daan en ik ons design uitgeprint om vervolgens breakdown-schetsen te maken.

Dit deden we zodat we makkelijk de html konden uittypen. We besloten de verschillende verhalen allemaal een eigen component te geven. Ook besloten we eerst de data 'hard' in de html te zetten. Om dan later Prismic te koppelen en de content dan uit de CMS te halen.

Zo ziet een component er dan bijvoorbeeld uit:

import dummy from '../../../assets/ilojo-bar.jpg'

 export default function Returnees() {
   return (
     <section>
         {/*Paper rip for end of section*/}
         <Image
             src={dummy}
             alt="Picture of the author"
             width="350px"
             height="300px"
         />
         <h4>19th century</h4>
         <h2>The returnees <span>from Brazil who</span> changed Lagos</h2>
         <ul>
             <li> 
                 <Image
                     src={dummy}
                     alt="Picture of the author"
                     width="350px"
                     height="300px"
                 />
             </li>
             <li> 
                 <Image
                     src={dummy}
                     alt="Picture of the author"
                     width="350px"
                     height="300px"
                 />
             </li>
             <li> 
                 <Image
                     src={dummy}
                     alt="Picture of the author"
                     width="350px"
                     height="300px"
                 />
             </li>
         </ul>
         <p> 
             Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
             Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, 
             when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
             It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
             It was popularised in the 1960s with.
         </p>
         {/*Paper rip for end of section*/}
         <Image
             src={dummy}
             alt="Picture of the author"
             width="350px"
             height="300px"
         />
     </section>
   );
 }

Ik ben vandaag vooral bezig geweest met de globale styling. Ik heb me dus bezig gehouden met dingen als fonts inladen, padding meegeven en de achtergrondkleur van de verschillende sections. Dit was niet hele grote klus. Daarna besloot ik me bezig te houden met het organiseren van de vele foto's. Dit had Daan Donderdag al gedaan, maar hij had de foto's geëxporteerd vanuit Figma waardoor de kwaliteit achteruit was gegaan. Ik besloot deze mindere foto's te vervangen voor de originele. Dit was nog best een grote klus, gezien de hoeveelheid foto's.

Ook lieten we Vrijdag voor het eerst ons concept aan Femke zien. Ze was heel enthousiast over onze benadering. Ze vond het persoonlijk een goed idee om bij de sloop te beginnen en van daar terug te gaan in de tijd. Maar ze dacht wel dat het gevoelig kon liggen bij het publiek. Daarom hebben Daan en ik er toch voor gezorgd dat we de volgorde aanhouden die Femke ook in het tijdschrift hanteert.