This content originally appeared on DEV Community and was authored by Shawn Mahbhb
Content is king in 2021. we learn through content, we entertain ourselves with content, we even procrastinate ourselves with content. A large number of this content is the video and when it comes to video content, YouTube has been the undisputed king since its inception back in 2005.
Apart from the great video content, we found on YouTube, a huge player behind YouTube’s popularity is its buttery smooth user experience. As an aspiring UX designer, I thought it would be a great learning experience to recreate YouTube from scratch.
I split the journey into 4 sections thus you can understand my approach of recreating YouTube in a precise way.
- Take the snapshot
- Analyze & create a component library
- Create the style sheet
- Follow fronted framework Vue JS
Take the Snapshot
The first step is to take a snapshot of the interface. Different screen resolutions are starting from the 360px to 2160px but which one should you pick. The best option is to take the snapshot at 1440px which is the standard breakpoints of a desktop.
After that, create a desktop frame in Figma which is 1440 X 1024 px by resolution. Drag the image file from your directory to the selected Figma frame. After placing the image successfully, align it to the top and left to the frame. Select the image from the layout hierarchy and reduce the opacity to 60% and lock it to the frame thus you can design other components over it.
Analyze & create a component library
Whenever you are going to design a large-scale application you need to build a component library because the same components will be reused in other sections of the interface.
In my case, I’ve analyzed 4 major components with their base components and design the whole interface. For perfection, I switch to Firefox and take div screenshots and paste it to Figma. Additionally, I inspect the computed layout of the div section to measure margins and padding between the objects of the component to make the design identical.
Video Card: From a UX perspective you need to have the skill to identify the component that draws the user’s attention first. In my case, it is the video card component that draws maximum attention from me when I visited YouTube every time. There are a couple of base components like Channel Avatar, Video Thumbnails, Video Title, and Channel Details.
Related Chips/Tags: On top of the video cards, there are related video chips that are generated by your watching history and suggest related tags as per your interest. As a UI designer, you need to design small components first so that you can build complex components to make the layout complete.
App Bar: The next component that I build is the app bar component. In these components, there are a couple of base components like search, user avatar and upload video icons. I combine all together to create an App Bar. This is the simplest component that I design from all of the components.
Navigation Drawer: Finally, I build the navigation drawer which is one of the important components for the users that will redirect the users to different pages of YouTube. In this component, there are also multiple base components but they are similar in type. That is why I create a variant for them to use it smartly all over the interface. One variant shows only the options to navigate and another variant shows subscription channels with new video status. As a UI designer, you’ve to give focus on those small details that will help you in your design thinking ability.
Creating the Style sheet
A style sheet is combined of design assets such as color, typography, icons, illustrations, spacing, elevation, etc. As a UI designer, you’ve to collaborate with developers and they need design assets from the style sheets. If you create a separate Figma page for design assets and name them as per your team’s coding convention that will reduce the time of your developer’s friend. For example, If you have a color palette with multiple Grey Shades then name like Grey 90, Grey 80, Grey 70, etc.
For typography, I use Roboto as this is the default typeface of Google’s product that follows material design. I use the material tool for generating the type scale as per material guidelines. This will help you to create a robust and responsive type system for your design.
For colors, I use the material kit resource of Figma and there I get every shade of grey and other states colors such as error, success, warning, etc. In the color frame, you can see that I’ve taken multiple shades of the primary and secondary colors so that I can choose among the variants for designing dark mode and make the design accessible.
Additionally, I need icons that will have multiple states like outlined or filled. In material icons, I found 5 states of icons that are the same icons used by YouTube product design as they are bound to follow the material design as their design system.
Finally, there are elevation levels that I need to use for designing multiple interaction states like hover, enabled, focused, dragged, etc.
Follow Frontend Framework Library: Vuetify JS
After you’ve successfully designed the interface, it is time to hand off your design to your developer’s colleagues. I need to document my design system as per the guidance of Vuetify JS which is a component library of the Vue JS frontend framework.
This will help my developer friend to quickly identify the components and build the interface quickly. For example, for the video, my developers are going to use the card component and configure it as per my design and declare it component class and reuse it on other pages of the application.
In my case, I have used Vue but it depends on your developer’s team as they are credible to choose the framework. In your case, it could be React JS, Bootstrap, Angular, etc.
Final Result
Learning Outcomes
As many Figma designers struggled to design complex components with Auto-Layout I am not an exception. I design every base and master component with the help of Auto-Layout thus it helps me design responsive interfaces in multiple breakpoints. If you want a separate tutorial of auto-layout then let me know in the comment section.
As I’ve said previously, building a large-scale application is a complex process and if you follow the process of building a component library then it will save a lot of time for your team and project.
As a UX designer, I always wanted to design interfaces that completely follow the material guidelines. Following their approach is an industry-standard approach for designing applications. I’ve to go through the material design guidelines during the design time and it helps me to get deeper knowledge about their design patterns.
Closing Thoughts
I’ve recreated YouTube thus designers like us follow an industry-standard approach as many designers feel the pain of designing complex applications. By following the steps that I’ve discussed above you can recreate any of the complex applications and add them to your portfolio that makes more sense.
Look around the design approach, if you think it’s suitable for your use-case, use these steps as a template. If you think something can be improved, let me know or heck you can just contribute directly. That’s the beauty of UX design, isn’t it?
Good Bye, Thank you ?
This content originally appeared on DEV Community and was authored by Shawn Mahbhb
Shawn Mahbhb | Sciencx (2021-05-25T11:36:43+00:00) How I Recreated YouTube in Figma: Practical Guide. Retrieved from https://www.scien.cx/2021/05/25/how-i-recreated-youtube-in-figma-practical-guide/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.