Final Year University Projects

Due to time constraints, I had to build my website before conducting any user testing. This was unfortunate as this would have been really useful to incorporate user feedback into my design while the site was in production.  As feedback is really important to me, I decided to conduct a low-risk survey to ask those I had met on Instagram through the IBS community what they thought of the website. This feedback will be useful if I decide to work on improving the website in the future. It was important that my survey was aimed at my target audience and therefore included this  statement at the start of my survey, "Although IBS can develop at any age, this questionnaire is intended only for participants aged 21 - 35 who have either suffered IBS symptoms or have close family/friends who have experienced these symptoms. By taking part in the survey, you are confirming that you are a member of this particular demographic. Please do not take part if this is not the case." I felt that...

Using Adobe After Effects and the illustrations created throughout the course of my project on Adobe Illustrator, I created this promotional video to advertise my project on different platforms such as YouTube and Instagram. This was difficult as I have very little experience with animation, specifically in After Effects. The only exposure I have had with this software is during a collaboration assignment in second year where Ocado set us a live industry brief to create a 15-second ad for their Instagram account. Even then my involvement with the project was the illustration side rather than the animated elements. Completing such a lengthy video in After Effects has taught me new skills and I now feel confident with simple animations in After Effects that involve positioning, placement, opacity and rotation. Although the process was tedious at times, I am really happy and proud of the final result.

I decided to upload this video, changing the width of the website to activate breakpoints in the code to show the website being responsive for desktop, laptop, tablet and mobile screens. While coding I made sure I used Bootstrap to it's full potential to avoid using @media queries.

After uploading my website with my hosting using FileZilla, I decided to record a video to showcase my finished website. As it can be difficult to see/read all of the information on the video, I decided to screenshot my finished website's pages which are listed below.

As I began to use Sketch for multiple purposes, I needed to re-organise the ways in which I was working. Initially, I was working on all elements of my project on one page. This was fine to begin with, but as the project grew bigger I needed to re-organise my page in order for it to become more streamlined and less confusing for when I progressed further into the project. Therefore I first started by splitting my content into planning, wireframes, mockups and social media. This helped my workflow significantly and makes it easier for anyone who needs to view my file to understand where the content is located.

I decided to write a comparative post, comparing my mockups and wireframes for my website. My first initial observation is that the wireframes are a different screen width to the mockups, therefore the elements added aren't going to be entirely accurate in scale. The main changes from the wireframe are on the homepage as well as the header section header copy aligning to the left instead of right as it is easier to read left to right. Navigation Bar Full logo with tagline is included instead of just the symbol. Navigation links are aligned in the centre instead of to the right. Homepage Body asset spans over one section instead of overlapping over two. Copy from sections 1 & 2 are aligned to the left on the final website instead of the right. Getting diagnosed section is aligned to the right, with larger complimentary asset. Buttons have rounder edges. Low FODMAP diet buttons are in a row (however these become two rows once the screen width is reduced.) Support section is simil...

To upload my website to my hosting and make any changes, I used an FTP client named, FileZilla. By contacting the support team at Tsohost (my hosting provider), I received my FTP details which I used to connect to the server. The details needed were the host name, username, password and port number. This process took a few moments, but was seamless.  I've used different methods to upload files to a hosting provider in the past. For a website development assignment in second year, I was taught how to upload files using my systems command prompt. We used an online application named Heroku, which worked by updating the files that had changed rather than uploading the whole site by using a couple of git commands. Although this process made uploading files extremely quick, setting up a .JSON file for Heroku to read was difficult. Furthermore this process became even more problematic when there was an update to the git commands, making updating the site troublesome and eventually the sit...

I noticed that other IBS accounts were organising giveaways on their pages in order to interact with their audience and gain new followers. The giveaways consisted of a list of rules for entry into a prize draw to win items. I collated a list of rules that I had seen on multiple giveaways, these being the main ones: Follow me (and sometimes a sponsor) Like & Save this post Share this post on your story & tag my account Comment on the post a number from 1 - 1000 Comment on the post tagging one or more friends (more friends, more entries) Comment on the post for entry, answering a question Even though some of the prizes, were potentially shop-bought, the amount of users that shared, liked and entered the prize draw was a significant amount and subsequently increased the amount of followers the account had. Each time this was successful in bringing in new followers which lead me to think about the items I would offer as a prize if I did a giveaway on my account.  I considered ...

While testing the functionality on my website,  I planned and noted every element using Excel that needed testing to help me keep track and resolve any problems. I mainly documented page links, anchor links, image links, external links & buttons which had minimal problems. Any errors were usually due to human error while writing the code.

I wanted to add some interesting interactive elements to the website which included a rotating and hover zoom animation. Using online resources, I was able to code these elements successfully by making small tweaks to the code in order for the animations to work as I wanted them to.        GREPPER. (2020). “slow rotation animation css” Code Answer . [Online] Available at: https://www.codegrepper.com/code-examples/css/slow+rotation+animation+css W3BITS. (2020). Image hover Zoom n’ Rotate effect with Pure CSS . [Online] June 6th 2020.  Available from: https://w3bits.com/css-image-hover-zoom/

I decided to create a postcard that incorporated my branding, as this is a simple and effective marketing tool for targeting specific companies when working freelance. As it is bigger than a business card, this works well when you can't meet with a potential employer in person but want to send something in the post promoting your business and services. Sending a letter works well, however there is the potential that it would be thrown away from an address that is not recognised. An employer is forced to see the message on a postcard because it is immediately there. I have created two alternative postcard designs which includes two fronts and one back.

**Published on 21/4/2021, edited on 19/5/2021 (added missing screenshots)** In order to showcase my social media page professionally on my website and eventually my app, I used a widget named Embed Social. This allowed me to fully customise the widget using their portal, by changing colours, positioning and filtering out specific posts using tags.  This widget saved me a significant amount of time for an aspect of the site that would have taken me a long time to achieve as it automatically updates when a new post has been uploaded on Instagram. The support team are very helpful and they've pointed me in the right direction when I have wanted to edit the widget in a way that isn't their standard layout/design. EMBED SOCIAL. (n.d.). Embed social . [Online] Available at: https://embedsocial.com

Having a PowerPoint template is important as you may need to pitch yourself to potential employers or present a response to a design brief in order to win work. Showcasing your work with a branded presentation makes you more memorable and gives off a professional feel so having one ready means you can fully focus on the design work rather than the design of the PowerPoint. Using master slides, I created my template as this allowed me to change all aspects of each slide simultaneously. When editing slides as normal, having master slides are useful as background graphics are locked into place meaning that you can't accidentally misalign something while adding the contents of the slide. I created a few title slides depending on the style of project and other miscellaneous slides such as a contact details slide while keeping to my brand guidelines.  These are the slides I have created, ready to use! As the assignment stated that the PowerPoint needed to be A4, I ensured this ...

At times I needed to completely change sections of the bootstrap template to fit my needs and page design. I learnt more about bootstrap classes and how to use them appropriately to adjust margins and padding. Some of these classes were already being used in the Bootstrap template, however I did not understand their purpose. When researching further I discovered that the classes were shorthand for built in CSS.  The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl. Therefore as an example, using the class 'ml-1' equates to margin left (ml) with the spacer variable multiplied by 0.25. There was also similar shorthand classes for the display properties where by d-none d-block (display: block) displayed the element for extra small screen sizes only. Without a breakpoint Bootstrap automatically assumes that the breakpoint is for xl screens however, if this breakpoint was added e.g. d-none d-xl-block ...

When I was developing the website, I realised that I needed to re-create the navigation bar. Unfortunately, the navigation bar provided by the Bootstrap template only supported two page links. With the help of online resources I was able to create a navigation bar that very closely mimicked my mocked up design. GENERATE PRESS. (2016). Shadow under nav bar. [Online] Available at: https://generatepress.com/forums/topic/shadow-under-nav-bar/ W3 SCHOOLS. (2021). W3 Schools How To Create a Fixed Top Menu . [Online] Available at: https://www.w3schools.com/howto/howto_css_fixed_menu.asp/

For my website, I decided to use the sans-serif typeface family, 'Acumin' for important headings and the brand name designed by Robert Slimbach, due to it’s versatility and variety of weights and styles. This font is not native to MacOS or Windows OS, and therefore will need to be linked using Adobe Fonts in the HTML head in order to be accessed. I used ‘Trebuchet’ for the body font as users should already have the font pre-installed on their computers (especially those running Windows OS). This font is simplistic and readable, making it a perfect choice for body text. ADOBE FONTS. (2021). Adobe Fonts Acumin . [Online] Available at: https://fonts.adobe.com/fonts/acumin

When testing my hosting details with a work in progress page, I noticed that the URL did not appear as grumbletum.co.uk. It re-directed to sofiagattuso.com/grumbletum.co.uk/. This is very strange and knew it had something to do with the hosting, as this had never happened before. After speaking with the support team they confirmed that a previous support person had set this up like this because you can only have one primary domain name per hosting account. Therefore grumbletum.co.uk became a subdomain to my primary domain. This is really annoying, and have searched for ways to rectify this, however there isn't any solution unless I purchase another hosting plan. I decided to keep this as it was for now, as sofiagattuso.com has an SSL certificate installed. So if the site is redirecting at least it should be secure without me having to purchase an additional certificate.

On my support page, I had planned to have a coping mechanisms/strategies section where I would list useful products/resources to help combat short-term daily IBS symptoms. I brainstormed some ideas and have collated them using a mind-map.

I have been able to gather many IBS stories by messaging Instagram accounts who are dieticians or personal accounts that have IBS listed in their bio. Sending a direct message to these accounts introducing myself, the purpose of the instagram page and asking whether they would like to share their IBS stories to help spread awareness of the condition is successful in getting these accounts involved. I was surprised to find that many individuals were happy to take part which I didn't expect as IBS can be a very personal journey. This collecting of IBS stories also coincided with IBS Awareness Month which takes place in April which may have helped me connect with others. After posting, I added each post to my Instagram story making sure to tag the account that shared their story. Each story began to be reposted by those accounts and others who aligned with my mission. I made sure to use relevant hashtags such as #ibsawarenessmonth and #irritablebowelsyndrome to gain the attention of t...