Week 9: Web Design

In today’s digital world, creating websites and applications that are both responsive and accessible is crucial. Responsive web design (RWD) ensures your site or app looks and functions well on different devices and screens. In a recent mobile consumer report, Deloitte explains that “almost every developed country surveyed has at least 90 percent mobile phone penetration.” I have to ensure that my UX prototype functions optimally within mobile size. At the same time, with proper consideration of accessibility standards, you shall provide people with disabilities and sensory issues the ability to use your product.

  1. Planning to implement accessibility and RWD from the design stage

In this blog post, we’ll discuss the importance of RWD and accessibility; I’ll detail how I ensured that my UI design adapted from my UX wireframes to meet W3C accessibility standards by considering things like colour contrast & font size.

💡 The Importance of Responsive Web Design Responsive design means that your site adapts to the screen size of the device being used, whether it’s a phone, tablet, or desktop. This is important for user experience, as people expect sites to work well on all devices. RWD also makes it easier for search engines to index your site, improving your SEO rankings. Some standard responsive design techniques include using fluid layouts, flexible images, and media queries.

Some examples of these responsive design techniques are as follows 🧠

📐Grid systems: Grid systems like CSS Grid and Flexbox allow designers to create flexible layouts that can adapt to different screen sizes. These systems make it easy to create responsive designs without relying on fixed widths or positioning.

👾 CSS units: CSS has several units that are ideal for creating fluid layouts, including percentages, viewport units, and ems. These units allow designers to create smooth layouts across different devices and screen sizes.

🖼️ Responsive images: One of the biggest challenges in creating responsive designs is ensuring images look good on all devices. Modern methods for creating flexible images include using the srcset attribute, which allows you to specify multiple image sources for different screen sizes, and the picture element, which lets you specify different images for different device sizes.

📲 Media queries: Media queries are a powerful tool for creating responsive designs. Using media queries, you can specify different styles for different screen sizes, resolutions, and orientations. This allows you to create great designs on all devices, from phones to large desktop screens.

📦 CSS frameworks: CSS frameworks like Bootstrap and Foundation provide a set of pre-built CSS rules and components that can help you create responsive designs quickly and easily. These frameworks are designed to work with modern web technologies like CSS Grid and Flexbox, making creating fluid layouts and flexible images easy.

1.1 Offical standards to follow

Understanding Web Accessibility Standards Accessibility means that your site can be used by people with disabilities, including those with visual impairments, hearing impairments, and motor disabilities. The Web Content Accessibility Guidelines (WCAG) are a set of guidelines created by W3C that outline how to make your site accessible. By following these guidelines, you can ensure that your site is usable by as many people as possible. Some of the guidelines include providing alternative text for images, using descriptive link text, and ensuring that colour contrast meets minimum standards.

1.2 Applying Accessibility to my design

Ensuring Accessibility was applied to my UI Design. I used tools such as this colour contrast checker, which lets people with visual impairments distinguish between different elements on your site. I checked all of my chosen colour palettes assigned for the UI and ensured it was acceptable by the WCAG, specifying a minimum contrast ratio of 4.5:1 for standard text and 3:1 for large text. You can use online tools to check the contrast ratio of different colour combinations. For example, I checked my chosen button color #3F30E2 with a foreground color of #000000, and found that it passed the contrast test.

Using a contrast checker will give you a ratio to confirm if your chosen UI colour palette passes the requirements set out by WCAG

1.3 Web accessibility checker

Whilst in the design stage, it’s essential to start the design process with solid fundamentals of accessibility understood and applied. There are various tools to help developers with an existing site, such as the web disability simulator. This simulator can apply the effects of disabilities to digital products, showing users with standard senses the ways that a user with a disability would be affected. The simulations range from sight so, for example, colour blindness, through to concentration disability simulations.

1.4 Self-criticism usability focus vs design focus

The design process for the UX artefact in this module has been an enormous learning curve; at the Master’s level, we have applied a deeper focus to our user research, sketching and wireframing, information architecture and usability tests. It is easy to reach this stage and let responsive design and accessibility fall flat as there is so much applied focus to the overall user experience, I am now keen to get a shiny polished prototype out there.

1.5 How I plan to implement accessible design into my work

In the future, I shall, of course, keep up to date with accessibility standards so that I know what is required from my designs, I shall also use the five why methods to apply critical reflection to who my users may be, this shall allow me to empathise on a deeper level for users needs by considering the users five whys. This could look something like this:

Why? Should accessibility considerations be included in UX design?

Why? Is it important for all users to have equal access to digital products?

Why? Does accessibility enhance the user experience?

Why? Should businesses prioritize accessibility in UX design?

Why? Is it more cost-effective to include accessibility from the start of the design process?

The Five Whys technique is a valuable tool in the realm of design as it helps uncover the underlying causes of design problems, leading to more effective and innovative solutions. By repeatedly asking “Why?” and delving into the root causes of design challenges, designers can gain deeper insights into the factors contributing to the issues at hand (Brocklesby, 2016). When applying this to empathy focus for the user needs on an accessibility level, you can start to forge a better method of designing for all user’s needs, applying the full spectrum of requirement focus to the user research / user testing process.

2. Apply a responsive design to my UI

Best Practices for Designing Responsively Ensure that your UI design meets accessibility standards; it’s essential to involve accessibility considerations early in the design process. This means working closely with your UX team to ensure that wireframes and prototypes are accessible by testing your designs with the correct accessibility standard measurements. Other best practices include using the correct responsive web design tools for your UI design.

2.1 Grids

Grids in design tools like Figma offer several advantages and play a crucial role in adhering to responsive design standards. Here are some of the benefits of using grids in Figma:

  1. Consistency: Grids provide a consistent structure and layout system for your designs. You can establish a visual hierarchy and maintain consistent spacing between elements using grids, resulting in a more harmonious and professional design.
  2. Alignment: Grids help align elements precisely. They enable you to position and distribute design elements evenly, ensuring everything is visually balanced and aligned. This alignment is essential for responsive design, ensuring elements adapt and adjust consistently across different screen sizes and devices.
  3. Efficiency: Grids save time and effort. Instead of manually measuring and aligning each element, grids allow you to snap design elements to predefined columns and rows. This speeds up the design process and ensures accuracy.
  4. Responsive Design adherence: Grids are essential for creating responsive designs that adapt well to different screen sizes and orientations. By defining flexible grid systems, you can easily rearrange and resize elements based on the available space. This adaptability ensures that your designs remain visually appealing and functional across various devices, from desktops to smartphones.
  5. Scaling: Grids enable scalability. When designing with a grid, you can quickly scale your designs to different sizes without losing the overall structure and proportions. This scalability is crucial for creating responsive layouts and accommodating different screen resolutions.
  6. Communication and Collaboration: Grids enhance communication and collaboration within design teams. Using grids as a reference point, designers and stakeholders can easily discuss and provide feedback on the layout, spacing, and alignment of elements. Grids are a common language for design discussions, facilitating effective collaboration and reducing misunderstandings.

Figma grids provide a systematic design approach, ensuring consistency, alignment, and scalability. They empower designers to create responsive layouts and adhere to design standards across various devices, leading to better user experiences and efficient design workflows.

2.2 Font considerations relating to Accessibility

When considering font for my UX artefact, I chose the Ofelia Text font from Adobe Fonts; there were accessibility-based reasons for selecting this; I felt it had minimum character complexity or ambiguity and held excellent typeface readability.

Conclusion

Creating a product that is both responsive and accessible can be challenging, especially for me on this assignment, as there was so much mental focus applied to the UX process prior. Still, it’s essential to focus on accessibility and responsive designs from the offset when starting the UI design to make a good user experience available to all users.

References

Deloitte. (n.d.). Global Mobile Consumer Survey: Second Edition. [PDF]. Available at: https://www2.deloitte.com/content/dam/Deloitte/us/Documents/technology-media-telecommunications/us-global-mobile-consumer-survey-second-edition.pdf (Accessed: 17 May 2023).

Brocklesby, J. (2016). Systems thinking and the five whys technique: Tools for causal analysis. Systems Research and Behavioral Science, 33(5), 712-720.

Leave a Reply

Your email address will not be published. Required fields are marked *