Week 9: Web Design

Grids and Layouts

This week I learnt about using grids to aid with the layout of my designs. I was pleased to find this feature in Figma and instantly saw the benefits of aligning various objects and elements to the four-column grid. I’ve come to realise that grids and layouts provide structure, acting as a vehicle for communicating the content on a page or screen (Graver and Jura 2012). Although they might go unnoticed, layouts play a pivotal role in the effective transfer of information (Steane 2013). I found it somewhat reassuring to utilise a grid in my visual designs and was interested in the ability to briefly deviate from a structure for the benefit of visual aesthetics.

Going forward, I’ll continue to utilise grids as a means of providing structure to my designs. I’m fascinated by their ability to facilitate communication while remaining somewhat invisible, reminding me of my interest in Service Design and Ou’s (2017) belief that the best experience is no experience. I’m curious about designing services due to their intangible nature and, like that of grids and layouts, their invisible presence. I have a desire to design something so well that no one notices, then point out what I've designed after they’ve used it.

Responsive Design

After exploring grids and layouts, I focussed my attention on responsive design, covering its origins, characteristics and the necessity to implement it in the world of small-screen mobile devices (Simmons 2013). With that in mind, I set about recreating one of my app screens so it would fit a medium-sized tablet display. I used a 1080x1420 frame with a nine-column grid and redesigned the layout of my original screen to maintain the user experience and visual appearance (see below).

When recreating my designs in a responsive layout, I found myself reconsidering various elements such as the alignment, proximity and grid attributes. I found it challenging to transform my designs from a smartphone layout to that of a tablet-sized website, but persisted and finalised my design. The Interaction Design Foundation (2022) suggests designing for mobile first as more intuitive designs are required for smaller screens. When scaling the designs up for larger displays, flexibility should be the key focus when considering layouts, text and images. These were factors I explored when manipulating my mobile design and I’m pleased with the outcome.

For future projects, I’ll certainly look to design with a mobile-first perspective. It makes sense that smaller screens require more intuitive design, thus improving efficiency and creating more intuitive desktop sites too. Today, around two billion people access the internet via their smartphones only, and by 2025, this number is expected to be more than double that (Morales 2021). With that in mind, it would be impossible for me to overlook mobile-first design in future.

Accessibility

Accessibility has been prevalent at every design stage and I focus my attention on it this week. Through conducting an accessibility review of my designs, I discovered certain areas that failed the W3C Web Accessibility Initiative’s (2022) Web Content Accessibility Guidelines (WCAG 2). As such, I set about inspecting the colour contrast ratios, text sizes and colour combinations from the perspective of colourblind users.

As I reviewed the accessibility of my designs, I was worried about the fact that I hadn’t done so sooner. Luckily there were only a few areas I needed to improve, but I quickly realised the potential for delays and scope creep if widespread issues had gone unnoticed till late in the project. Like the Interaction Design Foundation’s (2022) suggestion of designing with responsiveness in mind, Hechanova and DiMichele (2019) recommend accessibility-first design, thus ensuring compliance standards are met early on and throughout a project. This wasn’t something I’d considered at the beginning, but now have a much clearer understanding of the benefits of doing so. Some of the changes and considerations I made can be seen below:

Text sizes	Colour contrast issues
Colourblind test

In the planning and design stage of my future work, I’m going to ensure accessibility is a pertinent feature. I make use of accessibility features such as text-to-speech readers to support my dyslexia, and I certainly feel that content is sometimes inaccessible if the screenreader has trouble processing it. In quoting Regine Gilberts, Brathwaite (2021) asks users to imagine being unable to access 90% of the websites or apps they use on a daily basis and to consider this feeling like that of a disabled user. In my opinion, it is simply unfair to overlook accessibility when designing user experiences and I plan on learning more about what I can do to facilitate accessibility in future work.

---

References

BRATHWAITE, Vincent. 2021. ‘UX Accessibility Design Best Practices | Adobe XD Ideas’. Ideas [online]. Available at: https://xd.adobe.com/ideas/principles/web-design/what-is-accessible-design/ [accessed 14 May 2022].

GRAVER, Amy and Ben JURA. 2012. Best Practices for Graphic Designers, Grids and Page Layouts an Essential Guide for Understanding and Applying Page Design Principles. Beverly: Rockport Publishers.

HECHANOVA, Laurel and Patrick DIMICHELE. 2019. ‘Accessibility-First Design’. Make Good [online]. Available at: https://medium.com/make-good/accessibility-first-design-42a2458b623c [accessed 14 May 2022].

INTERACTION DESIGN FOUNDATION. 2022. ‘What Is Responsive Design?’ The Interaction Design Foundation [online]. Available at: https://www.interaction-design.org/literature/topics/responsive-design [accessed 14 May 2022].

MORALES, Justin. 2021. ‘Mobile First Design Strategy: The When + Why | Adobe XD Ideas’. Ideas [online]. Available at: https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-first-design/ [accessed 14 May 2022].

OU, Andrew. 2017. The Tao of Design and User Experience: The Best Experience Is No Experience.

SIMMONS, Cory. 2013. Instant Responsive Web Design: Learn the Important Components of Responsive Web Design and Make Your Websites Mobile-Friendly. Birmingham, UK: Packt Pub. Available at: http://search.ebscohost.com/login.aspx?direct=true&scope=site&db=nlebk&db=nlabk&AN=644322 [accessed 18 May 2022].

STEANE, Jamie. 2013. The Principles & Processes of Interactive Design. Available at: http://dx.doi.org/10.5040/9781350089167?locatt=label:secondary_appliedVisualArts [accessed 18 May 2022].

UNSPLASH. 2020. Spider’s Web with Green Backdrop. Available at: https://unsplash.com/photos/w5uxNX3Pm9o [accessed 16 May 2022].

W3C Web Accessibility Initiative (WAI). 2022. ‘WCAG 2 Overview’. Web Accessibility Initiative (WAI) [online]. Available at: https://www.w3.org/WAI/standards-guidelines/wcag/ [accessed 12 May 2022].