Every day, more and more programs appear on the network that offer designers to use. Especially many among them are task planners, tools for creating mental maps and other fashionable features, they appear almost every day, ask for incredible money and then die a natural death from greed.

I am always very skeptical about such new products and wait for some time for their natural selection and extinction before rushing to study a new service. This can be a real headache, especially if you are just starting out and do not yet fully understand why you need this or that program.

In fact, the list of programs and services that I use to create web design, graphic design and task coordination is not that big, and each item has definitely stood the test of time.

Top 10 Web and Graphic Designer Software:

1. Adobe Photoshop

Although it is far from being the first to open when creating a web design, let it be the first item as the most popular. Photoshop has been used for interfaces for god knows how long, I've been using it for at least 10 years now and it's only getting better. It has a huge number of possibilities, but web designers use it to draw interfaces, create bitmap graphics, and process photos. Graphic designers for about the same purpose.

P.S. For several years I have been waiting for the moment when Photoshop will replace vector programs. Its first competitors are Sketch, Adobe Illustrator and a little bit of Indesign. They are really convenient in working with interfaces, but the trouble is that layout designers who know how to work with these programs can be counted on one hand in Russia and they all work in large companies. So if you are a freelancer and you don't know who will make up your layout, Photoshop is still the universal and best option. Maybe in a couple of years this will change.

2. Adobe Illustrator

Illustrator, already mentioned above, has of course already taken over some of the web design. Namely, all vector graphics: icons, vector textures, logos, vector illustrations are created in it. And then, using the same program, they are exported to scalable SVG web graphics.

For a graphic designer, illustrator is the number one program. Because all logos, corporate identity, simple printed products that do not require page layout (business cards, for example) are also created in illustrator.

It also collects presentations and guidelines for clients.

P.S. Of course, this is not a panacea. If you have a task to make a flyer without any text at all and only with photographs, then it would be more logical to draw it in Photoshop, because. this is a raster graphic.

3. Coggle.it

In search of an adequate tool for mind mapping, I tried a dozen services. Of course, my favorite was mindmeister. But after creating one card, he asked me for a rather expensive subscription with payment every month, and I decided that by paying for the Adobe Creative Cloud package every month, I was already a fairly honest person and began to look for a free tool.

Coggle does not limit the number of cards, they can be shared with other users, saved as pictures, and they look quite nice and convenient. But for some reason, he insists that your cards be open and, in theory, anyone can see them.

P.S. If you don't know what a mind map is, this is a very convenient and versatile tool for developing concepts, designing a sitemap, user scenarios. This is where web design usually begins. Someday I will describe this method in more detail.

4.InvisionApp

A very handy tool for prototyping. I create a gray design with it and even use ready-made layouts for presentation. You can not only immediately work out the entire structure of the site and place a link, but also arrange such nice little things as a sticky menu or make global navigation. The downside is that Invision is paid again and only offers one free prototype. If you are not running 5 projects at the same time, this is enough.

There is a completely free alternative to the Marvel App, but its functionality is much simpler and working with prototypes is still more difficult.

5.Pinterest

This is an online service popular in narrow circles of designers. It is very convenient to create moodboards for projects and store references here. Moodboards can be shared, shared, and besides, this resource has a chic base of design works, which is not found anywhere else.

P.S. Moodboards and references are another tool for creating concepts, but already visual ones. Look for examples of work and make a mood board out of them, including fonts, colors, style that will help you to inspire a particular project.

6. Evernote

I use free version, its capabilities are quite enough. Evernote is very convenient to store briefs, notes, links, organizer. This is Notebook in fact, it syncs with several of your devices, you can share notes or notebooks. Many people work in it, so it is very convenient for team communication too.

7. Adobe InDesign

It's only so far down because I don't print often. but in general it is a very popular program for layout of multi-page products. Booklets, catalogs, brochures, leaflets, books. If you want to work in the printing industry, you must know it, along with photoshop and illustrator, of course, because. graphics are still drawn in them, but the text is typeset in indesign.

8. Toggle

Time tracker for internal use. It's not as advanced as TimeDoctor, which takes screenshots of the screen and sends them to the client every 3 minutes. But toggl helps to correctly allocate time, focus and calculate how much time you spend on this or that work. Work with him for a year and you will easily evaluate any project by the hour and, accordingly, will name the cost not at random, but understanding how much of your effort is actually needed for a particular project.

9. Trello

10. Adobe Lightroom

Rarely, but still I use it for quick photo processing. Photoshop, of course, has all the power of Lightroom, but if you have a package of hundreds of photos for a project and they are all raw, you can quickly run them through Lightroom and get very nice photos for a sketch layout, for example.

Top 5 applications for communication with the client:

I honestly admit that the job of a designer is half the communication with the client. Many conflicts between freelancers and clients arise due to the lack of proper communication, you misunderstood the task and solved it incorrectly, for the most part it is even the fault of the freelancer. Therefore, I set all my devices for instant push notifications and install the messengers that my clients use in order to always be in touch in any circumstances.

1 Skype

Skype, of course, despite the fact that it has recently become more and more decrepit and lame. But so far, no program can replace it. And all calls and video conferences are conducted through it.

2.Telegram

I believe that telegram will die soon. But maybe I'm too strict with it, quite a few clients have already fallen in love with telegrams and of course I had to install it too.

3. Vkontakte, facebook

Even if you are a social media hater, you will have to use them. Because your customers use them and sometimes communication is conducted through them. The most popular facebook, of course, it is traditionally used for work contacts and vacancies. But Vkontakte occasionally, but still happens. But by the way, I use VKontakte as a magazine, setting it to useful groups It's very convenient to look for inspiration.

4.Mail client

Communication by mail, I try to conduct only official, i.e. with large clients if documentary correspondence is needed and it was possible to find the right letter a year later. It is inconvenient to talk there on minor issues, of course.

5. Viber, Whatsapp

I have a personal hatred for this app, but it's all about the spam and the fact that they didn't send me a couple of important notifications at one time. I deleted them and put them back 5 times =) So far, I have not been forced to put them back.

Additional programs:

It is also very important to learn something new. Five years ago, not a single web designer would have thought to study 3D modeling in order to improve their skills. And now we see dozens of sites that are based on 3D, and sometimes also animated. This is one of the reasons why I stopped separating the work of a graphic designer and a web designer and try to learn everything that can be useful in my work.

1. Adobe After Effect

I use for animation. For example, animations of icons, videos, presentations of animation sites.

2.Adobe Premier

I occasionally use it for editing, more often these are videos for YouTube or something for a portfolio.

3.Cinema 4D

I work in it with 3D objects or animated videos. In general, a very useful thing for a designer: with this program, you can very quickly and easily create stunningly beautiful things for anything: be it a web or a corporate identity.

Want to learn how to become a web designer yourself? Or maybe you already have a few of your own designs or even, and would like to take your skills to a new advanced level? Then you are moving in the right direction right now, because the topic of the article is “Where to start web design” and in it we will take a detailed look at all the necessary stages of preparing a web designer and help you become a web designer on your own with a little diligence and creativity.

One article, of course, cannot tell you how to become a web designer and tell about all the skills, necessary tools and technologies that you need to master on the way to your dream job. If you think that the path will be easy and fast, then I must upset you. Working as a web designer is a constant self-improvement, development and pursuit of new trends and tendencies. But, despite all the professional difficulties, it is learning and gaining new knowledge that is one of the most pleasant aspects of this work.

First, a small lyrical digression for designers who accidentally wandered into reading this article. " I do web design", you probably said this phrase to someone more than once and experienced cold fear when you were answered something like:" Cool! And teach me how to do it? How to become a web designer from scratch?» Many people just assume that they click, drag a couple of icons onto the screen, and the design is ready. But, unfortunately, this is not the case. So the next time someone asks you how to design websites, just show them this article.

Welcome, ladies and gentlemen, to MotoCMS' Beginner's Guide to Designers. Grab your mice and get comfortable at your keyboard, this post promises to be long. Coffee brewing is optional, but still worth it.

Who is this web design article for?

This article is for anyone who is wondering "How to become a web designer yourself?". It will also be useful for people who want to start creating websites and have some experience in design and . Everything will be very accessible and step by step. The article is designed for the fact that you do not have any special artistic or technical education, no coding skills at all and experience in the web design industry.

Requirements for novice web designers

The "minimum requirements" for people who are thinking about becoming a web designer and want to create their first website are pretty simple. If you know what folders are, graphic text files, you can start.

However, although getting started is simple, creating a really good site is a real art. There are many skills that you will need to learn. You will need to learn about color theory, graphic element hierarchy, fonts, and the overall organization of the site.

Also, you will need knowledge of the main coding languages, namely HTML and CSS, we'll talk about that too.

Then you might want to learn basic JavaScript programming and figure out how to use it to manage different parts of your site. And desperate drummers who want to dig even further can dive into the systems content management, search engine optimization and marketing.

But you should not rush to everything at once, skills will come with experience and necessity, I will just try to direct you in the right direction. And if you have read up to this part of the article, then I can safely say “Welcome to the wonderful world of web design, newbie. Be prepared to mess things up repeatedly and don't forget to have fun!"

How to use this web design guide for beginners

Read it! This will be enough to get you started. Make your first, most likely clumsy website. Come back and read again. Fix your mistakes. Repeat.
No, you probably don't want to read everything at once. There are many other resources, many different approaches that can be used. It's okay, but I still recommend reading a little and trying to go through the first steps.

Design in the browser for beginners

You probably know that most designers first use graphic editors, and only then they give their projects to the coder for layout. Photoshop is the most commonly used tool, but designers also use programs such as Sketch, GIMP, inkscape and Illustrator.

Undoubtedly, you need to try a few of them and use the tools that work best for you. However, if you want to create websites, then try to immediately do it in their natural habitat - in the browser! Ideally - do this in multiple browsers - because people don't view websites in Photoshop and see them the way you do through a graphics editor interface.

The browser-based workflow has a number of other benefits:

1) You see exactly what you get. Even professional mockups don't convey the interactive or animated parts of websites. By creating a browser-based design, you will be able to see exactly how it works.

This is especially true when it comes to responsive design. (For the uninitiated: Responsive or adaptive design is one that renders correctly on different screens and devices, be it mobile phone, tablet, or PC).

2) Browser based design can make you a better designer. When you know the whole process yourself, you will be able to understand what works and how, and warn yourself against many mistakes. The nightmare of any designer (or layout designer who will have to do this) working in, say, Photoshop, is his further "stretching" on a live site.

In any case, here are a few resources that can be helpful when working with photo editors.

Design in the browser can change the way you work in many ways and encourage you to learn new things about HTML and CSS. Basically, the more you mess around with the dirty code, the better you will understand how websites work. It won't make you an amazing designer; but it's a great start.

Skills You Need to Become a Web Designer

If you want to become professional web designer yourself, you will need some special skills. In this section, we will answer the question “How to become a web designer on your own?” and also focus on the skills required to actually design and build a website. Of course, you will also need business and communication skills, but that's a slightly different story. So, to become a web designer on your own, you need to know the following.

UX / UI design

User experience oriented design or UX design is how the user interface as a whole will look and work. It's a process, it's a philosophy, and it's a lot of work. A really good site can only be created by knowing what path the visitor takes on it, and how his behavior changes depending on the change in graphic elements.

More information about this can be found in the article “What is UX / UI design really? »

Aesthetic skills

Aesthetics is a complex thing. It seems like a great color scheme for some people might look downright weird for others. Fonts that look “just right” for you in this place may not like the customer at all. It seems very, very subjective, but still, each of these aspects has its own rules, which we will talk about now.

Font combination and typography

The Internet is text. These are words. And these words must look amazing. However, typography is about more than just choosing the right font. This is, first of all, ease of use. It is necessary to correctly select and combine sizes, types and styles of fonts in the design to create a graphic hierarchy in the design.

To take you "from A to Z", I suggest looking at Emil Ruder's book Typography. Reading can be quite long, so for those who want to immediately start practicing - a short video on the topic, as well (this is if suddenly you have already found a good example of text and would like to identify its font).

After you have learned the rules of typography, you can try out some fonts for your project. There are actually a lot of good free fonts on the web, so look around.

Many people, myself included, choose their fonts from . Google fonts can be "embedded" in the site and it's quite convenient. Moreover, you can use ready-made font combinations:

Other similar examples can be found online.

If you want to create your own Google font pairs, try the "Web Font Combinator". This is a tool that allows you to quickly view font combinations in real time by changing the font, size, color, line width.

If Google Fonts is not enough, then you can look at WebDesignerDepot, Fonts-online, and other sites.

Color theory and color schemes

Color theory has little to do with the technical names of colors. If your client is asking for fuchsia but really wants a hot pink, the choice is yours. Color theory primarily studies the relationship between color combinations and the emotions of the person who perceives it. This is real science.
To understand the basics of color theory, there are several excellent publications:

Of the required tools - Adobe Color CC

Remember that color theory is closely related to typography. For example, if the color of the text is too close to the color of the selected background, it will be difficult to read and visitors are likely to simply pass by this part of the site, or even leave it.

Composition and general organization

How to become a web designer without knowing the basics of composition? No way! For me, this part is perhaps the most important. After all, you can pick up beautiful fonts, an excellent color scheme, and then simply mess with the correct arrangement of blocks, hierarchy and proportions and get “the most disgusting dish of excellent products.”

There are several useful publications on this topic, after which it comes from the first (or almost from the first) time.

• Using the Golden Ratio and the Rule of Three in Web Design

Web design trends

You can talk endlessly about trends in web design. What role do they play? Most likely, all customers, before coming to you, have already looked at several examples of cool fashion sites, and perhaps even read a couple of articles with web design trends. Knowing fashion and popular design elements is simply necessary to understand what they are asking for and to have something to offer them.

Since web design trends are constantly changing, it makes no sense to cite any specific publications as an example. Here I can just advise you to keep an eye on websites for web designers, here are some good examples:

• abduzeedo.com
• behance.net
• noupe.com
• webdesignerwall.com
• flickr.com
• wwwards.com

How to Become a Web Designer: HTML and CSS

HTML it is "Hypertext Markup Language". Every website you've ever looked at is based on HTML. HTML is the language by which your browser understands that the site contains text, an image, a link, a video, or other elements. Your browser then translates the code into what you see on the screen.

Another language that in simple terms makes the site beautiful, called css, which means "Cascading Style Sheets". CSS tells the browser what font is in the text and what colors are being used. CSS, in simple terms, defines the look and feel of your site (buttons, styles, colors, animations).

Learning these languages ​​on your own, or at least getting a basic understanding of how they work, is pretty easy. These are the simplest computer languages. However, they are also quite extensive and can be used in many variations to create stunning designs.

For those who want to get started right away, we have selected two good tutorials with detailed lessons.

Once you know the basics, there is a really amazing number of sites where you can learn more about how to become a web designer and learn programming languages ​​on your own.

Pouring out live

Ready to put your website on the Internet? Do you have a domain name (for example: mywebsite.com) and hosting (space on a computer permanently connected to the Internet or online hosting purchased from third-party providers)? Upload your files to your hosting, sit back, relax and…

What to do after the launch of the site

Correct mistakes and finish what you forgot

“Ah, yes, that’s it… I definitely wanted to fix it.”- It happens to everyone. It's almost inevitable that errors pop up after launching any site. And the larger the site, the more likely it is that you missed a mistake or forgot something. For your convenience, here is a fairly detailed checklist:

Gather Feedback

You can't improve if you don't know where you made mistakes. Time and experience can teach you this, but others can teach you faster.
When you're trying to become a web designer from scratch and learning on your own, I encourage you to join communities to connect with other designers who can help you and give you professional advice.

How to become a web designer - summary

The article came out quite long, but it would be difficult to fit all this in fewer words, so I want to congratulate everyone who read to the end and sincerely thank you for your patience. If you want to know more about web design training, or about specific tools and strategies for working, write it in the comments, and we will definitely create more useful materials on the topic. Good luck to all!

And if you are ready to test your skills on a live project and you need a good hosting - as a bonus, you can buy hosting for a year from our partner Inmotion for only $1.

From the author: For successful design and creation of websites, you will definitely need special programs for web design. There are tons of new apps out there lately, but which ones really boost a web designer's productivity? In this article, you will learn how to choose the right program for creating website design, depending on the task and the type of graphics - raster or vector.

As various venerable designers say, "the brain and hands are our main tools." And yet, they are a little cunning. Is it possible to create a website design without using any programs and tools? Of course, the brain is a powerful biocomputer that allows you to draw a complex picture and an ideal website in a matter of seconds, but, alas, only in your imagination.

To turn your brilliant ideas into reality, you will need modern graphic editors. In my opinion, one of the most rewarding features of being a web designer is being able to make your own decisions about which web design programs to use, such as building and laying out website pages, optimizing graphics, creating banners, and so on.

The main criterion for classifying all graphic editors is the type of graphics. Just in case, let's understand these fundamental concepts for web design.

What are raster and vector graphics?

Every self-respecting web designer should definitely understand these terms. Images in raster graphics consist of pixels - indivisible units that create a kind of mosaic. The pixels are very small, so the eye perceives the mosaic as a single image.

The main advantage of raster graphics is the ability to create a drawing of any complexity, using any number of all kinds of halftones, plug-ins and filters. Raster gif format makes it easy to create animation.

Vector graphics are common in print design and website layout. This type of graphics cannot convey tones and halftones, however, it is more preferable when it comes to creating texts, simple shapes, contour figures.

Vector programs for site design use the principle of creating a contour on the coordinate system, which is the workspace. Any figure in such a system is described by the coordinates of the reference points that connect the segments and the characteristics of the fill (color, pattern, gradient). In other words, a vector image is, first of all, mathematical formula.

To understand what type of graphics an image belongs to, pay attention to its extension:

raster graphics - JPEG, BMP, PICT, GIF, TIFF, PSD, JPG, PNG, PCX;

vector graphics - EPS, PSD, CMX, CDR, SVG.

Choosing a graphic editor

Raster editors (Adobe Photoshop, Corel-Paint, Irfan View, GIMP, Krita, etc.) represent graphics in pixels, the number of which in width and height is set when creating an image. Increasing the size of already created bitmaps is undesirable - this can lead to distortions and uneven graphics;

vector editors(Xara, CorelDRAW, Adobe Illustrator, Sketch, etc.) provide for the creation of lines and shapes according to certain mathematical algorithms, so that vector images can be scaled as much as you like without losing quality and perfect definition of contours. Vector web design programs are recommended for creating logos, emblems, etc.

Adobe is holding its own

Adobe Photoshop has been the most popular graphic editor for working with raster graphics for many years. Initially, this application was developed for processing and retouching photos, but then it went beyond the framework prepared for it and became a convenient tool for working with web graphics.

Not everyone knows, but in Photoshop you can work with vector graphics, for example, create vector objects or add them from other programs, such as Adobe Illustrator. The latter editor is still the preferred one for working with vectors. In it you can create any images for the website, mobile devices, video, printing, animation, etc. Adobe Photoshop interface:

Sketch - the program of the future?

This is vector program for web design, tailored exclusively for interface design in operating system MacOS. This program is recommended to be used by already "worn out" designers for two reasons:

if you are new to web design, then you should first learn how to make ordinary, raster creations, consisting of many pictures and colors, and then move on to serious vector graphics;

the cost of the cheapest Apple options (on which MAC OS is installed) starts at 60,000 rubles. The Sketch program itself costs $99.99. As a beginner, it is unlikely that you will get any benefits from such an investment.

However, this tool has already fallen in love with many creative personalities. The main features of this program for a web designer:

Sketch does not use its own resources to draw content - this task is assigned to the built-in functions of MAC OS X: Core Animation, Quartz Extreme, QuickTime, ColorSync, Core Image, OpenGL. Thanks to this, the most sophisticated version of the program takes up only 42 MB of memory (fans of heavy Photoshop, do not faint);

files can be exported to any format, from PNG to SVG;

in one document, you can draw dozens of application screens without compromising performance;

automatic snapping of content to the grid, thereby avoiding jagged, blurry edges.

Sketch interface:

Finally

In order to understand the existing variety of applications and web programs for web design, it is not at all necessary to attend any special courses. There are many videos and comprehensive video tutorials on the network that will “decode” each tool and explain in detail each action in a graphic editor. This will allow you to further apply your knowledge and skills in practice as widely as possible.

For starters, you'll be up to your neck with Photoshop's toolkit, however, in the next few years, this monopolist may have serious competitors, such as the Sketch web design program. Therefore, you should not rigidly bind yourself with long-term habits with certain tools. Consider alternatives, learn something new all the time, master new applications.

On this I will say goodbye. I wish you good luck and success in your web design career! If you have just started this difficult but very exciting journey, I advise you to first subscribe to our blog updates, where you will find a bunch of fresh and interesting information in the field of web design and web development. Until we meet again, friends!

So, let's define: you need a tool to speed up your work. That is, you do not need to master all the functionality perfectly, you need to learn how to work quickly. Whichever tool you choose, learn the key features and master all the hotkeys.

Learn how to use them automatically, and then move on to more advanced features. To design simple websites, you only need to know how to set a font, draw simple shapes, work with layers, change colors, and so on.

Rice. 7.0: I designed my site with a few basic tools, one font and three colors.

When you get comfortable with your tool, you can quickly test different ideas (which will help you achieve better results) and finish work on time (which will make your clients and employers happy!).

If you are just starting to learn design or have been wanting to switch to another tool for a long time, I advise you to experiment with several options and choose the most convenient one. We all have our own life experiences and habits. If for some reason you liked a program, most likely you will master it much faster.

It is important to understand that at some point you may have to switch to another tool. Most of us have been using Photoshop for years because there were no alternatives on the market. Over the past couple of years, the situation has changed radically.

Design on the web has long ceased to be static, and we are trying to fill the gap between design and code. Most likely, in the near future there will be many new features and even tools.

Popular Design Software

When choosing a design tool, an important role is played not only by the speed and quality of the program itself, but also by its popularity in a professional environment. It will be easier for you to work with other designers and developers (for example, as part of a large-scale project) if you use the same software.

1. Sketch- $99/year (Mac only)

Figure 7.1: Sketch

I use Sketch for most of my current projects. The tool is very fast, intuitive and quite easy to use (I switched to it from Photoshop without any problems). Sketch is one of the most popular design apps, so most developers and designers are familiar with it.

Sketch has everything you need for design: guides, grids, symbols, transforming images in perspective (to preview designs on iOS), vector editing, prototyping, libraries, asset export, cloud (to share designs and libraries), and even code export . And there are a lot of plugins and resources for it.

The biggest disadvantage of Sketch is that it only works on Mac. However, it is possible to export projects for applications such as InVision and Zeplin to create specifications and developer guides.

2. Figma– Free or $12/mo (web app)

Figure 7.2: Figma

Figma is relative new program for design. It's probably Sketch's biggest competitor - and it's growing very fast. Figma has all the same features as Sketch - plus multiple designers can work on the same project at the same time.

The coolest thing is that Figma is completely free if you have up to three projects, and for just $12 a month you unlock all the features and can create an infinite number of projects. The application works directly in the browser - therefore, on almost any operating system. The user interface is reminiscent of Sketch and Adobe XD: if you are familiar with these tools, then you don’t even have to master anything.

This is a great option if you are a beginner designer and would like to try your hand without investing in expensive software yet. I used Figma in several of my projects and it worked very simply and quickly for me.

3. Adobe XD– Free (Mac and Windows)

Figure 7.3: Adobe XD

Adobe XD is another strong player in the world of professional design applications. I think it's great for UI design, wireframing, and prototyping, although it lacks a few advanced features compared to Sketch or Figma.

The upside is that the tool is free for both Mac and Windows (although it will probably be paid when it is brought to mind). Plus, it's an Adobe product line - so you'll be able to swap assets with other tools like Photoshop or Illustrator.

The interface is very similar to Sketch and Figma, so you can use three tools at the same time - and switch between them without any problems (except that some hotkeys are different!).

4. InVision Studio– Free (beta version, with the possibility of early access)

Figure 7.4: InVision Studio

InVision Studio is a new full stack tool that is still in beta but looks promising. The interface is a copy of Sketch and Figma, which have already become the modern standard for design tools.

I've been playing around with InVision Studio a bit and since I've had a good overall experience with other InVision products, I'm sure the guys will be a success when the official release comes out.

5. webflow– Free or $16/mo (web app)

Figure 7.5: Webflow

Webflow is a full-stack tool for building functional and responsive websites that can be hosted directly on their platform (or exported and hosted elsewhere).

I'm not a fan of design-to-code tools because the generated code usually doesn't perform very well, plus it's hard to work with. However, Webflow is very good. You have complete control over the CSS code, plus the tool shows you how HTML and CSS work because all design elements in the browser behave as they should.

I think Webflow is great for building rapid prototypes, simple websites, one pagers, and the like. Many professional designers I know use Webflow - so it's worth taking a closer look!

6. Adobe Photoshop– $20.99/mo or as part of Creative Cloud ($52.99/mo)

Figure 7.6: Adobe Photoshop

It's no coincidence that I put Photoshop at the very end of the list. Photoshop is a very popular website design software, but it is losing the battle against Sketch, Figma and other tools. If you're still using Photoshop, that's fine, but be prepared to move to another tool in the near future.

The current web development standards force us to make projects more flexible, move closer to the code, work within the framework of a design system. Photoshop is too slow and generates too large files compared to the above tools.

However, I still use Photoshop for photo manipulation, graphics, and illustrations.

Figure 7.7: Quick comparison Sketch, Figma and Adobe XD interfaces. Look how similar they are!

Other tools I use at work:

Here full list tools that I use in my work.

Editor's Choice

Learning web design from scratch step by step guide for beginners (ten stages)

Many young people want to connect future profession with website development. Naturally, not everyone wants to be a programmer, some of them are quite satisfied 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 have a little knowledge of the code (know CSS and ), be able to communicate with the customer in the same language, etc.

Before starting to get acquainted with the basics of the profession, a number of questions arise, and the answers to them have to be sought by yourself. This is not easy to do 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 exercises, 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 it

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

Website building is a very profitable business, and it is not always easy to find an experienced, and most importantly, intelligent developer in the afternoon with fire.

Although there are many cases when a person wants to do exactly that, but without the knowledge of creating a website graphics engine, it is not easy to program it.

And the third common reason why people become interested in web design is the attraction to the fine arts.

And this area can serve as an excellent means for realizing their talents in practice and deriving financial benefits from this.

Important! For whatever purpose you get acquainted with web design, remember that both learning and work should be interesting, done with desire and bring pleasure, but not turn into a routine.

Since the graphic artist is young profession, her 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, understand marketing, and have an understanding of SEO promotion.

Without unique solutions, original ideas and an individual creative approach, the task cannot be solved.

Website designer is a technical artist working on appearance and optimizing the loading of the site and web applications.

The tasks of these people include:

• work on the logical structure of the page- so that everything is clear to any novice user, he was able to find what he was looking for the first time, all important links should be in sight;
• development of the most rational way of presenting 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 inscriptions after the click, how the interaction with the client is carried out, how and what will change during the visitor’s work, zooming, etc.

So we briefly found out why people want to deal with the graphic part of the sites.

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

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

Step 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 also increasing. At first, a beautiful aesthetic and bright page was the task of the artist.

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

Hard

Old as site building itself type of page design effortless, perfect for beginners.

The bottom line is that all resource elements are placed in virtual table cells with fixed sizes, which 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 site, and in this case it takes a few minutes to correct something.

Flexible

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

The challenges of this design are:

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

Combined

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

Text

It is used when designing one-page resources and sites, which 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 page loading speed. Playing with fonts, text colors, and good text placement will help make the project attractive.

Printing

Most in demand in the development of corporate and marketing resources where emotional content comes first. The designer should be as creative as possible and creatively choose pixel images for page design.

The disadvantage of print design is a decrease in site loading speed due to the presence, as a rule, of an abundant amount of raster drawings, and even in high resolution.

Interface

Mostly experienced craftsmen turn to him. Their task is to satisfy all user requests, usually by minimizing code, optimizing graphic elements and creating a convenient navigation system with menus located at the top of the page. Such resources load quickly, they are easy to work with 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, widescreen videos).

To implement the plans, you will have to sweat a lot, and in order for the visitor to be satisfied and everything to work as intended, you need not only the 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-designed resource always attracts with its beauty, originality and artistic solutions, regardless of the content.

Step three - find out which web design programs are trending right now

Before downloading books on this or that graphics editor, you need to clearly imagine 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 whole composition is created.

Anyway, knowledge of cascading tables and hypertext markup is needed almost in the first place.

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

Attention! In addition to the difficulty in mastering, the application will also have to be bought for full-fledged operation, although for training purposes it is possible to cheat by bypassing the protection of the program.

The latter is overgrown with functionality that is in demand in dozens of areas, and the guys pay little attention to the multiplication of opportunities regarding 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 overtakes Photoshop in terms of basic indicators.

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

Step Four - Explore Helpful Books for Aspiring Web Designers

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

With the popularization of the web design profession, the number of books on the topic has increased. Without a mentor and teacher, a book - The best way Gain knowledge.

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

The main elements are:

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

Navigation elements- 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 placed- occupies the main part of the screen, the text is always accompanied by figures, tables, diagrams, animations, etc.

Modular grid

Before developing a project scheme, you need to understand for yourself the concept of a modular grid. It is a way of distributing information into columns, it is the framework of the future site.

Usage modular grid greatly simplifies further layout, take the time to get to know her.

Stage six - online trainings

• attending seminars and trainings;
• participation in online training (remotely).

Choose the right classes based on your knowledge, experience and the direction in which you realize your creative potential. During the course, it is charming to consolidate theory into practice.

1 Web Design Lessons for Beginners

More experienced developers who speak English, should definitely familiarize themselves with 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 learn from someone else's experience. People get more bang for their buck from courses than from dozens of books they read. with regard to practical skills.

Step Seven - Find like-minded people

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

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

Healthy competition- the engine of progress, it allows you to develop, striving to do better than a friend, to bring something new to the project. And when learning web design from scratch, you definitely need to communicate with more experienced developers.

Step 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 change for the better, and optimize the loading of the resource, and increase the emotional attractiveness of the page.

The easiest way to visit resources, where experienced and not so experienced designers put their work on display:

Stage nine - try your hand at a freelance exchange

You can work as a technical artist both on your own and for any company. For novice users, it is better to gain experience on freelance exchanges:

We work at first for cheap: we take inexpensive orders and work long and hard to fulfill them until the customer is satisfied.

Successful projects are experience not only in design, but also in communication with various clients, replenishment of a still empty portfolio with works.

Pay more attention to filling out the profile and the rates for work.

Simple, but brought to mind layouts can be sold, taking as a basis similar projects offered for sale.

Important! Feel free to ask questions, take an interest in which sites the customer likes the most, so that there is something to navigate. You should not rush and do work with flaws or underestimate the deadlines, and then make the customer wait and be nervous.

Step Ten - Turn Web Design From a Hobby into a Profession

Website design is usually started by students and young people, 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.

That's just quit your job and go to free bread or replace your current job with a comfortable chair in the office at the computer many are afraid.

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

Rice. 15 – Over time, web design should become a profession

And yet, if the occupation of developing graphical interfaces of sites attracts, it is definitely worth turning it into the main profession, and it is not necessary to delay it.

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

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

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