8 web designer mistakes that make your hair stand on end

8 web designer mistakes that make your hair stand on end

As a rule, the designer and layout designer work in tandem, because they have a common goal. But there are times when, instead of friendship and mutual understanding, a real war arises.

If you’re a designer with a deep hatred of layout designers and want to know how to turn their lives into endless pain and suffering, read on.

  1. Do not use grids under any circumstances!

    Oh, your Bootstrap and vertical grids and guides. They have filled the entire planet and leave no room for creativity. Not! Let’s not simplify life so much and speed up the work of layout designers, let them torment themselves by measuring every element, button and padding. And if the element is 293 pixels wide and 241 pixels high, that’s great. Hmm, but what about the indentation? Not a problem! Left padding is 9 pixels, bottom padding is 12 pixels. Sumptuously!

    example layout without grid

  2. No uniformity

    What do we have here? A series of three homogeneous elements? Hmm, the best thing to do is to make them as different as possible. To begin with, they should by no means be of the same width (and occupy 4 columns of the grid, which we are not using). Well, in the second row, we will make the inner indentation on top more than the other two. Ideally!

    example of flagrant violation of the principle of uniformity

  3. Adaptability

    It is not necessary to draw separate layouts for the tablet and mobile versions (most often it really is not necessary, for us, layout designers, it is easier and faster to independently decide how to adapt this or that page for mobile devices, we are experienced), but if we do this, then shuffle elements so that the layout designer has to write additional elements to display only in the mobile version.

    sample layout for tablets

    sample layout for phones

    And let’s make the layout as complicated as possible! Let’s add curly backgrounds to the elements, place the elements at random, distort them beyond recognition, let the layout designer sit and think about how to adapt all this splendor to the most popular screen resolutions.

  4. Don’t attach fonts

    The list of “safe fonts” is not our topic. The meager Google Fonts, where you can find fonts and colors for every taste, also does not satisfy our needs and interferes with the flight of imagination. Allow the layout designer to embark on an exciting journey across the Internet in search of non-standard fonts, download them separately and convert them into all the necessary formats. And it doesn’t matter that after conversion and connection the font may not look the same as in the layout, you just need to look better.

    non-standard fonts

  5. Don’t use SVG

    We don’t need this SVG of yours! We have PNG. And if you do use it, then let it be “like” SVG! Special design magic turns real SVG into SVG with PNG inside easily and effortlessly:

    raster element tries to mimic vector

    Let’s copy the code, open it in the editor

    mimicry failed

  6. Style guide

    Do not attach or reflect in the layout how certain elements and their states should look like on hover / click / focus. The layout designer is not only able to choose the right colors himself, to apply shadows, but he also loves to do it. And if for some reason he cannot do it the first time, then the second time, when he receives the task with the client’s edits, he will select more carefully. And he will love this business even more.

    example of a competent style guide

  7. Pixel Perfect

    Pixel to the left, pixel to the right – shot! Together with elements 293 pixels wide and 241 pixels high and margins of 9 and 12 pixels, these two words will turn a day (or even a couple that will be spent on the layout of this splendor) into a well-known substance.

  8. Don’t study the layout

    You don’t need this, you are designers. Shower gel, English for beginners, layout for layout designers.

Now seriously

For layout designers

An application called Avocode helps us to partially solve the above-mentioned problems created by the designers. In him much it is easier to measure the width and height of elements, as well as padding. Avocode generates CSS properties for elements, including shadows, leading, and gradients.

It will show you what colors and fonts are used in the layout, as well as where those fonts can be found. For all layout designers who still use Photoshop to read the layout, I recommend regaining consciousness and downloading Avocode. And if you switch to Avocode right now, then immediately see how much more comfortable working with layouts will become for you.

For advanced layout designers using preprocessors, Avocode will also make life much easier by providing an opportunity to choose how to represent the generated properties: SASS, LESS, Stylus. In general, Avocode much simplifies and speeds up layout.

generated properties window in Avocode

I also recommend a browser extension called PerfectPixel to all layout designers. It allows you to overlay the layout on top of the page and dramatically reduces your layout time. Now you do not need to calculate leading and vertical indents, with the PerfectPixel extension, adjust them – in a matter of seconds!

perfect layout thanks to PerfectPixel

For designers

Please take note of the above. You strong make life easier for layout designers if you apply fonts to the layout, draw element states, use grids (including vertical ones), and if you forget such a phenomenon as Pixel Perfect. And most importantly, don’t complicate your layouts, think about how the site should look on mobile devices.

Now for the most important tip: learn the layout. Yes, you should know the basics of layout if you call yourself a web designer. You don’t need to know everything, learn the box model, item positioning, and how item inference loops work. Not knowing the basics of layout by web designers is the biggest mistake and the most common reason for the increase in the number of errors in layouts. And also the main reason for the decrease in the number of nerve cells in layout designers.

If there is little knowledge or experience, there are some questions, show it to the layout designers before agreeing on the layout with the client. Everyone will be better and no one will get hurt.

Fortunately, in our company, disagreements between the designer and the layout specialists are rare. Therefore, you can safely order services related to the design and placement of elements / pages on the site.

Leave a Reply

Your email address will not be published.