I was asked to redesign a website we thought was poorly designed or that could use an update for a final project in Dr. Paul Cheney's Principles of Web Design (DGM-2740) class. I picked the Onyx website (dancesaltlake.com) because I am currently an instructor there. I have had many, many students complain about the website's layout and how hard it is to navigate. Not to mention my own personal dislike of the loud colors and cluttered design. I knew I could create a simpler cleaner design that would still function as needed. While checking the site I noticed that it does not scale for mobile. I will insert a few of the screenshots below of the original website.

This is the first issue I wanted to take care of. The majority of our students access class sign up through an app called “Mindbody”, but the initial sign up is done through our website. I wanted to fix the responsiveness to help new students actually sign up easier and get them in the door. The second issue I wanted to take care of was the overly bright color scheme that gave me memories of 90’s Geocities websites.

Design choices

In my design I kept the green and purple, that owner is very attached to, but used a much more muted color. I used a greyer based green and purple to keep it from being eye-melting, while still staying with the original color scheme. If I was redoing this today, I would keep it more neutral. I would stay with black and white with one accent color in differing shades for active/hover links.

Wireframes and Content Choices

I based my wireframes on the existing website, trying to keep it to the essentials while still using the same layout. The information was there, and easy to navigate, it just needed a facelift. After I got my basic wireframes done, I drew a new logo that is more versatile. As in, not on a white background with a photo included. I did it in black and in white, I used the white on the website.

Then I got around to putting all the code together and making it work. Because this was an assignment, we were required to include specific things, a hero image slider, lazy loading an image gallery, cards with and without images, and a form.

The Issues

I did struggle with the JavaScript for the slider, but walking away and taking the time to think about other things helped me quickly solve the issue.

I had a few issues with my navigation because instead of an ID, I used a class. So of course, my JavaScript that was calling "get element by ID" was not working. I then forgot to link my JavaScript file in my other pages so that wasn't working. It took me longer than I'd like to admit figuring that out. I had to recruit our web developer at work to help me spot the mistake. I implemented the required items for the assignment. The form on the contact page, the hero slider on the home page, the cards with and without images on the home page, the pricing page, the class page, and footer, and the lazy loading on the instructor page.

Successful re-work of the site, kind of

I didn't realize how much I would like using CSS grid to organize the page. I struggled with it in the past and doing this project really helped me understand how effective it can be for styling a website. All of the images used on the site redesign are ones I have taken of the staff; I did this to bypass any copyright laws since I own the copyright. I feel like I solved the issues with the design being cluttered and overwhelming. I also solved the mobile scaling issue, and added mobile navigation so you won’t lose half the navigation bar when you access the site on mobile.

As I mentioned earlier on, I would make some different design choices if I was doing this today. I would pick different images for the slider, and a different color scheme. The trend for dance studio websites is very clean and bright, I feel like I missed the mark design-wise.