Arts Edge Website.
PROJECT III.
OVERVIEW
This website was the second website I made (after the JSA website). Again, it was created entirely from code without using any templates or libraries. I learned a lot about what makes a good design, how to manipulate JavaScript to display content how I intend, and how to take advantage of scrolling effects and animations.
Click the button below to see the Arts Edge website:
SKILLS INVOLVED
- ·CSS, HTML, and JavaScript
- ·Web Design
- ·Git and Version Control
- ·Responsive Design
- ·Designing for Mobile
THE PROCESS
Arts Edge is actually a family friend's business. I was examining their current website and decided to use their company as inspiration to make my next website. The fact that Arts Edge is a dance studio was my main inspiration for coming up with a design. The planning part of this project took a very, very long time to complete. I decided to go with a modern, yet artsy design and a monochrome color scheme.
Credits to Arts Edge for inspiration and website content. You can visit their current website using the button below.
Arts Edge's current website is pictured above.
By far, the most difficult part of this project was perfecting the scrolling effects. These were mainly done using JavaScript and took advantage of the user's vertical scrolling and x-axis translations. The challenging aspect of these scrolling effects was taking into consideration different screen sizes and making sure the website is responsive. This involved making media queries to obtain the size of the user's screen size.
Another important thing to keep in mind was making sure to distinguish between desktop design and mobile design. This involved, again, making media queries to find the size of the user's device. I also had to consider the different user experience on each device. While those on a desktop screen will most likely be using their mouse to navigate, those on their phones will be using a touch screen. Therefore, I had to make sure that the navigation was seamless for both the desktop version (top navigation bar) and the mobile version (collapsable hamburger menu).
