The journey of learning web design is a fun one. Every time you read a new blog, watch a new tutorial, or make a new project, you’re learning something new. Every time you learn something new, you’re getting one step closer to becoming a professional web designer! Blogs, tutorials, and concept projects are great and common ways to improve your web design skills. There is an untraditional method that you can use to get better at web design as well. Let me introduce you to HTML templates.
HTML templates are HTML, CSS and JS code that can be reused by people for their own/client projects. These templates are commonly used by agencies and freelancers who do not have time to create from scratch. But you don’t have to use them for the same reasons. You can instead, take these templates and study the codebase. These templates are typically created by experienced designers and developers, so their code has been fine-tuned over the years. Here are some things to look for when studying their code:
Minimal CSS
Page load times are extremely important in the real world. From a UX standpoint, you don’t want users to have to wait too long for a page to load. And from a SEO standpoint, sites like Google rank faster loading pages higher than pages that take longer to load. So it’s extremely important that we as web designers pay close attention to this.
One way to decrease page load times is to keep our CSS code as small as possible. The bigger and heavier our CSS files are, the longer it takes our pages to load. Experienced web designers usually have their own ways of keeping their CSS simplified. Take a look at how they use minimal CSS, and try to apply those same practices into your own projects.
Easy to understand code
When you officially become a web designer by starting to work with clients or other designers / developers, collaboration is going to be an integral aspect to your success. Collaborating with code means that different people are going to be working on the same codebase.
Collaborating on code can be painless, as long as everyone writes their code in a way that can be easily understood by other designers and developers. When you first start learning, you’re probably not sure what that looks like.
HTML templates will give you a little more insight on writing readable code. These templates are meant for others to use, so they have to be written in a way that is easy to understand. Take a look at how the code is structured and class naming conventions. You’ll probably start seeing some patterns.
Real World Use Cases
Tutorials and concept projects are really fun, and can help you learn a lot. But they don’t always cover real-life situations that you may encounter as a professional web designer. HTML templates can give you a little more insight into the types of websites you’ll be working on, what clients in different industries expect, and common elements that will be needed to make a website design successful.
As I mentioned before, these templates are created for people to use in real life situations. So what better way to get a feel for real life situations, than to study templates!
The journey of learning web design is meant to be fun and exciting. The tried and true methods for learning web design have worked in the past, and will most likely continue working in the future. But every now and then, finding new ways to get to the same destination will help open more doors for more people. Not everyone learns best from watching tutorials or reading blogs. HTML templates provide a new and exciting way for up-and-coming web designers to learn and hone their craft.
HTML Templates at Webplate
Shameless plug, we have over 20 html templates to choose from here at Webplate. When you’re ready to take your learning to the next level, we hope you consider using one of our templates.
