Ever wonder what people read and write about UX on Medium? I scraped the “Top stories” section of the following tags: UX, UI, UX Design, UI Design, Design, User Experience, and Product Design. I got 392 articles in total, among which are 230 unique ones. I cleaned up the data to include: title, author, collection, claps, responses, post date, and read time. You can check out the data in this Google Sheet and do your own slicing and analysis.

Note: The data was collected on June 29, 2018. Looks like Medium “Top stories” algorithm favors more recent articles. 205 out of the 230 articles are from 2018.

Here are some high-level stats just for fun:

Top 5 most clapped articles

#1 - 7 Practical Tips for Cheating at Design by Adam Wathan & Steve Schoger (131K claps)

#2 - A quick beginner’s guide to drawing by Ralph Ammer (112K claps)

#3 - 10 cheat codes for designing User Interfaces by Riel M (70K claps)

#4 - Good to great UI animation tips by Pablo Stanley (62K claps)

#5 - Design Better Forms by Andrew Coyle (53K claps)

Top 5 most replied articles

#1 - I Got Rejected by Apple Music… So I Redesigned It by Jason Yuan (386 responses)

#2 - Design Better Forms by Andrew Coyle (296 responses)

#3 - A quick beginner’s guide to drawing by Ralph Ammer (243 responses)

#4 - Why Product Thinking is the next big thing in UX Design by Nikkel Blaase (243 responses)

#5 - Design better data tables by Andrew Coyle (178 responses)

Top 5 longest read time

#1 - Designing A Perfect Responsive Configurator by Smashing Magazine (58 min)

#2 - Creating Usability with Motion: The UX in Motion Manifesto by Issara Willenskomer (21 min)

#3 - Building the Universal Menu of Tomorrow (Part 1) by Hammaad Mahboob (20 min)

#4 - UX Design Tools for 2018 (For Mac AND PC) by Chris Bam Harrison (17 min)

#5 - Становление дизайнера: от фриланса из общежития до работы с топовыми компаниями и запуска своего продукта by Ilya Sidorenko (17 min)

Top 5 most featured authors

#1 - Eugen Eşanu (6 articles)

#2 - Fabricio Teixeira (5 articles)

#3 - Muzli (5 articles)

#4 - Nick Babich (5 articles)

#5 - Tubik Studio (4 articles)

Top 5 most featured collections

#1 - UX Collective (40 articles)

#2 - UX Planet (35 articles)

#3 - Prototypr (17 articles)

#4 - Muzli - Design inspiration (8 articles)

#5 - Design + Sketch (6 articles)

The most used number

7 is the most used number in article titles. Get this: it’s actually used 7 times. You can’t make this up.

7 Practical Tips for Cheating at Design by Adam Wathan & Steve Schoger

7 Rules for Creating Gorgeous UI (Part 1) by Erik D. Kennedy

7 Basic Rules for Button Design by Nick Babich

7 steps to become a UI/UX designer by Nicole Saidy

7 Rules of Using Radio Buttons vs Drop-Down Menus by Saadia Minhas

7 Stages of User’s Action in Design by Eugen Eşanu

7 Essential Prototyping Tools to use with Sketch 🔧 by Marc Andrew

Standalone articles vs Collection articles

Standalone articles: 43

Collection articles: 187

Free vs Paywall

Free articles: 224

Paywall articles: 6

Here are the 6 paywall articles:

Designing A Perfect Responsive Configurator by Smashing Magazine

How To Design Emotional Interfaces For Boring Apps by Smashing Magazine

10 Psychology Concepts for Designers by Eleanor McKenna

How to Pick Colours for your Interface by Eleanor McKenna

Microsoft Bob Gets the Last Laugh by Elizabeth Nicholas

How I fell in love with AI. by Gleb Kuznetsov

Emojis in title

5 articles have emojis in the title:

Material Design + Figma Styles = 🔥 by Thomas Lowry

💥 30 Brand New Design Tools. by prototypr.io

How we built Goodshows App 🍿 — design process, challenges, and learnings of building a social network by Farhan Razak

The Ultimate Sketch Resource Archive 🗄 by Marc Andrew

7 Essential Prototyping Tools to use with Sketch 🔧 by Marc Andrew

Articles in different languages

English: 204

Portuguese: 11

Chinese: 8

Russian: 2

Spanish: 2

Czech: 1

Italian: 1

Vietnamese: 1

Word Cloud

I removed some common words like “and”, “is”, “UX”, etc. You can play around with it on CodePen yourself.

That’s it for now! Along the same lines, I want to gather enough data and train a neural network to write articles by itself. Let me know if you’re thinking about doing something similar :-)

If Donald Trump can be president, sure you can find ways to appear to be a rockstar ninja guru wizard unicorn UX designer, or whatever the hell they like to call themselves. The amazing Pablo Stanley already wrote in details about How to pretend you’re a great designer, but if you need something quick & dirty, like if you have an interview tomorrow and you don’t know what you’re doing, read the following tricks:

1. Dress for the job you want. Wear those Warby Parker glasses and a patterned shirt. It will make you look creative and light-hearted.

2. Have a Moleskine notebook with you at all times. If you can’t afford one, use post-its instead. Just doodle random stuff whenever you can and say you’re visualizing your thought process. Make sure to post them on Twitter too. This shows that you’re a visual thinker.

3. Complain about everything. Some talking points to get you started: Complain about how a lot of companies don’t get the value of design; Complain about unsolicited redesigns; Complain about the collaboration process with you PM & ENG; Complain about how the craftsmanship of print design is lost in this digital era. It indicates that you understand the landscape and have the motivation to make the world a better place.

4. Tell people that you care about designing for humanity and social change. It’s fine if you don’t know what they mean, because no one does. Just say you deeply care about them. This sets you up to be more empathetic and compassionate than those who only work on soulless products.

5. Make up some bullshit side projects and talk about them non-stop. It could be an app, a website, a podcast, a Snapchat account, a missing cat poster, a tree house, or whatever you want. The point is to demonstrate your passion and your maker spirit outside of your day job.

6. Remember the lingo in pairs: Gulp vs Grunt, React vs Angular, Sketch vs Figma, Framer vs Principle, etc. If you hear someone talk about one thing, just dismiss it by saying the alternative is superior. If they ask you why, just say “If you have to ask, you won’t get it.” It establishes you as an insightful domain expert.

7. Always tell people you enjoy mentoring other junior designers, even if you’re also junior as fuck. This proves that you’re a thought leader and you contribute back to the UX community.

Good luck out there and let’s make UX great again!

Subscribe to The UX Blog

7 tricks to appear to be a rockstar ninja guru wizard unicorn UX designer was originally published in theuxblog.com on Medium, where people are continuing the conversation by highlighting and responding to this story.

Fun experiments with Tensorflow

With all the talk about machine learning, it’s sad that most resources out there are quite daunting for someone who doesn’t have a computer science background. How can we make machine learning more fun?

Can a machine recognize a Pokémon?

Tensorflow (Google’s open source machine learning library) has an image recognition API that outputs its understanding of the image. The score indicates the level of confidence. The original results look like this:

I made it less intimidating in the following examples (inspired by Bastien Petit’s Trying TensorFlow’s image recognition script).

After some experimenting, I realized that Tensorflow doesn’t do much with 2D Pokémon pictures. It just thinks they’re about comic books, but doesn’t get into the details. So I grabbed some screenshots of these cool 3D Pokémon renderings from the official commercials . Now Tensorflow can see more clearly.

Let’s check out Charmander:

King penguin? I think their body shapes actually are similar. 😅

Here comes our beloved Pikachu:

I didn’t even know what an axolotl is. 😮

How about some badass ones? Gyarados：

Triceratops? I can see the facial bone structure. 😃

Dark Mewtwo：

Well, technically it is flying. 😄

Let’s end with Snorlax:

Piggy bank 🐷 + killer whale 🐋 ? I like that combo!

Why can’t we create more tutorials and resources like this to make machine learning more approachable and fun?

Turn your mocks into VR

This plugin works on a Sketch file like this:

And turns it into VR like this:

Installation

1. Download Zip and Extract it. There’s a demo sketch file and a SketchToVR.sketchplugin file.
2. Double click on SketchToVR.sketchplugin. Sketch will install the plugin.

Export your mocks with the plugin

1. Open the demo Sketch file. The “background” artboard is a 360° photo. The “ui” artboard is the interface on top of the photo. In order to be seamless, the 360° photo you use should be equirectangular. There are some examples on Flickr. The one in my file is from Nick Hobgood.
2. Go to Plugins > Sketch to VR > Export. The export may be slow due to the size of the 360° photo.

View your mocks in VR

1. The exported folder will be used to run A-Frame, an open-source Web VR library developed by MozVR. It needs a local server to work (simply opening the HTML page will not work). I recommend the SimpleHTTPServer by Scott Garner. Right click on the exported folder and choose SimpleHTTPServer. Use click & drag to navigate.
2. To preview on your phone with a Cardboard, there are a few options. If you own a website, just upload this folder to your website and access the URL from your phone. Or you can use Chrome port forwarding to open localhost:8000 on your phone (initial page load may be slow due to the size of the 360° photo). Tap on the bottom right Cardboard icon to switch to VR mode!

Video instructions (35s)

Troubleshooting

1. If you use your own sketch files, make sure to name your artboards “background” and “ui”.
2. If you create your own photo / UI, you may need to go into the index.html file to adjust the dimension of the images. Read more about A-Frame.
3. If you get a system prompt dialog while using SimpleHTTPServer, choose Allow.
4. If you get some console errors and can’t see anything on the web page, restart the browser.

https://github.com/auxdesigner/Sketch-to-VR

Have fun making!

Sketch Plugin: Sketch to VR was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Unless you’ve been living under a rock, you should be fascinated (or at least intrigued?) by VR. Check out some articles that gave me inspiration:

• From product design to virtual reality by Jean-Marc Denis
• A month designing in VR by Julius Tarng
• Designing for virtual reality by ustwo

After some investigation, turns out it’s actually not that hard to make a VR app, even if you don’t have any 3D or coding experience. Just to give you an example, here is an app I made using this method.

Tools you need:

• A VR headset (I have Google Cardboard, but others will work just fine.)
• Unity (Download and install the free version)
• Android SDK (Download from the SDK Tools Only section. I’m using Android as an example, but iOS should work as well.)
• Cardboard Unity SDK (Download from Github repo)
• An auto walk script made by Jupp Otto (Download from Github repo)

The app we’ll be making is a simple virtual environment tour. You can toggle auto walk using the trigger in your VR headset.

Step 1: Create a virtual environment

• Open Unity. Create a project in the pop up window. No need to modify any settings at this point.

• I’ll be using this Forest Environment free asset created by Patryk Zatylny, but you can use whatever asset you like. Open the URL, click “Open in Unity”. Unity will load it in the Asset Store panel. Then click “Download” (Unity doesn’t allow downloading asset directly from the web page).

• After the download is finished, you’ll see a pop up. Click “Import”.

• Navigate to your Project panel (If you can’t find it, go to top menu bar, Window > Layouts > Default). Double-click the demoScene_free file in the file structure (use the slider in the lower right to change thumbnail size). Now you can see the beautiful view in the Scene panel.

Step 2: Set up Cardboard Unity SDK

• In the Hierarchy panel, delete First Person Controller and Main Camera.

• Unzip the Cardboard SDK you downloaded from the Github repo, you get a cardboard-unity-master folder. In the top menu bar, go to Asset > Import package > Custom package, choose CardboardSDKForUnity in the cardboard-unity-master folder. In the next pop up, click “Import”.

• In your Project panel, you’ll see a Cardboard folder. Go to the Prefabs subfolder, drag CardboardMain and drop it in the Scene.

• Test it out by clicking on the play button. Use your mouse/trackpad and alt/control keys to simulate camera pan/tilt. When you are not in play mode, you can modify the initial position of CardboardMain using the Transform section in the Inspector panel all the way on the right, or using the transform tools in the toolbar in the upper left. (More details on how to position things in Unity)

Step 3: Add an auto walk function

• Unzip the auto walk script you downloaded from the Github repo, you get a Google-Cardboard-master folder. Drag the Autowalk.cs file and drop it in the Assets folder in the Project panel.

• Click to select CardboardMain in the Hierarchy panel, click “Add component” in the Inspector panel all the way to the right, find Autowalk and select it.

• You’ll see a new Autowalk section in the Inspector panel. Check “Walk When Triggered” and set the speed to 1 (or whatever you like). Now in play mode, you can use mouse click/trackpad tap to simulate the trigger to see autowalk in action!

Step 4: Package the app

• Go to top menu bar, File > Build settings. Select Android and click on “Player settings”. Enter a Company Name (up on the top) and a Bundle Identifier (in the Other Settings section down on the bottom). In Resolution and Presentation section, change Default Orientation to Landscape Left.

• Scroll down to Publishing Settings. If you don’t have a keystore, check “Create New Keystore”, enter your password, and click “Browse Keystore”. In the pop up, enter a name for your keystore and click “Save”. Now you should see the file path of your keystore next to “Browse Keystore”. (More details on signing an Android app)

• In the “Key” section below, in the Alias dropdown, select “Create a new key”. Enter your info in the pop up and click “Create Key”.

• Optionally you can add your app icon in the Icon section. Click “Build” in the Build Settings window. During the process, you might get asked to select the root Android SDK folder. Unzip the Android SDK file you downloaded and select that folder. You might also get asked to update SDK. Just confirm to update. After the build is finished, you can install the app on your Android phone, test it out with you VR headset, or even upload it to Google Play Store! (Sometimes when you rotate your head the camera doesn’t rotate with you. Exiting and reopening the app should fix it. It might have something to do with the SDK version & Android version. Let me know if you find out more details about this bug.)

You are done! That wasn’t too hard, was it?

Rambles

• Manage your expectations. It’s unlikely that you can build the next Land’s End or Google Cardboard Design Lab on your first attempt. Start with something small and keep building on top of it. Lower your expectations, under-promise and over-deliver.
• If we want VR to be successful, we need better tools, because have you seen the Unity interface? There needs to something like “Squarespace for VR” to lower the barrier and get more people involved.

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!

How to make a VR app with zero experience was originally published in HackerNoon.com on Medium, where people are continuing the conversation by highlighting and responding to this story.

TLDR: I made a Sketch Plugin. It’s easy to make one. You should try it.

I’m interested in design tools. I was so impressed and inspired by Josh Pickett and Matej Hrescak that I feel like I have an itch I have to scratch. The only way to do that is to make something myself.

Demo:

Here is roughly how it happened:

• Have an idea: I design with numbers a lot (like data tables). The way I used to make them in Sketch is to create one row or one cell, then copy and paste N times. The problem is that all the numbers I end up getting are the same, which doesn’t make my design look realistic. But if I go back to change each of the numbers manually, that’s very tedious. I wanted to automate that.
• See what’s out there: I already have the Content Generator plugin, but it doesn’t really solve this particular problem. I searched on Github, and couldn’t find anything either. That’s a good sign, I guess. So now I had to learn how to actually make a Sketch Plugin. I looked at the code for Content Generator. The file structure is pretty simple (Kudos to the Sketch team). I skimmed the plugin documentation for Sketch. It’ well written but I didn’t want to know every single detail. I wanted a shortcut.
• First attempt: I looked at how Content Generator generates things like city names. It’s just a JSON file. So I built a first prototype: I manually created a JSON file with a bunch of formatted numbers (like $20.50, or 4.50%). Guess what? It actually works, but it’s not really smart.
• Iterate: Now what I wanted to do is to 1) randomly generate numbers within a range and also 2) format it. My Javascript skill is not that good to come up with the code off the top of my head, but I do know enough to know how to Google. After opening 10+ tabs of Stack Overflow, I made it work. If you’re a maker too, you know how that feels.
• Share with the community: I sent it out to my team, and people really liked it! Since I also put the code on Github, later on I found out it was listed in the semi-official Sketch Plugin directory and Sketch App Sources website. My favorite part is people already started building upon it. Check out this fork from RayPS to easily mock up a calendar.

The most important lesson here is probably don’t get intimidated by the imaginary hurdles in your head and just do it. I’m a designer. I don’t have a Computer Science background. The only code I know is HTML, CSS and Javascript, but they’ll take you a long way. I’ve made mobile apps, chrome extensions, screen savers and other fun stuff (I’ll probably write about how I made those too).

So start making things!

I made a Sketch Plugin. You can too. was originally published in Design + Sketch on Medium, where people are continuing the conversation by highlighting and responding to this story.