How to Become a Pro Website Designer

11 min readMay 29, 2021

From developers and programmers to web designers. What you need to remember to call yourself a web designer. You can make up everything that you can think of and implement at the design stage. The question, however, is the time, money and convenience of expanding the result obtained and the adequacy of the rebuilding of blocks when adapting the page to different widths of the browser window

In order to minimize time, expense and maximize convenience you should understand a few things beforehand.

Understand the Project

A web designer is an engineer. The web designer comes up with “how to make the project best solve the assigned tasks” and simplifies it visually. If you do not know how to typeset at all (you have no idea how the page works, how the blocks behave), you are probably not a web designer yet. Drawing a layout without an idea of how the site will work is like designing a car without an understanding of its engine, control systems, operating conditions, the number and location of the driver’s limbs. Some tips:

A technically unfinished layout complicates the work of a developer: For agencies, this means an increase in development time.
Build components, not pages: Some projects will need expansion. It is much more reasonable to create new pages from components (blocks, elements) than to create duplicates of existing (or similar) elements.
Work together with a developer: Agree on terminology and work organization. One of the best strategies is BEM — a concept in which all participants operate with the concepts of Block, Element and Modifier. It is not necessary to use the full stack of BEM technologies, it is enough to have a style guide, a selector naming system and a component library.

Planning the Layout

The layout must be done in sRGB. Otherwise, the colors in the layout may differ from the layout. The layout should be the size in which it needs to be laid out. Dimensions (width is more important) are selected based on the specifics of the project and the target audience. For most projects, it makes sense to provide a mobile and desktop look and feel.

At the time of writing, for “mobile” it is reasonable to focus on the minimum size of 360 × 640 pixels, and for “desktop” ones, make a layout, the content width of which will comfortably fit into 1200 pixels (the height is usually less important, since it is much more variable). You can see up-to-date information on the prevalence of screen resolutions here.

Things to remember before planning the layout:

In layouts, only the normal blending mode is allowed (if the tool has layer blending modes) until there is cross-browser support for blending modes. And even when it does, the use of blend modes will need to be applied carefully, with an eye on the implementation in the web. This rule does not apply to illustrations consisting of many layers, which are planned to be combined into one image.
For PSD layouts, one page = one layout. Usually, these are quite large files, if you store everything on artboards in a single file, it can slow down. For simple AI layouts, it may be acceptable to place all artboard layouts in one file.
Hidden layers will not be laid out unless otherwise specified in the terms of reference. If you want to show that the layout has the necessary blocks, hidden by default, convey this information to the developer in any way possible.
For PSD layouts, keep the layer effects. Effects converted to layers take significantly longer to typeset.
For PSD layouts, forget about adjustment layers. Any “post-modifications” can seriously complicate the work of the developer.

Make a layout in Adobe Illustrator — attach all linked resources (pictures, fonts etc) and screenshots of the layout. If a raster image is used in the layout that is not written to the file (linked), the developer will not see it if it is not attached to the layout.

Creating a Style Guide

There should be a style guide in which all the necessary states of changing elements (interactive and simply changing) and typographic design are visible.

Have created a style guide — use it. There is nothing worse than discovering a “new” button, an atypical modular grid, or a “unique” font size. If you want to create a new block (which cannot be assembled from the existing ones) — start with the style guide. Think of “components” (blocks), do not produce entities (font and padding sizes, colors, stroke types, etc.) unnecessarily.

A style guide is a separate layout or a separate page in Figma. This is not a textual instruction on how to turn on / off the visibility of layers, options for layer composition. This is not an artboard included in any layout.

Things to include in a style guide:

For links, at least states are needed: “rest”, “hover”, “click” (the last two may coincide). For navigation links, you need the state “we are on this page”. For content links, you can specify the “link has been visited” state.
The buttons need states: “rest”, “hover”, “click”, “blocked”. Sometimes you still need the “busy” state (for example, this is how the process of sending a form can be shown).
For text fields of forms, states are needed: “rest”, “cursor in the field”, “blocked”. Usually, there is no point in drawing the “click” and “hover” states. Sometimes it is worth showing the status “filling error” or even “filled in correctly”.
For checkboxes and radio buttons, the following states are required: “checked”, “not checked”, “blocked”. It makes no sense to draw “click” and “hover” states.
For typography, at least the following sequence should be shown : Heading 1, Paragraph, Heading 2, Paragraph, Heading 3, Paragraph, Heading 4, Paragraph, Paragraph, Bulleted List, Paragraph, Numbered List, Block Quote, Paragraph, Table, Paragraph. It is important for the UI designer to see all the vertical distances (for this you need alternating paragraphs and two paragraphs in a row).

It’s good when text blocks have the same leading (line height) at different font sizes (on different viewports). If the font size on the “mobile” width is reduced (compared to the “desktop” width), it is better not to change the relative leading (140%, for example).

Ideally, a style guide serves as a library of blocks from which the entire interface is built. Once the prototype of the element (buttons, input fields, title etc) is made, and wherever it is needed, its clone is inserted. When the prototype changes, the element changes in all places where it is used.

Think about click blocks. Any element that is responsive to a user action (say, a click) must have some minimum area that is responsive to an action. For icon buttons, for example, the recommended click-block area is at least 32 × 32 pixels, regardless of the icon size (important for devices with a touch interface).

Using Modular Grids to Design

Use modular grids. This will make the result neater and, if you avoid stupid mistakes, will speed up the implementation of the layout in the layout. The Dumbest mistake: Creating a modular grid, not following it.

The border of the cells of the modular grid is the middle of the gap between the cells. The block cannot protrude beyond the middle of this gap — the left border of the block cannot go along the right border of the previous cell of the modular grid.

The ideal modular grid (like bootstrap grid) is 12 columns. Because 12 is divided into 2, 3, 4 and 6. To come up with your own (five- and eight-column) grids, you need to have really serious reasons, because an eight-column grid will not allow you to line up blocks of 3 in a row.

There can be white space between columns proportional to the column width. For example, blocks in a 12-column row can be distributed like this: 2-column block, 1-column “void”, 9-column block.

Indents to the right and left of the content area should not be done using grid columns. Imagine there is a 12-column modular grid and it lies within a rectangle (content area). On a large enough viewport width, you want to constrain the maximum width of the rectangle and align it horizontally to the center. In this case, it usually doesn’t make sense to leave the first and last columns blank just for indentation.

Creating Text & Font Rules

Firs of all, use legal fonts. There are tons of good freebies out there. For example, on Google Fonts. Some other things to remember:

Use proven fonts: Before using a rare font or special style, be sure to check how they are displayed in all browsers from the technical specifications on all operating systems. This is especially important on Windows and Linux. The most problematic browsers are IE (fortunately Microsoft discontinued it recently) and Firefox. For this, you can contact the developer.
Use 2 fonts at most: Try to use 2 fonts at most as it will help in improving the website speed.
Specify font sizes in whole numbers in pixels: Use whole number and not like 12.3px or 14.5px. Advisable to use pixel only. Leading is best specified in relative units. For PSD layouts, it is better to specify the leading in pixels.
Pick a few font sizes and stick to them: Example sizes: for headings 1, 2, 3 and 4 levels, content, accented (if not the same as any heading), reduced. Do not produce essences unnecessarily. The ideal situation is to use the visitor’s system fonts (no need to download font files, the page will appear faster).
Leading should not be less than the font size: Always remember: if there is more than one word in a text block, the number of lines is unpredictable.
Use of currency symbol: The currency symbol is found in many fonts. If you can’t find your currency symbol, draw a vector picture and give it to the developer in SVG format. Else, search it on flaticon and download the vector.

Use of Vector Graphics

Use vector graphics wherever possible. If certain conditions are met, vector graphics are more technologically advanced than raster ones: smaller file sizes, support “effects within the picture”, do not require retinization or accelerate it. Things to remember:

Create vector graphics in vector editors: For any shape (more complex than an anti-aliased rectangle or simple library shapes) use Adobe Illustrator, Inkscape, or similar software.
Don’t create vector graphics in Photoshop: Composite icons (more than one layer), drawn using vector shapes in Photoshop, almost never work out without serious distortion of the image.
Create vector graphics in separate files: Create any icons and illustrations in separate files (best of all — immediately in SVG files, one icon = one file). If you are not working in Figma and you provide such small files to the developer, his work will be much faster.
Draw vector shapes instead of brushing: Fills and shapes created by the brush turn out to be “dirty” — they have a lot of extra key points, which negatively affects the file size. Provide vector graphics in the same size as they are used in the layout.
Avoid creating multiple images: If the project has several sizes of one image, if possible, do not create multiple image files. For example, if icons resembling smiles are used, and you need 2–3 sizes, then it is best to limit yourself to one picture and change its size, and not draw 2–3 almost identical icons.
Avoid using adjustment layers: Do not add adjustment layers, masks, effects to vector images in PSD layouts. With a high probability, this will lead to the impossibility of using such vector graphics.
Hit the pixels: Align points in curves to a pixel grid if possible. Then the icons will not be soapy on low-resolution screens, moreover, they will shrink better. An icon in which straight horizontal and vertical lines do not fall within pixel boundaries looks blurry.
The artboard must be sized to fit: For different icons of the same size, it is permissible for the artboards to be of the same size (larger than the size of the figures). For example, the icons “home” and “back” are used, it is supposed to be used in navigation. It is permissible to place both icons on square plates of the same size with alignment in the middle.

Contour all lines with the specified width before exporting. If there is a curved line with the specified width and end styles, it is better to outline it to get a shape with zero stroke line width and fill. Otherwise, when compressing the dimensions or assembling the SVG sprite, problems may appear (open lines have a fill). Additional tips:

All layers of an icon that can be merged into a single shape must be merged. This allows the file size to be reduced (sometimes quite dramatically).
Remove everything unnecessary from vector images. If any shapes are not visible, they need to be removed, otherwise they will unnecessarily increase the file size.
Avoid overlapping effects and transformations. Convert everything to curves, apply transformations.
Avoid gradients and shadows. In some cases, this can impose restrictions on the use of vector graphics.
For filled shapes, do not use a stroke that is the same color as the fill. Stroke weight should be zero.

Do not combine layers with inserted vector graphics and elements drawn in the layout. If you inserted a vector picture into the layout and then “supplemented” it with some layout layers, it is much more difficult (or impossible) to use such a picture in vector format.

Responsive Graphics

Select 2–3 breakpoints (widths at which the rebuilding takes place) and create layouts for them. Typically, breakpoints are 360 (minimum), 768, 992, 1200, 1600 pixels (sometimes 576 pixels are used). You don’t need to draw all the widths. It is often better to show “mobile” (360), “tablet” (768) and “desktop” (1200 or 1440) options. Traditionally, we accept a certain minimum width (320 or 360), block transformations occur upon reaching the breakpoint. It is important to understand: by making the layout 768 wide, you showed how the layout looks from 768 to the next breakpoint upwards (say, 992).

Specify in the terms of reference how the design behaves at different breakpoints. By default, anything narrower than ≈1000 px. will be “rubber”.
Retinized bitmaps in the original must be 4 times larger in area than seen in the layout. For PSD layouts, it is best that they are not in Clipping Mask mode, but scaled Smart Objects. For Figma layouts, add images that are 2x wider and 2x taller (4x larger).
We can display different images (by proportions and by content in general) on different screen sizes using standard methods (picture with poly fill).
If you want to prepare raster graphics yourself — consult your graphic designer. General rules: transparency is needed — PNG (8–24 bits), transparency is not needed — JPEG (progressive, quality 60–80%).

What Other Things to Keep in Mind?

Animation can damage the project in some cases. Want to add animation effects? Consult the developer first. It is not enough just to find an example of implementation (or, much worse, a video or GIF with the desired animation), since the implementation of animation may require connecting a heavy library to the project, comparable in file size to the file of all styles used in the project. Remember:

Implementation of non-standard form elements increases the project time frame. This is especially true for non-standard drop-down lists (if you do not plan to use any ready-made solution).
Don’t draw vector icons in Sketch. Such icons in 90% of cases are technologically unsuitable for use in vector form.
Do not overlay semi-transparent layers on autoplaying video. A block with a semi-transparent background color, when placed on a block with a video playing, can degrade performance.

Things to Remember Before Delivering the Project

It is always suggested creating a basic checklist before you are passing the project to the developer. Some of the most common mistakes are:

Lack of layer structure: If layers are not laid out in correctly named folders, it slows down the development process.
Large parts of the PSD layout in smart objects: Creating smart objects do not make sense to save space, but they increase the access time to their components. This does not apply to linked smart objects when there are many layouts.
Change the color of objects or text using transparency: Bad, because technologically we try to avoid transparency — a lot of translucent objects can cause page performance issues.
Change the appearance of vector objects with Photoshop effects: This can make it impossible to use vector graphics.
The title of the text block and its content text in one text layer: A few extra clicks as developer will be spending time selecting the text first.
Locked folders and layers: If you really need to lock something, lock the folder, don’t lock individual layers — they become more difficult to get to.