Collective #355
Vue.js Style Guide * Vuera * GSDevTools * UI Avatars * reactjs.org * Dropbox Design * Pageclip * React Static…
Vue.js Style Guide * Vuera * GSDevTools * UI Avatars * reactjs.org * Dropbox Design * Pageclip * React Static…
Words are the primary component of content for the web. However, until a short while ago, all we had at our disposal were but a few system fonts. Adding to that, those system typefaces weren’t necessarily coherent from operating system to operating system (OS). Fortunately, Windows, macOS and Linux made up font-wise, and since then, all modern fonts have been compatible across those OS’. There’s no question, the future of web typography looks promising.
And it’s looking more and more promising, too. At the 2016 ATypI conference, the world’s biggest type design conference, Microsoft, Google, Apple and Adobe announced that they have been working on a new iteration of the OpenType standard, called variable fonts. Because it gives a lot more control to the user to modify the typeface depending on the context and device, this new version opens new opportunities for web typography and will close the gap in quality between web and print.
Variable fonts and parametric fonts are tools that will undeniably revolutionize responsive web type. They will allow graphic and web designers to explore shapes and sizes on their own and to tailor typefaces to their needs. Let’s learn the ins and outs of these new tools and how to take control of our typography.
Fluid layouts have been a normal part of front-end development for years. The idea of fluid typography, however, is relatively new and has yet to be fully explored. Read a related article →
When a paradigm shift comes forth, such as a new medium for typography, the first thing it encounters is resistance. We feel like we need to push the status quo to its limit before it can break free and make room for a new way of thinking. Typography is no exception, and for a long time designers have considered screen as paper made of pixels instead of trees. Typefaces used on computers were, and still are for the most part, just a static embodiment of physical fonts. Sure, the screen medium brought with it a number of necessary and extra elements, such as hinting, but the legacy of physical fonts still resonate strongly in type design.
Still, it feels like digital typography is behind physical typography on a range of issues, not so much in the diversity or quality of design, but in the huge fragmentation of screen media. For print design, a cast of physical fonts could be optimized depending on the sizes and shapes of the letters to increase readability. Once the fonts were produced, the result was the same every time; you got exactly what you paid for.
On a screen, it’s a lot more complicated. Once you’re lost in a forest of DPI values and different renderers, what the user gets is all up in the air. And because type designers have little incentive to produce different optical sizes, a lot of digital typefaces include only a couple of them, which hinders the readability of web typography.
When a graphic designer works on a poster, they already know how it will be displayed or distributed. They know the size of the poster, the size of the font, the colors they will use, etc. All of these are known variables that will contribute to their design choices. Also, the designer knows that, once it’s done and printed, the design will not change, and all viewers will experience the same poster.
Let’s look at another aspect that is difficult to fix in web typography: rags. Rags are easy to deal with in print: You can adjust the tracking a bit, insert line breaks or hyphenate to clean up the rags. Unfortunately, achieving this degree of detail in web typography is more complicated. The width changes, and the font size can be changed by the user. The dynamism of web pages makes it difficult to make the right choice of size, letter-spacing, etc.
Fortunately, it is possible to gather some data about the context in which your website will be browsed. Thanks to CSS and JavaScript, you can adapt the typography of a web page. However, as easy as it is to change the size of a typeface gradually, it is still impossible to easily change from one variant to another progressively. The only option left is to set up breakpoints, with one variant on one side and another on the other side.
Loading more variants has a price. Adding 150 KB of fonts might not seem like a bad trade-off, but it compounds every time you add a new font to the website. Because loading time is a major factor in the bounce rate of a page, you wouldn’t want users to bail just because your web page has too much to load.
Having described the challenges of web typography, let’s dive into the heart of the matter. We’ll go deep into the two main technologies that help us make great typography for the web: variable fonts and parametric fonts.
With the ATypI 2016 conference on variable fonts, variable fonts have made a big entrance on the web. They’re pushed by the biggest names in web browsing (Google, Adobe, Apple and Microsoft), and they are here to stay.
If you want to see what people do with and say about variable fonts, we’ve gathered resources from around the web. You’ll have to use a browser that supports variable fonts, either Chrome from version 59.0 or Firefox from version 53.0:
The best source of news on variable fonts is, without question, the Twitter feed led by Nick Sherman, who collects everything on the web about variable fonts (and for which we should be grateful).
Thanks to the new variable fonts format, it will be possible to precisely adapt typography to its context. Variable fonts are based on a pretty simple idea: They contain several variants of a single typeface or, more precisely, a master variant and deltas from other ones, and the user is free to choose an interpolation of these different versions using only CSS. For example, the typeface could contain a light variant and a bold variant, and you would be able to choose a weight between these light and bold weights using CSS, like so:
h2 { font-variation-settings: "wght" 200;}
Variable fonts are picky. For them to work, all masters of the font’s base variants must have exactly the same number of points. Morphing between two shapes will be smooth and unique only if the shape you start from and the shape you end up with are similar. Nevertheless, some type creators are used to designing for masters for variable fonts. A similar concept was used for Adobe’s “multiple master” format, and type designers use interpolation to create extended families with tools such as Superpolator. Yet font-variation-settings
is still not prevalent in web browsers, and as of the time of writing, only Firefox has implemented the feature. But others should soon follow suit.
There are still a lot of hurdles to jump before variable fonts become an integral part of responsive web typography. Making them is a long endeavor, and type designers now have to think about variations from the get go in order to create typefaces that take full advantage of these new features. Even though converting old typefaces to variable fonts is possible, the old ways are not necessarily suited to the new and more relevant uses that we’ve discussed:
Unfortunately, variable fonts don’t solve every problem with responsive web typography. For example, how do we reduce the number of media queries? How do we handle outliers? How do we make the typeface a part of the web page?
Parametric fonts are intended to fix these issues. They differ from variable fonts in concept and production. They put customization logic at the heart of the font, instead of letting a software do the transformation. All typographic rules are inherently a part of the font, but the font is still easily customizable on the user’s side.
Parametric fonts are an old idea that seems to be revisited regularly by people from different backgrounds. It looks to solve the same issues that variable fonts solve but coming from a more automated way of thinking. So, it has usually been a subject tackled by computer scientists who take an interest in type design.
As with variable fonts, we’ve gathered links from around the web that deal with parametric fonts and their history:
It’s been almost 40 years since Donald Knuth pioneered the concept of parametric fonts. By creating Metafont and Tex, Knuth opened up a new era of typography, in which typefaces were created using a series of steps and equations to describe each character.
That’s the big difference between variable fonts and parametric fonts. Variable fonts are interpolated, meaning that they are confined in a design space. The designer is not able to escape this space; moreover, adding dimensions to it requires the type designer to create a new master (i.e. a completely new font). Parametric fonts are extrapolated, meaning that they emerge from a single definition. The space in which they live is not limited because they behave like a mathematical object.
Take the simple example of a circle. In a variable font world, the type designer would produce two circles and tell you, “Choose either of these circles.” In a parametric font world, the type designer would tell you, “Give the font a radius, and it will produce a circle of that radius.”
Adding a new dimension to your design space is easy with parametric fonts. For variable fonts, it would mean creating a new master. For a parametric font, you just have to bake the new dimension into the existing equations.
It is also easy to add constraints or to alter the rate of change of some points using parametric fonts. As well, you can add logic directly into the font.
Parametric fonts are pretty easy to use, and the result can look gorgeous. As we’ll see in the examples, parametric fonts can mitigate optical differences between different colors of text. You can also create text that responds to its context or to any interface you can imagine.
To make life easier for you, we’ve created Prototypo, a free web application for tweaking and adjusting parametric fonts. You’ll need a subscription to take full advantage of parametric fonts. But in the free version, you’ll be able to use subsetted fonts that contain lowercase and uppercase glyphs (no diacritics or figures). The paid subscription unlocks the full fonts.
Here’s how to start experimenting with parametric fonts:
The extension can be used to try out parameters for different display sizes and layouts. The extension lets you replace the typefaces on your website. All of the modifications you do in Prototypo are applied to your website in real time. This is the perfect tool to try out different optical weights and widths for your fonts in their final context.
The other option is to use Prototypo parametric technology directly. We’ll explain how you can add the Prototypo library to your website. You’ll be able to create parametric fonts on your website and make them interact as your users need. You can see examples of the parametric technology in our lab. For example, you can use a Kinect to generate fonts, or morph and switch letters based on the current timestamp. We’ll discuss how it works and how you can use it in your projects, including how to:
This is the tag you will have to add to your HTML to import the Prototypo library.
<script type="application/javascript" src="https://library.prototypo.io/ptypo.js"></script>
You can also import this script asynchronously, but you’ll have to wait for its load
event to use the library:
<script async type="application/javascript" src="https://library.prototypo.io/ptypo.js"></script><script type="application/javascript"> document.getElementById('script').addEventListener('load', function() { // You’ll have access to the Ptypo global variable here });</script>
So, what can this library do for you, you ask? Well, it will create a Ptypo
global variable that we will use to create our parametric font.
Let’s look at an example to better understand how we can use the library.
See the Pen bRKbxY by Francois Poizat (@FranzPoize) on CodePen.
For the first example, we will try to create a font whose weight looks the same whether written in dark on light or light on dark. Text tends to look bolder when written light on dark because light colors tend to bleed on dark colors, making the lighter font seem heavier.
We’ll make a simple HTML document that can be switched from light mode to dark mode, and we will change the parameters of the font accordingly. You could also have several color schemes and produce parameters that would look the same for each color scheme.
Let’s start by creating our font factory.
const ptypoFactory = new Ptypo.default();
Here, you can use your token if you subscribe to the Prototypo application. (You can find more information about that in our documentation.)
Once we have our font factory, it’s time to start creating fonts. For the dynamic part of this example, we’ll create two fonts — named titleFont
and paragraphFont
for the h1
heading and the paragraph, respectively.
ptypoFactory.createFont( 'titleFont', Ptypo.templateNames.ELZEVIR).then(function(font) { //Setting up the right parameters font.changeParam('thickness', 110);});ptypoFactory.createFont( 'paragraphFont', Ptypo.templateNames.GROTESK).then(function(font) { font.changeParams({thickness: 70, spacing: 0.5});});
The title font uses the Elzevir template, which is a serif template, and the paragraph font uses the Grotesk template, which is a sans-serif. We can set the parameters as we please (you can change the value if you want).
As you can see, we can modify the parameters in two ways:
font.changeParam('nameOfParameter', parameterValue)font.changeParams({ parameter1: parameter1Value, parameter2: parameter2Value, parameter3: parameter3Value …});
You can learn more about the different parameters available in our API documentation.
Now we need to write the HTML that goes with it and the CSS that will assign the correct font to the correct element.
<div> <h1> With Param </h1> <p> Lorem ipsum dolor sit amet.. </p></div>
h1 { font-size: 100px; font-family: 'titleFont'; font-weight: normal;}p { font-size: 18px; line-height: 24px; font-family: 'paragraphFont';}
Here, we’ve created a heading and a paragraph of text and attached the correct font to them: titleFont
for the heading and paragraphFont
for the paragraph.
We now need to create a button to switch between light and dark mode and create the functions that will modify the fonts.
<a href=”#”> Dark mode</a>
There are many ways to modify our fonts. What we will do is create an array that we will fill with an object literal containing our functions once the fonts are created.
const fontToggles = [];ptypoFactory.createFont( 'titleFont', Ptypo.templateNames.ELZEVIR).then(function(font) { //Setting up the right parameters font.changeParam('thickness', 110); //Storing the function that will be used to change from light to dark //and vice versa fontToggles.push({ lightMode: function() { font.changeParam('thickness', 110); }, darkMode: function() { font.changeParam('thickness', 107); }, });});ptypoFactory.createFont( 'paragraphFont', Ptypo.templateNames.GROTESK).then(function(font) { font.changeParams({thickness: 70, spacing: 0.5}); fontToggles.push({ lightMode: function() { font.changeParam('thickness', 70); }, darkMode: function() { font.changeParam('thickness', 50); }, });});
In this part, we start by creating a font using the ptypoFactory.createFont
method.
Ptypo.templateNames.ELZEVIR).then(function(font) { ...});
Once the font is created, we put in default parameters for the thickness. We’ve decided to put a thickness of 110
for the heading font and a thickness of 70
and a spacing of 0.5
for the paragraph font.
font.changeParams({thickness: 70, spacing: 0.5});
For each font, we will add an object to the fontToggles
array. This object will contain a lightMode
and a darkMode
property. These two functions are to be executed when the page enters light mode and dark mode, respectively, using our button.
fontToggles.push({ lightMode: function() { font.changeParam('thickness', 70); }, darkMode: function() { font.changeParam('thickness', 50); },});
Now we can add our listener on the click event of the button and use the functions contained in the array to modify our font according the mode we are in.
let button = document.getElementById('dark-button');button.addEventListener('click', function(e) { document.body.classList.toggle('dark'); fontToggles.forEach(function(toggle) { toggle[document.body.classList.contains('dark') ? 'darkMode' : 'lightMode'](); }); e.preventDefault();});
Thanks to this code, once we click on our dark-mode button, it will add the dark
class to the body
. It will loop through our font, modifying functions and executing the darkMode
one if there a dark
class on body
and executing lightMode
if there is no dark
class on body
.
In our example, we’ve included a font that does not change in dark mode, to show what the difference will be between the regular font and the slightly modified one.
In this example, we’re going to create several fonts, one for each city’s weather that we want to display, customized using the temperature and wind speed of the given city. The thickness of the font will be tied to the temperature, and the slant will be tied to the wind speed.
See the Pen ayYevr by Francois Poizat (@FranzPoize) on CodePen.
First, we’ll create a list of the cities we want to display.
const cities = [ 'Lyon', 'Padova', 'Rennes', 'Tokyo', 'Johannesburg', 'Moscow', 'Beijing', 'San Francisco', 'Marrakech', 'Trondheim',];
We’ve chosen cities from around the world, to have a nice range of temperatures and wind speeds.
function yahooApiQuery(city, callback) { if (!city || !callback) { throw new Error('$.YQL(): Parameters may not be undefined'); } const encodedQuery = encodeURIComponent( `select * from weather.forecast where woeid in (select woeid from geo.places(1) where text='${city}')`.toLowerCase() ); const url = `https://query.yahooapis.com/v1/public/yql?q=${encodedQuery}&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=?`; $.getJSON(url, callback);};
This function requests the Yahoo weather API (which comes with documentation). We’ll use jQuery’s getJson
function to get the JSON from the API.
function getValueAndChangeFont(city, font) { yahooApiQuery( city, function(data) { font.changeParams({ thickness: parseInt(data.query.results.channel.item.condition.temp) * 2, slant: parseInt(data.query.results.channel.wind.speed), }); } );}
We’ve created a function that takes the name of a city and the font. Then, we’ve requested the weather for this city and changed the parameters of the font according to the temperature and wind speed.
font.changeParams({ thickness: parseInt(data.query.results.channel.item.condition.temp) * 2, slant: parseInt(data.query.results.channel.wind.speed),});
The other option is to use Prototypo parametric technology directly. We’ll explain how you can add the Prototypo library to your website. You’ll be able to create parametric fonts on your website and make them interact as your users need. You can see examples of the parametric technology in our lab. For example, you can use a Kinect to generate fonts, or morph and switch letters based on the current timestamp. We’ll discuss how it works and how you can use it in your projects, including how to:
This is the tag you will have to add to your HTML to import the Prototypo library.
<script type="application/javascript" src="https://library.prototypo.io/ptypo.js"></script>
You can also import this script asynchronously, but you’ll have to wait for its load
event to use the library:
<script async type="application/javascript" src="https://library.prototypo.io/ptypo.js"></script><script type="application/javascript"> document.getElementById('script').addEventListener('load', function() { // You’ll have access to the Ptypo global variable here });</script>
So, what can this library do for you, you ask? Well, it will create a Ptypo
global variable that we will use to create our parametric font.
Let’s look at an example to better understand how we can use the library.
See the Pen bRKbxY by Francois Poizat (@FranzPoize) on CodePen.
For the first example, we will try to create a font whose weight looks the same whether written in dark on light or light on dark. Text tends to look bolder when written light on dark because light colors tend to bleed on dark colors, making the lighter font seem heavier.
We’ll make a simple HTML document that can be switched from light mode to dark mode, and we will change the parameters of the font accordingly. You could also have several color schemes and produce parameters that would look the same for each color scheme.
Let’s start by creating our font factory.
const ptypoFactory = new Ptypo.default();
Here, you can use your token if you subscribe to the Prototypo application. (You can find more information about that in our documentation.)
Once we have our font factory, it’s time to start creating fonts. For the dynamic part of this example, we’ll create two fonts — named titleFont
and paragraphFont
for the h1
heading and the paragraph, respectively.
ptypoFactory.createFont( 'titleFont', Ptypo.templateNames.ELZEVIR).then(function(font) { //Setting up the right parameters font.changeParam('thickness', 110);});ptypoFactory.createFont( 'paragraphFont', Ptypo.templateNames.GROTESK).then(function(font) { font.changeParams({thickness: 70, spacing: 0.5});});
The title font uses the Elzevir template, which is a serif template, and the paragraph font uses the Grotesk template, which is a sans-serif. We can set the parameters as we please (you can change the value if you want).
As you can see, we can modify the parameters in two ways:
font.changeParam('nameOfParameter', parameterValue)font.changeParams({ parameter1: parameter1Value, parameter2: parameter2Value, parameter3: parameter3Value …});
You can learn more about the different parameters available in our API documentation.
Now we need to write the HTML that goes with it and the CSS that will assign the correct font to the correct element.
<div> <h1> With Param </h1> <p> Lorem ipsum dolor sit amet.. </p></div>
h1 { font-size: 100px; font-family: 'titleFont'; font-weight: normal;}p { font-size: 18px; line-height: 24px; font-family: 'paragraphFont';}
Here, we’ve created a heading and a paragraph of text and attached the correct font to them: titleFont
for the heading and paragraphFont
for the paragraph.
We now need to create a button to switch between light and dark mode and create the functions that will modify the fonts.
<a href=”#”> Dark mode</a>
There are many ways to modify our fonts. What we will do is create an array that we will fill with an object literal containing our functions once the fonts are created.
const fontToggles = [];ptypoFactory.createFont( 'titleFont', Ptypo.templateNames.ELZEVIR).then(function(font) { //Setting up the right parameters font.changeParam('thickness', 110); //Storing the function that will be used to change from light to dark //and vice versa fontToggles.push({ lightMode: function() { font.changeParam('thickness', 110); }, darkMode: function() { font.changeParam('thickness', 107); }, });});ptypoFactory.createFont( 'paragraphFont', Ptypo.templateNames.GROTESK).then(function(font) { font.changeParams({thickness: 70, spacing: 0.5}); fontToggles.push({ lightMode: function() { font.changeParam('thickness', 70); }, darkMode: function() { font.changeParam('thickness', 50); }, });});
In this part, we start by creating a font using the ptypoFactory.createFont
method.
Ptypo.templateNames.ELZEVIR).then(function(font) { ...});
Once the font is created, we put in default parameters for the thickness. We’ve decided to put a thickness of 110
for the heading font and a thickness of 70
and a spacing of 0.5
for the paragraph font.
font.changeParams({thickness: 70, spacing: 0.5});
For each font, we will add an object to the fontToggles
array. This object will contain a lightMode
and a darkMode
property. These two functions are to be executed when the page enters light mode and dark mode, respectively, using our button.
fontToggles.push({ lightMode: function() { font.changeParam('thickness', 70); }, darkMode: function() { font.changeParam('thickness', 50); },});
Now we can add our listener on the click event of the button and use the functions contained in the array to modify our font according the mode we are in.
let button = document.getElementById('dark-button');button.addEventListener('click', function(e) { document.body.classList.toggle('dark'); fontToggles.forEach(function(toggle) { toggle[document.body.classList.contains('dark') ? 'darkMode' : 'lightMode'](); }); e.preventDefault();});
Thanks to this code, once we click on our dark-mode button, it will add the dark
class to the body
. It will loop through our font, modifying functions and executing the darkMode
one if there a dark
class on body
and executing lightMode
if there is no dark
class on body
.
In our example, we’ve included a font that does not change in dark mode, to show what the difference will be between the regular font and the slightly modified one.
In this example, we’re going to create several fonts, one for each city’s weather that we want to display, customized using the temperature and wind speed of the given city. The thickness of the font will be tied to the temperature, and the slant will be tied to the wind speed.
See the Pen ayYevr by Francois Poizat (@FranzPoize) on CodePen.
First, we’ll create a list of the cities we want to display.
const cities = [ 'Lyon', 'Padova', 'Rennes', 'Tokyo', 'Johannesburg', 'Moscow', 'Beijing', 'San Francisco', 'Marrakech', 'Trondheim',];
We’ve chosen cities from around the world, to have a nice range of temperatures and wind speeds.
function yahooApiQuery(city, callback) { if (!city || !callback) { throw new Error('$.YQL(): Parameters may not be undefined'); } const encodedQuery = encodeURIComponent( `select * from weather.forecast where woeid in (select woeid from geo.places(1) where text='${city}')`.toLowerCase() ); const url = `https://query.yahooapis.com/v1/public/yql?q=${encodedQuery}&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=?`; $.getJSON(url, callback);};
This function requests the Yahoo weather API (which comes with documentation). We’ll use jQuery’s getJson
function to get the JSON from the API.
function getValueAndChangeFont(city, font) { yahooApiQuery( city, function(data) { font.changeParams({ thickness: parseInt(data.query.results.channel.item.condition.temp) * 2, slant: parseInt(data.query.results.channel.wind.speed), }); } );}
We’ve created a function that takes the name of a city and the font. Then, we’ve requested the weather for this city and changed the parameters of the font according to the temperature and wind speed.
font.changeParams({ thickness: parseInt(data.query.results.channel.item.condition.temp) * 2, slant: parseInt(data.query.results.channel.wind.speed),});
We’ve multiplied the temperature by two because most temperatures in Fahrenheit are between 0 and 100 degrees, and we want the thickness to be between 0 and 200, so that the contrast is stronger. We’ve left the speed of the wind untouched because it can probably take values from 0 to 40, which would be great as an angle for the slant.
const ptypoFactory = new Ptypo.default();cities.forEach(function(city) { $('#city-names').append( `${city} ` ); ptypoFactory.createFont( `${city}WeatherFont`, Ptypo.templateNames.GROTESK).then( function(font) { getValueAndChangeFont(city, font); } );});
For each city, we create a span
element that is styled with the right font family. We then create this font using Prototypo’s library. We go through the same process explained in the first example. Let’s create the factory:
const ptypoFactory = new Ptypo.default();
Then, for each city, we create the city’s font with the correct name, ${city}WeatherFont
, using our getValueAndChangeFont
function to customize the font.
This simple example shows how Prototypo can be very helpful for designing a new kind of data visualization: creating typefaces that are able to express more than the text, directly linked to data. Feel free to test this Codepen with your own city, to try others parameters (x-height, width, etc.) and to show us what you’ve achieved!
This concludes our examples. If you want to see more experiments we’ve created with the library, head over to our lab.
Parametric font technology will help us improve the user experience by enabling us to optimize how fonts are displayed on all sorts of devices. It also enables us to be more creative with fonts using context, outside variables and physical sensors to modify the input parameters. You just need to find ideas to tailor your typefaces to the experiences you want to provide:
Parametric font technology is both complex and powerful, and like every design tool, it goes awry when it’s used without constraint or perspective. But once you get the logic behind it, you will never go back to a simple breakpoint design.
The question now is, What would you do if you could morph typefaces to your every whim?
The only course you need to learn web development – HTML, CSS, JS, Node, and more. 94% of bootcamp students go on to get full-time developer jobs, and they started as beginners!
Editor’s Note: Welcome to this month’s web development update. It’s actually the first one that we publish, and from now on, Anselm will summarize the most important things that happened over the past month in one handy list for you. So that you’re always up to date with what’s going on in the web community. Enjoy!
Today, I’d like to begin this update with a question I’m asking myself quite often, and that was fueled by the things I read lately: Where do we see our responsibility, where do we see other people’s responsibilities? And how do companies fit in here?
With governments needing to make rules for how autonomous cars should behave in case of an incident, we can see how technological progress takes these questions to an entirely new dimension. Or take the Diesel gate affair that has been in the news all over the world these weeks. With software developers facing charges for their work, it showed us how important it is for employees to make their own decisions and to stand up for what’s right instead of blindly doing everything their bosses demand. Of course, this requires us to find our own position, our own path, and to stay true to it. An important thing we should reflect on more often if we want to make a change — not only in our work, but also in our community, and our lives.
navigator.share
, the WebUSB API, 8-digit alpha transparency hex-color codes, the CSS scroll-behavior
property, and the Visual Viewport API to the browser.object-fit
and object-position
, support for the Payment Request API, Service Workers, and WebVR.<meta name="twitter:dnt" content="on">
so that Twitter doesn’t track your visitors.We hope you’ve enjoyed this first monthly Web Development Update. The next one is scheduled for October 13th. Stay tuned!
We love exploring opportunities. While many of us are quite familiar with publications and events surrounding us, we often lack the global perspective on what’s happening in the web industry across the world. For example, do you know what the state of web design in Singapore is? What about front-end events in Kuala Lumpur? What about the acceptance of UX-driven processes in Hong Kong? That’s exactly what we want to find out!
For that reason, we’re happy to have teamed up with our friends at Mozilla for the Developer Roadshow Asia, so we can connect and learn from designers and developers in southeastern Asia. Together, we’re planning on organizing a series of informal, free meetup-style events for people who build for the web. On September 19th to 25th, folks from around the globe will be getting together in Singapore, Ho Chi Minh City, Kuala Lumpur, Penang and Hong Kong. Do join us, won’t you?
Five days, four countries, five cities: the Mozilla Developer Roadshow Asia aims to connect local communities and build lasting relationships. With our meet-ups, we’ll explore how agencies and companies in Southeast Asia work, and what their processes are like: from graphic design tools to build tools, frameworks and libraries.
We’ll also dive deep into bleeding edge web technology, such as VR, CSS Grid, Web Assembly and Service Workers. These are only a few of the topics that will be tackled on this journey, and there’ll be plenty of room to address key items that affect the browsers we use every day, too, of course! After the trip, we’ll sum up our findings in detailed articles right here, on yours truly Smashing Magazine.
If you happen to be in southeastern Asia this month, please join in as we’d love to meet you! Please check the schedule below to find out when the roadshow is coming to a city near you.
Date | Location | Time |
---|---|---|
Sept. 19, 2017 | Singapore @ PayPal | 6:00 PM – 9:00 PM (SST) |
Sept. 21, 2017 | Ho Chi Minh City, Vietnam @ Dreamplex | 6:00 PM – 9:00 PM (ICT) |
Sept. 23, 2017 | Kuala Lumpur, Malaysia @ MaGIC | 10:00 AM – 5:00 PM (MYT) |
Sept. 25, 2017 | Penang, Malaysia @ CAT | 10:00 AM – 5:00 PM (MYT) |
Sept. 27, 2017 | Hong Kong @ Credit Suisse | 7:00 PM – 10:00 PM (HKT) |
In case you can’t make it, we’ll be posting updates every now and then on Twitter @smashingmag and our dear friend Sandra Persing will make sure you don’t miss out on what’s happening, too. Make sure to mark your calendars! 😉
For those in the know-how and those in the loop, please share your experiences with us! We look forward to learning and exploring what’s happening in Southeast Asia, so feel free to get in touch with us via email anytime: roadshow@smashingmagazine.com — we’d love to learn from you!
If you won’t be able to join us this time, who knows, perhaps we’ll come to your part of the world as well. Stay tuned!
_Thanks to Cosima Mielke for helping to prepare this article._
User interface design has changed dramatically in the last few years, as traditional computers have ceded dominance to smaller screens, including tablets, mobile phones, smartwatches and more.
As the craft has evolved, so has its toolset; and from one app to rule them all — looking at you, Photoshop! — we have gotten to a point where it seems like a new contender among UI design tools crops up every month. And I have to admit that many of the new UI design tools look pretty good and promising.
The one app that seems to tower over everything else at the moment, though, is Sketch1. It has grown in popularity like I’ve rarely seen an app do in the recent past, and for a good reason: The developers of Sketch have figured out exactly what interface designers have been looking for and have steadily added functionality to address those needs. The pace of development of Sketch has been phenomenal, to say the least.
Yes, Sketch is Mac-only. I stayed away for a very long time simply because my entire team was using Windows. A couple years ago, I got my first Mac — a MacBook Air — and decided to give Sketch a try. I found Sketch so much better than my solution at the time (I was a proud Fireworks2 aficionado!) that I decided to invest in converting every one of our eight-member design team over to Macs and Sketch. We never looked back! Sure, the options were more limited then: Figma113 was not yet on the scene, Gravit Designer4 was just getting started, and Adobe XD5 was just a fledgling experiment, which we were not ready to bank on. That is not the case today, and you should consider the options if you are in the same boat. For us, though, Sketch has proven to be a great asset — even with all of the baggage. If you want to know why, read on!
Unlike Photoshop, Sketch was made for UI design right from the start; UI wasn’t an afterthought. If you’re a UI designer and are still using mostly Photoshop or Illustrator, it may be time to consider using Sketch instead. Read more →6
Sketch 3 was released in April 2014, marking one of their most substantial updates with the introduction of symbols. It was followed by a bunch of incremental updates over the next two years. These included features such as artboard presets, a consolidated file format, improvements in performance, sharing capabilities and more.
Two years later, in April 2016, version 3.7 introduced much more powerful symbols, with the ability to nest and the option to override text and images in symbols per instance. This also kicked off a much more rapid development cycle, with powerful new features being released much more quickly. Version 39 (3.9) in July 2016 saw the introduction of symbol resizing, taking the first step towards easing responsive and multi-device design in Sketch. This release — and the versioning change — coincided with Sketch’s revenue model changing from one-time purchases to annual subscription. There was some backlash from users, but by and large, designers have embraced the new model in anticipation of faster development cycles. And Bohemian Coding, the developers of Sketch, did not disappoint.
In November 2016, version 41 brought along a complete visual overhaul of the user interface, and the ability to override nested symbols per instance. Version 43, released in April 2017, seemed like a small update, barring one huge change: a completely reworked file format. Sketch moved from a proprietary format to an open one (or almost open), making it easier than ever for third-party applications to read, parse and manipulate Sketch files outside of the application. AnimaApp’s Sketch Web Viewer8 is a great example of what the new format enables. (Read more in “New File Format in Sketch 439,” an excellent post by Ale Muñoz10, one of Sketch’s developers.)
Version 44 arrived in May 2017 with a completely reworked resizing interface for symbols, groups and artboards — heavily inspired by the UI in Figma113, probably Sketch’s closest competitor at the moment. This has rendered some functionality of the Autolayout plugin12 redundant and was a huge step forward for responsive and scalable design in Sketch. This release also introduced some major updates to artboard management — again, geared towards scalable design and taking advantage of the new, more powerful resizing controls.
Some might say that Sketch’s breakneck pace of development has come at the cost of stability and performance. Almost every major release seems to bring with it some performance issues, which take a couple of patches14 to address. For example, Sketch Mirror had a bug that caused the system’s bandwidth usage to skyrocket — and it stayed for a good three to four major releases before being fixed.
Around version 42, an issue was introduced that caused symbols to be duplicated when the user made copies of its instances. This one lingered for a couple of major releases and, in fact, is still a problem when dealing with files that were created in older versions.
These are not deal-breakers by any stretch, but I did consider other options for a brief period, wondering whether I was sailing on a slowly sinking ship. Thankfully, the developers seem to have taken notice of the situation and are doubling down on quality with newer releases. Besides, nothing out there seems to come anywhere close to the power and flexibility of Sketch as of now. The new open file format, a thriving (and mostly free) plugin scene and steadily growing support from third-party applications pretty much ensure that Sketch is here for at least the foreseeable future.
What sets Sketch apart from the rest is its well-rounded set of features that cater to my requirements as a UI designer. Sure, it does not have the gazillion functions and filters of Photoshop, the built-in prototyping capabilities of Adobe XD, the collaboration features and vector networks15 of Figma or the cross-platform capabilities of all of the above. Sketch simply does what I need for the most part, does it well, and has a thriving plugin ecosystem that more often than not makes up for what’s not already built in.
What follows is just a sample of Sketch’s features that make life easy for me and the team at my UX design studio day to day.
For as long as I can remember, my biggest pet peeve with Photoshop was its single canvas. Creating a new file for every page on a website just didn’t make sense to me. Fireworks understood the problem16, and its pages feature was a godsend. Illustrator got around this with artboards. In today’s mobile and responsive era, though, neither of those concepts is enough. Sketch has both pages and artboards, and having used the application for a while now, I cannot imagine going back to one that doesn’t have them!
For my web and UI design projects, I use artboards for individual screens and pages for flows. For example, I’ll have a page for the onboarding flow of an app, another for the core actions, one more for settings, and so on. This makes it very easy to keep everything together and organized. You can even nest artboards, so that you can get a big-picture PDF of an entire flow, while at the same time exporting individual screens for prototyping.
Sketch also comes with a whole set of templates for the most common use cases (iPhone and Android apps, responsive websites, etc.), to be used as starting points for projects. These include artboards with the appropriate dimensions, named properly, and in some cases a basic set of UI elements to boot. The artboard picker was redesigned in a recent version, making it easy to quickly switch between sizes — and even to toggle vertical and horizontal orientation — on the fly. This, combined with the new resizing controls (more on that in a bit), makes designing responsive and multi-platform layouts extremely easy.
Grids are an integral part of the modern UI design arsenal. It is surprising, then, how arcane the process of setting up grids in popular design applications is. I remember dreading the thought of setting up guidelines to precisely match a 12-column Bootstrap grid in Photoshop or Fireworks. (That’s before I hit upon a Fireworks plugin that did it.) But a grid made up of guidelines was still a hack and could be easily lost the moment you started adding more guides of your own.
Sketch addresses this problem by allowing you to set up layout grids for each artboard that are separate from guidelines and the traditional grid (both of which it still supports). You set the total width, number of columns and gutter width, and a nice red translucent grid is overlaid on your design instantly. Edit the numbers as needed and the grid adjusts accordingly. Again, these are per page, so you may have a 12-column grid for the desktop layout and switch to 8 columns for tablet and 4 columns for mobile. What’s more, you can also add rows to the grid, which can be invaluable when working with a set baseline grid19.
Couple this with the new resizable symbols and you’re looking at a massive boost in productivity when designing responsive layouts. Add to this the continuous stream of ingenious plugins being developed by the Sketch community and… well, you get my point.
Symbols are by far one of the most powerful features in Sketch. And given how much they have improved, it is hard to believe that the feature was introduced less than a year ago. What started as simply a way to reuse a certain component across a design — à la Freehand and Fireworks — today has become a powerful feature in Sketch. I can safely say that symbols have saved hundreds of hours of work for me and my team in the last few months. And things are only getting better with each release.
A symbol could be as humble as a button with a rectangle and text on it, or as complex as an entire calendar with customizable dates, states and statuses. The example below is an extreme case, and I don’t recommend you go this far, but it helps to demonstrate how flexible symbols can be.
You can nest symbols within symbols, toggle them on and off at an instance level, replace or even hide text, replace images, displace elements based on the width of a text object, resize entire symbols (with full control over how each element within the symbol reacts to resizing)… the list goes on and on. Let me demonstrate some of the capabilities below with examples from our UI design projects.
As with any good tool, I keep discovering new and exciting ways to use its feature set every day. As an example, I recently figured out that you can convert an entire artboard to a symbol. Let’s say you’re designing the workflow for an app, and certain screens appear multiple times with subtle changes. Just convert those screens to symbols, and place them wherever you need with the appropriate overrides. Later, when you need to change a color (and trust me, you will), just change it in the original artboard, and every instance will follow.
The power of symbols in Sketch is much broader than I can cover here, so here are a few places to look for more in-depth coverage:
The upcoming version 47 includes an update to the symbols, with the inclusion of shared libraries – individual Sketch files that act as central repositories for symbols across a team and files. It has created quite a buzz within the Sketch community as you can see in this roundup28 of related coverage.
Styles are a set of properties that can be applied to multiple elements and synced throughout a document to ensure consistency. They’re not unlike the styles we have come to know and use in everything from Microsoft Word to Adobe Illustrator and InDesign. In my team, we use these mostly to define text styles for elements such as h1
, h2
, h3
and p
. But they go much beyond, covering fonts, fills, border, shadows and more.
There was a time when design was usually handled by an individual designer (or two) who worked on individual Photoshop files that didn’t really have much to do with each other. Today, it is not uncommon to see teams of tens or even hundreds(!) of designers working together on a single product. That makes the ability to collaborate on design files extremely critical.
Sketch has enabled a designer to share a read-only view of the file open in the app for some time now. Simply share a URL, and anyone else on the same Wi-Fi network will be able to view the file you’re working on. This is very helpful when you want to share a work in progress with a fellow designer or developer sitting at the other end of the office or even in the same room, where everyone can see the files on their own screens.
Another use case for Sketch Mirror is for testing mobile UI screens on mobile devices. Simply open the link on a mobile phone — or use one of the many apps on iOS31 and Android32 — to see the preview in real time. Any changes you make to the design in Sketch are immediately reflected in all previews.
Useful as it is, Mirror does have the limitation of being restricted to devices on the same network. Sketch Cloud33 addresses that by allowing you to upload your files to the cloud and have others access them publicly or via a link that you share.
Those are not the only big things that make Sketch great. For me, it is the smaller touches that make life just that tiny bit easier every day and make it difficult for me to move to another app.
Need to save an artboard to a file? Just drag and drop the thumbnail from the right panel into Finder.
Working on a slide deck? just drag and drop a group from the layers panel straight into Keynote or PowerPoint.
Found a nice photo on the web to replace an avatar? just drag and drop it from the browser onto the image thumbnail inside the image fill panel of a rectangle. Here’s what I mean:
Smarter dimensions are another nice touch. Need to increase the width of an element by 23 pixels? Forget the mental math — append +23
to the width field, and let Sketch do the math for you. The same goes for subtraction, multiplication and division. You can even use percentage values to change dimensions proportionally to the element’s parent (which is the immediate parent group or the artboard, in that order). What’s that, you say? You want to increase the width on the left side instead of the right? Easy. Use +23r
instead, and the resizing will be on the left, keeping the object anchored to the right (r) edge. Ditto for left (l), top (t) and bottom (b).
You’ve created a bunch of objects and now need to rename them? Hit Cmd + R
, change the name, press Tab
to go to the immediate next object in the Layers list, and continue typing. Rinse and repeat.
Per-artboard grid toggles are great, too! I like to work with the 8-pixel grid when designing mobile apps, but having it either on or off across all pages is just plain annoying. With Sketch, I can turn the grid on or off at the artboard level.
There’s even more37, but you get the idea.
One of the things that makes Sketch so powerful is the almost endless stream of plugins available for it. Bohemian Coding has made it easy for users to build on top of Sketch’s functionality and extend it in almost any way imaginable. Here are just a few stand-out plugins that prove that. There are tons more, and I would encourage you to explore them to see which ones work for you. Or, if you are up to the challenge, try building one yourself38.
Craft40, from the makers of InVision41, is a powerhouse of a plugin for Sketch — an endeavor so huge that they probably have an entire team of developers chugging at it day in and day out. It would probably take an entire post by itself to talk about everything Craft does, but let’s start with a sample:
C
and pick the artboard it should link to. The only limitation, really, is that your prototypes can only be previewed by syncing the screens with a project on InVision.
Craft continues to add new features on a regular basis. Two new additions are Stock — a quick way to find and add stock images from Getty49 to your designs — and Freehand — a digital whiteboard tool for collaborating on Sketch files with teams or clients.
Spotlight is one of my most used features on the Mac. Having one search field to rule them all — to open apps, access files, search documents, heck, even check currency conversion rates — is infinitely powerful. Runner51 brings the same power to Sketch. It lets you launch any command, create and fetch symbols, navigate pages and artboard, even install and manage Sketch plugins from a single unified search field. It is the kind of tool that, once you start using it, will be impossible to imagine the app without.
Not long ago, we used to spend an insane amount of time creating specifications and assets for our designs, so that developers could translate them into code exactly as we intended. This involved manually adding dimensions, spacing, text properties and more for each design element, along with the appropriate overlays and rules. Sure, Fireworks extensions made things slightly easier, but it was a chore all the same.
With Sketch Measure55, we have managed to bring that time down from a few hours to just a few minutes — and with richer and more useful data than ever. In short, the plugin lets you instantly add overlays, with pretty much any specification, for any element in your design — including width and height, spacing, text properties and more.
The most useful feature by far, though, is its ability to create HTML that shows a preview of each artboard, complete with all the specifications and assets the developer needs. Simply select an element, and a panel will appear with all of the properties of the element, including text content and CSS properties, to be simply copied and pasted into the code. For elements that have been marked for exporting, developers can download all defined versions (2x, 3x and so on, plus their Android equivalents) in one click.
Other apps provide this feature — Zeplin58, Avocode59, even InVision via the Inspect60 feature — but Sketch Measure is free and works directly from inside Sketch.
I was never a big fan of icon fonts. They’re nifty and all, but having to copy and paste character codes from a cheat sheet just didn’t seem like the right way to pull icons into Sketch. Then I found the Icon Font61 plugin and things changed. This plugin provides a visual grid of all icons in an icon font, letting you quickly pick the character you want to add or (even better!) search through the glyphs by context. Although it doesn’t come bundled with any icon fonts, there’s an easy tutorial for adding a few of the most popular free sets, and you can add your own as needed. No more hunting the web for an icon or messing with character codes. This one is a huge productivity booster in my workflow.
One of the pains with using artboards for screens in an app or workflow is showing links between them. Elements can only stay within a single artboard, so arrows between artboards have to be on a common layer at the page level. Besides, updating those links every time you move the screens around or add or remove any can be frustrating, to say the least. User Flows63 solves that by letting you add pretty linking arrows simply by selecting a pair of an element and an artboard. It nicely adds everything on a separate locked layer and even updates them with a single command, no matter how much you have moved things around. You can customize the look and feel of the arrows to match your design, then export the whole set as a single user flow diagram to share with your colleagues and clients.
How often have you had to change a primary font across an entire design, spanning multiple pages and artboards? For me, I’ve lost count. It could be a change from the client, or I see that a font just isn’t working very well as the design progresses. The bottom line is that changing a font across the board can be a daunting task. Font Finder66 makes it that much easier by allowing you to find everything on a page that uses a particular font, and then it changes it at once, while keeping the weight selections intact (in most cases, at least).
It is not the perfect solution, of course. Different fonts invariably end up breaking the layout in various places due to character size variations, but at least it saves you the effort of finding and changing the font of each text element individually.
There are more plugins that do any number of things, including replacing text68 and colors69, organizing symbols70, publishing websites71, even creating native apps72 directly from Sketch. There’s a good chance that, if you need it, someone has already built it. You only have to search for the plugin.
Sketch remains the most important tool in my design toolkit at the moment, but I’m keeping my eye on other contenders for now. Figma is probably the front-runner73, given how much it has matured in the last year or so. A lot will depend on whether Sketch can build on the momentum it has picked up over the last year or so.
If you’re considering coming on board the Sketch train or have already boarded, here are a few resources geared to helping UI designers:
(mb, yk, al, il)
FullStory helps you build incredible online experiences by capturing every click, swipe, and scroll, then replaying sessions with pixel-perfect clarity.?
If you’re stuck in a job you hate and have dreams of becoming a designer and working in a creative role that fills you with excitement daily, the road to entering this completely new industry can feel daunting. Making a major career shift late in life to follow your passion is scary. Not only is it sometimes difficult to know where to start to learn about an expansive field like design, but it can also feel risky, especially if you’re working a secure job.
Luckily, you’re not alone! According to a study by the Bureau of Labor Statistics1, the average worker changes jobs two times every four years during their 20s and 30s, driven by a desire to follow their passion, improve work-life balance and gain a stronger sense of fulfillment in their work. Additionally, over 2 million Americans quit their jobs2 every month, driven by a lack of fulfillment and recognition for their work. Thankfully, becoming a professional creative is now more accessible than ever because of the numerous educational resources available.
However, with so many resources out there for learning design, how do you choose the perfect method that fits your life? Rest assured, there is something for you. Whether you’re a high-school student getting ready to graduate or have been working in another career for 40 years and are looking for a major change, the right education exists!
Regardless of the type of design education throughout history, one of the most consistent things emphasized is the importance of learning from experts. Expert-based one-on-one learning is proven3 to be more impactful than learning by yourself and has been taught for thousands of years. Michelangelo himself, and most other painters throughout history, apprenticed4 with an established artist (Michelangelo apprenticed with Florentine painter Domenico Ghirlandaio). Many acclaimed modern designers did not attend traditional schools but instead learned by immersing themselves in design and finding a teacher to mentor them. For example, Stefan Sagmeister5 (the founder of global design agency Sagmeister and Walsh) started his design career by working on layout and typography for the design team of an Austrian magazine called Alphorn, long before receiving a formal design education.
Let’s return to the present. With so many options available just a few mouse clicks away, how do you decide which option is the best fit for you? And how do you ensure you’re getting feedback and critiques from experts that will help you quickly and efficiently build up your skills. We know that the options can feel overwhelming, so we’ve put together a list of the best ways to learn design according to your personality, budget, lifestyle and personal goals.
Before you read the rest of the article, we recommend answering the following questions first (write your answers down):
Once you have answered those questions, everything else should fall into place.
If you’re the type of learner who absorbs things best when you’re in a real classroom surrounded by teachers and other students, and assuming you have the luxury of going to a classroom full-time, you’ll want to consider an in-person design education. The two main ways to do this are via a traditional design college or an intensive bootcamp.
If you have the budget and time, then a formal education at an accredited design school is still one of the best ways to become a designer. Not only will you spend years learning the fundamentals and practicing with modern design tools, but you’ll also be constantly surrounded by students who are just as passionate as you and by teachers with decades of experience in several industries. Top Universities10 and Learn How to Become11 both offer a list of the best design schools in the world, and Niche lists12 the best schools in the US.
Upsides:
Downsides:
Perfect for anyone who:
How well does this option prepare you for the job market:
If you don’t like your job and are looking to move to a more fulfilling career as quickly as possible, then an in-person bootcamp might be the best bet for you. In-person bootcamps come in many shapes and sizes, but they generally include 40+ hours of weekly classroom instruction, as well as frequent group assignments, one-on-one sessions with an assigned mentor, and great job placement opportunities once you complete the program.
Many bootcamps allow you to pay up front or take the course for free if you agree to pay them a fixed percentage of the salary from your first post-bootcamp job! Some of the best-reviewed in-person bootcamps are run by General Assembly15 and Shillington16. Course Report has a full list of in-person bootcamps17.
Upsides:
Downsides:
Perfect for anyone who:
How much will this option prepare you for the job market?:
Finally, one of the most traditional ways to become a designer historically has been to enter into an apprenticeship on a design team at an established company. While apprenticeships can be a bit more difficult to find these days, many companies are still willing to teach young designers via hands-on experience, similar to an internship. And while apprenticeship opportunities are easier to find if you have at least a bit of experience or have done some design education on your own, if you’re able to secure a position, it can be one of the most effective ways to learn quickly. You might have more luck finding an apprenticeship (or internship, as they are more likely to be called these days) at a large company with established HR and recruiting teams. Smaller agencies and studios are likely looking for interns who can immediately contribute to projects with little to no hand-holding. There’s no better way to learn the real day-to-day skills of a designer than by working alongside professionals at the height of their careers.
How much will this option prepare you for the job market?:
Quitting your job to attend a bootcamp or a full-time program at a university isn’t a realistic option for most people. Luckily, a wide array of options cater to people who prefer to learn at their own pace and who don’t have a big budget. These alternatives still let you work through a structured curriculum built for those who are trying to build a career in the design field, and many of them even feature one-on-one components.
Schools such as Bloc20 and Springboard21 have been paving the way for online bootcamps. Their curricula largely mirror those of their in-person counterparts, the difference being that you work from a laptop instead of spending 40 hours a week in a classroom. Course Report has a full list of online bootcamps22.
Upsides:
Downsides:
Perfect for anyone who:
How much will this option prepare you for the job market?:
For many people, a full-time design education might be too much, for a variety of reasons. Luckily, many design schools have built lighter-weight courses that allow you to learn design at your own pace and still get the benefit of periodic one-on-one feedback from mentors.
If you want to learn with a mentor, there are a few great options that pair curriculum with periodic mentorship sessions. Skillcrush23 is an awesome resource for anyone looking for a part-time education. It will hook you up with projects, periodic feedback sessions and frameworks to help you learn design and accomplish your goals. Thinkful24 has its own part-time design program for people looking to learn at their own pace.
On the other hand, if you prefer a totally self-paced course, with no mentorship, then services such as Treehouse25 have hundreds of courses covering every aspect of the design world, from design fundamentals to freelancing. These courses allow you to go through a preplanned “track” at your own pace, complete with projects, online communities of other students and great customer service. However, one-on-one mentorship is still crucial, regardless of which online platform you use. If you decide to learn via a service such as Treehouse, which doesn’t offer mentorship, then we’d suggest setting up periodic mentoring chats with outside services that let you schedule individual video chats with design mentors26 whenever you need some feedback or advice.
Upsides:
Downsides:
Perfect for people who:
How much will this option prepare you for the job market?:
If you’re the type of person who has very specific goals and doesn’t want to waste any time learning unnecessary skills to achieve those goals, this could be the option for you. There are literally thousands of websites, resources and platforms online designed to empower the true self-learner, and they come in all forms. They’re also, for the most part, incredibly cheap (or free)! Note that most of the resources in this section focus on traditional lectures and videos, rather than mentor-led projects. If you go down this route, you’ll need to come up with your own projects and hold yourself accountable to keep practicing as you go!
Massive open online courses (MOOCs) such as Coursera28 have paved the way for affordable education online. These services take real university courses and rebuild them in an online environment. By taking these courses, you will be receiving almost the same education as people enrolled at universities.
Skillshare31 and Udemy32 are two of our favorite marketplaces for online courses. Anyone can create a course on these platforms, but their teams monitor submissions to ensure quality. You can also read reviews from thousands of students who have already taken these courses to ensure you’re making the right picks.
YouTube33 is perhaps the most extensive repository of design resources available anywhere, and it’s free. Check out this list34 for some suggestions on great design channels to follow. While YouTube has millions of videos on every aspect of the design world, it unfortunately doesn’t help you figure out which videos to watch and in what order. We’d suggest finding a great book35 about the fundamentals of design, and supplementing it with YouTube videos on specific topics whenever you want more in-depth explanation of a concept.
Finally, there are thousands of other resources to teach yourself design skills, from blogs36 to individual online learning websites37 to podcasts38. If you’re a savvy Googler, the skills you can learn are limited only by your imagination. It can be hard to know which websites are reputable and which aren’t, so be sure to check out a website’s social pages to see what sort of community it has before diving too deep into it.
Upsides:
Downsides:
Perfect for people who:
How much will this option prepare you for the job market?:
Last but certainly not least, we want to cover perhaps the simplest way to learn design: by teaching yourself! This is similar to the unstructured online platforms discussed above, but many modern designers have never even taken an online course on Coursera or a similar service. In all honesty, all you really need to do is download Adobe Creative Cloud (and Sketch if you’re an aspiring product designer) and start playing around.
For this route, YouTube will be your best friend. The beauty of the entirely self-taught route is that you can truly design an education 100% tailor-made to you. Want to land a freelance gig as a logo designer in the next two months? Great! You can create a laser-focused YouTube playlist of logo design tutorials and concepts. There are literally millions of tutorial videos online describing how to do the most specific and niche tasks in design software, so the answers to your questions have most likely already been asked and answered. In some ways, you can think of YouTube as an automated teacher, because you can get an answer to any question you have within a few seconds.
For the self-taught route, focus on connecting with other aspiring designers and finding a mentor (as we mentioned in earlier sections), because ongoing feedback is one of the best ways to ensure that you can turn basic skills into deep expertise. If you’re able to find like-minded designers and are committed to learning skills by yourself, you can go as quickly as you’d like. Being scrappy and resourceful is a skill that many employers will love, and if you’re able to show them that you went down a self-taught route because you know what you wanted to achieve and knew you could get there more efficiently by designing your own education, you’ll be in great shape!
Having reviewed the different ways to become a designer in the modern world, you might still be wondering which option objectively gives you the best chance of landing a job in the design industry. The answer totally depends on your timeframe, budget and learning style. If budget and time are no matter, then attending a two- to four-year full-time program at a design university is an incredible way to build a deep set of design skills that will increase your chances of launching your career. Spending several years learning something every day is undeniably the most effective way to become an expert in something.
On the other hand, most people don’t have the luxury of going back to school for several years, in which case we’d recommend finding a bootcamp (either in-person or online) that fits your schedule. Spending three months fully immersed in design and being accountable to a teacher and other students for assignments and projects is the second best way to develop design skills quickly. However, after finishing the bootcamp, you’ll have to continue investing yourself in design. Employers are sometimes skeptical that a bootcamp can give aspiring designers a strong enough foundation to be an effective designer in an actual job setting, so you’ll need to prove your passion and work hard to stand above the competition once the bootcamp wraps up.
Spend several hours every day learning new skills, reading books and working on projects directly related to the kind of job and industry you want to work in. Outside of a traditional college, learning from a teacher for several months in a bootcamp and then continuing your education on your own (with the periodic help of a mentor, if possible) and never slowing down is the best way to demonstrate to employers that you’re a serious candidate who’s ready to invest everything in your new career.
So, now that you have a good idea of the types of design education at your fingertips, get out there and find the perfect one for you! If you set your mind to it and immerse yourself fully in the creative world, you’ll be able to learn the skills necessary to build a career in design, no matter which educational route you go down. And look out for an upcoming article on how to find a mentor to help you progress as a new designer, regardless of which educational route you choose.
(ah, yk, al, il)
Design doesn’t scale as cleanly as engineering. It’s not enough that each element and page is consistent with each other — the much bigger challenge lies in keeping the sum of the parts intact, too. And accomplishing that with a lot of designers involved in the same project.
If you’re working in a growing startup or a large corporation, you probably know the issues that come with this: The big-picture falls from view easily as everyone is focusing on the details they are responsible for, and conceptions about the vision of the design might be interpreted differently, too. What we need is a set of best practices to remove this friction and make the process smoother. A strategy to scale design without hurting it.
That’s exactly what our friends at UXPin thought, too, when they were creating a new design systems platform. And since they didn’t find sufficient answers, they decided to tackle these questions in a free, virtual “scaling” conference: the UX at Scale Virtual Summit 201721. And, well, you’re invited to it.
Four days, 14 live webinars. That’s the UX at Scale Virtual Summit 201721 which UXPin will host from October 3rd to 6th. Throughout the four days, design leaders from Atlassian, Salesforce, Airbnb, GE Digital, IDEO, Google, ADP, Linkedin, and Shopify, to name a few, will share their best practices for scaling products and UX processes.
The event will tackle the issues that weigh heavily on the minds of design teams, but that usually stay under-addressed: How can collaboration in large teams succeed? How can we keep a product consistent even with a lot of people working on it? And how can we make documentation work? These are just a few of the topics that will be discussed along the way.
Sounds good? Well, you can join the event for free from anywhere. The webinars will take place from 9:00 AM to 3:00 PM (PDT) each of the four days (see the schedule below for more details), and a virtual lobby will provide an opportunity to connect with fellow minds from across the globe — right from your office desk.
Four days dedicated to getting scaling design right. If your schedule doesn’t allow you to make time for all of them, you can cherry-pick those webinars you’re most interested in, too, of course. Recordings will be sent to all registrants afterwards, so that you won’t miss out on anything. All times are PDT.
You can register for the live event directly on the Virtual Summit site5. It’s free, no strings attached. Enjoy!
Indrek Paas introduces XRespond, a virtual device lab for designing, developing and testing responsive websites.
The way people consume information is constantly evolving. As web designers and developers, we keep up with all of the different screen shapes and sizes, learning to create beautiful, flexible software. Yet most of the available tools still don’t reflect the nature and diversity of the platform we’re building for: the browser.
When I was making my first responsive website in 2012, I quickly realized how inefficient and time-consuming the constant browser window resizing was. I had just moved from Estonia to Australia, and with a newborn, time was very much a precious resource.
I began looking for better ways to see the effects of my media queries.
I came across Matt Kersley’s Responsive Web Design Testing Tool1 and was blown away. It cut my development time in half. Even though the app was quite basic, it quickly became indispensable, and I continued to use it for several years.
It was very much to my surprise that I never saw this brilliant concept taken any further. This, combined with the lack of features, set me on a journey to create the open-source virtual device lab XRespond74.
When it comes to developing responsive websites, the problem lies in having to constantly resize the browser window. Although this unavoidable action feels second nature to most, it also masks aspects of design we don’t often appreciate — most notably, inconsistency and time management.
With designs usually appearing in some combination of mobile, tablet and desktop context, anything in between is left in a somewhat uncertain state. And filling these gaps requires a lot of time and effort.
The problem lies in the difficulty of looking at one screen size at a time, as opposed to getting an all-in-one overview of different screen sizes. When we’re building for a variety of screen types, it doesn’t make sense to view only a single instance of a design at any given time — we’d be unable to gain the context of how the styles of elements change across breakpoints.
Current practices just don’t cater to these modern ways of developing. Fortunately, it’s not all bad news.
XRespond74 is a virtual device lab for designing, developing and testing responsive websites. The idea is simple: It enables you to make website comparisons side by side, as if you had different devices on the wall in front of you.
You don’t have to leave your desk, laptop or even favorite browser. And with zero setup, you can start comparing websites right away.
XRespond can help if you’re building a pattern library or a style guide, because you can focus on a single component at different screen sizes simultaneously. As you’d expect from a development tool, it works well with local servers.
Just bear in mind that, as with any emulation, XRespond can’t compete with testing on real devices, but it will get you 90% of the way there — and in a fraction of the time.
Enter a website address, click the button, and XRespond will automatically display the website on different virtual devices — which you can choose and customize as you see fit.
XRespond works well with other development tools, notably one of my favorites: Browsersync10. Browsersync enables you to set up live reloads and synchronized scrolling — all simultaneously across virtual (and real) devices. This makes spotting problems simpler, because issues become more apparent.
Occasionally, you might run into a problem of your website failing to load. This most likely has to do with your website preventing itself from being loaded in an iframe. If you own the website, you can temporarily disable X-Frame-Options
13 or the Content Security Policy14, depending on your setup.
I love XRespond — and not just because I love making it, but because it simplifies my life. I can spend less time and effort working, and use the spare time for something else. It’s given me an opportunity to improve the quality of my work. I hope you’ll find XRespond just as useful and will start enjoying the time it saves you.
Feel free to share, and follow me15 on Twitter for updates. Cheers!
(da, il, al)
Capture all handled and unhandled errors, get instant reports, and know which errors are worth fixing. Debug apps in a fraction of the time vs. traditional tools.
Layout on the web has always been tricky, but with CSS Grid being now supported in all major browsers, most of the hacks that helped to achieve complex layouts have become obsolete. Firefox even has a CSS Grid Inspector1 built in, so that there’s nothing to hold you back from making even the most challenging flexible layout reality.
To explore the possibilities and features of CSS Grid together, we’d love to invite you to a little contest. Because there’s nothing better to completely grasp a new technology as getting your hands dirty and playing with it, right?
Now, here’s the challenge: You create an interesting, accessible layout with CSS Grid, or use CSS Grid to rebuild an existing layout. What you design is entirely up to you. Feel free to use Flexbox additionally as well, e.g. as fallback for browsers not supporting CSS Grid. The only requirement is that the template you submit doesn’t break in IE9 and is still fully accessible in IE8. Deadline: September 30th.
At the end of the contest, all templates and layouts will be made available to everyone for free download under the MIT license. So you can use them for personal and commercial projects without any restrictions. The aim is to build a community repository full of CSS Grid goodness that inspires fellow developers and helps spread the wide adoption of CSS Grid.
After the deadline has ended, we’ll announce the lucky winners who’ll win a quite extraordinary smashing prize (and a couple of other Smashing extras, see below):
Last but not least, before you dive right into the challenge, here are some helpful resources to kick-start your CSS Grid adventure.
Finally, to get your ideas flowing, some inspiring CodePen experiments that illustrate the magic of CSS Grid:
Want to be a part of it? Great, we’d love to see what you’ll come up with!
Ready to take on the challenge? Let’s go! We’re already looking forward to your submissions. Have fun!
We should always look for opportunities to grow and improve. Retrospectives and reflections allow you to codify what you’ve learned from experience, to document mistakes and avoid future ones, and to increase your potential to grow in the future. Agile methodologies typically include time for retrospectives throughout a project. Regardless of your methodology, all teams would benefit from having a retrospective at the conclusion of a project.
Additionally, we can learn from our mistakes, identify what works well, and better understand ourselves through personal reflection. Retrospectives and reflections do not have to be time-consuming. I’ll show you a few approaches that you and your team can immediately incorporate into your practice.
I have found post-project retrospectives to be one of the most effective ways to grow as a professional. I see this in my design team colleagues as well. We’ll walk through post-project retrospectives in this first article. I have also seen evidence of the effectiveness of structured reflection for both personal and professional growth. In a second article, I will present some lessons learned and researched-backed techniques that those who wish to engage in reflection can attempt to include in their routine.
Facilitation leads to better user experiences through smoother, more collaborative and more satisfying design processes. It also helps you understand how people work and how to work better with them. Read more →1
A retrospective is a structured meeting to review the process and outcomes of a particular project. You can conduct a retrospective at any point in a project. If you practice agile principles, then you probably incorporate retrospectives after every couple of iterations (or sprints). However, everyone would benefit from a postmortem, or post-project retrospective, regardless of your specific design and development methodology.
Retrospectives do not require intense resources to plan or conduct. Some costs are associated with retrospectives, particularly with getting your team together to work on something that will pull them away from their projects. You will need to budget expenses for time if you work with contractors on your team. You will need to consider when to hold the retrospective; you don’t want to pull members away from other work at critical times or to disrupt their productivity.
The rewards of running effective retrospectives outweigh the costs. Effective retrospectives require a commitment to maintain an open mind and open communication with your team, as well as a willingness to be vulnerable. If you engage in retrospectives with these commitments, you can expect your team members to grow individually and as a group. You can expect your team and each member to better understand how to improve their process.
Project retrospectives are an important component of healthily functioning teams. In order to fully benefit from retrospectives, you should keep in mind some limitations and guidelines:
Your team would benefit greatly from properly planned and executed retrospectives. We learn something new about ourselves, our product and our team in every project. We also risk losing this knowledge or failing to incorporate the lessons if we don’t engage in retrospectives. You codify the lessons learned when you conduct retrospectives. You solve team issues as a team.
Researchers have identified many benefits from software design and development teams engaging in project retrospectives (see the links at the bottom for references). Some of these benefits include:
Project retrospectives are a means to show your commitment to your team. When you engage in retrospectives, you are signalling to others that you take learning from experience seriously. You are telling the team that you understand that perfection isn’t possible; there is always something to learn from experience. You are prioritizing growth and learning over pushing out a product and moving on to the next challenge. Team morale and performance improve when you reflect these values.
Allow for sufficient time to plan your retrospective. Whoever is facilitating the session should have an idea of how the project went. They should have a few talking points for each area to be discussed, in case the conversation needs prompting.
I have participated in retrospectives facilitated by project managers, by team or project leaders and by managers. Appoint someone who has training in facilitating conversations. If you have a team member trained in agile methods, they are likely to have some training on running retrospectives. Regardless of who facilitates the session, they should have a neutral stance towards all of the information that members of the team present. They should be fair in how they run the meeting. They should not be someone in a position of power who might intimidate any team members from speaking up.
Team members should know, preferably at the beginning of the project, that a retrospective will be taking place. You can suggest to team members to keep logs or make diary-type entries in a notebook or online in order to keep track of how they feel about the project as it unfolds. It’s difficult to recall specific things that worked well or that needed improvement at the end of a project. Proactively logging one’s experience helps to avoid this.
Your team’s logs could look similar to the prompts used during a retrospective:
What’s working well? | Notes |
---|---|
We are all on the same page with the work being done. | We frequently meet internally to discuss who is doing what. We are keeping our sprint backlog up to date. |
What isn’t working well? | Notes |
The client has complained that communication isn’t streamlined. | We were given multiple points of contact (PoC) at the kickoff meeting. We have had trouble getting replies from one of them. Maybe this is why. |
How could we improve? | Notes |
Reduce the number of people we are going through to get permission. Determine who needs to be contacted and what we need to contact them about. | We need to determine a single PoC for our team and their team. The client feels that not all of their team needs to be involved in our communication. |
Most retrospectives require very few resources to be planned. At a basic level, you can conduct a retrospective with a comfortable meeting room, a whiteboard, dry-erase markers (at least three different colors), a conference-call line, and screen-sharing software or video (for remote team members to participate). Finding a time that works for all team members can be the most difficult part of planning a retrospective.
Below are some specific steps to take to plan your retrospective. Incorporate others as relevant.
Determine your list of participants; make sure everyone involved is invited (even remote folks!). Your retrospective is only as good as the people you include. It would be more effective if everyone who has been involved in the project is invited to attend. Perhaps one designer took over for another designer halfway through the project — invite them both. You would benefit from understanding how the transition went, from the viewpoint of both the designer who started on the project and the one who took over. You would benefit from a deeper understanding of the bumps along the road if you include people who were a part of the process in unique ways. However, including some people might not be necessary if their role was extremely limited.
Remote staff are critical to a project retrospective. These team members have a unique perspective. You’ll want to know whether they felt included and actively engaged with their on-site colleagues. You’ll also want to know whether they have suggestions to make their lives easier as remote staff. Likewise, your on-site staff should have a voice regarding what it felt like to work with remote staff and any suggestions they have to improve collaboration with remote team members. We often include video options such as WebEx or FaceTime on iPads to give our remote staff a greater presence at retrospectives.
Ask your team to review their notes and come with the following input:
Have your team do this prior to the retrospective. You don’t want to put your team on the spot in the meeting. Be clear in the invitation about what the topics of discussion will be. Also, be clear that everyone attending is expected to participate in the discussion.
Reach out to see who is going to say what. You don’t want to get blindsided during the retrospective. You need to know whether something major happened that is going to lead to a longer discussion, in which case you’ll need to plan the right amount of time for that discussion. You also want to try to defuse anything that might seem personal prior to the session. Likewise, if you find that no one has anything critical to say about the project, then you might encourage them to think of some things they could mention.
Important: The point here is not to reach out to argue with team members you don’t agree with, but to have an idea of what folks are going to bring up. Take action prior to the retrospective only if absolutely necessary. You aren’t doing it right if team members feel shut down prior to the session.
Determine your assessment of the project. You should know where the project succeeded and where the project fell short, according to your expectations and performance indicators. You can use these to focus the conversation and to support any arguments made for or against certain issues in the project.
Make the retrospective a celebration of your team. Provide food and drink or some type of treats. Team members will appreciate the effort to create a positive atmosphere, and it will reduce the potential distractions of hunger and thirst.
A retrospective participant shouldn’t have to invest much time preparing. But coming to the session prepared is important. I’ve suggested keeping a log or journal noting how the project unfolded. You can use this yourself as part of your preparation for the retrospective. Come up with a list of three or four things that went well in the project, and three or four things that could have gone better.
Once you’ve refined the list, make sure you haven’t created a list of gripes and personal complaints. Those are valid, but they don’t serve to create a positive retrospective. Resolve any personal issues you’ve had with team members in a more appropriate setting than a retrospective. Convert gripes into problem statements that you can then use to identify solutions in the retrospective.
Many resources are available for conducting a retrospective. Esther Derby provides a five-step approach for retrospectives7 in Scrumpedia. Although the focus is on two-week retrospectives, you can use the same steps for a post-project retrospective. Derby’s steps include: (1) set the stage, (2) gather data, (3) generate insights, (4) decide what to do, and (5) close the retrospective.
Elise Keith presents a three-step process on the Lucid Meetings Blog8: (1) review the project, (2) discuss what worked well and what didn’t, and (3) action planning: identify specific ways to improve future work.
Norman Kerth’s handbook on project retrospectives9 provides four questions to guide a retrospective: (1) What did we learn? (2) What should we do differently next time? (3) What did we do well? (4) What still puzzles us?
There isn’t one right way to do a retrospective. A quick search on Google yields dozens more articles on how to conduct a retrospective. Below, I discuss some key features that every retrospective needs to include.
Time management is critical for a successful retrospective. You run the risk of having to cut people off if you don’t schedule enough time. You run the risk of people losing interest if your meeting is too long.
Allow discussion to occur when necessary, but with a focus on the solution. You will often find that people agree in a number of areas. For example, everyone might think the project’s timeline was too tight. You can save time by asking people to indicate their agreement with something stated and not bring it up again when it’s their turn.
Be aware of the order you expect people to speak. You can determine the order at random by assigning everyone a number and drawing from a hat. You might want to use a predetermined order based on your awareness of the reality. For example, you might want to encourage junior staff to contribute their own ideas and ask them to go first to discourage them from echoing what senior staff say.
This is the most important step. Your retrospectives are worthless if people are not comfortable sharing their true thoughts and feelings. The facilitator should make it immediately clear to participants that everyone’s viewpoint needs to be respected. Ground rules should be set: no confrontational comments or personal attacks, but also no sugarcoating problems.
There will be situations in which specific aspects that need improvement are related to the attitude or skills of an individual team member. I encourage managers or team leads to find ways to have this discussion individually, outside of the retrospective.
On the other hand, if there is an issue related to an individual making decisions that didn’t work out, that’s appropriate to discuss as a group. You can approach these types of situations in a less threatening way by referring to the group rather than the individual. For example, rather than saying, “Victor dragged his feet with starting to recruit people to participate in research, so we fell behind schedule,” you could say, “We thought it would be a good idea to hold off on identifying our research participants, but this led to us falling behind schedule.” This allows the discussion to lead to the conclusion that the person in charge of recruitment should be more proactive about scheduling in the future.
Your retrospective should take place in a comfortable setting, with ample time set aside for attendees to provide feedback. You could consider holding the retrospective off site, in order to put participants at ease.
The project team owns the result of the project. They also own the quality of the retrospective and the ideas coming from it. Challenge your team to constantly improve. You are the facilitator, but the team is tasked with solving issues that arose during the project.
Don’t excuse areas where improvement can be found. For example, if your team struggled with fitting in all the project tasks in a timely manner, don’t provide the excuse that many team members were busy on multiple projects. Instead, push for how to better provide a balance among team members’ duties and other obligations.
Ensuring that everyone has a voice is a part of the purpose of a retrospective. You don’t need to gain a consensus on every item someone brings up. You show respect for the individual experience when you acknowledge everyone’s thoughts. You gain buy-in and trust when you do this. Documenting thoughts on the white board allows everyone to see what was said and enables you to track what has been said.
Everyone should have something positive to say, even if it’s just “Hey, everyone is alive!” Your team likely contains a mix of personalities. You help to create a positive vibe for the whole group when you call out people for jobs well done and congratulate those who made progress and accomplishments over the course of the project. You also increase team members’ receptiveness to criticism when you provide positive feedback in a retrospective. Did anyone get a promotion during the project? Celebrate that. Did anyone gain a new skill or tool? Celebrate that. Find things to celebrate.
Do you want the good news first or the bad news? My preference is the good news. We often have much longer discussions about what didn’t work so well for our projects. You don’t want to run out of time and not talk about what worked. Discuss what worked before discussing what your team could have done better.
You’re rarely perfect. Even in a feel-good project, you can find areas to improve. Often, you’ll identify areas around communication that could use tweaking. At one point during an otherwise smooth-running project, I called a meeting to review how we were incorporating research findings into our design concepts. My managing director said something like, “Now let’s hear what development has to say.” I had forgotten to include anyone from development in the meeting, so there was no response. Actually, I hadn’t even thought of the need to include development — we were talking about design and research, right? I had become complacent at that point in the project, forgetting to include key team members in a meeting. We discussed why this happened and the need to invite people to our retrospective throughout the duration of the project.
Your team should engage in dialogue to identify possible remedies for the areas in need of improvement. The solutions should be as specific as possible. For example, instead of saying “Invite everyone relevant to each meeting,” say “Invite representatives from every discipline (research, design, development and engagement) to each meeting.” Instead of saying “Begin the process of recruiting research participants earlier,” say “Draft the recruitment screener and email prior to the kickoff meeting, and send the recruitment email immediately following the kickoff meeting, or earlier if possible.”
A project retrospective is meant to be all-encompassing. Cover the project from start to finish, major milestones and deliverables and all other aspects relevant to the project. Your team should feel that they’ve put everything out and had it recorded on the white board. Any issues should have solutions identified. No one should leave the retrospective feeling they didn’t have a chance to participate fully. No issue should be left unresolved, or at least not without a concrete timeline for you to come back to address it.
You’ll need to go beyond the retrospective to fully realize its benefit. Document every retrospective and the outcomes your team agreed on. Include a list of who attended, the purpose of the project and any other details to explain the context of the retrospective. You will look back on these at a time when the project will not be as clear in your memory as it is immediately following the retrospective.
You don’t need to do anything time-consuming to document the session. We typically write out everything from the session on a white board. The facilitator takes pictures of the white board and later transfers the information into a document. You can use a simple chart to record what was said:
What worked well? | What didn’t work well? | Specific steps to improve |
---|
Retrospectives become wonderful data points for tracking a team’s progress. Proactively remind your team members of what was agreed upon in the retrospective, and ask them to show evidence that they’ve followed through on any solutions proposed. Track your retrospectives across time to see whether what was in the “Needs improvement” column eventually moves out or even into the “What worked well” column. If you see that the same items continue to find their way into the “Needs improvement” column, then your solutions either aren’t effective or aren’t being implemented. Create a spreadsheet with different tabs based on the projects completed. Record the results of each project’s retrospective in a separate tab. This allows you to consolidate your retrospectives in a way that makes it easy to review progress.
Save the tracking spreadsheet to a storage space that all staff can access. Another benefit of tracking retrospectives is the opportunity to implement successful improvements across projects. You won’t always have the same team members in every project. You can disseminate your findings to the broader team when you track retrospectives. If a solution to a problem in project A is successful, you could try implementing the same solution if you see the issue pop up in a retrospective for project B. You avoid having to reinvent the wheel this way. Similarly, you can avoid solutions that don’t work for problems that reappear in other projects in the future.
So, you’ve conducted a few retrospectives and seen growth. You can call it quits, right? No. Your team members will change over time. Your projects will change in complexity and purpose. By making project retrospectives a standard part of your practice, you reduce volatility and continue on the path of growth.
I had a unique opportunity to serve as a core member of a team that spent a year working together on various projects. I served as the lead researcher for each project. The lead designer and lead developer also remained consistent for each project. Our usual model for staffing projects does not specify that teams should stay the same, so this was an experiment.
We conducted a retrospective at the end of each project. At the end of the year, we realized that issues we identified as “What didn’t work well” in earlier projects had moved to the “What worked well” column in later projects. We used this information to create a list of best practices.
Our managing director led the retrospectives. She had played an oversight role for all of the projects, so she had a working knowledge of the topics, successes and challenges we faced. The bulk of each retrospective was spent answering the questions:
I’m going to focus on real examples of what came up during our retrospectives. For the sake of brevity, I’m going to provide only a few examples. Our actual lists for each question listed above were extensive. I’ve added highlights to track the progression of issues whose status changed over the course of multiple projects. Each highlight color corresponds to a particular issue as it was tracked across retrospectives.
What worked well? | What didn’t work well? | Ways to improve |
---|---|---|
Client working session at our studio | Research participant recruitment began too late. We relied on the client to recruit participants due to the sensitive nature of their relationship with users. | • Emphasize the importance of clients beginning recruitment ASAP during kickoff meeting. • Draft recruitment email and send to client for use immediately following kickoff meeting. |
Research findings integrated seamlessly into design concepts. | Transition to visual design was difficult. Visual design needs were minimal; we waited to identify a visual designer until the project was half-finished. | Look for additional opportunities to have clients visit our studio. |
Technology assessment findings and user research findings were presented as separate sections. (Would prefer to have seamless presentation of all research and to have tech assessment themes align with user research themes where possible.) | Technology and research to meet to integrate findings better into final report. |
Project A’s retrospective identified a number of things our team had done well. Specifically, we held a client working session at our studio that went very well and that helped to set up a great final presentation. We continued to look for these opportunities as a way to document their importance.
We also identified three specific issues that could have been better executed on:
Working as a group, we came up with a list of potential ways to improve on these three areas. Our managing director documented the retrospective and preserved our takeaways in a brief report that we were able to access through our shared storage.
What worked well? | What didn’t work well? | Ways to improve |
---|---|---|
Client working session at our studio | Research participant recruitment began too late. We relied on the client to recruit participants due to the sensitive nature of their relationship with users. | • Emphasize the importance of clients beginning recruitment in pre-kickoff phone call. • Draft recruitment email and send to client prior to the kickoff meeting. |
Seamless transition between all project phases and disciplines. | Technology assessment findings and user research findings were presented together, but themes felt disconnected. | Technology and research teams work together throughout project to ensure alignment on research themes. |
Project B’s retrospective identified that we had done a better job of identifying who would be involved from all disciplines from the start of the project. This led to a sense that the project unfolded seamlessly as we went from research to design and then development.
We also realized that we still fell short of completely resolving two of our previous issues:
We had attempted to address this issue by coming to the kickoff meeting prepared with some of the critical items that we knew our clients would need in order to recruit participants.
We improved on this issue between project A and project B, but we didn’t feel we had completely addressed it. The technology assessment findings were presented alongside the user research in the “Research findings” section, yet the themes remained distinct.
Working as a group, we came up with a list of potential ways to improve on these three areas. Our managing director documented the retrospective and preserved our takeaways in a brief report that we were able to access through our shared storage.
What worked well? | What didn’t work well? | Ways to improve |
---|---|---|
Client working session at our studio | Staff vacations overlapped key meetings and dates. | • Avoid overlap between team member vacations and key project dates. • Identify potential substitutes ASAP for vacation coverage, preferably at the start of the project or as soon as vacation is known about. |
Seamless transition between all project phases and disciplines. | Create and implement guidelines for information shared during pre-kickoff calls, so that future projects benefit. | |
Pre-kickoff phone call alleviated issues of time with user recruitment. | Continue pre-kickoff calls. | |
Research, design and technology themes presented seamlessly. | Continue involving technology team in analysis of research from the beginning. |
Project C was when our team really started to gel. This also marked six months of working together as a stable core team. We’d had time to learn how each other works and to support each other better. We were able to move both of the issues identified as “not working well” in project B to the “worked well” column in project C.
We had refined our process to the point that we were identifying the minor bumps that can arise over the course of a project as the ones we needed to focus on for improvement in future. We would not have been able to get to this point without conducting retrospectives after each project. Retrospectives enabled us to focus on what we were doing well in order to make sure we kept doing those things. We were also able to identify issues in need of improvement, with specific potential solutions to implement in the next project.
We did not achieve perfection by the end of our year-long experiment. But we did refine our process to the point that we had gotten beyond simply meeting our key performance indicators. We were actively looking for opportunities to implement better solutions; we were able to accomplish more, faster and with fewer resources; and we had developed positive healthy working relationships across the team.
You will find many potential benefits from conducting project retrospectives. You don’t need to invest a lot of time or money in them. There is no one-size-fits-all approach. I’ve given you some of the lessons I’ve learned as both a participant and a facilitator of retrospectives in digital design projects. Feel free to try what you want, and only use what works well for your team and situation.
However, we don’t always have the luxury of working in teams or having team retrospectives. I’ll focus on personal reflection in the second article of this two-part series. I’ll provide examples of written and verbal reflection that practitioners and students can apply to grow both personally and professionally.
Stay tuned!
(cc, vf, yk, al, il)
Recently, there has been a proliferation of virtual reality (VR) web browsers and VR capabilities added to traditional browsers. In this article, we’ll look at the state of browsers in VR and the state of VR on the web via the WebVR APIs.
The web community has experimented with VR before, with VRML, but now WebVR takes a new approach to VR, one more suited to the modern web. We’ve accelerated 3D on the web since 2011 with the release of WebGL. Now the web can handle VR thanks to new web APIs that take advantage of VR hardware using WebGL.
These APIs enable WebGL content to be displayed in 3D with a VR headset. They also provide headset and controller tracking information to give the user presence in the virtual world.
WebVR was first developed in 2014 at Mozilla. In 2016, an earlier version of the standard was available for desktop Chrome, Firefox and Samsung’s virtual reality web browser: Samsung Internet for Gear VR.
These days, the standard is incredibly well supported on phones and desktop computers for almost all major headsets.
Mozilla Firefox | Google Chrome | Microsoft Edge | Oculus Browser | Samsung Internet | Safari on iOS | |
---|---|---|---|---|---|---|
HTC Vive | Developer Edition | Chromium Experimental build | – | – | – | – |
Oculus Rift | Developer Edition | Chromium Experimental build | – | – | – | – |
Windows Mixed Reality | – | – | Windows 10 with Creators Update and Developer Mode enabled | – | – | – |
Samsung Gear VR | – | – | – | supported | supported | – |
Google Daydream | – | Chrome for Android (with Origin Trial) | – | – | – | – |
Cardboard | – | Chrome for Android | – | – | – | via polyfill1 |
WebVR support as of June 2017 (Source: Mozilla Blog2)
The WebVR standards are worked on in the open, and they represent a collaboration between Mozilla, Google, Samsung, Oculus, Microsoft and, recently, Apple.
This means that a single website that uses WebVR can make an immersive scene and deliver it to all major VR platforms at once, desktop and mobile!
The web’s ability to handle VR content allows one to easily share a VR experience in a URL and view it in the browser without the complicated app stores and long downloading times associated with native VR.
These APIs are not part of the WebVR API but are useful for viewing immersive content on traditional websites in an immersive web browser without needing to use WebGL.
These APIs are being developed for Samsung Internet for Gear VR. We hope they will be picked up by other browsers and standardized.
Any developer can create content for VR nowadays. To get a better understanding of VR development, working a demo project can help. Read more →3
This involves the ability to play panoramic videos (monoscopic and stereoscopic) immersively by setting the type="dimension=360;"
attribute on a video
tag. These videos also get enhanced in Samsung Internet 5.0 by allowing the user to pan around within the video using their fingertips.
Possible values:
dimension=3d-lr
: side-by-side 3D videodimension=3d-tb
: top-to-bottom 3D videodimension=360
: 360-degree videodimension=360-lr
: side-by-side 3D 360-degree videodimension=360-tb
: top-to-bottom 3D 360-degree videodimension=180
: 180-degree videodimension=180-lr
: side-by-side 3D 180-degree videodimension=180-tb
: top-to-bottom 3D 180-degree video<video src="/360.webm" type="video/webm; dimension=360;"></video>
Another API available in Samsung Internet for Gear VR is a JavaScript API for changing the background image of the VR web browser to one of the developer’s choosing.
Your traditional 2D website will still be visible, but the surroundings will be set to one that matches the environment of your website.
window.SamsungChangeSky({ sphere: 'http://site.com/blue-sky.jpg' });
WebVR is a set of cross-browser JavaScript APIs that provide a variety of VR-related utilities to place the user in an immersive environment generated using WebGL.
By providing side-by-side rendered 3D images, these APIs will handle all of the complexity involved in displaying an undistorted stereoscopic 3D image to the user.
I won’t go into the details of implementing the standard here because the standard is still changing. Most users will never need to deal with them directly, because WebGL tools and libraries often handle the WebVR APIs for you.
The current version of the API is known internally as version 1.1. Version 2.0 will change some of the method names and remove some unused methods. It will also add some additional functionality for some hardware and use cases which were not anticipated during the first iteration of the API.
The precise details of the APIs can be read on the Mozilla Developer Network4, and the standards are discussed on GitHub5. There is interest from within the WebVR community group6 and the W3C to move to a W3C working group once they are ready.
Essentially, the WebVR API provides the following:
requestAnimationFrame
is synced to the refresh rate of the display in the headset.Surprisingly, building a virtual reality website raises many of the same problems as building a good mobile website or progressive web app.
One of the biggest problems being tackled on the web today is network performance, which is important because:
WebGL and WebVR websites are certainly no exception to size. They can get very large if one is not careful!
Right now, VR content has an edge over traditional content because it is novel and interesting enough that users will likely wait a bit longer to have a go. Still, getting your 3D experience started in under a few seconds is extremely important. Users are impatient and only getting more so.
Before your VR-capable website has loaded, it is just a 2D website and a promise of cool things to come.
My advice here is to not preload everything. Instead load just enough for the user to get started, then dynamically load and start caching the rest. This behavior should be familiar if you have read about Google’s PRPL pattern9.
Even just showing a blurred 360 skybox and some low-poly content, allowing the user to look around, will buy you precious seconds of engagement to bring in additional content and to bootstrap an engaging experience.
Showing something basic but fast is far better than losing the user because they’ve gotten bored waiting for a loading bar to complete.
But bear in mind, network operations can be CPU-intensive and block the main thread. This could give the user a bad experience if it happens a lot, so it is a fine line to walk.
Perhaps one or two very intensive assets need to be preloaded to avoid breaking the experience. However, if you have so many that it is taking a long time to start, then perhaps it’s worth thinking about finding a more performant alternative.
Making good use of a service worker and the Cache API10 to cache static assets for fast return visits is a great way to keep users coming back for more.
The two main platforms for VR are polar opposites: high-end desktop computers with advanced controllers, and mid- to high-level mobile phones, which might have only a single rotation-tracked controller or no controller at all!
This presents us with two challenges:
Phones have by far the largest reach due to the popularity of Gear VR and Daydream and the cheap price and high availability of the Google Cardboard headsets.
Below, I have described some typical controller configurations. You don’t need to support them all, but handling the “no controller” situation as a baseline and also supporting another controller option if applicable will allow everyone to experience something. Supporting all controller configurations would be nice, but in my opinion is not a reasonable expectation.
Some libraries, such as Universal Controls from A-Frame Extras13, try to make the best out of whatever is available.
Interaction mechanism | How it increases engagement | Hardware and support |
---|---|---|
Gaze-based interaction | Look at something to use it. (Most users will require this.) | Cardboard-like headsets; users with limited mobility for controllers |
Traditional controllers (e.g. Xbox, Playstation) | Works with widely supported Gamepad API16 | Can be used anywhere the API is supported on desktop and mobile (needs latest Safari) |
Rotation-Tracked Controllers | Allows the user to gesture like a laser pointer | Can be used in Daydream devices and Gear VR to similar effect to the fully tracked controllers |
Position- and Rotation-Tracked Controllers | Fully tracked hands; allows great immersion and interaction. | Most high-end VR has these, such as HTC Vive and Occulus Touch |
Hand Tracking | Allows user’s hands to interact with the scene; great immersion | Built into Hololens, can be added by using the Leap Motion tracker |
As with progressive enhancement on the web, supporting all levels of hardware does not mean you need to deliver the same experience to all.
A user with two fully tracked hands in the virtual world will have a much more engaging experience and should not be limited by being delivered the same experience as someone with no controller.
For example, a VR app in which you produce VR artwork could use tracked controllers to produce art on high-powered machines; on mobile, a user would be able to view this art in VR but be unable to edit it.
Another example would be a networked VR multiplayer game in which players use tracked controllers to play the game; a mobile viewer could watch it and use gazed-based interactions to choose different points of view.
Like modern web design, the key is to design mobile-first. As you build your scene, regularly test it on real mid-level smartphones with no controllers to ensure it will work for the majority of your users.
WebVR allows you to target both platforms at once. However, delivering the same content to both could result in mobile devices struggling or desktops not being used to their full potential.
There is no problem having very well-performing graphics. A stylized low-poly appearance can look fantastic and render very quickly.
To upgrade graphics, one solution is to provide options for graphical quality before the user starts using WebVR. If the user requests high quality, then start downloading the large or difficult-to-render graphics.
Something more difficult but more seamless would be to start on the lowest graphical setting and detect how well the device is performing using commands such as requestIdleCallback
or measure how long the rendering takes. If the device is running well, then maybe increase the graphics settings. If frames start getting skipped, then dynamically reduce them.
When you are upgrading your scene, you might decide to do a few things:
This will ensure that users on mobile and desktop get the best possible experience. For most use cases, though, it is probably fine if desktop users get the mobile experience, because you can guarantee it will maintain a great frame rate on the desktop if it also does on mobile.
After all, there is more to a great scene than visual fidelity. Highly stylized games such as Team Fortress 2 still look great today, whereas “realistic” games from the same era have not aged so well.
A great scene should have a well-designed graphical style, with bold colors and strong silhouettes. This will help low-power and low-resolution devices look good, but will also still look great on desktop devices, needing only a bit of extra polish.
In VR, bear in mind that most users will have the equivalent of poor eyesight. So, minimize text or anything that will cause the user to strain to see something.
The web is trying to solve some of the problems currently facing VR.
One of the biggest issues is that the user has to make a big commitment for a one-off experience that they might not want to come back to.
In native mobile and desktop VR, one has to download the app from an app store such as the Oculus store on Gear VR or from Steam for the HTC Vive or Oculus Rift.
This app store pattern lends itself well to expensive video games, in which users have already invested some money and so are going to return again and again. But for a one-off experience such as shopping, viewing a movie or trying a new social platform, this can be a high barrier to entry.
Users tend to be put off by the idea of having apps lying around on their device, taking up space or using up a large amount of their data allowance to download — especially users whose mobile devices have limited disk space or network data caps.
On the web, once the user leaves a page, they don’t have to worry about content hanging around, because the browser will clean it up if space is needed. If space is available, the developer can cache content on the device for when the user returns, letting the developer have their cake and eat it, too.
Of course, this requires the developer to make VR websites that are not stored as a single giant bundle; otherwise, the gains the web can provide will have been lost.
By delivering VR assets dynamically and separately like those of a web page, you can take advantage of all of the smart caching that the web can provide from the CDN, all the way down to the HTTP cache and the service worker’s Cache API on the device.
Furthermore, the user can jump right into your VR experience with very little waiting.
A highly optimized WebVR website should render the first frame within a single second of the user landing on the website — totally cutting out any lengthy initial downloads or app stores, and massively increasing engagement.
An experience can be shared with nothing but a URL, which can be distributed by social media or email or even written on a wall or displayed on a TV, making it much more likely that your VR content will go viral due to its low barrier to entry.
One feature that many WebVR websites have is that, before entering VR, the user can view and interact with the scene on their 2D display. The view will often rotate with the phone, giving the appearance of a magical window into a virtual space.
This magical window is a powerful pattern. It gives the user a preview of the VR scene without the need for a VR headset. This is great for when they don’t have their VR gear on hand or are on public transportation and don’t want to wear VR equipment in public.
Once the user has gotten a taste, they will be encouraged to bookmark your website to try it in VR at a time more suitable for them.
Many web APIs you may have heard of or used have become massively more relevant in a VR context:
VR has already had an effect on the web platform; the WebVR APIs have been implemented across multiple platforms; and there are discussions about creating a WebVR working group within the W3C.
VR is already going mainstream, and with augmented-reality and mixed-reality devices starting to enter the consumer realm, it is important that the web be ready to take advantage of the new platforms.
WebVR as we know it today relies entirely on WebGL. Optimizing for WebGL will mean that browser vendors will have to look at taking advantage of hardware optimizations to increase rendering speed towards that of a natively compiled app. Speed is important, because dropping frames in VR can have disastrous effects, even to the point of making the user ill!
WebGL 2 will soon be reaching stable browsers. Version 2 brings WebGL closer to the OpenGL ES 3.0 specification. Greater visual fidelity and faster ways to do advanced graphics will make VR truly an incredible visual experience.
WebAudio might be required to produce more accurate 3D audio transformations, known as head-related transfer functions, to better reproduce the high-quality 3D audio required by big-budget productions. Accurate 3D audio will be essential to delivering high-quality immersive video content such as 360-degree movies and immersive audio experiences.
Scripting on the web would benefit from significant performance improvements as well. A number of JavaScript APIs are in the works that can be used to increase performance on the web.
JavaScript itself can be optimized and precompiled. Another option is to compile other languages to WebAssembly (WASM). This can speed things up across the board, providing a bundle that is smaller to download and faster to parse and execute. If used wisely and modularly, WASM could be used to make the core rendering engine of a WebVR experience, which we could still interact with using JavaScript as we do today.
The browser can make use of web workers to enable calculations that do not block the main thread. This is good because the main thread is primarily used for rendering. Web workers are useful for manipulating large amounts of data with CPU-intensive calculations such as physics engines. By isolating the calculations from the main thread in this way, they are less likely to trigger frame drops.
Unfortunately, some cost is associated with sending data to and from web workers to use them in the main thread. This is alleviated partially by transferable objects. Transferable objects such as ArrayBuffers allow you to change the owner of the object, but handling the transferring of this object can be difficult and error-prone if a mistake is made. (I’ve written about using ArrayBuffers on the web20.)
A new API called SharedArrayBuffer will allow multiple workers to share the same ArrayBuffer, which is useful for this case.
On the topic of workers, part of the issue is that, right now, the thread that renders the web page also needs to be used to render the WebGL scene. So, any side effects of other code that you run on the main thread, such as garbage collection or CPU-bound functions, could cause frames to be dropped.
OffscreenCanvas enables rendering to be performed in a web worker. This will help the very important and sensitive rendering loop to be isolated from the other threads.
The other important rendering use case is prerecorded 2D and 3D video. These can be used as textures in WebGL. But they lack fine-grained control. Just as we have an audio
element and an AudioContext in JavaScript, we will need to add a videoContext to enable performant video manipulation to assist with playing 360-degree videos in 3D.
An area where VR currently lies at odds with the web as a whole is the rendering of documents. Displaying documents is the core functionality of the web platform, but displaying a document in WebGL is nigh impossible without some very slow, very clever rerendering.
It would be great to bring them together by having the browser expose rendered DOM content to WebGL. This would enable us to take advantage of the web’s power for 2D interfaces, but it could potentially be a security and privacy risk!
WebGL-based VR doesn’t necessarily have to be the future of VR on the web. Having to perform even the simplest use case for WebVR in WebGL seems shortsighted at best and potentially fatal for VR on the web in the long run.
Part of the strength of the web is that HTML is a declarative language. Browsers can interpret the language according to the platform. You won’t see the exact same website on your desktop computer as you would on your phone or TV. VR is yet another platform in the variety of media to experience the web.
By being declarative, like HTML or CSS, VR on the web could automatically handle rendering to balance rendering speed and visual fidelity. A high-end computer could use advanced shaders and detailed models; a low-power mobile phone could automatically use simple shading and low-poly models — much like the way the picture
element can download images that are of the correct resolution and then crop for the given device.
HTML could be extended to include some common VR use cases, such as playing 360-degree and 3D videos and images, displaying 3D models, and moving bits of a web page outside of the 2D viewport into 3D space.
Samsung has started to look at some of these use cases in the web browser, Samsung Internet for Gear VR.
It has built-in support for 3D video using the video
element. Displaying a side-by-side 3D, 360-degree video requires just an HTML tag:
<video controls src="360video.mp4" type="video/mp4; dimension=360-lr;">
Of course, these needn’t be mutually exclusive. The web can partially handle and optimize for simple VR use cases, while also providing optimizations for building immersive VR from scratch with WebGL.
The Extensible Web manifesto hinges on the idea that the web does not have to sacrifice extensibility for ease of use, that the community can use the low-level tools provided to extend the web platform using libraries.
VR is one case where this vision seems very relevant. We already have the low-level tools of WebGL and the WebVR APIs.
The A-Frame21 library provides custom HTML elements to build WebGL-based 3D scenes. A-Frame is usable on its own or with popular frameworks such as React and Angular.
A-Frame enables any web developer with HTML experience to describe VR-ready 3D scenes and to control them using familiar JavaScript. Even tools such as jQuery, Angular and React can be used to change a scene because, at the end of the day, it is still just HTML.
The web has the power to bring virtual reality to the world, to every consumer, to every developer.
It is still early days for VR on the web, but now is the time to get building, to see what works and what doesn’t.
The web can show that VR is for more than video games. VR can be used to enhance everything we currently do on the web and even enable new interactions only possible in an immersive medium.
As developers, we can start building VR experiences on the web today. By getting involved and giving feedback about the standards process, we can ensure that VR on the web becomes a robust standard, paving the way for future developers to build on.
Even if you don’t think VR is mature yet, with mixed-reality and augmented-reality devices around the corner, what we build today will still be relevant then. The interface patterns we build for VR apply to all immersive media. Don’t get left behind.
Together, we will build the web of tomorrow.
(rb, vf, yk, al, il)
Jon Moore introduces a new, powerful feature in Sketch: Sketch Libraries, which are Sketch documents that can be used globally.
Just happened upon this and thought it was funny…
https://youtu.be/0matGm1hY8o
As a marketer, it is extremely crucial to target [easyazon_link identifier=”1433670038″ locale=”US” tag=”americanfid09-20″]millennials[/easyazon_link] in order to tap into the power of direct purchase decisions and improve sales. As Skyler Huff points out in her article published on Millennial marketing, content falls under one of the below four quadrants:
(Image credit millennialmarketing)
Rooted content is what the brands actually want to convey to their audiences. This content is planned and promotional in nature. Editorial authority is important before you start publishing such content, as aggressive rooted content publishing might keep the millennials away.
Social care content is based on the one-on-one interaction that the brands have with their target audiences. Content pieces that are a part of a social customer care process or a problem-solving piece shared to build brand loyalty fall under this category. Once again, editorial authority is needed before any message is posted on behalf of your business in the social channels. Remember, a wrong message can be extremely harmful for the reputation as negativity travels much faster across social channels as compared to positivity.
Branded content also falls into the planned category as writers are fully prepared before they publish content on the brand media channels. An editorial review should be a part of this process and value should be given when creating content which solves a need of the target audience on a large scale.
Social satellite content often known as the brand newsroom refers to the group of content writers who constantly keep a watch across brand mentions on social media and prepare content based on the received reactions. The goal here is to proactively manage brand promotion.
Traditional advertising mediums like television, radio, newspapers, hoardings, etc. are a form of push advertising. Such forms of push advertising often cause irritation in the minds of the millennials and do not inspire true brand love.
Use content as an opportunity to reach the consumers when they need you. Google offers some great insights reaching the customers during the crucial micro moments.
(Image displaying some of the crucial travel moments that businesses need to get right. Image credit: think with Google)
If you expect your brand to receive a positive response from your content marketing efforts, then it is important to create agile content. Think about creating content pieces based on genuine user feedback and real customer data instead of choosing a content topic randomly. This is what Agile content is all about. Agile content pieces are revised regularly depending on user feedback thereby increasing its value and lifetime and reducing the risk of failure. An example would be to create blog posts based on the questions that your customers are regularly asking.
Step 1: Read well! A good writer should be a good reader first. Keep an eye on the latest industry trends and focus on fresh and fast moving news. You can try creating a content feed using Feedly or Scoop.it that collects news and information from several places together. This saves time as it eliminates the need to visit several sites on a daily basis to compile information. You need to visit your feed as often as possible because you never know when a new story will hit and go viral.
Step 2: Ask questions and gather data. Make use of the site search feature under Google Analytics and look out for the FAQ’s left by the users in the chatbot database to collect as much data as possible. Moreover, create survey forms and find out what problems your customers are facing so that you can create content based on the real problems faced by the users, instead of choosing random topics that might have worked well for any other business. Remember every business is unique, and you need to create content that satisfies the needs of your current and potential customers.
Step 3: Build a content calendar. No mission is successful without proper planning. Content marketing is an ongoing activity that needs full planning that starts with topic preparation. Creating a content calendar always helps because it allows your organization to produce constant and frequent content.
Step 4: Repurpose your content. Take help of all those creative brains who are working in your content writing team to repurpose your content. This will open new channels of obtaining traffic and solidify your branding efforts without having to spend extra time or money. You can convert a popular webinar into a series of blog posts, or you can turn a blog post into an infographic. You can try such content changes to constantly publish new and improved varieties of articles that segmented users will love to read and share.
FOMO stands for ‘Fear of Missing Out’ and the millennial generation, especially the women, do not want to miss out on the opportunities that your content pieces can generate.
(Image credit: Psy Blog)
Social media was able to garner success only because a large number of the social user base is millennials. They do not want to miss out on important news, events or personal invites and this is the reason they regularly remain logged into their social accounts; to stay connected and remain updated. They love to share things that are popular and can generate more engagement, and they love to comment on stories where they can speak up their mind.
Content created for the purpose of ‘fear of missing out’ surely has better chances of performing well in social media, and in that process, a lot of social shares and comments are generated.
Here are some ways through which you can leverage the power of FOMO in your content marketing strategy:
Here are some examples of interactive content:
Preparing content and publishing it on a desktop friendly site is not okay! Millennials spend a ton of time on their mobile devices, so producing content that is not readable on mobile is similar to producing no content at all. Stay mobile and create landing pages that are easy to read on mobile.
Here are some steps to have a mobile optimized content marketing strategy:
Millennials value content that is authentic. Your potential audience should learn from the content you provide. So, never try to hard sell. Instead, focus on speaking the millennial language when delivering the content. Information that resembles those coming directly from peers is trusted more and appear to be more authentic in the eyes of the millennials.
It would be a great idea to ask a millennial to contribute to an existing content piece in some way or the other. Empower your audiences with the power of interaction and the engagement levels are bound to increase.
Marketing to millennials is incredibly intuitive. Offer authentic experiences that can engage the readers. Acquire some influencers to share your story, and the millennials will follow. Have you used any specific strategy to target millennials?
As designers we usually turn to different sources of inspiration, and, well, sometimes the best inspiration lies right in front of us. With that in mind, we embarked on a special creativity mission nine years ago: to provide you with inspiring and unique desktop wallpapers1 every month. Wallpapers that are a bit more distinctive as the usual crowd and that are bound to fuel your ideas.
We are very thankful to all artists and designers who have contributed and are still diligently contributing to this mission, who challenge their artistic abilities each month anew to keep the steady stream of wallpapers flowing. This post features their artwork for September 2017. All wallpapers come in two versions — with and without a calendar — and can be downloaded for free. Time to freshen up your desktop!
Please note that:
“As summer comes to an end, all the creatures pull back to their hiding places, searching for warmth within themselves and dreaming of neverending adventures under the tinted sky of closing dog days.” — Designed by Ana Masnikosa3 from Belgrade, Serbia.
“It is inevitable. Summer is leaving silently. Let us think of ways to make the most of what is left of the beloved season.” — Designed by Bootstrap Dashboards46 from India.
“This calendar was inspired by International Talk Like a Pirate Day (September 19) — one of the many obscure and quirky days we celebrate in New Orleans. Our fair, colorfully corrupt city has entertained its share of outlaws over the years, but none as infamous as the pirate Jean Lafitte, a Frenchman who terrorized sailors and ships in the Gulf of Mexico and distributed his booty from a warehouse in New Orleans in the early 1800s. This calendar is a playful tribute to all of the misfits, outcasts and swashbucklers who call New Orleans home.” — Designed by Sonnie Sulak73 from New Orleans, LA.
“As summer comes to a close, so does the end of blue crab season in Maryland. Blue crabs have been a regional delicacy since the 1700s and have become Maryland’s most valuable fishing industry, adding millions of dollars to the Maryland economy each year. With more than 455 million blue crabs swimming in the Chesapeake Bay, these tasty critters can be prepared in a variety of ways and have become a summer staple in many homes and restaurants across the state. The blue crab has contributed so much to the state’s regional culture and economy, in 1989 it was named the State Crustacean, cementing its importance in Maryland history.” — Designed by The Hannon Group108 from Washington DC.
“It’s officially the end of the summer and I’m still in vacation mood, dreaming about all the amazing places I’ve seen. This illustration is inspired by a small town in France, on the Atlantic coast, right by the beach.” — Designed by Miruna Sfia135 from Romania.
“This autumn, we expect to see a lot of rainy days and blues, so we wanted to change the paradigm and wish a warm welcome to the new season. After all, if you come to think of it: rain is not so bad if you have an umbrella and a raincoat. Come autumn, we welcome you!” — Designed by PopArt Studio178 from Serbia.
“Cats are beautiful animals. They’re quiet, clean and warm. They’re funny and can become an endless source of love and entertainment. Here for the cats!” — Designed by UrbanUI223 from India.
“After leading a photographic tour through Northwestern Argentina and while discovering its magical ravines and rock formations, I decided to make a wallpaper inspired by the Devil’s throat formation. Use human for scale!” — Designed by Diego Waisman248 from the United States.
“I designed this wallpaper to remind everyone that autumn is here and they are still reading the best design website, Smashing Magazine” — Designed by Advanced Web Ranking271 from Romania.
“Since it is already September, the leaves are falling and the days are getting shorter and shorter. It is also getting colder so therefore this lovely wallpaper to warm you up.” — Designed by Melissa Bogemans296 from Belgium.
“Adapt to the seasons of life, change and transformation” — Designed by Pluscharts337 from India.
“I was visiting a beautiful garden, taking pictures of details within the plants. The colors of this leaf were so brilliant with the sun behind.” — Designed by Philippe Brouard362 from France.
“Autumn is coming, so I decided to try out a geometric leaf design this month!” — Designed by James Mitchell389 from the United Kingdom.
“India is a world in itself, with the richness of its heritage and culture. The beautiful festivals are a means of removing all the negativity in our minds and refreshing our souls from within. The festivals are filled with bright colors and uplifting music which rejuvenates our senses and ignites our soul with confluence of multiple energies drawn from several auspicious moments of the past. These festivals are a delight for the creative minds due to their vibrant concepts, energy, colors and art blended in to beautiful form. Every festival has a special significance and aura, I would like to communicate it to the world through this wallpaper.” — Designed by Shyam Pawar410 from India.
Designed by Metrovista437 from Orlando, FL.
“Travel and change of place adds new vigor to the mind. Take a break, forget your worries and travel. Create stories of new places and adventures to tell. Meet new people, learn new languages, taste new cuisines, experience the beauty of different culture and traditions, and lose your spirit to the soul of the universe which lies in traveling. On World Tourism Day, start a new journey of your life, rejuvenate and breathe and live happily while traveling across roads you have never taken before.” — Designed by Acodez IT Solutions464 from India.
“A touch on guitar’s strings, soft caresses on the piano’s pins, resurrecting waves of joy, of love from the heart within. Come, let’s get immersed in the sound of music…” — Designed by IPIX Technologies507 from India.
Designed by StarAdmin Bootstrap Admin Dashboard550 from India.
“September the 13th is the birthday of legendary author, Roald Dahl. If you haven’t heard of him, where have you been? I have even included an inspirational quote from the Charlie and the Chocolate Factory book.” — Designed by Safia Begum577 from the United Kingdom.
Designed by Doud – Elise Vanoorbeek596 from Belgium.
“Such a lovely time of the year in Melbourne!” — Designed by Tazi619 from Australia.
“We remember their love when they can no longer remember.” — Designed by Color Mean Creative Studio644 from Dubai.
Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.
A big thank you to all designers for their participation. Join in next month689!
What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.
Yuval Keshtcher interviews Austin Knight about virtual reality, augmented reality, and mixed reality.
Comments