University Projects

There were many problems with both The Ocado Microsite project and Miam Miam’s Strength & Movement Federation Project. Mainly these were due to problems communicating with each company. It was difficult to get a fast response and had to repeatedly send follow-up e-mails so that I would be sent a response. In future, I will ask the client what the best way of communicating with them would be e.g. via LinkedIn, Slack etc. Therefore avoiding this issue. However if the client continues to be unresponsive through the communication method given to me, I will continue to send follow-up messages. Moreover I had the problem of my e-mails not being read properly or throughly enough and therefore in future, I may have to bold important statements or highlight dates using astrixes. Unfortunately due to time constraints I wasn’t able to finish either project however this was out of my control as I was constantly waiting on feedback so that each project could progress. As this project was sc...

Although I am pleased with the final version of my website found at: http://www.sofiagattuso.co.uk there are some aspects of this project that I feel as though I could improve upon. Contact Form My contact form is problematic as the submit button doesn't work as it should. The validation of the form works but nothing happens when you would like to send the form which makes me think that there may be a problem with the PHP file that came with my Bootstrap Template. The reasons why I think this is because the PHP file has an if statement that should print either a success statement or an error statement however neither of these occur. Due to my lack of knowledge of PHP I didn't manage to solve this problem. I did post this question on Stack Overflow https://stackoverflow.com/questions/54129729/how-to-fix-contact-form-which-does-not-submit?noredirect=1#comment95092674_54129729 however terms were being used that I didn't understand and due to time constraints I wasn...

I wanted to include part of my professional twitter feed at the bottom of my website (in the footer).  Therefore by searching online I found that Twitter allows you to embed your twitter feed/timeline by entering the URL of your profile. Unfortunately this produced a very long feed which was too big for my footer. Therefore I  customised the settings so that it worked with my website and auto-updates when I post a new tweet. I changed the theme to dark, limited the amount of tweets to 1, chnaged the colour of the link to my accent colour to keep consistency throughout my site and removed the footer, border and header from the tweet. This worked well with my website footer. Bibliography TWITTER PUBLISH (2019). What would you like to embed? . [Online] Available at: https://publish.twitter.com/?link_color=%232B7BB9&query=https%3A%2F%2Ftwitter.com%2FSofiaGDesign&theme=dark&widget=Timeline [Accessed: 9 January 2019] TWITTER DEVELOPER (201...

To use react.js with my website, I needed to edit my package.json file to enable this. I chnaged my script so that the package.json would start the app.js script and the react-scripts. I added react, react-dom and react-scripts as depencies so that they would be installed when using 'npm install' in the terminal. I tested my package.json script with a .json validator to make sure that what I had written was correct which would ensure less errors would potentially occur.  I added the react scripts to my HTML files to ensure that I could use react within that HTML file. I wanted to add a like button to my portfolio pages with the intention of developing this later on. I used a basic like button script found on the react.js website however I wanted to improve it's functionality and apperance. This script creates a constant variable 'e' which creates a react element. A class is createdwhich uses this component and sets the state of the button to ...

Once I had added a basic 'like' button using react.js, I wanted to use SASS so that the button design would be more consistent with my website and appear more visually appealing. The button itself also had limited functionality as once you had liked something it would say, 'You liked this' and the button wouldn't allow you to unlike it afterwards. The button itself seemed to be set as though the message is displayed when this button is pressed which switches the state of the button. I wanted to change this and therefore looked online for suggestions of what to change. I came across a react button by Arun Kumar on CodePen which allowed the button to be liked and unliked and also included a heart symbol which I thought was a really nice finishing touch to the button! I had to change minor details about the button, making sure to remove the grey background, change the padding, height, width, font size, font familiy to 'Monda' and change the colour ...

Due to miscommunications from Ocado, I didn't have enough time to deliver this content in the form of a microsite and therefore have created an Invision Prototype showing my design ideas and process the user would take through the site. Each box will take the user to different products which I have shown with the Tanpopo button which takes the user to Tanpopo products. Desktop This Prototype can be viewed at: https://invis.io/T9PYB2KW523#/340654530_Home Mobile This Prototype can be viewed at: https://invis.io/Z8Q0OKXEYP6#/341145499_Home

I used Adobe Photoshop to create mockups for the Japanese cusine microsite as I am confident using this software. I edited the already-existing cuisine and included a shop as it didn't yet include one. I decided to include Tanpopo as one of the navigation boxes as this is a company that sells sushi, vegtables and other Japanese products on Ocado's website. Desktop Mobile

I used Adobe XD to create wireframes for the microsite. I created wireframes for desktop and mobile using the dimensions provided in the brief (1280px x 1024px) (1136px x 640px) to gain a better idea of the exact position of all images, products etc. Desktop Mobile

I recieved feedback from Micheal and Char about my mood board. Char seemed to be confused bby my thought process however Micheal saw that I was thinking in the right direction. Some of the feedback did seem contridictory however collectively this will help me improve my overall design of the microsite. The overall message I got from this feedback was: Colour palette - Good choice (Limit the amount of colours going to be used) Typography - Good choice (Both like moe font, rather than the traditional font) Food Photography - Contridicts each other slightly, avoid beige colours (Use only top-down imagery/far away) Cultural Photography - My intention with this photography was to just use a couple of images for the header so that the site has a cultural aspect to it (to be consistent with the already-existing microsites in the cusine section)

I decided to look at the already-existing microsites that Ocado had designed for other World Food's. Each microsite varies in size and style depending on which cuisine the site is for.  All of the microsites seem to share some aspects in common: Image for a header with writing overlayed explaining what the cuisine is Different sections for different relating to that specific cuisine Includes a food cupboard and offers Some include the flag of that country Some have menu's while others have a navigation bar or have images used to navigate different sections Images that relate to that cuisine I searched on the mobile version on the site for a microsite that had been designed for mobile view however I only found one for the Italian cuisine. As the buttons are listed this takes up a lot of room which I don't want to do with my microsite.