Web Design Guide for Non-Designers
At the age of 14 I made the first site. This was the task for the school project. The task was easy: to create a very simple site that included text, images and a table. I usually forgot all the tasks and did them at the last minute. But that time I lost my mind.
I have always given priority to how the site will look. Whether you agree or not, the first impression always takes shape in appearance. People trust more what they like.
Over the years of creating such projects, I paid more attention to the development of design skills, rather than improving programming skills. Working on large and complex projects, you will do many different tasks. One of them is design.
Excellent design is something between “it's so simple that your grandmother can do the same” and “wow, it's damn cool.” Design can be your competitive advantage or a nail in a coffin.
And it's not about talent.
When I was younger, I played Minecraft a lot. I saw all these buildings painted by people. But when I tried to do something like this, it looked like a box. Ugly and not stylish.
I found a video on YouTube and repeated the actions of the narrator. After a while, I developed my own style and could build it myself. I even won the competition.
Design is a skill that can be developed.
Choose the right tools for the job.
In programming, you can use Notepad and write the application as well as if it were written in a complete development environment, although it would complicate your life. In the world of web design, MS Paint plays the role of Notepad, and just like Notepad, few people use it.
The most popular tools for web design:
Sketch tool for MacOS. Subscription costs $ 99 / year. Some consider it as complex as React.
Adobe XD is a free, cross-platform tool that plays the role of Vue. Easy to use.
Adobe Photoshop swiss knife for any design task. It can be compared to jQuery. Price $ 9.99 / month.
It makes no difference whether you use Sublime or VS Code to write code. Or you use React or Vue for the interface. This is a matter of personal preference. Each of the tools has its pros and cons.
I use Adobe XD. First of all, because it is a cross-platform program, so I am not a hostage of the Apple ecosystem. For beginners, it’s convenient that since May 2018, Adobe XD can be freely used with only a few limitations.
Changing thinking
I was faced with a big problem when I started working on web design. I needed to change my thinking. I used to come up with a design when the code was completely ready. The fact is that this approach makes you the worst designer.
If you want to work in web design, you have to be flexible. This will give you the freedom to change things quickly and experiment easily. And this is important because design is a continuous process. You will change a lot before you get a great result.
Learning Tools
When programming, you use HTML elements such as a div, span, and input, and allow the browser to visualize them. Thanks to the design tools, you can skip the middleman and directly use visual elements such as shapes and text.
I chose the 4 most used tools so you can spend less time searching for information and more time developing. Start practicing as soon as possible. Below I will explain how they work and how to use them.
Tool Rectangle
Rectangle (rectangles) - the most versatile form. You will use them all the time. Think of this as a div.
The label tool
As the name implies, this tool allows you to create text. This is not so simple, because a text tool has two states: one for text with one line, and another for several paragraphs. Fortunately, it is easy to learn how to use them correctly.
The first state is a single-line text container that adjusts its size based on text. It is similar to <span>, except that it will not be completed unless you make a line break. The advantage of this state is that it automatically adjusts the size of the text field based on line height and font size. Use it for everything that does not need a certain width and is one line. For example, single-line headers and labels.
The paragraph tool
The second state is a text container with a certain size that behaves like a <p> with a certain width or <p> inside a grid column. The advantage of this state is that you can control the size of the text field. Use this state for paragraphs and headings in several lines.
Select tool
Move, resize, duplicate. For all this, there is a Select. These pink lines show you the distance from the surrounding elements. Blue lines will help you choose the right elements.
Line tool
Sometimes a line is convenient for different parts of a design to be separated from each other. That's why the Line tool is here. You could use the Rectangle tool instead, but this is not so convenient.
Design Tips and
Layout Techniques Layout
web development is most often described as a header, menu, content, and footer. This is part of it, but Layout is something more. This is the location of the elements relative to each other within the page.
When I did a project for Sidemail, I distributed the elements inside the document evenly. So he looked better.
Colors
To help you find the perfect color for your next project, consider the psychology of colors (more information on this topic can be found at colorpsychology.org).
Another useful tool is Paletton. With it, easily select the perfect color combination.
Use shades of basic colors and text colors to create a visual hierarchy. Try darker or lighter shades for text when using a colored background. In general, experiment.
Typography
Typical font greatly affects the branding of your project, so choose wisely. Premium fonts look better than Google fonts, but if you're new, don't buy them. Even in Google Fonts, you can find standing things.
There is a trick that I very often use to visually split text. I make uppercase labels with a large spacing between letters. Upper-case text is symmetrical and looks good from a visual point of view. Do not abuse it, it is difficult to read it.
Home page design or landing page
I try to avoid the temptation to use a lot of trendy elements. Rather, I invent benefits and present them as text.
If you are looking for inspiration, be sure to check out land-book.com. This is a catalog of great pages that your target audience will like. Another great page with inspiration is interface.pro. Here you can rank by category, for example, by price, 404 or “about us”.
What seemed cool to you yesterday will seem awful tomorrow. You will not just change the design. This is completely normal and really good. Because you learn, grow and become better. Yesterday's task is not so difficult today.
Findings:
Translation of the article A developer's guide to web design for non-designers
I have always given priority to how the site will look. Whether you agree or not, the first impression always takes shape in appearance. People trust more what they like.
Over the years of creating such projects, I paid more attention to the development of design skills, rather than improving programming skills. Working on large and complex projects, you will do many different tasks. One of them is design.
Excellent design is something between “it's so simple that your grandmother can do the same” and “wow, it's damn cool.” Design can be your competitive advantage or a nail in a coffin.
And it's not about talent.
When I was younger, I played Minecraft a lot. I saw all these buildings painted by people. But when I tried to do something like this, it looked like a box. Ugly and not stylish.
I found a video on YouTube and repeated the actions of the narrator. After a while, I developed my own style and could build it myself. I even won the competition.
Design is a skill that can be developed.
Choose the right tools for the job.
In programming, you can use Notepad and write the application as well as if it were written in a complete development environment, although it would complicate your life. In the world of web design, MS Paint plays the role of Notepad, and just like Notepad, few people use it.
The most popular tools for web design:
Sketch tool for MacOS. Subscription costs $ 99 / year. Some consider it as complex as React.
Adobe XD is a free, cross-platform tool that plays the role of Vue. Easy to use.
Adobe Photoshop swiss knife for any design task. It can be compared to jQuery. Price $ 9.99 / month.
It makes no difference whether you use Sublime or VS Code to write code. Or you use React or Vue for the interface. This is a matter of personal preference. Each of the tools has its pros and cons.
I use Adobe XD. First of all, because it is a cross-platform program, so I am not a hostage of the Apple ecosystem. For beginners, it’s convenient that since May 2018, Adobe XD can be freely used with only a few limitations.
Changing thinking
I was faced with a big problem when I started working on web design. I needed to change my thinking. I used to come up with a design when the code was completely ready. The fact is that this approach makes you the worst designer.
If you want to work in web design, you have to be flexible. This will give you the freedom to change things quickly and experiment easily. And this is important because design is a continuous process. You will change a lot before you get a great result.
Learning Tools
When programming, you use HTML elements such as a div, span, and input, and allow the browser to visualize them. Thanks to the design tools, you can skip the middleman and directly use visual elements such as shapes and text.
I chose the 4 most used tools so you can spend less time searching for information and more time developing. Start practicing as soon as possible. Below I will explain how they work and how to use them.
Tool Rectangle
Rectangle (rectangles) - the most versatile form. You will use them all the time. Think of this as a div.
The label tool
As the name implies, this tool allows you to create text. This is not so simple, because a text tool has two states: one for text with one line, and another for several paragraphs. Fortunately, it is easy to learn how to use them correctly.
The first state is a single-line text container that adjusts its size based on text. It is similar to <span>, except that it will not be completed unless you make a line break. The advantage of this state is that it automatically adjusts the size of the text field based on line height and font size. Use it for everything that does not need a certain width and is one line. For example, single-line headers and labels.
The paragraph tool
The second state is a text container with a certain size that behaves like a <p> with a certain width or <p> inside a grid column. The advantage of this state is that you can control the size of the text field. Use this state for paragraphs and headings in several lines.
Select tool
Move, resize, duplicate. For all this, there is a Select. These pink lines show you the distance from the surrounding elements. Blue lines will help you choose the right elements.
Line tool
Sometimes a line is convenient for different parts of a design to be separated from each other. That's why the Line tool is here. You could use the Rectangle tool instead, but this is not so convenient.
Design Tips and
Layout Techniques Layout
web development is most often described as a header, menu, content, and footer. This is part of it, but Layout is something more. This is the location of the elements relative to each other within the page.
When I did a project for Sidemail, I distributed the elements inside the document evenly. So he looked better.
Colors
To help you find the perfect color for your next project, consider the psychology of colors (more information on this topic can be found at colorpsychology.org).
Another useful tool is Paletton. With it, easily select the perfect color combination.
Use shades of basic colors and text colors to create a visual hierarchy. Try darker or lighter shades for text when using a colored background. In general, experiment.
Typography
Typical font greatly affects the branding of your project, so choose wisely. Premium fonts look better than Google fonts, but if you're new, don't buy them. Even in Google Fonts, you can find standing things.
There is a trick that I very often use to visually split text. I make uppercase labels with a large spacing between letters. Upper-case text is symmetrical and looks good from a visual point of view. Do not abuse it, it is difficult to read it.
Home page design or landing page
I try to avoid the temptation to use a lot of trendy elements. Rather, I invent benefits and present them as text.
If you are looking for inspiration, be sure to check out land-book.com. This is a catalog of great pages that your target audience will like. Another great page with inspiration is interface.pro. Here you can rank by category, for example, by price, 404 or “about us”.
What seemed cool to you yesterday will seem awful tomorrow. You will not just change the design. This is completely normal and really good. Because you learn, grow and become better. Yesterday's task is not so difficult today.
Findings:
- The unique font looks and is remembered better than usual;
- Graphics are very important; use at least a few images;
- Use several shades of colors;
- Talk about benefits, not functionality;
- Take a look around if you lost inspiration.
- Remember, design can be your competitive advantage - use it and make something awesome.
Translation of the article A developer's guide to web design for non-designers