Ich habe im Rahmen des Kurses "Interaction Design" an der HAW Hamburg Zwei Web-Portraits erstellt. Mithilfe von HTML und CSS habe ich ein Portrait einer Kommilitonin in zwei verschiedenen Varianten gebaut.
Über das Projekt
Die Semesteraufgabe bestand daraus, zwei Portraits einer zufällig gewählten Kommilitonin zu coden, indem wir ausschließlich HTML und CSS nutzen durften.
Das erste Portrait besitzt eine fast leere HTML-Datei, da wir hier nur mit eingefärbten und positionierten Divs gearbeitet haben. Vorallem habe ich hier die Funktion der "Clip-Paths" verwendet, um passende Formen zu erzeugen. Außerdem ist dieses Portrait ein wenig interaktiv, da sich beim Hovern über bestimmte Teile des Gesichts bspw. die Augen schließen oder die Zunge rausgestreckt wird. Auch wenn das zweite Portrait weniger Interaktiv für den User ist, habe ich es mit Gifs anstelle von einfachen Farbflächen visuell aufregender gestaltet. Für die Augen, Nase und den Mund habe ich mein eigenes Gesicht aufgenommen, die jeweiligen Teile mithilfe von DavinciResolve Frame für Frame freigestellt und als Gif exportiert. Die Restlichen Gifs habe ich aus dem Internet.
Ich bin mit den Portraits sehr zufrieden, da ich zweimal das Gleiche aber in komplett anderen Stilen gebaut habe. Die Interaktionen sind mir gut gelungen und die Sites funkltionieren gut im Browser.
Bilder
Von oben nach unten: Webportrait im Browser, Webportrait in VSCode, Gifportrait in VSCode, Gifprotrait im Browser