Fundamentals of Web and Interface Design
Course Goal
Learn the fundamentals of web and interface design: from UX research and prototyping to UI creation and AI tool integration. Participants will be able to develop their own web prototype and present it to the team.
Training Format:
- Online / offline / hybrid
- Practical cases, workshops, interactive sessions
- Participant support during training in a private chat
- Group training: 7600 UAH/hour. Group of up to 12 participants
- Individual mentoring: 2 500 UAH/hour
What Will Graduates Gain?
The problem this course solves
Many projects have awkward or unaesthetic interfaces due to a lack of knowledge about UX/UI and modern tools. This course solves this problem by providing practical techniques and skills that help create understandable and attractive web solutions.
Program
1
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.
2
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).
3
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.
4
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.
5
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.
6
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.
7
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.
8
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.
9
Theory:
- How to prepare a layout for handoff.
Practice:
- Presentation of the final project.
- Feedback, review, and portfolio advice.
