The Michigan Daily
Orientation Edition 2024

Michigan Daily Orientation Edition

Timeline

June 2024

Skills

JavaScript, HTML, CSS, Web Development, User Interaction Design

Overview

As a web developer for The Michigan Daily, I worked on engineering the Freshman Orientation Edition, a dynamic web application that integrates editorial content with interactive visual elements. This project aimed to deliver an engaging, user-centric website using advanced front-end technologies and interactive designs.

Process

Interactive Elements

My role focused on the development and implementation of interactive features. I utilized JavaScript and CSS animations to create scroll-triggered doodles that dynamically resize art pieces in response to user scrolling. I designed hover effects using CSS transitions and JavaScript event listeners to display detailed popups for articles. I also incorporated SVG animations and JavaScript to create bouncing arrows that visually indicate clickable article icons. These features were engineered to enhance user engagement and improve navigation intuitiveness.

Styling and Layout

I was also responsible for assisting with styling and layout to ensure a cohesive visual design. This included the use of responsive design techniques and CSS Grid/Flexbox to align art and editorial content seamlessly.

Debugging and Optimization

My work also involved cross-browser testing and debugging to resolve compatibility issues. I employed tools such as Chrome DevTools and browser testing to identify and fix bugs related to interactive elements and styling.

Outcomes

The 2024 Orientation Edition is a fully interactive and visually compelling site that integrates art animations, hover-triggered article popups, and animated visual cues. As a centerpiece of The Michigan Daily's outreach, it reached all incoming University of Michigan freshmen and was prominently featured across the Daily's platforms. This special edition site also involved extensive collaboration across editorial, art, and web sections to ensure a seamless integration of content and aesthetics. The collaborative effort reinforced the Daily's commitment to enhancing the student experience through creative and interactive digital media.