Design Portfolio In this section of the assignment I will be using a video to showcase my ideas for the “Let’s Grow Together” marketing campaign for Rooted In Hull, as well as presenting my portfolio of marketing campaign designs, typographical standards for Rooted, prototyping in figma, and packaging designs, as well as posters and a billboard. https://youtu.be/ZHfcB8bafss Figma Prototyping https://www.youtube.com/embed/rgkx5rQfQpg Here is the prototyping on Figma for the Bee Keeping page, which has an interactive link with hover over effects to take people over to the honey page, and vector graphics in between text to try and keep people engaged when reading about Bee Keeping at Rooted. These interactive pages also include a “what people think about us”, scrollable quotes section so that people can get a sense of people’s opinions and experiences with and about Rooted In Hull, hopefully encouraging them to get involved themselves. This also leads into the page articles which I decided to place on each page to help with SEO on Google, as I had originally decided to remove it to be more environmentally conscious, but decided exposure was a necessary trade off for Rooted. https://youtube.com/embed/pErJB92d8-w?feature=share The pages have a functioning cart icon which takes users to their cart after adding a honey item to their basket, and a checkout page, which thanks them and encourages them to subscribe to the mailing list, for responsive multi-channel marketing. In addition to this, the donation page features a card style with icons, so that people can see the different donation options, ranging from, single donation, monthly, in memory, and fundraising, in case people want to do a fundraising campaign for Rooted In Hull. When clicking an option, it offers you increments of donation amounts, as well as a custom donation amount for larger donations, and leads users to a thank you page after payment, and encouragement to join the mailing list. Physical Marketing I used a mockup file from Mr Mockup to create a realistic looking back-lighted poster that could be placed all around Hull City Centre, to introduce people to Rooted In Hull, and create a bit of curiosity in people too; the poster has a QR code which would lead to the website’s “About Us” page, making it easy for people to get their phones out and access the information. This poster uses three honeycomb shapes to highlight the main features of Rooted, which are Food, Art and Wellbeing. The poster also has a dripping sort of hierarchy which is conceptual to the dripping honey theme, and creates a downward flow of reading which leads to the QR code. I also created a billboard mock up which has the potential to introduce a lot of people driving past it to Rooted In Hull, and it features the bold title of the hashtag campaign, #igrew, to get people curious and interested, and look it up on their phones when they get home, and maybe even post a video the the campaign themselves about their own personal journeys, thus discovering Rooted, and also getting involved. The billboard also has a large QR code in case people are stuck in traffic and want to have a quick look at it, or take a photograph to visit the main website later. Social Media Marketing I made a poster that can be used on social media such as instagram, facebook, and twitter, to bring awareness to Rooted In Hull. The posts would also be using the #yougrew in the captions, as well as typing a little bit about it underneath each post, to inform people about the campaign, and to get them to participate, as well as posting a link to the website’s home page. The poster uses honeycombs to highlight the fundamentals of Rooted; food, creativity and wellbeing, and is similar to the physical posters except the differences of the social media posters are that they are in RGB format for the web, and the physical posters use CMYK for printing. Above is a facebook post that could be used as an advertisement for Rooted In Hull. It features the logo, a picture of Rooted In Hull to give people a bit of an idea of what the sight might look like, and has a little box of text to the left, which tells people in a quick and summative way what Rooted In Hull is and what they do, and to come along to join in one of the social events. The post would have a link to the website in the description so people could click on it to follow it to the website and find out more. The post also encourages people to follow along for further longer term engagement and more followers. https://youtube.com/embed/HxtqccDy_nA?feature=share I created a mock tiktok video which could be used to promote the features of Rooted In Hull; due to my limited skill set with this software which has recently been introduced to be (after effects), i am still getting to grips with it, and i did the best i could for this portion of the assignment. The first part of the video has some minor animations such as the varying transparency of the honeycombs to create something that feels a little less static, as well as moving typography and logo, in order to make the video have a hook which is interesting and fun to watch. I also used white typography instead of the usual brown colour because dark colours over video clips are especially difficult to see, so the white is for accessibility reasons. I wanted to create something that showcases the fun parts of Rooted In Hull and encourage people to come along to the social events, and join in. https://youtube.com/embed/Z6WeFhpFuLo?feature=share I used Adobe Express to create an instagram reel for my campaign, which has a relaxed style which talks directly to the users, inviting them to come along and get creative, learn to cook, and uses the campaign slogan “Let’s Grow Together”. The video also features… Continue reading Design Portfolio Rooted In Hull
Category: Adv. Web
Development Log
Development Log Please see below my research Figjam board for this assignment Planning Phase- Project Goals UI/UX According to Reload UX, “Invest in visually appealing design elements that align with your brand identity. Use high-quality images, well-chosen color schemes, and typography that is easy to read. Aesthetically pleasing layouts with proper spacing and visual hierarchy can guide users’ attention and create a positive impression.” (UI UX Design for Improving User Retention – Top 7 Best Customer Retention Strategies – reloadux) In this project i am going to do a complete brand conceptual redesign for the Rooted In Hull website, using colour, composition, typography, information architecture to create graphical hierarchy, and improve the ease of information digestion and aesthetics when visiting the website, as well as making the site memorable with better UI/UX; as well as possible animations such as parallax, and button movements, to make the website feel more pleasant and memorable to use, thus hopefully creating returning users, and sparking interest about Rooted In Hull. Branding and Colour (Purple Planet (N.D) The Psychology Behind Colour in UI and UX Web Design [Blog Post] Purple Planet. (N.D) https://purpleplanet.com/blog/the-psychology-behind-colour-in-ui-ux-web-design/ [Accessed 26/11/2024] I will undertake a design rebrand, which will revolve around the apiary, bees, and how selling honey could be a good donation source; and will undertake this via colour and logo, making the website more conceptual and marketable. To do this i will choose a new limited colour palette for the website (soft, light honey yellows, and light browns, with burnt umber brown text, to make it more aesthetically pleasing, as well as implementing a new conceptual honey themed logo which has more of a focus on the selling points of the organisation (the honey from the apiary), which could improve conversion rates of donation though selling honey, whilst still staying true to the meanings of Rooted In Hull. Ethics (Justyna Weronika Łabądź (2023) Sustainable Web Design. Why And How To Create a Sustainable Website? [Blog Post] Dodonut. August 24th. Sustainable Web Design. Why And How To Create a Sustainable Website? | Dodonut [Accessed 26/11/2024]) I will also implement an ethical audit of the website, reducing pictures, optimising them so that they use less energy, as well as aiding storytelling and narrative by using illustrated vector infographics and heroes. Accessibility Ramotion states about accessibility and UX, “needs of users always take center stage so that their lives are made easier. In the field of UX design, diversity is appreciated, and a product is successful only when it sticks to this standard.” (Accessibility in UX Design: Guidelines and Key Principles | Ramotion Agency) This means that the information on the website should be made more readable; i want to achieve this by making the typography, font, and size, as well as the information volume per section, more accessible through the implementation of an “accessibility button interface” which can offer certain amendments to the UI such as mouse size, and font size; as well as compartmentalising the information to avoid overwhelming those in the Neuro-Divergent bracket, aided with the use of infographics and pictures. Furthermore I will also implement a cookies icon which can expand to show cookie options in a way that is more easy to understand and manageable for people. E-Commerce Hallam states that donation integration should be an easy and seamless experience, allowing people to donate easily online; i want the website so have these extra pages so users can easily purchase urban honey, after reading about the mission of Rooted, helping them raise funds, and receiving something in return that could create returning users and donations for the future; they state “One of the most important things for a non-profit is how visitors donate online. Including donation integration and designing the experience so it is seamless for visitors to use is super important. You don’t want a lousy experience design to block visitors, making them give up and give their money elsewhere. ” ( Designing for impact: unique features of non-profit websites — Hallam) I will add pages for purchasing urban honey, as well as a checkout feature, and a basket icon, so that people can buy honey straight from Rooted In Hull and have it shipped across the country, in order to raise funds for the organisation, furthering their goals, which is to convert more shipping containers, and host more events where they can feed and entertain people. Their sentiment on needing more donations can be seen on their website, stating, “We have received funding for our work over the years from a number of organisations including the National Lottery, Comic Relief and The Rank Organisation. These funds are highly sought after and due to the current economic climate, are grossly oversubscribed. Whilst this situation is not ideal, funding organisations are currently our main source of income, and writing bids that accurately represent the work we do at Rooted is still an important and time consuming process.” ( Social Enterprise – Rooted in Hull) Initial Sketches And Nav Flow Diagrams Mobile Desktop Mobile First Wireframes For my initial sketches, I have started with the design of the mobile website, as I want to design using “Mobile First” technique, as this has significant benefits for the uniformity of implicating the design across platforms, making it a more responsive design choice. According to Webflow, it is important to acknowledge the rise of the use of web browser over desktop, making it a more sensible choice to start the design process with: “Mobile-first design starts with optimising the user experience for mobile devices before scaling up the design to larger screens, such as laptops and desktops. With this approach, developers and designers recognize the increasing prevalence of global mobile users. They strive to create websites and applications that captivate and function well on smaller screens so they can offer users seamless digital experiences regardless of the device.” (https://webflow.com/blog/mobile-first-design) Mid Fidelity Wireframes… Continue reading Development Log
Project Proposal- Rooted In Hull
Introduction to the chosen non-profit The organisation I have chosen for my project is Rooted In Hull. Their problem statement on the website states: “ Hundreds of years of industrial history including shipping, timber and fishing, left our little piece of Hull derelict and without purpose. The fallout from the ending of such a vibrant industrial city stretches far and wide across time, so much so, that many of us still find ourselves struggling to make ends meet, from one month to the next in these modern times” (https://rootedinhull.org.uk/our-story/) Slogan and hero banner on home page “We grow people and food” Rooted In Hull (2024) Home-Rooted in Hull. https://rootedinhull.org.uk/ [Accessed 05/11/2024] The organisation makes savvy use of shipping containers, planters and an apiary, to harvest honey, as well as grow,cook, and bake their own food, bringing people together, as a community despite adversity, and financial hardships. Screenshot of one of their slogans, and pictures of one of their shipping containers. Rooted In Hull (2024) Our Story-Rooted In Hull. https://rootedinhull.org.uk/our-story/ [Accessed 05/11/2024] Initial design ideas, Inspiration sources, Target Audience Analysis Figjam Board. I have done a figjam board for my design ideas, inspiration sources, and target audience, please see embedded board below to look at these: Ethical Design- Colour, And Image I want to create a website that is ethical and sustainable by using a limited palette of colours which use less energy to run. I also want to reduce and optimise the use of lots of large images, with more vector infographics for storytelling , which will also save more energy. Points to use to reduce the environmental impact of colours in web design. Liam Gorman (2023) Reducing Environmental Impact Of Colour. Sustainable Screen. https://sustainablescreen.org/the-power-of-color-how-color-choices-affect-sustainability-in-digital-design/#:~:text=Darker%20colors%20require%20less%20energy,lead%20to%20lower%20power%20consumption. [Accessed 05/11/2024] Furthermore, during class I was also tasked with evaluating the ethics of Rooted In Hull, in which the Figjam board can be seen below. Objectives for the multi-channel marketing strategy. Key features and functionalities to be included in the new web presence. Harvard References Liam Gorman (2023) Reducing Environmental Impact Of Colour. Sustainable Screen. https://sustainablescreen.org/the-power-of-color-how-color-choices-affect-sustainability-in-digital-design/#:~:text=Darker%20colors%20require%20less%20energy,lead%20to%20lower%20power%20consumption. [Accessed 05/11/2024] Rooted In Hull (2024) Home-Rooted in Hull. https://rootedinhull.org.uk/ [Accessed 05/11/2024] Rooted In Hull (2024) Our Story-Rooted In Hull. https://rootedinhull.org.uk/our-story/ [Accessed 05/11/2024]
The Web And Non-Profit Organisations
How Has The Web Helped Non-Profit Organisations? In this section, i will discuss features of the web, their features, and how they have helped Non-Profit Organisations in their causes and aims. New Ideas An article from Personify Wild Apricot which references some of their favourite non profit organization websites, states that the web allows for things such as “clear storytelling, strong visuals and graphics, quick loading , seamless UX, mobile friendly, accessibility, clear calls to action, streamlined donation pages, and social media links, are all ways in which the web has been progressive towards the agenda of non profit organisations; in embracing new developments in the web to allow for better communication with users. (Tatiana Monrad https://www.wildapricot.com/blog/best-nonprofit-websites) Good Example Of Use Of Colour/Image And Branding For Storytelling Tatiana Monrad (2024) The 50 Best Nonprofit Websites. Personify Wild Apricot (https://www.wildapricot.com/blog/best-nonprofit-websites) [Accessed 15/10/2024] New Creative Ways To Solve Problems YKT also has a page for appeals and donations, which allow people to donate directly over the web, as opposed to sending physical cash donations. This section of the website displays all their different appeals using a card style layout which is easily navigable, and allows for people to choose, through text and images, which campaign they want to donate to. The page also has links to socials in which people can keep up to date with YWT in real time, advertising campaigns, events, and planning appeals. Image Of Eye-catching Call to Action Button, As Well As Links To Socials Yorkshire Wildlife Trust (n.d.) Appeals. https://www.ywt.org.uk/appeals/staveley-nature-reserve-appeal [Accessed 06/10/2024] Video Screen Shot Of Card Style Campaigns And Donations Page- Uploaded To My YouTube And Recorded By Me. Yorkshire Wildlife Trust (n.d.) Appeals. https://www.ywt.org.uk/appeals/staveley-nature-reserve-appeal [Accessed 06/10/2024] How Have They Changed Due To The Web? Visibility And Awareness: One non-profit which is interesting is called the Yorkshire Wildlife Trust; they have a website with lots of useful information; due to convenience of the web, it is easy to find out their goals, and mission statement on their “about us” section of the website. Screen Shot Showing How Website Provides A Readily Accessible Volume Of Information For Users Yorkshire Wildlife Trust (n.d.) What We Do. https://www.ywt.org.uk/what-we-do [Accessed 06/10/2024] According to Forbes, there are 5.35 billion people using the web, which is around 66% of the earth’s population. Organisations using the web have access to this populace which is very helpful to their causes (raising awareness, funds, and volunteering). (Lexie Pelchen https://www.forbes.com/home-improvement/internet/internet-statistics/#:~:text=There%20are%205.35%20billion%20internet%20users%20worldwide.&text=Out%20of%20the%20nearly%208,the%20internet%2C%20according%20to%20Statista.) Examples Of How They Use The Web To Help Their Cause. Event Lists: Yorkshire Wildlife trust uses the web to help their cause by providing an Event Guide, which shows all the upcoming events, the areas in which they are taking place, and also has a widget at the side which allows for information to be entered in order to narrow down, or isolate a specific event, location, time, or date. Image Showing The Events Interface With Input Section On Left To Make It Easier For Users To Get Involved Yorkshire Wildlife Trust (n.d.) Events. https://www.ywt.org.uk/events [Accessed 06/10/2024] Marketing Campaigns The web also allows for wide spread marketing campaigns to access a huge amount of people. One such example is Unicef’s “Likes don’t save lives” campaign, with Medium stating “The campaign took advantage of the power of the digital world and became an international viral success for the benefit of children.” (https://medium.com/@lindsayelsen6/likes-don-t-save-lives-social-media-impact-6a81e9750907) It made brilliant use of social media and used this slogan to bring to people’s attention the ineffectiveness of likes overall to fundraising. This is one example of the web effectively changing the output of a non profit organisation for the better. Screen Shot Of Unicef’s Impactful And Shocking Social Media Campaign Medium (2016) Likes Don’t Save Lives-Social Media Impact. https://medium.com/@lindsayelsen6/likes-don-t-save-lives-social-media-impact-6a81e9750907 [Accessed 15/10/2024] According to Samarpan Infotech, another reason the web is incredibly useful to non-profit organisations, is establishing a foundation of trust and professionalism; one of the ways this can be shown is through a well designed, professional website, which seems crucial when asking for people’s devotion and donations. (https://www.samarpaninfotech.com/blog/why-nonprofit-need-website/#:~:text=A%20well%2Dmade%20website%20adds,credible%20and%20trustworthy%20to%20visitors.) Harvard References Lexie Pelchen (2024) Internet Usage Statistics in 2024. Forbes Home https://www.forbes.com/home-improvement/internet/internet-statistics/#:~:text=There%20are%205.35%20billion%20internet%20users%20worldwide.&text=Out%20of%20the%20nearly%208,the%20internet%2C%20according%20to%20Statista. [Accessed 15/10/2024] Medium (2016) Likes Don’t Save Lives-Social Media Impact. https://medium.com/@lindsayelsen6/likes-don-t-save-lives-social-media-impact-6a81e9750907 [Accessed 15/10/2024] Mitesh Darji (2023) Why Non Profit Organizations Need A Website: Increase Your Reach And Impact. SamarpanInfoTech https://www.samarpaninfotech.com/blog/why-nonprofit-need-website/#:~:text=A%20well%2Dmade%20website%20adds,credible%20and%20trustworthy%20to%20visitors. [Accessed 15/10/2024] Tatiana Monrad (2024) The 50 Best Nonprofit Websites. Personify Wild Apricot (https://www.wildapricot.com/blog/best-nonprofit-websites) [Accessed 15/10/2024] Yorkshire Wildlife Trust (n.d.) Appeals. https://www.ywt.org.uk/appeals/staveley-nature-reserve-appeal [Accessed 06/10/2024] Yorkshire Wildlife Trust (n.d.) Events. https://www.ywt.org.uk/events [Accessed 06/10/2024] Yorkshire Wildlife Trust (n.d.) What We Do. https://www.ywt.org.uk/what-we-do [Accessed 06/10/2024]
Digital Marketing
SEO According to Search Engine Land, SEO can be described as “SEO stands for “search engine optimization.” It is the process of improving your website to increase visitors from Google, Microsoft Bing and other search engines, whenever people search for: It also claims that the better your page visibility when being searched, the more likely you are to gain organic visits from users. As well as this, websites should be optimised for people AND search engines. A Helpful Guide To SEO For Users And Search Engines (Danny Goodwin (2024) What Is Seo- Search Engine Optimization? Search Engine Land. (N.D) https://searchengineland.com/guide/what-is-seo [Accessed 04/11/2024]) As well as these statistics on the organic reach of SEO, stating, “SEO is a critical marketing channel. (https://searchengineland.com/guide/what-is-seo) Therefore it can be seen that optimising a Non-Profit website in this way, increases their click rate, and exposure/discoverability, e.g. things such as posting Youtube Videos, Instagram Reels, or CapCuts to TikTok, which can increase the reach of the charity through SERP (Search Engine Results Pages) Social Media Strategies And Campaigns According to ColorWhistle: “Graphic design is the most powerful art that has breathed fresh life into digital marketing. This modern form of art has added a contemporary flair to the advertisement profile of every company. It also acts as one of the key components to build brand awareness and influence the customer’s decision-making process.” (https://colorwhistle.com/graphic-design-importance-in-digital-marketing/) Some effective marketing strategies include the use of graphic design via strong branding, use of colour, videos, typography, infographics and interactive storytelling, to post campaigns to social media to advertise and spread awareness for a narrative or goal (a campaign), to raise awareness and engagement. Mental Health Awareness Week: Nature Theme 2021Ellipsis (2024) The 10+ Best Charity Campaigns In 2021: Overview. https://www.wpcharitable.com/charity-campaigns/ [Accessed 04/11/2024] Black Lives Matter: Extremely Famous And Important Campaign Showing Impact Of Web Visuals Ellipsis (2024) The 10+ Best Charity Campaigns In 2021: Overview. https://www.wpcharitable.com/charity-campaigns/ [Accessed 04/11/2024] User Engagement Propelled Marketing A second form of the use of social media marketing includes that of encouraging the individual user to spread a message or story via hashtags, video or dance challenges, and other challenges such as the Ice Bucket Challenge for ALS. Infographics Step By Step For User Participation In The Ice Bucket Challenge (The ALS Association (N.D) The ALS Ice Bucket Challenge: 10th Anniversary. https://www.als.org/ibc [Accessed 04/11/2024]) The chosen Non-Profit for my project can benefit from using this kind of visual web marketing to tell a story, and drive traffic through images and videos, as well as physical campaigns like the ice bucket challenge to gain traction to the website and cause. Email Marketing For Nonprofits Non-Profits could use softwares such as MailChimp, to design email campaigns, and offer a way to update, advertise, invite, thank, and inform their user base to upcoming events and campaigns, and for giving donations, or showing interest in certain campaigns. It can also be helpful for Non-Profits to use multi channel-marketing to make emails more personally tailored to people’s interests by being sent out when a user interacts with certain pages or buttons. Brilliant Email Which Evokes Strong Feelings And Emotion With Call To Action Button CampainMonitorByMarigold (2024) Nonprofit Email Marketing: The Ultimate Guide To Email Marketing For Nonprofits. https://www.campaignmonitor.com/resources/guides/ultimate-guide-email-marketing-nonprofits/ [Accessed 04/11/2024] Email Giving Thanks To User-Showing Versatility Of Uses For Email Marketing CampainMonitorByMarigold (2024) Nonprofit Email Marketing: The Ultimate Guide To Email Marketing For Nonprofits. https://www.campaignmonitor.com/resources/guides/ultimate-guide-email-marketing-nonprofits/ [Accessed 04/11/2024] According to Campaign Monitor By Marigold, email marketing can help monitor performance and improve engagement, as well as observe click through rates “An open rate measures the amount of supporters that opened your email. This metric will give you insights into the quality of your subject lines, if you’re sending too many emails, or if your content is appropriate for your subscribers.” (https://www.campaignmonitor.com/resources/guides/ultimate-guide-email-marketing-nonprofits/) Harvard References CampainMonitorByMarigold (2024) Nonprofit Email Marketing: The Ultimate Guide To Email Marketing For Nonprofits. https://www.campaignmonitor.com/resources/guides/ultimate-guide-email-marketing-nonprofits/ [Accessed 04/11/2024] ColourWhistle (2024) Importance Of Graphic Design In Digital Marketing. ColorWhistle. https://colorwhistle.com/graphic-design-importance-in-digital-marketing/ [Accessed 04/11/2024] Danny Goodwin (2024) What Is Seo- Search Engine Optimization? Search Engine Land. (N.D) https://searchengineland.com/guide/what-is-seo [Accessed 04/11/2024] Ellipsis (2024) The 10+ Best Charity Campaigns In 2021: Overview. https://www.wpcharitable.com/charity-campaigns/ [Accessed 04/11/2024] The ALS Association (N.D) The ALS Ice Bucket Challenge: 10th Anniversary. https://www.als.org/ibc [Accessed 04/11/2024]
Analysis Of Current Web Design
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]
Collaboration In Web Design
The Hand App During week one we collaborated in groups to create an application which would bring attention to, and promote, sustainable gaming practices amongst teenagers; this led to some interesting ideas from the group, as well as some input from Jambot on Figma. Hand App Group Work Mind Map Roles I Found Myself In The first idea was an app called “Hand”, which would act as a prompt to remind teens to take time out from their game. During the process of collaborating, I found myself in the role of “group leader”, which is not something I thought I was capable of due to my shyness. I found myself pitching this idea that I had for the app, and then the group began to add to it and broaden the concept. In the future I will maybe feel more confident in my ability to be in a leadership role for group projects, and directing the flow of group contributions into a useful and interesting collaboration of ideas might be useful for my future role as a graphic designer. Figjam Board Hand App Figjam Board- Fleshed Out And With Jambot Results Opposition and Reflective Thinking One group member disagreed with the notion of the reward system of the app, stating that the company would go bankrupt pretty quick if it were to give away figurines in exchange for points; this was interesting because i had not considered that point, and it lead me to reconsider, and think that she was probably right in her conclusion. This led to reflective thinking, and re-evaluation of the concept, which is useful for iterative processes in graphic design such as app design. I think that opposition is a good opportunity for re-evaluation and refinement of ideas, to improve a collaborative effort, and check for errors. The Use Of AI-Jambot For Ideas We also used Figma’s AI Jambot to help us quickly collate several different app ideas using the same brief, which was helpful as it managed to suggest lots of great ideas, faster than all of us could do in the time that we had. I feel that this aided group collaboration in that it speeded up the process, saves time. It also helped us to think outside the box, and end up with several fleshed out ideas; this is useful for us as graphic designers as it is likely we will have to create several ideas for our clients in the future. What Did I Learn About Collaboration Overall I think that collaboration in web design allows for the re-iteration of ideas through error picking, which leads to the refinement of our ideas within the group. It also allows for ideas to be had that I wouldn’t have thought up originally, either by other group members, or by utilising AI such as Figmas Jambot, to collate multiple ideas using one design brief, which mimics the collaborative design environment that is a part of being a graphic designer.