Monday, 21 November 2022

Website Creation: Contact Me Page

I then edited my contact page, by adding a contact form and then clicking on the form to set notifications to my email and I adjusted the design by adding an image and changing the text on the page. See below 


First of all, I clicked on the 'add section' button on the left, and selected 'contact form'. I then added the second contact form, as I liked the design and felt it would go well with the theme of my website.

   

I then clicked on the form settings, to set my notifications to my email. Followed by this, I then clicked on the 'text box settings' and changed the placeholder text to personalise the form a little and make it easier for the user to type in their text. I also changed some of the fields as a requirement for the user to type in their text.

I then edited the text for the 'contact me' section. I started off by selecting the text settings for the footer. I personalised the footer by adding in the copyright symbol alongside my company name with the year. I changed the text settings to the theme 'paragraph 2' with the font Quicksand. I decided to make the text a little smaller compared to rest of the text and changed the font size to 15, to draw less attention to the footer and place more emphasis on the 'contact me' title.

Following this, I deleted the text on top of the 'contact me' title. I then edited the text below the 'contact me' title to help make the form more user friendly. I changed the text settings to the font 'Quicksand', and changed the font size to 15, the same as the footer to maintain consistency.

 
Followed by this, I changed the font size to 59 of the title, selected the bold setting on the text settings for the title, and made sure the theme was 'heading 3' with the Quicksand typography, to maintain consistency with rest of the page and make the title stand out to the user.

Once I was happy with the title, I decided to make the social media icons a little larger by selecting the 'social bar layout' settings and changing the icon size to 30px. I felt the social media icons needed to be a little larger and required more spacing, so I changed the spacing to 12px.


Once the size and spacing of the social media icons were altered, I then 'set the social media links' and connected all the buttons to my social media links as shown below.


I then deleted the 'let's chat function' as I wanted to keep my social media page simple yet effective.



Following this, I wanted to add a relevant picture from the Unsplash website to go with my contact me page. I chose a picture with a person typing on the laptop as I felt it was appropriate for my website. I downloaded and saved the laptop picture on my desktop folder to use for my website. Followed by this, I selected the 'add elements' button on my contact page, and then selected the 'image' icon and then in the drop down menu selected the 'upload and import button', as shown below.


I selected the laptop image from my dektop menu and uploaded it onto the Contact page.



The image was placed on the left hand side of the Contact page as shown below.



I then used the 'cropping' tool to crop my picture to a rectangle smaller size, to make the page more visually appealing.


Once I was happy with the placement of the picture, I altered the alignment, by shifting the text and contact form a little to the right. This is the end result of how my page appears. I am pleased with the result, and felt the contact page was the quickest page to customise in the website.



I will now add the mobile view of the contact me page....










No comments:

Post a Comment

Project Development: Magazine layout for film review

Once I have completed my film review, I will put it in a magazine format. Recently, I read an article by Shumi Perhiniak about the 'anat...