Designing Responsively

Responsive design shown across various device viewports

Modern designs prioritize being flexible and adaptable without any restrictions. With the wide variety of devices available in different sizes, especially with most people using mobile devices for information, responsive design is crucial. Responsive design comes with numerous benefits and involves implementing best user experience practices. This ensures that users enjoy a seamless and consistent experience, regardless of the type of device or screen they are using.

Responsive Design Explained

According to the Interaction Design Foundation, “Responsive design is an approach to web design in which the interface adapts to the device's layout, facilitating usability, navigation, and information seeking. Responsiveness is possible thanks to media queries, allowing the design to adjust automatically to the browser space to ensure content consistency across devices, and design elements being sized in relative units (%).”

Responsive design is essentially comprised of a few basic principles:

1. A fluid grid system

2. Media queries

3. Flexible content

Fluid Grid Systems

Columns, gutters, and margins as demonstrated in Material Design 3

A fluid grid system is a structure for consistent, clean layouts comprised of columns, gutters, and margins. When designs conform to this system, they are set up in such a way that they can transition nicely between device breakpoints.

Generally, 4 columns are used for mobile, 8 for tablet, and 12 for desktop using percentages for responsiveness rather than fixed values so that content adapts across various screen sizes. Content is placed and aligned in columns and spaced apart by gutters.

Media Queries

Media queries use CSS to render content to be adaptable to a variety of factors such as resolution, orientation, or screen sizes.

Breakpoints are used in media queries as a condition that changes the layout of a page for certain display sizes. The media queries overwrite styles that are changed by the breakpoint, specified by pixel values. It is recommended to start with the smallest viewport size and work up to the largest when designing for breakpoints - XS (no breakpoint/starting place), S (mobile), M (tablet), L (desktop), XL. Three of these S-M-L are generally required by default. Additionally, there are five viewports to consider:

1. Mobile portrait

2. Mobile landscape

3. Tablet portrait

4. Tablet landscape

5. Desktop

Flexible Content

All content needs to be flexible to respond to the different breakpoints and device sizes. Containers, images, text blocks, cards, and more should be considered and designed flexibly.

To demonstrate flexible content, we created a YouTube short video that shows how to create a responsive card. Check it out here.

benefits of responsive designs

Beyond the obvious benefit of having an optimal seamless boundaryless user experience regardless of the device used, there is a bevy of other potential benefits as well, such as:

• Improved SEO

• Increased time on the site or platform

• Return visitors

• Less time and resources spent fixing issues in development (when designing for responsiveness up front)

• Better interaction

• Increased sales

• …and more

Consider UX Design Principles

When designing for responsiveness, here are some UX considerations:

1. Mobile-first mentality - start with XS and work up from there

2. Design for 3 or more breakpoints

3. Apply consistent design patterns

4. Use a grid system

5. Don’t over-clutter - stick to simple, minimalistic designs

6. Use auto layout and minimum width constraints for wrapping (see our video for steps)

7. Apply flexibility to all content - images, text blocks, containers, cards

conclusion

In conclusion, flexible designs are imperative to meet the diverse demands of users across an array of devices. As mobile devices continue to dominate the landscape of information consumption, responsive design is more necessary than ever before. By embracing a fluid grid system, employing media queries, and incorporating flexible content, responsive design becomes not just a methodology but a commitment to delivering a seamless user experience.

Apply these responsive UX principles and get savvy!

Citations

1. Interaction Design Foundation - IxDF:

   • Source: Interaction Design Foundation - IxDF. (2016, June 3). What is Responsive Design? Interaction Design Foundation - IxDF. https://www.interaction-design.org/literature/topics/responsive-design

2. Seobility:

   • Source: Seobility. (n.d.). Media Queries. https://www.seobility.net/en/wiki/Media_Queries

3. Kinsta:

   • Source: Author Last Name, Author First Initial. (Year, Month Day). Title of the Article. Kinsta. https://kinsta.com/blog/responsive-web-design/

Elevate User Experience with Engaging Hover Effects

As UX designers, we aim to create engaging experiences that captivate users and encourage them to explore further. When creating designs for a product or interface, adding interactivity effects can aid in bringing designs to life and making them feel more like a live product. These effects can inform users about functionality, lead them to their goals, and add a sense of liveliness to the interface. Hover effects are one way to achieve this and make designs more dynamic. Therefore, mastering the creation of hover effects is a skill worth honing.

The Importance of Prototyping Effects

Prototyping is essential to the design process, allowing designers to demonstrate and test how users interact with a product. The use of prototypes helps designers effectively communicate their vision to stakeholders and conduct usability tests with users to obtain valuable feedback that can be used to iterate and improve designs. Interactions, such as hover effects, enhance the effectiveness of this process and lead to obtaining relevant insights before the development stage begins.

Consider UX Design Principles

When applying the hover effect, UX principles to consider are:

1. Responsiveness: Hover is a natural interaction for desktops, but it doesn’t work on mobile or other touch interfaces. Therefore, it is essential to research and provide alternative ways for users to discover information on these platforms.

2. Guidance: Focus on hover effects that guide users to their goals and provide them with pertinent information.

3. Relevancy: Fancy hover effects are useless and can even be distracting if they aren’t used appropriately. Thoughtful design means contemplating which interactions are meaningful to users.

4. Testing: If you aren’t sure if hover effects should be used, test them on users. Do an A / B test or simply ask five users to provide feedback and find out!

5. Consistency: Consider brand voice and create a cohesive experience throughout your product or interface so a random hover effect doesn’t feel jarring to users.

6. Avoid Overwhelming Users: If there are too many hover interactions, it can distract, take away from the experience, and feel overwhelming to users. Be thoughtful in your designs and test them if you’re not sure.

Crafting Dynamic Hover Effects in Figma

So, how do you craft hover effects, and when should these effects be applied?

Creating captivating hover effects is as easy as five simple steps. Apply them to instances where you want to relay something to the user or make an interaction feel dynamic.

Figma’s prototyping options make it easy to customize the hover effect experience

1. Set the Stage: Select an element, such as a button or a card, and consider what you want the effect to convey.

2. Duplicate the Element: Duplicate the selected element to apply the hover effect.

3. Create the Hover State: With the duplicated element selected, modify its properties to reflect the desired hover effect. This can include changes to color, size, opacity, or any other visual attribute that enhances interactivity and visual interest.

4. Animate the Transition: Using Figma's built-in prototyping tools, animate the transition between the original and hover state by choosing the trigger: While hovering -> Change to. Experiment with easing functions to give your hover effect a natural and polished feel.

5. Fine-tune and Iterate: Preview your hover effect to assess its impact and make necessary adjustments. Pay close attention to timing, responsiveness, and overall coherence with the rest of the design. Iterate until you achieve the desired effect.

See a how-to video on this topic on the UX Design Savvy YouTube channel.

conclusion

Prototyping hover effects empower designers to inject life into static designs, fostering a more immersive and engaging user experience. By following these steps and experimenting with different animations, designers can fine-tune their hover effects and create interfaces that captivate and delight users, inform stakeholders, and gain insights and feedback to iterate and improve upon.

Mastering the art of creating hover effects requires practice, exploration, and a deep understanding of the principles that underpin engaging interactions. As UX designers, let us craft remarkable experiences that users will delight in.

Now you know! It is your turn to give hover effects a try. Get savvy!