Process of Website - Contact

Today in this Digital Art session, we will focus on creating and editing the ' Contact me 'page. I had chosen the 'Women's Clothing Store' for creating the main template of my website. I want the whole webpage to match with my project topic- 20's punk, which is a dark style, so I would use dark colors as the main color and add on some characteristics, combine the elements of punk with red, black, white, and green as the main colors structure.  In addition, I think adding some simple and personal drawing drafts for the website can make it being more integrated and more unified. 

The main purpose : simple/ easy to use /beautiful

Here are the original contact page. Based on the fact that I am just  working for a fashion design project, there won't be any reality stores or even opening hours. Therefore, I just decided to delete these information for my contact page and shorten the length with the website.

 

Add on the new background image with the picture which I had already prepared and upload before. Due to the color contrast is far enough, so I did not edit up any setting.

 

The original font of ' Contact Me ' was relatively small, and it's fill up with dark color, it would hard to see and easy to blend with the black color background. Therefore, I enlarged the words into 27 font size, turn it to white sharp color. At the same time I had also chose another bold and neat font which call ' Lulo Clean ' and finally selected 'heading 1' for the theme. In order to increase the optical illusion, matching the image with punk, I had added some effect which are some repeat color like red and green under the front base.

Result:

Text Settings:

I think that the main contact method must be included with : name, phone, email and message, so I kept the original text formats of this website. The 'Contact me' page before I customized it had the same situation with the heading,  thin and grey text font. Due to that reason, I transformed it into another design layout: a long strip with white as the background color, which can bring out a contrast with the theme page background color, clearly showing what their position is. In order to match the heading font, I also chose the bold shape font ‘ Arial Black’ and enlarged it to 20 font size.

This is the temporary result: