Web User Interface and Design with Figma

A website is defined as a collection of interconnected pages on the internet accessible to any user online. It functions as a digital book or space used to store and present information, pictures, videos, and games.
Professional websites are designed to make interaction enjoyable and simple through the use of engaging visuals, interactive elements, and clear layouts.

User Interface (UI) refers to the visual elements of a website designed to make it attractive, readable, and easy to navigate.
Key components of UI include:
- Buttons
- Menus
- Images
- Text
A well-designed UI functions as a control panel for the website, enabling users to perform specific tasks such as reading articles, watching videos, or playing games without confusion.

User Experience (UX) focuses on the functionality of a website and the emotional response of the user during interaction.
The goal of UX is to ensure the site is interactive, easy to navigate, and enjoyable to use.
Website design requires a dual focus: UI (how it looks) and UX (how it works). Designers arrange elements to guide user attention and streamline navigation.

Header Area: The topmost section of a website. It typically contains the site name, logo, and the navigation bar.
Information Area: The central part of the website containing the main content, such as text, images, links, and interactive buttons.
Footer Area: Located at the bottom of the page, it usually houses contact details, an "about" section, and supplemental links or resources.

Figma is a web-based, collaborative interface design tool.
It is used for creating user interfaces for websites, mobile applications, and other digital products.
The tool supports three primary design phases: UI design, UX design, and prototyping.

To begin using Figma, users navigate to https://www.figma.com/ and select the 'Get started for free' option.
Users must log in via a Google account by selecting 'Continue with Google'.
The 'Drafts' option allows designers to save work-in-progress iterations privately without publishing them.
To start a new project, click the '+ Create new' button and select 'Design file' from the dropdown menu.

The workspace is divided into four primary areas:
- Toolbar: Contains tools for creating and editing UI elements, such as the Frame tool, Text tool, and Rectangle tool.
- Canvas: The central staging area where design elements are arranged.
- Layers Panel: Displays the hierarchical structure of the design, showing all added objects and layers.
- Properties Panel: Used to customize specific element attributes, such as size, color, and font style.

Frame Setup: To begin a layout, select the 'Frame' tool from the toolbar. In the Properties panel under the 'Design' menu, choose the 'Desktop' category and select the 'Desktop' option to ensure dimensions align with industry standards.
Interface Versioning: If the interface appears different, use the question mark icon at the bottom-right and select 'Use new UI'.
Background Customization: Modify the background color using the 'Fill' option in the Properties panel. Click the small square under 'Fill' to open the color panel and select a background color.
Adding Website Title: Use the 'Text' tool to type the website name (e.g., "BrainWiz"). Set the font size to $60$ and the style to 'Bold' in the Properties panel.
Tagline: Add a tagline below the title with a font size of $25$ and the type set to 'Regular'.
Navigation Menu: Use the 'Text' tool to create navigation options such as 'Home', 'Course', 'Admission', 'About', and 'Contact Us'. Use the 'Move' tool to arrange these components within the header.

Information Text: Headlines or summary text giving the purpose of the site should use a font size of $85$ and the 'Bold' style.
Adding Images: Click the down arrow next to the 'Rectangle' tool and select the 'Image' option (shortcut: $Ctrl + Shift + K$ ). Select a saved image from the computer and upload it. Images can be resized by clicking and dragging the corners.
Interactive Buttons:
- Select the 'Rectangle' tool to draw a button shape.
- Use the 'Fill' option to change the color.
- Change the 'Corner radius' value to $15$ to create smooth, rounded edges.
- To create a second button, select the original and press $Ctrl + D$ to duplicate it.
- Add labels (e.g., "Book Now", "Learn More") inside the rectangles using the 'Text' tool.

Dividing Line: To separate the footer from the information area, select 'Line' from the 'Rectangle' tool dropdown menu. Hold the 'Shift' key while clicking and dragging horizontally to ensure a perfectly straight line.
Line Styling: Set the line 'Weight' to $2$ to increase thickness and the 'Opacity' to $25\%$ to make it subtle and transparent.
Contact Information: Use the 'Text' tool to add essential contact details such as physical address, email address, and phone numbers in the space below the dividing line.