Create Website Using Your Chosen Package (4.1)

Once happy with the finalised designs, I began building my site using the Wix Editor.


Screen Shot 2018-06-20 at 12.45.27.png

Browsing their free templates, I sourced a suitable template built with the purpose of showcasing video work, this was an important choice as this best fits my website requirements. I selected a template that looked, clean, neutral and visually dynamic – specifications I identified in the planning process.

Using the template editor was a learning curve, having previously only worked with the WordPress platform. However, the tools were easy and simple to use and by experimenting with different functions I began to customise how the site looks.


I was able to change layout, colour scheme, menu pages, fonts. I was pleased as this allowed me to have more control and greater creative freedom than I previously had when using WordPress. As my landing page is the first impression, I spent time editing the appearance of it until I was satisfied with how it looked and performed.

Screen Shot 2018-06-20 at 20.04.50.png

For the colour palette of my site I decided to use a black background, a neutral and professional colour, and a colour that is regularly used on portfolio websites. I was able to use the fonts I had previously picked out during the design stage.
The fonts I used are predominantly Sans Serif fonts and mostly in white, to stand in contrast to the black background and images/videos they overlay. I wanted everything to be legible and clear, simple and quick to read.

Screen Shot 2018-06-17 at 16.50.15

When it came to implementing the menu structure, there were several changes I had to implement to achieve the structure of the site as I had planned for in the designing process. The theme used ‘anchors’ instead of separate pages, a feature I decided did not work for my purpose. The ‘anchor’ function lead to information further down the page. To alter this, I removed the anchors from the landing page, decreased the page size to remove too much empty space and implemented new pages for each page I required.

Screen Shot 2018-06-20 at 20.05.30.png

Above, is my revised menu structure that better reflects my planned menu structure. The only change I have made is to keep ‘Contact‘ as an anchor, clicking on Contact in the menu automatically takes you to the bottom of the page where you can get in contact. I thought this was better to have on the bottom of every page as it is a call to action, and will more likely prompt them to get in touch with me.

To implement my Contact page, I have a mail form which the user can fill in (it will automatically fill in your email if you have your details saved), the form is linked to my email – I will test this before going live. I have also included an email that performs as a “mailto:” command, meaning it will open up your email and a new message draft with my contact details already filled in. This will make it easy as possible for people to get in touch with me, important as I am using my portfolio to attract possible opportunities.

Screen Shot 2018-06-20 at 20.22.11

Here is how my contact form will look. Additionally I have included links to my social media sites, that open in new windows, rather than take them away from my website in the same page – making it easier for them to return to my website.

As I progress to university to study Digital Film, my video work is my priority, therefore I chose to feature my latest work on my landing page. I used a gallery feature to do this, the video clicks on play and can be opened to reveal a short description about the video. I believe this looks visually interesting and encourages people to view my work immediately, the video is linked from my Vimeo page.

Screen Shot 2018-06-20 at 20.33.25.png

For my photography page, the function is the showcase my photographic words. I used another gallery feature, suitable for images and that looked coherent with the rest of the sites design, the website builder has a media organiser which makes this process easy.

Screen Shot 2018-06-20 at 20.26.00Screen Shot 2018-06-20 at 20.26.25

I think this works well, it again functions similarly to my film gallery – it opens up each image with a short description about it in a small pop up window, which can then be closed again.

Within the editor I am able to edit details right down to the appearance of buttons, I chose a clean design suitable to my colour scheme.

Screen Shot 2018-06-17 at 16.50.55

I was again able to customise almost every element of my site to tailor it to my needs and what I had pre-visualised.

The Finished Design:

My finalised site can be found here:

Landing Page

Screen Shot 2018-06-25 at 15.20.33.png

Photography Page

Screen Shot 2018-06-25 at 15.21.06.png

About Page

Screen Shot 2018-06-25 at 15.21.16.png

Contact Page

Screen Shot 2018-06-25 at 15.21.32

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close