Codepen: Page Slides with Progress bar built-in

For today’s project I decided to not use any library…unless you want to count Font Awesome’s library for the arrow icons. Today’s project was centered around thinking about how UX and UI meld together. We want to give users a nice experience and we want them to have a good experience. I once read somewhere that good design is when the user isn’t aware that it’s good. It means that the ease of use is built into the experience. So for this, I worked with css animations for the arrows and some anchor links for the sections, each of which is covers the window size automatically. The elements for the example were centered with arrows on the same place on each side. The animations were included to give the user further aid as to what the elements do. One of things that I’ve been recently considering from a user perspective is giving aid to the use of certain aspects of the website by adding small things like animations to move users towards certain actions that add to the ease of the experience and thereby giving them a better experience with the website. This is also why I thought it would be good to include a progress bar. One frustrating part of the modern web experience is not knowing where you are in the content. This is a great and yet simple way to measure progress for things like blog pages. Overall I think it was pretty good for a small project. We’ll see how tomorrow’s goes. See ya then!