Posts

Invision Prototype & Communicative Decisions

I decided to create a prototype on InVision as this would make the mockups easier to visualise as a complete website for the managing director. We agreed that any small changes that need to be made to pages e.g. spelling errors, title changes etc. should be added as a comment on the InVision prototype and any large changes e.g. paragraph text changes, image changes should be e-mailed instead. We decided to do this because any small changes may be lost in an e-mail thread and large changes will be easier to read via e-mail. My prototype can be found at: https://projects.invisionapp.com/share/E9R1NV7HUYV#/screens/352607769

Other Pages Mockup & Design Decisions

Image
Using Adobe XD, I edited the landing page slightly to incorporate the different slider headings and changed the fonts to match the reworked logo. I used Viga for the main headings/titles and Assistant for the paragraph text and information. I came to this design decision because I felt that Viga was very unique and this would stand out if this font is used as a header font. Moreover if Viga was used for the paragraph text this may become difficult to read and therefore I used Assistant for this as this font was clear. I have used grey boxes to represent placeholder images as these images haven't be discussed with Calogero. *All mockup images are my own and were created in 2019 using Adobe XD

Modified Landing Page Mockup

Image
I took onboard Calogero's feedback and modified the mockup to include other sections and alterations to text and images. It was important that I followed this feedback so that Calogero could gain a better picture of what the website would look like and see changes made. (Own Image, 2019)

Landing Page Mockup Feedback

After speaking with Calogero Gattuso, he suggested the following changes and additions. Header Ramsay Safety Logo to small, make bigger more prominent Move top navigation bar down a touch looks like too close to the top of the page Contact Us to appear in each of the images Review message on Header and match up the correct image for the message being communicated Header Message 1 with appropriate image Affordable annual Retainer fees renewed on a yearly basis Header Message 2 with appropriate image Bespoke training programmes tailored to your companies risks Header Message 3 with appropriate image Simple easy to understand Audits Header Message 4 with appropriate image HSE visit? We can help with corrective actions Welcome Change text to: Our aim is to simplify Health and Safety by making life easier for our clients by offering realistic pragmatic advice and solutions. Our objective is to provide consultancy services to organisations of al...

Vuforia Image Target Workshop

Image
We created a new 3D Unity project and enabled Vuforia in the project settings. We added an AR camera to the scene and ensured that the World Center Mode was set to 'DEVICE'. We created a new license on the development portal to get a new development (License) key for our new project. After pasting this into the Vuforia Engine Configuration settings, we added a database to our license so we could add a target. We added a 3D object, our .od file to this target and added this to the database. We then downloaded the database, making sure to select the Unity Editor as the development platform. We then imported this database into Unity. We added a 3D scan to the AR camera which added this GameObject to the scene.  We made sure that the object target was set to the Vuforia Camera so that the camera knew what object it was searching for. We then added a cube to the ObjectTarget and placed this in the plane. Below is a v...

Landing Page Mockup

Image
I designed a mockup for the landing page of the website using Adobe XD. I decided to create a mockup based on the Business & Coorporate Bootstrap template to gain a better understanding of what the website would look like. I decided to create a mockup rather than a wireframe as Calogero was finding it difficult to picture what the website would look like without images and appropriate text. Creating a mockup has made it immediately easier to understand and has made the design process more efficient as we have began to discuss changes to images and content rather than layout. Moreover, I have decided to begin with the landing page first as this is the most important page and is what potential clients are going to see when they land on the site.

Bootstrap Templates & Decisions

Image
I spoke to Calogero about coding the website from scratch instead of using WordPress via phone call. He was supportive of this idea as he liked the way the bootstrap templates looked compared to the look of the WordPress themes that he had seen previously. Therefore we decided to look at a number of Bootstrap templates and narrowed this search down to two templates. The main theme Calogero liked was the Directory & Listing theme. Although this theme looked good visually, it was designed more for a restaurant, café and/or shop rather than a generic business website which wouldn't have been suitable for Ramsay Safety Solutions. I explained that I could edit the content so that it is more suited to Health & Safety however the amount of changes that were needed meant that it would be more appropriate to choose a different theme. (Own Screenshot taken from Bootstrap Themes, 2019) Therefore we looked through more themes and found the Business & Corporate the...