Design in the browser for beginners
Read it! It will be quite enough to begin. Make your first, most likely clumsy site. Go back and read again. Correct errors. Repeat. No, you probably do not want to read everything at once. There are many other resources, many different approaches you can use. It’s okay, but I still recommend a little reading and try to go through the first steps. Design in the browser for beginners Perhaps, you know that most designers first use graphic editors, and only then give their projects to the coder for layout. Photoshop is the most commonly used tool, but designers also use programs such as Sketch, GIMP, Inkscape, and Illustrator.
Undoubtedly, you need to try a few of them and use the tools that are best for you. However, if you want to create sites, then immediately do it in their natural habitat – in the browser! Ideally, do it in several browsers – because people do not browse sites in Photoshop and do not see them the way you are using the graphical editor interface. A browser-based workflow has a number of other benefits: 1) You see exactly what you are getting. Even professional mockups do not transmit interactive or animated parts of sites. By creating a browser-based design, you can see exactly how it works.
This is especially true when it comes to responsive design. (For the uninitiated: responsive or responsive design is one that is correctly displayed on different screens and devices, be it a mobile phone, tablet, or PC). 2) Browser based design can make you a better designer. When you yourself know the whole process, you will be able to understand what works and how to prevent yourself from many mistakes. The nightmare of any designer (or coder who will have to do this) working in, say, Photoshop, will further “pull” him onto a live site. In any case, here are a few resources that can be useful in working with graphic editors. Photoshop tutorials Adobe Illustrator CC training course Express course Adobe Illustrator CS6 Vector graphics Browser design can greatly change your approach to work and encourage you to learn something new about HTML and CSS. In principle, the more you mess around with dirty code, the better you will understand how sites work. It does not make you an amazing designer; but this is a great start. The skills you need to become a web designer If you want to become a professional web designer yourself, you will need some special skills.
In this section, we will answer the question “How to become a web designer by yourself?”, And also focus on the skills necessary for the actual design and creation of the site. Of course, you will also need business and communication skills, but this is a slightly different story. So, to become a web designer yourself you need to know the following. UX / UI design User-oriented design, or UX design, is what the user interface will look like and work like. This is a process, this is a philosophy, and this is a big job. A really good site can be created only by knowing what path a visitor takes on it and how his behavior changes depending on changes in graphic elements. More information about this can be found in the article “What is UX / UI design really?” Aesthetic skills Aesthetics is a complex thing. It seems that an excellent color scheme for some people may look completely strange for others. Fonts, which for you in this place look “just”, can absolutely not like the customer. It seems very, very subjective, but still each of these aspects has its own rules, which we will discuss now. The combination of fonts and typography The Internet is text. These are words. And these words should look amazing.
However, typography is more than just choosing the right font. This is, first of all, ease of use. It is necessary to choose and combine the sizes, types and styles of fonts in the design to create a graphic hierarchy in the design. To take you “from A to Z”, I propose to look through the book “Typography” by Emil Ruder. Reading can be quite long, because for those who want to immediately begin to practice – a short video on the topic, as well as a guide on the definition of fonts in the picture (if you have already found a good example of text, and would like to identify its font). After you have learned the rules of typography, you can try some fonts for your project. There are actually a lot of good free fonts on the net, so take a look. Many people, including me, choose their fonts from Google Web Fonts. Google fonts can be “embedded” in the site, and it is quite convenient. Moreover, you can use ready-made combinations of fonts: Cool examples of combinations of fonts. Article with cool combinations of fonts