This Blog Post Does Not Exist…Or Does It?

A quick overview of generative adversarial networks (GANs) — a type of artificial intelligence that are capable of generating, among other things, pretty realistic looking photos of humans that do not exist.

Shout out to those hard-working generative adversarial network (GAN)! Ok, I don’t really know about hard-working, but it is pretty cool. Let’s review.

Intro to GAN

GAN technology came out in internally at Nvidia, the computer graphics company, in 2014 and released publicly in 2018 (as StyleGAN). The studies are linked.

I’m not going to pretend I understand the details of either study. But based on the Wikipedia article linked above, what I can explain is that a GAN is the result of two neural networks that compete against each other, in one of those mathematical, strategy “games” researchers like to play.  The networks study photographs (or text) and then decide which elements to use to generate something new.

I think some people will find it creepy, but I think it’s cool. For the human photos, it’s hard to not project a humanity into the faces, even though, logically, these are people that have never existed. The generated fake people seem, somehow….special.

Here’s a quick intro to some GAN and some links to explore. Enjoy!


Explore Some Fake Stuff

As I said above, one of the possible outputs of a GAN can be a surprisingly realistic looking photographs. View some of them at thispersondoesnotexist.com. Every time you refresh, you get a new person that has never existed. It’s like dreaming for computers.

This github repository has a list of a few more websites of GANs that generate photographs of humans, fake rental ads, articles, anime, and more results that don’t exist. There are fake cats, but computers seem to have trouble with animals. I suggest not looking at them. (They’re creepy.)

Test Yourself, Human!

Some of these faces look pretty realistic. For instance, the image above-left is an “image of a young woman generated by StyleGAN, an generative adversarial network (GAN). The person in this photo does not exist, but is generated by an artificial intelligence based on an analysis of portraits.” The ad on the right is fake, too. Could you tell?

If you want to really test yourself, the website Which Face Is Real throws up 2 side-by-side images.

Catching up with Friends.

Unless you’re a dog cat on the internet, you can probably tell the difference (and probably even especially if you are a cat). The fake images have a few tell-tale signs like smudged backgrounds, odd looking teeth, unusual wrinkles, and some of them just don’t seem right.

You can also test yourself with the fake poems at Bot Poet.

Offshoots

Composites – There are some offshoots of the original technology, like this github repository which shows an example of a composite generated image using a StyleGAN image + an image of the Mona Lisa.

Digital “models” – I wouldn’t say these examples are quite the same, but there are already digital “models” on Instagram and in advertising campaigns. Lil Miquela has over 1.5 million followers on Instagram, and there’s a modeling agency specializing in digital “models”.

Video – The one below is uses around 8 frames of video to train their neural network, resulting in a real-time talking head model. It could be like one of those “deep-fake” videos, except the new heads are people that don’t exist. And you can kind of tell, if you watch the video below, human, the new heads do not really look too realistic (yet).

Few-Shot Adversarial Learning of Realistic Neural Talking Head Models

Statement regarding the purpose and effect of the technology
(NB: this statement reflects personal opinions of the authors and not of their organizations)

We believe that telepresence technologies in AR, VR and other media are to transform the world in the not-so-distant future. Shifting a part of human life-like communication to the virtual and augmented worlds will have several positive effects. It will lead to a reduction in long-distance travel and short-distance commute. It will democratize education, and improve the quality of life for people with disabilities. It will distribute jobs more fairly and uniformly around the World. It will better connect relatives and friends separated by distance. To achieve all these effects, we need to make human communication in AR and VR as realistic and compelling as possible, and the creation of photorealistic avatars is one (small) step towards this future. In other words, in future telepresence systems, people will need to be represented by the realistic semblances of themselves, and creating such avatars should be easy for the users. This application and scientific curiosity is what drives the research in our group, including the project presented in this video.

We realize that our technology can have a negative use for the so-called “deepfake” videos. However, it is important to realize, that Hollywood has been making fake videos (aka “special effects”) for a century, and deep networks with similar capabilities have been available for the past several years (see links in the paper). Our work (and quite a few parallel works) will lead to the democratization of the certain special effects technologies. And the democratization of the technologies has always had negative effects. Democratizing sound editing tools lead to the rise of pranksters and fake audios, democratizing video recording lead to the appearance of footage taken without consent. In each of the past cases, the net effect of democratization on the World has been positive, and mechanisms for stemming the negative effects have been developed. We believe that the case of neural avatar technology will be no different. Our belief is supported by the ongoing development of tools for fake video detection and face spoof detection alongside with the ongoing shift for privacy and data security in major IT companies.


Slightly off-topic, there’s a new Frontline documentary on AI. It’s 2-hours, so it’s a commitment. It doesn’t really go into the GAN-side of artificial intelligence, but it does discuss automation, privacy, and surveillance.

In the Age of AI FRONTLINE, from PBS. [1:54:16]

The documentary provides many reasons to be afraid of AI, particularly with regard to surveillance and use of AI by governments. We can’t really predict what governments will do, but if behavior control is a goal of AI there’s a natural user group: people who have trouble controlling their behavior. This would be people who have or have had issues or struggles with:

  • substance abuse
  • memory loss
  • chemical imbalances in the brain
  • adhd
  • neurological damage
  • loss of motor control

Or even just reminding people to eat better and go outside more. I’m sure there are more. Anyway, that’s my thought. Seems fair to be afraid, but also there are some opportunities that shouldn’t be overlooked.


And now on the cultural side : the trailer for Her. I don’t know if it’s possible to have an OS this advanced, but there are some interesting fantasy explorations in this movie.

Portfolio Resources

These are sites I’ve come across that may help someone building a portfolio. (Writing it also helps me remember!)

Yet another portfolio post!

Rather than go on about my own issues, I wanted to share a few resources. Before I begin, I’m going to make a little rant in case you’re feeling overwhelmed, like I am.

One of the sites emphasizes the importance the design a portfolio has on your job prospects. I feel this importance is overblown because the the design or tool seems to have such a big impact on how the portfolio is perceived. I can’t emphasize enough how many people use paid templates, plus the cost of a web domain. And I would be lying if I said it didn’t bother me that choosing the wrong CMS template is the difference between gainful employment vs not.

The fact that the portfolio makes a difference at all seems like the difference between showing up in a limo, BMW, Toyota, or SmartCar. I guess it really is like dating, which I admittedly know absolutely nothing about.

At the start of this review, my feeling is that people just want to be entertained. My thoughts changed somewhat, which you can read at the end.

/rant

 

Ok, now that I’m off my soapbox, here is my list. It’s organized like this:

  • Sites – Guides, essays, and portfolio collections
  • Tools – What people use to create their portfolio
  • People – A small handful of portfolios

1. Sites

A collection of essays, slides, and guides.

Article page: The Case Study FactoryThe Case Study Factory is about how similar so many UX portfolios seemingly look alike. The authors write:

“How the formulaic approach to UX case studies is numbing our critical thinking as designers, and how to bring a unique point of view to our work.”

Provides some pretty good tips at the end, however I recommend you read the whole article for context. Also because it’s a good article.

  1. Define your area of focus
  2. Align the story with the medium
  3. Set up the context of the project
  4. Focus on insights rather than process
  5. Design your case study reading experience
  6. Obsess over your case study visuals
  7. Make it personal

 

Article home page

Sometimes it’s just helpful to look at a big list. Here’s a list of 80 portfolios. I talked about 2 in the People section.

Guides and Slides
Article page, “Design a Winning Portfolio — Tips + Tricks from a Google Designer “

Design a Winning Portfolio — Tips + Tricks from a Google Designer  is a slide deck of tips and tricks. The slides are shared from Google slides (link).

This is a compilation of tips and tricks to improve a design portfolio. She states:

While each design discipline has slightly different project expectations (i.e. UX wants wireframes while Branding wants logo sketches), I’ve realized there is an overall universal set of tactics that, when applied, will automatically enhance and differentiate any design portfolio.

The Google slide deck is really big and there are videos, so keep that in mind. It loads a little slow.

 

nng.com’s recent article, “5 Steps to Creating a UX-Design Portfolio” is probably what kicked this whole thing off. Actually I talked about this in another post, so I won’t rehash. But I will point out that I’ve made a number of changes to my website and my portfolio at Cargo Collective, which at this moment is offline.

My Personal Bookmarks

I’ve had the following links bookmarked for a few years. These seem more geared to PDFs.

Portfolio Handbook [PDF] from the Class of 2012 Industrial Design, DAAP, University of Cincinnati.

This book was put together for the purpose of facilitating higher-quality portfolios. It will not cover project processes, but will act as a guide to documenting a project well for your portfolio. We hope the book will ease some of the anxiety around creating your first portfolio and then later exist as a helpful reference book to check a newer portfolio concept against

 

UX Portfolio Guidance, from Zebra People [PDF], London

We are fortunate enough to see some great portfolios, however there are still many UX practitioners who are selling themselves short. There are some absolutely brilliant and in-depth guides about UX portfolios out there. But our intention with this document is to provide a concise, visual hand book on what to include in your portfolio.

Your portfolio represents you. But you’re not always there to talk about your work. No one gets hired on their portfolio alone. The best outcome is a meeting. Tonight is about snap judgments.


2. Tools

What people use to create sites

From the list of 80 above, (plus a few others I found) I randomly clicked into about 3-4 portfolios per group and I took a look at the page source.

Many, many sites are built using Squarespace, WordPress, Wix, or some other type of CMS with either built-in or plugins for flashy animation, grids, and what-not.

Other sites were hand-coded, often with Bootstrap or Foundation. I took note of the many JavaScript libraries.

WordPress and Adobe Portfolio

Semplice home pageFor WordPress, I came across a template called Semplice. It is advertised as a WordPress template for designers. The latest version is Semplice4. Price is $100. I wouldn’t be surprised if many people have upgraded to the Studio version for $140. Semplice does not seem to have options for blogging; I didn’t see it.

 

Salient Live Demo

Another theme I came across is Salient, although the site I found it on had a “Under Construction” label. It’s $60 and available on ThemeForest. It has over 5,500 reviews, over 95,000 sales, and is currently rated as 5-star.

 

portfolio.adobe.com

If you use Behance, you may be interested in Adobe Portfolio. It’s $9.99/month, paid annually (about $120). You get access to Adobe Portfolio, Photoshop, and Lightroom, as well as access to Adobe Fonts. You can get a free trial, but you need to upgrade to connect a domain/subdomain.

Free DIY Options

Startbootstrap.com offers free Bootstrap templates, themes, and snippets that you can download and customize. Basically everything is free, with the obvious exceptions that you cannot use Startbootstrap templates to create a competitive website serving free Bootstrap templates.

I have used Startbootstrap multiple times and I find them pretty easy to use and combine. Some have CSS or JS animations built in; mostly CSS.

It does require solid HTML and CSS knowledge.

 

Github Pages uses your own github respository to host a website. It’s 100% free. However, it will say username.github.io/yourproject. And your code will be online for all to see. I’m also not sure if you can use Google Analytics.

Again, this is for people who have experience developing websites.

Obviously, having a free site generator is great. If you want to have your own domain, you can get a personal email address, like yourname@yourdomain.com. And you can connect it to github. But all that is well beyond the scope of this post.

 

BlankSlate by TidyThemes allows you to completely customize a WordPress installation, by providing a theme with absolutely zero styling. Sometimes you use a nice theme, but end up undoing stuff you don’t really like. Needless to say, this theme is for people with a good amount of experience. I say no more.

JavaScript Libraries

If you code your own site, these were some of the libraries and plug-ins some people used. I thought tilt.js was pretty cool.

There are so many JS libraries, this list will keep getting updated.

Lightboxes & Carousels

Instagram Embeds

  • lightwidget.com – Embeds Instagram photos into a webpage.
  • spectragram.js – http://spectragram.js.org/ – Instagram API plugin

CSS

Obviously Bootstrap, Foundation, grid/flex, and icon font libraries also showed up.

Jekyll/Jekyll Themes

  • poole – http://demo.getpoole.com/ – the Butler for Jekyll
  • hyde – http://hyde.getpoole.com/ –  a 2-column Jekyll theme

Layout

If you are a PDF portfolio person, you might be interested in using a grid.

The Grid System

Grid System

“The ultimate resource in grid systems.”

You can download InDesign templates, at 8.5 x 11 and 11 x 17. Good if you want to create a print portfolio, or if you want to redesign your resume.


3. People

A few portfolios in use

I randomly came across the following people, either in context of this post, or when reading an article, or serendipitously in some other way.

Caveat: In no way am I promoting any of the following people. I have never met them. I don’t know if they’re the kind of people who cut in line or litter. Maybe they don’t pick up after their dog….

The one thing that is true is that I took a look at their websites and I have an opinion. If you disagree, there’s a list of 80 portfolios above to check out.

Antonio Carusone, creator of Grid System. A very simple website. No images. He simply links to his other websites, most of them photography sites. The site is made with Cactus, which is another static-site generator not using Jekyll. (The last commit was 2 years ago, so it may not be maintained.)

I viewed a few other personal websites like this: simple, text-only, with no images. I think this is a good way to connect disparate interests. He seems to have a lot of experience, which is also good to know if you’re looking for ideas and you’re not early in your career.

 

Hiroaki Ito has this project on Behance. I’m including this person because I attended a virtual recruiter session with Google. The three recruiters reviewed two portfolios, and this project was one of them as an example from a visual designer. (The UX designer was Simon Pan, who uses WordPress. It appears to be his own theme although it could’ve started from BlankSlate.)

The project above is a combination of several very long images, stacked one on top of the other. This designer has a job at Google. He does not seem to have as much experience as the first guy.

 

Johna Paolino is someone I came across on Medium. She wrote an article on using CSS grid. Then I found her website, which is hosted on github. So that’s another – FREE – option. Looked like an interesting site and she seems to be employed at the NY Times.

That big font is BungeeShade.

 

Pendar Yousefi is the only person I came across in the list above that used Adobe Portfolio. It was pretty nice looking, so I’m including that here. He also appears to be employed at Google. He also seems to have many years of experience, which is another good data point.

To be clear, you cannot create an Adobe Portfolio account and link it to a personal domain without becoming paid subscriber. He does a good job of connecting his web properties. For him, he’s getting his money’s worth. But I just want to make sure it’s clear, according to the website, money appears to have been exchanged.

 

I came across Sharon Tsao‘s portfolio above, too. She does NOT appear to be employed. But I thought her simple site was an interesting example, and she seemed to explain her background particularly well.

She built this herself, or at least she did not use a template or CMS.


Foot imprints on sand near a beach
Photo by Matteo Kutufa on Unsplash

Thoughts & Reflections

I wrote this post over the course of 1-2 weeks. Right away, my initial thoughts for my own portfolio when the time of this post were to create a simple site that links out to other websites or to just expand my current WordPress installation (this blog). I also considered installing a separate WordPress instance altogether, which is still a strong possibility.

Yet after writing the majority of this post, I continued to investigate the list of 80 portfolios. I kept finding new CSS and JavaScript libraries. And, I wanted to dig a little deeper into some of these to find out more about how they were made and other details that the guides above don’t really get into.

Despite my rant at the top of this post, I have started to change my opinion a little on the importance of portfolios. I think there is something to be said for trying to display your work in as good a light as possible.

I’m still collecting more data about these 80 portfolios, so there will be another post. And I’ve found more items to add to the Tools section (Webflow, anyone?), so I’ll probably continue making updates to this post in addition to simply posting again.

[Featured image credit: Photo by Pierre Bamin on Unsplash]

Learning about the DOM in JavaScript, jQuery, and More

A recap of my recent experience with an intermediate JavaScript course on Lynda.

Screenshot of Lynda course
Click the image to watch the preview for ‘The DOM in JavaScript, jQuery, AngularJS, and React’ on Lynda.com.

I recently finished an interesting course on the DOM and different versions of JavaScript. I liked that it was just a taste of JavaScript, jQuery, Angular, and React. It’s called The DOM in JavaScript, jQuery, AngularJS, and React. It was released in 2017.

Much of the course was focused on regular JavaScript. I’m glad I’ve spent so much time studying JavaScript, because a lot of basic things didn’t need to be explained for me in this course.

Although I know about the DOM, using HTML, this focus on the DOM using JavaScript was an interesting approach. For instance, traversing the DOM (with classes and IDs) was fun:

document.body.children[4].children[1]

This selects the 5th child of the body, then the 2nd child from that. This is almost like using CSS selectors to select parent and child elements.

One of the things I love about Lynda is that they recommend additional courses to learn more about related topics. A few courses the instructor recommended included:

  • JavaScript Essential Training
  • jQuery for Web Designers
  • Angular 2 Essential Training
  • ReactJS Essential Training

They may have updated it, but I’ve already taken the JavaScript Essentials course before, so I’ll check if the others are already on my list. Angular is past version 2 by now, but maybe it’s easier to get started with that version.

 

Website Update, June 2017

It might not be easily noticeable from this blog, but over the past few weeks I’ve updated my main website. I tend to do this a few times a year, as I gain feedback, or learn what works and what doesn’t work. Hopefully this change will stick around for a while. This post is documentation of what I did and why.

Research

Over the past several months, I have been trying to get a better understanding of what UX managers look for when they view a candidate’s portfolio. There were a few resources I looked at that helped inform my opinions in this regard. After reading a few articles and slideshow presentations, reviewing websites, and gathering feedback, I had a few ideas. Here are a few points and screenshots demonstrating my ideas and how they affected the design.

I. Overall Design and Home page

One way or another, I ended up looking at a few portfolio pages from designers I’d met in-person or came across online. Despite reading several of those “10 UX Portfolios To Admire” articles, what I’ve discovered is that sometimes simple is best. And that translates to a template site, often paid.

Paid subscription services are anything from $6-$8 or more each month. I don’t think someone should have to pay a monthly fee in order to apply for a job. That meant I’d have to create it myself or use a free service. I’ve used Carbonmade, Coroflot, and even Behance (barely), which are all free. But their designs are limited and my research showed that managers will evaluate candidates on the usability of their portfolio, even when it’s hosted by a third-party.

Reviewing both free and paid sites, the ones I liked best were made by the paid services Squarespace or Wix, using remarkably similar templates. Essentially, that template was a site with basic navigation, a grid of projects on the home page, project pages, and a simple About page. Following that template, I came up with a basic grid for my home page. But I jazzed it up a bit with some fancy CSS throughout the site.

II. Presenting an Overview

In previous designs, I assumed that managers would read. But, my research showed that they might spend 30 seconds reviewing a portfolio, for the first time. I also came across numerous resources insisting that candidates outline role, problem or goal, and outcome when presenting their work.

So you can see in the screenshot below how I’ve outlined this information right at the top, next to an image.

Overview of the project and role, along with keywords. This image is actually a screenshot from the company’s website, promoting the product.

II. Fast Scanning

Another consideration was the amount of time a manager spends reviewing a portfolio. My research showed that managers only spend 30 seconds on a portfolio and review 12-50 portfolios for a given position. I used the process/approach section to break up information into digestible, one-sentence long chunks.

An earlier version of this section was a 3-column layout, with longer paragraphs. Breaking it up makes it easier to scan. Fontawesome does this, also, on their homepage. http://fontawesome.io/

III. Tell a Story

The word “storytelling” is thrown around a lot, especially in relation to self-promotion. I think “storytelling” is overused and cliche, and I’ve written about storytelling a few times.  However, for the redesign, I thought about the concept of beginning, middle, and end. Thinking through these part of a story, I ended up with the following sections: overview, a process/approach section, documentation, and outcome. Outcome really helps “sell” it as a story, because it provides a conclusion.

Outcome

Having talked about outcome, what now?

One idea I thought of, as I was writing this, was to shrink the size of the thumbnails on the home page to show more information on the screen. But, I think the “hero” image/section is what takes up most of the space, vs the size of the thumbnails. This is one change though; I have a running list of updates and ideas on Remember the Milk, where I can also track priority.

I plan to ask more friends for feedback and maybe get feedback from a few connections on LinkedIn. It was fun, I learned a lot. I look forward to adding more projects and the site evolving over time. Or until I redesign it again!