I’m sure you know the feeling.
You try out a new tool and within seconds you realize, your work’s become much easier.
This is exactly what I felt like when I first discovered the tools listed here.
Without further ado, let’s dive into the web design resources that help me work in a much more efficient way.
Table of Content
- How do I rank my pages on Google?
- How do I write my content?
- How to design a website?
- How do I create my Illustrations?
- How do I code my pages?
- How do I create my websites?
- How to learn web design?
How do I rank my pages on Google?
I currently rank for powerful keywords like “free illustrations”, “free SVG illustrations”, and also for some other terms like “illustrator tips 2020”.
What do I mean by ranking?
My site shows up when you Google these keywords. This technique is called search engine optimization. If you manage to get high rankings, it means free organic traffic for you, day by day, without paying a dime.
There is a lot to consider when doing SEO. Anything from on-page stuff, to backlinks, and creating valuable content.
That being said…
The most game-changing factor for me has been keyword research.
A keyword is a specific search query that you are targeting your SEO efforts around. There are keywords that are hard to rank for and some that are very easy to rank for.
Yes, that is right. There are keywords which are extremely easy to rank for.
To find these keywords, where I don’t have to do crazy SEO work, I use a tool called KWfinder.
This is a paid tool, but it’s surely worth every dollar.
Because it tells you the two most important things about a keyword.
- Number#1 - The difficulty
- Number#2 - The search volume
Both based on your country, your language and also international. So no matter if you want to start doing your own SEO (which I really recommend) or if you do SEO for others, you should check out this tool.
What about a free tool to check keyword difficulty?
Well, first I should mention that KWFinder has a Free Trial, so you still should be able to check out this tool.
One other free alternative you can use is Ubersuggest. I’m not sure about the accuracy of this tool but hey, not a lot you can lose here.
Another tool that I use a lot is Googles Keyword Planner. That’s actually a tool for their search ads but it gives you some valuable information about the keyword volume.
It won’t tell you anything about the difficulty since the difficulty that is being displayed is only valid for paid search results. But you can combine these free alternatives all together.
Also, don’t be afraid to google your keyword. If you only find top-notch websites at the top, you know it’s going to be hard to rank for those terms. If you find a lot of duplicate sites and small blogs - go for it!
Now, let’s move on. Next is another free tool!
How do I write my content?
Every business has one thing in common.
We all need quality written content. No exception for us web designers.
Many people I work with, usually outsource this kind of work.
But there are also plenty who create their own content. Mainly because they want to save some money but also because they are simply good at writing.
Now for creating content, there aren’t a lot of tools that can transform your words, but what I love to use is Grammarly. It is a free tool and it helped me a lot.
There is also a paid version but I didn’t had the chance to test it yet.
Try it out for free, I am sure you won’t be disappointed.
How to design a website?
I started to do this with Photoshop. A lot of people were working with Photoshop already but mostly because there wasn’t any good alternative.
Today it’s different.
You’ll hear three names when asking for a web design tool: Figma, Adobe XD and Sketch.
These three are the classics of creating a user interface.
I hear you asking, which of these should I use?
Sketch vs xD vs Figma
Well, it all comes down to what you prefer. One thing you should know is that sketch is only available to Mac users, not Windows. Figma and AdobeXD are for both, Windows and Mac.
Figma is also web-based which means you don’t have to install any software. Also what I should mention is that Figma is free. Adobe xD and Sketch aren’t.
When checking out reddit for example, I see comments like this very frequently.
TBH I’ve used all three. Currently, I am switching between Sketch and Figma and I am still not sure what I like to use more. These are the tools you should check out though.
How do I create my Illustrations?
As you can imagine, when it comes to creating SVG vectors, Adobe Illustrator is the tool to go.
When I first got started, I installed Illustrator and edited some freebies from the internet. While doing all of this, I realized that Illustrator is an incredibly powerful tool.
Instead of looking for Freebies, I started to create my own artwork. Illustrator makes it extremely easy to create new things. There are tons of features and tools which can help you to create exactly the shapes you want.
In fact, I had so much fun that I have created my free svg illustrations.
But can you do it as well?
Yes, you can. Period.
Just start now and get comfortable with Illustrators interface. You’ll love it. I wrote down some illustrator tips and tricks for 2020, which may help you in the beginning.
It comes really handy when creating websites. Let’s be honest, no one knows better than you how your icons or illustrations should look like.
So give it a try. I think you can try it our for free for 7 days. Plenty of time to get to know it a little better.
How do I code my pages?
This one is free and it is awesome.
For coding I use Visual Studio Code.
I used Sublime Text for a while, but Visual Studio Code has some pretty awesome features. It’s free and you can download it for Mac and for Windows.
I’m a huge fan of the cyberpunk genre, and I was really happy to find out that they’ve even got a theme for that! You’ll also find lots of plugins and tools to make writing your code easier and VS Code is pretty fast as well.
So make sure to check out Visual Studio Code.
How do I create my websites?
Now I know, WordPress is by far the most popular content management system. Every time, I read someone wants to start a new website, it’s usually with WordPress.
It is also very powerful. Plugins are offering almost any functionality. There is a WordPress theme for every business you can imagine.
So why not using it?
Because it may be that your website, like mine, is not complex enough.
Here’s the deal:
The vast majority of small or medium-sized websites are not complex enough. With a majority being pages that show static information, service pages, contact forms and maybe a blog.
But that’s all.
WordPress is working with databases, but you don’t need a database for your static site. You can use a simple static site generator and there are some incredible advantages in doing so.
Your website is safe because there is no database. Your website is fast. Lightning fast. It works incredibly well with SEO. You can host your website for free with GitHub pages.
Yep, that’s right, you can host your website for free. GitHub Pages offer this solution. Now there’s one disadvantage compared to WordPress. The setup isn’t that simple. But it’s easy to learn. You should make sure to check out both Jekyll and GitHub pages.
I’ll create a tutorial on this in the future. Make sure to join my Facebook group and follow me on Instagram to know when!
How to learn web design?
Everything you currently see was created by me. The user interface, the code, the free illustrations, even the rankings.
But that’s not it.
I’ve learned everything from scratch. With online courses, YouTube videos, and books.
Today I want to show you some of these resources.
Some of them are free, some of them are paid.
Those which are paid, are surely worth every dollar.
Let’s get started.
#1 A beginner course
The first course that I can recommend is called the Ultimate Web Designer & Developer Course: Build 23 Projects! by Brad Hussey. This course is available on Udemy.
This is a course especially valuable for beginners. Actually I would recommend it to beginners only.
Of course, it is not really a complete web developer course. You won’t become a full-stack developer just by taking this one course, but I think this does not come as a surprise.
Having said that.
Brad gives you a great overview of several important design & development subjects.
First, he introduces you to the visual design aspect of web design. He shows you how to create wireframes and how to work with Photoshop.
After that, you will learn basic HTML and CSS.
For every topic, there are three levels.
Basic, Advanced and Intermediate.
Since this is a huge 32-hour course, you will be able to learn the basics of each language and Brad will give you a great overview of what is waiting for you along the way.
After HTML and CSS, there is PHP, WordPress, JQuery, and MySQL waiting for you.
It is especially great if you are not sure yet which path to pursue. Like I said I don’t recommend it to intermediates or advanced users. But for those who are starting out, it is an awesome course.
#2 The perfect YouTube channel
Course number two is not an actual course but a YouTube channel.
So for those of you who are looking for some free stuff, this might be the right thing.
Let me tell you something about learning:
The best way to actually learn web development/web design is to build some real-life applications.
Now there is a channel which is called DevTips and which does exactly this. Building a real website.
The channel was run by Travis Neilson, who is an incredibly funny guy.
He does a very good job teaching and he goes more in-depth with HTML, CSS, and JQuery.
He also will introduce you to Jekyll which is one of my favorite web developer tools.
Besides a lot of short clips, there is a complete video series where Travis builts a website from design to the finished product.
The particular series I am referring to is this one:
Today the channel is run by David and MPJ. To be honest, I stopped watching Dev Tips when Travis left, but you might want to check them out as well.
The Travis videos are gold for everyone who wants to become a self-taught web designer.
What is Jekyll ?