Designing the Layout

Setting Up the Canvas

Press the F key in Figma to activate the Frame tool. Select the "Desktop" preset which gives you a 1440px wide artboard. This will be the canvas where we lay out our entire homepage design.

Adding a Layout Grid

With your frame selected, go to the right panel and click the plus icon next to "Layout Grid". Set it to a 12-column grid with a gutter of 24px and a margin of 80px on each side. This grid ensures all of your elements align consistently and the design feels structured and professional.

Designing the Navigation Header

At the very top of the frame, create a horizontal bar spanning the full width. Place your logo or site name on the left side. On the right side, add navigation links such as Home, About, Projects, and Contact. Keep the header height around 72px and use your text styles for the links.

Building the Hero Section

Below the header, create a large hero section that spans most of the viewport height. Add a bold, attention-grabbing headline using your H1 text style. Below it, add a subheadline in a lighter weight for a brief introduction. Include a call-to-action button using the component you built in the Design System. Consider adding a hero image or illustration on the opposite side for visual balance.

Creating the About Section

Design a two-column layout. On one side, place a large photograph of yourself or an illustration. On the other side, write a short biography using your body text style. This section should feel personal and inviting. Use your spacing scale to maintain generous whitespace around the text.

Designing the Footer

At the bottom of the page, create a footer with a slightly darker background color. Include your copyright text on the left and a row of social media icons on the right. Keep the footer clean and minimal.