Website Design
We have created multiple websites throughout our time in the L-EAF LAB, including the very one you are using right now! In this section, we would love to show some of the behind the scenes in the creation of the LAB site.
Site Home Page, LAB 2024
The L-EAF LAB: Branding. Design. Illustration.
Completely building the LAB aesthetics from its origin was our biggest project to date. From the origination of the logo, to color and font design, we had to maneuver through many creative obstacles to get to the current look of the LAB. The website was definitely a challenge, as it tested all the previous work we amounted, having to put it all together to a cohesive feel that prioritized a user-friendly experience.
The first 5 visible web page layouts here was handled by Shannon Liu and Juliet Roselie! Shannon joined the team for a couple months and aided in her expertise for the optimum user experience when it came to the LAB, while Juliet would take her feedback and implement it in terms of the designs themselves. The last two pages are examples of behind the scene work, from Grace He, who created the time tracker recording system for the Lab and team banner/student bio questionnaires that help keep the flow of the LAB running!
Student Union Blog - Integrating Illustrations, 2024
About Page - Includes Custom Graphics, 2024
Contact Us Page, 2024
Students Page, 2024
Internship FAQ Page, 2024
The Lab Time Tracker, 2024
The Lab Team Banner Inquiry, 2024
While working with Crow Box, we were given the website migration project to tackle. This included: Injecting CSS code to replicate the original transitions, creating a mobile user-friendly version of the site, and ensuring all text/pictures/spacing remain the same (if not exact!). This entire website was handled by our team member, Grace He!
The Migration of Crow Box Partners
Desktop Landing Page (Left) and Mobile Page (Right), Grace He 2023
Code for the phone number to stay sticky while scrolling.
Code for the transition on the landing page.
When working on the L-EAF Website, we had to keep in mind that our brief was to: Design a website that adapts to various screen sizes and devices, balances aesthetics with usability with a layout that effectively communicates the content hierarchy, and guides users through the information on the site. This was our first website assignment as a team!
The L-EAF Website
L-EAF Landing Page (Desktop), The Visionaries 2023
Complete Webinar Organization (Top) and Four Pillars Recreation (Bottom), 2023