Recommended resources
Courses
UX Design Foundations
Design Terminology
UI Components I
Color Psychology
Common Design Patterns
Accessibility Foundations
Wireframing
UI Components II
UX Writing
Design Composition
Mobile Design
Typography
UX Design Patterns with Checklist Design
HTML Foundations
Enhancing UX Workflow with AI
CSS Foundations
Introduction to Figma
3D Design Foundations
Information Architecture
Apple Human Interface Guidelines
Introduction to Design Audits
AI Fundamentals for UX
Government Design Foundations
Lessons
Intro to Design Grids
Devices and Display Terminology
Responsive vs. Adaptive Design
What Is AI-Powered UX?
Human-Centered AI Principles
Exercises
Tutorials

Responsive Type Scales: Part 1

Creating Reusable Components in Figma: A Step-by-Step Tutorial
Projects

Uxcel Pride Month Scholarship Program

Professional Profile Page Design

Forever Homes - Responsive Mobile Landing Page

Wireframing for Video Streaming TV mobile app

Ghost in the kitchen
FAQs
Adaptive design is a design approach that involves creating a single website or application that can adapt and respond to the needs of different users and devices. This is typically achieved by designing the layout and content of the website or application to automatically adjust and rearrange itself based on the specific characteristics of the device or browser being used to access it.
Adaptive design is often used as an alternative to responsive design, which involves creating a single design that can automatically adjust to fit the screen size and resolution of any device. Unlike responsive design, which relies on a single set of code that can be scaled up or down to fit different screen sizes, adaptive design involves creating multiple versions of the same design, each of which is optimized for a specific screen size or device.
Adaptive design is typically used when a website or application needs to support a wide range of devices and screen sizes, and when it is important to optimize the user experience for each specific device. It can also be useful in cases where a website or application needs to support specific features or functionality that may not be available on all devices.
Adaptive design is a design methodology that focuses on creating systems and interfaces that can adapt to the needs and capabilities of different users and devices. There are several key principles of adaptive design, including:
- Flexibility: An adaptive design should be able to adapt to different users, devices, and contexts, and be able to adapt to changes over time.
- Progression: An adaptive design should provide a progression of options, from simple to more complex, so that users can gradually increase their engagement with the system or interface.
- Modularity: An adaptive design should be modular, meaning that different components can be easily added, removed, or replaced as needed.
- Test-Driven: An adaptive design should be developed through a test-driven approach, where design decisions are made based on user testing and feedback.
- Personalization: An adaptive design should take into account the personal preferences and needs of individual users in order to create a more personalized and engaging experience.
- Accessibility: An adaptive design should be accessible to users with disabilities, providing them with alternative ways of interacting with the system or interface.
- Performance: An adaptive design should be optimized for performance, so that it can work seamlessly and smoothly on different devices and networks.
These principles are iteratively and incrementally applied in design process, along with user research to gain insight on user needs and preferences. This helps to create a more usable, effective and efficient system that can meet the needs of a wide range of users and devices.
Adaptive design and responsive design are both methods of creating systems and interfaces that can adapt to different devices and screen sizes, but they have some key differences.
Responsive design is a design methodology that focuses on creating flexible and fluid layouts that can respond and adapt to different screen sizes and resolutions. The layout of a responsive website or application is created using a combination of CSS media queries and flexible grids, so that it can adapt to the size of the screen on which it is being viewed. One codebase is used for all screens and devices.
Adaptive design, on the other hand, is a design methodology that focuses on creating custom layouts and experiences for specific devices and screen sizes. With adaptive design, the layout and functionality of a website or application are tailored to specific devices and screen sizes. This is done by designing different layouts and interactions for different devices, and using different codebases for different devices.
In summary, responsive design is about creating a flexible layout that adapts to any screen size, whereas adaptive design is about creating specific layouts for specific devices and screen sizes.
Responsive design is generally considered more efficient and cost-effective since it only uses one codebase and it can be easily maintain. On the other hand, Adaptive design may offer better performance and user experience by tailoring layouts and interactions to specific device and screen sizes. Which approach is best will depend on the specific goals of the project and the devices that it will be primarily accessed on.