After we have passed the content material acceptance phase the graphs from the customers, we need to create a sketch file that shows the design we created, so that the customer can approve the design for the development phase. The professionals don’t start doing the development before the design files are fully ready, to avoid unnecessary lines of code. In the following article, we will show you how to create a sketch file for your home page, for this action, we will use Photoshop software, and of course, there is as many other software on the market that can be used instead.
Photoshop has developed an option to set up an artboard adapted to the worlds of web and digital, we will verify this and learn the correct sizes of the working document and determine the DPI. When we open a new document, we will select a web type, in such a file already embedded in the 72 dpi, which is why we don’t need to change the settings. We will select a file 1920 pixels width, And the height we’ll decide according to the sections we plan to build, when each desktop’s section height is between 750-1080 pixels, depending on how much we want it to cover the screen.
Every website should be responsive to all existing screens and browsers, so I will explain to you how do we make a file that’s already built as a responsive and adapted to the desktop’s designs, of course for mobile we’ll a version in itself, but if we build the sketch for the desktop correctly, the mobile version will be able to produce easily. We will use Photoshop’s guidelines to limit the content contained in a sketch.
The smallest screen size before moving to mobile resolution is 1280px when the largest screen is 1920px, That’s why we’re determined that the area between 1920 and 1280 will be an area with only a background with no texts and no images so that they don’t “break” on certain types of screens, so we use guide layout to create the correct format.
In the template I created I determined that 320 pixels on each side would actually be a content-free zone and I chose that footer and the header will have 200 pickles each of them in favor of the design and the width of the sides must be very precise while in matters of height it is possible to change freely because we are scrolling through the computer up and down.
So now that we have a template ready to work and we’ve finished marking the areas where we design the site, all we have left is to activate the design links and to express our creativity in the design phase and then in the development phase. When we get to design more pages we will only design the content area because the footer and the header are templates that are embedded on all pages of the site and therefore we will copy them as they are. Keep formatting correctly and notice that the texts are arranged within correct containers so that we won’t get strange angles on our site on small or large screens. After we’re done we’ll export all our designs to a jpeg file or we’ll put the PSD version into software that knows how to display PSD files like Zeplin, Invision, Figma, and more…
