Hey everyone! In my previous articles, I talked so much about UI kits and how to use TUK components to create your own website. Today, I am going to share something with you that I have tried using TUK recently. Well, I am talking about templates. Did I tell you in my previous articles that TUK has some amazing templates available? No, I have not. So let's start this today. Have a look at the templates provided by TUK.
If you haven’t read my previous articles. No worries! Let’s talk a little bit about it. TUK as the name suggests is a web UI Kit. It provides over 350 web UI application and marketing components. This helps designers and developers save a huge amount of time. Developers are able to focus on getting the functionality right without getting into the technicalities of design.
Advantages to look forward to with TUK
TUK also provides the advantage of a consistent UI design. The components provided by TUK have been created to ensure consistency in design elements. Developers have complete freedom to make changes to the visual elements including fonts, colors, and images. So, TUK helps its users by taking the focus away from designing the website and at the same time doesn’t restrict its users to a particular design type. You can check it out yourself. https://tuk.dev.com
The main benefit, of course, is how easily developers can create responsive, accessible, and cross-browser compatible websites. This is my favorite part of using TUK. Since I started using TUK I don’t have to worry about ensuring whether my application is responsive across different screens or making sure it’s accessible. TUK automatically handles that for me.
Depending on the website you are creating, you can use the variations of the application and the marketing components. You can also utilize the templates provided by TUK if you are looking to create a similar website.
What makes TUK the ideal choice, for me at least, is how I can borrow components from the templates according to my requirements. This means, I don’t only have the 350 components that I can use, but on top of that, there are 50 screens from where I can pick different components according to my need.
Unlocking access to different components and templates.
To gain access to all these different components, all you need to do is acquire a developer’s license. It costs $189 to get the license, but it is worth every penny. I’ve been using my license for the past few months and I have to say that I have made more money than what it cost me.
I have been able to work on more projects since I started using TUK. The best part is, a slow-paced web developer like me has been able to develop a rhythm and complete more projects on time.
Looking at the templates offered by TUK
Once you have acquired your license, all you need to do is visit the TUK website and go to the templates page. There you will be able to view 10 templates with over 50 screens and 3 landing pages.
Let’s look at these templates one by one.
- The “Job template” offers a great design. It is a platform portal that connects recruiters with the right job seekers. This guarantees to find the right candidate for the right business.
It provides 8 screens. The first screen is a simple login screen that can be used by recruiters and job seekers. Then comes the dashboard, it displays the total jobs, average click rate, total applied, and total hired.
You can also find an infographic that displays details including the total application, interviews, and forwards on the dashboard page.
Depending on the type of account you have (as a recruiter or a job seeker), you can view job search and job history.
Job search allows users to search for jobs related to their skills and experience. Recruiters can post job descriptions and requirements to let the job seekers know what they are looking for. These will be visible to active job seekers on the job search page.
Job history includes the details including jobs applied, saved, pending, and calls for an interview.
2. The “Educational Portal” has been designed keeping in mind the functionality and features of an educational portal in mind. It includes 7 screens.
The dashboard has the courses, completion rate among other features.
Various pages including courses, instructors, publishers, articles, and webinars are included in the portal.
3. A very practical template is the “Sales Analytics” template. It provides valuable insight into the sales made by a business. Infographics displaying sales estimated and the transaction history has been added to the template. The customer management section helps measure individual employee performance. Meeting details, customer records, and product details are also included in the template.
4. The “Project Management” template can be used by businesses across multiple industries. With over 8 screens, the template covers all the important features of project management software. You don’t have to worry about the total progress, weekly progress, or, the daily task report. Of course, backlog, invoice report, teams are also included.
5. The most detailed template is the “Content management system”. With approx. 15 screens. It covers everything from project management, product inventory, employee performance, task & deliverables, invoices, and even the settings section.
You won’t have to worry about adding more features while using these templates.
6. The “Learning Management System” is a little more detailed than an average LMS portal. Apart from the list of courses, instructors, and seminars it also provides a forum (that students can use to connect with their instructors), an FAQ section, and a review section.
7. The last template offered by TUK is the “Blog” template. It provides 5 screens and includes blogs for business, technology, and lifestyle. Since you can get the code for each template, you can easily add more blog sections depending on your requirement. This template provides trending blogs and videos for the different types of blogs you are interested in.
Making changes
Let’s move to the fun part of using TUK, changing the template according to your website.
Making changes in the code is extremely easy.
- All you need to do is go to the “Templates” section on the TUK websites. Select the template that you like and click on the “Download HTML” button.
2. Once the download is complete, extract the template file and open it in your Visual Studio Code (VSC).
3. That’s it. You are ready to make changes to your code. You don’t even have to worry about linking the Tailwind CSS with your Html file. TUK takes care of that for you.
You will be able to view the images in the assets/images directory.
You can add new images in this folder depending on the images that you want to add to your website. You will also have to change the source in the image tag in the Html file. Simply change the source name to the name of the file you added to your image folder
4. You can change the color of the classes added in the Html file by going to the assets/css/style.css in your VSC.
Change the color in the respective classes.
5. If you want to change the color of the individual components. You can do so by simply replacing the color with one of your choices. If you are looking for colors, you can always consult the Tailwind CSS website to check the classes used by TUK for different color schemes.
6. You will have complete freedom to add or remove a component depending on your website. Depending on your website, use the application or marketing component from the components part.
Alter the text and descriptions in the components part.
I think it’s time to get behind the idea of using UI Kits to save time and resources. I believe it was Bill Gates who once said “I believe in hiring a lazy person to do a difficult job.”
I don’t know about you, but I am one of the biggest procrastinators, not to mention the laziest web developers out there. I have only been using UI Kits for a few months and already I feel I have been able to utilize my time most effectively. Just try this out https://tuk.dev and I am sure you are going to love it.
