When I took my first web design class during my graduate studies, I loved the subject a lot but I did not know that I’d become a web designer some day. Among all the other subjects of computer algorithms, databases and networks - web design stood out to me. I always looked forward to my design classes, I think it was the element of creativity that drew me towards the subject.
Fast forward 4 years later, I absolutely love web design and immerse myself each day deeper into the subject. Many of you have expressed in learning more about the subject, so today I am listing the exact set of web design tools you need to get started with!
But before that, let’s quickly understand the difference between web design and web development, two terms that are often used in the same context, but mean quite differently:
Web Design is the art of designing the visual parts of the website. For instance, the pages, their layout, forms etc. It involves defining every aspect of the look and functionality of the website and requires implementation of visual design principles and consideration of user experience. So, a web designer creates a design that is visually appealing and at the same time works well for the user.
Web Development, on the other hand, is the actual process of creating the website. Web development is the process of writing code and scripts that bring the web design to life. In other words, web development enables web design. A web developer needs great programming and coding skills to bring the design that a web designer has created to a reality.
Okay, now that we understand more clearly what Web Design is and isn’t, let’s move on to the tools you need to get started with web design:
As with everything, web design starts with gathering your ideas on paper. You can sketch on paper or use a graphic tablet.
Wacom tablet: If you like everything digital, you can use a graphics tablet like Wacom to sketch out your design ideas. It works well with both Adobe photoshop and Illustrator and helps you create digital sketches quickly.
Pencil + Sketchpad: The traditional method of pencil on paper works just as well. I personally love the Fabre Castell sketching pencils and the moleskin sketchbooks.
Many designers say “Typography is web design”. That show tell how important it is to choose the right type for your designs. It can make or break the design, single-handedly! Here are a few resources to find the best type for your web design projects.
Google Fonts is one of the first places I look for fonts. Its free, its vast, its legit and its easy to integrate it with web development platforms like blogger, Wordpress and Squarespace. Here are some of my favorite free google fonts.
Typekit is a paid font provider by Adobe. It has a huge library of high quality fonts. Its slick and easy to use interface makes it a pleasure to use. Plus, it syncs the fonts to your desktop softwares like Photoshop and Illustrator, which makes it super easy to use for all projects.
Discover Typography is a wonderful platform that you can use to explore different typography styles, learn more about type and experiment with type.
Color is my favorite part of design. I am not sure what it is, but I can spend hours creating color palettes, exploring how colors interact with each other - its just so beautiful. But choosing a color palette can be tricky at the beginning. It takes some experience to create the perfect color palette for your web design projects. Here are a few tools that can help.
Coolors is hands down my favorite color resource. They have a beautiful, free-flowing interface to create color palettes quickly. Its basic, but its super easy and quick!
Kuler is Adobe’s color tool. Kuler has a ton of advanced features to mix and match colors and create palettes based on rules. They also have a huge library of pre-made palettes for color inspiration.
Finally when it comes to designing the website wireframes and page mockups, there are two tools that are widely used as industry standards.
Adobe Illustrator: This is my personal preference. I just like how easy it is to play with colors, type and layouts in Adobe illustrator. Its a very fluid software and makes web design a lot of fun.
Adobe Photoshop: Many industry experts love Photoshop and swear by it. I think it all comes down to which software you are most comfortable with. Its just a matter of preference and it takes a bit of experimenting before you settle down with one.
Finally, nothing can start without an inspiration. We all have to start somewhere, but its important to keep away from imitating the work of other designers. Keep in mind that you are unique and the world needs to see your design ideas.
Dribble is my favorite place to look for web design inspiration. Lots of designers share their current work on the platform and it will hugely motivate you to create your own designs. You can also interact and share feedback on the Dribble platform, which gives you the opportunity to create your own little support community.
That was my complete web design toolkit that I use to design websites. If you are starting out in web design, this is a good set to start with as it keeps you away from being overwhelmed and gives you exactly what you need.
.png)