If you’re involved in the creation of digital products, you’re aware of the importance of having a portfolio to showcase your work. Whether you’re actively looking for a new job or considering a career change, it’s one of the first things you’ll be asked to share. Having said that, I’m willing to bet that if you ask 9 out of 10 professionals if they’re happy with the state of their portfolio, the answer will be “No.”

Chances are high that any given portfolio has one or more of these problems:

• Recent job and/or project history is missing or lacking in details.
• The design of the website is dated.
• The work shown doesn’t accurately represent the type of work you want to do in the future.

This is not a new problem. But as the Director of Learning for Aquent Gymnasium, part of my job is to pay attention to trends in the web industry, and I had a hunch that the role of portfolios had changed in recent years. To put this theory to the test, my colleague Justin Gagne (Design Lead) and I developed a pilot portfolio workshop for a small group of designers and developers.

Going into the workshop, we had a few assumptions about what we would encounter. Some of those assumptions were accurate, but there were a few surprises as well. So I’d like to share those surprises — or as I like to call them “insights” — with you, in the hopes that they will save you some time and effort when you begin to update your own portfolio.

Why is it so hard to work on your own portfolio?

Before sharing my insights, it’s worth defining our goals for the workshop. We knew that despite understanding the importance of a portfolio, many people felt overwhelmed or blocked from working on them and weren’t quite sure why. To provide structure and help, we had to understand what the specific challenges were.

Make no mistake, the challenges are real. In fact there’s an old proverb (bordering on cliché) that I’ve heard many web professionals reference over the years which is “The shoemaker’s children go barefoot.” This is generally used as an explanation for why one’s portfolio website has been so neglected. After all, if one is busy working on other people’s projects, that leaves little time and energy to work on your own.

There’s some validity to this, it definitely is easier to postpone your own project than it is to postpone one for a client or your regular job. After all, those pay the bills and one needs to be pragmatic.

But there are a few other reasons why working on your portfolio is difficult:

• One of the most challenging aspects is deciding what to include. Web professionals typically work on many projects in any given year, but not all of them may be relevant or appropriate to showcase in a portfolio, sometimes there are even legal reasons: for example many companies have NDAs (nondisclosure agreements) which prohibit the sharing of visuals or projects done while under contract or while employed.
• People also have trouble deciding which projects best represent their skills and abilities, and this often leads to avoidance or focussing on the wrong things, such as taking a week to look for “the perfect” typeface or color scheme for their site.
• Another challenge is figuring out how to organize and present one’s projects while finding the right balance between showcasing the work and providing context and explanation.

When you add all of these challenges up, not to mention the fact that you have no project manager looking over your shoulder, it’s not surprising that portfolios get neglected. There’s also the question of motivation. If you’re happy and comfortable in your current gig, why burn extra calories on nights and weekends to do something that feels difficult? The problem is when circumstances change, if you suddenly need an up-to-date portfolio and you’re doing it under financial stress or time pressures, you’re now making a hard job even harder.

Content truly is king

Our original plan for this workshop was quite ambitious and included sessions on using mood boards and Figma prototypes to head in the direction of visual design. However, we ended up reducing the scope and in the end, it evolved into more of a writing and content strategy workshop. As veterans of the web industry, the old phrase “Content is king” came to mind. This means different things to different people, but for us it represents our belief that people spend a disproportionate amount of time on the visuals, the tech stack, and other aspects of their portfolios, and not enough on the core words and message they want to convey.

The path to good content started with a few deceptively simple questions we asked our attendees:

• What sort of work do you want to get in the future?
• How would you describe your “personal brand” in a sentence or two?
• What past projects are you most proud of, and how could you turn them into case studies?

Make no mistake, these are hard questions to answer! Which is exactly why we asked them. By directing their focus to these difficult questions and giving them some tools to answer them, we helped attendees avoid the common trap mentioned earlier: namely the tendency to get distracted when faced with “the hard stuff.”

DIY Tip: You don’t have to be part of a workshop to work this way. Open up a document and begin by answering these three questions:

• What sort of work do you want to get in the future?
• How would you describe your “personal brand” in a sentence or two?
• What past projects are you most proud of, and how could you turn them into case studies?

Next, consider keeping all your work in writing as long as possible before moving on to the design phase. Keep it simple and start with an About Page. If you want some context and structure, consider checking out our 5-minute tutorial on the topic.

Accountability really works

Accountability was the foundation of our workshop. When someone is working on their own with no oversight, self-imposed deadlines are incredibly difficult to follow. So, creating a formal structure that asks people to show up at a set time each day as part of a group was key. All workshop attendees knew what they were getting into. We didn’t call this a “bootcamp,” but it had a similar vibe — don’t sign up unless you’re willing to commit and put in the work.

To avoid a traditional “authoritarian” model where the teacher is the center of focus, we split people into breakout groups to give them a chance to inspire, help, and commiserate with each other. Additionally, because this was a remote workshop conducted by conference call, we also created a forum on our classroom site with daily assignments that required people to give feedback to get feedback.

DIY Tip: You can use this technique on your own by bringing in a collaborator early into your portfolio writing process. The only qualification for this person is to be someone you trust, and the simplest exercise is to read your content out loud to them (or vice-versa). You’d be surprised how effective this technique is. In fact, I’ve found that hearing my words out loud will instinctively prompt me to make useful revisions even before I receive “official” feedback from my collaborator.

Your portfolio is less important than you think

This insight might seem counter-intuitive, so bear with me. The role of the portfolio has changed substantially over the years; for example, the days of lugging a physical case of printouts to an interview are long gone. The role of the online portfolio has also changed over the last 10 years and specifically since 2020 when remote interviews and work suddenly became commonplace due to the pandemic. Here’s the big takeaway: the way people find your portfolio has changed.

Today, chances are it’s not a search engine that brought someone to your portfolio site. Instead, intermediaries such as LinkedIn, Behance, Instagram, or GitHub are gateways to your lovingly crafted portfolio website. In many ways this changes the context and expectations your visitors have of you before even reading a single word on your site.

It’s also safe to say that people aren’t spending a whole lot of time looking at your content. According to a recent eye-tracking study, recruiters typically spend an average of 7.4 seconds looking at résumés. While résumés and portfolios are different, I suspect the conclusion is the same: the main audience for your portfolio is skimming your content quickly, not studying it in depth.

Rather than be discouraged by this, my stance is that anyone looking to make an impact with a portfolio can use this to their advantage. Take a step back and focus on the core aspects of what a portfolio is good at:

• It remains a great tool to communicate your ideas and approach to creative projects. No matter what your role, explaining your process and thinking is always going to be important.
• Meeting someone in person or by phone or video is still the gold standard, but a portfolio continues to be an excellent way to establish your credibility and trustworthiness. Specifically, it allows you to emphasize your strengths such as your track record of producing high-quality work, or your ability to complete projects on time and on budget.

Here’s the final insight: more than ever you need to focus on the sort of work you’d like to do in the future, define it with clarity, and then promote it loud and clear across all platforms. Yes, this includes the portfolio, but also your LinkedIn profile, your resumé, and any other social media you deem appropriate. This is hard work, no doubt, but it will pay off in the long run.

DIY Tip: You can perform a quick content audit of your own professional profile in a few minutes. Open up all your existing material at once: this might include a LinkedIn profile, resumé, portfolio, etc. Now do a quick compare and contrast: is everything aligned across all the platforms? For example, is your recent work up-to-date? Do you have a clear personal statement specifying the work you would like to do and is this message consistent? If you want to delve deeper into this topic, check out this 5-minute tutorial.

Final takeaways

There’s an old saying in advertising: “If you don’t define your brand, other people will.” Typically, this refers to companies, but it applies to people and their portfolios as well. If you don’t define what you stand for and what makes you unique, your visitors will simply do it for you based on their own assumptions.

Our attendees told us that the most valuable aspect of the workshop for them was being given the chance to put time into writing and reflecting on their message and the actual value they had brought to past projects. The second most valuable takeaway was that the group setting gave them a much needed outside perspective. Sharing your work and inviting peer feedback might feel vulnerable… because it is! But if you want your portfolio to be the best it can be, it’s worth stepping out of your comfort zone.

Mind you, everything I described in this article are things you can do yourself, no workshop required. All it requires is a little time, commitment, and a document editor. Remember, standing out in the crowd these days is less about eye-catching visuals or skills and more about being crystal clear on what you’re good at and what work you want to do in the future. So what are you waiting for? Start improving your portfolio!

Want to be the first to know about future Gymnasium workshops? Get on the list.

Improving Your Portfolio is Easier Than You Think was originally published in Gymnasium on Medium, where people are continuing the conversation by highlighting and responding to this story.

Months ago, Keith Peters, instructor of the excellent JavaScript course for our free online school Aquent Gymnasium, was available to do a new Gym Short (one of our hour-long courses) for us. Now, Keith is a pretty sharp guy and could have taught a course on any number of subjects, but when I proposed the topic of “Chrome Developer Tools” and he agreed, I couldn’t have been happier.

Every web browser these days has a set of built-in developer tools which allows anyone to interact with the code of a web page or web application. These tools are used to troubleshoot common issues, and developers use them primarily to inspect and modify HTML, CSS, and JavaScript code. This process can also be done with a separate text-editing application, but developer tools speed up this process immeasurably.

DevTools can also do things that text editors typically don’t, such as show which assets a web page has requested or emulate a mobile device to help improve a responsive design. We chose to focus on Chrome’s version of developer tools because that browser is the most widely used — just keep in mind that its developer features are very similar to all other browsers.

Why a course on DevTools is worth taking

The first reason is that, as a designer/developer who’s been using web developer tools for over a decade, I’ve gotten a bit complacent in keeping up with the advances in browser technology. Inspecting a page and modifying the HTML and/or the CSS is something I do by habit, but it’s a bit like making a painting with a palette of only two colors, there’s a whole other spectrum out there that I’ve been neglecting.

The second reason is that as a producer of courses on web design and development at Gymnasium, I’ve seen all of our instructors use dev tools in interesting ways while teaching their courses. I wanted a way to collect these different techniques into a unified course because I knew it would be a valuable set of resources for our students.

Our version of a Greatest Hits album

In the spirit of discovery, here are 3 browser dev tips from our various courses that made me sit up and take notice when I first saw them. Please feel free to explore the courses themselves for more context, but if you currently know how to access Chrome DevTools, try these tips out now. You should be able to experiment with them on almost any web page you visit.

1) The first tip is from the aforementioned Chrome Developer Tools course, and while basic, it’s also one I wish I had known earlier. In the following snippet you can see a developer who has just encountered an external CSS file that has been minified and is displayed as a single line stretching from here to Omaha, making it virtually impossible to do anything with. How do we turn this code into something easy to understand and work with?

• In the Sources tab, click on the double brackets in the lower-left corner in order to instantly format the CSS into something readable by humans.

Bonus Tip: This technique is not just for CSS — it will work with JavaScript as well.

2) This next tip comes from Aaron Gustafson’s Modern Web Design course and is actually a two-for-one deal. In the following snippet, a developer wants to understand how a specific paragraph affects the layout of her page. So in the first example she simply hides the paragraph to see the effect, and in the second example, she takes it a step further by deleting it altogether, thereby reflowing the content of the page.

• In Chrome, to hide an element, locate it in the Elements tab, then right-click or ctrl+click it, and choose “Hide Element.”
• In Chrome, to delete an element, locate it in the Elements tab, then right-click or ctrl+click it, and choose “Delete Element.”

Bonus Tip: Remember that deleting an element is just temporary. If you want to get it back you can always use the designer and developer’s best friend Ctrl+Z (PC) or Cmd+Z (Mac). Alternatively, you can always reload the entire page to get everything back to normal.

3) This tip is a sneak peek from our upcoming Responsive Web Design course with Jason Pamental who uses the Network tab in Chrome to debug and improve the performance of his web pages. At its most basic, the Network tab analyzes every single resource that is loaded onto a page (such as images, fonts, and more) and then allows you to view those resources by type, if desired.

• Once you are in the Network tab, the first step is to click the “Disable cache” checkbox. What this does is forces your web browser to treat the web page as if it’s never seen it before and all of the resources will be downloaded from scratch, thereby simulating what a first time visitor to the site might experience.
• Next, reload your web page and the Network tab will start to download everything on the page. When it’s complete, you’ll see important information in the status bar, such as the total amount of data transferred.
• You’ll also see a list of every single file downloaded, as well as when it was downloaded in relation to other assets, and a whole lot of other stuff. In this example, we click on the Font category to see what fonts are being used, and specifically, we might be interested in the file size of those fonts to help us make some decisions about the size of this page.

Bonus Tip: After you are done recording your network activity, be sure to uncheck the “Disable cache” option or you’re going to have a bad time surfing the web for the rest of the day.

Inspect and optimize your dev tool game

I could do this all day, so I hope you’re inspired to take a closer look at the development tools your browser has to offer. Even if you’re using them daily, I’m willing to bet there are a lot of surprising features in there that you might find useful. If you’ve got a favorite tip or trick, let us know in the comments.

3 Tips for Chrome DevTools Users was originally published in Gymnasium on Medium, where people are continuing the conversation by highlighting and responding to this story.

A tutorial designed to whet your appetite

CSS Grid Layout is a recent addition to the web designer’s “toolbox” that allows us to design web pages in new, interesting, and powerful ways. This article is primarily aimed toward web designers/developers who have had little to no experience with Grid Layout. Many of the articles I’ve seen on the subject tend to move on a bit too quickly into intermediate and advanced concepts. I’ll be covering why we need this new system, how to get started, and toward the end I’ll offer some advice on how (and when) we can use it safely in production.

I’ll also share some code examples and a few step-by-step instructions aimed at folks familiar with HTML and CSS. For reference here is a link to all the Codepen code examples used in this article. There are links to additional resources at the end as well.

Speaking of resources, let me save you some time and point you directly to the work of Rachel Andrews and Jen Simmons, two members of the web community who have been leading the way for Grid Layout and whose work you need to familiarize yourself with if you want to explore modern layout further.

Current layout techniques are a sad buffet

CSS Grid Layout exists because the web page layout techniques we have been using for years have serious limitations. As the web has grown and become more sophisticated, these techniques have become increasingly problematic.

At the root of the problem is the reliance on CSS floats as the cornerstone of web page layout. The underlying layout model of CSS floats is one-dimensional, which means designers wishing to use a grid system have always had to think in terms of rows. Without getting into the technical details, here’s an illustration of a simple two-column layout using the traditional technique of CSS floats. You’ll notice that even though visually there appears to be a “column” below figure B, we accomplish this through what is essentially a hack, i.e., there are no true columns available for use in our current system.

By contrast, the CSS Grid Layout system that we’ll be exploring has a mental model that looks like this:

Here we have two-dimensions, not only do we have rows (in this case two of them) but also columns (also two). This is a huge deal and the biggest conceptual difference that designers and developers will need to adjust to. If this doesn’t make sense immediately, don’t worry — the rest of the article will clear things up, I hope.

Here’s another way to put this into perspective. Currently, for a web designer or developer, only having CSS floats to work with is like walking into a buffet where soup and salad are your only options. Technically a meal, but...meh.

CSS Grid Layout, on the other hand, is a veritable smorgasbord. Options, choices, sweet delights! You will be tempted to dive in and sample everything, I promise you.

To be fair, CSS floats have received help as technology has improved, most notably with the recent introduction of CSS Flexbox (which I’m largely going to stay away from in this article.) Suffice to say, Grid Layout and Flexbox work well together, and there are already many good resources online covering these techniques.

In terms of grid systems, over the years we have also seen the emergence of frameworks such as Bootstrap and Foundation, both of which have very clever ways of giving designers/developers access to “grid layout” templates. To be clear though, these systems simply tuck the usual float techniques into “behind-the-scenes” code. CSS Grid Layout is something completely different, and it’s perhaps one of the most exciting developments on the web in recent years.

Before we dive in, I want to set some expectations. There is *a lot* to cover in the Grid Layout spec. If we look at the number of new CSS properties we have access to, that number is seventeen. Seventeen. New. Properties. Let that sink in for a second. In this article I will only cover six or seven of those properties, thereby leaving a lot untouched. My goal is to let you savor and explore the main dishes of Grid Layout for a while, and then you’re on your own to explore and indulge your appetite.

There’s one more thing I’d like to emphasize. Having a basic understanding of HTML and CSS is useful in order to follow along with the rest of the article, but it’s also important to clear your mind and accept this model as brand new without trying too hard to make comparisons to the past. I have a friend who might be able to help you with that.

There, that’s better. Now let’s join the buffet line!

Setting the table

The idea of a grid system has been around for a very long time. Think of how hard it would be to print newspapers on a daily basis without guidelines on how to format content and create a hierarchy to distinguish the most important articles from the less important ones.

CSS Grid Layout will allow you to create similar combinations of rows and columns, but let’s begin with the basics. Below is a diagram of a grid with 3 rows and 6 columns. Here’s your first pop quiz! Grid Layout has a component called the grid line, how many grid lines do you think the grid below has?

Because a grid line is created on both sides of a row or a column, the answer is that there are 7 column grid lines and 4 row grid lines (I’ve labeled them below). Additionally, the space between two adjacent grid lines is referred to as a grid track. Our grid has multiple grid tracks that I could have illustrated, but I randomly highlighted the 5th column (seen in orange) here. In addition to grid lines and grid tracks, we also have the grid cell which is the intersection of any given row or column — think of it as the smallest single unit within the grid. I highlighted a single cell (seen in green) within the 2nd column and 3rd row.

Building this layout is fairly straightforward; I’m going to leave out the HTML structure as well as the background and border styles, and just focus on the grid CSS. Here’s the basic code:

.grid {
 display: grid;
 grid-template-columns: 150px 150px 150px 150px 150px 150px;
 grid-template-rows: 150px 150px 150px;
}

So we first instruct the container we’re styling to be displayed as a grid, which gives it all the “superpowers” that will soon follow. Next, we define each column to be 150px wide and specify six of them. Similarly, we specify 3 rows, each with a height of 15opx.

I’ve placed the code for this layout here in a Codepen, and I invite you to go in and change the values to see how it works. I used the long version of the code for easier understanding, but we can actually use the repeat syntax to say “repeat this row or column X number of times,” which is more elegant and efficient:

.grid {
 display: grid;
 grid-template-columns: repeat(6, 150px);
 grid-template-rows: repeat(3, 150px);
}

Right now there’s no space between our rows and columns, but let’s add some. To do this, we turn to grid-gap. You can use any number of values to specify the gap, I’m using pixels, but you could use other values as well (ems, rems, etc.)

.grid {
 display: grid;
 grid-template-columns: repeat(6, 150px);
 grid-template-rows: repeat(3, 150px);
 grid-gap: 30px;
}

Which gives us this:

(As a side note I just recreated a famous optical illusion, where your brain tries to “see” light gray dots between the gutters, but if you look at one directly it disappears!).

The code for this example can be found here. Take a look and play around, you can also experiment with setting either the column gap or row gap independently, to do that, you would use the following syntax:
grid-gap: 15px 100px; here the first value (15px) is the row gap and the second value (100px) is the column gap.

So we’ve just gotten started, but think of how useful this already is! Creating a reliable image gallery, for example, is still really annoying with our current tools, but with Grid Layout it becomes almost trivial to build one on the fly. Here’s an example I quickly mocked up. Feel free to dive in and play around with the rows, columns, gap, and the size of the cells.

A taste of something new

I remember when I first encountered CSS Grid concepts back in 2012, I kept trying to apply my old school CSS skills to this new model and getting in my own way. Finally something clicked, the clouds parted, and I yelled, “I see the light! I SEE IT!”

Here’s what I mean: Let’s start with a single <div> element that has been given a background color and border so we can visually understand what is happening; then we throw some text in there. Let’s try the first amendment to the US Constitution. Here is the HTML for the following example:

<div class="grid">
      <div class="grid-item">  
        <h1>The Bill of Rights</h1>
        <h2>Amendment I</h2>
<p>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the government for a redress of grievances.</p>
       </div>
</div>

If you want to play along, here is the starting code. This is the only CSS used: a basic background color and border on the .grid-item class selector to help you understand the behavior of the div within our rows and columns.

.grid-item {
 background-color: #d8d8d8;
 border: thin black solid;
}

As you might expect, the div expands to the edge of the browser, the default behavior.

Now let’s bring in some new firepower named the fr unit which is the standard fluid unit of measure for Grid Layout. It’s similar to percentages, but best defined as representing a fraction of the available space in the grid container (fraction = fr , see how they did that?). To see it in action we’re going to create a four column layout, and each column will have a value of 1fr. The following animation demonstrates this behavior.

With 1fr the width of the div is a single column taking up all the available space, so there is no change. Adding another 1fr creates another column and makes the width of our div take up exactly half of the available space. Adding yet another 1fr unit creates a third column and makes the width of our div take up one third the available space. Finally, adding the last 1fr unit creates a four column layout and our div takes up a quarter or 25 percent of the available space.

Here’s our code, simple as can be:

.grid {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr; 
}

But we’re just getting started, because having 1 fractional unit implies that we can increase that value, (which we can!) so let’s make the first column 2fr wide.

.grid {
 display: grid;
 grid-template-columns: 2fr 1fr 1fr 1fr; 
}

This has the visual effect of increasing the width of our div. Just to be clear, we still have four columns, we’ve simply defined 5fr units and two of them are reserved for the first column, which means it occupies ⅖ of the available screen space (or 40% if you like thinking that way.) The first screenshot here has all four columns set to 1fr, the second screenshot has the first column set to 2fr and the remaining three columns at 1fr.

A small palate cleanser

So you still might be struggling with visualizing this; I know I was originally, so allow me to help. One of the challenges of Grid Layout is that your grid tracks and lines are invisible by default. One of the best methods to visualize your grid overlay is with the Firefox web browser. Using the Inspector (located within the Developer Tools) you can toggle the grid overlay in order to see your layout structure.

Chrome has a similar feature that allows you to highlight CSS grid layout, however, I prefer the Firefox interface. In Firefox, to trigger the grid overlay you locate display: grid using the Inspector and then click the “waffle” icon as seen in this animation.

Again, this isn’t required to follow along with this tutorial — merely a helpful tip for later. Let’s continue our exploration of the fr unit by looking at rows. Let’s add the following code to our styles:

.grid {
 display: grid;
 grid-template-columns: 2fr 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr; 
}

Following the previous logic of what we did with grid columns, can you guess what this will do?

If you said “split the available horizontal space into two equal areas,” then you are correct. However our div container has not been affected, it’s still sitting in the first row.

Now for our next trick: we have a single div and a grid layout with four columns and two rows (all using fr units), so let’s have some fun and start moving our div around the grid. Note that we are now declaring this rule in the class selector .grid-item, so let’s put it on the second row.

.grid-item {
 background: #D8D8D8;
 border: thin black solid;
 grid-row: 2;
}

Which gives us this:

What if we wanted to move our div to the second column on the second row? Sure!

.grid-item {
 background: #d8d8d8;
 border: thin black solid;
 grid-row: 2;
 grid-column: 2;
}

Let’s just pause here for a moment because in the education business this is what we call the “teachable moment.” You’re witnessing layout behavior here that is completely different from our existing models of floats and even Flexbox. For many people new to CSS Grid Layout this is the “Aha!” moment:

Grid Layout represents an independent system of rows and columns, and we can position (and reposition) our content within it easily!

To further clarify, our div has a shorter width because it is placed in the second column which is 1fr. This is a feature, not a bug. If we want our div to span columns two and three, we have to instruct it to do so.

.grid-item {
 background: #d8d8d8;
 border: thin black solid;
 grid-row: 2;
 grid-column: 2 / span 2;
}

In the previous screenshots I have Firefox’s grid overlay turned on, but as a reality check we should look at this in the browser without the overlay.

As a “layout” in the browser it’s pretty uninspiring I admit, but as an exercise in understanding Grid Layout, it raises some important questions. For example, our div is collapsing and expanding based on the width of the browser; how could we prevent that if we wanted to? One solution lies in the units we’re using for our columns. Remember that we are exclusively using fr units, which are designed to adapt to the available space, but we’re allowed to mix and match fluid and fixed units (of measure). Let’s set the width of columns 2 and 3 to be 150px each:

.grid {
 display: grid;
 grid-template-columns: 2fr 150px 150px 1fr;
 grid-template-rows: 1fr 1fr; 
}

Once we’ve done that, let’s see what happens in the browser now. I’m going also to turn the grid overlay back on to make the fluid and fixed column behavior more obvious.

As you can see, the width of our div stays fixed at 300 pixels and the two columns on either side adapt based on the available space. This ability to define a “fixed” width for specific columns (or rows) is incredibly useful for certain scenarios. For example, imagine you’re building a responsive video player with a number of button controls (play, stop, skip, etc.). You could set the tracks where the controls are located to be fixed units and thereby force them to stay the same size, while the rest of the player could still be completely flexible.

If you look back at the previous animation, note that because there is no content in columns one or four, when the browser window reaches its narrowest point, these empty columns collapse to zero and our content is centered.

Its easy to adjust and experiment with your Grid Layouts. For example, to place our content div back into the first row and center it horizontally requires two small tweaks. The first change is to the parent grid container stating that the fourth column should be 2fr wide instead of 1fr.

.grid {
 display: grid;
 grid-template-columns: 2fr 150px 150px 2fr; 
 grid-template-rows: 1fr 1fr; 
}

The second change is to move the div from row two back to row one:

.grid-item {
 grid-row: 1;
 grid-column: 2 / span 2;
}

If we also remove the background color and border, the final result is underwhelming, I know. However, it’s not the final layout that is the star of the show; it’s how we got here.

You can check out and tinker with the final code here. In the next section, I’ll walk through a more complex “real world” layout.

Digging into the main course

In this section is a working demo of a page that uses three different Grid Layouts, each contained within a different media query. The project I have in mind is a short snippet of content pulled from Wikipedia describing the classic jazz album, “Ella Fitzgerald Sings the Duke Ellington Song Book.” The material I’ll be working with is minimal, consisting of a heading, a few paragraphs, and three photos. To give you sense of what I’ll be working toward, here is the final version of the project (with a responsive layout and all that jazz).

There will be a few new concepts thrown in, the most notable being grid area. With grid areas we can use plain English to describe sections of our Grid Layout. With that in mind, we will start by defining some grid areas in a layout designed for “mobile-first.” Here is my HTML:

<div class=”container”>
   <div class=”albumtitle”></div>
   <img class=”duke”>
   <img class=”ella”>
   <div class=”album-desc”></div>
   <img class=”bandphoto”>
   <div class=”credits”></div>
</div>

I left out the content and image src information here for space reasons, but I want to point out something very important. The items with the class selectors duke, ella, and bandphoto are attached to <img> elements. What this tells us is that grid items can be any element and this goes a long way toward simplifying our markup. Again, if you’ve been a web developer for any period of time, this structure might feel too elementary, but it’s another example of how we need to “unlearn” old habits based on our traditional way of doing things (in this case, we might feel tempted to nest those images within another <div> element, but it’s not necessary).

In terms of the CSS for our Grid Layout, we’ll specify a new container as a grid with grid-gap and padding; nothing new here so far.

.container {
  display: grid;
  grid-gap: 1em;
  padding: 1em;
}

Now for the new stuff — on the left is my desired layout, and on the right is the naming convention I will use:

The code looks like this:

.container {
 display: grid;
 grid-gap: 1em;
 padding: 1em;
 grid-template-areas: “head head”
                      “photo-1 photo-2”
                      “main main”
                      “spread spread”
                      “footer footer”;
}

Here is your first lesson when defining grid areas — your syntax must match the number of columns (and rows) for your desired layout. In this case, we need a two-column layout to support the two side-by-side images in the second row. Next, for each class we declare the grid-area property and then the value of the relevant grid area we want associated:

.albumtitle {
 grid-area: head; 
}

.duke {
 grid-area: photo-1;
}

.ella {
 grid-area: photo-2;
}

.album-desc {
 grid-area: main; 
}

.bandphoto {
 grid-area: spread; 
}

.credits {
 grid-area:footer;
}

Here’s the code for this — take a good, hard look at what’s happening in the browser as well as the code.

Previously we saw how you could position a div to a specific row or column using the grid-template syntax, and you could also force that div to span using the span syntax. This is essentially the same thing; the key difference here is that we are using grid areas that have logical content-based names, thereby creating a better mental model of your grid structure. It may be easier for you to work like this moving forward, and it will definitely be easier for other people looking at your code to understand.

If you’re a web designer/developer reading this, I hope you’re getting excited about the potential of this new model. If you need a bit more persuasion or evidence, in the next section I’ll add some more flavor to our meal with the addition of classic responsive design techniques.

Pigging out with media queries

Our existing layout is simple and works well on small screens, but as we expand the browser window, we can see that the layout is in need of some help.

As I mentioned earlier, there’s a lot going on in the Grid Layout spec, there’s actually an auto-placement algorithm and a few other tricks that allow you to place content on screen based on the available empty space, but that’s for another time and place. For now, I’d like to keep exploring the basics of using grid areas to define your layout. To do this, we’re going to turn to our old friend media queries for some help, and when our viewport hits a certain width, we’re going to display a more complex layout.

This is where it gets really fun; we’re going to add a media query at 34em (equivalent to 550px) and then do two things:

1. Add another column using our grid-area property.
2. Reposition our two photos by placing them into the first column.

@media (min-width: 34em) {
   .container {
   grid-template-areas: “head head head”
                        “photo-1 main main”
                        “photo-2 spread spread”
                        “footer footer footer”;
 }
}

The first screenshot below shows the layout as seen normally in the browser. In the second screenshot I’ve turned on the grid overlay in Firefox to help you see and understand the structure.

Pretty cool! Again, note that our CSS grid-template-area syntax is mapped to the page layout structure, helping you visualize your rows and columns.

Let’s keep digging in and add a third media query with a completely different layout.

@media (min-width: 72em) {
 .container {
       grid-template-areas: “.      .        head”
                            “photo-1 photo-2 main”
                            “.      .        spread”
                            “footer footer   footer”;
 }

The syntax for row 1 (“. . head”) and row 3 (“. . spread”) is new for us. You can think of the “.” syntax in grid-template-area as a placeholder; in other words, we’re choosing not to explicitly label those areas. So here we’re saying:

1. In the first row, the “head” area starts at column three.
2. In the second row the “photo-1” area starts in column 1, the “photo-2” area starts in column 2, and the “main” area starts in column 3.
3. In the third row, we start the “spread” area in column 3.
4. In the last row, we specify the "footer" area across the entire grid.

Here’s the resulting layout. Again, the first screenshot shows the image as normally seen in the browser, and the second shows the grid overlay in Firefox.

The Duke and Ella photos might feel overpowering compared to the other content. So what if we wanted to make them smaller? You’ve already seen the tools needed for this. Can you guess what they are?

The answer is the grid-template-columns property, which we looked at earlier. We can define the width of the first two columns using any of the units of measurement at our disposal. In my example, I’ve decided to use the vw unit mostly because I can. The syntax vw stands for “viewport width,” and it has a companion named the vh unit which stands for “viewport height.” If you haven’t used these units before, they allow sizing of elements to be relative to the size of the viewport. Here’s a good introduction to them (useful but not required to continue).

@media (min-width: 72em) {
 .container {
 grid-template-areas: “. . head”
 “photo-1 photo-2 main”
 “. . spread”
 “footer footer footer”;
 
 grid-template-columns: 18vw 18vw 1fr;
 
 }

So here, the width of column one and two are each set to 18vw making the width of the combined columns 36vw, which is roughly ⅓ of the browser window and gives us this in our final layout.

If you’d like to examine this project as is, the code is here.

One of the things I would like to emphasize is that the grid-area syntax makes it quick and easy to explore different variants of layout. For example, Eric, a reviewer of this article made a few quick changes to the syntax and created something a little different:

grid-template-areas:
“. . head”
“photo-1 photo-2 main”
“photo-1 photo-2 spread”
“footer footer footer”;

This change probably took him a grand total of 5 seconds in the code and the result is a layout that emphasizes the band photo and makes everything a bit less “grid-like” than my example.

The overall point is that this type of layout change would have taken much longer with our old model. Actually, to take it even further, I would argue that the technical hurdles we faced all these years often discouraged us from this type of experimentation. CSS Grid Layout has the potential to unlock our creativity by giving us the ability to control the placement of our content using very simple syntax.

A bit of dessert

Limiting my demonstrations in this tutorial has been difficult, namely because there’s so much more to explore. I hope you have room for one more new concept. It’s a small but important feature of working with grids and has to do with alignment of individual items within your rows and columns.

To illustrate my point, let’s look at our second layout, and specifically what’s happening in the third row with the alignment of the Ella photo and the band photo.

The images of Ella and the band are always aligned to the top of the row, and this is fine at the most narrow width(s), but as the browser gets wider and the Ella photo begins to scale, the bottom edges of the two photos are no longer aligned and this creates a gap that some might find annoying.

So, as with most things involving web design, there are a few different ways we could address this. The one I’ll focus on is the property align-self which is a feature in Grid Layout that allows you control the way items are aligned within a grid row. Let’s look at a snapshot of this layout with the grid overlay turned on.

The first thing we need to do is create a new class selector for the item we want to control, which in this case is the band photo. Then we’ll add the align-self property with the value of start.

@media (min-width: 36em) {
 .container {
 grid-template-areas: “head head head”
 “photo-1 main main”
 “photo-2 spread spread”
 “footer footer footer”;
 }
 
 .bandphoto {
 align-self: start;
 }
}

And this does…absolutely nothing. The reason being that start is actually the default value for items within a row — they always start at the top. Let’s change the value to end. (I’m going to leave out the other styles for space reasons).

.bandphoto {
 align-self: end;
 }

Aha! This aligns the band photo to the end of the row. The first screenshot shows this with the grid overlay on; the second one shows this with the grid overlay off.

There are only three values you can use for the align-self property. Let’s try the last one, which is center.

.bandphoto {
 align-self: center;
 }

This is the result:

You can see the final result here. This is probably the choice I would make as it gives us equal amounts of space above and below the band photo at all times. It’s fantastic that we have this level of control. In a similar fashion, if you want to control the alignment of items within a column, there is also the property justify-self available (although I won’t be exploring that here). This feature of Grid Layout raises an interesting question: by having access to what is essentially an override, are we defeating the purpose of the system? In other words, if one of the benefits of Grid Layout is to make objects line up easily and automatically, doesn’t this “break” that?

I would argue no, it doesn’t; in fact, this feature gives designers great power in creating complex and sophisticated layouts, but it needs to be used wisely and with intent. In the book, Making and Breaking the Grid, Timothy Samara discusses the struggle many print designers have had with grid systems over the years. He states that while some designers feel they can bring “precision, order, and clarity” to the design process, others fear they are “symbolic of Old Guard aesthetic oppression, a stifling cage that hinders the search for expression.” Regardless of where one stands, the real winners are all of us in the web community. Now we can actually have this debate with a legitimate grid system at our fingertips.

Here is the final code again, including the center-aligned band photo. Please explore, fork, and modify as you wish. If you want some guidance as to where to start, here are some things to try:

• Increase/decrease the media query values and see the effect it has as you change the browser width. Try adding a fourth media query for even larger screens (assuming you have a monitor capable of displaying it).
• Keep your browser at one size and experiment with changing values such as the grid-gap as well the column sizes and layouts
• Instead of the vw units I used in the final example, try ems, px and fr units to size the columns. Do the same thing for the rows.
• Add some background-color properties to the various class styles and see what effect it has.

That’s it for our main project. We still need a reality check to discuss how and when we can realistically begin using CSS Grid Layout though.

Here comes the bill . . .

We’ve had our small, yet satisfying feast, and believe me when I tell you that there’s a lot left on the buffet table that we haven’t even touched. Let’s cut to the chase — what’s the cost of all this grid goodness? We’ve already hinted at the fact that Grid Layout is extremely new and that older browsers will display your content but with none of the layout. So what exactly is the status in browsers anyway?

Our go-to resource for these questions is the invaluable caniuse.com which constantly updates browser support for all the things. At the time of this writing, they state CSS Grid Layout support is at 62.4 percent global support; be sure to check this page for the most recent numbers because this changes frequently. Specifically, we have browser support in the most recent desktop versions of Google Chrome, Firefox, Safari, and Opera. Microsoft’s IE 11 and Edge offer partial support, and the future roadmap for those browsers includes full support. If that 62.4 percent support number is bumming you out, stay with me for just a few more paragraphs, where I’ll present the solution that makes this more palatable — I promise.

On the mobile side, the most recent versions of Safari for iOS and Chrome for Android support Grid Layout, although if you go back a few versions, you’re going to have problems. So we need to look at the road-map for browser support a bit closer — otherwise all of this was just an interesting technical exercise and not something you could use anytime soon.

Browser Support

Although caniuse.com is a fantastic resource, its support numbers only tell part of the story. Rachel Andrew recently posted this encouraging tweet:

Rachel Andrew on Twitter

From 0 to 83% in 2 months. Look at CSS Grid go!

The context here is user visitor data from a single website that Rachel has access to, and 83 percent is an encouraging number. The caveat is that this is data from a tech site, so the average visitor is more likely to have an up-to-date browser. But the key point is the rate of growth; 0–83 percent support in two months is unheard of and very inspiring news.

In the “old days,” browser technology was updated on a much slower timeline and required users to manually download and install the software. Today, not only do browser updates come more frequently, but they tend to auto-update as well. Most users get fresh versions of the most recent browser behind-the-scenes, and manual updates are becoming more of the exception — not the rule. Based on this trajectory, it’s possible that we’ll have close to 100 percent support for Grid Layout across all modern browsers by the end of 2017 (please do not quote me on that).

Fallbacks

While browser support for Grid Layout is encouraging, it’s obviously only part of the picture. We still have all of those older browsers out there in the wild, and they will never support Grid Layout. So these days we naturally turn toward fallbacks. Fallbacks are a common part of today’s web development landscape, and web developers have become quite accustomed to using them. I’m not going to go deep into code at this point. Instead I will get straight to the primary solution I hinted at earlier which is CSS Feature Queries.

A CSS Feature Query is a way to test a user’s browser for support of any given CSS property. The basic code of a feature query looks like this:

@supports (display: grid) {
    .container {
        /* add rules for grid supporting browsers here. */
    }
}

If this syntax looks familiar to you, it should. Feature queries are very similar to media queries. Let’s say you have an existing site that uses floats and want to enhance it with Grid Layout. You would start with a feature query, similar to the one above, and then add your CSS grid code. Additionally, you would need to add rules that remove anything required for the older layout.

That’s the basic idea. The great news is that because feature queries are supported in all the browsers that support Grid Layout, you can use it exclusively to provide dual support. How to do this is a topic for another day, but there are a number of excellent resources I can point you to — the first is this article by Jen Simmons, which is a good introduction to the subject of feature queries, and then this more grid-specific tutorial, CSS Grid Layout and Progressive Enhancement.

Worthwhile examples of Grid Layout in the wild

An obvious question that comes up is what sites are using Grid Layout “for real” today — i.e., in a production website, not just as a technical demo? The examples are few and far between as I write this, but there are a few sites I can recommend.

• Grid by Design is your one-stop-shop for all things grid. The aforementioned Rachel Andrew created this site to share examples, tutorials, and resources, and the site itself uses Grid Layout. Required reading!
• The website for Patterns Day, a web conference, uses Grid Layout to a degree. Jeremy Keith, designer of the site, documented this process on his blog as well, and there are some good takeways to be found there.
• Eric Meyer’s personal website meyerweb.com uses Grid Layout, and just as importantly, he documented his process with an article, “Practical CSS Grid: Adding Grid to an Existing Design” over at A List Apart.

Additional resources

• The grid specification is the official source of truth for laying out the rules and syntax for Grid Layout and should be your first stop when you need definitive answers. Over the years these specifications have become a little easier to read, but a lot of people still have trouble sorting through all of the syntax and examples. Luckily for us, Rachel Andrew has a blog series that can help you interpret the specification; here’s Part One, if you’re interested.
• Speaking of Rachel Andrew, her work is the gold standard for all things grid, and she has created so much content including articles and tutorials that you could spend quite a bit of time with that material before ever looking elsewhere.
• However, having multiple resources is always a good thing, so be sure to explore the material that Jen Simmons has created, which includes Grid Layout theory and techniques. In addition to her fantastic lab demos, there is also her Learn CSS Grid page which will do a better job than this section of staying up-to-date — so just go there.
• If you don’t subscribe to the email newsletter, Responsive Design Weekly, you’re missing out on a lot of important news, so get on that. For example, Edition #256 lists a number of resources on both Grid Layout and Flexbox and has lots of links to excellent articles, interactive demos, and more.
• For comparison, in the old days of CSS layout there was a 3-column liquid layout referred to as the “holy grail,” due to its elusive qualities. This was such a headache that in 2006, it required a 2,000 word article to explain all of its intricacies. Here is the holy grail layout reproduced in about 35 lines of CSS. Go ahead and check it out for yourself.

Last, but hopefully not least, here are all my code examples on Codepen from this article:

• 6 column 3 row grid layout
• 6 column 3 row grid layout with gap grid + shorthand
• Image gallery example
• 4 columns 2 rows with mixed fr and px units (finished file)
• Ella & Duke Grid Layout (2 col mobile-first)
• Ella & Duke Grid Layout (3 col w/media queries)
• Ella & Duke Grid Layout (3 col media queries + align-self)

CSS Grid Layout: A Cornucopia of Options was originally published in Gymnasium on Medium, where people are continuing the conversation by highlighting and responding to this story.

This tutorial will walk you through how to create a logo from start to finish. It will probably take you between 20-30 minutes to complete depending on your prior experience in Sketch and/or other creative applications. To follow along, feel free to download the image file here. If you’re looking for a tutorial on how to create prototypes in Sketch, check out my free course over on Aquent Gymnasium.

I highly recommend using the latest version of Sketch, which at the time of this article is version 52.3. If you have earlier versions, it will probably work fine, but there may be some differences in the user interface. Ready, set, let’s go!

Importing a graphic

Sketch’s strong suit is vector graphics, but you can also import and edit bitmaps. For example here’s a hand-drawn sketch that was scanned and converted to a PNG file which you’ll be importing for the tutorial. Tracing over hand-drawn sketches in order to obtain clean vector artwork in Sketch is quite common and easy to do. Again, if you want to follow along with this exercise you can download the image here. This graphic is named “vectorflo-handrawn.png”.

• Launch Sketch, and on the Welcome screen click New Document and then Choose and a blank document appears. Choose File > Save and name this file vectorflo-logo and click ok.
• Choose Insert > Image, find the vectorflo-handrawn.png file and then click OK. The graphic appears on your Canvas. Let’s take a quick tour of the workspace. In Sketch your toolbar is at the top, the Layers List is on the left, the Canvas is in the center and the Inspector is on the Right.

• In the Inspector, click within the Width field and then press the down arrow on your keyboard. This scales the logo down one pixel at a time. If you want to speed up the process, press and hold the Shift key and now it will scale downwards 10 pixels at a time. (You could have also scaled the image manually by clicking any corner and dragging to the center.) Get some practice with this and bring the Width of the image down to 600 pixels.

This trick of using the up or down arrows works within *any* field in Sketch. Lets try it with opacity.

• Click inside the Opacity field and press Shift + the down arrow until you reach 50%. Fading this image creates virtual “tracing paper” which will allow you to easily layer your vector shapes on top.
• Locate the Arrange menu at the top of your screen and then choose Lock Layer. This prevents you from accidentally moving or selecting the image. If you ever need to unlock it, click the padlock icon in the Layer List (or you can right-click the shape and choose Unlock Layer from the contextual menu).

Adding Vector Shapes

Vector artwork and shapes are all based on paths which are mathematically defined points, lines and curves used to build anything you can imagine: UI elements, illustrations and more. For this reason, vector artwork can be scaled without a loss of quality while maintaining a very small file size, quite a winning combination!

One way to create a path is to draw it by hand. In Sketch the primary tools for this are the Pencil tool and the Vector tool (which is typically called the Pen tool in other programs). The Vector tool is the most often used but it’s a little tricky to master and I’m not going to cover it here, mainly because it’s not right for this project. However, if you are interested, here is a great tutorial on how to use the Vector tool in Sketch.

In order to build this logo you’re going to use a combination of Compound Paths and the Make Grid feature. Specifically what you’ll be doing is creating a number of circles and then combining them into a complex shape that would be difficult to draw by hand.

The first step is draw a circle that matches the one in the top left of the hand-drawn logo. Click the Insert button at the top-left of the application and a flyout menu appears. Choose the Shape category and then select Oval. Now Sketch knows you want to create a vector oval of some sort!

• Place your cursor in the middle of the top-left circle and then press and hold the Option key, (this forces the circle to be drawn from the center), now drag slowly up and to the left. Notice that this does *not* create a perfect circle by default, so stretch your fingers and press and hold the Shift key at the same time. This constrains the circle’s proportions to a perfect circle. Keep dragging until the outside border extends slightly beyond the original, you’ll have a chance to resize this later, so don’t worry too much about getting it perfect.

• In the Inspector, locate the options for Fills and Borders and if the checkbox for Border is checked go ahead and click it to deselect. You’ll be working with the border later.
• Click on the color swatch in the Fills section and choose a shade of red that won’t burn your eyes out. This color will *not* be the final color of your artwork, so don't spend too much time on choosing.
• Locate the Opacity slider (its above the Fills section) and drag the slider to 50%. The transparency of your circle drops by half and you can now see the hand-drawn artwork easily.
• Now resize and re-position your circle if necessary. The goal is to make sure the vector circle covers the hand-drawn one completely.
• You will now duplicate this circle multiple times (3 on a top row and 3 on a bottom row). To do this, make sure the circle is selected and then choose Arrange > Make Grid. Type 2 for the rows and 3 for the columns and change the margins for both to 0px. This ensures that each circle is sitting flush next to the other. Click Make Grid and now you have 6 perfectly aligned circles in two rows and three columns!

The circles will not necessarily line up with the original hand-drawn logo, but this is expected. You are making the transition from the loosely sketched logo to a geometrically precise one.

The Make Grid feature I just showed you is amazingly useful, there are so many times when you need to quickly duplicate and repeat objects within a grid structure. In chapter 2 of my course I show you how to use Make Grid for entire artboards, which makes the creation of multiple screens for prototypes dead simple.

Grouping and renaming objects

Before you start building the logo you should do a little housekeeping first by grouping and renaming the layers. If you look at your Layers List you will see the 6 circles have default names and numbers but they’re a bit awkward: “Oval 1 copy 2”and so on. Let’s rename the first circle you created “Oval 1", the second circle in the top row “Oval 2" and so on.

As it turns out Oval 1 is already correctly named, so in your Layer List double-click on the second layer and rename it “Oval 2". Press the Tab key and the next Layer Name will be selected. Continue renaming the remaining circles in numerical order. In the end, your Layer List should look like mine.

• Select all the circles by clicking and dragging over them. You will see all six ovals in the Layers List light up. Notice the hand-drawn sketch wasn’t selected? That’s because you locked it earlier! (You did lock it right?)
• Now go to the Arrange menu and choose Group Layers (you could also use the keyboard shortcut Command + G). Double-click the folder name and rename the group Circles. While you’re here, click on the arrow to the left of the folder to toggle it open. You’re going to need access to the contents in just a moment.
• To help you visualize the next step, place your cursor on the far right side of the Circles group. You will see a small eye icon appear, click on this to toggle off the visibility of the group. Click again to make it reappear. Do this a few times so you can understand the relationship of the vector circles to the sketch.

You’re about to merge all of these circle shapes and do some “virtual sculpting” to create your logo, but we need to take a brief detour into the world of compound paths. Stick with this next section, I promise this technique will come in handy over and over again, no matter what type of artwork you’re creating!

Working with Compound Paths

Compound Paths are not unique to Sketch (In Adobe Illustrator these commands are found in the Pathfinder panel) and in the mathematical realm, compound paths are referred to as Boolean Operations. The basic idea is that you combine two or more shapes in order to create a new shape. The two most common operations are Union and Subtract, but there is also Intersect and Difference, neither of which you will be using in this exercise.

Compound paths are a simple concept in principle, but in practice they can be tricky if you forget the rules. There are two key things to remember:

1. Compound paths need overlapping paths in order to work.
2. All the paths you are trying to combine need to be selected first.

Lets look at an example unrelated to your project: here we see a rectangle which is overlapping a circle. When I select them both and click Union I get this new shape.

Next, lets look at the Subtract operation, which subtracts one path from the other. Pay close attention to the order of the layers in the following examples: The top layer is always subtracted from the lower layer. In the first example, the blue rectangle is the top layer and overlaps the circle, when the two shapes are selected and I click Subtract, we get the resulting shape:

If the circle is the top layer and is overlapping the rectangle, clicking Subtract results in a very different shape:

Now that you get the basic idea, you’ll apply it to your artwork. You’ll be using a combination of the Union and Subtract methods here.

• To make the following steps as clear as possible I’d like you to turn off the visibility of Ovals 2, 4 & 6. You’ll turn them back on later. Note the gaps between the 3 circles. To “fill” these gaps you are going to have to get a little creative.

• Double-click on the bottom circle (Oval 5) to select it. Press and hold down your Option key and then drag the duplicated circle up and to the left until you see the “snapping” that takes place with the smart guides.

• Repeat the last step, but drag this duplicate up and to the right until you see the snapping effect. You see where you’re headed with this? You are about to select these 5 circles and then combine them using Union to create a new shape.
  (If you’re wondering why there is a darker red on the overlapping paths it’s because the opacity of the original circle was changed to 50% earlier in the tutorial, and you are seeing the transparent colors mixing.)
• To select all 5 circles press and hold down the Shift key and then click each one (it doesn’t matter what order). (If you’re having trouble selecting, the Circles group is probably selected, you will need to select any one of the circles in that group and then proceed.) You can double-check that all 5 are selected by looking in the Layers List. Now click the Union button in your toolbar and all 5 circles are combined into a new layer which Sketch renames Combined Shape in the layers list.

This next part is the trickiest part of the whole procedure, so proceed cautiously. You are now going to use the original circles (2, 4 and 6 respectively) to subtract the paths from your combined shape that you don’t want.

• Start by clicking on the eye for the top layer (Oval 2) to reveal it. Then click Oval 2 in the Canvas to select it. Now Shift + Click the Combined Shape layer in the Canvas and press Subtract.. This subtracts the overlapping paths below and we’re left with the shape we want.

• Now it’s just rinse and repeat. Turn on the layer for Oval 4, select it first and then select your Combined Shape and press Subtract to remove the path below.
  Only one more to go, but watch out, there is a trap waiting!
  If you selected the Combined Shape layer and Oval 6 prematurely and subtracted, the result probably surprised you. (If you’re curious, go ahead and try it now, just be sure to press Undo.)

The trap is that it’s easy to forget that the top layer is always subtracted from the bottom. Currently, Combined Shape is the top layer, so subtracting removes everything except a small piece of Oval 6. To do this correctly, you need to reposition Oval 6 to the top layer and then subtract.

• Select Oval 6 and then choose Arrange > Move to Front. You could also just drag the layer in the Layer List to the top, but sometimes it’s possible to make mistakes doing this so stick with the command.
• Now select both layers again and press Subtract. You now have a completed vector logo. Yay! Be sure to save your document, you don’t want to lose all this hard work!

Important difference between Illustrator and Sketch

There’s an important behavior in Sketch that relates to the way compound paths work. In Sketch all of the paths you combine are always available for modification afterwards. This is very different than Illustrator, where compound paths are “flattened” by default into a single path. Whether you have used Illustrator before or not, it’s important to understand how Sketch’s compound paths work and why it matters.

1. In the Layers List you will notice an arrow to the left of the Combined Shape layer. Click on this to expand and you will see all of the circle shapes you have created. Additionally, on the far right you will see small icons that indicate what type of compound path is being applied. Actually, this is more than just an icon, its a menu. If you click on any one of the icons it will show you the different compound path options and you can change them on the fly. Feel free to play around with these, although don’t make any permanent changes.

This feature means vector artwork in Sketch is incredibly flexible. You can always return to your paths and move them, or change their shapes or the operations you used. This encourages experimentation and makes recombining the elements of your artwork simple. Having said that, the Illustrator method of flattening compound paths can be done in Sketch (and sometimes it does make sense to do this). If you want to see it in action try selecting the Combined Shape and then choosing Layer > Paths > Flatten. (Just be sure to Undo afterward).

Adding fills to your logo

Time to give your logo some style. In the next few exercises you’ll be using fills, borders and effects. Lets begin with the standard fill.

• The original hand drawn sketch is a bit of a distraction at the moment, so turn it off by clicking the padlock in the “hand-drawn sketch” layer and then click the eye icon to hide it. (Or alternatively, you could Ctrl + Click or Right + Click the layer and and choose Hide Layer.)
• The other thing you need to do is restore the opacity of the logo to 100%. Click your Combine Shape layer to select it, then change the Opacity to 100%. This ensures the color you are about to choose is at full strength.

Next, click on the Fill color swatch to open the Fills panel. A panel appears with the 6 options for Fills at the top. From left to right the 6 options for Fills are flat color, linear gradient, radial gradient, angular gradient, pattern fill and finally noise fill. You’re only going to focus on flat color and linear gradients for now.

• You will now change your fill color from red to a specific shade of green. If you want to follow my example exactly feel free, or choose another color to your liking! I made green with a Red value of 99, a Green value of 197 and a Blue value of 115. You can find and update these RGB values in the bottom half of the Color panel. Also note the fourth value of A or alpha. Let’s take a few moments to explore alpha color, as it will become a valuable part of your color arsenal.

• Type 10 as the value for A and press return. Your logo will become extremely faint because you have just set the opacity of the color to 10%. It’s important you don’t confuse the opacity of an alpha color with the Opacity value of the object. To clarify: your logo still has an opacity of 100%, it’s just the fill color that is set to 10% using alpha.
• Type 100 as the value for A and this will restore it to the pure color. Now you’ll add another Fill on top of this one, but this will be a gradient with a little more complexity.
• Click on the “+” sign located on the far right of the Fills panel to add another fill. By default, this new fill obscures the first one, until you change the opacity that is!

Click on the linear gradient option (the second icon from the left) and a gradient tool with two color stops appears on your logo. In addition, a default gradient will appear.

(Chances are your gradient will look like mine, if not it’s because I believe that Sketch “remembers” the last setting used for gradients, you will be able to ‘reset’ your style in the next step.)

It’s worth exploring the properties of a gradient in Sketch, since it may not be immediately obvious. My logo, for example, starts light at the top and then fades to dark and my green fill color is still apparent, why is that? (Here’s a hint, it has to do with the alpha color value we just looked at.)

Click the bottom circle of the gradient editor (this circle is called a “gradient stop”) and then look at the RGBA values. The value for R, G and B are all 0 which typically displays as pure black, but if the A value is set to 50 (as mine is) this displays as a 50% black or middle gray.

• Now choose any color you’d like in the color picker or if you’d like to continue following my example, type 86 for R, 104 for G and 180 for B. This results in a shade of blue with an opacity of 50%.
• Now click the white gradient stop (at the top of the gradient editor)and drag it to the top-left corner of your logo. If the Alpha value is currently 50, leave it alone, otherwise go ahead and type 50 now.

You can see that the overlay of the semi-transparent gradient and the solid fill create a nice, complex color, and you’re only using two layers. It’s not unheard of to have three or four fill colors interacting with each other for unique effects. The advantage here is that you can experiment with either of the fills without affecting the other. To experiment with this try changing the base color fill or adjusting the gradient.

(If you’re a little more experienced, Sketch also has blending modes for the color fills or you could create more complex gradients using the gradient editor.)

Working with borders and other effects

Web design is firmly in the “flat” era at the moment and this is reflected in Sketch’s feature set. For example, you will not find the vast array of layer styles that have been used and abused in Photoshop for years (bevel, emboss, molten glass, etc.) What you will find are styling options that by and large translate directly to features found in CSS including borders, shadows and blurring. Let’s just take a look at borders and shadows for now. Earlier in the tutorial I had you remove the border from your logo entirely, let’s add it back on and then experiment with some of the options.

• Make sure your logo is selected, then click on the checkbox to the left of the color swatch in the Borders section. You may not see a noticeable change because the default thickness is set to 1. In addition to Thickness you also have Color and Position options.

Click inside the field for Thickness and press the up arrow on your keyboard to increase the size of the border to 10. This border size is a little heavy handed, but it will help you better understand border effects.

• Click the Borders color swatch and experiment with different colors. Don’t get too carried away, though; you’ll be adding a gradient border shortly.
• Within the Color panel, click on the linear gradient option. You’ll now manipulate the color and direction of this gradient to create an interesting effect similar to a bevel (but perhaps with a bit more sophistication!).
• Click on the top color stop in the gradient editor and then drag it to the top edge of the top-left circle. Change the color to a blue-green shade; I used the hex color 38968F.

Now click on the color stop at the bottom of the gradient editor and change the color to a lighter blue. I used 92BBD7. I didn’t move this bottom color stop, but feel free to experiment on your version.

You can create quite complex effects using the preceding techniques, but lets look at one more tool in your arsenal: shadows.

• Click on the plus sign in the Inner Shadows section to add the default shadow. If you’ve ever worked with shadow effects in other programs the options here will be familiar. The values X and Y allow you to position the shadow horizontally and vertically. The Blur property allows you to control the amount of blur and the Spread property defines the “falloff” of the shadow with larger numbers creating a larger shadow. I used the following values X = 3, Y = 12, Blur = 3 and Spread = 2.

Feel free to tweak any of the various attributes of the logo to suit your taste, but you’ll stop here for now and add some text for the logo. You’re almost at the finish line!

Adding Text

The text features in Sketch are not as sophisticated as Photoshop and Illustrator but are sufficient for our needs.

• Click on the eye icon for the “vectorflo-handdrawn” layer to bring it back into view.
• Choose Insert > Text and then click once in the area of the letter “v” and the insert text cursor will appear.
• Click on the Typeface menu and if you have Helvetica Neue then choose it. If you don’t have Helvetica or Helvetica Neue, then choose Arial as a last resort, but please never use Arial for real logos!
• Additionally, if you have Helvetica Neue, click on the Weight menu and choose Ultra Light if available.
• Now type the word vectorflo and set the font size to 96.

You want the text to be centered below the logo, but don’t try to be faithful to the sketched version. Click and drag the text layer until you see the smart guides appear indicating that it is truly centered.

• Now that the text is all set, your hand-drawn layer is officially a distraction. Click on the eye icon to turn it off. There is no need to delete the layer unless you want to reduce the file size slightly.
• Most professional logos have text that modified in some way, it is seldom good enough “out of the box”. In our example (zoom in if you need to) look at the space between the letter “r” and “f”. The letters are touching and that space could be opened up slightly. Let’s see how Sketch does this.
• Double-click the type layer if necessary and then select the letters r and f and then place your cursor over the word “Character” in the Spacing section. When you see your cursor change to a double arrow this indicates that you can now click and drag to the left or right to change the spacing. Because you want to expand the space, you should drag to the right until the value reaches approximately 8 or whatever value you prefer.

Notice in my example that the spacing is changing not just between the characters r and f, but r, f, and l. If you wanted to adjust the space between r and f only and nothing else, you would need to select just the letter r and perform the same operation. Give it a try to see the difference and then find a balance that works for you.

Nice work! The only thing left to do is export.

Exporting your Graphic

Exporting is another one of Sketch’s strong suits. In today’s web environment with its plethora of high resolution screens and mobile devices there is an increasing need to export images in multiple sizes, resolutions and formats. To see how Sketch handles this, you will now export your logo in a number of ways including both bitmap and vector.

• Make sure nothing is selected on your page and then choose File > Export and Sketch will automatically define a box around your logo. This box is technically called a slice and you can see the slice icon has appeared in your Layers List. Sketch uses the name of your document as the default slice name.

Sketch will automatically define the boundaries of the slice but you can adjust manually by clicking and dragging the edges of the slice or typing values into Size field. For example, I wanted my height and width to be equal so I typed in 400 for height and 400 for width. I then repositioned the slice to ensure even distribution of space on all four sides.

• In the Export panel you will note that there are settings for Size, Suffix and Format. The default value for Size is 1x, Suffix is currently empty and Format is PNG.

A 1x Size simply means your graphic will be exported at 100% size (which is currently 400 pixels by 400 pixels). The Suffix field allows you to add an automatic file name and is typically only used when creating multiple exports. The Format is simply the file type, Sketch can export the following bitmap formats: PNG, JPG, TIFF and for vector: SVG, EPS and PDF.

• Click on the (+) on the right side of the Export section and another row of settings appears. Now the Size is 2x, the Suffix is @2x and the Format is still PNG. If you chose this setting your graphic would be exported at twice its current size (so 800 x 800) and the suffix “@2x” will be added to the file name to distinguish it from the base image.
• Click on the (+) one more time. Sketch automatically adds a 3x value, but that can be changed. Click on the Size menu and select 0.5x from the list and note the suffix reflects this change. Choosing this option will export an image 50% smaller than the original so 200 pixels x 200 pixels.

• Click the (+) one more time and now click on the Format menu and change it to SVG. Since this is a native vector format the Size menu is now grayed out. Select the @3X value within the Suffix field and delete it.
• Click the Export vectorflo-logo button at the very bottom of the Inspector and the Export window appears. Click the New Folder button in the bottom left and name it vectorflo-exports and then click Export. If you navigate to that folder you will see three files, three of which are the PNG files and one of which is the SVG file.

Congratulations! You made it to the end of the tutorial. Hopefully you know more about creating artwork in Sketch then when you started. If you liked this tutorial, check out the free courses on topics such as UX, responsive web design and much more at Aquent Gymnasium. Hope to see you there.

Further Resources

I was going to come up with some Sketch Resources on my own but I’m just going to point you to the superb list that James Young (@jydesign) has put together here. Thanks James!

Acknowledgements: Thanks to Justin Gagne, Matt Grant and Andrew Miller for their invaluable help with this article.

Sketch Tricks

Creating a vector logo in Sketch 3 was originally published in Gymnasium on Medium, where people are continuing the conversation by highlighting and responding to this story.

Do you advertise on the web or know someone who does? When it comes to mobile ads, you may be wasting your money if a responsive website is not part of the equation. (If you don’t know what responsive design is at this point, I’ve got you covered, I conveniently teach an online course on the subject.) Let’s begin with a well known fact: More people are accessing the web on cell phones and tablets than ever before, AND the rate of increase from year to year is downright staggering, especially for phones. There is nearly one mobile-cell subscription for every human on the planet, an estimated 6.8 billion.

Impressive, no doubt, but is it still “news”? After all, it’s obvious if you look around that smartphones and tablets are everywhere. The real question is how does this change business behavior?

I’m more of a designer and and educator than a businessman, but I found a lot of value in recent data about how more money than ever is being targeted at mobile users. This fact illustrates something important about mobile strategy and responsive design as a whole. Let’s take a closer look.

Follow The Money

Every year in preparation for the Thanksgiving and Black Friday consumer spending frenzy in the United States, businesses have to decide how much money they will spend on targeting potential customers who are searching for stuff on the Web. Specifically they have to decide where they will allocate those dollars: Will they target computer users (laptops, desktops) or will they target phone or tablet users?

So let’s follow that cash: Over the two day span of November 25 & 26 in 2013, businesses spent twice as much money targeting ads for tablet users and almost twice as much on phone users than they did a year ago. Here are the specific data points if you’re interested:

In 2012 on Thanksgiving and Black Friday, businesses focused 79.5% of their budgets on computer users, 11.8% on phone users and 8.7% on tablet users.

This year, only 60.3% went to computer users, while 21.2% went to phone and 18.5% to tablet users.

- (Source: http://www.kenshoo.com/blog-post/thanksgiving-black-friday-2013)

Those are fairly significant numbers when you consider 5 years ago nearly 100% of that budget was for computers, heck, tablets weren’t even a category! Instead of focusing on the abstract stats, though, let’s look at one simple example.

Samantha’s life will change with a little help from Responsive Design

Samantha is 25, and her gums have just been shot up with a hefty dose of Novacaine. She’s about to get a cavity filled and has 15 minutes until the dentist returns. Samantha’s been thinking about getting a commercial license to drive a truck and with this found time on her hands, she launches the browser on her smartphone and types in “cdl training” into Google’s search engine (she’s done a little research already). A few sponsored ads appear and she taps the first result for “King’s Driving School”.

The site that appears is very different than what she would see if she were on a desktop computer. She sees a home page with vertical navigation, the two top items “Call us” and “Find us” might have been helpful if that’s what she was here to do, but she has no idea who this company is, what their reputation is or anything else. All she has to go on is what she sees here.

She taps on the link for Commercial Vehicles, but the resulting page is generic, uninspiring and does not compel her to explore further. She exits the site.

Strike one.

Samantha goes back to the search results and tries the next result. For some reason the page doesn’t load immediately, she waits for 9 or 10 seconds watching the loading animation, grows impatient and then leaves.

Strike two.

She goes back to the search results and is thinking about abandoning this whole web browsing thing and going for level 165 of Candy Crush, but gives it one more shot.

On the third site there are some clear and strong messages on the home page that speak to Samantha. She scrolls down the page and likes what she sees.

She explores a bit, but the next step is clear, she’s got about 10 minutes left before the dentist comes back and so she decides to apply for training right there and then.

The application is a 5 step process broken up logically into separate forms and it’s pretty thorough: asking for personal information, past work history and all sorts of things, it takes Samantha about 7 minutes to fill out and when she finishes the last step she sets up an appointment to have her application reviewed. I’ll take some literary license here and let you know that she went for the training the next week, eventually passed her exam and is loving her new job.

Home run.

What went wrong for sites #1 and #2?

Samantha’s new job began with the results of a Google search found while sitting in a dentist’s chair. Let’s break down why site #3 won her attention and not the first two. The owners of the first site were savvy enough to buy an advertisement targeted for mobile users (btw, yeah you can do that now using Google’s “enhanced campaigns”) and then send them to their mobile site, but their site was “mobile” in only the most technical sense, it didn’t do any of the other things that make a website compelling such as including clear and engaging content or a focused marketing message. There is no silver bullet that makes a website effective just because of its format or template (which is true of any website really), Brad Frost put it best in his 2012 article Missing the Point:

Your visitors don’t give a shit if your site is responsive. They don’t care if it’s a separate mobile site. They don’t care if it’s just a plain ol’ desktop site. They do give a shit if they can’t get done what they need to get done.

Let’s expand on Brad’s point and look at the second site’s problem. Actually, that site might have had really great content, design and marketing messages, maybe even better than site #3, but we’ll never know because the page never loaded. Perhaps the images were too large or maybe it was using a bloated content management system, maybe the owner cut corners with a cheap server, whatever the issue was, after 10 seconds Samantha was history.

The third site (the successful one) not only had a pleasing design and strong, yet simple content but the home page had a file size of 287k, (roughly 75% smaller than the average web page these days), this resulted in speedy load time and performance while Samantha was stuck in the dentist’s chair. More importantly, the entire user experience was carefully considered, everything from the home page to the design of the forms and this makes all the difference in the world. Oh and did I mention that the site was responsive? This means the content on the phone and the desktop are one and the same and so if Samantha waited until she got home on her PC everything would have looked very familiar and possibly be even more compelling by taking full advantage of the larger desktop screen.

A “mobile strategy” is simple: if you pay for an ad that targets mobile users, make sure the destination site is responsive.

Resources from this article:

• My free responsive web design course at Aquent Gymnasium.
• The 2013 ITU World Telecommunication/ICT Indicators report. Lots of great data on trends around the world.
• HTTP Archive’s trends in load times.
• Kenshoo’s post on Mobile paid search on Thanksgiving and Black Friday.
• Brad Frost’s article “Responsive Web Design: Missing the Point”.

Does your Mobile Strategy have an end game? was originally published in Gymnasium on Medium, where people are continuing the conversation by highlighting and responding to this story.

In November 2013 I attended the Artifact Conference in Providence, RI for two days. The conference was adeptly organized by Jennifer Robbins (@jenville) and Christopher Schmitt (@teleject) and billed as a conference for “DESIGNERS who are adapting to the challenge of designing for a MULTI-DEVICE world”.

Like all great conferences, I came away energized and inspired with all of the great discussions and ideas that were bouncing around, but also with a small sense of relief as I watched a number of speakers confirm thoughts, trends and processes that I have been observing recently. My job requires me to stay closely on top of industry trends, and responsive web design is certainly a topic which I have more than a passing interest in!

So, there were a lot of themes that could be extrapolated from the talks given over the two days, but two stuck out as being particularly notable and I’d like to share them here.

The evolving landscape of the web

We are living in a really interesting time for web design and development, the fundamentals of HTML, CSS and Javascript as well as the technologies and services that surround and support them (browsers, GitHub and TypeKit to name just a few) are changing and growing on a daily basis.

In many ways this is nothing new, but it is the rapid ascent of designing for “mobile” that is altering the design landscape for good. This reality can best be confirmed by the multiple design professionals who over and over again said on stage a variation on this theme: “None of us *really* know what we’re doing!”.

Amid the uncertainty, clear trends are emerging

Of course these folks actually do know what they’re doing. You don’t get to keep making responsive sites such as The Boston Globe, Microsoft, Entertainment Weekly among others if you are clueless. The larger point is that the craft of web design and development is in yet another phase of re-invention and it’s worth taking a step back and clarifying what this means. Here’s my take on it:

1. The process of taking your content from inception to publication and how you collaborate with team-members and clients along the way could be called workflow. Specifically, a responsive workflow understands that the diversity of screen sizes and devices requires a new way of interpreting content and new methods of collaboration.
2. Responsive design is forcing site performance to get a true seat at the table. Slow-loading and bloated sites are just as much of a design flaw as confusing layout, clashing colors, and the rampant proliferation of typefaces on a page.

Responsive workflow is disrupting past methods of page design

Let’s examine responsive workflow first: the goal of making web pages that are adaptable is not a new idea and yet we have held onto some concepts that are not so adaptable for years. The most notable example may be page designs based on mockups in Photoshop. Photoshop mockups are fixed-width by default. The responsive web is not fixed-width. Done deal, we need to move away from Photoshop right? Actually it’s more complex than that, there is no consensus on the matter, however many designers are relying on Photoshop less and some are even abandoning it altogether.

Sounds intriguing right? But if Photoshop page mockups are out, what takes their place? Plausible alternatives are emerging. For example, consider the use of style tiles or element collages two related techniques used to help pin down the look and feel of a site without resorting to a “mockup”. The idea here is to obtain consensus on the direction of a design, and then move into the browser as early as possible. One of the best quotations to illustrate this updated workflow was from Kevin Sharon and Sophie Shepherd’s presentation “A New Toolbox”:

“Most of what I do doesn’t look like a website.”

This relates specifically to the style tile and element collage concepts mentioned earlier but is also tightly connected to the idea that today’s modern designer needs to be continually involved (for realsies!) in all stages from research to final documentation. However you slice it, the times are a changing if you consider yourself a “responsive” designer or developer.

Site performance no longer an afterthought

The second trend involving site performance was well represented on the second day of the conference by Ethan Marcotte who kicked things off with a call for designers to improve the health of the web, specifically he encouraged asking the following question:

“Is this design worth its performance cost?”

The average file size of a web page in December of 2013 is approximately 1.635 megabytes. So every time you load a single page on the average website you are downloading more data (by about 200kb) than fits on the floppy disk used back in the day.

The increasing size of web pages shows no signs of slowing down, and it’s a markedly unhealthy situation. Slow-loading sites are one of those universal frustrations that cut across every single category of user you have. I ride the subway to work everyday, and magically there is always some network connection, albeit often a weak one. As I observe my fellow passengers on their phones and tablets I wonder how many sales are being lost, how many articles are never fully read, how much productivity is being wasted all because a site is not optimized for this scenario.

Images are the primary culprit behind page bloat and admittedly, dealing with the landscape of responsive images feels like a descent into the lower circles of Dante’s Hell. To deal effectively with responsive images you need a sense of humor as exemplified by my new hero Dave Rupert, whose presentation Mo’ Pixels, Mo’ Problems was one of the highlights of the entire conference. Yes, dealing with the page bloat incurred by images is a little tricky, start with basic solutions such as image optimization and mindful use of background images and you’ll be ahead of the pack already.

Making responsive websites accessible, beautiful and low-weight is absolutely within our reach and totally worth the effort. The distinction between “web design” and “responsive web design” is feeling sillier every day. How long before every project is responsive?

Further Resources
Many of the presenters put their slides online. I’ve provided links to some of them here as well as a few other resources.

• My course on Responsive Web Design includes lessons relating to the highlights of this article, Responsive Workflow, Optimization & Performance and Responsive Images.
• Responsive Layouts beyond the Sidebar by Jen Simmons (@jensimmons)
• Get your (Visual) Style On by Yesenia Perez-Cruz (@yesenia) and Ben Callahan (@bencallahan)
• A New Toolbox by Kevin Sharon (@kevinsharon) and Sophie Shepherd (@sophshepherd)
• Artifact Bookmarks offers a goldmine of online resources gathered by Artifact attendee King Design (@KingDesignLLC).

Responsive Web Design Trends was originally published in Gymnasium on Medium, where people are continuing the conversation by highlighting and responding to this story.