“Sam was able to get a very good understanding of my business and ethos and could translate it into the right website for me. I warmly recommend Sam as a great business partner. He is professional, dedicated and friendly.”

Christina – Business Owner
vi fullsite

Summary

On this project, the client had existing social media pages and wanted to create a website to boost their online presence. They wanted a design which was fun, visually interesting and easily accessible for all visitors. I initially worked on branding to help capture the identity of the business and then on building a functioning Wix page. At the end of this project, the site was handed over the client to use as their own site.

Mood-board

I started this project by creating a mood-board in Adobe Xd. This was to provide a starting point for discussing the branding / visual direction with the client. The mood-board included colour schemes, font combinations, stock images and logo ideas. The client and I were able to make some decisions on the type of images and branding that would suite their business. I also learned that Very Italful is language school with a focus on having fun and enjoying Italian culture. The client also showed me examples of their competitors and wanted their site to stand out against the more academic looking sites.

very italful wireframe
Wireframe

I also used Xd to create a wireframe design for the home page. I chose fun, bright colour and large images to emphasise the type of business Very Italful is. The client also made some requests for content. They wanted their Youtube videos be the hero element on the page and a section for Facebook reviews + contact/social information. Using this feedback and some additional market research I was able to come up with a design that stands out whilst fulfilling the client’s brief.

vi noindex
Building the Site

The site was built using Wix and was originally created on my own account. It was then transferred to the client once we were both happy with it and was fully functional. During this process, I made the site hidden by setting the robots meta tag to ‘no index’ and by adding the pages to an admin members area. This meant the pages could only be viewed privately by me and the client but not anyone else. When we were happy to launch, I removed the meta tags and made the pages public.

very italful overlay menu
Customization

I made several changes to the design during construction to help improve the site’s look and feel. The navigation bar was redesigned to work better as sticky element by having the logo ‘hang’ off the edge of the bar. I also added the Italian flag colours to introduce more colour to the design. And for the navigation menu, I created an overlay element that pops-in when the bar icon is clicked on.

To flesh out the home page, new images and site copy were also added by the client. Google Fonts /Font Awesome Icons were imported into Wix to match the wireframe. Lastly, I added a basic ‘privacy policy’ page and a ‘Coming Soon’ screen (used to cover the other site pages. These will be added at a later date).

fb code builder
Custom FB Code Builder

When implementing Facebook reviews on Wix I ran into an error which prevented the links on the reviews from being clicked on. To work around this, I created a button element with a link to the client’s FB-review section. I then overlaid the button on top of the FB-review iframe. This allowed the iframe information to load so visitors could see the reviews. But when they clicked on it, they would be sent to the FB-review section.

Additionally, I wanted the reviews to be responsive and fit better on mobile. However, since Wix does not allow code files to be uploaded I decided to create a simple code builder web page instead. The code builder has a simple html / css UI, which accepts a Facebook-post link and outputs the modified iframe as well as preview to show it functioning.

codebuilder function
Code Builder Scripts

When a Facebook url is submitted it is passed to a javascript file. This file then uses JQuery to construct an iframe on the client-side. It uses the original address and then adds responsive attributes to the iframe. The result is then rendered on the page. The preview image on the left is the rendered iframe running inside of the html document. While the text on the right is an escaped string version of the iframe (so a user can copy the text and use on another site).

This code builder came in handy for this project and might be a tool that I expand further in the future. Allowing more users to easily edit iframes for their sites. Possible features could include things like: changing dimensions further, adding borders styles or creating different layouts.

Animations / Effects

  • -Link hover effects
  • -Sticky navigation
  • -Overlay Menu

Resources