Designing Interactive Web Pages with Figma
A course by Eva Sánchez ClementeUX/UI Designer
A course by Eva Sánchez Clemente, UX/UI Designer
Learn to design interactive, eye-catching, and easy-to-program web pages based on user behavior
According to UX/UI designer Eva Sánchez, in order to create a web page from scratch it's essential that you take two things into account: the client project and user behavior. From there, it's down to your own interests, stimuli, and culture to determine the visual details.
In this online course, learn to understand a brief and then go a step further to add your own artistic vision to each project. Throughout your journey alongside Eva, see how to use fonts, images, and composition to create intuitive web-design proposals that enrich both user experience and interaction.
What will you learn in this online course?
15 lessons & 27 downloads
Search for references and the mood board
10 minutes, 10 seconds
UX: structure and content of the web
15 minutes, 40 seconds
Color, typography and composition
19 minutes, 53 seconds
Design for a “mobile first” context
14 minutes, 25 seconds
Prepare the file
8 minutes, 35 seconds
The work process
6 minutes, 20 seconds
What's included in this course?
Begin by meeting Eva Sánchez and hearing all about experiences and professional career. She also talks about her biggest influences and sources of inspiration, both from her own sector as well as other disciplines.
Before getting started, get the inside scoop on the current climate in the world of web design. Springboarding from there, take a look at how to summarize a brief. Your teacher then walks you through the research process to create a mood board and kick off your final project.
It's time to turn your attention to the practical side of things, playing with fonts, color, and composition without forgetting about content definition or interface structure. Eva also explains the importance of designing for mobile for a complete experience.
With the design phase finished, experiment with interactions and movement. Then build a prototype in Figma and After Effects and prepare your file for programming as well as learn how to compress it for anyone else who might be working on the same project.
Next, Eva shows you how she works and how to revise a web project once it's been programmed. To round out the course, she gives you a few tips on management and promotion to help you increase your visibility and start to get noticed!
Recommended software & tools for this course
What is this course's project?
Put together an interactive, attractive, and functional web project.
Projects by course students
Who is this online course for?
Anyone looking to update and broaden their knowledge in the world of digital experiences.
Requirements and materials
In order to complete this course, you need a computer with internet access and basic notions of an interface design tool, preferably Figma, as well as graphic design.
Reviews
- canyelles_martaPLUS1 month ago
Me ha parecido muy interesante para comprender cómo organizar el trabajo y estructurar el proceso de diseño. Lo que más me ha aportado han sido las referencias de inspiración y los recursos compartidos.
- 3 months ago
I really enjoyed this course. I would like to know a bit more about the after effects precess on creating interactions. but i can recommend it.
- 3 months ago
Excelente curso, me ha brindado herramientas para gestionar proyectos UX UI.
- 3 months ago
Der Kurs ist sehr gut aufgebaut und verständlich, ich kann meine Kursziele gut erreichen. Ich konnte Einiges lernen, Danke.
- 4 months ago
Excelente explicacion, dinamico y útil
From there, she began to make a name for herself and collaborate with other independent studios including Fuego Camina Conmigo, Ophion, Rebeka Arce Studio, and Réplica Studio, among others. She currently works at Jam3, an international agency dedicated exclusively to design centered around digital innovation and experience.
Content
- U1
Introduction
- About Me
- Influences
- U2
Understand and define the project
- The context of web design
- The importance of the briefing
- Search for references and the mood board
- U3
Design the web experience
- UX: structure and content of the web
- Color, typography and composition
- Design for a “mobile first” context
- U4
Prototype, animate and refine the design
- Basic prototyping in Figma
- Animate elements in After Effects
- Prepare the file
- U5
Present, communicate and collaborate
- The work process
- Orchestrate a web project
- Pixel pushing: take care of your project
- Publish and promote your work
- FP
Final project
- Designing Interactive Web Pages with Figma
What to expect from a Domestika course
Learn at your own pace
Enjoy learning from home without a set schedule and with an easy-to-follow method. You set your own pace.
Learn from the best professionals
Learn valuable methods and techniques explained by top experts in the creative sector.
Meet expert teachers
Each expert teaches what they do best, with clear guidelines, true passion, and professional insight in every lesson.
Certificates
PLUSIf you're a Plus member, get a custom certificate signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Get front-row seats
Videos of the highest quality, so you don't miss a single detail. With unlimited access, you can watch them as many times as you need to perfect your technique.
Share knowledge and ideas
Ask questions, request feedback, or offer solutions. Share your learning experience with other students in the community who are as passionate about creativity as you are.
Connect with a global creative community
The community is home to millions of people from around the world who are curious and passionate about exploring and expressing their creativity.
Watch professionally produced courses
Domestika curates its teacher roster and produces every course in-house to ensure a high-quality online learning experience.
FAQs
You’ll learn how to craft interactive digital experiences, apply the latest UX/UI trends, structure projects with wireframes and prototypes, manage briefings, build mood boards, and develop a professional web design portfolio.
This course is aimed at those with intermediate knowledge of graphic or digital design, but you don’t need to be an expert. Basic familiarity with digital design tools is recommended.
You’ll need a computer with internet access and software like Figma and After Effects. Having accounts on platforms like Dribbble and Raindrop is recommended to organize inspiration and resources.
You’ll learn how to select and showcase projects, apply current visual concepts, and structure your web portfolio to stand out in creative communities and boost your career opportunities.
You’ll primarily work with Figma, After Effects, and Chrome extensions for design. You’ll also learn how to gather inspiration on Dribbble and organize resources using Raindrop.
The course teaches techniques for creating effective mood boards, collecting and organizing visual references, and using digital tools to capture and classify inspiration based on your project.
Yes, it covers and applies trends like neumorphism, brutalism, flat design, and glassmorphism so you can experiment with and adapt innovative visual styles in your web projects.