Jessica Walsh Website

For all the websites, it would be best to open them on chrome to get the most accurate experience!

When starting my process, I first made a simple ideation of what my website would look like in both mobile and laptop screens. Afterwards, I moved on to finalizing the look of the website.

This was the first iteration. It was super basic.

This was my second iteration.

One thing that I had not considered when designing my website was how well I would be able to develop the mechanism that I wanted. Due to my lack of HTML experience I really struggled to get the horizontal scroll that I wanted with my pages. Thankfully, I was able to get help to solve the issues that I had. One key component that I wanted to be used throughout the pages was the users would be able to playfully scavenge for balls around the pages. There were many issues with how to make the images fit the background in a manner that I wanted so I almost gave up. Some of the balls you can hover to find some more information while others you can tap and it will lead you to another page. I did change some of the layouts due to my lack of experience coding.

This is the home page of my first design.

This was the Now page.

This is the Work page.

The responsiveness of my first website did not work so that when users made the screen smaller, the images would be misplaced.

This is an example of what happens to the page when the screen gets smaller.

This was the first iteration of my coded website: https://mlbqj.csb.app.

Final Website

For my final website here is the link: https://fjj1j.csb.app/.

There are many aspects of the design that I changed. First, with the timeline, I made that users would be able to hover over the balls to get quotes from Jessica Walsh. Another thing that I changed was the media query so that when the screen got smaller to the size of a phone users could not hover and just have the dates out.

On the left is how the page looks when people do not hover over the ball. On the right is how the page looks when users do hover over the ball.

This is what the page looks like in a smaller screen.

In order to make it obvious for users to get home, in the Timeline page, I made sure that users were able to get to the home page by pressing the only blue ball on the page.

Here is the section of the page that has the home button.

For the Now page, users can press both the small red ball and the big red ball. When you hover over them, they get bigger to allow people to know that they are pressable. The smaller ball takes you back home while the bigger one leads you to another page which is of what Jessica Walsh said. For the quote page there is a home button at the end of the paragraph.

The left is the first Now page and the right of the second page of the Now section.

Overall, I struggled a lot with at first with understanding how to use HTML and CSS in a manner that I wanted to, but as I continued to work on the website, I started to enjoy it and it felt like a puzzle.