Prototyp - Modedesigner Website

Das Projekt

Das Projekt ist ein klickbarer Prototyp für eine Informations-Website, welcher in Figma erstellt wurde. Als Thema werden wichtige Modedesigner behandelt, die nach Jahrzehnten unterteilt wurden. Im Falle längerer Karrieren handelt es sich bei der Einteilung um das einflussreichste Jahrzehnt des jeweiligen Designers.

Navigation

Über die Bilder auf der Startseite, welche im Prototyp beim Mouseover farbig werden, gelangt man zu den Unterseiten, auf denen die Navigation entweder über den Header mit Dropdown-Menü oder die Bilder der Designer erfolgt. Auf den Detailseiten kann nur über den Header navigiert werden.

Startseite

Auf der Startseite befinden sich unregelmäßig angeordnete Fotocollagen zu den jeweiligen Jahrzehnten mit Überschriften.

Seite für eine Kategorie

Auf den Unterseiten findet man Bilder der einzelnen Designer mit jeweils einem Zitat.

Detailseite

Die Detailseite enthält einen kurzen Text zum Designer, sowie die Runway-Shows, welche ebenfalls beim Mouseover farbig werden und durch klicken ein Overlay-Fenster öffnen, in dem man sich die Bilder genauer anschauen kann.

Bildquellen:

Runway-Bilder:
https://assets.vogue.com/photos/56f07322fbc86c6919afa593/master/w_1600%2Cc_limit/HELMUT-LANG-FALL-1999-RTW-33.JPG
https://assets.vogue.com/photos/56f0738675b5663b5ad8c2b9/master/w_2240,c_limit/HELMUT-LANG-SPRING-1998-MENSWEAR-17.jpg
https://assets.vogue.com/photos/56b924e4241fdb723480fab1/master/w_2240,c_limit/27.jpg
https://assets.vogue.com/photos/56f077cde5cbfa2c5a4ec3b2/master/w_2560%2Cc_limit/HELMUT-LANG-SPRING-1999-RTW-30.JPG
https://assets.vogue.com/photos/56f0752de2857e225ae9abbd/master/w_2240,c_limit/HELMUT-LANG-SPRING-1998-RTW-24.jpg

Portraits:
https://assets.vogue.com/photos/5b2155964c6bbc393b0c8d7e/master/w_2410,h_3000,c_limit/01-helmut-lang.jpg
https://mascultura.mx/wp-content/uploads/2021/10/margiela.jpg
https://pyxis.nymag.com/v1/imgs/a5f/f4e/f962c8bba6c0bde522c8aca79c1a32167c-cut-designer-issue-18-marc.jpg
https://media.fashionnetwork.com/m/f697/4fd5/76e3/6514/08e8/0c5e/e108/d844/fd27/da16/da16.jpg

Startseite:
https://i.pinimg.com/originals/a7/f5/90/a7f590a8cbb0a657570922420f634220.jpg
https://freight.cargo.site/t/original/i/685e62c1421bd3426a6d415d4856ae22a2852cbf9ba5ab1f983b06cb02c17f15/3.png
https://fashionweekdaily.com/wp-content/uploads/2017/02/Screen-Shot-2017-02-22-at-2.52.42-PM.png
https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/balenciaga-rf18-3088-1520185323.jpg
https://image-cdn.hypb.st/https%3A%2F%2Fjp.hypebeast.com%2Ffiles%2F2015%2F07%2Foff-white-02-fall-winter-collection-02.jpg?q=75&w=800&cbr=1&fit=max
https://assets.vogue.com/photos/55c6510708298d8be21a4387/master/w_2560%2Cc_limit/_YVS0420.1366x2048.JPG
https://media.wwdjapan.com/wp-content/uploads/2016/07/06014455/BALENCIAGA-2017-SS-PARIS-MENS-COLLECTION-02.jpg
https://assets.vogue.com/photos/55c651d008298d8be2288ab6/master/w_2560%2Cc_limit/KIM_0152.jpg
https://cdn.rickowens.eu/custom_page_images/5934/collections_cover_RO_FW19_LARRY_MENS_020.jpg?1547806672

https://www.horrorvacuo.com/wp-content/uploads/26-Raf-Simons-SS-2003-1125x1500.jpg
https://freight.cargo.site/t/original/i/4a18f46801dd4fd2fe095c4fd53f1ca475693d335cb58fefee83c2b616425cb9/photo_mid_def_803907.jpg
https://images.squarespace-cdn.com/content/v1/6020c8a4b47952338247965c/1622073956086-Y9A1IQR94WV7JN567UC6/IMG_2516.jpg?format=1500w
https://static.wixstatic.com/media/5135b2_2360a98eb5ab473da485b4b3b9a1bae5~mv2.jpg/v1/fill/w_592,h_438,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/5135b2_2360a98eb5ab473da485b4b3b9a1bae5~mv2.jpg
https://www.lepetitarchive.com/wp-content/uploads/2019/05/Foto-5-5-19-13-40-08-500x500.jpg
https://www.lepetitarchive.com/wp-content/uploads/2019/05/2-2-copia-min-500x500.jpg
https://images.squarespace-cdn.com/content/v1/58dac9bf440243dfbf600995/1610996168717-XTZLYPPV4A17OYYQLMFQ/image4.jpeg?format=1000w
https://assets.vogue.com/photos/55c6516c08298d8be2215b17/master/w_2240,c_limit/00010m.jpg
https://assets.vogue.com/photos/55c651a308298d8be2255670/master/w_2240,c_limit/00020fullscreen.jpg
https://assets.vogue.com/photos/55c6515008298d8be21f47ea/master/w_2240,c_limit/100015015.jpg

https://freight.cargo.site/t/original/i/8ab1b4ea5becd5ea43c675fbd9ae566f09b720d7eb9a3b02fc30d1ddd12a807f/6.5.png
https://images.squarespace-cdn.com/content/v1/5c2cab0e12b13f8feabb40ac/1601577802526-QACVDKSR7Y3GQY4NACE8/image-asset+%282%29.jpeg?format=1000w
https://historyofourworld.files.wordpress.com/2010/07/262-ss-2005-arena-homme-line-0-peter-doherty-wearing-a-shirt-printed-with-lipstick-kisses.jpg?w=584
https://www.marieclaire.com.au/media/82419/1513140050021_memorable-90s-runways-6.jpg?width=720&center=0.0,0.0
https://www.marieclaire.com.au/media/82412/1513140050013_memorable-90s-runways-3.jpg?width=720&center=0.0,0.0
https://www.marieclaire.com.au/media/82422/gettyimages-1218271241.jpg?width=720&center=0.0,0.0
https://images.squarespace-cdn.com/content/v1/5aaf41dd3c3a53cc58416c61/1628186582262-G3Y3XGPX13U333AAGS48/rafsimonsaw1998spiderwebsweater1.jpg?format=300w
https://i.mdel.net/i/db/2020/9/1382983/1382983-800w.jpg
https://i.pinimg.com/736x/76/a0/9d/76a09d1586922720881e219be0226d2d—moda-fashion-personal-style.jpg
https://i.pinimg.com/originals/bc/2e/7d/bc2e7d9f526aefbcd3d9858154fbbf97.jpg

https://cdn.shopify.com/s/files/1/0270/1099/0133/products/image_8f511429-c3c4-416f-abe7-0825bdd76310_1296x.png?v=1670434514
https://freight.cargo.site/w/1500/q/75/i/a28cbbfb0b2db86d0577d0a3e34068d32d55b4ce2e7547b8b3d5ef3f2545dfe3/AW85-SOCCER-SLEEVE-BOMBER-FRONT.jpg
https://1granary.com/wp-content/uploads/2015/09/1granary_central_saint_martins_csm_mahoro_comme_des_garcons13.jpg
https://i.pinimg.com/474x/5c/16/db/5c16db3204cd5ebe23114bacfa68abd7.jpg
https://i.pinimg.com/564x/a9/bd/a2/a9bda2610940e70795f3a7d75f60eb0f.jpg
https://assets.vogue.com/photos/55c6517408298d8be221dfd6/master/w_2560%2Cc_limit/00130m.jpg
https://i.pinimg.com/originals/39/92/ad/3992ad1872e9b9f17e97efbc99cd8092.jpg
https://media.vogue.fr/photos/5c362df80181d6aec79ababa/master/w_2580%2Cc_limit/162295932_jpg_1642.jpg?lang=eng

https://cdn.shopify.com/s/files/1/0270/1099/0133/products/image_0e8769e3-cf2f-426e-a936-abbf6b8aa794_1728x.jpg?v=1634229406
https://cdn.shopify.com/s/files/1/0270/1099/0133/products/image_e03a79b5-e82e-4005-a57a-b419fecf373f_1296x.jpg?v=1664379966
https://fashionhistory.wpenginepowered.com/wp-content/uploads/2020/05/pg-scaled.jpg
https://cdn.prod.www.spiegel.de/images/227ff69b-0001-0004-0000-000000450470_w920_r0.7658280342825546_fpx52.97_fpy58.95.jpg
https://www.julienslive.com/images/lot/3987/398731_6.jpg?1634102676
https://sh-cdn.singulart.com/eyJidWNrZXQiOiJzaW5ndWxhcnQtd2Vic2l0ZS1wcm9kIiwia2V5IjoiYXJ0d29ya3NcL3YyXC9jcm9wcGVkXC84Mjg5XC9tYWluXC96b29tXC8xMDU4NTg3X2VjYzk4MmVkMjY1MTAwMmY0MzlhOTFhOWE4NDE2OWZhLmpwZWciLCJlZGl0cyI6eyJyZXNpemUiOnsid2lkdGgiOjc1MCwiaGVpZ2h0Ijo3NTAsImZpdCI6Imluc2lkZSJ9LCJ0b0Zvcm1hdCI6IndlYnAiLCJ3ZWJwIjp7InF1YWxpdHkiOjgwfX19?signature=30c26b1e849683ac42a69ed68ab9029033913e5cb1ff6c24b3c092f7ed49acae
https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Yellow_coat_by_Balenciaga%2C_c.1960._Balenciaga_Museoaren_inaugurazioa_24_%28cropped%29.jpg/634px-Yellow_coat_by_Balenciaga%2C_c.1960._Balenciaga_Museoaren_inaugurazioa_24_%28cropped%29.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Christian_Dior_Dress.jpg/1280px-Christian_Dior_Dress.jpg