10 Useful Tips to Recreate Pixel Perfect Designs in Front-end
Most designers go through an intense creative process in order to create a working and beautiful design. They convey messages and meaning through colors, typography, whitespace and many other things. The same is true over at Yummygum and of the precision and care that is put into the designs is also expected to be put into the front-end development.
Not just in getting the coded version to reflect a design a closely as possible but also in a neat way of working. When I started my internship at Yummygum I worked along with the rest of the dev team and learned the tricks of the trade of thinking pixel perfect in code. Below are ten of the key takeaways from my learning process of re-creating a design as pixel perfect as possible in front-end development.
1. Every kilobyte counts
The first tip I can give is try to calculate what can be easily mimicked using code and what would take too much time to recreate. A container with (simple) gradient background is easily recreated with CSS. Sketch even lets you copy the CSS attributes. As far as graphics go; try to export them as SVG’s as often as possible for a small file size. Another benefit is that SVG is vector based, with the advantage you need only one asset for different resolutions.
2. Think in blocks
Don’t make things harder than it needs to be! Skim through the design before you jump straight into your code editor and try to split up the elements into blocks. Sometimes it helps to squint at the design to see what can/should be grouped together. And assuming you work with a (group of) neat designer(s) learn from how they grouped layers within Sketch. In general you can consider the following rule: any layer group in Sketch can probably best be represented by a container in HTML.
3. Think ahead when exporting an image
If you’re exporting an illustration/image that exists of multiple elements the most straightforward way is to export the entire illustration as one SVG/PNG. Although there's nothing really wrong with that, try and think outside the box and envision the possibilities of animating the separate parts of the illustration. In order to animate the individual parts of the illustration it might save time to export them individually from Sketch to subsequently position and animate them in code.
4. Export uniformly sized icons
Sometimes in a design you’ll find a bunch of icons that have differerent sizes. For example; if you have six feature paragraphs that each have a dedicated icon next to the feature title. Because some icons have a heavier ‘body’ the designer may have intentionally made those icons smaller in total size. On the flip side they may have scaled up a few icons that felt too small. Either way, if you would position the icons properly next to each feature title manually in CSS using padding, that would mean a lot of work. Instead; use Sketch to your advantage by using the slice tool (hit S key and then drag the slice shape around the icon). Take the biggest icon canvas and create slices on the same size for each of the other icons while center aligning the icons within the slice. In other words; create the padding within the exported image instead of in CSS. This way you can give every icon the same position in CSS.
5. Colors in SVG
A lot of designers use opacity on layers or layer groups as a tool to control the contrast of that layer (group) against a background. Think of confetti elements on a dark background for example. Sometimes an exported SVG graphic or illustration doesn’t look quite the same when implemented in code because of browser specific abilities. A way to fix this is by not controlling the opacity of the graphic/illustration of the SVG in code, but exporting it from Sketch with the opacity applied to it. This also results in fewer CSS lines for styling.
6. Container padding over fixed heights
To make a design as fluid as possible avoids setting fixed heights *and* paddings on containers. Just use padding only instead to accommodate an easily (responsive) scalable element. This because the text in a container can always grow. As a rule of thumb: setting a specific height is better suited for images. To make sure the distances between the top and bottom of a container and the element(s) within the container consult the Sketch file for the correct padding amount (and keep reading for the the next tip).
7. From Sketch to SCSS
Use the features from Sketch to be more productive and precise. Copy CSS from Sketch right away to make sure you set the correct font-size, line-height, color etc.. The designer has set those properties for a reason. Also, in Sketch the cmd- and alt keys are your friends. To obtain an object’s padding, left-mouse click on that element while holding down the CMD key. Subsequently, use your mouse to hover other objects while holding down alt/option key to see the distance between those two elements. Play with alt + cmd to see the paddings from objects in groups. If you can’t find the distance between the elements using the above mentioned method don’t be scared to draw a rectangle to see the paddings between your object en the rectangle.
8. Respect the grid
A design is mostly created with a base unit grid for a good reason (often times it’s for the sake of consistency and visual balance). If the padding between elements is accidentally not dividable by that base grid unit, it’s probably not intentional. For example, if the designs listen to an 8px grid and you see a padding of 199px in Sketch, chances are this was meant to be 200px. Don't overthink it, just fix it.
9. Get your Flexbox on
With the introduction of Flexbox aligning elements with CSS has become much easier. And Flexbox is much more than, say; spacing in a navigation. Most alignment types can be created using Flexbox. Horizontal and vertical alignment of text next to a graphic/image is one of those examples where Flexbox comes in super handy as the alignment stays the same, even if the amount of text grows. And not to mention justifying and ordering content.
10. Smooth
Finally don’t be afraid besides creating pixel perfect a web page to make an extra animation or transition. If it matches the design it’s probably a nice addition to the overall experience. Also, it makes the webpage and the design more lively for the user.
Bonus tip
A small bonus tip I’d like to give has to do with textual content inside of an image (think: a UI element of a web app being used on the marketing website for that web app). Not only can text in an image give you a head ache when it’s scaled up inside of a browser. The text inside the image will default to whatever fallback font-type you’ve set. That also means copy inside of an image can show up in Times New Roman while the exported image in Sketch was all in precisely chosen serif typeface. A simple trick to avoid these issues is to convert the text to outline in Sketch. This way the text is converted to vector shapes which will make it scale proportionally with the rest of the objects.
Every pixel matters!
To quote one of the mantra’s we live by at Yummygum: every pixel matters. This way of thinking doesn’t end in Sketch. We believe the coded version of a design should also reflect this. Make sure to dot the i’s and cross the t’s by looking closely at paddings, colors and distances between elements. And don’t stop thinking about adding another layer of design, and actively think how animation could enhance an experience or usability.
And the last pro pro pro tip: make sure you use our City Lights syntax theme for Atom, Visual Studio Code & Sublime Text 😉
