Can you become a web designer yourself? Where to start learning Web design. And why is it a profitable and in-demand activity. Self-study at home

I am sometimes asked for advice on good online beginner courses to teach web design from scratch. I believe that nowadays everyone needs to know the basics of web design, but for someone design is interesting, highly paid professionallowing you to work from anywhere in the world. Recently, there have been many distance courses from different schools - paid and free, from learning the basics of web design to employment, with different prices and programs. Read my ranking of the best online courses in web design and other trending topics.

1. Profession Web designer from Skillbox

Large-scale two-year design training program with job security. Here you will consistently go from learning the basics of web design to the most interesting specializations for you personally. Online classes are combined with offline meetings with the strongest teachers and advice on employment, as well as excursions to top companies. The most interesting thing is that if you do not have money for training, then you can enter the profession for free, and start paying for the course after getting a high-paying job. Find out more and sign up for the course here.

4. Course of web design from scratch to PRO from Skillbox

An ideal course for those who really start from scratch, because here they teach the basics of graphics and typography and lead through all the stages to layout and programming. An additional module about freelancing and working with a client tells how to earn 100 thousand rubles a month from anywhere in the world. The course includes a graduation project with a real customer. Details and registration for the course.

The WDI School of Web Design has been on the market for about 5 years. The guys developed their own approach and graduated more than 1000 students. The emphasis is on live webinars, and it is also a big plus that curators are attached to students who help them do their homework. There are programs for both beginners and experienced designers. For 3 months you will be trained in all aspects of the profession of a web designer.

Training takes place through live webinars, homework, and coursework. Somehow "to score" in the classroom or not to do something - it will not work. You are guaranteed not to get off until you achieve the promised result. In addition, the school also assists in obtaining orders or employing its graduate. The teachers are the leading experts in the industry. The price of the course is 52,900, but there is the possibility of an installment plan or a discount. To find out more and sign up for Intensive, go. For beginners, there is a Test Drive course, which costs 3900 rubles, and provides an inexpensive and smooth entry into the profession. You can learn more about it.

6. UI designer from Netology

For those who are not familiar with UI - User Intersface - user interface. These are the things (buttons, whistles and fakes) through which the user interacts with the product (site / application). So the UI designer is focused just on the development of the user interface, and this course has a bias towards the development of the interface mobile applications... The program includes such modules as: prototyping, architecture design, ergonomics and usability, team interface development. All the goodies of Netology for internships and employment as usual. Lasts only six months. Recording.

7. UX design from aic.

UX is User eXperience or user experience. UX Designer - Designs the customer journey and experiences along the way. The course on this topic is taught by AIC, a recognized leader in web design. The program includes conceptual topics for interface research and practically no photoshop, layout or programming. Students do theses for portfolios commissioned by renowned AIC partners. There are many positive reviews about the course that you can read.

7. Web design from Netology

This course can perhaps be considered a crash course in web design. It lasts only 2 months and is significantly cheaper than the higher courses of Netology. There is nothing superfluous for those who only want to deal with websites. You can find out more details and sign up at this link. Duration: 2 months.

8. Mobile application designer

One-year training program in mobile app design with job security. Online classes are combined with offline meetings with the strongest teachers and advice on employment, as well as excursions to top companies. The most interesting thing is that if you do not have money for training, then you can enter the profession for free, and start paying for the course after getting a high-paying job. Find out more and sign up for a course Free Web Design Courses

It makes little sense to climb trackers and download courses on torrents these days, because there are official free courses, including those on web design. some of them.

P. S .: Advice to anyone looking for web design courses in Moscow, St. Petersburg, Minsk, Novosibirsk, Kiev, Yekaterinburg, Nizhny Novgorod, Voronezh, Kazan, Krasnodar, Chelyabinsk, Perm, Samara, Krasnoyarsk, Saratov, Volgograd, Rostov ... Take courses on the Internet, because the best education in remote professions is given online! :)

Subscribe to our community

Hello dear readers. My name is Artem and I am the author of this blog. Today we are going to talk about how to become a web designer. I'll start with the good news. A web designer is a very prestigious and highly paid profession. Representatives of this specialty have few competitors and many prestigious places to work.

Now about the difficulties. Basic technical skills are not enough to become an in-demand web designer. You need to have a developed sense of taste, be able to correctly identify the client's needs, work quickly and continuously improve your level.

A web designer is a modern profession that cannot be mastered without special education, more - read in the previous article of my blog. Below are 15 tips to help you start from scratch and get your first results quickly.

Learn the basics of web design

No matter how you count on a quick start, go online learning still have to. Employers don't need newbies. They want to work with promising employees who own the base and can adjust to the company's goals.

Employers hire an experienced web designer - in the process they raise his level to company standards

If you do not know where to study, pay attention to university Netology... Course - " Web design from scratch to middle».

Courses from the online university Netology: “Web design
from zero to middle "

The value of the proposed course is in practical knowledge that helps to immediately get a job in the specialty.

Key skills after completing the course: "Web design
from zero to middle "

After training, a certificate is issued confirming the qualifications of the student. All students' CVs are passed on to potential employers who are willing to pay high salaries for a good job.

In your free time, study yourself

1. Books for web designers.
2. Tools .
3. Famous web designers.
4. Web Design Forums.
5. Useful services.

Get into aesthetics

It is not enough for a good web designer to go through, study the literature and learn how to work with graphic editors. To get great results, it's important to love art and develop your own style.

If you don't know where to start, try watching a few new films with a budget of 1 million or more. Think about what is special about them and why they are interesting to a wide audience. After the movies, switch to architecture or painting.

The faster you learn to catch trends, the less boilerplate your designs will be.

Start painting

You don't have to become an artist. It is enough to pump this skill to a basic level and learn how to sketch future projects. Download any free drawing book and set aside 30 minutes a day to practice.

Master graphic design

Here is a rough list of knowledge you should have:

1. theory of graphic design and visual communications;
2. designer software: CorelDRAW, Illustrator, Photoshop;
3. basics of figurative design, color science and composition;
4. basic skills in working with fonts;
5. pre-press preparation of materials;
6. branding.

You can learn graphic design through books, free videos, or paid courses available both online and in educational institutions.

Explore copywriting

Become an Advanced CorelDRAW, Illustrator and Photoshop User

For 3-6 months, set aside 2-4 hours a day for in-depth study listed programs. Free online lessons or books are suitable for training.

Choose a niche

Think about which of the areas of web design you like the most. Concentrate all your efforts on mastering it. After that, you will have two options:

1. continue training;
2. become a specialized designer focused on one service.

These are equal ways to pursue a career, so the choice depends solely on your priorities.

Fill your portfolio

The best way to prove qualifications is to show the work done. Let's say you enjoy designing logos and decide to dive into this topic. Let's consider an example of a work design in a portfolio.
Task: to create a logo for a copywriting studio.

We are developing a visual image that will match the name of the studio.

Select the elements, add the background and title.

We make edits, choose a color and get the final version of the logo, which is available for horizontal and vertical media.

Do not be lazy to design your portfolio correctly. Be sure to indicate what the initial task was, what you did and what the result was.

Get into an agency

Even if you have detailed plan of how to become a web designer on your own, you cannot do without practice.

1. List the companies that you would like to work for.
2. Find out the requirements they put forward for employees.
3. Write a short resume, grab a portfolio, and schedule an interview.

In case of failure, find out the reason for the failure. If it is associated with professional qualities, make a note. The specified skill needs to be additionally pumped. If you're lucky with your job, don't stop learning and filling your portfolio.

Don't go over orders

Do not hesitate to work. You are in the learning phase, so forget about the big clients with multi-million dollar fees. Do everything that is related to your activity and can move you forward. When small orders accumulate, increase your rates and difficulty level. You are in the profession for a long time, so move gradually and everything will work out.

Study the great

Decide which famous web designers in the world you like. Find and copy their work. So you can feel the author's style and understand their motives during the implementation of the project. Then do your own analysis: think about how you would accomplish the task, being in the author's place.

Plan your development

When you know what it takes to become a web designer, make a list of tasks and a deadline for their implementation.

It doesn't matter which path you choose. Without a clear step-by-step plan, it can take years to complete even a minor task.

Be patient

Even if you put in extra effort, it is not possible to become a good web designer in a year. As in any other area, the 10,000 hour rule applies here.

After about 2 years of practice, you will reach a good level, after 6 years you will be proud of your work, and after 8-10 years you will become an elite pro, whom all major employers in the region want to see on the staff. The more experience, the more interesting the specialty. Remember this when in the second month of training you get tired of the process and want to quit.

Enjoy your work

If you choose web design for money or a nice name, then you won't be able to achieve serious results. You need to love the work and enjoy every stage of it.

You have seen the basic tips to get you started as a web designer from scratch. Time to act. Now it depends only on you how soon you get the first result. Subscribe to my blog and share the article with your friends. Perhaps they will choose a job that will completely change their future.

From the author: many beginners don't know where to start learning web design. The great and terrible Internet is full of all kinds of materials that are often confusing. Most people also have an element of doubt about their talent and fear of failure. Especially if their acquaintance with graphics was limited to art lessons in elementary school.

Today I will tell you how to become a web designer and not get lost in a huge amount of information. If you have faith in yourself and a desire to learn, then this article is for you!

Cavemen made cave paintings, ancient Egyptians painted hieroglyphs, and we live in the age of web design. What is it? I will try to explain "on the fingers" and pack in this article the minimum that you just need to figure out before moving on to this area.

Web design is ...

We all intuitively understand that web design is about turning information on the screen into something aesthetically pleasing and recognizable. It's about sharing ideas with other people. Expression of your individuality. Graphic formulation of the main goals and objectives of the site, its concept. In general, this is something multifaceted and, at first glance, very complex. Especially if you:

87-year-old grandfather;

do not have relevant experience and / or education;

do not know how to draw;

do not own a computer.

If at least one of the above points is not about you, then you have a real chance to become a web designer! But seriously, there are no barriers for a person who is passionate about what he loves. Web design training can take place both independently and with the help of specialized literature, lessons, Internet resources, paid and free video courses.

Requirements for a web designer

The web designer is responsible for how exactly a corporate website, blog or other resource will be perceived by the user. How easily and quickly he will understand the content of the pages, orient himself in the navigation, find the information he needs and perform this or that action. For example, place an order for a service or product.

Thus, the main tasks of a website design specialist are:

draw the user's attention to the merits of the company;

highlight important information about a product, service, company;

it is logical to lead the visitor to purchase or perform another action.

The tools of a web designer in this difficult struggle for a client should be the appropriate elements of the site structure: buttons, images, videos, links, text blocks.

How to start self-study? 5 steps to success

1. Explore the external aspects of web design. Learning and self-education should start by looking at other works for inspiration. Review the work of large studios, famous designers, analyze sites with high traffic.
What fonts are they using? How was the color palette chosen? Features of main blocks, titles, images, buttons? All these subtleties must be paid attention to.

2. Follow your inner interest. Listen to yourself and try to understand what fascinates you in this or that work, what is most interesting for you.

Try and experiment until you have a vision of what exactly you want to do. This can be website design, branding and logo design, identity or corporate identity, mobile application design, etc.

3. Learn the basics of drawing and composition. To do this, it is completely unnecessary to enroll in an art school, sit in an audience with the same newcomers and try to draw a ball or a vase. Sketching is enough for you. Let your hand get used to the pencil. To do this, be patient and copy from photos, pictures, video tutorials.

To successfully complete this stage, forget about the subject you are drawing. Think only about its proportions and location in space.

If you don't believe in your own strength, google biographies of artists Matisse, Paul Gauguin, Moses, Adolphe Bouguereau, who first began to paint in adulthood.

4. Learn to use Photoshop tools, learn the basics of CSS and HTML, principles of responsive layout. You should not immediately chase a lot of programs; in the process of learning web design, you will understand what specific knowledge you lack.

5. Find practical application of your knowledge. Create your own website or blog. Make a portfolio and list it on specialized freelance exchanges.

You don't have to complete real projects to get your own work. You can make your own sketches of sites, application interfaces, logos of local companies.

Follow the exercises from books or lessons found on the Internet. At the initial stage, in order to teach web design, you can even borrow other people's ideas and modify them.

Be in trend and develop. Even if you have immense talent as an artist, you should still know such things as raster and vector graphics, CMYK and RGB, principles of responsive, flat and material design, Photoshop tools.

Spending at least 1–2 hours a day learning these things will help you build your skills and reach a certain level that will allow you to become a highly paid specialist in the field of web design. Where to start learning - with self-study basics of drawing and graphics programs or comprehensive training courses - you decide, depending on your aspirations and motivation.

When there is an interest in website design, learning is very easy. You can endlessly watch websites and blogs, read designer interviews and listen to lectures on youtube without getting tired of it.

However, remember, web design is a field that cannot be studied only theoretically. The more real experience the better.

The modern market leaves its mark on the “web designer” profession. In the last couple of years, the trend towards a minimalistic, simplified site structure, without exotic fonts, "ruffles", shadows, etc., has taken hold. At the peak of popularity are also large typography, background images on the full page width, flat style design.

In the following articles, I will take a closer look at current design trends. On this I will say goodbye. Subscribe to our blog updates to keep abreast of all events and news among designers and website developers. Learn, develop and you will succeed!

Hello everyone, friends! In this material, you will learn what web design is, what UI / UX is, Wireframing in modern web design, consider the basic rules for high-quality UI design, the correct organization of work in web design applications, consider the importance of HTML layout in web design and how to independently and correctly study web design and develop as a web designer. In other words, friends are a Comprehensive Guide by a Cool Web Designer, which will be extremely useful not only for beginners, but also for experienced web designers who want to develop professionally.

Class

Zapin

Part one: UX is everything

What is the UX and what is the head, you ask with bewilderment? Let's start with dry and lifeless definitions, then we will analyze it in more detail and in human language.

UX - the discipline studying interaction experience user with the product, perception and reaction resulting from use.

UX is a concept that applies not only to web design, but other areas as well. Let's dig a little deeper and look at some examples from life. Interaction experience is when a specialist at a factory controls complex equipment by pressing a pair of buttons, and the shutdown button is much larger; UX is when you take a shortcut to your home, although there is a beautiful and clean sidewalk; this is when you put a cup of coffee in special recesses on the panel in the interior of your car; this is when the brake pedal is wider than the gas pedal. UX is when you see links to all the lesson materials used in the description of my YouTube videos and you don't have to search for the necessary files for a long time. All of this is user experience. There may be a lot of examples, but the essence is the same: UX is a way of achieving a goal by a user in the most comfortable way. And if you want to become a cool web designer, or indeed a successful person, you must learn how to do it.

Let's take a look at the picture first. This may be a shocking revelation to you, but UX is an area that includes both research and design and visualization and layout. As a result of working on the UX, we should get a working prototype. If we are talking about web design, such a prototype is HTML layout. If we take and pull the screen out of the phone, we can see, in addition to the screen itself, wires, lining, and adhesive seams. This is the interface. A good designer develops an interface with all the giblets, including layout. In the future, the screen will be connected to the phone board (Back-end, PHP, Python, Ruby) or programmed (Front-end, JS). I understand that someone will feel uncomfortable with such statements, especially old layout designers, for whom layout is a whole world, a separate area of \u200b\u200bknowledge. But let's look at development objectively and call a spade a spade. And the reality is that we are developing a model that should pass the test at best, and that is your job as a web designer. Further this model (HTML layout) can be directly transferred to the Back-end development or, in case it is a complex project, to the Front-end developer for writing JS application code.

In many medium and large companies, UX, UI specialists and HTML coders are often different people. But this model practically doesn't work on freelance. The most effective designer is the one who can realize his idea from start to finish, and not transfer half of the work to another person, losing the golden thread of the idea. There is less and less space in the sun and now "just a layout designer" is like a driver who can only press the brake. There is nothing complicated in the layout. This is an ordinary routine of medium complexity.

UX on the web - this is the foundation on which the design of the site or application is built. This is designing an interface taking into account the needs of the people for whom you are designing a website. Who is the end user, what goals does the person pursue using your interface, how can you help him get the result as quickly and comfortably as possible? Here are the main tasks that UX solves.

The challenge in creating user experiences is the need to understand user needs better than they understand them themselves.
Jess garrett.

Many beginners (and not only beginners) web designers confuse web design and visual design. Someone still believes that the process of creating a website design is, first of all, creating pictures, buttons, icons (UI), completely forgetting about the foundation (UX), about the study of people for whom this whole economy is drawn.

I have repeatedly seen how visually not very beautiful sites and LPs brought huge sales and worked better than any overseas Flat interface with stylish icons and infographics. Yes, yes, these were sites with ridiculous gradients, huge buttons, raw photos without retouching and compressed text blocks. But they worked. Miracle, you say? I don’t think so. It's just that the designer who drew such a site conducted a study of the client's audience, just the designer knows how to listen and understand the real needs of the users of the product, although he does not have a special visual taste. Or, by chance, he guessed the right direction. If you want to be a really cool web designer, you must have 2 shiny, polished sides of the same coin - on the one hand, you must become a good UX specialist, on the other, you must develop a sense of taste so that your interfaces are not only functional, but also attractive - it's the UI. If we talk about which designer is better - the one who draws taking into account user experience, but not beautifully, or the one who draws amazingly neat interfaces, but absolutely does not delve into human problems, then, definitely, the first one wins. And this is understandable, because the first one will bring more money and customers to the business, in simple terms.

My humble opinion: design will cease to exist for the sake of visual design, Web 3.0 is the era of UX, increasing information content and convenience.

UX tasks

We are gradually moving from theory to practice. What tasks does UX solve?

The main task of the designer is to maximize the level of satisfaction end user from interaction with the product. Hereinafter, by the product we mean any object of interaction with the user, be it a real product, service, web application or website.

A web designer is someone who pays a bridge between a business owner and a potential client. I don't think you need to have seven spans on your forehead to understand that the main research job in UX design is studying the potential audience of a product. The most difficult thing here is that which cannot be felt, cannot be measured - it is the empathy of a web designer or UX specialist, the ability to understand the desires and feelings of other people. A web designer must be experienced enough in life to be most likely to identify the desires and feelings of a potential audience. This is a rather complex subjective process, but it can be tidied up and improved in UX thanks to proven research and design techniques.

Part Two: Research

You can't just take a client's product and create a website, app, or landing page on your knees. It is fundamentally wrong to take someone else's landing page, someone else's work, but it's even worse - to suck the idea out of your finger and draw some ephemeral design for it, inserting along the way keywords into blocks of text by product. Most do just that, although it is fundamentally wrong. This is a dead end, a road to nowhere, despite the fact that less enlightened in web design clients write off the ridiculous and unsuccessful decisions of a bad specialist who does get his hard-earned money, in case.

You must clearly understand WHY you create just such a section, exactly such elements, exactly such an order on Web page... All your actions must be supported by a reinforced concrete foundation. The explanation to the question "Why are these round pieces here?" Will sound rather strange. in the form - "Because I saw such somewhere and decided to apply this form to your fictional content, since my imagination does not work". Strange, isn't it?

Right Way - research. Research is the very first step of a designer when working on any project. You need to clearly display a group of users, get to know as much as possible the audience for which you are developing an interface, find out the needs of this audience. Of course, based only on your personal experience and your feelings, it is rather difficult to come to an objectively correct decision in the interface, because you are not impartial in relation to the result of your creativity and your personal experience regarding a particular product can be very limited. Nevertheless, if you have studied well the product for which you are making a website design, then you can draw some conclusions, make decisions. The very minimum that you simply must do if you are a freelancer, work alone and do not have your own team of UX specialists is to study the current business experience, throw a portrait of the average consumer of the product. For example, if you create landing page for the sale of agricultural machinery, most likely, potential customers are not looking for special delights in the visual design of the site, they are more interested in the product catalog, photographs, terms and methods of delivery to their region, prices and possible discounts. The last point is that UX design is very closely related to business. This is something that web designers usually don't talk about, but everyone thinks.

At the beginning of your research, you need to talk to the business owner, your customer. He is a specialist in his product and has experience with clients, he knows his audience. Write down all the key points on sticky notes or a notebook for further analysis. If you are a freelancer, study the experience of similar products, thematic forums and communities, but do not blindly apply the best practices of competitors in your project - this is not correct and not effective. If you are a studio, you have the resources and budget for the project sufficient for in-depth research - conduct online surveys, interviews with an audience, A / B testing of several potentially effective prototypes.

Moving on. Create a list of the attributes of your visitors that interest you first. To do this, create a table of persons who can potentially be users of the product and characterize them. Put yourself in the place of a persona, get used to the role and start thinking like a person:

Please note that by correctly characterizing 1-2-3 persons, you have a better chance of hitting the target in relation to a huge number of people with similar values \u200b\u200band needs in this topic. By defining 2-3 (or more) persons, you can define the tasks that visitors can solve using your interface.

Part Three: Wireframing, Wireframe Modeling

After you have defined the audience, defined the goals and values \u200b\u200bof the personas, you can start modeling the framework of the interface, the so-called wireframing. Wireframe serves to distribute information on future pages by importance - from top to bottom... In the process of modeling, you think over what information will be on the page, determine the basic form of information output, but do not go into details, do not do visualization. You should not get carried away, because if in the future you realize that the structure is not entirely successful, you still have to redo everything again. Forget styling and focus on structure.

To create a frame, you can use a special application or draw by hand on paper in a box or dot, then scan it and put it in the folder with the project materials. I usually use online application wireframe.cc, as you can make edits in real time and agree with the client. But sometimes I work out the structure of the pages on paper, if I'm too lazy to sit down at the computer.

Tip: Don't stop at one Wireframe for your site's home page or app's home screen, but sketch out the layout of the structure. For the home page, take information from the personas table, sort goals and values \u200b\u200bby importance, and experiment with the form in which you present information to visitors.

Work through all the pages of the website or application, and only after the wireframe of the entire site is ready, proceed to the next step.

Part four: UI, visualization

After you have thoroughly worked out the UX, created several wireframes and selected the most attractive options, you can start visualizing. Visualization is drawing wireframes, creating a unified style, and decorating content. In other words, we are starting to work on the UI. Most often used for rendering Adobe Photoshop, Sketch.app, Inkscape + Gimp, or other tools. I recommend using Adobe XD to render and develop an interactive graphical prototype. In the future, in our lessons, we will use only this tool for creating a design, since here you can immediately make a visualization and show how users will move through the pages. To work with vector graphics, I use Inkscape - here I create icons and other necessary graphics, for working with raster graphics - the best solution is Adobe Photoshop.

Good manners

There are no rules in web design, says Artemy Lebedev. There are good manners in web design, I will answer. When developing a website design, a web designer adheres to certain unspoken rules when designing. Line spacing, gaps, fonts, element sizes are all measurable and there are frankly bad implementations. Therefore, you can put together a set of rules that will certainly not render your design poorly visualized, even if you are a beginner and your sense of taste is in its infancy.

Note that these rules can be broken if you have a lot of experience in design and you know what you are doing. You can also break these rules if you are a beginner and experimenting. If you are a beginner web designer, try not to release interfaces to production that violate any of the above rules.

1. Typography, text, links

   • Don't use too large headlines;
   • Don't use a font smaller than 12px;
   • Don't make the line spacing too small or too large;
   • Do not stretch the letters with the "Transform" tool, the font should be naturally proportional;
   • Do not use more than 3 fonts per page;
   • Don't use too little contrast, don't print in light gray on white or dark gray on black;
   • Use spacing with care if you know what you are doing and the font you choose allows you to make the text "airy" in the most elegant way;
   • Do not make too small indents between paragraphs, headings and elements, give air to the design;
   • Do not use caps unnecessarily;
   • Do not use a decorative font that is too complex for the main text blocks, it should be a simple and easy-to-read font of some Sans or Serif family (Serif and Slab - if you know what you are doing);
   • All links, except for navigation items, should be underlined. Also try to style links that have already been visited with a darker color, as opposed to the default link color;
   • If your site hierarchy contains more than 3 levels, don't forget about breadcrumbs.

2. Graphics, icons, photos

   • Don't use template photos in your design. It is better to do it yourself, recommend the customer to contact a photographer or find the most "life" photos;
   • Don't use icons made from photographs;
   • All icons must be in the same style;
   • Do not enlarge the photo beyond its original size;
   • Don't scale the graphics disproportionately;
   • Do not use any other layer blending modes than Normal;
   • Try not to apply filters to images that need to have multiple states (usually on hover, for example). All overlays, changes - only through the imposition of a new layer. Everything should be easily reproduced in HTML layout... This does not apply to retouching and preparation of photos;
   • Do not scale the photo before converting it to a Smart Object;
   • Crop the photo only using a clipping mask for the shape, the original photo, as in the previous paragraph, must be saved to a smart object;
   • If you paint icons in Photoshop, do not rasterize them at the reduced size. Do not forget that the layout still has a layout stage and all icons will need to be vectorized. Original smart objects with icons should be large enough for high-quality tracing;
   • Ideally, you should have all flat icons and SVG graphics in a separate folder. If you are a lazy designer, consider the possibility of high-quality conversion or export of icons to SVG;

3. Colour

   • Do not use pure colors, be sure to try to achieve the most pleasing shade;
   • Do not use more than 2 accent colors on a page and no more than two dark gray (or black) colors for text. Ideally, just 1 accent color and 1 dark gray / black for text. I use colors 111111 - 222222 for the main font on a light background;
   • Try to paint over with an accent color only those elements that are most important on the page, focus on them. These are buttons, arrows, checkmarks of important items, text links, informative icons (small icons such as "login", "password", "mail" and icons in forms do not need to be emphasized);

4. Rules for working in a graphics editor, work organization, etc.

   • Name the layers with meaning;
   • Try to arrange semantic blocks and components of the interface into groups;
   • Always create a separate folder with all used fonts in TTF or OTF format. Icon fonts should also be placed in this folder;
   • Create 1-in-1 layouts (72 ppi). At 100% display, the layouts should be at the same scale as the result of HTML layout;
   • Be sure to use any grid system in your work. You can develop it yourself, but I recommend using the Bootstrap grid system. The width of the content can be customized from the original width of the Bootstrap grid, for this you can use the plugins to create grids in case you are a Photoshop user;
   • Do not create decorative elements if it makes no practical sense. If this is an image site and you need nice picture, this rule can be omitted;
   • Stick to a semantic visual hierarchy. Read about visual hierarchy;
   • Use the "inner and outer" rule, which states that the distance between the inner elements of the blocks must be less than the outer distance between the blocks;
   • Do not forget that people most often come not to the main page of the site, but to the internal ones, so think over informative universal blocks - header, footer, sidebars (if any). The cap should be as informative as possible, but not oversaturated. Required elements: Logo, project name, navigation. Site search and other elements are placed depending on the project.
   • A good solution is to place an expanded navigation or sitemap with all the hidden places in the footer. Footer or basement is generally a separate topic worthy of a separate article. Try to think over the basement to the smallest detail, try not to make meager narrow basements with a logo and a phone number. Here again, it depends on the project, but most often it is better to make the footer high and expanded. Very often I find the hidden information I need in the basement and I like tall and well thought out basements. I didn't think I would say that about basements.

We have covered the main statements that can be called rules. Let's now look at the most common web design myths, which were rules for someone and even a guide to action, but are no longer used by professionals.

Web design myths

• The three-click rule... Myth. If the user is interested in information on home page, he will make as many clicks as he wants in order to get things done. We just need to help him with this a little - to correctly place pointers in the navigation to the desired material. Navigation should be simple and straightforward;
• Content slider - this is a good decision. A very controversial statement. I very often used sliders as a form for displaying content, but there is research confirming that few people scroll through them and something tells me that this is really so. Perhaps in the near future, the effectiveness of content sliders will become a myth;
• It takes a lot of work to make a quality design.... Myth. Having correctly identified the audience, one successful image, title and block of text is enough to make the user genuinely interested in the product. There are situations when a web designer is forced to stuff something into the interface (a bunch of sections with CTAs, countdown timers, hackneyed calls to action) at the request of the customer, with accusations that the designer did little work. This is ridiculous and ridiculous. Unfortunately, this is a ubiquitous feature of business owners and you just need to be able to correctly explain that in web design the rule "the more the better" does not work;
• The design must be original. This, of course, is good if you have a month in stock and the client has a fat wallet. But this is often not the case. You can spend a lot of money and time on unique illustrations, design, but come to the same result as if there were no such opportunities. Work on the UX and for an excellent result, such a waste of time and money will be unnecessary. Often, users who are accustomed to a certain arrangement of universal blocks (header with navigation, footer) get confused when visiting sites where everything is "original and unusual." Stick to the standards on the web and you don't have to reinvent the bicycle. In addition, startups often have neither the time nor the funds to experiment. I believe it is possible to make a clean design with a twist that really works and brings in customers without resorting to visual delights.

Part Five: Layout

I believe that a web designer should be good at layout. Although there are likely to be many lazy colleagues who disagree with me. Please note, my channel is called WebDesign Master and even when I started writing lessons, I had a pretty clear idea of \u200b\u200bwhat web design is and what it includes. Of course, something has changed, something has remained unchanged, but I am more and more convinced that such a worldview is very objective.

I'm not good at Front-end, because the real Front-end is deep JavaScript, development of complex interface logic for large and serious projects. I have a different mindset - not a programmer, but a designer, so I don't see any sense in forcing myself to an area that I don't like. But I can always "liven up" my design and make a working HTML prototype at a high enough level, if necessary. And this is a pretty chic option for a web designer, because your price tag, as a specialist, rises at least twice. Don't be afraid to explore new horizons. Layout is not difficult.

If you want to master the layout and basic skills of a Front-end developer, I advise:

1. Understand HTML Basics
2. Explore theory. I advise you to master the site htmlbook.ru for this. From start to finish, all HTML tags, all CSS properties
3. Consolidate knowledge in practice. The following materials are suitable for this:

There is more than enough material on HTML layout, so that's it.

Part Six: Self-study and self-development

Web design and web development in general are areas in which, more than in any other, the most important is self-education... After all, we do not have schools, colleges and institutes that would train professionals in the field of web design (for the current 2016), and the industry itself does not stand still and you always need to be on the wave.

As for the UX, everything is calm and quiet. And it will be so for a long time, because in fact, UX is a discipline that studies psychology, and here it is unlikely that something can change in the near future. Here self-study consists in the development of the inner world, one's own experience. Having studied the base, you can safely work for many years, only occasionally monitoring news in this area and reading good detective stories. But self-study of UI requires special attention, life is in full swing here, trends in visual design replace each other, supplement and evolve almost every day! I am not a supporter of blindly following trends and trends, but, as practice shows, there is a rational grain in trends and you need to follow them.

As for improving your UI skills, you cannot give any clear instructions, advise a book, after which you will get beautiful interfaces. But, nevertheless, I can give some advice, based on my experience, how self-learning happens with me.

1. Check out the work on ThemeForest, a treasure trove of modern web design. Try to apply some attractive forms of displaying content in your work, but do not get carried away and do not forget about the base - UX, everything should be in the theme;
2. Be a regular visitor to awwwards.com and watch awesome works so you don't relax ;-)
3. Also, to develop your sense of taste, it will be useful to periodically study good works on behance.net. Take time to practice - repeat the work you like in practice in a graphics editor, but in no case publish your copies anywhere. This is only needed for practice and self-development;
4. Criticize advertising on the streets of your city and think about how you can do better;
5. Criticize UX on the streets and also think about how many things could be done more conveniently. Fortunately, we have a place in the post-Soviet space where to roam about this. Think about people, think like people.

Editor's Choice

Teaching Web Design From Scratch - A Step-by-Step Beginner's Guide (Ten Steps)

Many young people want to associate their future profession with website development. Naturally, not everyone wants to be programmers, some of them are quite happy with web design.

Learning this profession from scratch is not an easy task, because in addition to working skills, you need to be a creative person, at least a little bit of code (know CSS and), be able to communicate with the customer in the same language, etc.

Before starting acquaintance with the basics of the profession, a number of questions arise, and you have to look for the answers yourself. It is not easy to do this due to lack of experience, materials from the Internet do not always become useful, and sometimes vice versa, they only add new questions, and not everyone has an experienced friend.

Let's figure out where to start learning web design, what knowledge you need for creativity, where and in what order to get it, how much time to devote to practical training, how to get the first experience and order ... and with a lot of related questions.

Content:

Step one - find out why you want to do this

On the one hand, this is a simple question, because most people want to do web design because of the good pay.

Site building is a very profitable business, and you cannot always find an experienced, and most importantly, intelligent developer in the daytime with fire.

Although there are many cases when a person wants to do it, and without the knowledge of creating a graphic engine for the site, programming it is not easy.

And the third common reason why people start to get interested in web design is the craving for the visual arts.

And this area can serve as an excellent vehicle for putting your talents into practice and capitalizing on them financially.

Important! For whatever purpose you are familiar with web design, remember that both learning and work should be interesting, performed with desire and be enjoyable, but not become a routine.

Due to the fact that a graphic artist - young profession, its exact definition does not yet exist, and many experts interpret the concept in their own way.

If earlier this person had to make the pages beautiful and pleasing to the eye, now it is necessary to have the skills of a coder, to understand marketing, and to have a concept in SEO-promotion.

The task cannot be solved without unique solutions, original ideas and an individual creative approach.

Website designer Is a technical artist working on the look and feel and load optimization of the website and web applications.

The tasks of these people include:

• work on the logical structure of the page - in order for any novice user to understand everything, he could find what he was looking for the first time, all important links should be in sight;
• developing the most rational way to present content - the ability to interest the visitor, make him stay longer on the resource, flip through the pages of the site;
• graphic design - where what elements will be placed, what will be the buttons and labels after clicking, how the interaction with the client is carried out, how and what will change in the process of the visitor's work, zooming, etc.

Here we briefly found out why people want to engage in the graphic part of the site.

For future programmers, it is enough to get acquainted with the basics of the visual design of web resources, at least superficially master graphic editors, layout by template.

Those who are eager to devote many years of their lives to creating the interface of Internet pages and to get the appropriate profession will first have to work hard, and this article is devoted to them.

Stage two - choose the direction of web design in which you want to try yourself

Internet technologies are developing rapidly, and with them the requirements for developers are increasing. At first, a beautiful aesthetic and bright page was the artist's task.

Today they distinguish as many as seven directions in their design, and these are only the main ones.

Hard

Old as sitebuilding itself type of page designeffortless, perfect for beginners.

The bottom line is that all elements of the resource are placed in virtual table cells with fixed sizes that are set by the designer.

Such a page will look exactly the same on all devices, regardless of platform and screen size.

And this does not mean that such a resource is backward, because an experienced developer using a rigid design can create a beautifully designed website, and adjusting something in this case takes a few minutes.

Flexible

See also tabular design, but the width of the cells of the virtual table is not strictly specified, but depends on the screen size (aspect ratio, resolution). Objects will try to fill the entire space of the cell by resizing it. main feature such a decision - increasing the convenience of visual perception of data due to dynamically changing display parameters. There are no empty, content-free places on such pages.

The difficulties of this design are:

• no guarantee that on old "square" and huge large-format displays the resource will display correctly, without stretching or shrinking the content;
• not all browsers cope well with the processing of so-called flexible cells, and Internet browsers created on various engines do it each in their own way;
• it takes a lot of time to fit and bring the project to perfection.

Combined

Combining the two previous methods: if the dimensions of the monitor (its aspect ratio) are very different from the display parameters that were used when creating the site, a flexible design is used, otherwise both cells are used, depending on availability free space in them.

Text

It is used in the design of one-page resources and sitesthat represent small businesses and companies in the global digital network. A feature of this design is the practical absence of graphic elements, which has a positive effect on the page loading speed. Playing with fonts, text colors, and well-placed text will help make the project attractive.

Polygraphic

Most in demand when developing corporate and marketing resourceswhere emotional content comes first. The designer must be as creative as possible and creatively choose pixelated images for the page layout.

The disadvantage of print design is that it slows down website loading. due to the presence, as a rule, of an abundant number of bitmaps, and even in high resolution.

Interface

Mostly experienced craftsmen turn to him. Their task is to please all user requests, usually by minimizing program code, optimization of graphic elements and creation of a convenient navigation system with the location of the menu at the top of the page. Such resources are loaded quickly, it is easy to work with them both from a computer and from mobile devices.

Dynamic

The most time consuming, complex design options for web pages. This type design consists in placing dynamic content on the page (animation, scripts, moving and changing elements, large-format videos).

To implement the ideas, you will have to sweat a lot, and in order for the visitor to be satisfied and everything worked as planned, you need not only mastery of graphic editors, but also optimization skills, who wants to wait a long time for the appearance of any colorful three-dimensional button. But a well-developed resource always attracts with its beauty, originality and artistic solutions, regardless of the content.

Stage Three - Find Out Which Web Design Programs Are Trending Now

Before downloading books on a particular graphic editor, you need to clearly understand the elements that are used in the graphic design of sites: shapes, colors, shapes, the play of light and shadow, lines - these are the basic elements from which the entire composition is created.

Anyway, knowledge of cascading tables and hypertext markup is almost essential.

The designer will need and knowledge in the field computer animation, popular, SEO, and maybe 3D modeling.

Attention! In addition to the difficulty in mastering, the application will also have to be purchased for full-fledged operation, although for training purposes you can cheat by bypassing the program's protection.

The latter is overgrown with functionality that is in demand in dozens of areas, and the guys pay little attention to increasing the possibilities for web design.

Sketch is another matter - it is sharpened for drawing graphical interfaces from scratch, does not have a single superfluous element, is easier to learn and easily outperforms Photoshop in terms of key indicators.

Be sure to choose the most convenient, supporting syntax and highlighting:, Sublime, Axure RP.

Step Four - Explore Useful Books for Beginning Web Designers

The Internet is so good that it allows you to acquire books for free that you would have had to acquire or look for in like-minded people a decade ago.

With the popularization of the web design profession, the number of books on the topic has increased. Without a mentor or teacher, a book is the best way to gain knowledge.

Teaching web design from scratch should start with the literature where basic concepts, theory and small practical tasks are given:

The main elements are:

Logo - takes, as a rule, the central part of the page and distinguishes the resource from others;

Navigation elements - is placed at the top of the page horizontally, less often - vertically and contains links to the main sections;

The main block where the content is posted - occupies the main part of the screen, the text is always accompanied by pictures, tables, diagrams, animation, etc.

Modular grid

Before developing a project outline, you need to understand the concept of a modular grid for yourself. It is a way of distributing information in columns; it is a skeleton of the future site.

The use of a modular grid will greatly simplify further layout, take the time to get to know her.

Stage six - online trainings

• attending seminars and trainings;
• participation in training over the network (remotely).

Choose appropriate activities based on your knowledge, experience and direction in which you realize your creative potential. When taking courses, it is charming to consolidate theory in practice.

1 Web design lessons for beginners

More experienced developers fluent in English, be sure to read the courses of Western colleagues. As in the case of books, Western technical artists used to practice new technologies and solutions in the field, and secondly, the concept of work among foreign designers can be quite different, and it is always useful to adopt someone else's experience. People get more value from courses than from dozens of books they read, with regard to practical skills.

Stage seven - find like-minded people

In working life, it is important to communicate with people who are doing what you are.

So not only can you make friends, but also share experience, knowledge, advice, provide assistance and evaluate projects one for one.

Sound competition - the engine of progress, it allows you to develop, striving to do better than a friend's, to bring something new to the project. And when teaching web design from scratch, it is imperative to interact with more experienced developers.

Stage Eight - Follow Trends and Trends

To be ready for anything when working with a customer in an area where not a day goes by without new products, you need to constantly monitor new developments, solutions and technologies.

They both change for the better, and optimize the loading of the resource, and increase the emotional attractiveness of the page.

The easiest way is to visit the resources where experienced and not so experienced designers showcase their work:

Stage nine - try your hand at a freelance exchange

You can work as a technical artist both on your own and for any company. It is better for beginners to gain experience on freelance exchanges:

We work at first for cheap: We take inexpensive orders and work long and hard on their implementation until the customer is satisfied.

Successful projects are experience not only in design, but also in communicating with various clients, replenishing an empty portfolio with works.

Pay more attention to filling out the profile and job rates.

Uncomplicated, but fine-tuned layouts can also be sold, taking as a basis similar projects for sale.

Important! Do not hesitate to ask questions, ask which sites the customer likes the most, so that there is something to focus on. You should not rush and do work with flaws or underestimate the deadlines, and then make the customer wait and get nervous.

Stage ten - turn web design from a hobby into a profession

Students and young people usually start to design websites, for whom this activity becomes a hobby.

They devote weekends and evenings to their favorite business, and when they gain a little experience and the hobby brings the first income, they seriously think about changing their occupation.

Just quit your job and go to free bread or replace your current place of work with a comfortable chair in the office at the computer many are afraid.

Here, the lack of experience affects, and no one guarantees a low chance of finding a customer or acquiring regular customers, and no one guarantees a stable income in the case of work and the corresponding forums.

Figure: 15 - Over time, web design should become a profession

And yet, if the lesson in the development of graphical interfaces of sites is attractive, turning it into a main profession is definitely worth it, and it is not necessary to delay it.

Over time, knowledge will appear, and experience, and constant orders.

And if you want more stability, pay attention to working in the office among like-minded people with the ability to periodically work remotely.

The main thing is to strive to become better, constantly develop and enjoy what you are doing!