How To Build A Real-Time Multiplayer Virtual Reality Game (Part 1)

How To Build A Real-Time Multiplayer Virtual Reality Game (Part 1)

How To Build A Real-Time Multiplayer Virtual Reality Game (Part 1)

Alvin Wan

In this tutorial series, we will build a web-based multiplayer virtual reality game in which players will need to collaborate to solve a puzzle. We will use A-Frame for VR modeling, MirrorVR for cross-device real-time synchronization, and A-Frame Low Poly for low-poly aesthetics. At the end of this tutorial, you will have a fully functioning demo online that anyone can play.

Each pair of players is given a ring of orbs. The goal is to “turn on” all orbs, where an orb is “on” if it’s elevated and bright. An orb is “off” if it’s lower and dim. However, certain “dominant” orbs affect their neighbors: if it switches state, its neighbors also switch state. Only player 2 can control the dominant orbs while only player 1 can control non-dominant orbs. This forces both players to collaborate to solve the puzzle. In this first part of the tutorial, we will build the environment and add the design elements for our VR game.

The seven steps in this tutorial are grouped into three sections:

  1. Setting Up The Scene (Steps 1–2)
  2. Creating The Orbs (Steps 3–5)
  3. Making The Orbs Interactive (Steps 6–7)

This first part will conclude with a clickable orb that turns on and off (as pictured below). You will use A-Frame VR and several A-Frame extensions.

(Large preview)

Setting Up The Scene

1. Let’s Go With A Basic Scene

To get started, let’s take a look at how we can set up a simple scene with a ground:

Creating a simple scene

Creating a simple scene (Large preview)

The first three instructions below are excerpted from my previous article. You will start by setting up a website with a single static HTML page. This allows you to code from your desktop and automatically deploy to the web. The deployed website can then be loaded on your mobile phone and placed inside a VR headset. Alternatively, the deployed website can be loaded by a standalone VR headset.

Get started by navigating to glitch.com. Then, do the following:

  1. Click on “New Project” in the top right,
  2. Click on “hello-webpage” in the drop-down,
  3. Next, click on index.html in the left sidebar. We will refer to this as your “editor”.

You should now see the following Glitch screen with a default HTML file.

Glitch project: the index.html file

Glitch project: the index.html file (Large preview)

As with the linked tutorial above, start by deleting all existing code in the current index.html file. Then, type in the following for a basic webVR project, using A-Frame VR. This creates an empty scene by using A-Frame’s default lighting and camera.



  
    Lightful
    
  
  
    
    
  

Raise the camera to standing height. Per A-Frame VR recommendations (Github issue), wrap the camera with a new entity and move the parent entity instead of the camera directly. Between your a-scene tags on lines 8 and 9, add the following.



  

Next, add a large box to denote the ground, using a-box. Place this directly beneath your camera from the previous instruction.



Your index.html file should now match the following exactly. You can find the full source code here, on Github.


  
    Lightful
    
  
  
    
      
      
        
      

      
      
    
  

This concludes setup. Next, we will customize lighting for a more mysterious atmosphere.

2. Add Atmosphere

In this step, we will set up the fog and custom lighting.

A preview of a simple scene with a dark mood

A preview of a simple scene with a dark mood (Large preview)

Add a fog, which will obscure objects far away for us. Modify the a-scene tag on line 8. Here, we will add a dark fog that quickly obscures the edges of the ground, giving the effect of a distant horizon.


The dark gray #111 fades in linearly from a distance of 10 to a distance of 15. All objects more than 15 units away are completely obscured, and all objects fewer than 10 units away are completely visible. Any object in between is partially obscured.

Add one ambient light to lighten in-game objects and one-directional light to accentuate reflective surfaces you will add later. Place this directly after the a-scene tag you modified in the previous instruction.




Directly beneath the lights in the previous instruction, add a dark sky. Notice the dark gray #111 matches that of the distant fog.


This concludes basic modifications to the mood and more broadly, scene setup. Check that your code matches the source code for Step 2 on Github, exactly. Next, we will add a low-poly orb and begin customizing the orb’s aesthetics.

Creating The Orbs

3. Create A Low-Poly Orb

In this step, we will create a rotating, reflective orb as pictured below. The orb is composed of two stylized low-poly spheres with a few tricks to suggest reflective material.

Rotating, reflective orb
(Large preview)

Start by importing the low-poly library in your head tag. Insert the following between lines 4 and 5.


Create a carousel, wrapper, and orb container. The carousel will contain multiple orbs, the wrapper will allow us to rotate all orbs around a center axis without rotating each orb individually, and the container will — as the name suggests — contain all orb components.


  
    
      
    
  

Inside the orb container, add the orb itself: one sphere is slightly translucent and offset, and the other is completely solid. The two combined mimic reflective surfaces.


  
  

Finally, rotate the sphere indefinitely by adding the following a-animation tag immediately after the lp-sphere inside the .orb entity in the last instruction.


Your source code for the orb wrappers and the orb itself should match the following exactly.


  
    
      
        
        
        
      
    
  

Check that your source code matches the full source code for step 3 on Github. Your preview should now match the following.

Rotating, reflective orb
(Large preview)

Next, we will add more lighting to the orb for a golden hue.

4. Light Up The Orb

In this step, we will add two lights, one colored and one white. This produces the following effect.

Orb lit with point lights
(Large preview)

Start by adding the white light to illuminate the object from below. We will use a point light. Directly before #orb0 but within #container-orb0, add the following offset point light.


    

In your preview, you will see the following.

Orb lit with white point light
(Large preview)

By default, lights do not decay with distance. By adding distance="8", we ensure that the light fully decays with a distance of 8 units, to prevent the point light from illuminating the entire scene. Next, add the golden light. Add the following directly above the last light.


Check that your code matches the source code for step 4 exactly. Your preview will now match the following.

Orb lit with point lights
(Large preview)

Next, you will make your final aesthetic modification to the orb and add rotating rings.

5. Add Rings

In this step, you will produce the final orb, as pictured below.

Golden orb with multiple rings
(Large preview)

Add a ring in #container-orb0 directly before #orb0.


Notice the ring itself does not contain color, as the color will be imbued by the point light in the previous step. Furthermore, the material="side:double" is important as, without it, the ring’s backside would not be rendered; this means the ring would disappear for half of its rotation.

However, the preview with only the above code will not look any different. This is because the ring is currently perpendicular to the screen. Thus, only the ring’s “side” (which has 0 thickness) is visible. Place the following animation in between the a-ring tags in the previous instruction.


Your preview should now match the following:

Golden orb with ring
(Large preview)

Create a variable number of rings with different rotation axes, speeds, and sizes. You can use the following example rings. Any new rings should be placed underneath the last a-ring.


  


  

Your preview will now match the following.

Golden orb with multiple rings
(Large preview)

Check that your code matches the source code for step 5 on Github. This concludes decor for the orb. With the orb finished, we will next add interactivity to the orb. In the next step, we will specifically add a visible cursor with a clicking animation when pointed at clickable objects.

Making The Orbs Interactive

6. Add A Cursor

In this step, we will add a white cursor that can trigger clickable objects. The cursor is pictured below.

clicking on orb
(Large preview)

In your a-camera tag, add the following entity. The fuse attribute allows this entity the ability to trigger click events. The raycaster attribute determines how often and how far to check for clickable objects. The objects attribute accepts a selector to determine which entities are clickable. In this case, all objects of class clickable are clickable.


    

Next, add cursor animation and an extra ring for aesthetics. Place the following inside the entity cursor object above. This adds animation to the cursor object so that clicks are visible.



Next, add the clickable class to the #orb0 to match the following.


Check that your code matches the source code for Step 6 on Github. In your preview, drag your cursor off of them onto the orb to see the click animation in action. This is pictured below.

clicking on orb
(Large preview)

Note the clickable attribute was added to the orb itself and not the orb container. This is to prevent the rings from becoming clickable objects. This way, the user must click on the spheres that make up the orb itself.

In our final step for this part, you will add animation to control the on and off states for the orb.

7. Add Orb States

In this step, you will animate the orb in and out of an off state on click. This is pictured below.

Interactive orb responding to clicks
(Large preview)

To start, you will shrink and lower the orb to the ground. Add a-animation tags to the #container-orb0 right after #orb0. Both animations are triggered by a click and share the same easing function ease-elastic for a slight bounce.



To further emphasize the off state, we will remove the golden point light when the orb is off. However, the orb’s lights are placed outside of the orb object. Thus, the click event is not passed to the lights when the orb is clicked. To circumvent this issue, we will use some light Javascript to pass the click event to the light. Place the following animation tag in #light-orb0. The light is triggered by a custom switch event.


Next, add the following click event listener to the #container-orb0. This will relay the clicks to the orb lights.


Check that your code matches the source code for Step 7 on Github. Finally, pull up your preview, and move the cursor on and off the orb to toggle between off and on states. This is pictured below.

Interactive orb responding to clicks
(Large preview)

This concludes the orb’s interactivity. The player can now turn orbs on and off at will, with self-explanatory on and off states.

Conclusion

In this tutorial, you built a simple orb with on and off states, which can be toggled by a VR-headset-friendly cursor click. With a number of different lighting techniques and animations, you were able to distinguish between the two states. This concludes the virtual reality design elements for the orbs. In the next part of the tutorial, we will populate the orbs dynamically, add game mechanics, and set up a communication protocol between a pair of players.

Smashing Editorial(rb, dm, il)

Pitching Your Writing To Publications

Pitching Your Writing To Publications

Pitching Your Writing To Publications

Rachel Andrew

Recently, I had a chat with Chris Coyier and Dave Rupert over on the Shoptalk Podcast about writing for publications such as Smashing Magazine and CSS-Tricks. One of the things we talked about was submitting ideas to publications — something that can feel quite daunting even as an experienced writer.

In this article, I’m going to go through the process for pitching, heavily based on my own experience as a writer and as Editor in Chief of Smashing. However, I’ve also taken a look at the guidelines for other publications in order to help you find the right places to pitch your article ideas.

Do Your Research

Read existing articles on the site that you would like to write for. Who do they seem to be aimed at? What tone of voice do the writers take? Does the publication tend to publish news pieces, opinion, or how-to tutorials? Check to see if there are already other pieces which are on the same subject as your idea, i.e. will your piece add to the conversation already started by those articles? If you can show that you are aware of existing content on a particular subject, and explain how you will reference it or add to that information, the editor will know you have done some research.

Research more widely; are there already good pieces on the subject that an editor will consider your piece to be a repeat of? There is always space for a new take on an issue, but in general, publications want fresh material. You should be ready to explain how your piece will reference this earlier work and build upon it, or introduce the subject to a new audience.

A good example from our own archives is the piece, “Replacing jQuery With Vue.js”. There are a lot of introductions to Vue.js, however, this piece was squarely aimed at the web developer who knows jQuery. It introduced the subject in a familiar way specifically for the target audience.

Find The Submission Guide

The next thing to do is to find the submission information on the site you want to write for. Most publications will have information about who to contact and what information to include. From my point of view, simply following that information and demonstrating you have done some research puts you pretty high up the queue to be taken seriously. At Smashing Magazine, we have a link to the guide to writing for us right there on the contact form. I’d estimate that only 20% of people read and follow those instructions.

Screenshot of the Smashing Contact Form
The link to our submission guide on our Contact Us page.

When you submit your idea, it is up to you to sell it to the publication. Why should I run with your idea over the many others that will show up today? Spending time over your submissions will make a huge difference in how many pieces you have accepted.

Different publications have different requirements. At Smashing Magazine, we ask you to send an outline first, along with some information about you so that we can understand your expertise in the subject matter. We’re very keen to feature new voices, and so we’ll accept pieces from writers who haven’t got a huge string of writing credentials.

The information we request helps us to decide if you are likely to be able to deliver a coherent piece. As our articles are technical in nature (often tutorials), I find that an outline is the best way to quickly see the shape of the proposal and the scope it will cover. A good outline will include the main headings or sections of the article, along with an explanation of what will be taught in that section.

For many other publications, a common request is for you to send a pitch for the article. This would typically be a couple of paragraphs explaining the direction your piece will take. Once again, check the submission guide for any specific details that publication is interested to see.

The Verge has an excellent submission guide which explains exactly what they want to see in a pitch:

“A good pitch contains a story, a narrative backbone. Pitches should clearly and concisely convey the story you plan to write and why it matters. The best pitches display promising pre-reporting and deep knowledge of the topic as well as a sense of the angle or insight you plan to pursue. If your story depends on access to a person or company, you should say whether you have obtained it already (and if not, what your prospects are). Pitches should also be written in the style you expect to write the story.”

— “How To Pitch The Verge,” The Verge

A List Apart explains what they will accept in their contribution page:

“… a rough draft, a partial draft, or a short pitch (a paragraph or two summarizing your argument and why it matters to our readers) paired with an outline. The more complete your submission is, the better feedback we can give you.”

— “Write For Us,” A List Apart

The Slate has a list of Do’s and Don’ts for pitching:

“Do distill your idea into a pitch, even if you have a full draft already written. If you happen to have a draft ready, feel free to attach it, but please make sure you still include a full pitch describing the piece in the body of the email.”

— “How To Pitch Slate,” The Slate

Including your pitch or outline in the body of the email is a common theme of pitch guidelines. Remember that your aim is to make it as easy as possible for the editor to think, “that looks interesting”.

Include A Short Biography

The editor doesn’t need your life story, however, a couple of sentences about you is helpful. This is especially useful if you are a newer writer who has subject matter expertise but fewer writing credentials. If you are proposing an article to me about moving a site from WordPress to Gatsby, and tell me that the article is based on your experience of doing this on a large site, that is more interesting to me than a more experienced writer who has just thought it would be a good topic to write about.

If you do have writing credits, a few relevant links are more helpful than a link to your entire portfolio.

When You Can’t Find A Submission Guide

Some publications will publish an email address or contact form for submissions, but have no obvious guide. In that case, assume that a short pitch as described above is appropriate. Include the pitch in the body of the email rather than an attachment, and make sure you include contact details in addition to your email address.

If you can’t find any information about submitting, then check to see if the publication is actually accepting external posts. Are all the articles written by staff? If unsure, then get in touch via a published contact method and ask if they accept pitches.

I’ve Already Written My Article, Why Should I Send An Outline Or Pitch?

We ask for an outline for a few reasons. Firstly, we’re a very small team. Each proposal is assessed by me, and I don’t have time in the day to read numerous 3000-word first draft proposals. In addition, we often have around 100 articles in the writing process at any one time. It’s quite likely that two authors will want to write on the same subject.

On receiving an outline, if it is going in a similar direction to something we already have in the pipeline, I can often spot something that would add to — rather than repeat — the other piece. We can then guide you towards that direction, and be able to accept the proposal where a completed piece may have been rejected as too similar.

If you are a new writer, the ability to structure an outline tells me a lot about your ability to deliver us something useful. We are going to spend time and energy working with you on your article, and I want to know it will be worthwhile for all of us.

If you are an experienced writer, the fact that you have read and worked with our guidelines tells me a lot about you as a professional. Are you going to be difficult for our editorial team to work with and refuse to make requested changes? Or are you keen to work with us to shape a piece that will be most useful and practical for the audience?

In The Verge submission guide included above, they ask you to “clearly and concisely” convey the story you plan to write. Your pitch shouldn’t be an article with bits removed or about the first two paragraphs. It’s literally a sales pitch for your proposed article; your job is to make the editor excited to read your full proposal! Some publications — in particular those that publish timely pieces on news topics — will ask you to attach your draft along with the pitch, however, you still need to get the editor to think it is worth opening that document.

Promoting Yourself Or Your Business

In many guides to self-promotion or bootstrapping the promotion of a startup, writing guest posts is something that will often be suggested. Be aware that the majority of publications are not going to publish an advert and pay you for the privilege.

Writing an article that refers to your product may be appropriate, as most of our expertise comes from doing the job that we do. It is worth being upfront when proposing a piece that would need to mention your product or the product of the company you work for. Explain how your idea will not be an advert for the company and that the product will only be mentioned in the context of the experience gained in your work.

Some publications will accept a trade of an article for some promotion. CSS-Tricks is one such publication, and describes what they are looking for as follows:

“The article is intended to promote something. In that case, no money changes hands. In this scenario, your pitch must be different from a sponsored post in that you aren’t just straight up pitching your product or service and that you’re writing a useful article about the web; it just so happens to be something that the promotion you’ll get from this article is valuable to you.”

— “Guest Posting,” CSS-Tricks

Writing for a popular publication will give you a byline, i.e. your credit as an author. That will generally give you at least one link to your own site. Writing well-received articles can be a way to build up your reputation and even introduce people to your products and services, but if you try and slide an advert in as an article, you can be sure that editors are very well used to spotting that!

Pitching The Same Idea To Multiple Publications

For time-sensitive pieces, you might be keen to spread the net. In that case, you should make publications aware of submitting that you have submitted it elsewhere. Otherwise, it is generally good practice to wait for a response before offering the piece to another publication. The Slate writes,

“Do be mindful if you pitch your idea to multiple publications. We try to reply to everyone in a timely manner, typically within one to two days. As a general rule, and if the story isn’t too timely, it’s best to wait that amount of time before sharing the pitch with another publication. If you do decide to cast a wide net, it’s always helpful to let us know ahead of time so we can respond accordingly.”

— “How To Pitch Slate,” The Slate

If Your Pitch Is Rejected

You will have ideas rejected. Sometimes, the editor will let you know why, but most often you’ll get a quick no, thanks. Try not to take these to heart; there are many reasons why the piece might be rejected that have nothing to do with the article idea or the quality of your proposal.

The main reasons I reject pitches are as follows:

  1. Obvious Spam
    This is the easy one. People wanting to publish a “guest post” on vague subjects, and people wanting “do-follow links”. We don’t tend to reply to these as they are essentially spam.
  2. No Attempt At A Serious Outline
    I can’t tell anything about an idea from two sentences or three bullet points, and if the author can’t spend the time to write an outline, I don’t think I want to have a team member working with them.
  3. Not A Good Topic For Us
    There are some outlines that I can’t ever see being a great fit for our readers.
  4. An Attempt To Hide An Advert
    In this case, I’ll suggest that you talk to our advertising team!
  5. Difficult To Work With
    Last but not least, authors who have behaved so badly during the pitch process that I can’t bring myself to inflict them on anyone else. Don’t be that person!

If I have a decent outline on a relevant subject in front of me, then one of two things are going to happen: I’ll accept the outline and get the author into the writing process or I’ll reply to the author because there is some reason why we can’t accept the outline as it is. That will usually be because the target audience or tone is wrong, or we already have a very similar piece in development.

Quite often in these scenarios, I will suggest changes or a different approach. Many of those initial soft rejections become an accepted idea, or the author comes back with a different idea that does indeed work.

Ultimately, those of us who need to fill a publication with content really want you to bring us good ideas. To open my inbox and find interesting pitches for Smashing is a genuine highlight of my day. So please do write for us.

Things To Do

  • Research the publication, and the type of articles they publish;
  • Read their submissions guide, and follow it;
  • Be upfront if you have sent the pitch to other publications;
  • Include a couple of sentences about you, and why you are the person to write the article. Link to some other relevant writing if you have it;
  • Be polite and friendly, but concise.

Things To Avoid

  • Sending a complete draft along with the words, “How do I publish this on your site?”;
  • Sending things in a format other than suggested in the submissions guide;
  • Pitching a piece that is already published somewhere else;
  • Pitching a hidden advert for your product or services;
  • Following up aggressively, or sending the pitch to multiple editors, Facebook messenger, and Twitter, in an attempt to get noticed. We publish a pitch contact, because we want pitches. It might take a day or two to follow up though!

More Pitching Tips

Smashing Editorial(il)

Skype users desperately want its old icon back

It’s been a rough week for people who are overly attached to Android and iOS app icons. Not only were youngsters sent into a tailspin when Snapchat updated its icon, but now it’s the turn of Skype users to go through the pain of watching their beloved app get a visual update.

That’s because Skype has got a new icon on iPhones and iPads. It’s part of a larger aesthetic overhaul of Microsoft Office icons, which has been in the works since last year. And while the new icon is arguably more noticeable than the Snapchat update, is this redesign a case of users getting angry over nothing?

Skype app icon

Expect to see the new icon shortly

In the redesign we can see that it’s inverted the colours of the previous app icon, so now the S is white and the circular background is a blue gradient. The new Skype icon is in line with Microsoft’s Fluent Design System and will roll out to all platforms in the next few weeks.

As is often the case with redesigns of familiar products, the new icon has provoked a negative reaction from users. Plenty were quick to point out that the new colour scheme makes the telecommunications application look suspiciously similar to Facebook Messenger. Meanwhile, others noticed that the sizing of the new icon made it appear bloated and overweight, leading to them to consider removing it from their devices altogether – a response Skype probably wasn’t going for.

Let’s just hope people aren’t jumping ship too soon. The updated icon is part of a wider upgrade to the app that sees Microsoft fix some of the bugs that have plagued previous iterations. So while it might take a while to get used to the new icon, at least Skype will work better than before.

In the cut-throat and fickle world of communications apps though, maybe this will be the nail in the coffin for Skype. After all, it’s been flagging behind Whatsapp and Facebook Messenger for some time now. Or perhaps new features, such as Microsoft’s plan to allow Skype users to make VoIP calls to each other in the start of 2020, will give the app a new lease of life.

Related articles:

Monthly Web Development Update 8/2019: Strong Teams And Ethical Data Sensemaking

Monthly Web Development Update 8/2019: Strong Teams And Ethical Data Sensemaking

Monthly Web Development Update 8/2019: Strong Teams And Ethical Data Sensemaking

Anselm Hannemann

What’s more powerful than a star who knows everything? Well, a team not made of stars but of people who love what they do, stand behind their company’s vision and can work together, support each other. Like a galaxy made of stars — where not every star shines and also doesn’t need to. Everyone has their place, their own strength, their own weakness. Teams don’t consist only of stars, they consist of people, and the most important thing is that the work and life culture is great. So don’t do a moonshot if you’re hiring someone but try to look for someone who fits into your team and encourages, supports your team’s values and members.

In terms of your own life, take some time today to take a deep breath and recall what happened this week. Go through it day by day and appreciate the actions, the negative ones as well as the positive ones. Accept that negative things happen in our lives as well, otherwise we wouldn’t be able to feel good either. It’s a helpful exercise to balance your life, to have a way of invalidating the feeling of “I did nothing this week” or “I was quite unproductive.” It makes you understand why you might not have worked as much as you’re used to — but it feels fine because there’s a reason for it.

News

  • Three weeks ago we officially exhausted the Earth’s natural resources for the year — with four months left in 2019. Earth Overshoot Day is a good indicator of where we’re currently at in the fight against climate change and it’s a great initiative by people who try to give helpful advice on how we can move that date so one day in the (hopefully) near future we’ll reach overshoot day not before the end of the year or even in a new year.
  • Chrome 76 brings the prefers-color-scheme media query (e.g. for dark mode support) and multiple simplifications for PWA installation.

UI/UX

JavaScript

Web Performance

  • Some experiments sound silly but in reality, they’re not: Chris Ashton used the web for a day on a 50MB budget. In Zimbabwe, for example, where 1 GB costs an average of $75.20, ranging from $12.50 to $138.46, 50MB is incredibly expensive. So reducing your app bundle size, image size, and website cost are directly related to how happy your users are when they browse your site or use your service. If it costs them $3.76 (50MB) to access your new sports shoe teaser page, it’s unlikely that they will buy or recommend it.
  • BBC’s Toby Cox shares how they ditched iframes in favor of ShadowDOM to improve their site performance significantly. This is a good piece explaining the advantages and drawbacks of iframes and why adopting ShadowDOM takes time and still feels uncomfortable for most of us.
  • Craig Mod shares why people prefer to choose (and pay for) fast software. People are grateful for it and are easily annoyed if the app takes too much time to start or shows a laggy user interface.
  • Harry Roberts explains the details of the “time to first byte” metric and why it matters.

CSS

HTML & SVG

  • With Chrome 76 we get the loading attribute which allows for native lazy loading of images just with HTML. It’s great to have a handy article that explains how to use, debug, and test it on your website today.

Lazy loading images of cats

No more custom lazy-loading code or a separate JavaScript library needed: Chrome 76 comes with native lazy loading built in. (Image credit)

Accessibility

Security

  • Here’s a technical analysis of the Capital One hack. A good read for anyone who uses Cloud providers like AWS for their systems because it all comes down to configuring accounts correctly to prevent hackers from gaining access due to a misconfigured cloud service user role.

Privacy

Work & Life

  • For a long time I believed that a strong team is made of stars — extraordinary world-class individuals who can generate and execute ideas at a level no one else can. These days, I feel that a strong team is the one that feels more like a close family than a constellation of stars. A family where everybody has a sense of predictability, trust and respect for each other. A family which deeply embodies the values the company carries and reflects these values throughout their work. But also a family where everybody feels genuinely valued, happy and ignited to create,” said Vitaly Friedman in an update thought recently and I couldn’t agree more.
  • How do you justify a job in a company that has a significant influence on our world and our everyday lives and that not necessarily with the best intentions? Meredith Whittaker wrote up her story of starting at Google, having an amazing time there, and now leaving the company because she couldn’t justify it anymore that Google is using her work and technology to get involved in fossil energy business, healthcare, governance, and transportation business — and not always with the focus on improving everyone’s lives or making our environment a better place to live in but simply for profit.
  • Synchronous meetings are a problem in nearly every company. They take a lot of time from a lot of people and disrupt any schedule or focused work. So here’s how Buffer switched to asynchronous meetings, including great tips and insights into why many tools out there don’t work well.
  • Actionable advice is what we usually look for when reading an article. However, it’s not always possible or the best option to write actionable advice and certainly not always a good idea to follow actionable advice blindly. That’s because most of the time actionable advice also is opinionated, tailored, customized advice that doesn’t necessarily fit your purpose. Sharing experiences instead of actionable advice fosters creativity so everyone can find their own solution, their own advice.
  • Sam Clulow’s “Our Planet, Our Problem” is a great piece of writing that reminds us of who we are and what’s important for us and how we can live in a city and switch to a better, more thoughtful and natural life.
  • Climate change is a topic all around the world now and it seems that many people are concerned about it and want to take action. But then, last month we had the busiest air travel day ever in history. Airplanes are accountable for one of the biggest parts of climate active emissions, so it’s key to reduce air travel as much as possible from today on. Coincidentally, this was also the hottest week measured in Europe ever. We as individuals need to finally cut down on flights, regardless of how tempting that next $50-holiday-flight to a nice destination might be, regardless of if it’s an important business meeting. What do we have video conferencing solutions for? Why do people claim to work remotely if they then fly around the world dozens of times in their life? There are so many nice destinations nearby, reachable by train or, if needed, by car.

Update from a team member of what happened during the week and what he’s working on

The team at Buffer shares what worked and what didn’t work for them when they switched to asynchronous meetings. (Image credit)

Going Beyond…

  • Leo Babauta shares a tip on how to stop overthinking by cutting through indecision. We will never have the certainty we’d like to have in our lives so it’s quite good to have a strategy for dealing with uncertainty. As I’m struggling with this a lot, I found the article helpful.
  • The ethical practices that can serve as a code of conduct for data sensemaking professionals are built upon a single fundamental principle. It is the same principle that medical doctors swear as an oath before becoming licensed: Do no harm. Here’s “Ethical Data Sensemaking.”
  • Paul Hayes shares his experience from trying to live plastic-free for a month and why it’s hard to stick to it. It’s surprising how shopping habits need to be changed and why you need to spend your money in a totally different way and cannot rely on online stores anymore.
  • Oil powers the cars we drive and the flights we take, it heats many of our homes and offices. It is in the things we use every day and it plays an integral role across industries and economies. Yet it has become very clear that the relentless burning of fossil fuels cannot continue unabated. Can the world be less reliant on oil?
  • Uber and Lyft admit that they’re making traffic congestion worse in cities. Next time you use any of those new taxi apps, try to remind yourself that you’re making the situation worse for many people in the city.

Thank you for reading. If you like what I write, please consider supporting the Web Development Reading List.

—Anselm

Smashing Editorial(cm)

The (Upcoming) WordPress Renaissance

The (Upcoming) WordPress Renaissance

The (Upcoming) WordPress Renaissance

Leonardo Losoviz

It has been 8 months since Gutenberg was launched as the default content editor in WordPress. Depending who you ask, you may hear that Gutenberg is the worst or the best thing that has happened to WordPress (or anything in between). But something that most people seem to agree with, is that Gutenberg has been steadily improving. At the current pace of development, it’s only a matter of time until its most outstanding issues have been dealt with and the user experience becomes truly pleasant.

Gutenberg is an ongoing work in progress. While using it, I experience maddening nuisances, such as floating options that I can’t click on because the block placed below gets selected instead, unintuitive grouping of blocks, columns with so much gap that make them useless, and the “+” element calling for my attention all over the page. However, the problems I encounter are still relatively manageable (which is an improvement from the previous versions) and, moreover, Gutenberg has started making its potential benefits become a reality: Many of its most pressing bugs have been ironed out, its accessibility issues are being solved, and new and exciting features are continuously being made available. What we have so far is pretty decent, and it will only get better and better.

Let’s review the new developments which have taken place since Gutenberg’s launch, and where it is heading to.

Note: For more information about this topic, I recommend watching WordPress founder Matt Mullenweg’s talk during the recent WordCamp Europe 2019.

Why Gutenberg Was Needed

Gutenberg arrived just in time to kick-start the rejuvenation of WordPress, to attempt to make WordPress appealing to developers once again (and reverse its current status of being the most dreaded platform). WordPress had stopped looking attractive because of its focus on not breaking backwards compatibility, which prevented WordPress from incorporating modern code, making it look pale in comparison with newer, shinier frameworks.

Many people argue that WordPress was in no peril of dying (after all, it powers more than 1/3rd of the web), so that Gutenberg was not really needed, and they may be right. However, even if WordPress was in no immediate danger, by being disconnected from modern development trends it was headed towards obsolescence, possibly not in the short-term but certainly in the mid to long-term. Let’s review how Gutenberg improves the experience for different WordPress stakeholders: developers, website admins, and website users.

Developers have recently embraced building websites through JavaScript libraries Vue and React because (among other reasons) of the power and convenience of components, which translates into a satisfying developer-experience. By jumping into the bandwagon and adopting this technique, Gutenberg enables WordPress to attract developers once again, allowing them to code in a manner they find gratifying.

Website admins can manage their content more easily, improve their productivity, and achieve things that couldn’t be done before. For instance, placing a Youtube video through a block is easier than through the TinyMCE Textarea, blocks can serve optimal images (compressed, resized according to the device, converted to a different format, and so on) removing the need to do it manually, and the WYSIWYG (What You See Is What You Get) capabilities are decent enough to provide a real-time preview of how the content will look like in the website.

By giving them access to powerful functionality, website users will have a higher satisfaction when browsing our sites, as experienced when using highly-dynamic, user-friendly web applications such as Facebook or Twitter.

In addition, Gutenberg is slowly but surely modernizing the whole process of creating the website. While currently it can be used only as the content editor, some time in the future it will become a full-fledged site builder, allowing to place components (called blocks) anywhere on a page, including the header, footer, sidebar, etc. (Automattic, the company behind WordPress.com, has already started work on a plugin adding full site editing capabilities for its commercial site, from which it could be adapted for the open-source WordPress software.) Through the site-building feature, non-techy users will be able to add very powerful functionality to their sites very easily, so WordPress will keep welcoming the greater community of people working on the web (and not just developers).

Fast Pace Of Development

One of the reasons why Gutenberg has seen such a fast pace of development is because it is hosted on GitHub, which simplifies the management of code, issues and communication as compared to Trac (which handles WordPress core), and which makes it easy for first-time contributors to become involved since they may already have experience working with Git.

Being decoupled from WordPress core, Gutenberg can benefit from rapid iteration. Even though a new version of WordPress is released every 3 months or so, Gutenberg is also available as a standalone plugin, which sees a new release every two weeks (while the latest release of WordPress contains Gutenberg version 5.5, the latest plugin version is 6.2). Having access to powerful new functionality for our sites every two weeks is very impressive indeed, and it enables to unlock further functionality from the broader ecosystem (for instance, the AMP plugin requires Gutenberg 5.8+ for several features).

Headless WordPress To Power Multiple Stacks

One of the side effects of Gutenberg is that WordPress has increasingly become “headless”, further decoupling the rendering of the application from the management of the content. This is because Gutenberg is a front-end client that interacts with the WordPress back-end through APIs (the WP REST API), and the development of Gutenberg has demanded a consistent expansion of the available APIs. These APIs are not restricted to Gutenberg; they can be used together with any client-side framework, to render the site using any stack.

An example of a stack we can leverage for our WordPress application is the JAMstack, which champions an architecture based on static sites augmented through 3rd party services (APIs) to become dynamic (indeed, Smashing Magazine is a JAMstack site!). This way, we can host our content in WordPress (leveraging it as a Content Management System, which is what it is truly good at), build an application that accesses the content through APIs, generate a static site, and deploy it on a Content Delivery Network, providing for lower costs and greater access speed.

New Functionality

Let’s play with Gutenberg (the plugin, not the one included in WordPress core, which is available here) and see what functionality has been added in the last few months.

Block Manager

Through the block manager, we can decide what blocks will be available on the content editor; all others will be disabled. Removing access to unwanted blocks can be useful in several situations, such as:

  • Many plugins are bundles of blocks; when installing such a plugin, all their blocks will be added to the content editor, even if we need only one
  • As many as 40 embed providers are implemented in WordPress core, yet we may need just a few of them for the application, such as Vimeo and Youtube
  • Having a large amount of blocks available can overwhelm us, impairing our workflow by adding extra layers that the user needs to navigate, leading to suboptimal use of the time; hence, temporarily disabling unneeded blocks can help us be more effective
  • Similarly, having only the blocks we need avoids potential errors caused by using the wrong blocks; in particular, establishing which blocks are needed can be done in a top-down manner, with the website admin analyzing all available blocks and deciding which ones to use, and imposing the decision on the content managers, who are then relieved from this task and can concentrate on their own duties.

Block manager

Enabling/disabling blocks through the manager (Large preview)

Cover Block With Nesting Elements

The cover block (which allows us to add a title over a background image, generally useful for creating hero headers) now defines its inner elements (i.e. the heading and buttons, which can be added for creating a call to action) as nested elements, allowing us to modify its properties in a uniform way across blocks (for instance, we can make the heading bold and add a link to it, place one or more buttons and change their background color, and others).

Cover block

The cover block accepts nested elements (Large preview)

Block Grouping And Nesting

Please beware: These features are still buggy! However, plenty of time and energy is being devoted to them, so we can expect them to work smoothly soon.

Block grouping allows to group several blocks together, so when moving them up or down on the page, all of them move together. Block nesting means placing a block inside of a block, and there is no limit to the nesting depth, so we can have blocks inside of blocks inside of blocks inside of… (you’ve got me by now). Block nesting is especially useful for adding columns on the layout, through a column block, and then each column can contain inside any kind of block, such as images, text, videos, etc.

Block grouping and nesting

Blocks can be grouped together, and nested inside each other (Large preview)

Migration Of Pre-Existing Widgets

Whereas in the past there were several methods for adding content on the page (TinyMCE content, shortcodes, widgets, menus, etc.), the blocks attempt to unify all of them into a single method. Currently, newly-considered legacy code, such as widgets, is being migrated to the block format.

Recently, the “Latest Posts” widget has been re-implemented as a block, supporting real-time preview of how the layout looks when configuring it (changing the number of words to display, showing an excerpt or the full post, displaying the date or not, etc).

Latest posts widget

The “Latest posts” widget includes several options to customize its appearance (Large preview)

Motion Animation

Moving blocks up or down the page used to involve an abrupt transition, sometimes making it difficult to understand how blocks were re-ordered. Since Gutenberg 6.1, a new feature of motion animation solves this problem by adding a realistic movement to block changes, such as when creating, removing or reordering a block, giving a greatly improved visual cue of the actions taken to re-order blocks. In addition, the overall concept of motion animation can be applied throughout Gutenberg to express change and thus improve the user experience and provide better accessibility support.

Motion animation
Blocks have a smooth effect when being re-ordered. (Large preview)

Functionality (Hopefully) Coming Soon

According to WordPress founder Matt Mullenweg, only 10% of Gutenberg’s complete roadmap has been implemented by now, so there is plenty of exciting new stuff in store for us. Work on the new features listed below has either already started, or the team is currently experimenting with them.

  • Block directory
    A new top-level item in wp-admin which will provide block discovery. This way, blocks can be independently installed, without having to ship them through a plugin.
  • Navigation blocks
    Currently, navigation menus must be created through their own interface. However, soon we will be able to create these through blocks and place them anywhere on the page.
  • Inline installation of blocks
    Being able to discover blocks, the next logical step is to be able to install a new block on-the-fly, where is needed the most: On the post editor. We will be able to install a block while writing a post, use the new block to generate its HTML, save its output on the post, and remove the block, all without ever browsing to a different admin page.
  • Snap to grid when resizing images
    When we place several images on our post, resizing them to the same width or height can prove to be a painful process of trying and failing repeatedly until getting it right, which is far from ideal. Soon, it will be possible to snap the image to a virtual grid layer which appears on the background as the image is being resized.

WordPress Is Becoming Attractive (Once Again)

Several reasons support the idea that WordPress will soon become an attractive platform to code for, as it used to be once upon a time. Let’s see a couple of them.

PHP Modernization

WordPress’s quest to modernize does not end with incorporating modern JavaScript libraries and tooling (React, webpack, Babel): It also extends to the server-side language: PHP. WordPress’s minimum version of PHP was recently bumped up to 5.6, and should be bumped to version 7.0 as early as December 2019. PHP 7 offers remarkable advantages over PHP 5, most notably it more than doubles its speed, and later versions of PHP (7.1, 7.2 and 7.3) have each become even faster.

Even though there seems to be no official plans to further upgrade from PHP 7.0 to its later versions, once the momentum is there it is easier to keep it going. And PHP is itself being improved relentlessly too. The upcoming PHP 7.4, to be released in November 2019, will include plenty of new improvements, including arrow functions and the spread operator inside of arrays (as used for modern JavaScript), and a mechanism to preload libraries and frameworks into the OPCache to further boost performance, among several other exciting features.

Reusability Of Code Across Platforms

A great side effect of Gutenberg being decoupled from WordPress is that it can be integrated with other frameworks too. And that is exactly what has happened! Gutenberg is now available for Drupal, and Laraberg (for Laravel) will soon be officially released (currently testing the release candidate). The beauty of this phenomenon is that, through Gutenberg, all these different frameworks can now share/reuse code!

Conclusion

There has never been a better time to be a web developer. The pace of development for all concerned languages and technologies (JavaScript, CSS, image optimization, variable fonts, cloud services, etc) is staggering. Until recently, WordPress was looking at this development trend from the outside, and developers may have felt that they were missing the modernization train. But now, through Gutenberg, WordPress is riding the train too, and keeping up with its history of steering the web in a positive direction.

Gutenberg may not be fully functional yet, since it has plenty of issues to resolve, and it may still be some time until it truly delivers on its promises. However, so far it is looking good, and it looks better and better with each new release: Gutenberg is steadily bringing new possibilities to WordPress. As such, this is a great time to reconsider giving Gutenberg a try (that is, if you haven’t done so yet). Anyone somehow dealing with WordPress (website admins, developers, content managers, website users) can benefit from this new normal. I’d say this is something to be excited about, wouldn’t you?

Smashing Editorial(dm, il)

McDonald’s coffee chain gets a (very) subtle makeover

To celebrate 10 years of serving coffee, McCafé US has given its branding a refresh. The coffee chain, which is owned by McDonald’s, is set to get a bright new identity this month, and it’s one of the subtlest logo changes we’ve ever seen.

This is probably a wise move on McCafé’s part. In our guide to logo design we look at how it’s important to tweak and refine a logo’s typography to add personality, and that’s exactly what McCafé has done.

The subtle changes see the wordmark’s lettering (above) ever so slightly rounded out. Meanwhile the removal of the underline stroke creates a bold and minimalist brand identity that’s more in line with the rest of McDonald’s products and promotional material, such as its recent set of French fry-themed billboard ads.

See how it compares to the old McCafé logo, below.

Old McCafe logo

The previous McCafé logo made its debut in 2006

Other changes to the McCafé brand include the introduction of bright gold cups, which McDonald’s modestly claims in a press release will “match our gold standard for quality coffee”. The new look will also appear across pastry bags and other items of packaging. Let’s just hope it doesn’t lead to a viral gaffe like McDonald’s accidentally smutty cups.

Topping off the rebrand is the tagline ‘good is brewing’, which is inspired by the concept that “good is always brewing with McCafé because good people deserve good coffee.” Seems like McCafé wants to be associated with “good”.

If you’re already a fan of McCafé, rest assured that the taste of its coffee will remain the same. And for extra peace of mind, all of its hot beverage cups will remain FSC-Certified.

McCafe rebrand

The new branding will start rolling this month

“Over the years, we’ve been focused on elevating the McCafé experience – from adding more choices, evolving the in-restaurant experience and broadening accessibility to this important brand,” said McDonald’s Vice President of Menu Innovation, Linda VanGosen.

“This latest update is a natural evolution of the steps we’ve taken to modernise the brand experience and deliver growth. We remain excited about coffee, and will continue to prioritise making McCafé a go-to coffee destination for customers.”

Related articles:

How to make a magazine cover stand out

Designing magazine covers for newsstand titles is harder than it used to be, mostly as the declining industry is plagued with tumbling circulation figures and title closures.

Limitless digital content available in a split-second makes the monthly print cycle of magazines look ever more anachronistic and irrelevant, and the corresponding decline in revenue from print ads only hastens print’s downward spiral (despite these brilliant print ads showing that print advertising can still work).

The battle is no longer print versus digital. Digital has already won. The challenge for print is simply to co-exist and keep going, and the frontline of this battle is the cover of your magazine, which must somehow engage, cajole and convince readers that buying something written six weeks ago might somehow still be a worthwhile experience. 

But despite all the gloomy headlines announcing the death of print, there are still bold launches and thrilling innovations that suggest all may not be lost, and even Meghan Markle has got involved in cover design lately, meaning it must be back in vogue (pardon the pun). 

And just as the book publishing industry defended itself against the assault of e-readers with more beautiful jacket designs that celebrated the physical properties of print, so magazine publishers and designers must remind their readers why print is different, not inferior to digital.

Click the icon in the top-right of each image to see the full-size version.

01. Beware the formula

GQ (left) doesn’t want you to miss out on any content, so it lists most of it on its cover. Esquire (right) hard sells one story, creating a cover that exudes confidence

An exhausting checklist of unofficial best practices – The Formula – has accumulated over time. These guidelines include adding flashes in the top left quadrant (the hot zone of visibility), running sell lines above your masthead (to grab the browsers attention before they’ve even seen your logo design) and keeping the main cover hit in the top half of the cover (so it’s less likely to be hidden by other titles). The list’s endless: models should make eye contact; the colour pink is ‘feminine’; ‘green shouldn’t be seen’…  

The obvious problem with following The Formula is that nearly everyone else on the newsstand is doing the same thing. Browse any magazine shelf and you’ll see an exhausting repetition, a visual cacophony where every title is cancelled out by its identikit neighbour. And despite the apparent common sense behind some of these rules, common sense rarely makes for a truly thrilling magazine cover.  

It takes courage to promise less and deliver more, but this is the essence of good design

It takes courage to promise less and deliver more, but this is the essence of good design: make a beautiful image that attracts and engages the reader. Your cover is a (visual) tool to draw your reader to the (written) content. For that split-second when the reader first sees the cover, aesthetics must take precedent for the process of seduction to begin.

A text-heavy cover is shouting at a tiny, vanishing audience – the casual reader browsing a local supermarket or newsagent is all but extinct. If your cover is confident and clear, it will stand out in the crowd.  

02. Own your cover image

The Sunday Times (left) frames Tracy Emin from her distinctive arched eyebrows to her chin, her personality powerfully communicated in a daring crop. The New York magazine cover (right) demonstrates how a banal image can be electrifying when daringly cropped 

Unless you’re lucky enough to commission original artwork every month, you’ll mostly be faced with making covers from supplied images. Sometimes you’ll be sharing an image with another magazine and almost certainly the internet, so you need to make your treatment stand out.

One of the most effective ways to take ownership is to crop the image differently.  

Inexperienced designers will tend to use the source image unquestioningly as the cover composition, but experienced designers will look for different crops to make the cover unique.

Imagine having a head-and-shoulders portrait as your source image. The obvious solution would be to have the head roughly fill the available area – so the face is as large as possible – and position coverlines accordingly. But by changing the crop you can radically alter the tone and deliver a fresh editorial message.  

Zoom in closer for a larger-than-life face, an instantly arresting image. Shrink or discard the coverlines to increase the cover star’s status, or type them on top of their face, so suddenly your story is more important than the star. Desaturate or even eliminate the colour to communicate a different tone. Or apply illustrations on top of the image to stamp your ownership.

03. Use special print treatments

Despite paying for 100% coverage, Gist (left) uses foil sparingly to make a wonderfully classy cover. Wired Italia (right) applies a fluorescent Pantone pink to stunning effect

Foils and fifth colour Pantones (an additional plate to the default CMYK) are the most effective way of triggering the magpie instinct in readers. The powerful physical presence of foil instantly lifts it above flat colour printing: it reacts to the light, changes tone depending on how it’s displayed and carries a unique currency of quality and luxury with consumers (which is why it’s the de facto choice for so many cosmetics brands). There’s no printing technique as reliable as foil to lend desirability and opulence to your cover. (See our post on how to create special finishes in InDesign to learn how to create these print techniques) 

As foils are costed according to the percentage of the cover area they’re applied to, you’ll see quite a few titles foil their logo, not so many that lavish it from corner to corner. But however you use it, impact on newsstand is guaranteed.

Pantone inks – especially fluorescents – are significantly cheaper and can radically weaponise your design. Explore the back catalogue of Wired (UK and US) for a thorough masterclass in fifth colour treatments.

Spot UVs, embosses, dies-cuts and bespoke cover stock finishes can all be applied to maximise impact, and the best way of finding out what you’d like (and can afford) is to visit your printer. They will be manufacturing a host of other products, from food packaging to corporate brochures, so explore what materials, techniques and treatments might be available. Your printer wants your (repeat) business, so negotiation is not uncommon.

04. Make your cover work on social media

Both covers stand out on newsstand but work just as well as thumbnails

Social media is likely to be your biggest promotional tool and first contact with prospective readers. Your cover design must work both at newsstand and at a radically smaller size.

Just as the music industry has embraced the miniaturisation demanded by the digital age, with album designs increasingly sparse and iconic, so magazine covers must work at different sizes and in different media.  

Reduce. Simplify. Email your cover to yourself and look at it on your phone. If it looks cluttered at that size and minor hits are illegible, are they worth retaining? What does your cover communicate about you when compressed to little more than an icon? Does it project authority or chaos?

And use social media to promote your cover before it’s even on the newsstand. Create audience anticipation and give them a reason to look out for you. Post photographs of your best spreads, tag your illustrators and contributors, take advantage of the powerful reach of social media to make your cover (and issue) visible to the vast majority of people who aren’t in WHSmith that week. Don’t be afraid to use the internet to celebrate print. There’s no time to hold grudges.

The two magazines above are so utterly confident in their own brands that they ignore any formula. Elle (left) brutally crops Emma Watson through her chin while eye contact is well below the midpoint of the cover. Even her name is essentially invisible, yet as a thumbnail, the white magazine logo condenses to be wonderfully clear. Bazaar’s cover (right) is equally bold, awarding Paltrow the entire cover but daring to hide her face. Both covers stand out on newsstand but work just as well as thumbnails.

05. Trust your reader (and your instincts)

A ‘commercial’ newsstand Esquire (left) and ‘desirable’ subscriber cover (right) demonstrate the wild disparity at the heart of consumer magazine publishing. The perfect cover probably sits somewhere between these two extremes

Many magazines publish two different covers for the same issue: a regular, text-hit heavy newsstand version, and a subscriber covers, usually stripped of words and featuring a more daring crop. The logic is that the subscriber cover doesn’t need to work at newsstand, so the loyal subscriber is rewarded with the cover they’d prefer.  

This practice reveals the low opinions many publishers have of the average reader, who they fear needs to be cajoled, hectored and bullied into parting with their cash. But are the two objectives (selling and looking good) really mutually exclusive? The best magazines dare to imagine that their readers are as smart as them, and design accordingly.  

Design is no longer a mysterious art – the aesthetics of Apple’s new OS are discussed at the water cooler along with the new Game of Thrones episode – and simplification and decluttering have become synonymous with quality.  

Similarly, trust your own instincts. If something seems wrong with your cover, even if you don’t know what it is, it’s still wrong. Take it all off and start again. Workshop as many different ideas as possible. Don’t waste time refining small details or honing type. Make it work as a whole, first.  

And don’t be dismayed if your editor asks you to try something else. If your cover needs explaining, it’s a failure. No amount of polish will save a fundamentally flawed idea. A spontaneous, radical new direction can deliver a killer cover in less than a minute, while bad covers usually take forever because they are, ultimately, never finished. They just get sent to the printers when there’s no longer any time left…

Next page: five more ways to make your magazine cover stand out…

06. Mind your language

Wired (left) is legendary for type-only covers, often employing eye-popping Pantone colours to make the text shout even louder. With a title as respected as Time (right), abandoning artwork reinforces the urgency and power of the headline  

As the designer you should know the language and editorial tone of your magazine as well as your editor. Each word is as important as the image, every sentence is another opportunity to reinforce brand values. Design is communication and therefore essentially an extension of vocabulary. Great covers should exhibit a seamless synthesis of words and imagery.  

For this reason, designer and editor should ideally work in unison on the cover. Designs batted back and forth between editorial and design are less likely to deliver a cohesive solution. That ‘what if?’ spark needs to be caught instantly and allowed to catch fire. The best editors will invariably have great instincts for design, and good designers will love words (or at least typography) as much as images.

Type-only covers have become increasingly popular and the best examples demonstrate the art/editorial hybrid mind in perfect harmony. Provocative statements or urgent questions can engage the reader just as powerfully as an image, the subliminal message being: This is too important to waste time with a pretty picture.  

Type-based covers are difficult to pull off, but well executed treatments can make for powerful brand statements and inevitably stand out against cluttered competitors. If all else fails, do one thing and do it well: sell your cover line. And question the value of supplementary sell-lines. Additional hits should support and enhance the overall design, not exist for their own sake.

07. Be controversial

Candy magazine’s Terry Richardson photograph of Miley Cyrus (left) might have been viewed as merely risqué in 2015. Now, it’s difficult to imagine it being published. Adbusters (right) seldom pull the punches with controversial subject matter, and it is impossible not to be struck by this stark, witty cover treatment. Would a top left bubble flash really help?

Grab the attention of the reader and you have achieved your primary purpose: making the magazine a purchase option. But shock tactics aren’t appropriate for all titles, and shouldn’t be deployed gratuitously. Readers will be suspicious of cynical or engineered controversy. Context is everything and provocative covers are meaningless if they doesn’t support a genuine message. However if the editorial team do have a daring idea to communicate, your duty as designer is to amplify it.  

Of course, getting your magazine withdrawn from the newsstands is a very real danger. Magazines do get taken from the shelves and if you read your audience wrong, you’ll alienate them in the short term and damage trust in the long term.

Sex isn’t the only shock tactic: religion and politics are probably the riskiest subject matters, and cultural tastes are fluid. A sexually provocative cover in 2019 will fall under much greater scrutiny than it might have done pre-#MeToo. Politically sensitive subjects should be approached with maximum caution, although provocative treatments may evade censorship (and rancor) if tempered with sophisticated wit.

08. Brand your own content

Time keeps the cover star behind the logo, establishing a hierarchy of importance. Vogue Italia makes cover model Hadid huge, but the black, stamped masthead is dominant. Both magazines choose subjects that are of equal status to their own brands

Your magazine is more important than your content. Whatever your cover, and however big a deal it is, your brand – the masthead logo, the identity, the values – are your primary concern. Your cover is more than just a billboard for your current issue, it is an ongoing advertisment of brand.

A film magazine with an exclusive on the latest Star Wars movie might be forgiven for sacrificing their own masthead legibility in favour of letting the cover image dominate, but by transferring brand collateral over to your cover star, you make a subtle statement of subservience.

During the design process, you should be constantly printing out your current cover and setting it against the previous half-dozen to see what, if anything, is happening with your brand. Over enthusiasm (or over-promising) can sometimes lead to brand-wounding cover treatments that weaken credibility and dilute authority.

So be prepared (with your editor) to push back over supplied imagery and/or resist commercial pressures. In an ideal world, you will only run covers that share your values. Remember, your brand and your cover subject are inexorably linked, and if there are early doubts over the merits of your cover subject, it’s better to address them immediately (and find another cover) than be forever haunted by your own back issues page…

09. Make your cover an event

Multiple covers don’t have to be variations on a theme. Port took an opportunity to deliver two radically different covers for the same issue. The confidence this communicates to the reader is itself an affirmation of Port’s identity and brand authority

Split-run covers can be an effective and cost-efficient way to get attention on the newsstand and generate social media interest. It’s likely your cover is printed four-up – four covers on one sheet of paper which are then cut down and bound – so supplying four different designs can cost next to nothing. Suddenly your new cover is not just about your latest issue – it’s an event.

There’s something intrinsically satisfying about seeing variations on a theme. Simple transitions on social media of your different cover treatments engage reader attention and give an additional spin to your new issue narrative: which cover will you find on the newsstand?

Suddenly your new cover is not just about your latest issue – it’s an event.

And split-runs don’t have to even be for the reader’s benefit. They can be a valuable testing ground for new ideas or treatments. Why not print 75 per cent of your covers with a regular design, but put out 25 per cent with a more daring treatment, as a subtle piece of market research? Regular readers rarely have trouble expressing their preferences and audience feedback is always valuable.

Part of the pleasure (and torture) of magazine design is that however many colour proofs you make, when the finished magazine comes back from the printer, its physical presence will always be slightly different to how you imagined it. Publishing straight to the internet is a brutally efficient, digital exercise – what you see is what you get –  but printing magazines is analogue, mercurial and magical.  

10. Pay attention to indie mags

If God made magazines, they’d probably look like Migrant Journal (left), the undisputed indie hit of recent years. Port (right) is now an elder statesman of indie publishing, and its smart redesign shows it to be just as hungry now as it was in 2011

The success of the indie magazine market can be a source of anguish for mainstream magazine designers, who often look at their opulent production values and resolutely non-commercial cover treatments with hopeless envy. And whilst their largely subscriber-based/specialist shop distribution mean there are few practical lessons to be learnt from them, their energy, passion and enthusiasm offer a timely reminder of how magazines can still be valued as prestigious products to be celebrated on their own terms.

Recent successes like Migrant Journal and Mushpit both radically rethink how a magazine can look and read: the former presenting deep content with a clinical precision closer to an academic journal (albeit beautifully designed), the latter brattishly throwing every convention of ‘good design’ out of the window and reengaging with readers in a playfully aggressive fashion.   

The (best) indies demonstrate the magazine format to be an infinitely mutable medium, capable of radical reinvention and continued relevance. It is the indie mags that have responded most readily to the challenges of existing in a digital world, championing the value of magazines in their own right. Adopting the (more often than not) wilful obtuseness of their cover designs is unlikely to translate to a mainstream, newsstand title, but there are underlying principles of audience engagement, brand-as-content and bold experimentalism that can be inspiring and instructive.  

Mark Wynne is the art editor of Computer Arts magazine, the world’s best-selling design magazine. Subscribe to make sure you don’t miss his next cover.

Related articles:

Spider mouse is the creepiest accessory we’ve seen

Arachnophobes, you might want to look away now. That’s because we’ve found a computer mouse supplier whose tools come with built-in creepy crawlies, including the infamous eight-legged terrors. And we’re not talking about plastic toys here, we mean real (but dead) creatures encased in the transparent chassis of a mouse.

Depending on how you feel around bugs, this tool either deserves a place in our guide to the best tools for graphic designers, or deserves to be exterminated like the bugs themselves.

The company behind this nightmarish creation, Realbug, doesn’t stop the scares there though. When you switch off the lights, you’ll see that this mouse glows in the dark, meaning that there’s no escape from this icky input device.

If, for some bizarre reason, this isn’t the mouse for you, why not check out our list of the best mice for designers. We’ve also got buying guides for the best left-handed mouse and the best stylus for iPad.

Beetle mouse

Perhaps you’d prefer a beetle to a spider?

Realbug also has plenty of non-spider related options, such as scorpions, centipedes, beetles and butterflies. We can see these being popular in the build up to Halloween, or ordered as a practical joke to scare a squeamish colleague. 

Either way, these bug mice won’t leave you out of pocket as they’re all priced under $20.

Related articles:

Snapchat’s Spectacles 3: hot new item or just a gimmick?

The big Snapchat story this week may be the angry user reaction to the new Snapchat icon, but right now Snap Inc. is more focused on something entirely different: the brand new version of its weird sunglasses/camera combo.

The first two versions of Snap’s Spectacles – why on earth couldn’t they call them Snaptacles? – haven’t exactly set the world on fire. But the latest iteration, Spectacles 3 – or Snaptacl3s as any right-thinking company would have called them – could be the ones to change all that.

Spectacles 3

Spectacles 3 are the new high-fashion, high-price of Snap’s not-really AR glasses

Coming in at twice the price of Spectacles 2 (Snap2cles, obviously), the big selling point of Spectacles 3 is that they feature not one but two HD cameras, one mounted on the corner of each lens. And that means you can use them to take 3D photos and shoot 3D video.

By tapping either of the Spectacles’ buttons you can shoot up to 60 seconds of video at a time, or by pressing and holding a button you’ll take a still photo. The Spectacles also feature a four-microphone array to provide high-fidelity audio for your videos. 

Once you’ve taken your shot you can transfer it wirelessly to your phone and add 3D effects within Snapchat before uploading to your Snapchat account (you can also export straight to your phone’s camera roll). And if you want to see your photos and videos in full 3D, Spectacles 3 also come with a Google Cardboard-like 3D viewer that enables you to do just that.

These are by far the coolest-looking version of Spectacles yet; they feature a striking stainless steel frame with circular lenses, and they come in two colour options. There’s Carbon – black with a semi-matte finish and high-gloss details, and Mineral, a lighter tone with just a hint of gold. 

Spectacles 3

Spectacles 3 magically charge in their special carrying case

Spectacles 3 come with 4GB of storage,enough to hold up to 100 videos or 1,200 photos, but you’ll need to recharge before you hit that limit. Snap says that one charge will be enough for shooting 70 videos or around 200 photos, and once you’re out of juice, simply put your Spectacles in their charging case, which will rejuvenate them in about 75 minutes.

They’re available to pre-order now, with delivery promised for the autumn. Whether Snap has got it right this time around remains to be seen; Spectacles 3 certainly look good, and the ability to create 3D video and imagery definitely feels like a bonus, but at $380/£330 for what still feels like something of a gimmicky wearable, this is quite a tough sell. 

Colour us intrigued, but not intrigued enough to stump up that much money. If course if they’d called them Snaptacl3s it might be a different matter, but you just can’t tell some people. Find out more about Spectacles 3 here.

Related articles:

Learn all you need to know about Adobe Creative Cloud with this bundle

Whether you use the Adobe Creative Cloud programs or something comparable for your graphic design needs, there always seems to be more to know and more tricks to learn. After all, part of being a creative is consistently trying new mediums, new tools, and new projects. 

For those of you that live by that sentiment, this Graphic Design + Adobe CC Certification School bundle may be just what you need to fuel your growth as a creative. The bundle includes courses in the big three Adobe CC programs, and it’s currently available for over 95% off at $39.

Featuring three courses and over 300 lessons, this training bundle will teach you the basics, even if you’ve been using a different creative software or none at all. On top of that it also introduces you to the more advanced elements of Adobe Illustrator, InDesign, and Photoshop.

In the first course, you’ll learn how to produce pro-level artwork in Illustrator with instructions that walk you through everything from image sizing and editing to layering and colour management.

Next, you’ll learn how to use Adobe InDesign in order to craft everything from composite documents to manuals via lessons that teach you about templates, formatting, and style configuration.

Finally, your Adobe Photoshop training will teach you how to professionally edit photos and correct things like lighting and exposure – all through hands-on instruction that utilises real-world examples. Make your work look as good as can be with the best laptops for Photoshop.

When you’ve completed each course, you’ll earn a Continuing Professional Development (CPD) certification that you can use in order to showcase your skills on your résumé. And since you’ll have lifetime access to the content, you’ll be the first to receive any updates as soon as they become available.

Further your career in graphic design or expand into new mediums with the Graphic Design + Adobe CC Certification School bundle, available for just $39 for a limited time.

Related articles: