Interactive Design
URL:
https://sparkly-hummingbird-345b3c.netlify.app/
Google Drive Link
Project Description Document
Preview page (html)
In designing this page, I first established a clear page structure, then gradually filled in the content and visual hierarchy. Initially, I uniformly imported the site-wide stylesheet and required fonts in the `<head>` section to ensure consistency with the overall brand and basic adaptability across different devices. Then, I used `.preview-page` as the main container to centrally manage all content, facilitating overall layout and subsequent style control.
The top of the page uses a `top-black-section` to create a highly recognizable visual area, using a black background to display the logo and main title, clearly defining the page's brand attributes. Next, in the `content-section`, I placed introductory text to help users understand the website's positioning, then guided them to the homepage via an "Enter" button, creating a natural transition from "understanding the content" to "taking action."
The middle section's `image-grid` area primarily serves as a visual display, creating a collage-like atmosphere similar to a music magazine through multiple images, enhancing the page's content density and rhythm. Subsequently, I used dividing lines to divide the page into different reading sections, avoiding information overload.
In the middle section, I emphasized visual appeal, using a combination of left and right images, a central heading, and the main image to create a visual focal point and keep the page engaging during scrolling. The function card area below breaks down the website's main content types into multiple entry points, helping users quickly understand the website structure.
Finally, the page concludes with a red area at the bottom, using the brief text "Join us" to create an emotional ending that visually echoes the black area at the top.
Preview page (CSS)
First, I used a global reset `*{margin:0;padding:0;box-sizing:border-box;}` to unify the browser's default styles and avoid layout discrepancies.
To make the page more interactive, I added hover effects to most images. However, to avoid affecting the logo and icons, I used selectors to exclude `img:not(.nav-logo-img):not(.search-icon):not(.arrow-icon)`, so only the content images would be scaled up with `transform: scale(1.05)` and have shadows added.
For the overall layout, I used `.preview-page{width:1700px;position:relative;margin:0 auto;}` as a base. I first fixed the canvas width and established a positioning reference system, then used numerous `position:absolute` methods to place elements according to Figma coordinates, ensuring the image accurately reflects the design draft.
For the button, I used `.enter-button-frame{display:flex;gap:70.75px;text-decoration:none;}` to naturally align the text and arrows, and added `:hover{opacity:0.8}` for simple feedback, making it look like a clickable entry point.
For the image grid and the central area, I used a "container that doesn't take up space + absolutely positioned child elements" approach, for example, `.image-grid{height:0;}` and `.grid-item{position:absolute;}`. Each image was individually controlled for size and coordinates using `.grid-item-1` to `.grid-item-13` to avoid them crowding each other.
To prevent the feature cards from being cropped, I set `overflow:visible` on the container and used `z-index` to increase their layering (e.g., `.feature-cards{z-index:2;}`, `.card-arrow{z-index:10;}`), ensuring that the arrows are not covered by the background or border.
About us (html)
First, I included the homepage stylesheet via a link rel="stylesheet" href="css/home.css" and loaded Google Fonts to ensure a consistent overall style.
The page content is uniformly placed within a div class="home-page" as the main container for easy layout management.
The top navigation uses a nav class="top-nav", with nav-left, nav-center, and nav-right clearly separating the logo, page links, and search functionality.
The main visual area is comprised of a div class="hero-section", containing the title h1 class="hero-title" and buttons. An automatic image slideshow is added within a div class="hero-right-slideshow" to enhance the page's dynamic feel.
The NEWS area uses a div class="news-grid" to display content in an image grid format, enhancing visual appeal.
The EVALUATION section uses a card structure div class="eval-card", with article navigation via an a href="Article.html".
Finally, use the footer class="footer-section" to finish, making the page structure complete.
About us (css)
First, I used `*{margin:0;padding:0;box-sizing:border-box;}` for a global reset to prevent layout issues caused by different browser default spacing.
To make the content more interactive, I added hover effects to most images. However, to avoid affecting the function icons, I used `img:not(.nav-logo-img):not(.search-icon):not(.arrow-icon)` to exclude the logo and arrows, ensuring that only content images would be transformed:scale(1.05) and have a box-shadow added.
The entire page uses `.preview-page{width:1700px;position:relative;margin:0 auto;}` as the "canvas," and then placed key elements using numerous `position:absolute` values according to Figma coordinates to ensure visual fidelity.
The button uses `.enter-button-frame{display:flex;gap:70.75px;text-decoration:none;}` for image and text alignment, and `:hover{opacity:0.8}` for click feedback, making it more like a real entry point.
The image grid and mid-section layout use a "container that doesn't take up space + absolute positioning of child elements" approach, for example, `.image-grid{height:0;}` combined with `.grid-item{position:absolute;}`. Each image uses `.grid-item-1` to `.grid-item-13` to control its position individually, avoiding them from crowding each other.
In the card area, I use `.feature-cards{overflow:visible;z-index:2;}` to solve the problem of arrows being cropped/obscured, and `.card-arrow{z-index:10;}` to ensure the arrows are always on top.
Home (html)
I included the homepage stylesheet and font in the `<head>` tag using `link rel="stylesheet" href="css/home-page.css"` to ensure overall visual consistency.
The page uses a `div` with the class "home-page" as the main container, with navigation at the top using `nav` with the class "top-nav", arranging the logo, page links, and search function in separate sections.
The main visual area consists of a `div` with the class "hero-section", and an automatic image carousel is added within a `div` with the class "hero-right-slideshow" to give the homepage a more dynamic feel.
The content section uses `div`s with the class "news-grid" and "div" with the class "eval-card" to display NEWS and EVALUATION respectively, and concludes with a `footer` with the class "footer-section".
Home (css)
This CSS is primarily used to accurately reproduce the homepage layout according to the Figma design. It unifies browser performance by resetting global styles (* { margin:0; padding:0; box-sizing:border-box; }) and uses .home-page as a fixed-width page container. The overall layout extensively uses position:absolute and precise left / top / width / height values to align with the visual design, while combining flex to arrange the content within the navigation bar and cards. Key areas of the page, such as the Hero carousel, achieve smooth transitions through opacity and transform animations. The NEWS and EVALUATION sections display content in card format and add unified image hover zoom and shadow effects, so that the page maintains a rigorous layout while possessing a certain degree of interactivity and visual hierarchy.
https://soft-truffle-fcb144.netlify.app/
Evaluation Interface（html）
The Evaluation / Get Reviewed feature page uses a div with class="evaluation-page" as the main container with a fixed width, maintaining a consistent navigation system with the homepage through a top nav element. The main content is divided into two sections: Get Reviewed and Join Us, which are combined with background blocks, illustrations, explanatory text, and form input boxes to guide users to submit music or join the platform. The page makes extensive use of semantic tags such as nav, footer, and form, with clear class layering, facilitating precise positioning and visual reproduction using CSS. The overall logic follows the main line of "explanation → form → action button", ensuring clear information and an intuitive process, which is in line with the usage scenario of music submission websites.
Evaluation Interface（css）
First, use a global reset to unify the box model and font. Then, fix `.evaluation-page` to a 1700px wide canvas. Make the top `.top-nav` a burgundy navigation bar (with shadow, active highlight, and button-style ABOUT US) to ensure a consistent style across the entire site. The main `.main-content` uses a fixed position + `overflow-y: scroll` scheme for "in-content scrolling," splitting the page into the upper half (Get Reviewed, left illustration + right explanatory text + Name/Email/Message form + save/submit button) and the lower half (Join Us, large horizontal illustration at the top + left explanation + right input and text boxes + button), separated by `.divider-line`. Finally, fix `.footer` at the bottom to continue the same color scheme and hide the scrollbar, making the page look more like a static Figma draft while retaining scrollable interactivity.
Album Page（html）
The page uses .album-music-page as the main container, continuing the unified top navigation structure to ensure consistency with the overall style of the homepage and other pages. The upper half of the page highlights the immersive music browsing experience through background images, tab switching, and a 3D album carousel controlled by JavaScript (left and right arrows, autoplay, dot indicators, and pause/play). The Music Categories section in the middle uses large image cards and text overlays to display category content, guiding users to continue exploring. The Popular section in the lower half uses a vertical list of article cards to enhance information hierarchy and readability. The overall logic revolves around "discover music → browse categories → popular recommendations," maintaining visual impact while being clear in structure and intuitive in interaction.
Album Page（css）
The CSS on this page is primarily used to faithfully reproduce the visual effects of the Figma design: a global reset is used to unify style specifications, and .album-music-page is used as a fixed-width canvas of 1700px; the top navigation bar continues the brand colors and hover feedback to ensure consistency across pages; the core of the page is a 3D album carousel implemented based on perspective, translateZ, and scale, combined with arrows, dots, and playback controls to enhance the immersive experience of music browsing; the Music Categories section in the middle uses large image cards, gradient overlays, and hover zoom to highlight the categorized content; the Popular section at the bottom uses a horizontal list of article cards and overlay arrows to guide clicks for reading; the overall design makes extensive use of absolute positioning and transition animations to enhance the interactive hierarchy while maintaining precise layout.
Article Page（html）
When creating this Article page, I started with the overall structure, clearly separating the navigation bar, left-side music player, and right-side article content using HTML to ensure that the reading and functional areas did not interfere with each other. The biggest challenge was the large amount of information, which could easily appear cluttered. I gradually clarified the page by continuously adjusting the hierarchy, processing the title, cover, body text, and supplementary information in separate blocks.
Article Page（css）
When I was creating the css of this webpage, I was constantly thinking: the page needed to "respond" when the user hovered the mouse over it, otherwise it would look like a static poster. So I started with the easiest and most reliable approach—using CSS's `:hover` in conjunction with transitions. For example, I made most images slightly enlarged when hovered (scale(1.05)) and added a shadow, creating a "floating" effect; but I didn't want all the images to move randomly, so I specifically excluded elements like logos, search icons, and arrows from this hover rule. The navigation bar and links followed the same approach: they changed color and showed a little background when the mouse hovered over them, immediately letting the user know "this is clickable".
Interaction and Animation
In this website, all interactions and animations are designed around the principle of "clearly letting users know where to click and what's happening on the page." Most hover effects are achieved using CSS: by setting transitions in advance, `:hover` is used to change the scaling, shadow, or color of elements when the mouse hovers over them, creating a subtle sense of enlargement and emphasis for images, cards, and buttons. This change is understated but clearly indicates interactivity. For carousels and automatically switching content, JavaScript doesn't directly control the animation; it simply switches the element's class at appropriate times. The actual movement effect is achieved using CSS's `transform`, `opacity`, and transition timing. The 3D album carousel uses `perspective` and `translateZ()` to build a hierarchy, giving the cards spatial depth during transitions. The overall interaction logic is clear and the rhythm is restrained; the animations enhance the experience without interfering with the content itself.
Reflection
During the development of this website, I encountered quite a few problems. The biggest initial issue was its overly complex structure—many pages and elements. If the HTML was messed up, the CSS and interactions would crash. I realized I had to first clarify the page structure, so I reorganized the container hierarchy, separating navigation, main content, and each section, using consistent class naming. This made modifying styles and animations much less painful later.
Interactions and animations were also initially problematic. I initially tried to control the animations directly with JavaScript, but the code became increasingly messy and difficult to debug. Later, I changed my approach, delegating animations to CSS, using `transition`, `transform`, and `opacity` for hover, fade-in/fade-out, and displacement effects. JavaScript was only responsible for switching classes and controlling timing, such as the automatic playback and pause of the carousel. This not only made the code much cleaner but also made the animations more stable.
Another difficulty was reproducing the design drafts. Figma's dimensions and positions are very precise, but when using absolute positioning on a webpage, they are easily misaligned. I could only repeatedly compare my work with the design drafts, adjusting the left, top, and width bit by bit, while using flexbox to reduce fixed positioning, slowly finding a balance.
Throughout the process, my biggest takeaway was understanding that front-end development isn't about "writing it all at once," but rather a continuous process of trial and error. Many problems weren't due to a lack of technical skills, but rather a lack of clear thinking. Only when I started breaking down problems, simplifying animations, and ensuring each layer focused on its specific function did the entire website truly become controllable and closer to the effect I initially envisioned.
Comments
Post a Comment