How to design a web page. DIY interior design: your own designer. Do you need a unique design at all

Building a great website can seem like a daunting task, but if you keep the basic principles in mind, you will find the process interesting and entertaining. A good site should not only look decent! We'll give you the basics and basic principles to help you create sites that visitors will want to come back to over and over again.

Steps

Part 1

Finding your own design

Create your own website. If you're new to coding and web design but really want to create your own website, you have tons of options. You can write a simple website yourself by learning the basics of HTML and CSS. Just trust that the result of your work can look beautiful and professional!

We use a ready-made template. You can buy or search online for free ready-made website templates. This is already written code that you can simply use or adapt to your needs. There are quite a few proven developers of quality templates out there, one of them is Wix.

Hire a web designer. If you need a professionally made website and a flawlessly working website, perhaps the best option would be to hire a web designer. This, of course, will require some costs, but not as large as one might think. You can find an aspiring designer by posting an ad at your local technical college. Their experience will help you create a better and more professional website.

Part 2

Thinking over the main design ideas

1. Don't clutter up your site. It is desirable that everything works as quickly as possible and without problems. Keep the number of menu items to a minimum by making site navigation simple and straightforward, helping the site visitor.

   Use a friendly user interface. By placing site elements such as the site title, logo, buttons, graphics, and text in the same place on every page, you can greatly simplify your site navigation.

   • Place your site title at the top of every page. No matter how many repetitive elements your site contains, make sure the top of the site is the same on all pages.
   • The design should be logical. Elements on each individual page should be arranged in a logical order, in descending order of importance; all pages should be similarly structured.

2. Stick to a consistent style. The design of the web page should give the site structural integrity, and its design - thematic harmony. Maintain the gamut of the site in two or three matching colors. Avoid using fonts of all sizes and colors. If you plan to use different fonts, the style in which they are used must be identical on every page of the site.

   • Use CSS to format your site and make it easier to manage site elements by eliminating the need to change the elements on each page individually.

3. Make your site as readable as possible. To make the text easy to read, break it up into small parts. Use subheadings and spacing to separate parts of your text from each other. Use bold or larger text to emphasize the structure and importance of the text.

   • Pay attention to the formatting of the text. Don't make the font too small and increase the letter spacing to make large blocks of text more readable. Long text can be difficult to read, so break it up into paragraphs.

4. Create a website in a universal format. Use standard HTML and avoid using tags, functions and plugins that are only supported by a particular browser.

   • While most modern browsers can handle complex images with ease, your site will run faster if you optimize images for the web and keep them small. Balance your commitment to quality and speed.

5. Test your website. Make sure all links are working and images are displayed correctly.

   • It is advisable to conduct a small test of "usability" (convenience for the user): provide access to the site to representatives of your target audience to test the clarity and ease of use of the site design, and get feedback from test participants.

Part 3

Website design for mobile devices

1. Consider mobile browsing. Nowadays, Internet access is more and more carried out from mobile devices. If you want to attract and retain visitors to your site, you must design your site to look good and be easy to use on mobile devices. The best option is to create a separate site for this purpose, but there are other ways as well.

   • Check out examples of mobile sites. Often by inserting the letter "m." instead of "www" in the site's web address, you will be taken to the mobile version of the site. You can do something similar.

2. Don't make the site too complicated. Your website design should be simple and to the point. Complex websites with flashing banners are a thing of the past. Users like simple sites. And this means: simple design, the minimum number of columns, the minimum amount of text that must be read to find the necessary information on the site.

   Use a responsive layout. Responsive layout is a way of coding a website in which it adjusts to the size of the screen it is displayed on (instead of fixed sizes). To achieve this effect, the most often used setting is the column width as a percentage, rather than specifying it in pixels, but there are more sophisticated solutions.

3. Disable background pictures when setting print options.
4. Use black text on a white background.
5. Remove menus and unnecessary images
1. You can always develop your own site template based on your own ideas about the site, but sometimes it's easier to buy a ready-made template.
2. Don't bore users with fanciful graphics. In the 90s it was fashionable to experiment with Flash animations, bright colors and backgrounds, and set music as soon as the page loads, but today it will just scare away visitors. Use a simple background contrasting with the color of the text.
3. You can use CSS (Nested Style Sheets) to set the spacing between paragraphs as needed.
4. For visually impaired visitors, you can use video and audio with captions, indicating their availability. Tables are an effective way to convey information, but visually impaired users who use screen readers will not be able to listen to the information in the column sequence.

Warnings

• Avoid plagiarism and comply with copyright laws. Do not add any images or any other elements to the site without the permission of the author. Everything that you post on the site must be within the framework of ethics and law.

Dear friends, today I want to show you how you can make a website design in Photoshop.

The lesson turned out to be very large and I think it will be useful for you.

Photoshop tutorial how to make a website design

After studying this lesson, you will learn how to independently design a website in psd format, you will also learn how to work with shapes, rulers, guides, resize documents and much more.

We will do this design. I have Photoshop CS5 (English version, I don't like Russian versions of programs).

If for some reason you do not want to study the lesson and just want to download site design in psd format —

If you are interested in learning how to make such designs yourself, this lesson is for you.

To work with the design, we need the following files ( download files in one archive):

- background with butterflies (for the site header);
- fonts;
- a picture with girls;
- pictures for the slider;
- icons of social services;
- pictures for news;
- mailing picture;
- a picture of the counter.

Before starting work, let's divide our design into components:

1. Background and background for the site;
2. Header of the site (consists of a logo and text, a thematic picture, background and the main navigation menu)
3. Slider, in common parlance, a carousel;
4. Site search;
5. Main content (news itself);
6. Sidebar - sidebar (latest news block, social services block, subscription block, voting block)
7. Pager - page-by-page navigation on the site;
8. Footer - the lower part of the site.

Let's start creating our design in Photoshop.

Setting up photoshop

1. Open Photoshop and create a new document File → New (File -\u003e New or CTRL + N- in parentheses, along with the translation, I will indicate abbreviations - in other words, "hot" keys - if such an action occurs again in the lesson, I will use only hotkeys that save time in the Photoshop program).

In the window, I indicated the following parameters:

2. Before starting work, let's make some settings for Photoshop:

- set the default foreground / background color in Photoshop (black / white), for this click D on the keyboard, you can also change colors in places using the key X (there are also corresponding buttons at the bottom of the toolbar).

- check the box Auto-Select (Automatically select) and in the drop-down menu select Layer (Layers) - this setting allows you to select any layer by clicking on it.

- display the palette History (Story) let's go Windows → History - using this palette, you can undo previous actions made in Photoshop (hot keys also work Ctrl + Zand Ctrl + Alt + Z.

- turn on the ruler for the document, go Views → Rules (View → Rulers or CTRL + R) a horizontal and vertical ruler should appear.

Immediately make sure that the data on the ruler is displayed in pixels. To do this, double-click on the scale with the ruler itself and select the following parameters:

If you are just getting started with Photoshop, guides will help you when creating / drawing objects in Photoshop.

Creating a background and substrate for the site

3. Open the file with the background File → Open (File -\u003e Open or CTRL + O, file fon.jpg from the archive). Select our document completely - click CTRL + A... We make a background in Photoshop from our picture, go to the tab Edit → Define Patter (Edit → Determine the pattern), write the name (I wrote pattern).

4. Go to our main document, go Edit → Fill(Edit → Fill, SHIFT + F5), in the window select Pattern, then select the icon with our pattern and click OK (fill our background with the created pattern).

5. Now let's create a white background for our design. Create a new layer, let's go Layer → New → Layer (Layer → New → Layer). We give it any name and click OK... In a palette with layers ( Windows → Layers,Window → Layers, F7) a new layer should appear.

Now the guides will help us (we click on the ruler and drag the mouse to the right to make one guide, and then the second - by eye we do so that the distance to the left and right is approximately the same).

It is convenient to make a selection with guides (if you need an exact size of the area), but you can do without them (by eye).

After that we take the tool Rectangular Marque Tool (Rectangular selection, M

(click on the picture to view the original)

Fill our selection with any color and take the tool Paint bucket tool (Bucket, G) or just click Alt + Backspace... After that, click on the layer twice and get into the layer styles. I set these settings for Drop shadow (Cast shadow) - color chosen # 5F1338:

This completes the background and move on to creating a header for the site.

We make a header for the site

6. At the beginning, we will create a background for the header, from the archive I proposed we take the file batterfly.jpg, open it in photoshop File → Open... Now we need to transfer the layer with the picture to our main document. To do this, select the tool Move Tool, select the layers with the icon, right-click and select the item Dublicate Layer (Layer copy).

In the window that appears, enter the name of the layer (I called it fon-header), just below in the field Document (Document) select the document in which you want to insert the layer, we have woman-design-blogohelp.psd and click OK.

The layer should fit exactly in the middle of the document.

Now let's move our layer to the very top, this can be done in 2 ways:

First way: take the tool Move Tool, click on our layer with butterflies and without releasing the mouse button, press the key Shift (so that the layer moves evenly upwards) and after that we drag the mouse up and in the right place we will arrange our layer.

Second way: select the layer with butterflies and the background layer in the palette Layers (F7)

After that, in the element settings Move Tool , select the icon Align top edges (Align Objects to Top):

As a result, we got:

(click on the picture to view the original)

I deliberately made the background with butterflies larger than the white background, now I will tell you how to remove the extra edges on the left and right. Now select our layer with butterflies with the mouse and take the tool Rectangular Marque Tool (Rectangular selection, M) and draw a rectangular area - selecting our unnecessary piece. After you have drawn an area, you can move it with the Up, Down, Right, Left keys.

Then just click Delete and delete the part of the layer we don't need. We do it according to the anology with the right slice of the layer. After that for the layer fon-headerwithout removing the selection from the layer, set it Opacity (Opacity) in 20% .

7. Now let's do some darkening at the top of the header. Create a new layer - Shift + Ctrl + N... We give it any name (I have shadow-top) and click OK.

After that, without removing the selection from the layer shadow-top push Ctrl and without releasing it, click on the layer icon fon-header.

(click on the picture to view the original)

After that fill the layer with any color - Alt + Backspace and go to the layer properties (double click on the layer). Unselect, click Ctrl + H... Next, select the property Gradient Overlay (Gradient fill) and set the following properties:

Now you need a layer with darkening ( shadow-top) place below the layer ( fon-header). We press F7, select the layer we need, grab it with the mouse and move it an order of magnitude lower (you can also change the order of layers using the keys Ctrl +) - lower the layer by an order of magnitude or Ctrl + ( - raise the layer by an order of magnitude).

We make a logo for the site

8. The background is ready now let's write our text and draw the logo. We take the tool Horizontal Type Tool (Horizontal text, T) and click on the header in the place where we plan to write the inscription - I have it WomanSite.ru, and write it. I set the settings for the inscription as follows:

If you don't have such a font on your computer, you can take it from my archive.

Using the tool Move Tool (V), put the text in the place I want.

We will do the same with the text "Site.ru", only set the color #797878 .

Let's add a stroke and shadow to our text. Double click on the layer and check the boxes opposite Drop shadow and Stroke (Stroke).

That's all with the text, go to the logo.

9. I want to introduce you to the basics of logo drawing in Photoshop. We will make such a logo (the logo is made in the form of curls, there are 7 of them in total), based on mine, which can be taken from the archive I have prepared.

Open the file in Photoshop logo.jpg, transfer the logo image to the main document and place it next to the text.

Set the logo layer Opacity (Opacity) - 25% and turn off the visibility of some layers - so that they do not interfere (remove the eye icon opposite the layer in the palette Layers, F7)

We will draw the logo (we can say draw) using paths, they are also called vector elements or vector inclusion in a raster image (if you are interested, you can read more about paths).

In addition to the Layers palette (F7), we also need a palette Path (Paths). To display it we go WIndows → Path(Window → Paths).

We take the tool Pen Tools(Feather, P), set it to the following settings:

after that, we begin to draw the first curl - once we click with the mouse in the place we need and we get the first knot of our future path or contour:

By analogy, we make the remaining 6 curls.

This completes the creation of the logo. Use layer styles to paint over each curl with a gradient. Click on the desired layer twice and in the layer settings Gradient Overlay (Gradient fill) fill it with the desired gradient.

In the end, I did it.

After that, merge all the layers with our paths, select all the layers in the Layers palette and merge them, click Ctrl + E.

For the resulting layer, apply the effects from the text layer. Select the layer with the text, right-click and in the list that opens, select Copy Layer Style... Select the layer with our logo and insert the effects, right-click and select from the menu Past Layer Style.

10. Now let's create a horizontal text menu. We need a tool Raunded Rectangle Tool()

(click on the picture to view the original)

Now let's write our text on top, with the same tool Horizontal Type Tool #FFFFFF... I set the following settings:

In the end it turned out.

(click on the picture to view the original)

Now let's insert our thematic picture, open the file ladies.png, copy the layer with our picture into the main document and in the Layers palette transfer the layer with the picture below our menu. In the end, I got it, here is such a nice header for our site.

(click on the picture to view the original)

Making a slider for the site

11. Now let's design a slider for the site. Create a new layer Ctrl + Shift + N... With the help of the guides, we will determine the place for the slider. Next, we take the tool Rectangular Marque Tool (Rectangular selection, M) and draw a rectangular area.

(click on the picture to view the original)

Fill it with any color, then apply a gradient fill to this layer:

Let's write over the text "The best on the site".

12. Next, draw the background for our slider using the same tool Rectangular Marque Tool (Rectangular selection, M) and draw a rectangular area. Create a new layer Ctrl + Shift + N and fill it with any color (I have # FFD9DE).

13. The background is done, now we will make a matte over the background, for this we will reduce our selection by 4 pixels, go Select - Modify - Contact(Highlight-Change-Reduce).

Create a new layer Ctrl + Shift + N and fill it with white - #FFFFFF.

Remove our selection, click Ctrl + H.On the left we will have a large thematic picture with a description, and on the right there will be 4 small pictures with a description.

Pictures can be transformed using the command Edit-Free Transform Ctrl + T)

I prepared pictures (files slider-base-picture.jpg, slider-picture1.jpg, slider-picture2.jpg, slider-picture3.jpg, slider-picture4.jpg), open them in Photoshop and transfer them to our main document. We arrange it as we need it, I did it.

14. Create a background for the main picture - create a new layer Ctrl + Shift + N, draw a rectangular selection and fill it with color # e15c6c... For this layer, set Opacity(Opacity), set to 90%.

We write our text on top of it.

After that, next to 4 pictures, we will also write the desired text.

That's all with the slider, go to the next item - Site Search.

We make the site search block design

15. Create a new layer Ctrl + Shift + N... Draw a rectangular area just below the slider and fill # ccf8aa.

16. On top we write our text "Site search:", then take the tool Raunded Rectangle Tool(), set the rounding angle to 5 pixels and draw a search form. On top of the form, write the text "Enter a word or phrase ...", after that we make a button to search.

Same tool Raunded Rectangle Tool() draw our button and on top of our text "Find".

In the end, I did it.

We make a block with news

17. Now let's move on to drawing the news itself on the site. The background of the block will be done using paths. We take the tool Rectangle Tooland draw a rectangular area. This area can be transformed using the command Edit-Free Transform (Edit - Free Transform, Ctrl + T).

Now let's write the text on top - the headline for the first news, all with the same tool Horizontal Type Tool (Horizontal text), I chose white # b14757... I set the following settings:

18. Next, open the pictures I have previously prepared for news (files news-picture1.jpg, news-picture2.jpg, news-picture3.jpg, news-picture4.jpg, news-picture5.jpg). Take the first one and place it at the bottom under the heading.

19. After that, write the text to the right of the picture. With the same tool Horizontal Type Tool (Horizontal text), I chose black #000000 ... Only now we do not just click the tool, but click and drag to the right without releasing the mouse.

20. A little below we will make a dividing strip. The strip will appear as a 1-pixel dashed line. Create a new layer Shift + Ctrl + N... We take the tool Pencil Tool (Pencil). I chose the color for painting: # c8c8c8... Now let's set up our pencil, click F5 and set the following settings:

And after that we draw our dividing line (with the pressed key Shift).

21. After that, by analogy, we make our other 4 news.

Making a pager design

22. Now let's make a Pager - page-by-page navigation of the site. We take the tool Rectangle Tooland draw a rectangular shape. To make the shape square, draw it together with the pressed key Shift... You can also transform the shape using the command Edit-Free Transform (Edit - Free Transform, Ctrl + T).

After that we will write our text.

Making a sidebar

23. We have left to do Sidebar (website sidebar design) and Footer (site bottom design).

We begin to draw the first block "Popular on the site", take the tool Rectangle Tooland draw a rectangular shape.

For this layer, apply the effects Color overlay (Background fill) and Stroke (Stroke).

24. Let's make a cap for the block, take the tool Rectangular Marque Tool (Rectangular selection, M) and draw a rectangular area. Next, reduce our selection by 1 pixel, go Select - Modify - Contact(Highlight-Change-Reduce). And put one in the window and click OK.

Create a new layer Ctrl + Shift + N and fill it with any color.

Apply the effect to the block background layer Color overlay (fill with color) color and Stroke (stroke) with color # FFC486.

25. We write the text of our popular news.

Next to each news we will make an icon-marker, open my prepared file marker.png file_name.jpg, copy the marker layer into our main document and the tool Move Tool we place our marker next to the name of the news, then copy ( Ctrl + J) this layer 4 times and place it in the places we need.

26. Let's move on to the next block with social buttons. The block is made by analogy with the previous one, only for the blog header we use such a gradient. We write the text "Join us at:".

and for the background such effects: white fill and color stroke # 95d9ee.

We take the icons from my prepared archive: twitter.png, facebook.png, vkontakte.png.

We insert icons into our document and place them in our block. Below we make a text for social networks.

27. Next, draw the subscription block. We make a background for the block, we make a header for the block, write the text, take the picture from the archive the name of the picture subscribe.jpg, we make a subscription form and a "Subscribe" button (we already did the form when we drew the Site Search block) and place it as in the picture.

That's all with the blocks, let's move on to creating the bottom part of the site - Footer.

How to draw a website footer

29. Create a new layer. At the very bottom of the site, draw a rectangular selection with the tool Rectangular Marque Tool (Rectangular selection, M), fill it with any color. Next, give this layer a gradient fill.

After that we will make a dividing strip (between the footer and the pager). Fill it with a gradient fill too.

(click on the picture to view the original)

It turned out like this.

(click on the picture to view the original)

31. Let's make a separator strip just below. Zoom in below the text menu with a magnifying glass. Create a new layer, take the tool Pencil Tool (Pencil). Set the brush to 1 pixel, use the color # f2cbcf and draw a line. Draw another line under it with color. # ffe4e6.

(click on the picture to view the original)

In the end, I got it

(click on the picture to view the original)

Below the text menu we will place the counter (the picture can be taken from the archive - file counter.jpg) and a little to the right we will write our copyright.

(click on the picture to view the original)

That's all, as I managed to solve the question -.

(click on the picture to view the original)

If you have any questions, ask them in the comments, I will be happy to answer them.

Let's explore this interesting and mysterious world of Adobe Photoshop together.

You know what Photoshop is, then creating a website layout will not be a problem for you. Generally speaking about how to make a website design in Photoshop, then you only need:

1. Create a new document.
2. Add background.
3. Add pictures.
4. Customize standard buttons.
5. Fill blocks with text content.
6. Assess the result.

Step 1

Let's start from the very beginning. Just start Photoshop and create a new document (CTRL + N) with the parameters shown in the screenshot below.

Step 2

Now you must add a suitable pattern to your background.

Layer Style-\u003e Blending options-\u003e Pattern Overlay.

Step 3

Do you want to create stunning designs? Then use a grid structure for design. Place the grid structure in your site design at 60px and 20px spacing.

Step 4

So ... now it's time to create a menu for the future site. Use a tool Rounded Rectangle to create it (radius - 3 px). Let's take the width for the menu - 940 px, and the height - 34 px.

To make this menu more attractive, go to Blending Options-\u003e Drop Shadow... Use the settings that you can see in the screenshots:

Blending options-\u003e Inner Shadow

Color # 6bafff is selected for the menu.

Step 5

Let's add some text to our menu. Use a tool for this Horizontal Type Tool... You can create your design with any font you like. The example used the font Aller... Size 14px.

Step 6

Result:

Step 7

Every decent site has a search form. Use the tool Rounded Rectangle(radius - 3px) to create a search form with the following parameters: 124px and 26px.

Add an inner shadow: Blending Options-\u003e Inner Shadow.

Create one 41px and 32px rectangle.

Blending Options-\u003e Drop Shadow

Blending Options-\u003e Inner Shadow

Blending Options-\u003e Color Overlay(color - # 6bafff)

Now it's time to add a familiar icon for the search function. Open up Linecons Free-\u003e Vector Icons Pack and look for the search icon there.

And here's the result:

Step 8

Then we use the tool Rectangle(rounded) to create a square (hold down the Shift key) with a size of 16 px.

Select tool Pen Tool and cut off half of that square.

Click Edit-\u003e Transform-\u003e Rotateto place this triangle on the left side of the rectangle. Select all layers of the button Facebookand merge them (Ctrl + E).

Blending Options-\u003e Inner Shadow:

Blending Options-\u003e Color Overlay (# c1cac5)

Now add the text Go toor the like on the button Facebook.

Try to design your logo Facebookfor this button. For example, you can use the letter F, and highlight it in blue (# 5a90e5).

Result:

Step 9

Create a new shape: width 940px, height 372px.

As always, add a shadow:

And the border: Blending Options-\u003e Stroke (20px, color # 6bafff).

Step 10

Add standard icons to your design. Don't forget to use a grid, the distance is 180px.

Step 11

Add some text. You must use the same font you used for the menu bar. Set the font size to 30px.

Play around with the blending settings: add a white drop shadow, color overlay (# 6aaefd) and an inner drop shadow to get the following result:

Step 12

Fill four columns (each 240 px wide) with text content. Better to add different text to each column.

Step 13

Step 14

Step 15

Step 16

Your next block can be a section on any topic. Use the tool Rounded Rectangle to create a square (hold down the Shift key). The radius is 3px, and the width and height are 138px.

Go to Blending options -\u003e Stroketo enter the settings: size-20px, color # 919392.

Copy and paste this element 5 times. Place these squares at 20px spacing and add photos of partners, employees, etc. to them.

Step 17

The footer of the site is just as important as the title. Ask yourself: "What do you want your visitors to do when they reach the bottom of the site page?" The answer you get will be a great starting point for designing your site's footer.

Add a gradient like # 3a8df1 - # 6bafff.

Step 18

Add three more blocks to the footer of your choice based on the answer to the above question. Use a font Arial regular for headers (30px) and add styles like in the screenshot below:

Use Arial Regular font for text in sections (12px).

Place some standard icons in one of the footer sections - RSS, Google Plus + or Twitter.

Well, that's all! Result:

If at first glance it seems that creating a website design on your own is not possible and only designers can do it, then you are mistaken. Using the well-known program Photoshop, creating a website design is not difficult. It is enough to complete only 18 steps, and you will receive your own unique design for your resource, while absolutely free!