MILESTONE PROJECT AND ZORIKAS WEBSITE

This is a project to create a website created primarily in CSS3 and HTML5

It will act as a place to display the work of an animator, comic book artist and illustrator.

This website was built by Benjamin Orton.

UX

This website is primarily a place to display art work either as animation or still images. The two main intended users of this site are fans of the work and potential employers because of that large areas of space are given up to display the artwork and where needed there is a smaller section of text next to or below to provide more information.

As a potential employer getting information quickly and easily is important. The carousel achieves this, allowing several large pieces of artwork to be displayed while keeping the footprint on the page relatively small. for this reason it was decided to put the carousel at the top of the page taking up two thirds of the width on large screens and the whole width on smaller screens with some information about the artist next to it.

For a potential employer looking for and animator an animation section has been added further down the home page with a large video taking up two thirds of the page width on large screens and the full width on smaller screens and with links to the animation page both in the nav bar top of the page.

An illustration page was added to help display work quickly and easily with small illustrations that can be clicked on to be viewed at a larger size. The images have a slight zoom and drop in opacity when hovered over to help make it clear they can be clicked on. It was decided to keep the image files large here even though this does provide a worse user experience for people with a slower internet connection because it allows potential employers to view the images in the best possible quality

The final section for employers for employers if the about me section that gives a very quick CV and overview of education and awards.

Fans of the artist, at this point in time, are primarily from her work in comic books because of this a section on the homepage has been added with links to the latest comics. There is also page dedicated to comics with more information about the comics and links to them along with large illustrations.

Links to social media have been added at the top and bottom along with a subscription form at the bottom of the page to help with social media growth and make it easy for fans to find and follow the artist on other platforms.

The header and navbar are kept reasonably simple so as not to distract from the artwork. The navbar also collapses to a "burger icon" at smaller resolutions and works using a checkbox All links a simple hover animations on them to provide visual feedback and help show that they can be clicked on.

The font was chosen because it was clean, easy to read and doesn’t distract from any of the artwork.

A initial wire frame was created in basamic and can be downloaded here however this design was changed after conversations with the artist to better suit her needs.

All images were provided by the artist Zorika Gaieta.

Features

For this project i used bootstap for the grid, carousel and subscription form.

I used vimeo for the embedded videos

The font came from Google fonts for normal text and The social media icons have been taken from font awesome.

Testing

This has been tested on multiple browsers and devices and the css has been checked in https://jigsaw.w3.org/css-validator/ and found no errors.

Deployment

The website has been deployed though github pages.

Credits

The carousel has has been copied from the bootstrap documentation on index.html lines 69-94

Fix for parallax scrolling error in edge and internet explorer copied from stack overflow in styles.css lines 627 to 656.

The idea for the checkbox navbar was based on a tutorial by kevin powell on youtube although it has been changed to better suit my design.

https://www.w3schools.com/ has provided lots of help in information throughout this project

All images provided by Zorika Gaeta.

Thank you to

Haley and Neil from the tutor team that helped me with pseudo classes and an error with my relative pathways.

Ricardo Quichocho Gallegos provided feedback and advice thought the project

And finally Simen Daehlin, Heather Olcot, Joke Heyndels and Kevin Cutis for helping to test my website.