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.