Responsive Design
Responsive design is a big one to consider when formulating for the creation of the website I will be making. According to Inside Design Ethan Marcotte, (a designer famous for creating responsive web designs), said;
“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can [make our] designs […] more adaptive to the media that renders them.” ( Jes Kirkwood https://www.invisionapp.com/inside-design/examples-responsive-web-design/)
He also argued that by doing this, it allows our designs to be future proof, allowing for longevity within our designs, which is something that is applicable to this project; it can be seen that creating a design which is highly adaptable to all devices, is a hugely important web design approach that allows for the information to be accessible, and UX to be memorable in a positive way, thus improving the likelihood of returning users.
Example Of Responsive Design Across All Platforms
Jess Kirkwood (2018) 11 Powerful Examples Of Responsive Web Design. In Vision .26 Feb https://www.invisionapp.com/inside-design/examples-responsive-web-design/ [Accessed 23/10/2024]
Mobile First Approach
According to Studio By UXPin;
“The mobile-first approach is designing for the smallest screen and working your way up. It is one of the best strategies to create either a responsive or adaptive design.” (UX by Pin https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/)
I would like to use the mobile- first approach, rather than designing for desktop, and then having a poorly adapted UI which has errors; As can be seen with the Time Bank’s website, when using it on mobile, some assets overlap text, as well as the upper tabs becoming a hamburger menu, (which isn’t the issue), it uses headings that are too long to fit in the menu properly, becoming unreadable.
Time Bank App Screenshots Showing Non- Responsive/Poorly Fitting Designs, And Text Unable To Fit Into Hamburger Menu
Timebank(2022) Projects and Partners. Timebank. https://www.timebankhullandeastriding.co.uk/projects-and-partners [Accessed 23/10/2024]
Accessibility
Accessibility also allows for a wider demographic to access the information on the chosen project website.Gain Line states that;
“Accessibility ensures that websites and web applications are usable by individuals with various abilities and disabilities. It promotes inclusive design, allowing everyone to access and interact with digital content regardless of physical or cognitive abilities.” (Gain Line. https://gainline.co.uk/insights/the-importance-of-accessibility-in-web-development/)
In this way, it is important that the website design takes into priority its need to be accessible by people with disability; One such example of this includes an “accessibility button”, on the Yorkshire Wildlife Trust Website.
Yorkshire Wildlife Trust User Way Accessibility Button Plugin
Yorkshire Wildlife Trust (N.D) Home/YWT. https://www.ywt.org.uk/ [Accessed 23/10/2024]
Video Screen Shot Of Some Of The Button Features Working
Yorkshire Wildlife Trust (N.D) Home/YWT. https://www.ywt.org.uk/ [Accessed 23/10/2024]
Accessibility Button- User Way Plugin
This is a. AI powered plugin by UserWay, which complies with WCAG 2.1 and 2.2. WCAG are international guidelines which according to Gov.uk, are a
“recognized set of guidelines for improving web accessibility”. (https://www.gov.uk/service-manual/helping-people-to-use-your-service/understanding-wcag)
Due to its compliance with WCAG, this could be a really useful tool to improve the accessibility of my website design, as well as using the aria html function to allow for the visually impaired to have audio queues for images and buttons on the website, making the information much more accessible, and improving the UX.
User Way Website Showing WCAG 2.1 And 2.2 Compliances
UserWay(2024) Web Accessibility. UserWay. https://userway.org/?utm_source=ywt.org.uk&utm_medium=widget_footer&utm_campaign=free_widget [Accessed 23/10/2024]
The Grid System
Another useful web design approach is the use of grid systems. According to UX Design Institute
“Grid systems are the foundation of well-designed websites. Using grids in web design ensures that their websites have a clear hierarchy and are easy to follow.” (UX Design Institute. https://www.uxdesigninstitute.com/blog/how-to-use-grids-in-web-design/)
This will aid me in creating a responsive design for my project, that keeps its structure, as well as establishing a good use of information hierarchy, and uniformity across all platforms.
Screen Shot Of How Grids Organise A Layout To Be Really Neat And Uniform
Jaye Hannah(2023) How To Use Grids In Web Design: 5 Golden Rules. UX Design Institute. 11 April. https://www.uxdesigninstitute.com/blog/how-to-use-grids-in-web-design/ [Accessed 23/10/2024]
Harvard References
| GainLine(2023) The Importance Of Accessibility In Web Development. GainLine. 12 December. https://gainline.co.uk/insights/the-importance-of-accessibility-in-web-development/ [Accessed 23/10/2024] |
| Gov.uk(2023) Understanding WCAG 2.2. Gov.uk. 5 October. https://www.gov.uk/service-manual/helping-people-to-use-your-service/understanding-wcag[Accessed 23/10/2024] |
| Jaye Hannah(2023) How To Use Grids In Web Design: 5 Golden Rules. UX Design Institute. 11 April. https://www.uxdesigninstitute.com/blog/how-to-use-grids-in-web-design/ [Accessed 23/10/2024] |
| Jess Kirkwood (2018) 11 Powerful Examples Of Responsive Web Design. In Vision .26 Feb https://www.invisionapp.com/inside-design/examples-responsive-web-design/ [Accessed 23/10/2024] |
| Timebank(2022) Projects and Partners. Timebank. https://www.timebankhullandeastriding.co.uk/projects-and-partners [Accessed 23/10/2024] |
| UserWay(2024) Web Accessibility. UserWay. https://userway.org/?utm_source=ywt.org.uk&utm_medium=widget_footer&utm_campaign=free_widget [Accessed 23/10/2024] |
| UX By Pin(2024) A Hands-On Guide To Mobile First Design. UX By Pin. 3 October https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/ [Accessed 23/10/2024] |
| Yorkshire Wildlife Trust (N.D) Home/YWT. https://www.ywt.org.uk/ [Accessed 23/10/2024] |