FvD

Procesverslag

Auteur: Bryan Ortiz Franco

De opdrachten: opdracht 1 en opdracht 2

Bronnenlijst

  1. Behance Logo
  2. Message Appearance inspiration
  3. Variable fonts
  4. Variable fonts guide
  5. JokeAPI
  6. SortableJS
  7. Inspiration: Akinator
  8. Grid Lay-out Generator
  9. Fontsquirrel

Opdracht 1 plan

uitwerken na schetsen idee (voor week 2) ### Gekozen storyboard: Behance Logo gekozen storyboard voor opdracht 1 ### Alternative storyboard: Adobe Logo alternative storyboard voor opdracht 1 ### Alternative storyboard: Miro Logo alternative storyboard voor opdracht 1 ### Je ambitie: Aan deze technieken/punten wil ik werken: - Aan mijn CSS animatie skills omdat ik er weinig ervaring mee heb - Om te leren variables fonts te gebruiken in animaties

Opdracht 1 reflectie

uitwerken bij afronden opdracht (voor week 4) ### Je uitkomst - karakteristiek screenshot(s): uitkomst opdracht 1 - deel 1 uitkomst opdracht 1 - deel 2 uitkomst opdracht 1 - deel 3 ### Dit ging goed/Heb ik geleerd: Het variabele lettertype werkt goed tijdens de transacties van de verschillende versies van het logo, ook de animatie loopt goed door en het was meteen heel responsive. ### Dit was lastig/Is niet gelukt: - Het originele logo heeft een streep op de "e" en ik kon het niet toepassen. - Ik heb niet alle logo's kunnen toepassen, maar ben van plan dat in de toekomst te doen voor mijn eigen portfolio. bummer bummer

Opdracht 2 plan

uitwerken na schetsen idee (voor week 5) ### Je ontwerp: ontwerp opdracht 2 ### Web/Mobile Lay-out schetsen: mobile lay-out schets - 1 mobile lay-out schets - 2 web lay-out schets ### Je ambitie: Aan deze technieken/punten wil ik werken: - Aan mijn CSS animatie skills verbeteren - Werken met API omdat ik niet veel mee gewerkt heb - Om een interactive project te maken

Opdracht 2 test

uitwerken na testen (week 7) ### Bevinding 1: Ik probeerde Benders mond te animeren en was van plan het te implementeren met de funties die ik had, maar dat is niet gelukt. bender mondanimatie voorbeeld 1 bender mondanimatie voorbeeld 2 bender mondanimatie voorbeeld 3 #### oplossing: Dus heb ik het uiteindelijk niet gebruikt omdat het niet goed geplaatst kon worden. Ik heb Benders hoofd een wiebeleffect gegeven om het toch levendigheid te geven. bender mondanimatie uitkomst ### Bevinding 2: Ik had mijn pagina layout aan het begin gepositioneerd met postion: absolute, maar dat was een slordige manier omdat te doen. oude pagina layout #### oplossing: Na wat trial and error en advies van mijn docent kreeg ik het werkend. Ik heb de [Grid Layout Generator] (https://grid.layoutit.com/) gebruikt om dit gemakkelijk en snel te doen. nieuwe grid pagina layout nieuwe pagina layout ### Bevinding 3: Ik werk sinds kort met Grids, dus ik was blij dat mijn weblayout werkte toen ik hem ging testen. Helaas kwam ik er al snel achter dat het niet responsief was. gebroken responsiveness voor mobile #### oplossing: Nadat ik de hele dag had geprobeerd het probleem op te lossen, vroeg ik uiteindelijk mijn docent voor hulp om het probleem op te lossen. gebruikte code om het probleem te kunnen oplossen werkende responsiveness voor mobile ### Bevinding 4: Ik ben niet de beste met het kiezen van kleuren voor webpagina's. Heel lang heb ik deze lelijke kleuren gebruikt om elementen te scheiden. lelijke pagina kleuren #### oplossing: Met de hulp van mijn klasgenoot realiseerde ik me laat dat ik gewoon de huiskleuren van de show Futurama kon gebruiken om het bijpassende kleuren aan mijn project te geven. futurama kleuren template futurama aangepaste pagina futurama aangepaste pagina darkmode ### Bevinding 5: Ik moest een andere manier bedenken om de leuke mop in de Saved Jokes Section te zetten. De enige manier die ik had was om hem door te dragen en te droppen. drag and drop funtie #### oplossing: Uiteindelijk heb ik een like-knop gemaakt waarop de gebruiker ook kan clicken om de grappen op te slaan. drag and drop en like button funtie

Opdracht 2 reflectie

uitwerken bij afronden opdracht (voor week 8) ### Je uitkomst - karakteristiek screenshot(s): uitkomst opdracht 2 - web lay-out darkmode uitkomst opdracht 2 - web lay-out lichtmode uitkomst opdracht 2 - mobile lay-out darkmode uitkomst opdracht 2 - mobile lay-out lichtmode ### Dit ging goed/Heb ik geleerd: Ik heb nu een beter begrip van het werken met animaties, grids en met API's. Ik had veel moeite met het begin van het tweede deel van het project omdat ik er weinig ervaring mee had, maar nu kan ik deze vaardigheid beter toepassen voor toekomstige projecten. uitkomst opdracht 2 - web lay-out darkmode uitkomst opdracht 2 - mobile lay-out darkmode ### Dit was lastig/Is niet gelukt: Helaas is het me niet gelukt om de bewegende mond animatie voor mijn project af te maken. Voorlopig heb ik het hoofd van Bender alleen laten wiebelen om het toch een animatie te geven. bummer

Extra informatie

Markdown is een simpele manier om HTML te schrijven.
Markdown cheat cheet: Hulp bij het schrijven van Markdown.

Nb. De standaardstructuur en de spartaanse opmaak van de README.md zijn helemaal prima. Het gaat om de inhoud van je procesverslag. Besteedt de tijd voor pracht en praal aan je website.

Nb. Door open toe te voegen aan een details element kun je deze standaard open zetten. Fijn om dat steeds voor de relevante stuk(ken) te doen.

This site is open source. Improve this page.