LO3: Making the "Small Machines" Website

I decided to make my website using the Wix Website Builder, because I didn't feel confident enough in HTML / CSS to make the entire site in those. Websites made in Wix are heavily customisable so it was easy for me to make the website and arrange things how I wanted them.

Link to my site: http://10blundella.wix.com/smallmachines

Constructing the site

This is a logo that I designed for use on the home page of the site back in November. I used Photoshop to edit together the images of cogs and rulers.

Here is the background image that is used for the entire site. I used a high-definition image of wood and I made sure that the wood wasn't too dark - this would have made the text unclear.

The image above shows the home page of my website. It contains links to all of Small Machines' social media (top left), as well as images of the five different machines. You can click a button saying "MORE" next to one of the machines to read more about it on a different page of the site.

Towards the bottom of the home page, there are embedded Twitter and Facebook feeds for Small Machines (pictured above).

This is a page of the website called "Our Machines". It contains information on each of the machines (this is where the "MORE" links on the home page go to), as well as showing the prices of them and an option to buy. The "BUY" button links to an external site, https://shop.pimoroni.com, where the Small Machines can be bought.

Another page on the website is for "Royal Armouries Machines" - these are machines which were specially developed with the Royal Armouries Museum in Leeds. This page is dedicated to them, with information on them, pricing and options to buy.

The "Gallery" page showcases images of each of the five Small Machines. This page is linked to from the "Our Machines" page, if the user wanted to see more photos of the machines. It shows each machine from a range of angles, giving the user a better idea of what the machines look like and what they do.

Finally, the "About Us" page shows general information about the company and how it came about. Contact details are also shown as well as the same social media links seen on the home page.

This is the footer of the website, permanently positioned at the bottom of the site. It is visible at the end of each page, and contains a brief description of the company, contact details and a link to the shop.

Editing the site

In order to begin editing the site in any session, I signed into my account on Wix.com and clicked the "edit site" button.

In order to add a new element to a page, such as a button, a photo or a menu, I used the "add" button, which is one of the key tools on the Wix website editor.

Here, I have used the "add" button to add a new button to the screen. I am positioning it next to The Crawler, with the text "see more photos" already added.

In this screenshot, I was preparing to add a link to the "buy" button, which would take the visitor to the shop. The "link" option, shown in the screenshot, allows me to add this link.

Here, I have pasted the link to the shop in the box, and I have changed the settings to what I want - I have set the shop to open in a new tab when the button is clicked.

Here, I can be seen deleting an unwanted page from my site, which was there from the template I originally picked.

In the footer, I have placed links to four different social media sites - Facebook, Twitter, YouTube and Instagram. Here, I was about to click "set social links" in order to link the buttons to the different Small Machines social media sites.

This was the Add --> Image --> My Image Uploads page, where I selected images for use on the site. When I chose the one that I wanted to use in a particular situation, I dragged it into place.

This is an anchor that I added to the "Gallery" page. It means that when the "see more photos" link is clicked on The Crawler on the "Our Machines" page, the visitor will be taken to the specific section of the Gallery which displays pictures of The Crawler.

Finally, whenever I was finished editing the site in a particular session, I first saved the site on Wix (top left) and then published it live (top right).

House style

It is important that the website has a consistent house style across all of the pages. This is so that the website has a clear theme and the site visitors feel comfortable and confident using it. These are the key steps I took to ensure that my website has a consistent house style:

• Same wood background on every page
• Same font for the headers on each page, e.g. "Our Machines" and "Gallery".
• Same font for all regular text on the site, e.g. information about the machines
• Same yellow-and-black buttons throughout the site, turning red when hovered over
• Same header and footer seen on every page of the site

User feedback

The feedback from the people who have used my site (see my "LO4: User Testing" post) has been positive. After they had finished using the site, they were impressed that all of the buttons worked correctly and all of the pages loaded quickly. Another thing that the users liked was the layout of the site - the house style/theme of the site was consistent on every page and that made the website easy on the eye and comfortable to use. Also, they found that all of the information on the site read well and was easy to understand. Overall, the impression I got was that the users thought the site was clean, easy to use and easy to navigate.

Relation to target audience

The majority of users of this site would be parents, looking to buy Small Machines for their children as presents. Therefore, I tried to make the website clear and easy to understand, so that parents can know exactly what the machines are and what they do, as well as what the price is. I used large, interactive buttons and large text in key areas in order to do this. Also, the background is a light and unobtrusive colour so that it isn't a distraction from the text, while also adding interest to the site. On the whole, I think the site is simplistic, streamlined and easy to navigate, perfect for a parent who just wants the facts about a potential gift for their child.

Rich Media
Rich Media is any element of a website which interacts with an audience to make them feel involved, more than words and pictures on a page would. An example of Rich Media on my site are the buttons, such as "MORE", "see more photos" and "BUY". When hovered over with the mouse, they push downwards onto the page, the text goes from black to white, and the colour of the button goes from yellow to red. When the mouse is taken from the button, this process is reversed. It is interactive  for the user and adds interest to the site.