10 useful tips on the implementation of Pixel Perfect design in Front-end development (for example, working with the Sketch editor)
Hi, Habr! I present to you the adapted translation of the article " 10 Useful Tips to Recreate Pixel Perfect Designs in Front-end " by Jeroen Dellaert.
Like any beginner developer, I often have to deal with problems that need to be addressed in networks. Faced with the concept of Pixel Perfect, I thought about how to implement it in the framework of the new standards (Flexbox, Grid). Fortunately, with the advent of editors such as Figma and Sketch, life for web developers has become a little easier. Rummaging through the internet, I found this article. In addition to the catchy title, there were several very useful tips that I used in my work at what subconscious level. I really hope that this adapted translation will benefit many seekers of answers.
Creating a working and beautiful design for most designers is an intense creative process. The whole essence of their work is the transfer of meaning through colors, typography, spaces and much more. The accuracy and care that is invested in the design must also be transferred to the design of the interface.
')
And the point is not only that the code reflects the design as accurately as possible, but also that it is neat. When I started my internship, I worked with the rest of the development team and studied techniques to think of the perfect pixel perfect code. Below are ten key findings from my learning process to recreate the design with the highest possible pixel accuracy in front-end design.
The first tip I can give is to try to figure out what can be easily imitated with the help of code, and that it will take too long to play. A container with a (simple) gradient background is easily recreated with CSS. Sketch even allows you to copy attributes. As for graphics, try to export small files as SVG files. Another advantage is that SVG is based on vectors, and you only need one file for different screen resolutions.
Do not complicate things more than you need! Go over your eyes on the layout before jumping right into the code editor and trying to break the elements into blocks. Sometimes it is useful to look, squinting to see what can / should be grouped. If you are lucky enough to work with pedantic designers, you can find out how they grouped the layers in Sketch. In general, you can follow the following rule: any group of layers in Sketch can probably best be represented by a container in HTML.
If you are exporting an illustration / image that consists of several elements, the easiest way is to export as one SVG / PNG. Although there is nothing wrong with this approach, still try to think outside the box and imagine the possibilities of animation of different parts of the illustration. To save time, you can export these layers separately from Sketch for later placement and animation in the code.
Sometimes in design you may encounter icons of different sizes. For example, if you have six paragraphs, each of which has its own icon next to the heading. Since some icons have, so to speak, heavier “weight”, designers may have intentionally reduced their size. On the other hand, they could enlarge a few icons that seemed too small. In any case, if you want to correctly place the icons next to each heading, using padding in CSS, this will require a lot of work. Instead, you can use the benefits of Sketch by using the trim tool (press the S key and then drag the trim icon around the icon). Take the largest icon and trim all subsequent icons to the same size, aligning the icons in the center. In other words, indent the exported image, not the CSS. Thus, you can assign each icon the same position in CSS.
Many designers use the opacity property for layers or groups of layers as a tool to control the contrast of this layer (or group) on any background. For example, think about small pieces of confetti on a dark background. Sometimes exported graphics or illustrations in the SVG format do not look identical when implemented in code due to the specific features of the browser. The way to fix this is not to try to control the transparency property of the graphics / illustration SVG in the code, but to export it from Sketch with the property already applied to it. This also leads to a decrease in the number of styles in CSS.
To make the design as adaptable as possible, avoid setting fixed heights and padding for containers. Instead, use only padding to create an adaptive and scalable element, because the text in the container can always increase. As a rule, setting a certain height is better suited for images. To check the distances between the top and bottom of the container and the element (s) in the container, consult the Sketch file.
Use features from Sketch to be more productive and accurate. Copy CSS styles from Sketch to make sure that you set the correct font size, line height, color, etc. After all, the designer set these properties for a reason. Also your friends in Sketch should be the cmd- and alt keys. To get the indents of the object, left-click on this element while holding down the CMD key.
Subsequently, use the mouse to hover over other objects, hold down the Alt / Option key to see the distance between these two elements. Play with alt + cmd to see the padding between objects in groups. If you cannot determine the distance between elements using the above method, feel free to draw a rectangle to see the padding between your object and the rectangle.
The design is mainly created with a grid of base units for a specific reason (often this is done for reasons of consistency and visual balance). If the indentation between elements is not accidentally divided into this basic unit of the grid, it is probably not intentional. For example, if the design is consistent with an 8px grid, and you see a margin of 199px in Sketch, it most likely implied 200px. Do not hesitate, just fix it.
With the introduction of Flexbox, aligning elements with CSS has become much easier. And the Flexbox is much more than, say, the distance in the navigation bar. Most alignment types can be created using Flexbox. The horizontal and vertical alignment of the text next to the graphic / image is one of those examples where the Flexbox is very convenient, since the alignment remains the same, even as the amount of text increases. And not to mention the properties of distance distribution (justify) and ordering (order) of content.
Finally, do not be afraid, except for creating the perfect pixel perfect page to use additional animation or transitions. If it fits the design, this is probably a good addition to the overall result. In addition, it makes the web page and design more lively for the user.
A small bonus tip that I would like to give relates to the content inside the image (imagine: a web application user interface element used on a website for marketing purposes for the same web application). Not only that the text in the image can cause a headache when it is scaled in the browser. The text inside the default image will match the type of backup font you selected. It also means that a copy inside the image can be displayed in Times New Roman, while the exported image in Sketch was designed with a certain serif font. An easy way to avoid such problems is to convert the text into a contour in Sketch. Thus, the text is converted into vector shapes, which are proportionally scaled with the rest of the objects.
Every pixel matters!
This way of thinking does not end with Sketch. We believe that the design version in the code should also reflect this. Be sure to dot all the “i”, carefully studying the indents, colors and distances between elements. Do not consider adding another design layer, and actively reflect on how animation can improve the usability of your application.
Like any beginner developer, I often have to deal with problems that need to be addressed in networks. Faced with the concept of Pixel Perfect, I thought about how to implement it in the framework of the new standards (Flexbox, Grid). Fortunately, with the advent of editors such as Figma and Sketch, life for web developers has become a little easier. Rummaging through the internet, I found this article. In addition to the catchy title, there were several very useful tips that I used in my work at what subconscious level. I really hope that this adapted translation will benefit many seekers of answers.
Creating a working and beautiful design for most designers is an intense creative process. The whole essence of their work is the transfer of meaning through colors, typography, spaces and much more. The accuracy and care that is invested in the design must also be transferred to the design of the interface.
')
And the point is not only that the code reflects the design as accurately as possible, but also that it is neat. When I started my internship, I worked with the rest of the development team and studied techniques to think of the perfect pixel perfect code. Below are ten key findings from my learning process to recreate the design with the highest possible pixel accuracy in front-end design.
1. Every kilobyte matters
The first tip I can give is to try to figure out what can be easily imitated with the help of code, and that it will take too long to play. A container with a (simple) gradient background is easily recreated with CSS. Sketch even allows you to copy attributes. As for graphics, try to export small files as SVG files. Another advantage is that SVG is based on vectors, and you only need one file for different screen resolutions.
2. Think in blocks
Do not complicate things more than you need! Go over your eyes on the layout before jumping right into the code editor and trying to break the elements into blocks. Sometimes it is useful to look, squinting to see what can / should be grouped. If you are lucky enough to work with pedantic designers, you can find out how they grouped the layers in Sketch. In general, you can follow the following rule: any group of layers in Sketch can probably best be represented by a container in HTML.
3. Be careful when exporting an image.
If you are exporting an illustration / image that consists of several elements, the easiest way is to export as one SVG / PNG. Although there is nothing wrong with this approach, still try to think outside the box and imagine the possibilities of animation of different parts of the illustration. To save time, you can export these layers separately from Sketch for later placement and animation in the code.
4. Export icons of the same size
Sometimes in design you may encounter icons of different sizes. For example, if you have six paragraphs, each of which has its own icon next to the heading. Since some icons have, so to speak, heavier “weight”, designers may have intentionally reduced their size. On the other hand, they could enlarge a few icons that seemed too small. In any case, if you want to correctly place the icons next to each heading, using padding in CSS, this will require a lot of work. Instead, you can use the benefits of Sketch by using the trim tool (press the S key and then drag the trim icon around the icon). Take the largest icon and trim all subsequent icons to the same size, aligning the icons in the center. In other words, indent the exported image, not the CSS. Thus, you can assign each icon the same position in CSS.
5. Colors in SVG
Many designers use the opacity property for layers or groups of layers as a tool to control the contrast of this layer (or group) on any background. For example, think about small pieces of confetti on a dark background. Sometimes exported graphics or illustrations in the SVG format do not look identical when implemented in code due to the specific features of the browser. The way to fix this is not to try to control the transparency property of the graphics / illustration SVG in the code, but to export it from Sketch with the property already applied to it. This also leads to a decrease in the number of styles in CSS.
6. Indents in containers instead of fixed height.
To make the design as adaptable as possible, avoid setting fixed heights and padding for containers. Instead, use only padding to create an adaptive and scalable element, because the text in the container can always increase. As a rule, setting a certain height is better suited for images. To check the distances between the top and bottom of the container and the element (s) in the container, consult the Sketch file.
7. From Sketch to CSS
Use features from Sketch to be more productive and accurate. Copy CSS styles from Sketch to make sure that you set the correct font size, line height, color, etc. After all, the designer set these properties for a reason. Also your friends in Sketch should be the cmd- and alt keys. To get the indents of the object, left-click on this element while holding down the CMD key.
Subsequently, use the mouse to hover over other objects, hold down the Alt / Option key to see the distance between these two elements. Play with alt + cmd to see the padding between objects in groups. If you cannot determine the distance between elements using the above method, feel free to draw a rectangle to see the padding between your object and the rectangle.
8. Respect the grid
The design is mainly created with a grid of base units for a specific reason (often this is done for reasons of consistency and visual balance). If the indentation between elements is not accidentally divided into this basic unit of the grid, it is probably not intentional. For example, if the design is consistent with an 8px grid, and you see a margin of 199px in Sketch, it most likely implied 200px. Do not hesitate, just fix it.
9. Use Flexbox
With the introduction of Flexbox, aligning elements with CSS has become much easier. And the Flexbox is much more than, say, the distance in the navigation bar. Most alignment types can be created using Flexbox. The horizontal and vertical alignment of the text next to the graphic / image is one of those examples where the Flexbox is very convenient, since the alignment remains the same, even as the amount of text increases. And not to mention the properties of distance distribution (justify) and ordering (order) of content.
10. Smooth design
Finally, do not be afraid, except for creating the perfect pixel perfect page to use additional animation or transitions. If it fits the design, this is probably a good addition to the overall result. In addition, it makes the web page and design more lively for the user.
Extra advice
A small bonus tip that I would like to give relates to the content inside the image (imagine: a web application user interface element used on a website for marketing purposes for the same web application). Not only that the text in the image can cause a headache when it is scaled in the browser. The text inside the default image will match the type of backup font you selected. It also means that a copy inside the image can be displayed in Times New Roman, while the exported image in Sketch was designed with a certain serif font. An easy way to avoid such problems is to convert the text into a contour in Sketch. Thus, the text is converted into vector shapes, which are proportionally scaled with the rest of the objects.
Every pixel matters!
This way of thinking does not end with Sketch. We believe that the design version in the code should also reflect this. Be sure to dot all the “i”, carefully studying the indents, colors and distances between elements. Do not consider adding another design layer, and actively reflect on how animation can improve the usability of your application.
Source: https://habr.com/ru/post/453794/
All Articles