Fundamentals of Web and Interface Design

Theory:

• The difference between UI, UX, Web, and Mobile design.
• Examples of good design in different styles.
• The role of a designer in a team. Who are PM, Dev, QA.
• Overview of tools: Figma, Photoshop, Illustration, AI assistants.

Practice:

• Creating an account in Figma. Interface overview.
• Collecting references + first moodboard in Figma.

Theory:

• Grids, blocks, spacing.
• Hierarchy, balance, contrast, white space.
• Basics of composition and Gestalt principles.

Practice:

• Building a layout grid in Figma.
• Exercises on element placement (headings, CTAs, photos).

Theory:

• How to choose fonts: overview of Google Fonts.
• Color: associations, accents, color palettes.

Practice:

• Building a color scheme for a website or mobile app.
• Creating text styles in Figma.

Theory:

• Who the user is and how to understand them.
• Personas, goals, usage scenarios.
• What UX research is (in simple terms).

Practice:

• Creating a simple user flow.
• Building a basic scenario using a “Project” example.

Theory:

• What a wireframe is. Why it’s important not to start with color.
• Low fidelity vs high fidelity.

Practice:

• Creating a homepage wireframe in Figma.
• Working with auto-layouts.

Theory:

• What a UI kit is. Brand colors, buttons, forms.
• Examples of Design Systems (Material, Apple).

Practice:

• Creating your own UI kit.
• Adding elements to the Figma library.

Theory:

• Structure of a landing page or mobile app.
• How to create a “user-friendly” design.

Practice:

• Designing the homepage (hi-fi layout).
• Working with components, styles, and text.

Theory:

• What responsive design is.
• How flex/grid works in layout adaptation.
• Common mistakes when creating a mobile version.

Practice:

• Developing a mobile version of the homepage.
• Comparing desktop/mobile: adapting content and UI.

Theory:

• How to prepare a layout for handoff.

Practice:

• Presentation of the final project.
• Feedback, review, and portfolio advice.