Followers

Tuesday, 4 February 2025

Creating a Website: Homepage

 Today we started making our own website. I started by going to Wix and I chose a template that is in my subject area 'photography'.  This is the template I chose.


My next step was to check the homepage and it was visible, therefore I went to the left-hand tools menu and clicked on 'pages and menu', I then checked the pages and there was an eye crossed out which meant the page was hidden.  Therefore I went to the three dots at the end of the homepage and in the dropdown box, I made the page visible by clicking on 'show page'.  I then clicked on the text of the name of the site and changed it to my own name.  I then chose a font/typography that I intend to use throughout the site.


For my font, I chose Palantino Linotype, which was at 60pts for my name and at 22pts for the subject area which I also changed.  I then dragged both my name and subject to the header so that this was visible on all pages.  


I then went to 'pages and menu' in the left-hand tools menu and I deleted any pages I did not need by clicking on the three dots at the end of the page and then clicking on 'delete'. I then checked I had the four pages that I wanted which are: Home, About, Portfolio, and Contact.  I then checked that they were all visible and showing in my navigation bar. 

My next step was to check the header and design the navigation bar.  For the step I clicked on the navigation bar and the design icon (little paintbrush) I then customised the design of the menu.  I scrolled down and chose the design I liked.  I then clicked into menu items and 'background fils' I then changed the colour when I was on 'hover, 'current', and 'regular', I then changed the font to Palantino Linotype and size to 28pts.


Lastly I changed the background image, this was in section so I changed the section by right clicking in the background and then in dialog box I chose 'image' and upload image to my 'site files' , I clicked on the image and to page.  I then made adjustments and changed the background colour on header and footer by again tight clicking and change header/footer background an then in the dialog box choosing the colour.  I then previewed and then clicked on save. This is my first draft of my website homepage.


After consideration, I updated the page and design and added my own image - I may still change this 


I tried backgrounds in Black and grey, I think I prefer the grey below as in my original design


I will keep this post updated with any adjustments and changes I make..

I am now going to check the mobile view and make adjustments as necessary.  This is how my mobile view looks at present.


On te mobile view I began by adding a 'back to top' button' I clicked on 'Tools' in the left hand menu and then 'back to top'.  I then click on the button and tehn clicked on 'change icon', I chose an icon I liked and then I dragged this into a position that I thought worked well, just above the footer. 

At the top of the page I changed the size of the social media icons as they were too big.  I changed the size of these by clicking on the icons and then clicking on 'layout' I then changed the size here to 40pts.

I also changed the text size and positioning so I just clicked on these and used the move tool and the transform controls. I used gridlines to ensure correct positioning. 

I also changed the image so that is was portrait in orientation and long and thin so that this was more impactful on my homepage on my mobile. 

Lastly I changed the footer design and background.  The background on the whole page I ensured was the same grey as the header.  The footer was in black which I kept however I made this smaller by dragging the arrow at the botttom of the footer upwards.  I then changed the copyright notice text colour to white so it was visible. 




I have saved and previewed the mobile view and everything looks good however my back to top button still needs work. 





No comments:

Post a Comment