TNicoleMusic

TNicoleMusic is a singer, songwriter, and musician in the R&B/Neo Soul music industry. I was given the task to help redesign and redevelop her website's Wordpress theme from scratch.

• Visit Website

• Web Development

What I Did

Web Design

Prior to accepting this freelance project, her original website featured a single full screen homepage with her brand's album logo. Upon clicking on the album logo (which filled up a majority of the page, centered), it would then reveal her website's content via an animation like the automatic doors that slide open upon entering a modern store.

The original website had a navy blue theme to it, when her actual brand colors are red and black. Next, I decided to opt for a fixed background image featuring her logo, which helps give the site some depth. Not only that, I went for a fixed header and footer since the viewport is meant to be the size of the screen to avoid any weird scenarios from happening especially with the background image.

As for the hero section on the homepage, I used it to feature her latest work as well as a embedded music player which not only helps prevent unwanted pirated downloads (which the old site lacks), but it also provides a nice looking UI to play music from.

Web Development

Because the website was originally setup as a Wordpress theme, and seeing how my client is non-technical, it was decided that it would be best to maintain a Wordpress theme approach towards this website redesign process.

The client wanted a way to better feature her music work and to display a portfolio of her work. With that in mind, I settled on creating a custom post type for posting "Music" post alongside the default Wordpress blog post "post" type. That way, should she ever want to create literary content in the future, she would still have that option to do so.

To make things organized, I used SASS for creating styling and to help speed up the development process. The same goes with my choice of opting in with the use of Bootstrap, except it is primarily used for its mobile responsive functionality. Style wise, I had to make all the required parts myself.

The Technology Stack

• HTML5
• CSS3
• JavaScript
• SASS
• Bootstrap
• Wordpress Theme Development

Challenges

One of the main challenges I faced was creating a custom post type, as I didn't have too much experience working with that aspect of Wordpress. It took a bit of playing around and some researching to get it to work properly.

What I Would Do Differently

Most of the theme aesthetics customization features or homepage content updates (such as the section paragraphs), were updated via the Wordpress Customizer API. It did have some display issues on the live preview section, which could confuse the user. If I had to redo this project over again, I would create a Custom Admin Page (specifically a custom theme plugin) that would allow the user to customize her theme from there via the Settings API rather than the Theme Customizer API. It would've enabled a more straightforward customization user experience.

As for the animated two lines of text on the homepage, which features her slogan, I probably would've opted in for a more simpler approach which involves pure CSS3 animations. A fade in effect from the left and the right would probably be better than what I made which was a text pan in from left and right upon scroll since the scroll has some display cropping issues on smaller screen devices.