Through the design process of the website it was noticed that there would be a range of different elements which would need to be developed especially for the new portfolio. With the final wire frames being created, the separators which had been added into the wire frames needed to be created, along with the formatting of all the images that have been used in the site.

The first element to be developed were the red lines which were going to be used to divide the site into the different sections. Adobe illustrator was used to create these assets, with the pen tool and the fill option to create three sets of lines that are all different, as it would add more interest for the user. From here the different coloured backgrounds needed to be determined, allowing for each line to be the divider between colours, rather than having a straight line to differentiate between the different sections.

Once the separators had been developed, they were added to the site, with the next step being the development of the images and their formatting. The images which had been provided by the client were in the format of PDF, which would need to be changed to enable them to be displayed on the site. Each individual image was taken into Adobe Illustrator and then exported for websites as either a PNG or a JPEG file depending on the file, allowing for files with white space to still be seen on the web page. Whist working through formatting all of the images, three images were developed using an art board and then placing four images together, creating a trio of images which could be used on the slide show. These trio images were exported as PNG files, allowing for the space between the images to be transparent, so the background of the website can be seen behind.

Once all of the images had been exported to be suitable for the web, they were added onto the site and made responsive using their width styling to be 100%.

Bibliography:

Pinterest. 2019. Elementor Shape Divider – a fabulous new feature | Elementor drag and drop page builder plugin | Layout design, Web design tips, Interface design. [ONLINE] Available at: https://www.pinterest.co.uk/pin/213498838566731057/. [Accessed 3 April 2019]