This course equips you with essential skills to create visually compelling and user-friendly designs. You’ll learn core design principles, wireframing techniques, typography best practices, and prototyping using tools like Adobe XD and Figma. By the end, you’ll be able to build structured layouts, apply effective color schemes, create responsive typography, and present your designs confidently.
You’ll start with visual design foundations, exploring balance, contrast, emphasis, and rhythm. Next, you’ll dive into wireframing using Balsamiq, Adobe XD, and Figma, followed by hands-on typography and layout design exercises.
The course also covers feedback handling, sketching, prototyping, and collaboration with developers to bring your ideas to life. Through real-world exercises, you’ll refine your skills in presenting and iterating based on user needs.
Ideal for aspiring UX/UI designers, product designers, and developers, this course requires no prior experience, though basic design familiarity is helpful.
Overview
Syllabus
- Visual Design Foundations
- In this module, we will build a strong foundation in visual design by exploring its core elements and principles. You will delve into fundamental concepts like line, shape, color, and texture, and learn how they interact to create aesthetically pleasing and functional designs. By mastering these basics, you will be prepared to craft designs that are both impactful and harmonious.
- Handling Feedback as a UX Designer
- In this module, we will uncover the critical role feedback plays in shaping exceptional UX designs. You will learn to navigate the complexities of handling feedback by exploring how to request constructive input, embrace a growth-oriented mindset, and transform critiques into actionable improvements. This section equips you with the tools to foster productive dialogue and evolve as a designer.
- Receiving UX Feedback by Example
- In this module, we will explore real-world scenarios to better understand how to receive and respond to different kinds of UX feedback. Through examples, you will learn how to handle constructive criticism, manage unhelpful or prescriptive comments, and maintain a professional demeanor in all situations. This practical approach will strengthen your ability to turn feedback into opportunities for growth.
- Collecting Design Inspiration
- In this module, we will explore essential sites and tools for collecting design inspiration that fuel creativity and innovation. You’ll learn how to strategically source ideas, compare platforms, and create an organized repository for your design projects.
- Introduction to Wireframing
- In this module, we will delve into the fundamentals of wireframing, including its purpose, benefits, and practical applications. Through a mix of demonstrations and hands-on activities, you’ll learn to create wireframes on paper and with tools like Balsamiq and Adobe XD. By the end, you’ll understand the strengths and limitations of each approach and be equipped to share and refine your wireframes effectively.
- Practice Sketching
- In this module, we will practice sketching by tackling real-world design problems and proposing creative solutions. You’ll develop your ability to visually translate concepts into sketches, ensuring clarity and effectiveness in presenting your ideas.
- Practice Wireframing
- In this module, we will apply wireframing techniques to address specific design challenges. You’ll practice building wireframes as a problem-solving tool, focusing on clarity, functionality, and user-centric solutions.
- Typography for Designers
- In this module, we will uncover the art and science of typography, from foundational principles to advanced applications. You’ll learn essential terminology, explore the differences between print and digital typography, and discover how to select and combine typefaces effectively. Through hands-on exercises, you’ll master typographic hierarchy, responsive design, and variable fonts, ensuring your typography elevates both form and function in your designs.
- Before and After: Typography
- In this module, we will analyze and transform typographic designs, comparing their "before" and "after" states. By revisiting initial layouts and refining them with advanced typographic techniques, you’ll gain a deeper understanding of how thoughtful typography enhances both aesthetics and user experience.
- Designing Layouts
- In this module, we will focus on designing cohesive and functional layouts by integrating multiple design elements. You’ll learn to refine text content, structure visual hierarchy, align elements using grids, and select colors that enhance usability and accessibility. By mastering these techniques, you’ll create layouts that are both visually appealing and user-friendly.
- Creating Mockups
- In this module, we will explore the essentials of creating mockups, from understanding their purpose to preparing and building them. You’ll learn step-by-step techniques to create professional mockups, streamline your process, and effectively communicate your designs to stakeholders.
- Before and After: Color
- In this module, we will evaluate and refine color palettes by comparing their "before" and "after" states. You’ll learn how to address common color-related issues and implement changes that improve the overall aesthetic and functionality of your designs.
- Before and After: Layout
- In this module, we will examine and transform layouts, focusing on the improvements made between "before" and "after" iterations. You’ll gain insight into how adjustments to structure and design elements can significantly enhance the effectiveness and aesthetics of a layout.
- Prototyping with Adobe XD
- In this module, we will dive into prototyping with Adobe XD, covering everything from basic tools to advanced interactive features. You’ll learn to create artboards, add shapes, images, and text, and build functional prototypes with interactivity. By the end, you’ll be equipped to design and share professional prototypes that bring your ideas to life.
- Prototyping with Figma
- In this module, we will explore prototyping with Figma, from project setup to creating interactive designs. You’ll learn how to arrange elements, draw shapes and curved lines, and build reusable components. By the end, you’ll be equipped to design complete interfaces and share interactive prototypes seamlessly.
- Practice Prototyping
- In this module, we will apply prototyping skills to solve real-world design challenges. You’ll work through the process of creating and refining an interactive prototype, focusing on effectively translating ideas into functional solutions.
- Collaborating with Developers
- In this module, we will focus on fostering productive collaboration with developers throughout the design process. You’ll learn strategies for clear communication, bridging the gap between design and development, and ensuring a seamless final handoff of your designs for implementation.
- Presenting Design Ideas
- In this module, we will focus on presenting design ideas effectively, from understanding your audience to structuring a compelling narrative. You’ll learn how to set clear goals, communicate your problem-solving approach, and outline actionable next steps, ensuring your designs resonate and gain stakeholder buy-in.
Taught by
Packt - Course Instructors
