Designers collaborate with AI for better UI/UX

AI in Design

When you hear artificial intelligence (AI) discussed in the news, it’s usually related to new technical achievements in how large sets of data can be organized and understood. But the value of AI goes beyond just data science and can actually extend into other realms like web design.

Normally, web design is thought of as a purely human endeavor, like a form of art that is mostly reliant on creativity. However, advancements in AI have opened up an opportunity for designers to collaborate with smart computer systems to develop user interface (UI) and user experience (UX) content in a more efficient manner.

Let’s explore how AI and machine learning (ML) are used in web design today and how we can expect these two fields to blend in the future.

Basics of Artificial Design Intelligence

The web development community uses the term Artificial Design Intelligence (ADI) first popularized by site builder Wix to describe how new automation technologies contribute to UI and UX work. This change in how professionals approach design methods has skyrocketed in popularity during recent years. Companies like Adobe have even begun to experiment with machine learning to build AI-centric design tools.

Obviously, design has evolved light years since the early days of the world wide web. Back then, webpages were manually coded in HTML while designers tried to determine what colors, fonts, and styles worked best in an online environment. This was a period of great experimentation, marked with plenty of failures and lessons learned.

As the internet matured, common design strategies and best practices emerged to help developers create a consistent experience for users. At the same time, back-end servers have come to rely on automation to build dynamic web-based applications. The ADI movement combines these two concepts to elevate how UI and UX design is accomplished.

Pattern Recognition

Much of modern artificial intelligence is based on a concept called machine learning, where a team compiles a wide range of data and lets a computer network analyze it through a sequence of algorithms. The goal is for the AI system to identify patterns and trends that might not be readily evident to a human.

Early ADI adopters realized that decades of web design experiments – successes and failures – could serve as a useful data collection to run through algorithms. The result has proven to be a powerful tool when it comes to humans collaborating with machines to improve UI and UX.

Consider logos: They’re the foundation of development projects. Back at the birth of the internet, companies would create their own image file to serve as a digital logo. Time passed and some organizations realized they could outsource that task to experts in branding and web design. But still, it remained a purely manual effort.

Fast forward to today and designers leverage logo-makers that run on an AI system. Thanks to the massive data sets that algorithms have already crunched, the process is now as simple as answering a few questions, filling in a few criteria, then waiting for the system to propose different designs. This logo-while-you-wait process relies on the AI engine to analyze the latest logo trends to develop something that fits your company’s needs.

Designing in the trenches – WordPress: If you work in WordPress, and it’s hard to avoid it, you’ll be elbows-deep in artificial intelligence and machine learning plugins before you realize it. There is a true explosion of new products hitting the market in this area, ranging from spam detectors to grammar improvement to a variety of recommendation engines.

A common scenario is a small business owner builds a website on a DIY platform like Wix and then realizes the extreme limitations, so asks you to migrate their website to WordPress, spiff it up, and turn it into a cash cow. Before you realize it, AI and ML are your project partners.       

Integration of Tools

Web design is not just about colors, fonts and logos. The best websites in the world deliver a positive UX experience for each visitor. This means that when a person arrives at a website, they are easily find what they are looking for thanks to the combined design power of humans and AI.

One of the primary goals for AI and machine learning when it comes to web design is to make the UI and UX personalized for each user. Not all people agree on what display or set of features is best, especially if they come from different places on the planet and speak different languages. But AI makes it possible for designers to create flexible templates that adapt to the person using them.

Web developers have realized that they can integrate AI-based tools directly into their designs to add value for users. For example, users may want to edit PDF documents directly in their browser. In bygone days, that would have been a tall (or impossible) order, but with AI and machine learning doing the heavy lifting, content can be ”visually” extracted from third-party files and made easier to manipulate on-the-fly, even in a document format formerly considered to be locked-in.

Another design feature that can be AI powered is an in-browser chat tool. Businesses that sell goods or services online often want to provide a way for their customers to get quick support. With an AI-based chat tool, this digital customer service representative can answer questions and point the way to useful information, often finding solutions without having to escalate their query to a human.

Privacy Considerations

You can’t talk about the data that powers AI and ML in today’s world without talking about how to protect it. Proper collection, storage, and use of data is no longer simply an ethical question. With the stringent GDPR regulations put into play in 2018, and the accompanying fines for misbehavior, it’s a financial survival question as well.

How far has AI come? It’s getting perilously close to being able to consistently hack the vaunted Captcha plugin using machine vision. Heretofore Captcha has served as a trusted website gatekeeper against automated spam but appears to be on the verge of becoming obsolete.

Consider implementing the following precautions when working with AI/ML in your own online life and suggest clients do the same when you hand off a completed site:

1    Almost every site collects some sort of data that falls under GDPR bur few site owners take the time to properly secure themselves against the latest smart malware attacks. A WordPress maintenance plan costs a little bit but removes that particular worry. It’s exactly what it sounds like – outsourcing your security. For some, it’s well worth the peace of mind to bring in experts.

2 If you’re a freelancer or work for a company that collects customer data, you should already have a virtual private network (VPN) in place to keep hackers from stealing or corrupting your information. Already in use by 25% of people who go online, VPNs are rapidly becoming the de facto method of protecting all the info an insatiable AI algorithm needs to become smarter.   

3 Don’t sign up for any AI tool that doesn’t clearly spell out their privacy policy for how they will use your data. Avoid any sort of machine learning experiment that requires private information like a home address or social security number.

The Bottom Line

The advancement of AI/ML will continue to revolutionize all areas of technology, including web design. And we shouldn’t depart the premises without allaying fears that the end game of this technology is to replace designers. That’s not the likely outcome of all this – at least not in any foreseeable iteration of the industry.  

Instead, what we can anticipate is for web designers to begin trusting AI as an augmented partner, using it to accomplish repeatable tasks in an efficient way. This frees the designer to focus on the creative tasks that no amount of AI can simulate and benefits the end user, which is the ultimate goal.

Album Design Inspiration: the FUTURALBUM Collaborative Design Project

Album Design Inspiration

If you’re a fan of the ‘Zine, Cleveland’s best website designers, Go Media, and Weapons of Mass Creation Fest, you’ve heard the name Troy DeShano. No stranger to the design community, Strong Odors Artist and Illustrator, Troy is constantly creating, collaborating.

A few of his projects include the Old and New Project, a growing biblical art and design collection he runs with fellow artist and designer Jim Lepage, a photography project highlighting his cancer diagnosis and journey, and speaking engagements including his recent time on the Weapons of Mass Creation Fest stages.

Troy’s most recent work, a collaborative design project called FUTURALBUM, invites top international graphic designers to contribute re-imagined cover art for any album they choose. The goal of the project is to give the artists an opportunity to design something “just for fun” – a rare treat for those of us often bogged down with design work tasks.

Let’s check in with Troy, as well as some of his contributors, who will tell us a little more about this exciting project.

Designs by Pope Saint Victor | Jim LePage | Ben Stafford
Designs by Pope Saint Victor | Jim LePage | Ben Stafford

Troy:

I’m not sure exactly what “inspired” FUTURALBUM, other than the fact that when I first discovered Flickr’s Internet Archive Book Images it blew me away.

I definitely wasn’t planning to start another personal project. The last thing I needed was one more distraction with no paycheck to show for it. But some recent soul searching had shifted my focus into music design, and here was this super cool resource I wanted to share with all my peers—so the idea just kind of grew out of that.

I had enough experience running Old & New with Jim LePage over the past few years, I knew how much time a project like that requires from both organizers and contributors. So I decided to keep it very, very simple. Invite friends, collect designs, post designs. That’s it.

I just wanted FUTURALBUM to be fun.

Designs by Laura Medina | Kelsey Dake | Christine Herrin
Designs by Laura Medina | Kelsey Dake | Christine Herrin

With constant anxiety around client approval, and growing peer pressure to always create hand-drawn lettering, illustrations or even your own fonts for every single project, I thought this could be a great outlet for a bunch of us to create something just for fun—like we did before graphic design became “work.”

I give each contributor great freedom to create the art they want. They choose the album, and can do multiple designs if they feel inspired. Some get a kick out of throwing a bunch together in an hour, while others invest major time into a single album cover design. By adding a few simple but strict “rules,” it challenges each to exercise that creative muscle in the way only possible when working with limited resources.

My favorite Milton Glaser quote: “The next time you see a sixteen-color, blind-embossed, gold-stamped, die-cut, elaborately folded and bound job, printed on handmade paper, see if it isn’t a mediocre idea trying to pass for something else”

When I set out to do a painting, I know it would be easier if I had this nice big canvas with which to begin, but I have the extreme limitation of my non-existent budget. In fact, I’m totally broke and can’t justify spending even a dollar on paint or brushes or especially canvas. So I draw from that folk-art spirit and just create the best work I can using whatever happens to be nearby.

Designs by Clint McManaman | Shane Harris | Doc Reed
Designs by Clint McManaman | Shane Harris | Doc Reed

What is really amazing, and I know most fellow creatives can attest is how those limitations naturally force me to be creative. We just sadly forget it sometimes, because we imagine eliminating the frustration with added resources will make the work easier—and therefore better.

Here’s another case where “life imitates art,” right? We imagine the benefits associated with more money, fancier phones, faster food, and less work will make life easier—and therefore better. What we’re really doing, however, is robbing ourselves of the conflict, the struggle, the wrestling that makes life interesting and fun and exciting and worth living. It’s in the act of overcoming (or struggling with others to overcome), in which we discover purpose and joy and satisfaction.

It would be a lot easier to paint on an actual canvas, but would that resource miss the inspired quality I might unearth by nailing a bunch of boards together for mine?

Of course for all this talk of the valuable impact of limitations to spur creativity, I’m a firm believer that rules are obviously made to be broken. Can’t wait to see the exciting ways the rules of FUTURALBUM are challenged by these incredible artists this year!

Check out the designs and short interviews with the designers below:

Album Design Inspiration

Tame Impala, Lonerism
Design by Karen Kurycki

Go Media: What inspired you to create your piece?
“I love this album by Tame Impala. Their music is defined as “Psychedelic rock” and reminds me of something you might listen to while tripping on acid in the 70s (not that I’ve experienced an acid trip in the 70s) but you can imagine what it might be like if you did. I wanted something that conveyed the idea of floating through space or a tunnel; or like the way a kaleidoscope works—with multi-colors and dimensions—so when I was searching for an image in the Flickr album I was looking for something that might reflect that idea. I stumbled upon this picture which was actually some sort of cellular/amoeba structure and thought it might work perfectly, so I combined it with some of my watercolors and multiplied the layers in Photoshop. I had a lot of fun working on it, thank you Troy for inviting me to participate!” – Karen Kurycki

Album Design Inspiration

Youth Lagoon, The Year of Hibernation
Design by Liz Schaeffer

Go Media: What inspired you to create your piece?
“I think the nostalgia, that listening to this album always give me, was my first source of inspiration. The album, The Year of Hibernation, totally brings me back to a winter where I was hibernating in my apartment and binging Trevor Power’s (Youth Lagoon) music.”

In what ways does music inspire you as a designer?
“I have tendency of indulging in genres of music at a time and what is most inspiring while doing so, is how an on going playlist can help me get into a flow state while I am designing, drawing, whatever the task at hand may be – it helps me lose track of time, in the best way.” 

How did limitations spur creativity in this project for you?
“I actually love having limitations while designing – it is like solving a puzzle. Troy’s limitations, especially, I think prompted some really great and unexpected results, which leads me into the next question..”

What what most exciting for you in this process?
“Using Flickr’s Internet Archive Book Images was exciting for me. First, to search around through what in the collection resonated with me and my nostalgia with the album. Then, figuring out a way to manipulate these photos of concrete things (in my case, old landscape photos) into the abstract disposition that the album and winter, gives me.” –  Liz Schaeffer

Album Design Inspiration

Flaming Lips, Yoshimi Battles the Pink Robots
Design by Anne Ulku

Go Media: In what ways does music inspire you as a designer?
“Music creates a visual language in my mind. When listening, I imagine abstract graphics, colors, or patterns that might associated with the sounds or story of the lyrics. Music is a way to stretch my imagination as a designer. Even if the design may not be fully executed, listening is still a good creative exercise.” – Anne Ulku

tumblr_nhv0rbwIYN1u2cohgo1_1280

Ellie Goulding, Bright Lights
Design by Christine Gerhart

Go Media: How did limitations spur creativity in this project for you?
“The limitation of this project pushed me to strip away all that was unnecessary and get to the essence of what I felt the album was about. It was harder than I expected, but once I finished once design, I couldn’t wait to do another one.” – Christine Gerhart

tumblr_ni482i0uwb1u2cohgo1_1280

Radiohead, In Rainbows
Design by Margot Harrington

Go Media: What inspired you to create the piece?
“I actually got stuck on the idea of Radiohead being such a mecca for designers, like it was an obvious choice. BUT. The title “In Rainbows” immediately felt like it could be all sorts of images, and I was excited to play with something colorful like a rainbow, so that’s why I decided to work with this album in the end.” – Margot Harrington 

nick

Gregory Alan Isakov, Songs for October
Design by Nick Evans

Go Media: What inspired you to create your piece?
I have such a wide scope of music taste that it was hard to really nail down an album cover that I wanted to refresh with my design. So what I did was cycle through my Spotify list and found some artist that I have been listening to for a while and looked at their artwork and was like, “Hey, this could look a little better if we went with this.” One of the things about this project was that there were two things that were required, using the photos from the Flickr album and the font Futura, which is one of my all time favorites. So with that in mind it was a matter of finding those images that I thought could go together and really go great with the album of choice. It took a while to search through the site, but I landed on a couple that I knew in my mind that they would work. I put the album on and started putting it together. The music really helped in the process as well, especially in the coloring.

Go Media: In what ways does music inspire you as a designer?
Music does a LOT for me when I design. It really sets the mood and pace of my creative runs. Like I said I have a wide range of taste of music and so it really kind of depends on what mood I am in. Right now I am in a rock funk, so its a lot of hard hitting stuff, and that really gets the juices flowing. I would say it’s a big part, because there is not a time that I am not doing work and not listening to tunes. Its not cool not having music playing…just not right.

Go Media: How did limitations spur creativity in this project for you?
I think it really helped narrow the focus a TON. Not saying that I don’t like creating something new, but with this one, it harked back to one of my favorite design “genres” of using classic or old artwork. Growing up and becoming a designer I always enjoy seeing how other designers used classic photos and images with album art or ads, or whatever. So this was like a dream project for me. I embraced everything about this project’s limitations.

Go Media: What was most exciting for you in this process?
I think it was being a part of a community of designers that I look up to or envy and see my work next to theirs. You have to respect those who inspire you. It made my day when I had some fellow designers recommend me for the project, I couldn’t thank them enough for doing that. So I just am so honored to be on this page. I have always wanted to participate in a community design project, so this has been an EPIC experience. I also really loved the part when they tweeted out the link and said that the artwork was up on the site. I was like, YES, and the other great thing that they are doing is including the artist of the album as well. Very sweet! I think that is great of them to do that, might lead to other opportunities for the artist to maybe get noticed or be able to do some work. Two fold.

tumblr_ni6839l6cR1u2cohgo1_1280

Killer Mike, R.A.P. Music
Design by David Sizemore

Go Media: What inspired you to create your piece?
“My inspiration was primarily informed by the volume of visual assets I needed to acquire. Because I wanted to do more than just a cover, I needed a series of images that would compliment each other.”

In what ways does music inspire you as a designer?
“I normally can’t listen to albums I’m not extremely familiar with unless I’m doing rote production work. I only have a dozen albums I “design to,” augmented by songs I’ll listen to on repeat for hours. So when music inspires me, it happens distinctly away from the design process. I like it that way.”

How did limitations spur creativity in this project for you?
“Limitations are great. When you don’t have to consider your typeface, you can focus on layout and composition. I was able to find base images and produce all my pieces in just a couple hours because the boundaries honed and expedited the process.”

What was most exciting for you in this process?
“Freedom from client input combined with a clear brief excited me. It was an exercise, and exercises can be very rewarding when approached with the right mindset.” – David Sizemore

sizemore_killermike_all

tumblr_ni2jk1BdyR1u2cohgo1_1280

Rancid...And Out Come the Wolves
Design by Alex Griendling (alexlikesdesign)

Go Media: What what most exciting for you in this process?
“The most exciting aspect was Troy allowing me to make three separate covers for Rancid’s “…And Out Come the Wolves”. I enjoyed making my first cover so much and thought it’d be an interesting challenge to make two additional versions, much as you would with any design project. It’s great that Troy designed Futuralbum to have a minimal amount of requirements, allowing designers the room to bring their own ideas to the project.” – Alex Griendling

For more Troy: Strong Odors | Facebook | Twitter
Follow FUTURALBUM: Official Site (Tumblr) | Twitter | Instagram