Progress Report on Fonts, Design Elements and Navigation

Fonts:
The fonts I had researched to go with the Immersity branding were web friendly and free, however that evidently doesn't mean they are free and easily available via Elementor. So I had to find the most similar fonts to those ones that are in Elementor. Therefore, instead of ITC Avant Garde Gothic LT the site will be using Poppins and instead of Albiona (if we decide to have the secondary font), it will be Besley. 

Below are samples of the font pairing options in context on the staging site.  

Design Elements:
Now that the color scheme is nailed down, we wanted to find ways to integrate design elements into the site that pull from the Immersity logo. For that we are looking at the little blue dot and also at an angular corner crop on the top left of images and boxes. I created a graphic with overlapping gradient circles to use as a background in some sections of the site. I also mocked up what a frame around the images would potentially look like.

Navigation:

The other task was to configure the actual new pages and navigation On the staging site (via Elementor). The logo remains in the top left and then the menu is centered. Below the navigation I included some samples of other ways we can add angles or curves to varied web sections in the site.

Important notes:

• This menu does not include the Student & Instructor sections and already fills up the width. So we may need to consider making one item called Our Services and then having that drop down with Learning Providers, Employers, Students & Instructors. 
• I have not started designing for Responsive settings at all yet and that is essential for phase 1.
  

Outstanding Technical Challenges for current Action Items:

• I need to learn more about responsive design settings in Elementor. 
• The current site does not have any global settings for fonts. This means that either i need to learn how to do that and implement it so that future changes are efficient (which I need time to learn) or I need to manually adjust type in each sections as we rebuilt them. This would be quick now, but not for future global edits. 
• If it is decided to proceed with the angular frames & dot in the corner of each image or some text boxes... I need to figure out the best way to do it. The easy way for me would be to modify impacted images in Photoshop and upload those to the media library. This however means that a global change in teh future (i.e. to get rid of that design aesthetic) would requre more work. There should be a way to overlay the corner image on top of exsisting images, but started playing with it in Elementor and it seems very complicated - - - even before I take responsive design into account.