Make a web page in Photoshop. Free Online Editor: Pros and Cons

All tips

From the author: good afternoon friends! Today we have a difficult and very voluminous topic on our agenda - creating a website design in Photoshop. In general, everything related to creating working website layouts is practical lessons, and there is very little information about this on the Internet. There are a lot of craftsmen, a lot of advertising and paid courses, webinars... but, in fact, no one wants to share secrets and subtleties for free. Like, try it, suffer, and make sure that you can’t cope “without me.”

In this article I will try to answer the most common questions and highlight, so to speak, the general direction. I'm sure my tips will be useful to you!

Photoshop and web design

98% of web design projects begin with the creation of functional layouts of future sites, and almost all of them are now drawn in Photoshop. What is a layout?

A website design layout is a prototype of an Internet resource (portal, blog, trading platform etc.), its individual page, landing page, graphic image with drawn details of various levels. The picture can be general, or it can give a sufficiently detailed idea of the entire structural content of the site, navigation, and even information content.

Ideally, the output should be a multi-layer layout, completely ready for layout and coding. Website design in Photoshop has a number of required elements:

menu location;

navigation;

color spectrum;

fonts, etc.

But it all starts, naturally, with a concept. There can be two options: either the designer receives a ready-made flat drawing that needs to be translated into volume, or a “concept”. By concept, each customer has his own understanding: name, target audience, just a general list of certain functions and tasks, whatever.

But a design layout is no longer blah blah blah, but a functional interface, with a ready-made form for presenting information, aesthetic and practical.

Where to start developing a layout?

Customers are not always creative people; not everyone can definitively explain what they want and how it should look. A web designer's job is to ask smart questions and get smart answers! The smarter you ask, the less you'll have to redo.

How I propose to approach website design development in Photoshop, literally step by step.

Point number one. The layout must be drawn on paper. General graphic forms- use squares, circles, rectangles to place the header, main menu, articles, photos, sections, sidebars, advertising. The details are not important here, the main thing is to plan the space.

Any layout has technical requirements, so you need to string your skeleton on them. Make a few sketches, everything will be better known by comparison. Some options can be categorically rejected, this is also good, a negative result is also a result. Let's move on.

Point two. The paper version in pencil has been agreed upon, you can move on to the color scheme. Again, you can get by with drawings, but it will be more professional to work in graphics programs. It can be flat, it doesn’t matter.

Point three. In order to make a truly high-quality design layout, do not hesitate to visit competitors’ resources. We have decided on a niche and main key queries, we enter them into Google or Yandex.

We are interested in a maximum of TOP 10. Analyze the functionality of these sites. Don’t delve too deeply into the content, test the navigation. Become for a while an ordinary user who came to the site upon request and is looking for the most convenient and relevant resource.

If all your movements are intuitive, and you do not waste time searching for the necessary buttons and pointers, then try to note how this result was achieved. And vice versa, fix for yourself what annoyed you, got in the way, maybe the menu is crooked or there are a lot of banners or advertisements. Well, etc. Your task is to objectively evaluate your main competitors, take note of their advantages and eliminate obvious shortcomings.

Well, this, as you understand, is a theory, let’s take some time to practice and see how to create a website design in Photoshop when you already know exactly what you need to draw.

Design layout in Photoshop

Creating a website design in Photoshop, no matter how primitive or mega cool, always begins with creating a document.

Document

The standard layout is 960 pixels wide. Open “Document” - New - set the dimensions. 1200*1500 pixels will be enough, leave the resolution at 72.

Modern trends and approaches in web development

Learn the algorithm for rapid growth from scratch in website building

Now select the entire document (Ctrl+A keys), we need to define an area of 960 pixels and add guides.

In the program menu, select “Select / Selection” - “Transform Selection / Transform the selected area”. In the properties, set the width to 960 and fix the layout working area. Leave the guides at the boundaries of the selection.

A common mistake designers make is positioning content within the layout workspace and manually indenting it. On standard screen This is acceptable, but when you open the page on a phone or tablet, the text will simply stick to the edge. How to fix it?

Go to “Select/Selection” - “Transform Selection/Transform the selected area”, and reduce the selection to 920 pixels. The layout will automatically be centered, giving you 20 pixels of padding on each side. When changing the width, do not forget to reset the guides.

2. Head and texture

To create a header, you need to separate the space at the top of the layout, for example 460 pixels. Color gradients look quite impressive. They are done like this:

the selected area is filled with 1 color;

Layer styles are selected in the menu;

"Gradient Overlay"

Volume can be added with lighting:

a new layer is created;

select a soft brush with a size of 600 px;

The brush color is set to #19535a;

In 1 click, a highlight is drawn in the desired part of the header.

I'll tell you about one more function - texture. You can make a texture picture from any color:

Using the Pencil Tool, draw 2 points;

temporarily turn off the visibility of the background layer;

Through the menu “Edit” - “Define Pattern” we get the finished texture.

Something like this:

Well, how did it work out? Are you interested in the process? The beginning has been made, you are on the path of amazing experiments that graphic Photoshop opens up for you.

Now is the time to open Photoshop, which has long become an indispensable assistant for web design, and make a sketch of some simple layout of 2-3 colors and a header. I’m sure you’ll succeed, and very soon you won’t have to peep what this or that person can do. another instrument. Practice and sincere interest in the matter are the key to success! Wish you luck. That's all for me! Subscribe to updates and you won't miss the most interesting articles. Bye, see you again!

Modern trends and approaches in web development

Learn the algorithm for rapid growth from scratch in website building

Don't judge a book by its cover is a good saying. She tells us that there is no need to be arrogant. But when we open the browser, we forget about politeness, and like every other user, we demand the latest information, the best video and the most user-friendly interface.

Even if your site offers truly exclusive content, no one will read it without a perfect page design because that is the cover of your site. In this article, we will tell you how to create the best website with the best web design layout.

What is a website layout (mockup)?

Unlike a Wireframe, which is a simple sketch of the future site, a mockup is almost the entire design. It displays not only the order of all the elements, but also the exact colors, shapes, and the exact placement of the elements in relation to each other.

To clarify the terms mockup, wireframe and prototype, think of them as steps towards a final product.

Mockup during product development process

The first step is a Wireframe, it only reflects the elements you want to place on the site and their position on the page. Wireframes can be easily created manually.

The second step is the web page layout. At this stage, you need to choose the style, color palette, shape and design of all components. As you work on the layout, you can evaluate how ergonomic the design will be, as well as the overall appearance of the page.

A prototype is an interactive work product that can be viewed. In simple terms is a finished product equipped with minimal functionality.

A prototype is essential as a proof of concept, especially if you're working with picky investors. If you want to convince them that your idea is really brilliant, show them a prototype.

Website layout, what is it for?

Of course, when you develop a product, you will have a Wireframe anyway. A prototype is optional, but a web design mockup must be created without fail. For what? Let's ask the next question - how to create a website layout and reap the benefits it brings to designers and product owners.

Benefits of developing a website layout

With a website design mockup, designers can:

Detect possible problems early

Sometimes the design we imagine looks completely different in reality. When you turn an idea into reality, you see all the shortcomings of the project. And at this moment the designer can easily change any detail, its style, size or color. And also exclude or add an element.

Offer options to choose from

The vision of the designer and the client rarely coincide. And if the designer wants to offer other solutions, he can convince the client by having various options in hand.

Easily convey your vision to the client

You can be a truly amazing designer, but it's so hard to explain your fantastic idea to a client! But if you show the layout, the client will understand your proposal.

Layout (mockup) visual design website is a great opportunity for the product owner, and here’s why:

Attracting investors

If you want to find investors for your project, it is best to prepare a product prototype. However, it will be more expensive, and there is no guarantee that investors will agree to participate. To keep costs to a minimum, you can show a mockup, and the cooler it looks, the better your chances.

Layout as a guide

When a client sees a website page " Layout of the future product”, and if he likes it, he understands how the whole product will function. Now this is his starting point, so there is no need to change or add anything.

Easy to make changes

When you look at the monitor, you can immediately see what doesn't look as you would like. It's too small, it's too bright, and this button is too big. The client gives specific instructions to the designer, which makes the latter’s life easier.

The most big advantage for all parties is that both will be happy after the project is completed. Designers won't have to make last-minute changes, and the client will actually enjoy what they paid for.

How to create a layout (mockup) for website presentation?

It's great if the designer has a lot of ideas. Although to create a website layout, and a truly fantastic one, you need to think not only about aesthetic pleasure, but also about the functionality of the created layout. Users won't appreciate a perfect design if it's not user-friendly. The layout serves not only for beauty, but also for the convenience of users.

Do you remember the McDonald's experience? Brothers Richard and Maurice MacDonald They drew a model of their kitchen on the floor, diagrammed the order of all the items, and made their employees move as if they were in a real kitchen. In this way, they were able to identify the optimal trajectory for each worker in accordance with the tasks they perform. This was the first time the design helped reduce cooking time from 10 minutes to 30 seconds.

This story teaches us how important design is to performance. The order of placement of buttons, as well as their sizes, should not only be beautiful, but also easy to use.

Sometimes you discover a great website, but you can't find it. the desired button or don't even understand its purpose. When you prepare a web layout, it helps identify all such issues and determine whether the design is user-friendly for potential users.

To make a site layout (mockup) that will allow you to evaluate all the functions and ease of use, you need to collect a lot various information about the future product:

What is the idea of the site, what functions will it include?
What services will the site provide?
Who is the potential user of the future product?
What is the average user age and area of interest?
Information and the form in which the site will provide it. What content will be posted on the site?

This data is necessary not only for developers, but also for designers. Designers will appreciate it when the client shows them similar sites to get a sense of the overall idea of the project.

Once this information is collected, the development team begins planning. The more thoroughly they do this, the better for the development process. Well-designed website layouts (mockups) reduce the final cost of product development.

At this stage, the team must answer the question: will the design be responsive, flat, or material style?

Another important question, which should be planned in advance - what it will look like mobile version site. What content will be displayed on mobile device, and which one won’t?

By using finished layout The website designer will be able to explain to the client why certain elements were compressed or removed, showing clear visual evidence.

What steps should you consider when creating website layouts?

There are some basic rules, which should guide all designers if they want to create a simple website design mockup that will attract, hold and direct users' attention in the right direction.

Basic elements of layout development

Style

Once you've chosen a style, stick to it. It is unacceptable to mix elements from different color palettes. The user will notice this.

Logo

The designer must create, position and size the logo so that it is immediately noticeable without looking like an eyesore.

Structure

Use a grid to make your content stand out and simple. Well-structured information is much easier to perceive.

Call to Action Elements

Buttons that recommend making a purchase, subscribing, or contacting a company should stand out. They must look attractive so that the user not only can, but also wants to perform a certain action.

Selecting a Layout

Modern design offers three main types of layouts to place important elements according to how the user views the web page. You can choose between Z-pattern, F-pattern, and Gutenberg chart structure. Your choice should be based on the type of site you are creating as well as your content.

Common mistakes when creating a web page layout

Just like with basic key elements, there are also typical pitfalls to consider when developing your website design layout:

Too many details. Remember the rule - the less the better. If you doubt this or that element, get rid of it, you don’t need it. The web page should only include necessary elements, without which you cannot work. Don't make the same mistake as the creators of the page below.

Layout error - too many elements

Wrong colors. Always use color scheme to select only the matching shades. Most modern layout tools include a color matching feature.

However, if you are using layout software that does not allow you to select color palette, you risk creating something similar to this:

Layout error - wrong colors

And this applies not only to flowers. I know that many aspiring designers think that Photoshop is a great tool for creating website layouts. However, this is not entirely true because Photoshop cannot show effects such as animation or others. Therefore, the question of which tool to choose to solve this problem must be approached very carefully.

Unreadable text. The colors used for the text and background determine how easy the text will be to read. The best option- dark text on a light, plain background. If the user has difficulty reading the text, he will immediately close the web page. Bright text colors or extravagant fonts can turn your design into something like this:

Layout error - unreadable text

Something else you need to consider when creating a website layout is how the site should look on different screens. Imagine that your site will be viewed on a smartphone, tablet, computer, and even on a TV. And you need to think about how it will look in all cases, how to organize the text and what will happen to the background.

Use touch features. Ability modern devices Responsive to touch is a fantastic chance to make your website design even more interactive. IN mobile design Clickable elements are in the lower half of the screen. In a site layout designed to be displayed on tablets, these elements should be arranged differently and placed where the user can easily reach them with their thumbs.

Of course, by turning to professionals, you can quickly get a lot of ideas how all the elements of your corporate identity or advertising campaign will look. However, not every company, especially a small and start-up one, can afford these expenses at the stage of business formation. The choice is obvious: in this case, you should try to make a layout yourself. Even if you don't have any experience in this field, there is a chance to create a fairly high-quality layout design for free.

At your service is a catalog of templates developed by specialists from the Printing House.

Without undue modesty, we will say that we have extensive experience in typographic work. It was he who allowed us to structure all possible requirements for printed products in the catalog and allow clients to use its templates for free. Create a layout online begins with choosing the type of product: business cards or flyers, letters of encouragement or certificates. Select the one you need from the list and let's get to work.

How to make a layout

The algorithm for working with the catalog is very simple.

Choose your favorite design option.
Enter all the necessary information without missing a single item (which you definitely don’t need can be deleted with one click of a button).
Edit fonts and sizes.
Adjust the text so that it does not exceed the boundaries of the print.
Select the paper quality and weight for your products.
Select the required number of copies and click “Add to cart”. After this, your order will be processed by the managers of the printing union “Print”.

The advantages are obvious:

Working in the printing industry for many years, we often encounter with standard tasks. Therefore, we have already thoroughly studied all the pitfalls, worked out the ideal scheme for online design, and provide templates for printing any of your products.

We provide all templates for free. This means that creating a layout won't cost you a penny. Agree, it's nice! In addition, you can prepare several options before settling on one.
You can arm yourself with any of the ideas seen on our website. This means that not just one designer or even a design bureau will take part in creating your layout, but the creators of all the options presented in the catalog.
A real opportunity to save money without sacrificing quality. We check every design option before we provide it to you. See for yourself - free design might be good!
Own printing house guarantees fast and high-quality printing of an already created layout.
Prompt delivery will allow you not to waste time: no standing in traffic jams, everything will be brought to you directly to the office.

Summarizing: Creating a free mockup of your products is the first step to creating a turnkey corporate identity. Make it together with the printing union “Print” and you will not regret the decision to save on design.

Layout designer from the printing house “Print” - what is it?

Do you ever have the feeling that you are overpaying for something that you could do yourself and much better than the specialist you hired? If we're talking about about printing, then this feeling is not inflated self-esteem, but a completely adequate assessment of the situation. After all, a very large part of printed products is produced according to the same templates - except that the pictures and text change. And you can easily replace them yourself if you have a special tool. And you have it!

Let me introduce you free constructor layouts developed by our printing house specialists. It is intended for those who want to prepare a design layout themselves, without turning to professional designers or freelancers. Of course, its possibilities are not limitless, it will never be able to replace professional programs like Photoshop or CorelDro, but even the most inexperienced user can create a simple layout with it.

Our online layout designer works. This means that to use it you will need an internet connection and regular computer, laptop or tablet. No extra software no need to download and install. It’s all very simple: open the website, do some work, save the layout, and send it to print. Agree, this significantly speeds up the work. There is no need to look for a free designer, fill out endless briefs, or waste time on approvals and revisions. Even the obvious savings on payment for the work of layout designers is not as pleasing as saving your time.

With the help of the constructor it is produced development of various types of printing designs, each of which is covered in a separate article in this section. There we describe in detail how best to make this or that layout and what subtleties should be taken into account. In the same block, we propose to talk about how the layout designer works in general, without touching on special cases.

Layout design development V this constructor produced absolutely free, since you do it yourself, and we only provide the tool and templates (there are several hundred of them in our database). You can use any of them an infinite number of times and not pay a penny for their use. And since design development takes place online, you can do this at any time convenient for you, day or night. In general, when will the muse or His Majesty visit the deadline =)

Free Online Editor: Pros and Cons

Of course, our graphic layout designer has both advantages and disadvantages. Before you decide whether to make your own layout, let's first reveal the whole truth about this editor:

The advantages of a free designer

Saving. This is perhaps the most obvious advantage, which follows from the name. Since the online editor works for free, you can save on paying a freelance designer or the salary of a full-time specialist who can do more important work in the free time.

Speed. In the time that you would spend filling out the brief and agreeing on the details with the designer, you will have time to make not one, but even several layouts.

Absence of “deaf telephone numbers”. There is a famous expression: “if you want the job done right, do it yourself.” With our designer, you don’t have to worry about being misunderstood, choosing the wrong shade, or getting the company name mixed up. You will definitely find a common language with yourself :).

No creative torment. There are several dozen templates at your disposal. Even if absolutely nothing comes to mind, you can use any of them and get high-quality results.

Disadvantages of the graphic editor:

Limited functionality. Since the designer is intended for use by people without special design education, it is difficult to call it a full-fledged tool. It allows you to perform basic actions with strictly defined types of printed products and is unlikely to be able to replace professional graphics programs.

Non-uniqueness. Our templates often look very attractive without additional processing. Therefore, they are often used in full, replacing only text and contact information. This speeds up the work, but increases the chance of seeing exactly the same image on someone else.

As you can see, although there are few shortcomings, they still exist. Therefore, it is better to know about them before you use our online constructor for free. So that there are no unnecessary misunderstandings later.

Where does the creation of a design layout begin?

Making a design layout begins with choosing the type of product you need. On our website you will find layout tools six most popular types of printing. For each of them in our database there are many templates that can be changed to your taste: change the color, add and remove details, insert a QR code, and so on and so forth.

For specialists who are ready to create a similar design layout for money, prices may vary from a thousand rubles to several tens of thousands. The amount is significant, and if you add to it the payment for work on edits, which many designers require, then for some customers the final cost will become completely unaffordable.

Printing house “Print” offers to design a layout absolutely free of charge. It can be based on one of several dozen ready-made templates, which are already in our library. We've tried to organize these templates by topic and application, so you can easily find the one that's right for you.

Lifehack: Some of our templates are located in several constructors at once (adjusted for size and format). So, if you need to maintain a single corporate style for business cards, leaflets and stickers, you can find a similar template in each of the designers and quickly create a complete set of printing.

In addition to other advantages of using our designer, the preparation of design layouts for printing in the “Print” printing house will be done automatically and you will spend money on it Extra time our employees won't have to. This means your order will go to print faster.(of course, if you decide to print your artwork right away rather than saving it for later).

Well, it seems that we have already talked about all the formalities, it’s time to start the most interesting part - layout design layout.

Types of design layouts

Depending on what kind of layout design you are going to order, the requirements for its design and style will differ. In our opinion, all layouts can be divided into the following categories:

Personal. Their main goal is to tell about their owner. At a minimum, this should be the First Name and Last Name, and at the maximum, a place for a photograph must be provided in the layout. We also have such templates.

Artistic- perhaps the most non-standard of all. Creating these in our constructor will be somewhat problematic. Still, a template is a template, and even with great effort it is impossible to turn it into a unique work of art. If you need something truly extraordinary, you should turn to a designer or even an illustrator.

Fortunately, Ekaterinburg and other talented cities have already generated quite a few design layouts. Some of them look quite specific and are not suitable for all tasks. Others, on the contrary, are very versatile and will look great almost always - no matter whether it is a personal or business layout. Therefore, you can be 100% sure that you will be able to find practically ready-made design layout for almost any occasion, without leaving our site. The cost of developing a design layout in this development will be zero.

Are there really designers who are willing to work for free? These also happen, but most likely at some point someone probably paid the designer for this work, but the “expiration date” for it has long expired and now everyone can use the template. But don't be afraid of accusations of plagiarism - our design layout software allows you to rework and change the layout very carefully. So that even the author himself will not understand that this design, the original layout, was created on the basis of his work.

Making an advertising design layout

The design of an advertising layout requires special attention from the creator, because it is designed to effectively promote a product or service. This means it must be original, attractive, informative, selling and not too expensive. After all, his main goal is increase company profits, and not sell at a loss. Since our designer works for free, the cost of your advertising will be lower than it could be. All that remains is to think through the design and it’s done.

Development print design V in this case requires not only bright creative ideas, but also meaningfulness.

To ensure that all your advertising investments pay off, try to name the main goals of your future printing products before you open the layout editor. Formulate, or even better, write on paper - what do you expect from this advertisement, how to respond to it people must react, think over the most effective scenario for you (should people take promotional products with them, store them, or immediately exchange them for goods, etc.). Even the personality of the promoters who will be handing out your advertisements can influence the future layout. Don't be afraid to take your time at this stage. In the future, you will easily catch up with it, because the more thoughtful your plan is, the less thought will be required in the process of its implementation.

It can be said that graphic design layouts for advertising products should be as utilitarian as possible, performing certain tasks, and not the embodiment of the author’s creative plans without regard to practicality. This is the only way you can consider your advertising campaign effective.

Layout design lesson

If until now you thought that make your own layout design very difficult, we hasten to assure you otherwise. We understand perfectly well how difficult it is to clean slate master design skills, understand all the intricacies and subtleties of layout, and at the same time you still need to somehow manage to continue doing your direct work, take care of your family, and relax. We wanted to free you from unnecessary worries, so we tried to simplify our editor as much as possible.

Now, when creating design layouts online, you don’t have to worry about and try to understand such highly specialized categories as indents, tolerances, formats, and so on. We have already taken into account all the complex requirements for design layouts from the very beginning. Forget about them once and for all! All you have to do is open our free editor layouts and begin the most enjoyable part of development - thinking through the details. Let me give you some simple but very useful tips.

Let's take an example from experienced layout designers:

Try designing printing layouts in several ways. You have an endless number of attempts to create the perfect layout. So why stop at first? It would be optimal to make about three to five design layout options and conduct an impromptu focus group among colleagues and specialists - which one is better. An outside glance, by the way, will help you get rid of possible typos and shortcomings in time. After all, even the most best eyes tend to become blurred and not notice obvious shortcomings.

WITH technical characteristics, which our program uses, preparing the design layout for printing will go unnoticed by you. Therefore, you should not take the image beyond the safety lines we have indicated unless you are 100% sure that you are doing it correctly.

If possible, do not send the design to print immediately after you make it. Best to take another look finished work in the morning, or at least switch for a few hours and do something else. This way you can see your layout with fresh eyes. Most likely, you will want to make some additional edits.

Subject to these simple tips you don't have to blush for your work. We think that your friends will ask for the contact information of the cool designer who made these excellent layouts for you. And you can casually answer: yes, I drew it myself, “on my knee.” A wonderful prospect, isn't it?

How the best design layouts come about

Many people mistakenly believe that a good layout is a beautiful layout. Or one that they paid a lot for. Or one that was designed by a very cool designer. All this is very far from the truth. The most important quality is efficiency. Ask yourself: Does my layout achieve its intended goals? And if you answer “yes” - congratulations! You did a good job.

How do you know if you can develop a layout?

We have already repeated more than once, and you probably remember, that the methods of creating a design layout may differ depending on the goals, financial capabilities, level of complexity and other conditions. If you need a design layout, first analyze what it should be like, and can you do everything you have in mind? Does it seem hopeless? Open our editor and try it out. You don't have to take this activity very seriously. Rather, on the contrary, try to create something funny and amusing. For example, the business card of the famous Zhdun.

After just a few minutes of exercise, you will feel confident and understand that you don’t have to spend money on design development services. It is within your power to cope with this task without outside support.

Of course, it happens differently. You can be absolutely sure that you will easily master our constructor, but it turns out that it does not have the functions you need. In this case, it is better to first consult with our manager (suddenly you simply did not notice the right button or do not know how to use it). And if our specialist cannot help you, you will have to take a closer look at third-party designers.

The last pro:

Online editor layouts can make your life a lot easier, and the online layout editor is free and will also save you money. The employees of the printing house “Print” really like to do both. Therefore, we will be very glad if you appreciate our designer. Try using our constructor right now. We hope you will like it so much that the need to make layouts will never be your headache again, but will turn into another thing that you do with pleasure.

How to make a layout without flaws

We hasten to dissuade those who believe that it is more profitable and faster to buy a model than to make it yourself. In reality, creating layouts for money or for free makes little difference. You are equally likely to discover a masterpiece design online or get a pathetic hack for your hard-earned money.

Free layouts from the “Print” typography designer were once also created by professional designers. Moreover, their quality already confirmed by experts our printing house, and all technical requirements necessary for printing are strictly observed. And on the contrary, making layouts from a third-party designer can result in unforeseen problems.

Why does this happen?

The fact is that not all professional designers specialize in printing. Your contractor may be an incredibly talented and creative person, but not know the basic requirements for pre-press preparation. The layout he makes will be amazing with its original idea and perfection of details, but will be completely useless for the printing house. We can say that sometimes our simple graphics editor knows more about printing than an experienced designer with a higher education.

In addition, in order to complete the work efficiently, it is necessary to spend several years, either by a student who, by definition, does not have much experience; or a person, not only for training, but also for gaining experience. It is unlikely that you are ready to pay for fairly primitive work at the highest level. This means that someone who does not want to spend a lot of time and effort for its production in order to receive the minimum payment. There is a high probability that he will do the job “carelessly.”

That's why we highly recommend at least try to create a layout for free before turning to other specialists for help. If you still decide that this job is too tough for you, then use our tips to choose a good designer.

Signs of a good designer:

The designer must have experience working with printing. All printing houses have approximately the same requirements, so it will be enough if your hired specialist managed to develop at least a couple of layouts in the category that interests you.

The designer has his own portfolio, and he is not shy about showing it. Before trusting a specialist with your order, study his previous work. It's good if they are graphic images. It’s even better if he can show you their implementation in reality (the so-called “author’s copy”)

If the designer doesn’t even try to ask clarifying questions about what you would like, what your company does, what layouts you consider successful and which ones not so good, there is a chance that he doesn’t care at all about what the result will be. With this approach it is very difficult to do quality work.

We hope this information will help you make the right choice.

How to make a layout yourself

The online editor of printing layouts on our website is designed in such a way that people of different levels of education and with minimal design skills can handle it. Layout development occurs step by step, all the points that need to be completed in the process are clearly marked. So if you follow our tips, you can easily create a mockup online in minutes.

Note! To make it easier for you to make your own layouts, the diagrams are all standardized and brought to a single size and format. So you can easily replace the template right on the fly if you suddenly decide that another one more fully expresses your creative intent. In this case, the text already printed on the template will not be affected, even if most of it is entered. All that remains is to adjust its location - after all, graphic elements do not always match and can overlap the text.

We can say with complete confidence that the online printing layout designer that exists on our website is one of best editors this type. But if you suddenly have examples of even better developments, let us know. Perhaps we will take someone else's experience and make our construction set even more perfect.

If you still have any questions, you can look for answers to them on our website or contact us in the chat.

ContentsCreating website layouts: entertainment for the elite Developing a website layout: stages Method No. 1. Cutting a layout from a website template Method No. 2. Creating a website layout in almost Photoshop Method No. 3. Online mockup tool

To begin with, think about why did you decide to create a website layout yourself. This job requires versatile knowledge from a person in IT and design, analytical and creative thinking at the same time. And also some part of your time. Okay, there are 4 reasons why you might need this. If you have a different one, write in the comments, I’ll add it.

Creating website layouts: fun for the elite

Reason #1. Interest in developing website layouts

Are your interests very specific? We are here we don't judge anyone. Once upon a time it became interesting for us, and we started doing it! In addition, the thirst for knowledge is ours distinguishing feature. I appreciate your curiosity.

Reason #2. Website layout development as a way to earn money

If you want to become a web designer in the future, you have to start somewhere, namely from the elementary layout of the site page. Quick results motivates his work like nothing else. Fortunately, in this article I only suggest blitz ways to create a layout.

By the way, the work of a web designer is no joke. Here below I will simply leave a salary schedule depending on length of service (according to DOU data for May-June 2016). I'm not hinting at anything. Just hidden hunting.

Reason #3. Drawing up technical specifications for the development of a website layout for a designer

Often non-designers are faced with the need to show the layout of a website - sometimes just to illustrate your idea, but sometimes to reinforce technical specifications. Of course, this is not necessary and a competent designer will understand your idea and even do it better than you expect. However, if you know exactly what you want, it is better to show it rather than tell it.

The app is also convenient to use Coggle, which you can connect ToGoogleDrive.

I like Coggle because it's a mind map. always at hand, it is convenient to share with colleagues, and the colors of the interface elements are well chosen. Plus it works right button mouse, which allows you to customize the map well. I got this structure for home page site.

At the first stage of designing the layout, a mind-map of the site is created

Stage 2: Creating a website prototype

Next, you can immediately start drawing a website layout in Photoshop, but even if you make a layout out of idle curiosity, first you should draw a website prototype. In step-by-step development, prototyping is an integral step that strengthens the mental health of a web designer. When creating a prototype, it is planned key blocks of the future site(header, slider, buttons, contacts, material structure, etc.). This allows you to significantly save time at the stage of drawing the layout because you can see the approximate result and make changes painlessly.

Tired? Make life easier and order website development from KOLORO. We will take into account your wishes and you will get exactly what you wanted.

Creating a website prototype online

I typically use the two most popular online tools for website prototyping: Moqups and Mockflow. In both cases there is opportunity to create prototypes for free, but with limited functionality. Tariffs for the first site start at $13/month. (10 projects, 1 GB), and for the second - from $14/month. (unlimited number of projects + 25 GB in the cloud). Everyone also recommends Mockingbird. And I will recommend it, but only out of respect for Eminem, because here 3 projects will cost $12/month, and there are fewer free tools.

Now about my personal impressions. Moqups more convenient and intuitive even from the first visit. There are a lot of ready-made blocks and icons here - just what you need to quickly get through the prototyping stage. In addition, the elements are convenient center relative to the middle of the page or other elements. A little disturbing limitation 300 objects for a page in free mode - this may not be enough for a one-page website layout. It is possible to insert elements from the Bootstrap workframe. Mockflow allows you to do a little less, and you just need to figure it out in a couple of minutes and get used to to it, however, more disk space might attract someone.

Website prototypes in Moqups and Mockflow

How to prototype a future website?

Let's look at the example of Moqups how to create a page prototype with text for the blog.

Step 1. Add hat(text can be changed).

Step 2. Add block for the picture and inscription (article title). Using styles, you can conveniently change the size, font, and other text formatting.

Step 3. Add text and ask width columns. All blocks are conveniently centered relative to the middle of the page.

Step 4. The text should be broken up picture. And the column width is too large, 500 px would be better. Fortunately, you can quickly change it. A big plus: the selected elements are reduced relative to each other and my block with the picture has also become smaller.

Step 5. Add sidebar(side column), it will be simple here. Let's place a field for search and a block for subscriptions to the newsletter (with an attractive picture and a bright button).

Step 6. Let's say our article turned out to be this small. You can also add survey And rating articles. The result was a neat prototype of a blog page. Add other elements to your liking.

Prototyping allows see the scale of the page and make decisions regarding certain blocks. By the way, using these tools you can make prototypes for different devices. For example, if you try, you will get something like this. However, the prototype is usually limited to a black and white design.

Smartphone application prototype

Stage 3: Making a beautiful website layout: choosing a color

Depends on the successful choice of colors site perception And brand by users. I don’t recommend relying on your own strength - choosing the right shade can take hours. Therefore, I recommend using ready-made color palettes for the web. Google recently released a detailed guide on good colors for material design(web design trend). These colors work harmoniously and you can be sure of their attractiveness. Using Materialpalette, you can successfully select two colors - the main one and the accent, and also see how they will look in the interface. A little more color on Material Design Colors.

Have you presented the site? Have you made a prototype? Have you chosen your colors? Now you can move on to creating the layout itself. I offer you several ways.

Attention! There will be no advice here on how to make a website layout in Photoshop - this is a topic for a separate article, here are simpler methods.

Method number 1. Cutting a layout from a website template

or existing sites

This method is suitable for you if you want:

figure it out basic tools Photoshop;
find different references for your future website and put them together;
feel designer for a couple of hours;
demonstrate to a web designer or agency (for example, us:) the most detailed vision of the site;
reinforce TK for website development not only “here are the call buttons, and here is the separator and lead magnet.”

The advantages of this approach to layout development:

you can avoid common mistakes, having seen enough of quality sites;
you will understand what not to do to make it good;
web design performers will clearly imagine what you expect;
This very fast- in a few hours you will make layouts for all pages of the site.

Minuses:

you will never fully understand what web design is;
Some of the references you find cannot be implemented by the layout designer without changing other parts of the site.

How it's done

The simplest and quick way make a website layout - choose template for a specificCMS and remake it for yourself. Therefore, first you need to decide on a CMS, which will greatly simplify the development of the site. However, please note that the site design will be be limited those elements that are in the template. Of course, you can change the colors, but individual interface elements are already ready-made and you cannot change them.

If you do "stew" from different sites, don’t forget to write somewhere in your notebook with a pencil sources. This will simplify further design development and layout layout.

Website layouts for Wordpress

Most popular CMS- this is Wordpress. For example, you will find many modern templates for this CMS. For what? Website on a template speeds up the launch of the project significantly, however it will not be unique. Although, if you use original illustrations, images and a creative approach - even a template layout can be remade beyond recognition. The main advantage is that your website is guaranteed to be adaptive and generally beautiful in terms of display on different devices.

Browse through different templates and choose the one you like best. I did some more searching on Envato Market and found the Dalton template that I liked the most. By accessing the demo version of the template, you will immediately see the concept of a corporate website. By clicking on the menu you can see more in detail what functions the template has what they will look like different pages. It’s best to spend half an hour on this and really understand what’s in the template.

What's next? Selecting the size of the website layout, cutting and gluing

When you are already comfortable with the template, you can start editing it. slicing. Great if your screen resolution 1920 px or more - this will allow you to simply take screenshots of parts of the site and combine them in the editor. Working with the layout begins with the header, then - various blocks (body), and at the end - the footer.

You will need:

comfortable tool to take a snapshot of a selected area(screen capture tool), I use Lightshot - it offers to save the image as separate file or copies it to the clipboard;
Photoshop- for gluing cut parts of images.

Stages of creating a layout for a website based on a template

Step 1. Select the width of the site layout

Decide which page you will do first. Don't start with the main one - it's better to leave it for last, because... this is the most important page of the site and first it’s better to fill your hand. In the example, I will make an “About Us” page - here it will be interesting information about the company and its employees. I already have website prototype, so I know what I'm doing. By the way, how's your prototype doing?

Open Photoshop and set the site layout width 1920 px. This will be enough to see how the site will look in the browser. If your resolution is lower, set it to the width that your monitor allows. Don't worry about the height yet - it's hard to guess and you'll still have to stretch/contract the area.

Step 2. We continue creating a website layout in Photoshop

Select one from the template hat, which you like. Cut out with her help convenient tool, open the document in Photoshop and insert there (Ctrl+V). Use the Move Tool (V) to place the header at the top. I like the header with the topbar, where there is contact information about the company.

Step 2.A. Make the right website layout right away

Now you have two ways - change the text in the image or write accompanying text V text file. Which is more convenient? It all depends on your goals. On personal experience I can say that it is better to do this in the layout, right away choosing the font and sizes. This will be safer and will be WYSIWYG in action (What You See Is What You Get, “what you see is what you get”).

Step 3. Let's go to success

Fill mine layout different blocks and edit them according to your needs. On at this stage You don't have to play with colors if you don't have Photoshop skills. To increase the height of the layout, use the tool "Frame"(WITH).

What happened

After a couple of minutes of thinking, cutting and gluing the pieces I liked the most, I got it structured page layout"About Us"

What you shouldn't forget

Call every layer with block adequately, according to what is there. Otherwise, you will be completely lost.
When choosing a font you need to choose different size for headers and body text. In this case, it is better to be guided by the Google Fonts web font library. Don't forget to filter out Cyrillic fonts.

Method number 2. Creating a website layout in Photoshop is almost

To you a suitable method No. 2 if:

you NoPhotoshop(conscience does not allow or there is no disk space) or you have not yet learned how to use it;
You want get acquainted withHTML code andCSS styles without interference with markings;
you need an interactive website layout.

I recommend it's gorgeous free tool for creating Macaw layouts. To work with the program you need it download and install- it's a matter of a couple of minutes. In the program you can visual mode practically layout the layout, because you can immediately publish it and see the HTML code and CSS. A little more detail about how the program works. Macaw has a significant drawback - it creates non-responsive web page. How to deal with this? Skills will be needed here layout designer to connect the framework (for example, if you are making a site layout for Bootstrap). However, if you just need to show working layout for colleagues - Macaw is perfect.

It doesn't look like that responsive template on different devices. I want to cry

To get started, launch the program on your computer. We present to your attention blank document with a page width of 1200 px with a grid site layout. By default, there are between columns indentation(padding), so there will be space between the created elements. All you have to do is draw within columns, because if you go beyond them, the blocks will appear under each other. So keep an eye on them.

You can independently set the width of the columns, their number and the distance between them. If you want to elements stuck to each other, set the column width to 100% and remove the padding between them. Why do you need this mesh? At HTML layout site layout will be It's easier to make a responsive template, because modern frameworks use a 12-column grid.

You can change the width of the work area by dragging it on the right, or by setting the size yourself

What's next? Layout

Set up your workspace the way you want and let's get to work. I will be creating the same page that I cut from the Dalton template.

Step 1.

First you need to create hat. It will be container with a height of 100 px and a bottom border of 1 px thickness.

Inside another container there will be a logo, and inside the next one there will be a menu. For individual elements no need to create menu separate blocks, it is enough to set an acceptable distance between words (word spacing).

Step 2

With the finished header, you can proceed to the remaining blocks. In the next block I will have background which is necessary download separately.

Step 3. Create an interactive website layout

I continue to drag blocks and insert text into them. I create a button using a special tool “ Button"(logic!). Macaw allows you to create an interactive layout with different button states and the ability to switch between pages.

Please note the following highlighted items. They help you switch between different blocks and organize them. For example, the text must be in a specific container, and not just hang around.

If you press File ->Publish, you will receive a ready-made page in which you can view the HTML code and CSS in different tabs. This is very convenient if you want to see what the markup looks like.

What happened

It turned out something like this. Here for comparison, left glued pieces of the edited template, on right- layout created in Macaw. A big plus of the program is that you can insert buttons, add links to them, create different pages and navigate between them. Just don't forget about container hierarchy and don't get lost in them.

Features of this method of creating a website layout:

to understand subtleties of work programs, you need to spend extra time;
even when you have already delved into the program, it is still sometimes not clear why it behaves this way and not otherwise;
you can forget about adaptability if you don’t finish it yourself;
really convenient to create a layout and even understand the layout a little - you can see how the elements interact and what the structure is in general;
things like “width: 16.6666666666%” may appear in styles, which will have to be fixed; you just need to understand that this is WYSIWG, and nothing more.

Method No. 3. Online mockup tool

If you are looking for an option on how to create site layout in the application with the most simple and intuitive interface, I prepared this method especially for you.

Convenient tool for creating infographics, which I have been using for a long time - the Creately service. There are dozens and hundreds of components to create UI design under different devices(more for mobile phones). You will definitely like it, I will show you some of them.

Still here convenient to edit elements, add text (and even make buttons with links!). In general, in just a couple of minutes I already got the same thing as in Macaw, only more careful. However, such a layout cannot be made highly interactive. There will be no steps to this method because... The service is well intuitive. On the screen I tried to display as much as possible service capabilities.

Features of the Creately service

That's all. These were the methods that I came to at one or another stage of creative development. If you find this material useful, we are happy.

P.S. This article is for informational purposes only and will not allow you to become a web designer. To obtain serious knowledge, you will have to do a lot more digging on the Internet.

Niranth; Translation: Slutskaya Svetlana

Creating attractive and functional web layouts is an integral part of a web designer's life. In this lesson Photoshop we will create a professional website layout from scratch. During the lesson you will learn some useful tricks when creating a design.

Lesson Resources:

Icon Set (wefunction.com)
Alternative icon set
Twitter icon (iconeden.com)
Font Bebas (dafont.com)

Step 1. Mockup

Before we start creating a website layout, we need to create a sketch plan of the future layout, which will show its functionality and approximate appearance.

Step 2. Create a document.

We will create a website layout that is 960 pixels wide. To do this, create a new document with a size of 1200x1500 pixels. Resolution 72 pixels.

Since the site layout will be 960 pixels wide, we need to define this area by adding guides. Select the entire document ( Ctrl+A).

Go to menu Select - Transform Selection(Select > Transform Selection). In the properties bar at the top of the screen, set the width to 960 pixels. This will be the working area of the layout.

Set the guides exactly along the boundaries of the selection.

We need to create a margin between the edges of the layout work area and the content area that we will add later. With the document actively selected, go to the menu again Selection - Transform Selection(Select > Transform Selection). Reduce the width of the selection to 920 pixels. This means there will be 20 pixels of padding on each side of the layout, for a total of 40 pixels.

Set guidelines along the new selection:

Step 3. Create the site header.

Let's move on to creating the site header. Create a 465px high selection at the top of the layout.

Fill the selection gray, and then use layer styles to apply colors and gradients.

Add a gradient fill to the header using a layer style Gradient overlay(Gradient Overlay). Create a gradient of two colors.

Now the header will look like this:

Now you need to add lighting to the header. Create a new layer ( Ctrl + Alt + Shift + N) and select a soft brush with a size of 600 pixels. Select the color #19535a and use the brush to click once on the top center of the header.

Create a 110 px selection on the header.

Press the key Delete to delete the selected part.

Flip the highlight layer vertically (Ctrl+T).

You need to make sure that the light spot on the cap is exactly in the center. To do this, make the layers with the header and highlight active and select the tool Moving(Move Tool) (V). On the property bar at the top of the screen, click the Align Horizontal Centers button.

Create a new layer (Shift + Ctrl + N) and draw with the tool Pencil(Pencil Tool) a point, 1 pixel in size. For drawing use color #01bfd2.

Let's smooth out the edges of this layer using a gradient mask. Select a tool Gradient(Gradient Tool) and create a gradient as shown below:

Apply a new layer with a mask and fill it with the gradient you just created.

Step 4. Create a pattern

Now let's create a simple pattern that we will add to the header. Tool Pencil(Pencil Tool) with a size of 2 pixels, draw two points, as shown in the figure. Turn off the visibility of the background layer for a while (click on the eye icon next to the background layer) and create a pattern (Editing - Define Pattern)(Edit > Define Pattern):

Create a new layer (Shift + Ctrl + N) and place it under the highlight layer. Select the area to which you want to apply the pattern and open the window Fill(Fill) (Shift + F5). Click OK.

After adding the texture, the header looks like this:

Do smooth transition from the pattern to the header: add a mask to the pattern layer and use a soft brush white(#ffffff) with opacity 60% go over the mask.

Result:

Step 5. Add a logo

Let's move on to adding a logo. Select a soft brush with the color #19535a and paint a spot.

Write the text:

Add a layer style to the logo layer Shadow(Drop Shadow).

Step 6: Navigation

Add navigation text.

Draw a navigation button using the Rectangular Marquee Tool. Fill the selection with any color and reduce the Fill parameter to zero.

Add a style to the button layer Gradient overlay(Gradient Overlay).

Step 7: Content Slider

Create a selection of 580x295 pixels.

Fill the selection with any shade of gray.

Place an image. Clip it with the layer you created earlier.

Now let's add an effect to the slider. Create a new layer (Shift + Ctrl + N), select Brush(Brush Tool) with a diameter of 400 pixels. Open the Brush palette (F5) and set the parameters shown in the screenshot:

Select black color (#000000) and draw a spot:

Apply a filter to soften edges Gaussian blur(Gaussian Blur).

Select the bottom half of the shadow and delete (Delete).

Place the shadow layer above the slider:

Squeeze the shadow layer by the middle handle (Ctrl + T), and then center the shadow layer again: select both layers and click on the button in the properties panel Aligning centers horizontally(Align Horizontal Centers).

Duplicate the shadow layer (Ctrl + J) and place the duplicate on the bottom edge of the slider.

Draw buttons on the slider using the tool Rectangular marquee(Rectangular Marqee Tool ) . Fill the buttons with black (#000000).

Reduce the opacity of the button layer to 50%.

Add an arrow shape to your slider buttons:

At the bottom of the slider, draw a stripe and fill it with black (#000000).

Reduce the opacity of the stripe layer to 50%.

Add a description of your project to this bar:

Step 8. Add a greeting text

Write a greeting text:

Step 9. Finishing the site header

We are almost finished working on the site header. Add a subtle shadow using the tool Brush(Brush Tool).

Leave a 1 pixel gap between the shadow and the title.

Create a new layer below the header layer (Shift + Ctrl + N) and apply a gradient to it.

Step 10. Add buttons for the slider

Draw slide change buttons.

Add a layer style to one button Inner shadow(Inner Shadow), and then duplicate the button layer the required number of times (Ctrl + J).

Step 12. Create a content separator

Use the Pencil Tool and draw a light gray (#aaaaaa) line 1 pixel wide.

Add a mask to the line layer and use a gradient to create a smooth transition at the edges.

Step 13. Add Content

It's time to add areas for content. The content area will be divided into 3 equally spaced columns. There will be a 25 pixel indent between each column.