Foundations of Web Design

Instructions:

Watch the Following YouTube Videos to Get Started with Figma:

• Figma tutorial for Beginners: Complete Website from Start to Finish
• world's shortest Figma course

Setup Your Figma Workspace:

• Go to Figma and create a free account if you don't already have one.
• Once logged in, create a new project.

Create a New Wireframe:

• Open your new project and create a new frame by clicking the Frame tool (or press F).
• Set the dimensions of the frame to a standard desktop resolution, such as 1440x900.

Design a Multicolumn Layout:

• Within the frame, design a wireframe for a multicolumn website layout.
• Your layout should include the following sections:
  • Header: A full-width section for the website's header.
  • Navigation: A horizontal navigation bar.
  • Main Content: A multicolumn section where you have at least two columns side by side.
  • Sidebar: A side section that can contain additional information or links.
  • Footer: A full-width section for the website's footer.

Use Figma Tools and Components:

• Utilize Figma’s rectangle, text, and line tools to create the structure of your wireframe.
• Add placeholder text and shapes to represent images, navigation links, and content areas.

Add Annotations:

• Utilize Figma’s rectangle, text, and line tools to create the structure of your wireframe.

Viewing Your Wireframe:

• Once you have completed your wireframe, use Figma’s presentation mode to view and present your design.
• Click the “Present” button in the top right corner of Figma to view your wireframe as a full-screen presentation.