Creating a website design in Photoshope: getting to know the editor and its features
From the author: good afternoon, friends! Today we have a difficult and very voluminous topic in turn - creating a website design in Photoshope. In general, all that concerns the…

Continue reading →

Where to look for fresh website design ideas, or how to catch inspiration?
From the author: probably each of you had moments in life when there is no hint of creativity and inspiration? Especially when original ideas are expected from you. Especially when,…

Continue reading →

Creating a website design in Photoshope: getting to know the editor and its features
From the author: good afternoon, friends! Today we have a difficult and very voluminous topic in turn - creating a website design in Photoshope. In general, all that concerns the…

Continue reading →

Creating a website design in Photoshope: getting to know the editor and its features

From the author: good afternoon, friends! Today we have a difficult and very voluminous topic in turn – creating a website design in Photoshope. In general, all that concerns the creation of working website layouts is practical lessons, and there is very little information on the Internet about this. There are many craftsmen, a lot of advertising and paid courses, webinars … but, in fact, no one wants to share secrets and subtleties for free. Like, try, torment, and make sure that “without me” you can not cope.

In this article I will try to answer the most common questions, to highlight, so to speak, the general direction. I am sure my advice will come in handy!

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

The site’s 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. A picture can be general, or it can give enough detail about all the structural content of a site, navigation, and even information content.

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

Web design. Fast start

Learn the course and learn how to create a website design and prototype in Figma

Learn more
hat;

menu location;

navigation;

color spectrum;

fonts, etc.

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

But the 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 layout development?
Customers do not always come across creative people, not everyone can finally explain what they want, and how it should look. The task of a web designer is to ask smart questions and get smart answers! The smarter you ask, the less you will redo 🙂

As I suggest approaching website design development in photoshop, literally in steps.

Item number times. The layout should be drawn on paper. Use the common graphic forms – squares, circles, rectangles to place the header, main menu, articles, photos, sections, sidebars, advertisements. 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, in comparison, everything is better known. Some options can be categorically rejected, this is also good, a negative result is also a result. We move on.

Point two. The paper version in pencil is agreed, you can go to the color scheme. Again, you can get by with the drawings, but more professionally will already work in graphic programs. It is possible in flat, not fundamentally.

Point three. In order to make a really high-quality design layout, do not hesitate to go to the resources of competitors. Decided on a niche and the main key requests, we hammer them in Google or Yandex.

We are interested in the maximum TOP-10. Analyze the functionality of these sites. Especially do not delve into the content, test the navigation. Become an ordinary user for a while, 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, pointers, then try to note how this result was achieved. And vice versa, fix yourself, what annoyed you, interfered, maybe the menu is crooked or a lot of banners, advertisements. Well, etc. Your task is to objectively evaluate the main competitors, take note of the advantages and eliminate obvious shortcomings.

Well, this, as you know, is a theory, we will take 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 Photoshope
Creating a website design in Photoshop, no matter primitive or mega cool, always starts with creating a document.

Document
The standard layout has a width of 960 pixels. Open the “Document” – New – set the dimensions. 1200 * 1500 pixels will be enough, leave a resolution of 72.

Web design. Fast start

Learn the course and learn how to create a website design and prototype in Figma

Learn more

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” – “Transform Selection / Transform selection.” In the properties, set the width value – 960 and fix the working area of ​​the layout. Guides leave at the borders of the selection.

Web Design Fundamentals
From the author: hello, dear newcomers in the field of web design and fiery greetings to experienced old-timers. Those who have been in this business for a long time probably…

...

Photoshop for Web Designer: Free Tools
From the author: Photoshop is still the favorite tool among web designers, and the right add-ons will make it even more powerful. To increase your productivity, save you time and…

...

Minimalistic website design: features, advantages and disadvantages
From the author: any business, and hence web design, should focus on customer needs. To provide the best service, you need to clearly understand what users and, concurrently, customers of…

...

Web Design Rules Every Professional Should Know
From the author: hello, dear readers. There are a number of specific standards that every professional web designer adheres to while working. Especially for you, I have selected the 10…

...