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].

Introduction  Making webpages interactive on WordPress, using the HTML plug-in on Elementor.  Individual Task 1  The first task was to follow a series of instructions which involved adding an HTML widget to an Elementor webpage and pasting the code provided. The code translated into a heading which I tested in another browser to ensure the HTML worked.  Individual Task 2  The second task was to add HTML to another widget which makes use of CSS animation. I used BB Edit and pasted in the CSS code and HTML ensuring the code was in the correct order. I then copied the code into the HTML widget and ensured to test that it worked in another browser.  Individual Task 3  The third task was to independently explore Codepen and look for other HTML codes to explore in Elementor. I found a hover asset which could be used for multiple examples on a webpage such as a heading or a call-to-action design. I followed the previous instructions on how to install the HTML into Elementor and used BB Edit to translate the code. I tested the hover asset worked in a new browser. The HTML code worked but it was stylised by the Elementor website so didn’t communicate in the same way as seen on the Codepen preview.  Google Experiments  The final exercise was to explore Google Experiments and choose five examples of visual design which could be used in web design. The Spirit Link to The Spirit on Google Experiments – https://experiments.withgoogle.com/the-spirit The creative design of the Spirit is a WebGL experience using the noise derivatives and curl noise to create a smoky look and feel. The fun design could potentially work in web design as well as game design. The Spirit could be used as an accessible curser, the user could utilise the design by changing the size of the output which could enhance the user experience by being fun to use but also large enough to see if the users’ vision is impaired. Sodar Link to Sodar on Google Experiments – https://experiments.withgoogle.com/sodar Sodar is a social distancing tool used for protection during the Covid-19 outbreak. The user can visually see what the recommended 2 metres distance looks like using a website on their phone. The design could be utilised in other aspects of web design such as virtual tours, measuring tools and directional maps. The virtual reality aspect of the design would make virtual tours more exciting, for example, a virtual reality tour of a gym may entice the user to join the club in the hope the gym offers even more exciting endeavours inside.  Hip-Hop Poetry Bot Link to Hip Hop Poetry Bot – https://experiments.withgoogle.com/hip-hop-poetry-bot The Hip-Hop Poetry Bot web design inspired me, the stylised project could be used for promotional marketing in a range of industries. The design emulates a static tv, this could be used as a transitional phase in promotional advertisements.  Weird Cuts Link to Weird Cuts – https://experiments.withgoogle.com/weird-cuts Weird Cuts is a collage-based app that invites users to experiment with photography. The design concept could be used in a brutalist style on an interactive website. The brutalist website could potentially be based around photography or other art media with captions layered over the top and other illustrations in a hectic, unorganised way to make the website stand out from others that follow design principles. Glitch Link to Glitch on Google Experiments – https://experiments.withgoogle.com/glitch Glitch uses glitch effects to create exciting imagery that appears to move in a cyber-style manner, the designs could be used to promote tech brands but also make other promotions and website designs look grittier and more urban. 

Introduction  The brief for this group project was to design an onboarding sequence in our sketchbooks for a greeting card business. We were given a timeframe outlined by the steps below.  Step 1 – Brain-shower concepts (10 minutes). Step 2 – Decide on the best concept (3 minutes). Step 3 – Agree on the target audience (2 minutes). Step 4 – Work individually on an onboarding draft (sketchbook) (45 minutes). Step 5 – Compile the best ideas into one idea. Step 6.- Present to the class. Group Reflection  I formed a group with Abbie and Lucy and we first brain showered as many unique greeting card ideas as possible to ensure we had enough concepts to choose from as a group. It became apparent early in the brain-showering task that Abbie should take the lead position as creative director as she had the most original and interesting ideas. Moreover, the concept we decided to develop further was the offensive greetings card business originally thought of by Abbie; this concept had the most potential when discussing the types of cards the business would have on offer. Such as death countdowns and rewards for being the most unreasonable you can be, distinguished as the Karen awards range. We also found a strong link with the unusual milestones cards as a comedic addon to the range.  After deciding on the niche, we began to think of a suitable target audience. We concluded after much contemplation that the card ranges would be suitable for all ages, excluding young children. Moreover, as a group, we imagined people sending these cards to friends and family as a practical joke for birthdays and other occasions with the option of sending them completely anonymously to add to the whole ‘mean’ experience.  After developing our concept and discussing target audiences and branding, we separately started developing potential onboarding sequences for the business’s website/app in our sketchbooks. When designing our onboarding sequences, we halted production as we struggled to think of original ideas. After discussing our own setbacks, we all chipped in and helped each other come up with a simple but effective idea.  Furthermore, we compiled our best ideas and developed a mock-up of each onboarding sequence on XD; this solidified our ideas.  Individual Design Development I quickly designed a mock-up of my onboarding sequence in my sketchbook before using XD to create a more defined version of the mock-up. My contribution focused on introducing the website/app to the user with a clear approach. The first onboarding screen makes use of an interactive slider which the user can slide across declaring how horrible they think they are. Once they have set how horrible they are using the slider the website would recommend cards based on their confession. The second screen guarantees the user understands that the cards may be offensive. The final screen encourages them to be as mean as possible to add to the overall experience.  Padlet link: https://padlet.com/ljmagowan2020/k398449umhasstfc  Conclusion  In conclusion, regarding the group mechanics, I feel we worked well together when coming up with a range of ideas. We all had an equal voice and having a creative director solidified our relationships and how we communicated. Moreover, next time I feel we should concentrate on coming up with more volume when discussing original onboarding strategies to give our group even more depth when designing. 

Introduction  Upon completing the User Experience presentation, we were tasked with setting up an email marketing strategy for our WordPress blogs. The marketing strategy consists of a subscription option/pop-up to entice users to sign up for a mailing list which can be used to market campaigns and items without having to be online and active on the site. This way of marketing is practical when creating a personalized experience for the audience, sending out relevant advertisements and information based on their individual preferences straight to their email and expanding on multichannel user experience elements.  Individual Task  Step 1 – The first step to set up the pop-up mailing list subscription was registering for an account with MailChimp; this is an online space to store and monitor all the email activity gained from the pop-up on the WordPress blog (Figure 1). Step 2 – The next step was installing the Royal Addon plug-in on WordPress; this plug-in provides additional widgets, making creating a pop-up from a template easier (Figure 2)   Step 3 – Creating the pop-up was a simple process utilizing tools and widgets from the Royal Addon plug-in through the Elementor website design add-on. The available tools made it easy to install an image and embed a link, as seen in the image below (Figure 3) Step 4 – After creating the simple pop-up for future email capture, I had to connect my API key from the MailChimp account to ensure it was synchronized with the WordPress blog; this is important for control over the user signing up for the mailing list (Figure 4) Once the API key was connected and the pop-up was posted to the word press account, it became apparent that something had gone wrong in the process, as the pop-up wasn’t showing up on the live site and only as a separate page on the blog (Figure 5). I later concluded that this mishap occurred because I didn’t set the preferences of which pages the pop-up would be displayed. After correctly delegating the pages for the pop-up, the mailing list subscription pop-up worked across the live site (Figure 6) Finally, I tested the pop-up by subscribing to the mailing list myself; the pop-up gave me positive feedback, letting me know it had worked (Figure 7). Next, I checked my Mailchimp account to ensure the site had synced the sign-up. My email was then on display in the audience section of my MailChimp account, solidifying the set-up of both accounts and that the pop-up was working (Figure 8). Conclusion  In conclusion, setting up the pop-up on my WordPress account was simple and allowed me to explore new tools and widgets that may become useful when creating my portfolio website. Finally, if I did this activity again, I would team up with someone and ask them to subscribe through their own server to test the pop-up abilities further.

Introduction  The group project was assigned to help us better understand our website setup, how servers work and HTML. Individual Task  The first task was to build our own index page using HTML from W3Schools; this was straightforward with the help of online resources. Predominantly I explored cPanel and the file management system before actively completing the task; this ensured I had an initial understanding of where the files I create will be saved. After gaining an understanding of cPanel, I began to create new HTML for my webpage. How to add headings and paragraphs became clearer as I started to understand the layout of an HTML page and what each block meant. I decided to create a team page named UoH Graphic Design which will display my group’s web pages. At first, I felt overwhelmed by the task as the HTML code was completely new to me, but with further investigation, I started to become familiar with coding and I enjoyed building a webpage.  Group Reflection  I was grouped with Abbie and Lucy, and our task was to set up an individual group page with links to our personal pages attached using HTML with the help of W3Schools. Our group struggled with this task as none of us had ever worked with web design in this way; we used our communication skills to help each other along the process, learning new things whilst becoming overwhelmed by the limited time we had to utilise in class. Moreover, as we didn’t have much confidence in that task, our leadership skills were sacrificed due to the confusion between learning new HTML and keeping up with each other. I feel we could have improved our experience as a group by assigning a team leader to ensure we were all on the same page. However, we came out with a successful web page combining all our original index pages with links.  Conclusion  In conclusion, I feel our group was proactive in learning from each other as we progressed. Moreover, this brought us together and ensured we worked closely as a team. We could have improved our original work with CSS style guides, adding columns, grids, and images, although we didn’t have enough time to execute this and gain valuable knowledge at the same time. However, working together has helped us build character and a positive relationship which will be highly beneficial when working on more challenging tasks in the future. 

Introduction  The brief for this task was to design a concept surrounding the idea of birdhouses in groups, thinking outside of the box, and testing our compatibilities working as a creative team.   Group Reflection  Primarily, I formed a group of three with Abbie and Sydney, and we began to brain shower initial thoughts and ideas surrounding the birdhouse concept. Upon reflection, I believe we struggled initially to discuss ideas and get them down on the page. However, this was due to being distracted and off-topic. We were prompt to recognise this flaw within our team and decided to evaluate whether we needed a creative director to ensure we stayed focused on the task. We decided against having a creative director because none of us felt confident enough to lead the team. We agreed as a team to ensure we only conversed on the birdhouse task and stayed focused entirely on the concepts at hand. Overall, after facing our initial struggle I felt we had valuable ideas surrounding the brief. If we stayed focused on the brief from the beginning, we could have applied more depth to our starting points and linked our designs to one another. In the future, I will be proactive in ensuring my group is focused and that everyone feels they can speak up about their ideas, diminishing any discomfort the group may feel. Individual Design Process Once my group finished the brain-showering portion of this project we decided to choose one concept each and design a campaign surrounding the idea.  I initially thought of the word ‘bird’ as English slang for women which led me to design Birds of Advice. Originally, I decided to focus on the idea of the ‘birdhouse’ becoming a safe space for women to take refuge from domestic abuse. Although after contemplating the concept becoming too heavy, I decided to focus the narrative on an overall sexual health clinic solely for women. After developing the concept for Birds of Advice, I started to think of ways to communicate the message through a series of visual leaflets. I decided to incorporate discreet light-hearted messages in the leaflet designs by adding comical sayings which could be associated with sexual health and actual birds in keeping with the overall theme.   The Concept – Birds of Advice, a sexual health clinic for women.  Target Audience – Women of all ages.  Promotion – Leaflet design.  Conclusion  In conclusion, I feel my team worked well together to generate ideas but could have made an extra effort to stay focused throughout the brain-showering process. In addition, I believe our time management let us down when designing our chosen concepts, which led to most of the work needing to be completed outside of the university. This made it hard to interact and be readily available to give each other feedback.