Web Design: How to Get Started in 2019 (+ Resources)

That’s awesome. Web design is such an amazing craft, skill and profession, but there seems to be no definitive guide around the web. So in this article I’m going to try to bring together all the knowledge that I have and some of the resources in which you can go, learn and build your web design. Skill, hey everybody! What’s up and welcome to another segment of designer mind in this week’s article, I want to kind of take you step by step if you’re at zero.

If you want to become a web designer, we want to learn all the skills necessary to be able to create amazing websites and even work with your client, and do this professionally we’re going to talk about this in this article now, this article is not about the Business aspect of becoming a web designer finding your first clients and stuff, like that. I discussed those topics on in different articles.

Here I’m going to discuss how to build the skills and the craft of actually being able to design websites before you can go out and sell them to clients. So let’s get started talking about that. So I think the the word or phrase web design is comprised of two actually things web and design. So I want to get started and talking about design. If you want to be a web designer, you need to have the basic understanding concept and skills of a designer in general, so you might want to start learning about what design is? How do you get how or what are the best practices of design, and I want to show a few resources which I think can get you up and running with that.

So one book, which I really like is called universal principles of design, and this is a book with a bunch of really short and small one-page chapters. Each of them is talking about a different concept, it’s kind of like do and don’t and what works in design in general, but it will really get you into the habit of understanding how to think as a designer. So this is a really really practical book which you can just go through and start understanding how to think like a designer.

What works, what doesn’t what questions you should be asking yourself. We really put you in the framework of what is design now. The second thing, which is very very old, you’ll, need to work when no matter what design you’re going to be working on you’ll need to build some type of graphic skills, because type is everywhere. That’s the main way that we communicate to other people and basically web design is just another communication tool, we’re trying to get a message across and we do that a lot using type and typography.

So you want to make sure that you understand how you work with type: what’s the different between fonts, how to choose the right sizes, how to build a good grid, good books that I found useful when I just start got it started with design our thinking with Type and the other one is a very classic grid systems by Joseph Muller brookmont you’ll get all the links in the description for these books, so those two books I think they’re really relevant to have kind of as reference always you can.

You know, and it’s good to have a physical copy of them as well, because you always want to refer back to them. Get inspiration, get some ideas, help you kind of think through solutions of how to structure type and layouts in your doesn’t matter. If you’re doing a poster or a web design at the end of the day, you’re still you you have some information, you need to think about how I put this information in front of other people.

Those books will help you to think about how to build those kind of skills. So those are basically, I would say, the books that will help you build up your design, skill in general. Obviously, there’s also kind of the visual communication aspect of it, which is what does the visual that you’re putting in front of people whether it is a photograph, whether it is illustration, what does it communicate? What message does it convey so there’s a lot of aspects into you know the visual aspect of visual communication.

I did not touch upon this. I actually don’t know if there’s a really good resource covering that aspect I could not think about, but I think that if you get into design using, you know the the principles of design and understanding type and layout you have. You already have a lot assets and skill to take that into the world of the web. So let’s move into the world of the web. So one of the first things that you need to understand and I’m showing here an article, it’s actually from 2011, but I just didn’t see anybody who wrote in a good article about the process of web design and obviously I’m trying to do that in the articles Here and I did few segments on the process of web design, so but this article that I’m showing you here – this is an actual article from 2011 that I use when I basically got started covering you know a typical process of planning and doing the design.

So it’s kind of high-level, but I still think that if you read it today in development and launching and post lunging, I still think that you can get something out of it, even if the tools of the trade have changed through the years a little bit. The the process as a process is something that is very much the same, and I think that before you move on into a project, okay, you can still do some some websites for yourself, as you know, personal experiment, you might say, but when you want to turn Your web design into a professional into a profession that then necessarily means that you have to work with other people, and you need a process for how to think about a project, and I think this article will help you understand the each phase planning doing the design.

Developing the website and what you need to do after you develop it and launch it and make sure that everything worked correctly. So you need to have that process in place so making sure that you have a process. It doesn’t matter. If you take it from this or if you read some of the articles that I have on my blog regarding how I do strategy and then design, you need to have some sort of process in place before you get started.

A lot of people just want to jump right in to open up their their favorite design tool and start designing and developing, but you need to have a process that process should probably include planning and strategy, so make sure you have that now. I want to show some other resources that I use. This one is, I think, is really helpful for people just starting out. It’s called good, you i.Org, but basically what they’re doing here is they.

They are testing out a lot of they’re, doing a/b testing and for people who don’t know a be testing is doing two types of design and seeing which one of them performs best get more of the result that they’re trying to do – and here they made a Bunch of ideas and they’ve tested them and you can see which one works in which one doesn’t and they’re actually explaining here why things work? Well, others don’t work.

So if you just go over all of these patterns, you might you can learn from their experience, understand what works and what doesn’t work so you’ll, you can use better design patterns and you can also, if you feel like you, need to explain a client at some Point why you chose this version versus that version. You have that, as kind of a data to to pull from an experiment that happened in the past. That being said, by the way, things change, depending on industries and stuff like that, and sometimes you might want to test again and iterate and do a/b testing on your own website when you’re doing it with your clients.

But AV testing is, I would say, a bit more complicated topics and not a lot of web designers get to it at the beginning. So at the beginning I think it’s great to learn from them. What works and what doesn’t work. So you can get started not at knowing nothing, but you can already learn from what others have tested and know that are working and know that it’s better user experience, because that’s what people react better to so this is good UI after that, I’m putting here a Rewards, I don’t know if you know that you from might know that, because it’s one of the biggest designer, where it’s II’s use that use that website as inspiration, because this website sometimes the website there are maybe impractical in terms of their there’s they’re very experimental.

They might not be practical for what you are doing, but for me this is kind of like website that are pushing the envelope of web design of what is possible technologically, with development interactions animation all these types of things. So it really opens your mind to what is possible and, of course, you’re not going to copy/paste a solution from there, but seeing what what is possible, not just in terms of beautiful design visually.

You can also see this developed and see how they’ve executed the design idea here. So I think it’s really inspirational and might trigger some new ideas for the design that you might want to do yourself. I also use because I developed with web flow. I use the web flow showcase, a lot because you know you can see also projects here, but not only see how they look like you can actually open them up in web flow and see how they’ve build it.

So, for me this is inspirational in both the you know. The visual sense of inspiration, but also develop developmental, is inspiration, and is that a thing can you actually say that, but showing you what you’re able to do pretty easily, probably with web fluency, and you can learn from that and get ideas that you might want to Use for the project that you have right now, one more thing that I use is, I use be Haines specifically because they have very good search, filtering and segmentations.

So I might, if I have a website that I’m working on, which is in let’s just take the the auto industry. I might use the search function here because you can filter for web design and then search for automotive or something like that and you’ll be able to see website that we’re done for client in that space or even just experimental experimental purposes. But the point here as well is not to copy but to see how other people have dealt with solving the the pot of the problem for that industry by the way – and this is not to replace the research part of of your web design – we do not Cover research here, I’m just basically telling you about kind of like inspiration process, but it allows you to see how others have solved this problem, but also in the research.

You should probably see what competitors are doing so you’re not doing the exact same thing, which might be a bad thing for your client, so be Haines is one more thing that I’m using the next step, because it’s usually wire framing then this loads up. This was just recommended to me in the comments few days ago. This is a wire framing kit called platformer, which is for sketch figma Adobe XD is for everything.

I did not try this myself, and this is a premium. It cost something like I think, $ 60, but from looking at it it looks pretty cool. I did not so far. I did not use any pre-made UI kit, I’m just doing the wireframes myself and but I think that if you’re just starting out then having a built-in library of components of wireframes to try to kind of build your first website from LEGO bricks, I would call it That we’re already proven to work to some extent.

I think that can be useful, so you might want use this one. You might find a free alternative online, but using some kind of a kit might help you when you get started in stress, getting the structure right. So that you can, you know, have the layout and structure for the website and again I have a few articles about wire framings. Basically, I, when I do wire framing I the reason that I like to use figma right now is because I want to collaborate on the text together with my clients and use that not just as a mock-up for the structure, but also build the content together with The client that way, that’s why I use figma, but I’m discussing this more in depth in other articles, other tools that I’m using not sure why this is not load.

I couldn’t find a great resource for free icons, also premium icons, but you can basically search here for everything that you need, for example, an alert, and if you want to have free icons, you set the free here, then you can choose vector icons if you need Them and just download the SVG from here. I use this all the time for everything that does not require really custom-made icons when you’re and a lot of times.

Those are you, you need very standard icons for you, know, location or alert, or something like that. You might want to just you know: go ahead and download them from here. It will save you up a lot of time. Another one for icons that I use is the noun dick twitches, as you can see from just from here. Those are a little bit more elaborate, creative and complex icons. You can use them for free and then you add in in the footer or something a credit to the creator or you can pay $ 1 to use them.

I find this very useful and I use that sometimes see what else I have here. Unsplash is probably, if you’re using images and you’re not you, do not have the budget to do custom photography for for your website. Unsplash is the free resources for designers with really great photography. You can search here. Download photos use them for free, it’s great for for mock-ups, but a lot of times for even for the final stage of the design.

Because there’s are some really really high quality photos here on on splash and thank you for all the creatives which are sharing their photography for free on this website. The last part, obviously you know I I use web flow to build my website. So obviously, for me, the process the development process usually goes from design to development, which I do myself using web flow and then using using loom, which I don’t have online right now, but loom is.

Let me see if I have it here. No, it’s not loom is basically a Chrome extension which I use to communicate and kind of record myself presenting the website to my clients and kind of teaching them how to use the CMS. So that’s another tool I use at the, I would say post lunch process at the end of the process, so this is basically how I would get started. I would learn the skills for a design using the books that I’ve mentioned, use the create a process and use it on a few website that I would probably do either for free for friends.

I know that in the different articles that I do about how to get started professionally, you know and try to build a freelance business around web design. I’r talking a lot and I am fully into it about Nishi, finding a niche that you’ll get it started with, but to build the craft. You know to learn how to do web design yourself, there’s nothing better than actually designing and building websites, and any website would do for that.

As long as you work with other people and not just self initiated, projects are cool and they’re nice, but that’s not going to build your skill of collaborating with others and going through the whole process of you know doing the planning doing the the wire framing doing The delivery, so I would do that with any client, that’s possible and I got started. You know doing work for friends, family anybody that would basically need a website.

Once I’ve built the skill itself. I could take it into saying now. I want to build a business around this now. How do I build a good portfolio? How do I build a client bait, but that is for the next step. First, you must master the craft itself hope this article was helpful for you. If you want more articles about web design, design in general, the business of freelancing and the business of design make sure you’re subscribed to the blog there’s a new article.

Every day see you on the next one. You

Web Design
SEO Service
Google Citation Service
Contact us Today
559.300.9101