Start by defining your grid

Sketch has 2 built-in layout features — Layout and Grid. In most cases, layout is a great way to organize content on a typical website utilizing a 12 column grid. However for this exercise we will be designing a more dynamic layout with various components.

The subject matter for this project will be based on Nintendo’s Animal Crossing: New Horizons. Each month a new set of fish becomes available. What we will be designing is a visual representation of this highlighting the most valuable, their location & time as well as the value of each fish.

There are 14 new fish being added (2 of which are of a higher value). Our grid should be divisible by 4 and 2.

Think fluid

The artboard and grid block size isn’t entirely relevant because the layouts should flow easily based on screen size. However to make it easy to design, I will be creating an artboard that is 1760px by 2860px. This means that our grid block size is 220px by 220px.

Mobile-first… and also desktop first

Mobile-first has been a big term used over the past few years. In short it means to design for mobile users first because, odds are most people use their phones as their primary device when browsing the internet. This doesn’t mean that we should ignore desktop. So we will be designing for desktop first but will keep in mind how we want things to flow when they end up on a mobile device. Since we will have 2 variations for displaying our fish (featured fish taking up a 4×2 space and general fish taking ups a 2×2 space) we can reuse these components when adapting our content.

Creating your visual assets

When creating the components of your design, keep some kind of hierarchy to the content. Also make sure to create re-usable items. This will not only reduce the overall weight of the project, but it will also help to create a cohesive message. Start with a baseline for your heading 1 then work your way down.

Utilize CSS properties

One of the most undervalued aspects of designing in Sketch is that it limits you to only work with available CSS attributes. This significantly increases the possibility that your final designs are able to be programmed.

Sketch also allows you to grab usable CSS from components that you have created, Things like CSS gradients (not necessarily hard to program but are tedious to code), can be easily copied and pasted into your stylesheet.

SVGs & FontAwesome

If at all possible create your illustrations or icons as vectors and output as an SVG file. I created my illustrations in Adobe Illustrator, then imported them into Sketch — keeping them in a vector format. This will ensure that your content will retain its quality no matter what the device. SVGs are also often much smaller than JPGs or PNGs.

Another great tool for gathering assets for your design that is both light-weight and scalable is FontAwesome — The internet’s most popular icon set and toolkit. Simply download FontAwesome to your computer and install it like any other font. Once installed visit their icon page and search for the icons you want to use. When you find the right icon, you can copy it to your artboard then return to Sketch to paste it in your text field with the FontAwesome font selected.

Dynamic background images

We have already established that you must create fluid designs. This becomes challenging when working with busy bitmap images. Luckily there is a CSS attribute that helps make background images adapt with ease. When appending a background image, there is a property known as “background-size”. One of the values of background size is “cover”. What this does is fit your image to the allocated area by scaling and cropping the top and bottom of the image as the viewport changes in size. So when choosing your background image be sure to have some extra room all around the main focal point so if it does get cropped your main point of interest is protected.

Assembling the design

As you can see, the completed design works within the grid that we established in step one. Once your initial wireframe is established, then you can apply styles — colours, icons, images etc. As noted earlier, try and use as many CSS techniques as possible to ensure that your design is possible and that it can be developed in an efficient way.

Because our layout is fluid, the columns and row heights are based on the content inside. We use padding to keep enough white space around each object. In Sketch if you hold the “Option” key and mouse over the space between objects it will show you the space in pixels between each item. This allows us to keep consistent spacing which would be converted to padding or margins when being programmed.

Keep your files clean. Make sure to group your items and create symbols for recurring items like, lists, highlights and callouts.

Let’s get coding

HTML

Start with your HTML. Build out the overall structure and hierarchy of your content. When creating the nested grid items, there are two ways we can target them with CSS. The easiest route would be to give each container (div) a unique class name — for example “hero”. This will make things easier to reference when we write the CSS. Alternatively if we want to keep the HTML clean, or if the HTML is automatically output in a loop (like an app built with React which could loop through data in a JSON file), we can target inner divs using pseudo-classes.

CSS

There are a ton of property options to be used with CSS grid, but to keeps things simple and to keep the focus on design, we will only be utilizing the “grid-template-areas” property.

Most of the heavy lifting when building our grid is going to be handled by the container. But before we get there we need to define our grid items. The best part about this is that we can give them easy to remember names (see image above).

Once the names are established and associated with a container we write out the HTML.

Making things responsive (Adaptive)

Often the term “responsive” is used when talking about the conversion of a desktop site to devices with smaller screens — the layouts respond to the screen size. In reality when done properly, the layouts we should be creating are “adaptive” layouts. We don’t want the content to just get shuffled around aimlessly for smaller screen sizes, we want the content to be oriented in a way that is optimized for the best user experience.

Luckily, CSS Grid makes this incredibly simple. The “grid-template-areas” property allows us to build out our grid by referencing our grid-area names as cells in the grid.

Lines 131–133 set up our grid. We first set the container to be displayed as a “grid”. Line 132 sets up our columns. What the code translates to are 8 equal columns. “1fr” indicates “one fraction” of the entire width (so in short, 8 equal fractions). Line 133 sets up our rows using the same method as noted above.

Using the grid area names defined in our stylesheet, we work row by row as seen above. On line 135, 136 & 137 we see “hero” taking up 8 cells across and 3 cells down. On lines 138 & 139 we see “dorado” taking up the first 4 cells in the fourth and fifth row while “great-white-shark” takes up the last 4 cells in the same row.

When making the layout adaptive, we simply need to use a media query to target the screen size, then adjust the values of our “grid-template-areas” property.

The Final Product

The final product is a light-weight easily adaptable layout to enhance the overall user experience.

The best approach to designing layouts to be programmed with CSS Grid is to take things one step at a time always anticipating how objects should react across multiple devices.

While this guide doesn’t provide extensive information around CSS programming as a whole, I hope that the information provided helps designers to get a better understanding of the relationship between code and design.

Article by: Lee Travaglini (uxdesign.cc)