UX Project Studies
Responsive Design & Accessibility
Goal: design and prototype responsive pages in accordance with accessibility standards
Objective 1
-
Design a mobile-friendly and responsive website for a music band
Objective 2
-
Build an accessible website that includes alt text, headings, and color contrast
Background
Many websites are created without considering accessibility issues and responsive designs, resulting in poor user experience. The project aimed to cover the basics of accessibility standards and responsive designs by redesigning a music band's website. By the end of this project, I was able to identify accessibility concerns and think of accessible designs in daily practice.
Problem 1: Poor Responsive Design
The music band's website does not have a mobile-friendly website. This can be seen by the hamburger menu that overlaps with the title. Additionally, the mobile version has an identical layout to the desktop version, except for the tour dates which are responsive. The website was most likely designed for desktop and then shrunken for the mobile version. The solution was to build a website that was mobile-friendly and to design with the mobile version in mind.
Problem 2: Low Color Contrast
The music band's website has very low color contrast, making it difficult to see text and buttons. This poses an issue for those who are colorblind or experience low vision.
Building Prototypes in Figma
Objective 1:
Mobile-First Design
Redesigned the band's website with the mobile version in mind. The mobile version considers hand gestures and swipes for navigating between albums, making it easier for users to browse the band's work as a whole. Additionally, designed a responsive website for the home page.
