DEV Community

Sanghun Han
Sanghun Han

Posted on • Edited on

[School Landing Page – Part 1, Section 4] Layout Planning & Low-Fidelity Sketch

#html #css #ux #portfolio

🧩 School Landing Page Project – Section 4: Layout Planning & Low-Fidelity Sketch

With all the content and design personality defined, it’s now time to structure the layout.

This step bridges planning with design — outlining how each section fits together and visualizing the full page flow.

🧱 Full Layout Structure

I decided to organize this landing page as a single-page scroll layout, with clear visual hierarchy from top to bottom.

The layout will include the following sections:

  1. Navigation Header – with logo and search/icon buttons + nav menu
  2. Hero Section – fullscreen video background + key text + CTA
  3. About Us – city background image + intro card with expand button
  4. School Features – 2x2 grid of feature cards
  5. Curriculum – 1x4 horizontal cards for each course type
  6. Campus Life – Z-pattern layout with alternating images/text
  7. Admissions – CTA text with a form in card layout
  8. Events Gallery – 1 large event + 4 smaller ones (1+4 grid)
  9. Footer – navigation links, contact info, copyright

Each section has a distinct layout style, but together they form a cohesive scroll experience.

✍️ Low-Fidelity Sketch

To better visualize the structure, I created a low-fidelity wireframe of the full layout.

Rather than jumping straight into code, this sketch helps confirm the flow, spacing, and component balance.

📷 Here’s a preview of my layout sketch:

🛠️ Note for Future Projects

For this project, I kept the design phase light — using only a low-fidelity wireframe before moving into development.

However, in future projects I plan to include medium-fidelity designs and a complete visual stylesheet,

to create a more polished and professional design system from the start.

🔜 Next up…

Before jumping into the actual markup process with semantic HTML, I’ll first set up Sass in the project using npm. This includes creating the folder structure, initializing the project with package.json, and installing node-sass as a development dependency.

Once that’s ready, I’ll begin building the layout structure and styling foundation using HTML and Sass.

Exciting part ahead — bringing the layout to life with real code!

Thanks for reading! 😊

Top comments (0)