In this article, I decided to review sites design programs, as well as the tools faced by a web designer in your work.
Such tools help to make work not only better, but also facilitate labor and save our precious time. Nowadays, such programs become more and more, I will tell you about those with whom I myself come across directly when.
Web design
Web design is a type of graphic design in the field of Web-based site-oriented sites and creating web applications.
On the one hand, the web designer needs to be able to competently place graphic and text elements of the website using the HTML hypertext mark, know technical subtleties, on the other side. In other words, the site designer must be a web programmer and artist.
Means and tools for web design
I will try to list the basic programs that I come across most often when developing web projects. Let's start with tools for entering code, creating, layout and markup of the site layout.
Adobe Dreamweaver - Popular HTML editor, with support for DHTML programming languages, PHP, JavaScript, Ajax, CSS styles, and others. A given program includes a site management system, supports scripts and can optimize web pages for various browsers.
The Dreamweaver program window is divided into two areas:
- at the top of the screen displays software HTML code;
- the site created site is located.
After applying markup in the project layout, you need to think about the graphic elements and try to make the web resource beautiful. The most popular graphic editor is Photoshop.
Adobe Photoshop. - This is a powerful program with rich functionality for processing and editing raster images of various graphic formats. When creating sites, this program has to devote most of the time, since it can be done with a lot of operations:
- image processing;
- photomontage;
- painting;
- retouching;
- color correction;
- transformation graphics;
- apply various filters and more.
If the project needs to integrate animation elements, then you need to use programs for creating flash animation.
Adobe Flash. - Software for creating animation works, interactive buttons, banners using object-oriented animation tools. An example of one of my flash works:
Server platform and software environment
Next, we need a platform for checking the project on the local computer. There are many local servers for primary placement and web project testing. Started using a software shell Denwer which includes Apache, PHP, MySQL, Perl, PostgreSQL.
Recently I use a more functional portable server platform with a rich set of services and functions. Open Server In which: Apache, Bind, Nginx, MySQL, MariaDB, Mongodb, Postgresql, Redis, Memcached, PHP, ImageMagick, Ghostscript, Sendmail, Adminer, PhpmyAdmin, etc.
To place the file structure of the site on the host server, we will be useful. FTP Filezilla. With which you can easily connect to the FTP server and work with files. Although all modern hosting has this functionality in the Personal Account.
At the stage of testing and debugging will also be useful to everyone known Internet browsers : Mozilla Firefox, Opera and Google Chrome.
For advanced web programmers
For more advanced programmers will be useful to develop an environment NetBeans. which supports such programming languages \u200b\u200blike: Java, C, C ++, PHP, Python, JavaScript, etc.
NetBeans is completely free and includes the necessary functions and tools for creating professional web projects and mobile applications.
This is not the entire list of programs that you have to deal with the manufacture of sites. There are also programs for working with fonts, creating buttons, banners, utilities to optimize and facilitate program code, tools for checking the correctness of web pages, graphic systems for creating volume images and many others, not to mention the tools.
In this section, I plan to consider not only programs for creating site design, and any other software, with which one way or another faces a web designer in your work. The most popular program for design is probably Photoshop, but, as they say, not for them. There are many more nuances and directions in web design, where you can use a specific software - layout, fonts, work with browsers, FTP, etc.
In general, the use of programs for web design will allow not only "to do their job well", but often it is a good opportunity to save some time, automate and simplify some processes. I am glad that recently such solutions and programs for designers appear more and more - about all the new products and the old proven software I will tell.
Designers are those people who are in constant search for something new: interesting sources of inspiration, specialized online services, offline programs by type CSS editors, as well as all sorts of tricks / scripts that help speed up and improve workflow. You have probably heard about one of the largest software products for this browser - built-in Chrome DevTools developer tools, however, you can find tens and hundreds of smaller, but very useful applications. Over ...
The effectiveness of any web resource largely depends on the degree of success of its interaction with the user, i.e. UI / UX design usability and successful UI / UX. If the site is folded into use, then its visitors with a high probability will find and choose something else. However, if the user receives a positive impression, he will not only use this product itself, but will also be recommended by his acquaintances. In this article we will look at the best tools for creating good usability ....
When there is a need to edit / improve photos, then not every user will be able to solve the problem with the help of professional software according to Photoshop. Without additional knowledge or search for information in Google, unfortunately, do not understand. However, as an alternative, we advise you to try simpler photo edits, which are just created for quick and easy processing of graphic images. One of the most popular such tools - Movavi. Earlier about him already told in ...
Modern graphic editors have long left old desktop versions and launched their own online services and different mobile applications. For example, we recently considered more than 10 full-fledged and self-sufficient design programs on Android, there is a similar software under iOS, you can recall the vector editor Vectr and much more. Google has decided not to lag behind such trends and launched its online web application for drawing on the browser pages - CANVAS CHROME. Not looking ...
Watermark is a transparent logo or emblem on images and photos. Designers and photographers place them in their works to protect copyright. You could also meet them in different online stores. Today, consider the Visual Watermark program to quickly and easily add the addition of flyers in the photo.
This task occurs when you, for example, want to translate your ancient family photocollection into a digital format, saving pictures on your computer or re-print them. Alas, over time, the original image option can be tightened: bends, scuffs, cracks and other artifacts appear. In general, it is not necessary to do without additional processing. Theoretically, many graphic editors can be used as a program to restore photos, but for the performance of this work will require special ...
For a long time, vector graphics creation / editing tools have been hard to reach for webmasters, bloggers and content marketers. First, the special cost was often expensive, and secondly, it was too complicated for ordinary users (not designers). Now the situation is better - you can find different illustrator analogues in free access, not highly inferior to the original. We'll talk about one of them today - this is a VECTR program. Use this free vector editor on the usual PC or in ...
We discussed WordPress mainly from the point of view of templates, but the system has another big advantage - modules. Because of them, many webmasters earning money online choose this CMS to implement their ideas. Today we will talk about the WP-Loaner plugin, which will be useful to those who are engaged in credit partner programs in CPA (COST PER ACTION) niche. Briefly consider the possibilities of the tool and setting the appearance of the displayed data in it. If a…
There are several interesting alternative photoshop programs for processing photos on the computer. They make it easy to edit pictures, giving them uniqueness and individuality, as after using professional software. About one of these solutions called the photo meter today we will tell. The main advantages of the program in front of Photoshop: the most simple / convenient interface. You do not need professional skills to work with graphic editors. If something is incomprehensible, then there are free training on the official site ...
Android is the most popular mobile OS, which is installed on millions of devices worldwide. Therefore, it is not surprising that there are quite a lot of games, utilities, applications, including different Android apps for designers. You can use them on medium Chinese smartphones, top devices by the type of Google Pixel 2 XL or Samsung tablets with a pen s Pen. This article will be a kind of logical continuation of the selection ...
There are many free graphics and tools for editing images that can be considered as an alternative to Photoshop. I made a list of the best. Some of them are free online services, while others are available for free download and installation on a computer and mobile devices.
Vector graphics
1. SVG-EDIT - vector graphics development in browser
If you need to programmatically play the drawing or vector graphics, it can be done using Scalable Vector Graphics format ( also known as SVG). A program for developing Scalable Vector Graphics is called SVG-EDIT.
This is an open source software. SVG-EDIT is a powerful tool that allows you to create or edit SVG elements. The tool is based on CSS3, HTML5 and JavaScript. With it, you can quickly edit and process two-dimensional ( 2d.) Vector graphics:
2. Drawplus Starter Edition from Serif - Free Software for Graphic Design in Windows
Free software for creating graphic design. This is a program graphic editor 2D graphics, which allows you to draw, edit and create a professional design.
Drawplus also contains a series of functions that allow using extrusion to create 3D objects, apply a wide range of 3D-styles with a huge collection of brushes:
In Drawplus you can easily develop graphic design, logos, technical drawings, animation and much more. There are various pre-installed patterns. Benefits for beginners who will help start work in the program are also available.
3. INKSCAPE - vector graphics editor for Windows, Mac OS X and Linux
If you are looking for a replacement of Adobe Illustrator or CorelDRAW, then inkscape is a tool that you have to come. This is an open source vector graphic editor and multiple powerful features:
It also supports SVG integration with advanced printing capabilities and web design. This is a professional graphic editor with simple and easy-to-use interface.
4. SKENCIL - program for vector graphics under UNIX / Linux
Free Graphic Software for Linux / Unix. This is a flexible and powerful tool for creating illustrations, charts, etc.:
5. Ultimate Paint - Windows Image Tools
Functional 32-bit program for graphic drawing. The latest version supports a set of basic functions that can be used without any restrictions:
Ultimate Paint supports flexible taste management features that allow creative design. As well as PEG, GIF, PNG, BMP, PCX, AVI (read only), TGA, WMF / EMF, ICO, ICO, IFF / LBM and WAP BMP, as well as TWAIN-compatible scanners.
6. Smoothdraw NX - Free Image Processing Tool for Mobile Devices
A simple touch tool for drawing from hand, which can be used to obtain high quality images. It supports many types of brushes ( feather, pencil, aerography, natural brush, etc.), retouching tools, layers, etc.:
7. Fat Paint - Best Drawing Program
Fat Paint is known as the best software for graphic design, drawing and creating logos. This is a free image editing program that allows you to create pages, vector illustration, logos, edit photos and develop web design:
8. My Paint - an application for creating graphic design under Windows and GNU / Linux with an open source
The program for graphic design, which allows you to focus on creativity, and not on the interface management issues:
This is a quick and easy-to-use open source application to develop graphic design, which is available for users both Windows and Linux.
Image Editing Tools (pixel graphics)
9. Paint.Net - Free Image Editing Software under Windows
Paint.Net is an excellent alternative to the built-in Paint graphic editor. This is an easy-to-use image editing tool with a set of basic and additional features:
Thanks to powerful features, this editor is often compared with other digital photo editing packages, such as Adobe Photoshop, Corel Paint Shop Pro, Microsoft Photo Editor and Gimp.
10. GIMP - GNU program for image processing under Linux, Windows and Mac OS
Another powerful graphics program for a computer that is widely used for retouching photos, processing, creating image composition, etc.
This is a free open source software to develop graphic design, which is widely known as photoshop alternative. Although GIMP was originally created for UNIX, but now it is available for other OS: Windows, Mac OS X, etc.
11. PIXLR - photo editor for iPhone, iPad, Mac OS and Android
Powerful application for editing images under iOS and Android. You can download it for free. With the App Store or Google Play Store. This is an interesting and powerful photo editor that allows you to quickly trim, rotate and configure any image.
Pixlr has more than 2 million combinations of free effects that allow you to make an image unique.
12. Sumo Paint - browser application for creating graphic design
If you want to start working with images in the browser, Sumo Paint will help it. It can be used to edit photos online or install the program to access all features offline ( paid subscription):
With Sumo Paint, you can edit photos directly in the browser. Although this requires the availability of Adobe Flash.
13. Image Magick - Bitmap image converter for Windows, Linux, Mac OS X, Android and iOS
Powerful tool for converting images from one format to another. For example, from .jpeg in .png. This is a graphic editor of raster images that allows you to create, edit and convert raster images to other formats.
The program contains such useful functions as trimming, rotating and converting images, mirror reflection, etc. What makes it a convenient tool for graphic designers.
2D / 3D and animation
14. Daz Studio - 3D models, 3D animations for Windows and Mac
If you want to start learning 3D design and animation, install Daz Studio. You will receive at your disposal a sufficient number of tutorials that will make you "ninja" 3D animations, regardless of what is your level at the moment:
With DAZ Studio, you can create your own 3D characters, avatars, graphic design elements.
Create your own short films and animation, illustrations for books and magazines, etc. This free software will be very useful when studying 3D.
15. Sculptris - 3D Development Software under Windows and Mac
If you want to reveal your potential in 3D sculpture, 3D painting, Pixologic will help in this.
This is a tool for 3D modeling with powerful features that will help you get used in the world of digital reality. If you are a novice in 3D sculpture and 3D painting, then sculptris is the best point with which you can start.
16. Blender - Open source software for creating 3D under Windows, Mac and Linux
One of the best graphic programs for creating 3D projects. This open source software that can be downloaded for free and install on Windows, Mac OS X, Linux, etc.:
Blender contains many 3D manuals and a gallery of previously created projects available for download. There is also an active community whose participants are willing to answer your questions.
17. Google SketchUp - 3D for each on Windows and Mac
3D SketchUp is still the easiest way to draw in 3D. This is a powerful software for 3D modeling, which allows you to quickly create 3D objects. The program is very easy to use.
18. 3D canvas - software for 3D modeling under Windows OS
It is an intuitive software for 3D modeling in real time and 3D animation. It provides tools for a simple 3D scene control with DRAG-AND-DROP functions:
This is a program for graphic design developed by Amabilis Software. It is available in three versions - 3D Crafter, 3D Crafter Plus and 3D Craft Pro. The basic version is free, while Pro and Plus are paid. The program works on Windows 7/8 / Vista.
19. ART OF ILLUSION - Open source software for 3D modeling on Java
Open source software for 3D modeling and visualization. It is written in Java, so this is a powerful program for 3D design, which can be used on many Java virtual machines.
On the project site you can find many benefits, galleries of work. In addition, the active participants of the forum are always ready to help. Therefore, even if you are new to 3D modeling and only make the first steps, Art of Illusion is ideal for you.
20. Anim8or - Software for 3D modeling under Windows
One of the oldest 3D modeling programs, which is represented back in 1999 and is still actively used all over the world. It is intended mainly for 3D modeling and animation of characters under Windows:
Anim8or includes a variety of powerful features: tool for creating and modifying 3D models, support for TrueType fonts, built-in browser 3D objects, Joint characters editor and much more.
Data visualization
21. Google Developers - Google Chart Tool Web Apps
Powerful tool for creating and setting diagrams with different data. It is a simple to use a free application for visualizing data, which makes it easier to create interactive circular diagrams, linear graphs, segmented diagrams, etc.
With this graphic program, you can create a visual representation of data and get the code to embed it in a web page, spreadsheets, etc.
22. Visual.ly - Web app for creating interactive infographics
Infographics is a new way of visual presentation of data that is developing a rapid pace. Visual.LY is the best program for creating and publishing interactive infographics:
This is a social platform for creating and publishing infographics, which allows you to interact with other users and exchange interactive visual ideas with them.
23. infogr.am - Creating infographics and visual diagrams online
Another powerful interactive tool for creating stunning visual representations and infographics. Using infog.am, you can create infographics, diagrams, as well as other visual views using three simple steps: Select a template, visualize data, and then publish them.
You can also choose for free charts from a collection containing more than 30 types of interactive diagrams.
24. Easel.ly - creating and publishing visual ideas online
Another powerful tool for creating infographics. Even if you do not know how infographics are created, everything you need to do is go to the site, choose a template and start working:
As part of this service, a huge number of graphic forms and objects is represented, as well as infographic templates with which you can create and publish visual views online.
25. Visualize.me - Visualize your resume online
Personalized tool that allows you to create and visualize a summary in one click. All this is available for free.
With more than 500,000 already created Vizualize.me projects is service number 1 to create a resume. It contains a greater number of powerful tools that will help create a resume.
Other software for graphic design
26. FAVICON GENERATOR - FAVICON free generator
This tool is a free FAVICON generator that allows you to create Favicon icons for the site. Just download the file and click the "Generate" button.
27. ColorPic - selection of colors on a stationary computer
ColorPic is a free color tool tool from the monitor screen. It allows you to capture color palettes up to 16 colors at a time. You can also use an advanced mixer for mixing four colors.
28. Fast Stone Image Viewer - Tool for viewing, editing and batch conversion Photo
This graphic program for artists supports advanced features, such as red-eye removal, colors setting, view photos, sending by email, cropping, etc.
Fast Stone Image Viewer is another powerful functional tool for viewing, editing and batch converting a photo.
29. Pixel Toolbox - Design Development for Windows
Pixel Toolbox is a powerful tool designed to create an impressive schedule for Windows. Create, edit and apply 1-bit patterns, wallpapers, icons and cursor icons - all this with a single tool.
30. Prezi - Free Presentation Program
Powerful free software that allows you to create, edit and use presentations remotely from anywhere. It is available for desktop PCs, smartphones and tablets. There is also integration with the cloud service that expands the functionality of the program.
New Free Software for Graphic Design
31. Canva - amazingly simple program for graphic design
This is a free web application that allows you to develop a design of practically anything. Simple drag-and-drop functions allow you to work so easy that you do not need to be a designer to create a stunning graphics.
With the help of the above services and programs for graphic design, start working very simply! Wish you all the best!
This publication is the translation of the article " 31+ Best Free Graphic Design Software To Create Stunning Graphic Visuals"Prepared by a friendly project team
From the author: For successful design and creation of sites, you will need special programs for web design. Recently, tons of new applications have appeared, but which of them do the productivity of the web designer really increase? In this article, you will learn how to choose the right program to create a site design, depending on the task and type of graphics - raster or vector.
As different masty designers say, "brain and hands are the main tools." And yet, they are a little shy. Is it possible to create a website design without taking any programs and tools? Of course, the brain is a powerful biocomputer that allows you to draw a complex picture in seconds in seconds, but, alas, only in your imagination.
To embody your ingenious thoughts into reality, you will need modern graphics editors. In my opinion, one of the most pleasant features of the web designer is the ability to independently make decisions about which use programs for Web-design, for example, to build and layout site pages, optimization of graphics, creating banners, etc.
The main criterion for the classification of all graphic editors is the type of graphics. Just in case, we will understand these fundamental concepts for web design.
What is raster and vector graphics?
Each self-respecting web designer must necessarily understand these terms. Images in raster graphics consists 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 any difficulty drawing, while using any number of all sorts of halftones, plug-ins and filters. The raster GIF format allows you to easily create an animation.
Vector graphics are distributed in printing design and creating site layouts. This type of graphics cannot transmit tones and halftone, however, it is more preferable if we are talking about creating texts, simple forms, contour figures.
Vector designs for site design use the principle of creating an outline on the coordinate system, which is a working area. 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, the mathematical formula.
To understand how the type of graphics includes this or that image, pay attention to its expansion:
raster graphics - JPEG, BMP, PICT, GIF, TIFF, PSD, JPG, PNG, PCX;
vector graphics - EPS, PSD, CMX, CDR, SVG.
Selection of graphic editor
Raster editors (Adobe Photoshop, Corel-Paint, Irfan View, Gimp, Krita, etc.) represent graphics in pixels, the number of which is set in width and altitude when creating an image. The increase in the size of the raster images already created is undesirable - this can lead to distortions and irregularities of graphics;
vector editors (Xara, Corel Draw, Adobe Illustrator, Sketch, etc.) provide for the creation of lines and figures according to certain mathematical algorithms, due to which vector images can be scaled without loss of quality and the perfect clarity of contours. Vector web design programs are recommended to be used to create logos, emblems, etc.
Adobe firmly holds its position
For many years, Adobe Photoshop has been the most popular graphic editor to work with raster graphics for many years. Initially, this application was developed for processing and retouching photographs, but then he went for the frame-made to him and became a convenient tool for working with Web graphics.
Not everyone knows, but in Photoshop you can work with vector graphics, such as creating vector objects or add them from other programs, such as Adobe Illustrator. The last editor is still more preferable to work with vectors. In it, you can create any images for the website, mobile devices, video, printing, animation, etc. Adobe Photoshop interface:
Sketch - Future Program?
This web design program is sharpened solely under the interface design in the Mac OS operating system. This program is recommended to use already "visiting" designers for two reasons:
if you are new to web design, then first you should learn how to make ordinary, raster creations consisting of many pictures and colors, and then go to a serious vector graphics;
the cost of the cheapest Apple options (to which Mac OS is installed), begins from 60,000 rubles. The Sketch program itself costs $ 99.99. Being a newcomer, you can hardly get any benefits from such investments
However, this tool has already fallen in love with many creative personalities. The main chips of this program for a web designer:
to draw the Sketch content, does not use its own resources - this task is assigned to the built-in Mac OS X: Core Animation, Quartz Extreme, QuickTime, ColorSync, Core Image, OpenGL. Because of this, the most implanted version of the program takes only 42 MB of memory (fans of the sweatshirt photoshop, do not faint);
files can be exported to any formats from PNG to SVG;
in one document, you can draw tens of application screens, without prejudice to performance;
automatic content binding to the grid, so that it is possible to avoid uneven, blurred edges.
Sketch interface:
Finally
In order to deal with the existing manifold of applications and web programs for web design, it is not necessary to attend some special courses. There are many videos and integrated video tutorials on the network, which "decrypt" each tool and explains in detail each effect in the graphics editor. This will allow you to further apply your knowledge and skills in practice as widely as possible.
To begin, you will be "on the ears" enough toolkit Photoshop, however, in the next few years, this monopolist may have serious competitors, for example, the Sketch web design program. Therefore, it is not necessary to rigidly associate yourself with many years of habits with certain tools. Consider alternative options, all the time learn something new, master new applications.
I will say goodbye to it. I wish you good luck and success on a web designer field! If you just started this difficult, but very exciting path, I advise, to begin with, subscribe to updating our blog, where you will find a bunch of fresh and interesting information in the field of web design and web development. To new meetings, friends!
Want to know how to become a web designer yourself? Or maybe you already have a few of your designs or even, and you would like to withdraw your skills on a new advanced level? Then you move in the right direction right now, because the topic of the article is "Web Design where to start" and in it we will consider in detail all the necessary stages of web preparation of the web designer and help you become a web designer on your own, applying a little zeal and creativity.
One article, of course, will not be able to tell how to become a web designer and tell about all the skills, the necessary tools and technologies that need to master the dreams on the way. If you think the path will be simple and fast, then I have to upset you. The work of the web designer is constant self-improvement, development and race for new trends and trends. But, despite all the professional difficulties, it is the training and receipt of new knowledge - one of the most pleasant aspects of this work.
First, a small lyrical retreat for designers who accidentally wandered to read this article. " I am engaged in web design", Probably, you have repeatedly spoke to someone this phrase and experienced cold fear when you answered something like:" Cool! And teach me how it is done? How to become a web designer from scratch?"Many simply suggest that they click the mouse, drag the pair of icons on the screen, and the design is ready. But, unfortunately, it is not. Therefore, the next time someone will ask you how to create design sites, just show them this article.
Welcome, ladies and gentlemen, in guide for novice designers from Motocms. Take your mice mouse and make it easy after the keyboard, the post promises to be long. Coffee is optional optionally, but still worth it.
Who is this web design?
This article is intended for anyone who wonders "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 styled. The article is designed for the fact that you have no special artistic or technical education, there are no coding skills and experience in the Web Design Industry.
Requirements for novice web designers
"Minimum requirements" for people who think how to become a web designer and want to create their first site, quite simple. If you know what folders are, graphic text files, you can start.
However, even though the start of work and simple, creating a really good site is real art. There are many skills that you need to learn. You will need to learn about the theory of color, about the graphic hierarchy of elements, fonts and the general organization of the site.
Also, you will find knowledge of the basic coding languages, namely HTML and CSS., we will talk about it too.
Then you may want to explore the basic javaScript programming And find out how to use it to manage different parts of your site. And the desperate drummers who want to shop even further - will be able to dive into the system content Management, Search Engine Optimization and Marketing.
But you should not rush right away, the skills will come with experience and necessity, I will only try to send to the right track. And if you read already before this part of the article, I can safely say "Welcome to the beautiful world of web design, a novice. Be ready to spoil everything repeatedly and do not forget to have fun! "
How to use this web design guide for beginners
Read it! This will be enough to start. Make your first, most likely a crown site. Return and read again. Corrend errors. Repeat.
No, you probably do not want to read everything at once. There are many other resources, many different approaches that can be used. Nothing terrible, but I still recommend it to read a little and try to go through the first steps.
Design in the browser for beginners
Perhaps you know that most of the designers first use graphic editors, and already give their projects to the encoder on the layout. Photoshop is the most frequently used tool, but designers also use programs such as Sketch., Gimp., Inkscape. and Illustrator.
Undoubtedly, you need to try several of them and use those tools that best come to you. However, if you want to create sites, then try to immediately do it in their natural habitat - in the browser! Ideally - do it in several browsers - because people do not view sites in Photoshop and do not see them as you are through the graphics editor interface.
The workflow based on the browser has a number of other advantages:
1) You exactly see what you get. Even professional mocapa do not transmit interactive or animated parts of sites. Creating a browser-based design you can see exactly how it works.
This is especially true when it comes to adaptive design. (For the uninitiated: responsive or adaptive design is one that is correctly displayed on different screens and devices, whether it is a mobile phone, tablet, or PC).
2) The design based on the browser can make you the best designer. When you yourself know the whole process, you can understand what and how it works, and warn ourselves from many mistakes. A nightmare of any designer (or a vertellover who will have to do), working in, say, Photoshop, this is further "pulling" on the live site.
In any case, here are several resources that can be useful in working with graphic editors.
The design in the browser can largely change your approach to work and get off you to learn something new about HTML and CSS. In principle, the more you sum up with dirty with the code, the better you will understand how sites work. It will not make you a stunning designer; But this is a great start.
Skills that you need to become a web designer
If you want to become a professional web designer yourself, you will need some special skills. In this section, we will answer the question "How to become a web designer yourself?", And also focus on the skills necessary for the actual design and site creation. Of course, you will also need business and communicative skills, but this is a slightly different story. So, to become a web designer yourself you need to know the following.
UX / UI design
A user-oriented design, or UX-design, is how the user interface in general will look and work. This process is philosophy, and this is a lot of work. A really good site can be created only knowing what the way the visitor passes 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 complicated thing. It seems that an excellent color scheme for some people may look completely strange for others. Fonts that for you in this place look "Just" may not like the customer at all. It seems very, very subjective, but still in each of these aspects there are rules about which we are with you now and talk.
Combination of fonts and typography
Internet is the text. These are words. And these words should look amazing. However, typography is something more than just choosing the right font. This is primarily easy to use. It is necessary to choose correctly and combine sizes, types and font styles in design to create a graphic hierarchy in design.
To spend you "from A to Z," I propose to view the book of Emil Ruder "Typography". Reading can be quite long, because for those who want to immediately begin the practice - a short video on the topic, as well as (this is if suddenly you have already found a good example of the text, and would like to identify its font).
After you have learned the rules of typography, you can try some fonts for your project. In fact, there are many good free fonts on the network, so look around.
Many people, including me, choose our fonts from. Google fonts can be "embedded" to the siteand it is quite comfortable. Moreover, you can use ready-made font combinations:
Other similar examples can be found on the Internet.
If you want to create your own Google font pairs, try the "Web Fonts Combinator". This is a tool that allows you to quickly view combinations of fonts in real time, changing the font, size, color, line width.
If Google fonts are not enough, you can look at WebDesignerDepot, Fonts-Online, and other sites.
Color theory and color schemes
Color theory has little in common with the technical names of the colors. If your client asks Fuchsia, but actually wants a hot pink color, the choice of only you. Theory of colors is studying, first of all, the connection between the combinations of flowers and the emotions of a person who perceives it. This is a real science.
To understand the basics of color theory, there are several excellent publications:
Mandatory tools - Adobe Color CC
Remember that the color theory is closely related to the 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 will most likely go past this part of the site, or will leave him at all.
Composition and general organization
How to become a web designer without knowledge of the compositions of the composition? Yes, nothing! For me, this part is hardly the most important. After all, you can choose beautiful fonts, an excellent color scheme, and then tritely revealing with the right location of blocks, hierarchy and proportions and get a "disgusting dish of excellent products."
There are several useful publications on this topic, after which comes from the first (or almost from the first time).
- Using the "golden section" and "Three Rules" in web design
Web design trends
In trends in web design you can speak infinitely. What role do they play? All customers are most likely before you come to you have already looked at a few examples of cool fashion sites, and you may even read a couple of articles with web design trends. Know the fashion and popular design elements are simply necessary to understand what they are asking, and to offer them.
Since the trends in web design are constantly changing, no sense to bring some specific publications to an example. Here I can simply advise you to follow the sites for web designers, here are some good examples:
- abduceedo.com.
- behance.net.
- noupe.com.
- webDesignerwall.com.
- flickr.com.
- awwwards.com.
How to become a web designer: HTML and CSS
HTML This is a "language of hypertext markup." Each site for which you ever looked, is made on the basis of HTML. HTML is the language that is perceived which your browser understands that there is text, image, link, video, or other elements on the site. Your browser then translates the code to what you see on the screen.
Another language that simple words makes the site beautiful, called CSS.This means "cascading style sheets." CSS reports the browser, what font is set in the text, and which colors are used. CSS, Simply put, determines the appearance of your site (buttons, styles, colors, animation).
Examine these languages \u200b\u200byourself, or at least get a basic understanding of how they work are quite simple. These are the simplest computer languages. Nevertheless, they are also quite extensive and can be used in different variations to create amazing designs.
For those who want to begin right now, we picked up two good textbooks with detailed lessons.
As soon as 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 independently learn programming languages.
Live to live
Ready to place your website on the Internet? Is there a domain name (for example: mywebsite.com) and hosting (space on a computer constantly connected to the Internet or online hosting purchased from third-party providers)? Download files to hosting, lean in the chair, relax and ...
What to do after launching the site
Correct errors and finish what they forgot
"Ah, yes, this is here ... I definitely wanted to fix it."- It happens to everyone. Almost inevitably after launching any site errors pop up. And the more the site, the greater the likelihood that you missed the error or forgotten something. For your convenience, here is a rather detailed checklist-checklist:
Assemble Reviews
You will not be able to improve the skill, if you do not know where I made mistakes. Time and experience can teach you to this, but others can teach you faster.
When you try to become a web designer from scratch and learn yourself, I recommend you to join the communities to communicate with other designers that can help you and give professional recommendations.
How to become a web designer - Results
The article came out quite long, but to accommodate all this in a smaller number of words would be difficult, so everyone who read to the end, I want to congratulate and sincerely thank for patience. If you want to learn more about web learning design, or on specific tools and work strategies - 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 try out your live project skills, and you need a good hosting - as a bonus, you can buy hosting for a year from our partner inmotion for only $ 1.
