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

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

Website

Cover page of a brochure or presentation for Crow Box Partners featuring a hiker walking on snow-covered mountain trail with rugged, snowy peaks in the background, and the text 'Next Generation Thinking' along with company information.

A promotional flyer for Crow Box Partners with the headline 'Next Generation Thinking,' describing their mission to help families activate their next generation through education, social responsibility, business, and organizational systems.

Desktop Landing Page (Left) and Mobile Page (Right), Grace He 2023

CSS code snippet defining styles for a phone number element with specified width, height, position, z-index, padding, top margin, right margin, left margin, and opacity

Code for the phone number to stay sticky while scrolling.

Screenshot of CSS code in a text editor.

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

Website

L-EAF Landing Page (Desktop), The Visionaries 2023

A webpage displaying a list of webinars related to educational technology and agility, with titles and expandable sections for each webinar.

Text explaining four pillars of student-centered educational system, with icons for student agility, teaching agility, lean-agile leadership, and institutional agility.

Complete Webinar Organization (Top) and Four Pillars Recreation (Bottom), 2023