Introduction  The brief for this group activity was to design a social media campaign surrounding a cultural event of significance. The overall branding must be consistent across platforms to make the campaign recognisable. First, Lucy and I researched some events for inspiration and came across a local campaign HU5 With Friends. They’re a group of people who host local events to bring the community together. During the covid-19 lockdown, they hosted socially distanced walks to prevent loneliness and provide support to those who needed it most. Our cultural campaign was designed to bring people from the university and community together to take part in activities that would either promote health or improve the environment. The campaign would host events such as walks, litter picking, upcycling workshops and much more. We decided to design for Instagram and Facebook as we could attract two different types of audiences, as the older generation uses Facebook more often than Instagram. We worked together to design a Logo that could be used across all platforms and generated a colour palette that was calming and represented our cause in an approachable manner. Individual contribution  My individual design contribution consisted of designing a Facebook article/post promoting one of UoH Toghethers community walks, and taking inspiration from other Facebook posts. The design follows the universal design of every Facebook post, including the like, comment and share buttons. I made sure my design was in line with Lucys’ Instagram content, utilising similar illustration styles with the use of Adobe Express, I completed my designs in Adobe XD. Teammate contribution Group Reflection Reflecting on the group as a whole I believe we worked well together and were able to make design decisions without any setbacks. If we were to do this project again I feel it could be useful to work outside of university hours to ensure we were both on the right track as I felt I lagged behind slightly. If we had more time together we could have expanded more on each platform and maybe come up with more ideas regarding activities to promote. References Log in to Adobe Express (no date) Login. Available at: https://express.adobe.com/sp/design/post/new?workflow=blank&fallbackThresh=default&trigger=CreateProjectMenu&sizeCategory=custom (Accessed: December 17, 2022). 

Introduction This development blog aims to understand what an NFT is and how digital artwork is created. An NFT is a non-fungible token, which means it is completely unique and cannot be replaced. An NFT can be anything digital, from artwork to sports memorabilia or even a social media post. The way NFTs are created is the AI (artificial intelligence) searches databases for anything surrounding the keywords you input into the system and then generates an image reflecting your choice of words. Below are some examples of NFTs generated from the source Wombo.Art.  Task 1 The first task we were given was to explore Wombo.Art and the different themes that are provided on the app/desktop website. The Wombo.Art website works by providing the user with a set of different art styles to choose from and then asking for a prompt, keyword, or words. There is a character limit of 200, meaning the user can generate images that are quite accurate to what they’re asking for.  I wanted to explore Wombo.Art by creating digital art based on well-known subcultures. I chose to generate digital art surrounding, Skate, Club Kids and Acid Rave. The website generated a range of different outcomes surrounding the keywords I inputted into the system. I changed the art styles to further explore the different outcomes, I used Retro Futurism, Bad Trip, Vibrant and realistic. The images below are the outcomes of the AI experiment.  Task 2 The second task we were given was to use Wombo.Art to create a piece of work exploring the opposites of purity and pollution. I used a range of keywords and phrases to generate different NFTs that could be used to develop a piece of digital artwork. The different theme choices came in useful when trying to get different outcomes from using one keyword. Once I had generated some different images, I proceeded to import them into my WordPress blog and edited them using Elementor. Moreover, to create a transition between the different images I uploaded one image to the background layer and then added a hover mode which changed to a different image when the cursor hovered over the background image. This technique enabled me to show the different images in a creative way. I added a heading over the top and used multiple images that complemented each other but also showed the differences between purity and pollution.  Reflection Considering I was unable to attend the lesson in person I utilised the resources provided and developed my outcome independently. The developed work explores the opposites of purity and pollution using AI-generated software, I learnt what an NFT was and made good use of the Wombo.Art generator. Attending the lesson next time, I would ensure to work in a group and explore NFTs within the group to develop different outcomes which could be linked to each WordPress blog. Not attending resulted in me not having a group to work in as everyone had already developed and finalised their work in groups. Furthermore, I believe not working as part of a group didn’t stump my understanding of the subject and I still gained a lot of knowledge working independently. I was able to take full control of the outcome without having to factor in others’ opinions. Although in the future other opinions and outlooks could be useful when developing more in-depth work. References Dream by Wombo (no date) Dream by WOMBO. Available at: https://dream.ai/ (Accessed: December 17, 2022). 

Introduction The tasks below show experimentations based on parallax images. Individual Task 1  The first exercise was to experiment with widgets in Elementor and make a parallax website based on a space theme. The first step was to add a single-column section and change the background colours to a gradient that fit the whole screen. I then added a page heading on top of the gradient. Next, I added a new single-column section to the website and changed the background to a space-themed image. I then set the image attachment as fixed in the settings, this anchors the image to the page whilst the rest of the site is scrollable, resulting in an image parallax. I then added a heading to the page and set the positioning as absolute. This setting allows us to move the heading freely around the page and also will result in a scrollable effect when the user scrolls the page. After adding the heading to the page we decided to add a spaceman image as a background overlay. This gives the effect that the spaceman is floating in space. Moreover, to ensure the image blended into the background I changed the image opacity and also set the image as fixed so that it moved with the original background. Next, I added a UFO image to experiment with animation. I set the image as absolute so that I could freely move the image around the page to achieve my desired effect. I then animated the image with the use of motion effects in the settings window. I decided to set the animation to ‘slide in right’ to give the overall section more movement when the user scrolled the page. Finally, to emphasise the parallax further we added another section and changed the background colour. I decided to use a bright green to add a pop of colour to the overall design and to create a breakpoint. I then added an image of the sky to the website as a fixed attachment to finish off the parallax effect. Individual Task 2  The second exercise gave us the tools to create a layered image that moves with the users mouse. We used existing code from CodePen to create the effect with Elementor widgets. The first step was to open BBEdit and create a new page with the opening style tag, <style>. I then copied over the CSS style guide from CodePen and pasted it in after the opening style tag. I then closed the style tag by inputting </style> into the page after the CSS was imported. I then copied and pasted the HTML after the CSS in BBEdit. After importing the HTML I needed to add the JS (JavaScript) to the BBEdit page. To do this I added a new opening tag <script> and pasted the JS from CodePen. I then closed the tag by inputting </script> into BBEdit. Finally, I copied and pasted the whole Code into the HTML widget on Elementor which translated into the moveable image on the page. I then made sure it worked by previewing it in a different window. Individual Task 3  The final task was to design a parallax website promoting fair trade products. I decided to use imagery and video to inform the audience about Fair Trade products. I used knowledge from the first exercise to create the parallax website. Individual Reflection Reflecting on the tasks above, I learnt and carried out new experimentations independently. I am confident with creating parallax websites and believe the design element may come in useful when designing my final campaign website.  References Mouse move parallax – codepen (no date). Available at: https://codepen.io/oscicen/pen/zyJeJw (Accessed: November 3, 2022).  Stock images, photos, vectors, video, and music (no date) Shutterstock. Available at: https://www.shutterstock.com/ (Accessed: November 3, 2022).  Unsplash (no date) Beautiful free images & pictures, Unsplash. Available at: https://unsplash.com/ (Accessed: November 3, 2022). 

Introduction  The aim of this development blog brief is to undertake a design analysis of the Spellzone onboarding sequence and pre-login page. Analysing the site will establish any improvements that could be made to make the overall site more inclusive and user-friendly.  Spellzone Website Exploration The first website investigation was conducted on the home page and pre-login structure. Upon first entering the website the user is greeted with an image of children which immediately communicates that the website is assumed to be designed for children at school. Layered on top of the image there is a clear heading reinforcing the initial presumption, stating that the website is an online learning resource. As the user scrolls the page there is a brief explanation of what the website is used for and who can use it, from reading the insert it is apparent that the resource is aimed at attracting the teachers’ attention more than the children themselves.  The second investigation was conducted on the onboarding sequence. The sequence is made up of part text and part imagery. The images are quite small and hard to see, these images may be especially difficult to see if the user requires glasses. The sequence explains the reasoning behind the website, what it does and who can use it. Reading the inserts, the sequence explains that people from the age of 6 to adults can use the website to improve their spelling abilities. I feel the images used to promote the resource are childish and may come across as patronising to an adult wanting to use the website.  Target Audience The Spellzone website appears to be aimed at schools and teachers striving to improve their pupils’ spelling abilities. There is no obvious promotion supporting parents or students themselves wanting to sign up for the resource.  Spellzone Website Improvements The first improvement that could be made to the Spellzone website is the addition of separate logins for students, parents, and teachers.  The student login should be simple and take the child straight to their own dashboard with clear progress reports and leader board motivating the children to push themselves and progress through the spelling activities. The parent’s login should take them straight to an overview of how their child is progressing and show them any next steps they should take to help improve their child’s learning. Finally, teachers should have their own login which shows them each student’s individual progress report, modules, and class progression. The overall user experience for the different audiences would be improved by providing the individuals with tailored and specific information. Login mock-up The second improvement that could be made to the Spellzone website is the addition of a fun onboarding sequence that would explain the aim of the website in a concise manner. The below video is an exploration of a potential onboarding sequence. This would improve the user experience by clearly demonstrating the point of the website as soon as the individual reaches the site. Visual onboarding mock-ups Adobe XD link to visual onboarding mock-up https://xd.adobe.com/view/e0682f8c-048e-441b-98f5-2744e6386967-b53b/ Conclusion Due to being absent during the Spellzone analysis, I missed out on being part of a group. This led to having no feedback from fellow group members which I feel led to underachievement in this activity. Improving on this activity next time, I will ensure to work as part of a group to gain others’ knowledge and input to ensure a good result. I believe I came up with good improvements that would improve the overall user experience, but these could have been criticised and improved more within a group. References What is spellzone? (no date) Spellzone. Available at: https://www.spellzone.com/ (Accessed: December 18, 2022). 

Introduction  The tasks below involve exploring break points in web design using the Elementor plug-in on WordPress. Individual Task 1  The responsive mode on Elementor helps showcase web design on multiple screen sizes, aiding in responsive web design. Moreover, by exploring the widget options on Elementor I was able to practice adjusting the breakpoints of each device’s screen size. The plug-in offers a range of options for adjusting designs for each separate device, as seen in the images I was able to turn on/off certain design choices for each device. The option of hiding design aspects makes engaging different audiences on multiple devices easier. The option may come in useful when making a condensed website version for app design, ensuring the app only shows the most relevant information.  Adding a navigation menu through the Royal Add-on plugin I was able to adjust the style and arrangement of the menu options, as seen in the screenshots I could change the menu alignment and add a hamburger menu to the mobile and tablet screen size designs. The option to change aspects of the navigation menu is useful when making websites responsive on all devices. Furthermore, changing a full menu to a hamburger menu on a mobile/tablet screen saves space for important content, resulting in higher audience engagement. Individual Task 2  The next task is to design a responsive website for multiple screen sizes outlining the importance of becoming carbon-neutral, considering different UX at each breakpoint. Carbon Neutral Website Design for Desktop  The first design is for desktops, the aim of the desktop design is to spread awareness and educate users on why we should become carbon-neutral.  Carbon Neutral Website Design for Tablet  The second design is for tablets, the aim of the tablet design is to spread awareness and redirect people to the desktop or mobile site where they can find more information on the cause.   Carbon Neutral Website Design for Mobile  The third design is for mobile, the aim of the mobile site is to promote different carbon-neutral promotional and educational events.  Individual Reflection When designing the responsive website on the importance of becoming carbon neutral, I wanted each breakpoint to do something different. I decided the desktop website should be the main point of contact and the tablet and mobile app should be secondary to this. The website displays information on the importance of making a change and some statistics. The tablet app shows nothing more than a graphic animation of the earth spinning with a redirection purpose, directing the user to either view the mobile site or the desktop site. The mobile site design was intended for updates and news platforms where the user could find information on upcoming events such as meet-ups and protests. Reflecting on this task I feel the importance of becoming carbon-neutral was clearly and simply communicated to the audience through a range of different design outcomes. If I was to complete this task again I would work within a team to generate more ideas and broaden the scope of the project. If I was to be the art director I would delegate tasks to individuals and ensure each person designed something for each breakpoint, therefore sharing the workload and resulting in a larger outcome. References Planet: Earth – codepen.io (no date). Available at: https://codepen.io/sumitridhal/pen/QyoKrq (Accessed: October 27, 2022).  What is carbon neutrality and how can it be achieved by 2050? | News | European Parliament. 2022. What is carbon neutrality and how can it be achieved by 2050? | News | European Parliament. [ONLINE] Available at: https://www.europarl.europa.eu/news/en/headlines/society/20190926STO62270/what-is-carbon-neutrality-and-how-can-it-be-achieved-by-2050. [Accessed 10 November 2022]. Shutterstock. 2022. Home. [ONLINE] Available at: https://www.shutterstock.com. [Accessed 10 November 2022].