How to Become a Web Designer Without Education

Today we’re going to tell you about a set of web design tools that you’ll need to start with.

But before we do, let’s quickly define the difference between web design and web development. These are two terms that are often used in the same context, but they are completely different:

WEB DESIGN AND WEB DEVELOPMENT:

Web design is the artistic design of the visual part of a website. Pages, their structures, forms, etc. It involves every aspect of the appearance and functionality of a website, and requires the implementation of the principles of visual design and user experience. Thus, the web designer creates a design that will be visually appealing and at the same time will be easy to use by the user.

Web development , is the process of creating the site. This process includes programming (writing code and scripts) and page layout for the future web design and content. The developer must have programming experience and skills to make the basis of the site, so that the web designer has somewhere to create.

WEB DESIGN TOOLS:

Now that we have an idea of what Web Design is, let’s move on to the tools needed to make it work.

Sketches and drawing tools:

As with any kind of Design, Web Design starts with a sketch (idea). You can either draw it on paper or use a clipboard.

Tablet: if you like digital inventions, you can use a graphics tablet to sketch your design ideas on it. They can have Adobe Photoshop and Illustrator installed, and it can help you create a digital sketch quickly.

Pencil + notepad: the traditional method of making a sketch by hand, and it’s a good and easy way to do it.

TYPOGRAPHICS:

It’s very important to choose the right type for your website design idea. And no one will give you good advice about this but yourself! Because it depends on your personal “tastes” and “visions.” Here are some resources to find the best type for your web design project.

Google Fonts is one of the first places to look for fonts. They’re free there, and you can easily transfer them to Blogger, WordPress or Squarespace.

oert.org is a great platform that you can use to explore different styles of typography, learn more about types and experiment with them.

COLORS:

You can spend hours creating color palettes, exploring how colors interact with each other-it’s simple and so beautiful! But choosing from a color palette can be difficult, at first. Over time, you’ll begin to quickly create the perfect color palette for your projects. Here are a few resources that can help you.

coolors.co – A beautiful, simple, and easy interface for quickly creating color palettes.

color.adobe.com – Adobe palette. Coolors has a ton of extra features if you want to mix and match colors and create your own palettes. They also have a huge library of ready-made color palettes for your inspiration.

Editor’s Choice

Learning web design from scratch – a step-by-step guide for beginners (ten steps)

Many young people wish to link their future profession with website development. Naturally, not all want to be programmers, some of them are quite satisfied with web design.

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

Before you start to get acquainted with the basics of the profession, there are a number of questions, and you have to look for the answers yourself. It’s not easy to do because of the lack of experience, materials from the Internet are not always useful, and sometimes, on the contrary, only add new questions, and not everyone has an experienced companion.

Let’s figure out where to start learning web design, what knowledge for creativity will be needed, where and in what order to get them, how much time to devote to practical exercises, how to get first experience and order… and a lot of related questions.

Content:

Step one – find out why you want to do this

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

Site building – a very profitable business, and an experienced, and most importantly, a sensible developer by day with the fire not always to find.

Although there are many cases where a person wants to do just that, and without knowledge of the graphical engine of the site it is not easy to program.

And the third common case, why people become interested in web design – a craving for fine art.

And this area can serve as an excellent means of translating their talents into practice with the financial gain from it.

Important! Whatever the purpose for which you are introduced to web design, remember that both learning and work should be interesting, carried out with a desire and bring pleasure, but do not turn into a chore.

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

If before that man had to make pages beautiful and pleasing to the eye, but now you need to have skills and coder, and in marketing to understand, and the concept of SEO-promotion to have.

Without unique solutions, original ideas and individual creative approach, the task is not solved.

A website designer is a technical artist who works on the appearance and optimization of website and web application loading.

The tasks of these people include:

• Working on the logical structure of the page – so that any novice user everything was clear, he was able to find what he is looking for at the first time, all the important links must be in sight;
• Developing the most rational way of presenting content – the ability to interest the visitor, to make him stay longer in 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 to interact with the client, how and what will change as the visitor, zooming, etc.

Here we have briefly figured out why people want to deal with the graphical part of websites.

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

Those who are eager to spend many years of their lives to create the interface of the Web pages and get the appropriate profession at first have to work, and this article is devoted to them.

Step two – choose the direction of web design in which you want to try yourself

Internet technology is rapidly evolving, and with them the demands on the developers. First, a beautiful aesthetic and bright pages were the task of the artist.

Today, there are as many as seven trends in their design, and that’s just the main ones.

Old as the site building a type of page design, which does not require the effort, is ideal for beginners.

Hard

The bottom line is that all the elements of the resource are placed in a virtual table cells with fixed dimensions, which are given 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 the correction of something in this case takes a few minutes.

Flexible

Also a tabular design, but the width of the cells of a virtual table is not strictly specified, and depends on the size of the screen (aspect ratio, resolution). Objects will try to fill the entire space of the cell, changing its size. The main feature of this solution is to improve the ease of visual perception of data at the expense of dynamically changing display parameters. On such pages there are no empty spaces free of content.

The difficulties of this design are:

• no guarantee that the old “square” and a huge widescreen displays resource will be displayed correctly, without stretching or compressing the content;
• not all browsers normally cope with the processing of so-called flexible cells, and Internet-browsers, created on different engines, do it each in its own way;
• a lot of time is spent on adjusting and bringing the project to perfection.

Combined

Combining the two previous methods: if the size of the monitor (aspect ratio) is very different from the parameters of the display that was used to create the site, apply a flexible design, otherwise use both, and other cells, depending on the availability of space in them.

Text

Applied in the design of single-page resources and sites that represent small businesses and companies in the global digital network. The peculiarity of this design is the virtual absence of graphic elements, which positively affects the speed of page loading. Make an attractive project will help the game fonts, text colors and the successful arrangement of the text.

Polygraphic

Most in demand for the development of corporate and marketing resources, where in the first place is the emotional content. The designer should approach the work with the greatest creativity and creative choice of pixel images for page design.

The disadvantage of graphic design is a decrease in speed of loading the site because of the presence, as a rule, an abundance of bitmap images, and even in high resolution.

Interface

Turn to him mostly experienced craftsmen. Their task – to please all the needs of the user, usually by minimizing program code, optimization of graphic elements and creating a convenient navigation system with the location of the menu at the top of the page. Such resources are quickly loaded, they are easy to work with both on the computer and from mobile devices.

Dynamic

The most time-consuming, complex design options for web pages. This type of design is the placement of dynamic content on the page (animation, scripts, moving and changing elements, widescreen videos).

To implement the ideas will have to sweat a lot, but that the visitor was satisfied and everything worked as conceived, need not only the skill of graphic editors, and optimization skills, but who wants to wait a long time to appear any colorful three-dimensional buttons. But perfectly designed resource always attracts its beauty, originality and artistic solutions, regardless of the content.

Step three – find out what programs for web design are in trend now.

Before you download books on this or that graphic editor, you need to have a clear idea of the elements that are used in the graphic design of websites: figures, colors, shapes, the play of light and shadow, lines – these are the basic elements from which the entire composition is created.

No matter how you look at it, the knowledge of cascading tables and hypertext markup needed almost in the first place.

The designer will also need knowledge in the field of computer animation, popular, SEO, and maybe even three-dimensional modeling.

Attention! In addition to the difficulty in learning, the application will have to buy for the full operation, although in order to learn you can cheat, bypassing the protection of the program.

The latter acquires functionality that is in demand in dozens of spheres, and the guys from the attention paid to the multiplication of opportunities relative to Web-design.

Another thing – Sketch – is sharpened for drawing graphic interfaces from scratch, does not have a single redundant element, is more simple to learn and easily overtakes Photoshop on the main indicators.

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

Step Four – Study some useful books for novice web designers

The good thing about the Internet is that it allows you to get free books, which a dozen years ago would have to buy or look for like-minded people.

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

Learning web design from scratch should start with the kind of literature that gives basic concepts, theory, and small practical assignments:

The basic elements are:

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

Navigation elements – located at the top of the page horizontally, less often – vertically and contains links to the main sections;

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

Modular grid

Before developing the scheme of the project must grasp the concept of modular grid. It is a way of distributing information in columns, it is the framework of the future site.

Using a modular grid will greatly simplify the further make-up, take time to get acquainted with it.

Step five – online training

– Attending seminars and training sessions;

– participation in training online (remotely).

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

1 Web Design Lessons for Beginners

More experienced developers who speak English should definitely familiarize themselves with the courses of their Western counterparts. As in the case of books, Western technical artists earlier practice new technologies and solutions in the field, and secondly, the concept of work among foreign designers can be quite different, and to adopt someone else’s experience is always useful. From courses people get more return than from dozens of books read, as far as practical skills are concerned.

Step six – find like-minded people

In the workplace it is important to communicate with people who do what you do.

This way you can not only make friends, but also share experience, knowledge, advice, help and evaluate one another’s projects.

Sound competition is the engine of progress, it allows you to develop, trying to do better than your comrade, to bring something new to the project. And when learning web design from scratch, be sure to communicate with more experienced developers.

Step seven – follow trends and trends

To be prepared for anything when working with a customer in an area where not a day goes by without innovations, you need to constantly keep track of new developments, solutions and technologies.

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

The easiest way to visit resources where experienced and not very designers put their work on display.

Step eight – try your hand at a freelance exchange

You can work as a technical artist on your own or for a firm. For beginners it is better to gain experience in the freelance exchanges:

• We work for cheap at first: we take inexpensive orders and work long and hard to complete them, until the customer is satisfied.
• Successful projects are not only experience in design, but also in dealing with different clients, filling the still empty portfolio with works.
• Pay more attention to filling out the profile and rates for work.
• Uncomplicated, but finalized to the mind you can sell, taking as a basis similar projects, put up for sale.

Important! Do not hesitate to ask questions, ask what kind of sites the customer likes the most, so there was something to look at. You should not rush and do the job with flaws or underestimate the deadline, and then make the customer wait and get nervous.

Step nine – Turn web design from a hobby into a profession

Engaged in website design are usually beginning students and young people, for which this activity becomes a hobby.

They spend their weekends and evenings devoted to their favorite business, and when they gain some experience and the hobby brings its first income, they are seriously thinking about changing the type of activity.

But many are afraid to quit their jobs and go to the free bread or replace the current place of work for a comfortable chair in the office at the computer.

Lack of experience affects it, and low chances to find a customer or get regular customers, and a stable income in the case of work and related forums

Still, if the occupation of the development of graphic interfaces of sites attractive, turn it into a major profession is definitely worth it, and tighten up with this is not necessarily.

Over time, and the knowledge and experience, and regular orders.

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

The main thing is to strive to get better, to constantly develop and to have fun with what you do!

Part One: UX is the head

What else is UX and what else is the head, you ask perplexed? Let’s start with a dry and lifeless definition, then analyze it in more detail and in human language.

UX IS A DISCIPLINE THAT STUDIES USER EXPERIENCE, PERCEPTION AND REACTION RESULTING FROM THE USE OF A PRODUCT.

UX is a concept that applies not only to web design, but to other areas as well. Let’s dig deeper and consider examples from life. UX is when a specialist in the factory controls complex technology by pressing a couple of buttons, and the off button is much larger; UX is when you take a shortcut to the house by the path, although there is a nice and clean sidewalk; this is when you put a cup of coffee in special recesses on the panel in the cabin 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 you use in the descriptions of my YouTube videos and you don’t have to search for the files you need. It’s all about the user interaction experience. There can be lots of examples, but the point is the same: UX is the way a user achieves a goal in the most comfortable way possible. And if you want to be a cool web designer, and a successful person in general, you have to learn how to do it.

Let’s start by looking at a picture. This may come as a shocking revelation to you, but UX is a field that includes both research and design, as well as visualization and layout. As a result of the UX work, we should have a working prototype. If we’re talking about web design, that prototype is the HTML layout. If you take the screen out of the phone, in addition to the screen itself we can see the wires, padding, glue stitches. This is the interface. A good designer will design the interface with all the guts, including the layout. The screen will then be connected to the phone board (Back-end, PHP, Python, Ruby) or programmed (Front-end, JS). I understand that such statements make some people uncomfortable, especially old coders for whom the layout is a whole world, a separate area of knowledge. But let’s look at development objectively and call things by their proper names. And the reality is that we develop a model that, at best, should pass the test, and that’s your job as a web designer. This model (HTML layout) can then be passed directly to Back-end development or, in the case of a complex project, to a Front-end developer to write JS code for the application.

In many medium and large companies UX, UI specialists and HTML layout designers are often different people. But this model practically doesn’t work in freelancing. The most effective designer is the one who can implement his idea from start to finish, rather than hand over half of the work to another person, losing the golden thread of the idea. There is less and less space under the sun and “just a layout designer” is now like a driver who can only press the brake. There’s nothing complicated about layout. It’s just a routine job of medium complexity.

UX on the web is the foundation upon which the design of a site or an application is built. It’s designing the interface with the needs of the people for whom you’re designing the website. Who is the end user, what goals are they pursuing by using your interface, how to help them get the result as quickly and comfortably as possible? These are the main challenges that UX solves.

“The difficulty in creating an interaction experience is the need to understand users’ needs better than they understand them themselves.” 

Jess Garrett

Many novice (and not just novice) web designers confuse web design with visual design. Some still think that the process of site design is primarily the creation of pictures, buttons, icons (UI), completely forgetting about the foundation (UX), the study of the people for whom all this stuff is drawn.

Many times I had to observe how visually not so beautiful sites and LPs brought huge sales and worked better than any overseas Flat UI with stylish icons and infographics. Yes yes, they were sites with ridiculous gradients, huge buttons, raw photos with no retouching and squeezed text blocks. But they worked. A miracle, you say? I don’t think so. It’s just that the designer who drew such a site did research on the client’s audience, just that the designer knows how to listen and understand the real needs of the users of the product, even though he doesn’t have any special visual taste. Or accidentally guessed the right direction. If you want to become a really cool web designer, you have to have 2 shiny, polished sides of the same coin – on the one hand you have to become a good UX specialist, on the other hand you have to develop a sense of taste so that your interfaces are not only functional, but also attractive – that’s UI. If we talk about what kind of designer is better – the one who draws with the user experience, but not beautiful or the one who draws amazingly neat interfaces, but absolutely does not go into human problems, then, clearly, the first wins. And this is understandable, because more money and clients will bring the business is the first, to put it simply.

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

The challenges of UX

Gradually we move from theory to practice. What tasks can solve UX?

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

The web designer is the one who builds the bridge between the business owner and the potential customer. I don’t think you have to have seven eyes in your head to realize that the main research job of designing UX is to look at the potential audience for a product. The hardest thing here is that you can’t touch, you can’t measure – it’s the empathy of a web designer or UX specialist, the ability to understand other people’s desires and feelings. A web designer has to be experienced enough by life to be able to determine the desires and feelings of a potential audience with the highest degree of probability. It’s a pretty complicated subjective process, but it can be brought up to speed and boost your UX skills with tried-and-true research and design techniques.

Part Two: Research

You can’t just take a client’s product and make a website, app or landing page for it. It is fundamentally wrong to take someone else’s landing page, someone else’s work, but even worse – to suck the idea out of your hand and draw for it some ephemeral design, inserting as you go keywords in the blocks of text on the product. Most people do exactly that, even though it’s fundamentally wrong. This is a dead end, a road to nowhere, despite the fact that less enlightened in the web-design clients write off the ridiculous and unsuccessful solutions bad specialist, which does get their money, on the case.

You must clearly understand WHY you create exactly this section, these elements, exactly this order on the Web page. All your actions must be supported by an ironclad foundation. Quite strange will sound an explanation to the question “Why are these little circles?” in the form of – “Because I saw them somewhere and decided to apply this form to your fictional content, because I do not work imagination. Weird, isn’t it?

Right Way – Research. Research is the very first step a designer takes when working on any project. You need to get a clear picture of the user group, find out as much as possible about the audience you’re designing your interface for, learn the needs of that audience. Of course, based only on his personal experience and feelings is quite difficult to come to an objectively correct decision in the interface, because you are not impartial with respect to the result of your creativity and your personal experience about a particular product can be very limited. Nevertheless, if you have a good study of the product for which you are doing site design, you can make some conclusions, to make decisions. The minimum you should do if you are a freancer, working alone and don’t have your own UX team is to study current business experience, to make a portrait of an average client. For example, if you create a landing page for the sale of agricultural machinery, most likely, potential customers are not looking for special frills in the visual design of the site, they are more interested in the product catalog, pictures, timing and methods of delivery to their area, prices and possible discounts. The last point suggests that the design of UX is very closely linked to the business. This is something that web designers usually don’t talk about, but everyone thinks about.

At the beginning of your research, you need to talk to the business owner, your customer. He is an expert in his product and he has experience with customers, he knows his audience. Write down all the key points on post-it notes or in 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 experiences of your competitors to your project – this is wrong and not effective. If you are a studio, you have the resources and the project budget is sufficient for in-depth research – do online surveys, interviews with your audience, A/B-testing of several potentially effective prototypes.

Moving on. Create a list of distinctive qualities of your visitors that interest you first. To do this, make a table of the personas that could potentially be users of the product and characterize them. Put yourself in the persona’s shoes, get into the role and start thinking like a persona:

Note that by correctly characterizing 1-2-3 personas, you have a better chance of hitting the target, as applied to a huge number of people with similar values and needs in the topic. By identifying 2-3 (or more) personas, you can identify tasks that visitors will be able to solve with your interface.

Part Three: Wireframing, wireframing

Once you’ve defined your audience, goals and values of the personas, you can begin modeling your interface wireframe, known as Wireframing. Wireframes are used to assign information to future pages in order of importance – from top to bottom . In the process of modeling, you think about what information will be on the page, determine the basic form of information output, but do not go into details, do not engage in visualization. Do not get carried away, because if later you realize that the structure is not entirely successful, you still have to redo everything again. Forget about the styling and focus on the structure.

You can use a special application to create a wireframe, or you can draw it by hand on a paper in a box or dotted line, then scan it and put it in your project materials folder. I usually use the online application wireframe.cc, since you can make changes in real time and coordinate with the client. But sometimes I also work out the page structure on paper, if I’m too lazy to sit down at the computer.

Tip: Don’t stop at one Wireframe for the homepage or the main application screen, make several outlines of the structure arrangement. For the home page, take information from the persona table, sort out goals and values by importance, and experiment with the form in which you will present information to visitors.

Work through all the pages of the website or app, and only after the framework of the whole site is ready, go to the next step.

Part four: The UI, the visualization

Once you’ve thoroughly worked through the UX, created several wireframes, and selected the most appealing options, you can begin visualization. Visualization – it’s drawing the frameworks, creating a uniform style, content design. In other words, we start working on the UI. The most commonly used tools for visualization are Adobe Photoshop, Sketch.app, Inkscape+Gimp, or other tools. I suggest using Adobe XD to visualize and elaborate an interactive graphic prototype. Further in our lessons we will use only this tool to create a design, because here you can immediately make a visualization and show how the movement of users on the pages. To work with vector graphics I use Inkscape – here I create icons and other necessary graphics, to work with bitmap graphics – the best solution is Adobe Photoshop.

The rules of etiquette

There are no rules in web design, declares Artemy Lebedev. Web design has rules of etiquette, I answer. Developing site design, web-designer adheres to certain unspoken rules for design. Line spacing, offsets, fonts, size of elements – it’s all measurable and there are frankly bad implementations. So you can make a set of rules, adhering to which you certainly will not make a bad rendering of your design, even if you are a beginner and your sense of taste is in its infancy.

Note that you can break these rules if you have a lot of experience in design and you know what you’re doing. You can also break these rules if you are new and experimenting. If you are just starting out as a web designer, try to avoid putting up production interfaces that break any of these rules.

Typography, text, links

• Don’t use titles that are too big;
• Don’t use a font smaller than 12px;
• Do not use line spacing that is too small or too large;
• Don’t stretch 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 light gray on white or dark gray on black;
• Use character spacing with care if you know what you are doing and the font you choose allows the text to be “airy” in the most elegant way;
• Don’t indent too little between paragraphs, headings, and elements;
• Give air to the design;
• Don’t use captions unnecessarily;
• Don’t use an overly complex decorative font for 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’re doing);
• All links, with the exception of navigation points, should be underlined. Try also to make links that have already been visited appear in a darker color, as opposed to the default color of the links;
• If the site hierarchy contains more than 3 levels, do not forget about breadcrumbs.

Graphics, icons, photos

• Do not use template photos in the design. It is better to make your own, recommend the customer to contact a photographer or find the most “vital” photos;
• Do not use icons made from photographs; All icons should be in the same style;
• Do not enlarge the photo beyond its original size;
• Do not disproportionately scale graphics;
• Do not apply layer blending modes other than normal (Normal);
• Try not to apply filters to images that should have more than one state (normal and hovering, for example). All overlays, changes – only by overlaying a new layer. Everything should be easy to reproduce in HTML layout. This does not apply to photo retouching and preparation;
• Do not scale the photo before converting it to a smart object;
• Only crop the photo by clipping mask for the shape, the original photo, as in the previous point, must be saved in a smart object;
• If you draw icons in Photoshop, do not rasterize them to a reduced size. Don’t forget that the layout still has a layout stage and all icons will need to be vectorized. The original smart objects with icons should be large enough to trace well; Ideally, you should have all the flat icons and graphics in SVG format, in a separate folder. If you are a lazy designer – provide high-quality conversion or export of icons to SVG;

Color

• Don’t 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 2 dark gray (or black) colors for text. Ideally, only 1 accent color and 1 dark gray/black for text. I use colors 111111 to 222222 for the main font on a light background;
• Try to paint only the elements that are most important on the page with the accent color, emphasize them. This buttons, arrows, checkboxes important items, text links, informative icons (small icons such as “login”, “password”, “mail” and icons in the forms accentuate not necessarily);

Rules for working in the graphical editor, organization of work, etc.

• Name layers with meaning; Try to organize semantic blocks and constituent elements of the interface into groups; Always create a separate folder with all the TTF or OTF fonts you use. Icon fonts should also be placed in this folder;
• Create 1-in-1 (72 pixels per inch) layouts. If 100% displayed, layouts should be at the same scale as the intended HTML layout result;
• Be sure to use some sort of grid system in your work. You can develop your own, but I recommend using the Bootstrap grid system. You can customize the content width from the original Bootstrap grid width, you can use grid plugins for this if you are a Photoshop user;
• Don’t create decorative elements unless it makes practical sense. If it’s an image site and you need a pretty picture, you can omit this rule;
• Adhere to a semantic visual hierarchy. Read about visual hierarchy;
• Use the “inside and outside” rule, which says that the spacing between the inner elements of blocks should be less than the outer spacing between blocks;
• Do not forget that people most often come not to the home page of the site, but to the internal, so think of informative universal blocks – the header, the basement, sidebars (if any). The header should be as informative as possible, but not oversaturated. Obligatory elements: Logo, project name, navigation. Site search and other elements are placed depending on the project.

A good solution is to place in the footer an expanded navigation or site map with all the hidden places. Footer or basement – this is a separate topic, worthy of a separate article. Try to think through the basement to detail, try not to make meager narrow footer with the logo and phone number. Here again, it depends on the project, but most often the footer is better to make a high and expanded. I very often find the hidden information I need in the footer and I like tall and elaborate footers. I didn’t think I’d say that about basements.

We’ve looked at the basic statements that can be called rules. Let’s now look at the most common web design myths that were rules and even guidelines for some, but are no longer used by professionals.

Web design myths

– The Three Clicks Rule . Myth. If a user is interested in the information on the main page, he will make any number of clicks in order to achieve the goal. We just need to help him in this a little – correctly placed pointers in the navigation to the desired material. Navigation should be simple and clear;

– A content slider is a good solution. Quite a controversial statement. I’ve very often used sliders as a form for displaying content, but there are studies confirming that few people flip through them and something tells me that this is indeed the case. Perhaps the effectiveness of content sliders will become a myth in the near future;

– It takes a lot of work to make a quality design . Myth. Correctly defined audience, it’s enough one good picture, a headline and a block of text to make the user genuinely interested in the product. There are situations when a web designer has to cram what ever he can into the interface (a lot of sections with CTA, countdown timers, hackneyed calls to action) at the request of the customer with the accusations that the designer did not work enough. It’s ridiculous and ridiculous. Unfortunately, this is a ubiquitous feature of business owners and you just need to be able to intelligently explain that the web design rule of “the more, the better” does not work;

– The design should be original. This, of course, is good if you have a month in reserve, and the client has a fat wallet. But that’s 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 such opportunities do not exist. Work through the UX and such spending time and money will be unnecessary for excellent results. Often, users accustomed to a certain layout of universal blocks (header with navigation, the basement) are confused, visiting sites where everything is “original and unusual”. Stick to standards in the web and you won’t have to reinvent the wheel. Besides, startups often don’t have the time or money to experiment. I think you can make a neat design with a twist that really works and gets clients without having to go to all that visual sophistication.

Part Five: The layout

I believe that a web designer should know how to do layout. Although there are probably many lazy colleagues who would disagree with me. Note, my channel is called WebDesign Master and even when I started recording lessons, I had a pretty clear idea of what web design is and what goes into it. Of course, some things have changed, some things have stayed the same, but I am more and more convinced that this worldview is very objective.

I am not strong in Front-end, because real Front-end is deep JavaScript, developing complicated logic of interfaces for big and serious projects. I have a different mindset – not a programmer, but a designer, so to force myself into an area that I do not like makes no sense. But I can always “revive” my design and make a working HTML prototype at a fairly high 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. Web layout is not difficult.

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

1. Understand the basics of HTML
2. Learn the theory. I advise you to learn this site htmlbook.ru. From beginning to end, all HTML tags, all the CSS properties.
3. You need to consolidate your knowledge in practice. The following materials will do for this:

There is more than enough material on HTML layout, so you’re done with layout.

Part Six: Self-Learning and Self-Development

Web design and web development in general – is an area in which, like in no other is of paramount importance self-education . After all, we do not have schools, colleges and institutes that train professionals in web design (as of this year 2016), and the industry itself does not stand still and always need to be on the wave.

As for UX – everything is quiet and calm here. And it will be so for a long time because in fact UX is a discipline which studies psychology, and here it is unlikely anything can change in the near future. Here self-study is the development of the inner world, its own experience. Having learned the basics, you can safely work for many years, just occasionally monitoring news in the field and reading good detectives. But self-study of UI requires special attention, there is a lot of life here, trends in visual design are replacing each other, supplementing and evolving almost every day! I do not support blind following of trends and tendencies, but as practice shows, there is a rational grain in trends and they need to be followed.

As for improving your skills in UI, it is impossible to give any clear guidelines or advise you a book, after which you will succeed in creating beautiful interfaces. But, nevertheless, I can give some advice from my own experience as a self-study for me.

1. Constantly study the work on ThemeForest – it’s a treasure trove of modern web design. Try to apply some attractive forms of content in your work, but do not get carried away and do not forget about the base – UX, everything must be in theme;

2. Be a regular visitor to awwwards.com and see cool works so you don’t slack off;-)

3. Also, periodically check out the good stuff on behance.net to develop your sense of taste. Allocate time for practice – repeat the work you like in practice in a graphic editor, but under no circumstances publish your copies anywhere. This is only for practice and self-development;

4. Criticize the ads on the streets of your city and think how you can do better;

5. Criticize the UX on the streets and also think how many things could be made more convenient. In the post-Soviet space we have a lot of room to think about it. Think about people, think like people.

With the development of the commercial sphere on the Internet, many new professions have appeared. And while all of these professions have not started to be taught at universities, there is a great demand for good professionals.

Many want to know where to start web design, learn its basic topics and terminology. Someone goes for knowledge on courses, someone tries to master the new profession on their own. Our article will help to understand the basics of web design to all who seek to do so.

Internet Marketing

We can not say that web design began only after the development of Internet marketing, because this specialty has been popular for a long time. But it is since the emergence of the need to improve the resource that this profession has become more in demand.

Now Internet marketing depends on several specialists who help plan the strategy of the site, develop it, fill it with content and promote it on the web.

Web designers play an important role in this difficult process. The success of promotion and popularity of the resource depends on them. Knowing this, many people want to understand where to start studying web design.

The concept of

If the student does not fully understand the tasks of the future specialty, then it will not be easy to work in this direction.

Web design is the classic manifestation of design in web development, whose task is to design the user interfaces of websites and applications. What specialists do:

• Designing the logical web structure of the resource.
• Development and implementation of easy ways of presenting content (usability).
• Artistic design of the site.

Despite the fact that many web designers have nothing to do with art school or other creative studios, the ability to properly select the colors, shapes and elements – an integral part of their profession.

As mentioned earlier, no one will teach you this specialty in universities. Therefore, you can find both self-taught and those who have completed courses and learned from professionals how to start web design.

Terminology

If you take the term “web design” in more depth, it is a graphic design, through which you can develop and design objects of the information environment of the Internet. In addition to visual quality, the specialty works on usability.

This explanation helps to separate the term from the concept of “web-programming”, giving the former a creative direction.

In addition to usability and aesthetics, web designers have to keep an eye on W3C standards, cross-platform, Internet marketing, optimization and advertising.

Even though these are not the most important areas in teaching web design, but you still need to know about them, because they influence each other.

For example, the W3C – an organization that implements technological standards for the Internet. A specialist has to keep up with the changes and work with them.

Cross-platforming is the ability of a program to work on multiple platforms, that is, to be universal for any system.

Internet marketing also dictates its own rules for the design of the resource, the introduction of elements that would affect the potential buyer.

The process

Where do you start with web design? With learning what a specialist in this field should do. Unique design usually costs more because it is a colossal job that requires paying attention to every detail.

In this case, the customer creates a detailed ToR, which is spelled out to the smallest detail. The designer is engaged in what develops the concept of a resource, or, having received the requirements, follow them, creating a layout. Only then will the finished template is transferred to a web developer.

Sometimes, a web designer on the basis of templates offers their solutions. This method speeds up the work and is much cheaper.

Some web designers are not working on specific projects, but on the development of templates, which can later be installed on any resource. There are a large number of sites with such solutions. Even inexperienced users can buy for 40-60 dollars a favorite template and install it on your future site.

Thus, the main task of web-designer – is to create a layout. He can be represented by a picture that will show the appearance of the resource page. To be able to modify this picture, it do many layers. Depending on the needs of the customer, the layout may include not only a picture, but also photographs, complex collages, images, text layers and unique icons.

To make the main page also stands out, the web designer is engaged in a separate layout, which can make additions or changes to fit the theme or special events.

Web design: learning from scratch

The best way to figure out where to start learning this specialty is to go to any course and read The first lesson is usually an introduction. On it, they talk about:

• The human perception of visual images is explained.
• Teaches the theory of color and the psychology of its perception.
• Talks about form in graphic design.
• Explains proportions and composition in web design.
• Teaches how to distinguish between vector and raster graphics.
• Told about color models and current trends.
• Briefly describes the main programs for working with computer graphics.

Usually several classes are devoted to work with the program Adobe Photoshop. The first lesson explores the application interface, toolbar, settings, creating a simple document, types and types of fonts.

Next, students are introduced to the concept of the resource’s user interface and its main elements. They learn how to interact with the user. These lessons are followed by a wrap-up session with a workshop on how to create specific elements.

But that’s not all there is to web-design. The future expert should get acquainted with one more program – Adobe Illustrator. As with Adobe Photoshop, in this case is an introduction to the purpose of the program, the workspace, the creation of documents, editing areas, toolbar.

An important lesson is the study of the basics It tells about the types and kinds of sites, the structure of the page, interaction elements, tasks and functions, TK in the development, as well as the peculiarities of design. In addition, touching on HTML and CSS.

Commercial sites

With what to start studying web design? As mentioned earlier, knowledge of Internet marketing plays an important role. Therefore, commercial sites are also considered in the courses of this specialty.

At the lessons tells the specifics of usability for such sites, the elaboration of components and the development of the structure of the main pages. Important in the study of web design is practice. Even if you want to study this specialty on your own, it is important to conduct periodic practical exercises.

If you don’t know where to start self-studying web design, look for TORs on the Internet. On other people’s assignments you can practice creating the home page of a commercial website, develop a catalog and product cards.

Landing page

This is another form of commercial website. It is called the landing or landing page. The main task of this form of content display is to collect contact information from the target audience.

Such a page is an amplifier of advertising and increasing audience. It contains information about a product or service.

A lesson on this topic begins with defining the landing page, structure and practical design creation. Next, it is important to have a workshop on landing page layout. In terms of Internet marketing, a landing page should have many important details.

Analysis

The last sessions are very important because they summarize the results. For web design is important to analyze the market offers. Specialist need to understand how to find customers and determine the competitive cost of services. In this lesson a lot of time devoted to the analysis of prices in the market, as well as segmentation, the formation of the cost of the work, the proper drafting of the contract and the rules of sale of their services.

Independent training at home

In addition to courses, you can also learn a specialty at home. For example, there is a distance learning web design. Although this option is not the most popular. Not always online courses are of high quality and really useful, but their cost is always very high. Sometimes the price is more than the training courses.

Despite this, many people decide to get such a specialty on their own. To do this is quite realistic. It is important only to stick to the discipline and find a really useful training plan.

Not everyone immediately understood where to start web design. But through trial and error, a home study plan has already been formed.

Color

Since web design is a type of graphic design, it is important to know the basics of this specialty. Therefore, training often begins with the theory of color. This is due to the fact that the impression of design consists of many factors. Color is one of the most important.

It is difficult for a beginner to understand what colors go together. It is the basis of the theory of tones and halftones will help in choosing a color scheme for the design of the site.

Font

Where to start learning web design? Some experts believe that it is important for a beginner to know the basics of fonts. But this question is very complicated. Fonts are a whole science, taught at university in journalism or typography departments.

For the newcomer, it’s better to use already optimal solutions for combining fonts first. After an in-depth study of the subject, you can experiment on your own.

Programs

About the programs that need a web designer, we have already mentioned. About them you need to know everything, know how to use them and understand the principle of work. Adobe Photoshop and Illustrator are the main tools of work with bitmap and vector graphics. To this list you can add Sketch, a program that specialists in this field talk about.

Special literature

Learning web design from scratch from books can also help familiarize you with this work. Only articles from the Internet will not be enough, so it is important to find useful literature on suitable topics. A list of books that may be useful:

• Jeremy Keith, “HTML5 for Web Designers.”
• Dan Siderholm’s “CSS3 for Web Designers.”
• Steve Krug “Web Design, or Don’t Make Me Think.”
• Tim Kedlek “Adaptive Design. Making Sites for Any Device.”

There are a lot of books like this. Along with a syllabus, it’s important to constantly read and gain additional knowledge.

Conclusions

If you set a goal to study web design on your own, then you will definitely succeed. At the first stage, it is important to think carefully about the curriculum and follow it.

To say exactly how long it may last self-study is very difficult. Each person perceives information differently, so for this or that topic he will need more or less time.

Much easier will be those who already know how to use “Photoshop”, knows Internet marketing and the basics of design. They will not be difficult to figure out where to start studying web design. Self-study can take two to three months. But remember, it is important to give at least a little time every day to study this specialty.

And today I’m writing a similar it. Similar exactly articles, but far from a profession. The fact that the web-designer is a person who has every right not to understand the code at all, although it is not bad to have at least a basic idea of how the site is transferred from the layout to the real Internet.

How to become a web designer from scratch and what does it take?

Similar to the previous article, I’ll first list exactly what you need to master this profession:

1. Learn to work in PhotoShop or any other program that can work with layers. In this case, know PhotoShop from beginning to end is not required. According to statistics, web designers use only 10-15% of the program features.
2. Know how to design a site. That is, before drawing the layout, you should make at least an approximate drawing of the future project, it is a good practice among web-designers, so do pros, and therefore you should learn.
3. Understand what kinds of site designs. For example, what is the tech. design or flat-design.
4. Be able to draw layouts with adaptive design. This means that you draw how the site will change at different resolutions of the screens. It’s almost a requirement today because everyone wants to have a site adapted to mobile devices.
5. Understand the types of sites. Understand what’s appropriate for a one-page site, which is absolutely not appropriate for an information portal.
6. Find and apply useful tools in their work. The designer must learn to use a variety of auxiliary services that will simplify his work. For example, there are good services for the design of sites for color matching, etc.

As you can see, to be able to do a lot of things, but to master all is not so difficult. Next I will share with you useful links and tips on how to learn and become a web designer in the shortest possible time.

Where to learn the profession

Geekbrains – these guys have a five-month training program where you will learn web design completely from scratch and create your first layouts. Geekbrains is a super educational platform, the quality of training here is at the highest level.

Netology is an alternative. In terms of coolness I do not even know who is better: Geekbrains or Netology? The fact that both sites have established themselves very positively, thousands of people have already studied there and do not regret it. Yes, the prices of both are not the smallest, but in return you get training from the professionals. And you can become a pro only if you are taught by a pro. The next web design training program will start here on May 20. Both companies actively help their students find jobs after they graduate.

Webformyself is a free web design class for those who want to try it without investing money. There are also a couple of very good paid courses for aspiring designers on their site.

Magisters.org/ – finally found another site here, which, by the way, has a lot of free tutorials on web technologies. There is also a course on Photoshop and drawing your first website layout. Since the course is objectively cooler than others presented on the site, it is paid, but costs only 1500 rubles. Compared to the training in Netology is 10-12 times less, but you get less, but still the information is still high quality and if you watch the lessons, you really can draw your own layout.

Well, that’s probably the end of this post, the basic links gave, you have only to learn the profession, improve their skills and start earning money for web design. Of course, the profession will not suit every person, so I recommend you first decide whether this is what you would like to do in their lives.