Each year, new web trends arise and later become the common web standards if they don’t fade away. I have selected Amnesty International as an analysis subject because it is a rather conventional, large-scale non-profit organisation therefore it is relatively well-made however it has multiple areas to improve on. I will be applying these technqiues to my own design in order to make sure that it is fully accessible, ethical and it tells a coherent visual story.
Accessibility
When assessing accessibility, it is important to remember the three factors which might affects a person’s ability to access a website: permament, temporary and situational. In order to analyze the multi-faceted topic that is accessibility, I have used Meeple Like Us’ “Grid of Enlightened Self Interest” to consider those different factors and think about how it could be applied to the website that I will be re-designing. Whilst using an accessibility checker service is incredibly important when building a website, I believe that these factors mentioned above should be remembered by website designers in the forefront of their thoughts, as accessibility issues might affect a major part of their user base.
Responsive Design
Amnesty International is an example of good responsive design – the flexboxes change as the user minimizes the window, ensuring that all of the content can still be seen and accessed even without a maximized browser window opened. In addition, the navigation bar stays intact – after 50% of minimization, the text categories turn into a hamburger menu. One way in which this could help inform my own design choices is to keep this in mind whilst designing the website because most users do not have their browsers opened on full-screen therefore a large section of the target audience would leave if this was not optimized properly. It is incredibly important to remember that the screen resolution is not the same as the browser window reslution, therefore responsive design should be prioritised. The text overlays and the call-to-action button on the featured article change depending on the resolution, avoiding the issue of images and text clipping out when the resolution changes.
Mobile-First Approach
Many web designers decide to design their website on mobile first instead of desktop – this is because many usability issues arise when the mobile isn’t prioritised. According to Alexandrea (2024), 84% of internet visitors prefer mobile websites over desktop. This also does not factor in many people who do not own a desktop computer, seeing as phones are more accessible and most people carry one with them daily therefore it makes accessing websites through mobile easier if the web designers adapt to phone screen resolutions.
Grid Systems
Grid systems are the foundation for the structure of a website – without using a grid system, the hierarchy of information would not be displayed correctly. The grid system affects responsive design on a large scale, therefore a website designer should always plan out the grid system and hierarchy first. The Amnesty International website uses a hierarchal column grid – the top of the page contains a hero image that links to the current important article, and beneath it there is a call-to-action where the user can decide to read a person’s story and act upon it. This is important to consider on a website as depending on the mission, the website structure plays a massive role in communicating it effectively.
Sustainable Design
Sustainable web design is important when it comes to NPOs. According to Sustainable Web Design (2024), the internet emits an approximate 3.7% of global carbon emmissions. As a part of ethical design, it is good practice to check on your website’s carbon footprint and try to reduce it by taking measures such as reducing image file sizes and being considerate of design choices (e.g. colour choice and overload of content can make the website produce more carbon).
References
Alexandrea, J. (2024) 21 essential web design statistics for 2024. Hostinger Tutorials. Available at: https://www.hostinger.co.uk/tutorials/web-design-statistics [Accessed 4/11/24].
Amnesty International (2023) Amnesty International. Amnesty.org. Available at:https://www.amnesty.org/en/ [Accessed 4/11/24].
Coyvier, C. (2011) Screen resolution =/= browser window. CSS-Tricks. Available at: https://css-tricks.com/screen-resolution-notequalto-browser-window/ [Accessed 4/11/24].
Denyer, T. (2024) UI development study: how do people hold and interact with their phone? Tristan Denyer. Available at: https://www.tristandenyer.com/work/user-research-people-hold-interact-phone [Accessed 4/11/24].
Google (2024) Material design. Material Design. Available at: https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins [Accessed 4/11/24].
MeepleLikeUs (2021) A video about accessibility – Meeple Like Us. Meeple Like Us. Available at: https://www.meeplelikeus.co.uk/a-video-about-accessibility/ [Accessed 4/11/24].
Sustainable Web Design (2024) What is sustainable web design? Sustainable Web Design. Available at: https://www.sustainablewebdesign.org/ [Accessed 4/11/24].
Wholegrain Digital (2024) Website carbon calculator – how is your website impacting the planet? Website Carbon Calculator. Available at: https://www.websitecarbon.com/ [Accessed 4/11/24].
Leave a Reply