diff options
| author | Connie Liu <20523241+theconnieliu@users.noreply.github.com> | 2022-12-15 20:17:04 -0500 |
|---|---|---|
| committer | Connie Liu <20523241+theconnieliu@users.noreply.github.com> | 2022-12-15 20:17:04 -0500 |
| commit | 84f10032947d592ebb3611ca562a50fd858dfab3 (patch) | |
| tree | fdb138180b90e190a21924aeb776d8980da0c3c0 | |
| parent | bca98ab552fb4b9069bc803bcc79d2a69195951f (diff) | |
make guest page layout look clean
| -rw-r--r-- | assets/guest-photos/zach.png | bin | 0 -> 182581 bytes | |||
| -rw-r--r-- | html/guests.html | 213 | ||||
| -rwxr-xr-x | styles.css | 37 |
3 files changed, 192 insertions, 58 deletions
diff --git a/assets/guest-photos/zach.png b/assets/guest-photos/zach.png Binary files differnew file mode 100644 index 0000000..0dc587f --- /dev/null +++ b/assets/guest-photos/zach.png diff --git a/html/guests.html b/html/guests.html index 0646e20..1625ef9 100644 --- a/html/guests.html +++ b/html/guests.html @@ -1,14 +1,16 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> - <meta name="description" content="User Interfaces and User Experience, Fall 2022 at Brown University. 400+ student course taught by instructor Jeff Huang and TAs. Topics include understanding when to use different interfaces, modeling and representing user interaction, principles of user experience design, eliciting requirements and feedback from users, methods for designing and prototyping interfaces, and user interface evaluation."> + <meta name="description" + content="User Interfaces and User Experience, Fall 2022 at Brown University. 400+ student course taught by instructor Jeff Huang and TAs. Topics include understanding when to use different interfaces, modeling and representing user interaction, principles of user experience design, eliciting requirements and feedback from users, methods for designing and prototyping interfaces, and user interface evaluation."> <link rel="stylesheet" href="../styles.css"> <title>CS 1300 - UI/UX 2022</title> - <link rel="icon" href="assets/favicon.png"/> + <link rel="icon" href="assets/favicon.png" /> <script src="script.js" defer></script> </head> @@ -18,88 +20,193 @@ <h2 class="title">guest portfolio reviewers</h2> <div class="edges"> <div class="flex-grid-2"> - <div class="guest"> - <h3 class="guest-name">Ashley Wang</h3> - <h4 class="guest-role">Product Designer at Opensea</h4> - <h4 class="guest-email">wshitian12@gmail.com</h4> - <p class="guest-description">Ashley is a product designer at Opensea, the largest NFT marketplace. Previously, Ashley has designed at Spotify, BCG Digital Ventures and LinkedIn. Ashley studied HCI and Design at CMU.</p> + <div class="guest-info"> + <div class="guest-photo"> + <img src="../assets/guest-photos/ashley.png"> + </div> + <div class="guest"> + <h3 class="guest-name">Ashley Wang</h3> + <h4 class="guest-role">Product Designer at Opensea</h4> + <h4 class="guest-email">wshitian12@gmail.com</h4> + <p class="guest-description">Ashley is a product designer at Opensea, the largest NFT + marketplace. Previously, Ashley has designed at Spotify, BCG Digital Ventures and LinkedIn. + Ashley studied HCI and Design at CMU.</p> + </div> </div> + <div class="guest-info"> + <div class="guest-photo"> + <img src="../assets/guest-photos/marlena.png"> + </div> <div class="guest"> <h3 class="guest-name">Marlena Morshead</h3> <h4 class="guest-role">Meta, former 1300 TA</h4> <h4 class="guest-email">marlenamorshead@gmail.com</h4> - <p class="guest-description">I'm a senior product designer currently based in Los Angeles, CA. I joined Meta (FKA Facebook) in 2017 and spent my first 4 years at the company working on small business and advertising tools across Instagram, Facebook and WhatsApp. In July 2021, I transferred to Instagram’s blockchain platform team where I currently lead design for web3 product experiences like NFTs. Prior to Meta, I spent some time at a start up and interned at IBM. At Brown, I dual concentrated in Computer Science and Modern Culture and Media. I was also an HTA for CS1300, a member of the Brown Women's crew team and the design director for Brown Political Review.</p> + <p class="guest-description">I'm a senior product designer currently based in Los Angeles, CA. I + joined Meta (FKA Facebook) in 2017 and spent my first 4 years at the company working on small + business and advertising tools across Instagram, Facebook and WhatsApp. In July 2021, I + transferred to Instagram’s blockchain platform team where I currently lead design for web3 + product experiences like NFTs. Prior to Meta, I spent some time at a start up and interned at + IBM. At Brown, I dual concentrated in Computer Science and Modern Culture and Media. I was also + an HTA for CS1300, a member of the Brown Women's crew team and the design director for Brown + Political Review.</p> </div> </div> + </div> <div class="flex-grid-2"> - <div class="guest"> - <h3 class="guest-name">Gifford Cheung</h3> - <h4 class="guest-role">Sr UX Researcher at Nintendo</h4> - <h4 class="guest-email">giffordcheung@gmail.com</h4> - <p class="guest-description">I am a Sr UX Researcher within a division of Nintendo that primarily supports developer tools. Our UX team works with tool and game developers. We sometimes solve problems like consultants, but are also embedded on developer teams. My methods range from qualitative (user studies, task-based, interviews, focus groups) to quantitative (surveys, card sorts, metrics, etc.). </p> + + <div class="guest-info"> + <div class="guest-photo"> + <img src="../assets/guest-photos/gifford.png"> + </div> + <div class="guest"> + <h3 class="guest-name">Gifford Cheung</h3> + <h4 class="guest-role">Sr UX Researcher at Nintendo</h4> + <h4 class="guest-email">giffordcheung@gmail.com</h4> + <p class="guest-description">I am a Sr UX Researcher within a division of Nintendo that primarily + supports developer tools. Our UX team works with tool and game developers. We sometimes solve + problems like consultants, but are also embedded on developer teams. My methods range from + qualitative (user studies, task-based, interviews, focus groups) to quantitative (surveys, card + sorts, metrics, etc.). </p> + </div> </div> - <div class="guest"> - <h3 class="guest-name">Hannah Chow</h3> - <h4 class="guest-role">Former 1300 HTA</h4> - <h4 class="guest-email">hannah.chow@gmail.com</h4> - <p class="guest-description">Hannah Chow ('20) is a UX Designer for Microsoft living in Seattle, WA. While studying at Brown she concentrated in Computer Science, took cs1300 in Fall '17, and HTA'd c1300 in Fall '18. Aside from zooming her cursor around Figma files at 2 AM, she also enjoys binge-watching Survivor, religiously solving the NYT crossword each morning, and caring too much about winning at weekly bar trivia.</p> + + <div class="guest-info"> + <div class="guest-photo"> + <img src="../assets/guest-photos/hannah.png"> + </div> + + <div class="guest"> + <h3 class="guest-name">Hannah Chow</h3> + <h4 class="guest-role">Former 1300 HTA</h4> + <h4 class="guest-email">hannah.chow@gmail.com</h4> + <p class="guest-description">Hannah Chow ('20) is a UX Designer for Microsoft living in Seattle, WA. + While studying at Brown she concentrated in Computer Science, took cs1300 in Fall '17, and HTA'd + c1300 in Fall '18. Aside from zooming her cursor around Figma files at 2 AM, she also enjoys + binge-watching Survivor, religiously solving the NYT crossword each morning, and caring too much + about winning at weekly bar trivia.</p> + </div> </div> </div> <div class="flex-grid-2"> - <div class="guest"> - <h3 class="guest-name">Zach Deocadiz</h3> - <h4 class="guest-role">Former 1300 TA</h4> - <h4 class="guest-email">zkdeocadiz@gmail.com</h4> - <p class="guest-description">Zach is currently a Sr Designer at FitXR, working on the future of XR fitness. Previously, he worked as a designer at Within, creating AR and VR products such as Wonderscope and Supernatural, and as a VR UI/UX designer at Vicarious Surgical, working on the future of single port robots combined with VR and 3D screen technology. They graduated from RISD in 2017 with a BFA in Graphic Design.</p> + + <div class="guest-info"> + <div class="guest-photo"> + <img src="../assets/guest-photos/zach.png"> + </div> + + <div class="guest"> + <h3 class="guest-name">Zach Deocadiz</h3> + <h4 class="guest-role">Former 1300 TA</h4> + <h4 class="guest-email">zkdeocadiz@gmail.com</h4> + <p class="guest-description">Zach is currently a Sr Designer at FitXR, working on the future of XR + fitness. Previously, he worked as a designer at Within, creating AR and VR products such as + Wonderscope and Supernatural, and as a VR UI/UX designer at Vicarious Surgical, working on the + future of single port robots combined with VR and 3D screen technology. They graduated from RISD + in 2017 with a BFA in Graphic Design.</p> + </div> </div> - <div class="guest"> - <h3 class="guest-name">Irene Rae</h3> - <h4 class="guest-role">Senior Staff UX at Google</h4> - <p class="guest-description">Irene is a Senior Staff UX Researcher at Google. Previously, she worked at Databricks as well as Microsoft on the Data Platforms team. </p> + + <div class="guest-info"> + <div class="guest-photo"> + <img src="../assets/guest-photos/irene.png"> + </div> + <div class="guest"> + <h3 class="guest-name">Irene Rae</h3> + <h4 class="guest-role">Senior Staff UX at Google</h4> + <p class="guest-description">Irene is a Senior Staff UX Researcher at Google. Previously, she worked + at Databricks as well as Microsoft on the Data Platforms team. </p> + </div> </div> </div> <div class="flex-grid-2"> - <div class="guest"> - <h3 class="guest-name">Clara Kliman-Silver</h3> - <h4 class="guest-role">UX Research Manager at Google</h4> - <h4 class="guest-email">klimansilver@google.com</h4> - <p class="guest-description">Clara Kliman-Silver '13 is a UX research manager at Google, leading a team focused on design systems and tools. Throughout her career she has studied tooling and workflows across a variety of domains, designer and developer productivity, and artificial intelligence. She previously worked as a UX designer in the healthcare and AI spaces. At Brown she concentrated in Cognitive Science, worked in 3D shape perception and psycholinguistics research labs, and enjoyed riding her bike around Providence.</p> + <div class="guest-info"> + <div class="guest-photo"> + <img src="../assets/guest-photos/clara.png"> + </div> + <div class="guest"> + <h3 class="guest-name">Clara Kliman-Silver</h3> + <h4 class="guest-role">UX Research Manager at Google</h4> + <h4 class="guest-email">klimansilver@google.com</h4> + <p class="guest-description">Clara Kliman-Silver '13 is a UX research manager at Google, leading a + team focused on design systems and tools. Throughout her career she has studied tooling and + workflows across a variety of domains, designer and developer productivity, and artificial + intelligence. She previously worked as a UX designer in the healthcare and AI spaces. At Brown + she concentrated in Cognitive Science, worked in 3D shape perception and psycholinguistics + research labs, and enjoyed riding her bike around Providence.</p> + </div> </div> - <div class="guest"> - <h3 class="guest-name">Sophia Xu</h3> - <h4 class="guest-role">Interaction Designer at SmartDesign</h4> - <h4 class="guest-email">sophia.xu@smartdesignworldwide.com</h4> - <p class="guest-description">Hi! I’m Sophia, an interaction designer at Smart Design. I graduated from RISD in Industrial Design and actually took this class you guys are in right now! I’ve worked in the toy industry a bit and at a different strategic and creative consultancy agency before coming to Smart Design, a design agency based in Brooklyn, NY. Some cool projects I’ve worked on here include designing for a smart fridge, helping Meta co-design with teens and parents to create a safer platform, user testing with a fitness company, researching what makes experiences feel premium, and my current project is on omnichannel shopping experiences for global youth!</p> + + <div class="guest-info"> + <div class="guest-photo"> + <img src="../assets/guest-photos/sophia.png"> + </div> + <div class="guest"> + <h3 class="guest-name">Sophia Xu</h3> + <h4 class="guest-role">Interaction Designer at SmartDesign</h4> + <h4 class="guest-email">sophia.xu@smartdesignworldwide.com</h4> + <p class="guest-description">Hi! I’m Sophia, an interaction designer at Smart Design. I graduated + from RISD in Industrial Design and actually took this class you guys are in right now! I’ve + worked in the toy industry a bit and at a different strategic and creative consultancy agency + before coming to Smart Design, a design agency based in Brooklyn, NY. Some cool projects I’ve + worked on here include designing for a smart fridge, helping Meta co-design with teens and + parents to create a safer platform, user testing with a fitness company, researching what makes + experiences feel premium, and my current project is on omnichannel shopping experiences for + global youth!</p> + </div> </div> </div> <div class="flex-grid-2"> - <div class="guest"> - <h3 class="guest-name">Aaditya Ailawadhi</h3> - <h4 class="guest-role">Former 1300 student</h4> - <h4 class="guest-email">aailawad@alumni.risd.edu</h4> - <p class="guest-description">Aaditya is a UX Designer at Amazon. Previously, he worked as a Product Designer at Microsoft, Unqork, and Commonstock. He lives in Seattle, loves cars, and misses Bajas on Thayer street.</p> + <div class="guest-info"> + <div class="guest-photo"> + <img src="../assets/guest-photos/aaditya.png"> + </div> + <div class="guest"> + <h3 class="guest-name">Aaditya Ailawadhi</h3> + <h4 class="guest-role">Former 1300 student</h4> + <h4 class="guest-email">aailawad@alumni.risd.edu</h4> + <p class="guest-description">Aaditya is a UX Designer at Amazon. Previously, he worked as a Product + Designer at Microsoft, Unqork, and Commonstock. He lives in Seattle, loves cars, and misses + Bajas on Thayer street.</p> + </div> </div> - <div class="guest"> - <h3 class="guest-name">Niko Klein</h3> - <h4 class="guest-role">Product at Figma</h4> - <h4 class="guest-email">Twitter: @nikolasklein</h4> - <p class="guest-description">Nikolas Klein works as a product designer at Figma since early 2018. Since then, he has been focused on the Figma editor and, in there, primarily on Prototyping. He has studied in Germany and now lives in San Francisco.</p> + + <div class="guest-info"> + <div class="guest-photo"> + <img src="../assets/guest-photos/niko.png"> + </div> + <div class="guest"> + <h3 class="guest-name">Niko Klein</h3> + <h4 class="guest-role">Product at Figma</h4> + <h4 class="guest-email">Twitter: @nikolasklein</h4> + <p class="guest-description">Nikolas Klein works as a product designer at Figma since early 2018. + Since then, he has been focused on the Figma editor and, in there, primarily on Prototyping. He + has studied in Germany and now lives in San Francisco.</p> + </div> </div> </div> <div class="flex-grid-2"> - <div class="guest"> - <h3 class="guest-name">Reet Agrawal</h3> - <h4 class="guest-role">Former 1300 student</h4> - <h4 class="guest-email">reetagrawal16@gmail.com</h4> - <p class="guest-description">Reet currently works as an Interaction Designer at an agency, Code and Theory. She graduated '21.5 with a concentration in Computer Science and tried her best to get into any and all RISD classes otherwise. She's interned as a UX engineer before and is happy to help anyone considering hybrid roles or transitioning between design and development.</p> + <div class="guest-info"> + <div class="guest-photo"> + <img src="../assets/guest-photos/reet.png"> + </div> + <div class="guest"> + <h3 class="guest-name">Reet Agrawal</h3> + <h4 class="guest-role">Former 1300 student</h4> + <h4 class="guest-email">reetagrawal16@gmail.com</h4> + <p class="guest-description">Reet currently works as an Interaction Designer at an agency, Code and + Theory. She graduated '21.5 with a concentration in Computer Science and tried her best to get + into any and all RISD classes otherwise. She's interned as a UX engineer before and is happy to + help anyone considering hybrid roles or transitioning between design and development.</p> + </div> </div> </div> </div> </section> </body> -</html> + +</html>
\ No newline at end of file @@ -68,11 +68,12 @@ section:nth-child(odd) { .title, .title-info-flex, .edges{ text-align: left; - padding: 0 12rem; + padding: 0 5rem; } .title { color: var(--accent-color); + margin-bottom: 2rem; } h2 { @@ -965,21 +966,26 @@ weekly specials conic border height: 100%; } -.guest-name, .guest-role { +.guest-name { color: var(--accent-color); } -.guest-email { +.guest-role { color: var(--second-accent-color); } +.guest-email { + + color: #857ce1; +} + .flex-grid-2 { display: flex; justify-content: space-between; vertical-align: top; } .flex-grid-2 .guest { - width: 45%; + width: 80%; vertical-align: top; } @@ -993,9 +999,30 @@ weekly specials conic border } .guest { - margin: 2rem 0; + margin: 2rem 0 auto 0; height: auto; display: flex; flex-direction: column; justify-content: center; +} + +.guest-info { + display: flex; + vertical-align: top; + width: 100%; + margin-right: 6%; + margin-bottom: 2rem; +} + +.guest-photo { + margin-right: 1rem; + width: 100px; + min-height: 100px; + max-height: auto; + margin-top: 35px; +} + +img { + max-width: 100%; + height: auto; }
\ No newline at end of file |
