This short project was about designing a dynamic website that would complement the Youtube channel of my client, Mr. and Mrs. Khatri - owner and creator of a food channel on Youtube, Abha’s Kitchen.
The basic navigation structure revolved around the idea of creating the playlists similar to Youtube’s Playlist, under which the client could group their videos by categories. Building upon this idea, I designed the wireframes to decide on the content and the flow of the website. The website consists of fiour webpages which includes a landing page, all recipes page, individual playlist pages and the video page.
While designing the video thumbnail and determing the flow of the website was fairly simple, the navigation bar and the window for the video player I had to try out several design solutions and iterations to see which fits the best. While designing the navigation bar, I explored a few approaches which includes a drop-down approach and a two-layered approach of navigation as shown below.
Design solution 1 was a more tradtional approach which included drop-down arrow to view the playlists. On the other hand, design solution 2 was more compact and provided with the visibility of the playlist without any drop-down arrows. The only drawback was that not all playlists were visible. In order to see all the recipe playlist, the user has to press the “View All” button. However, this style of navigation was much simpler as providing with a few options upfront seemed much more appropriate them overwhelming the user with the entire list in a small drop-down area. Hence, design solution 2 was preffered over design solution 1 for navigation bar.
While designing the window for the video player, I went through several design iterations until the final design and its content seemed to fit well with the layout of the website.
Based on the comments above, I went ahead with the third iteration. I preffered this solution as there was a balance between two disimilar elements i.e the bigger screen area of the video was balanced out by the more information-heavy smaller screen area. After designing the initial wireframes and the final iterations of the elements , I began with the high-fidelity mock-up for the website.
