Creating a Website: Homepage

 This week I am starting the creation of my website using Wix, my website will contain my work regarding Product Design and my Major Product Design Project for this term. To start with, I am adding a template and designing my homepage. 

I chose this template, because I liked the simplicity of it. The text size is large, there is no text bloat at the top and I liked the lack of animations, which I hope will help run my website smoother.

I double clicked the text at the top of my website to change the name, a dialog box opened with options to change my text. 

 I typed in my name and changed the font to Syne, with a font size of 125, using the 'Fonts' and 'Font size' options in the dialog box. I changed the subtext under the title by double clicking it and using the same type of dialog box, I changed the font size to 35.

I used Unsplash to find a copyright free image to put onto my website until I have got my own. I added a section to my website by clicking on the orange grid and clicking the purple 'Add Section' button at the bottom of the grid that shows up. A menu opened on the left, where I chose 'Choose Image' to create an image section. I clicked on the image after which buttons appeared, I clicked on the 'Change Background' button. A menu opened on the right, on which I clicked the 'Image' button. I then clicked on the 'Upload Media' button and the 'Upload from Computer' button on the dialog box. I uploaded my image from Unsplash and it appeared in my image section.

Next I scrolled down to the footer of my website, deleted the 'Let's Chat' button by right clicking on it and choosing 'Delete'. I double clicked the copyright text on the bottom and changed the text to the right year and my own name. 

I centered my title to the center of my website using the gridlines and dragging it across using my mouse. I double clicked the menu title to open the dialog box and changing the font to 'Syne' with a font size of 80.

I centered my title a little bit more to ensure that it is visible on all devices using the same method as mentioned before. I then opened the 'Page' menu using the menu on the left and deleted the pages that I did not need. I added a portfolio page by clicking the 'Add Page' button, which opened another menu from which I clicked the 'Blank Page' button at the top left. 

I deleted the sections on my homepage that I did not need by right clicking them and choosing 'Delete'. I also moved the subtext below the header using the grid. I tested if my menu worked by clicking the 'Menu' button and clicking every page to see if it takes me to the correct page. My current homepage looks like this, I like the simplicity, although I am not sure if I am happy with the positioning of the 'Menu' button.

Update:

I added a slideshow to my Homepage by clicking 'Add Elements' in the menu to the left and chose 'Interactive'. In the menu that popped up I chose a 'Box Slideshow' that I could place it within a column so it would not fall off the website in different views. I changed the font of the title to 'Syne' with a size of 70 by clicking the text and choosing 'Edit Text'. I added a subtitle using 'Add Elements' and choosing 'Text'. The font is 'Helvetica Light' to keep the consistency and a size of 25. I added a border to the slideshow by clicking it, choosing 'Design' and clicking on 'Border'. I changed the colour of the border to the hex code '#A69A80' and changed the border size to 2. I also changed the background colour of the column by clicking on the background, choosing 'Change Background' and picking the 'Colour' option. I added a link to the button by clicking on it, choosing 'Change Text & Icon' and clicking on the text under 'Links To'. Under 'Which Page?' I chose my Portfolio page to link the button to.

For the mobile view I deleted most of the columns and rearranged the column sizes to fit into a smaller view without it looking too full.

Second update:

I changed the picture at the top of my website and adjusted the theme accordingly by clicking 'Site Design' in the menu on the left and clicking 'Color theme'. I got the correct hex codes by using the website Image Color Picker and uploading my image, the website then gave me the hex codes of the colours in the picture. By clicking on the colours I changed the hex codes to the colours that I wanted, this automatically changed the colours on my website. I also changed the picture on the slideshow using the process that I have mentioned previously in this post. I added a quote to the picture at the top by clicking 'Add Elements' in the menu on the left and choosing 'Text'. I chose 'Heading 1' and aligned it to the centre of the picture using the grid lines. I changed the font size to 55.