Design for Good

Design for Good

Have we created yet another silo allowing us to make excuses and behave badly

As mentioned on AIGA ‘s website— Design for Good is an ethos to use problem-solving and design thinking towards social change. … Design for Good recognizes the wide range of designers’ work and hands-on leadership and professional development opportunities, which benefit the worldour country, and our communities.

As mentioned on DesignLab 360 — Design for Good is any form of design work that aspires to better someone’s life. Design for Good is inclusive rather than exclusive. To be effective, our work must be timely and responsive, not just to a client deadline but say, to the urgency of a burgeoning epidemic. We are pragmatic as we are idealistic.

Screen Shot 2019-04-16 at 1.44.54 PM.png

And if that is the case then what is the function of design? What is the role of a designer? What is good? and, What is bad? What does Design for Good stand for? Most causes come out of a need, personal loss, or injustice. However, does something bad have to happen to you before you decide to do good?

Wherever we look, everyone is talking about it, ‘work on things that matter’, ‘use your power for good’… is it just fashionable to do good when it is convenient to you?

Screen Shot 2019-04-16 at 1.48.52 PM.png

So why do I care?

I care because as a creative human being I’m seeing so much anxietydissatisfactiondistrust, all around. There is so much negativity, finger pointing, fake news, entitlementone-up-nessspecial interest bragging. There is so much, look-at-me!selfie cultureself worthiness, going around. There is loneliness, mental instability, and pain in the superpowers and the developing world while there is sufferinginequality, and lack of freedom of speech, freedom to choose .

What kind of social system have we designed?

This looks broken…

Screen Shot 2019-04-16 at 1.53.03 PM.png
Richard Ting at the Design Observer Conference at Yale SOM in 2018

Richard Ting at the Design Observer Conference at Yale SOM in 2018

Richard Ting questioning the systems we currently have in place and the shift we all need to make

Why should you care?

As problem solvers and as human beings living in the current political climate, worldwide, we are seeing this…

• Everyone for themselves

• If you do not have the means, too bad, you are a loser and you caused it

• If it’s not happening in my backyard, its not happening to me

• If I do not acknowledge it, it’s not happening

Screen Shot 2019-04-16 at 10.15.33 PM.png

EVERYTHING!

Human beings behave the way they live-

• If we believe in equality, we act equally.

• If we believe in diversity, we engage with a variety of people.

• If we believe in the freedom to choose? We support a women’s right to choose.

• If we believe in freedom of expression? We allow for different voices and agree to disagree.

Now if we dig deeper and look for the dictionary meaning of design-

design (noun) — a roadmap or a strategic approach for someone to achieve a unique expectation

design (verb) — to plan and make decisions about (something that is being built or created)

• Decision-Making is Design.

• This means that every decision we make is basically designed.

Design is not only visual, conceptual… it is also functional which means we are responsible for how people perceive messages, products, and pretty much everything they come in contact with. Whether the message is for a for profit enterprise or a cause or a social impact enterprise.

Screen Shot 2019-04-16 at 1.54.12 PM.png
Screen Shot 2019-04-16 at 1.55.56 PM.png

So if we are saying that the message is the medium regardless of the sector we work in then are we doing a disservice by putting ‘design for good’ in a silo? Are we giving people an excuse to cop out?

I do not have money to do good. I need this job, I do not have time to focus on spending my design energy on designing for social impact. There are other do gooders who will step up. Our company has to accept paid projects, we cannot afford to take on pro bono clients, let the big agencies do that they have money and people. Do these sound like excuses?

Zita Cobb at the Design Observer Conference at Yale SOM in 2018

Zita Cobb at the Design Observer Conference at Yale SOM in 2018

Can we create a culture for good so that design for good does not have to be an afterthought or only to be ‘ taken on’ because you are a ‘nice’ person or a ‘wealthy person’. Each and every one of us is responsible for the world we live in, the systems we create, the infrastructure we benefit from, and the destruction our habits cause. So something for all of us to think about…

• if Design is problem solving and decision making

• and Good is goodness, morality, ethicalness, upstanding, integrity, dignity…

• then doesn’t Design for Good become problem solving with integrity, dignity, morality, for all of our human problems, not just social ones?

Todd Waterbury, Chief Creative Officer of Target, at the Design Observer Conference at Yale SOM in 2018

Todd Waterbury, Chief Creative Officer of Target, at the Design Observer Conference at Yale SOM in 2018



Sentiment Analysis of Trump and Obama in Hip-Hop Music

Sentiment Analysis of Trump and Obama in Hip-Hop Music

Maybe an analysis of politics in hip-hop will tell us how Kanye’s bright idea will turn out… Art by Greg Bunbury

Maybe an analysis of politics in hip-hop will tell us how Kanye’s bright idea will turn out… Art by Greg Bunbury

As a fan of hip-hop music in this current political climate; I started noticing artists like Kendrick Lamar and A$AP Rocky referencing political figures in their lyrics. The question started to grow on me, how long has this been going on? Is there some way to analyze the spread of presidential references in recent hip-hop music? Recently, as a RISD student, I took a data science class at Brown University, and I thought, what a perfect time to figure this out? Let’s get a little bit more formal about defining the problem:

Analyze hip-hop lyrics for the mention of Trump and Obama and compare the annual average sentiment.

Of course, I knew that the outcome might not be perfect, but as a hip-hop head, I was excited to see the outcome.

Here is my working hypothesis I started with: Between 2000 and 2018, I believe that lyrics containing Trump will start higher in sentiment and go lower over the chosen time frame, Obama will begin neutral and go higher in sentiment within the same time frame.

The data I used was collected through BeautifulSoup by crawling the lyrics website Genius. The data is originally collected in .csv format and then converted into .txt. The data has a few main columns: The specific date and year that the song was released, the artist, the name of the track, the amount of views it received on Genius, the name of the .txt file created with all of the lyrics, the person of interest (Trump or Obama), and the average sentiment score of that track.

Originally, I tried to use the Spotify API, but it turned out that it was limiting with regards to how many tracks it allowed me to download. It didn’t give me much freedom at all so I decided to use BeautifulSoup and the Genius search function to get all of the tracks. I used regex to clean it up a bit but I also went through the data by hand because I didn’t trust the natural language toolkit, or NLTK, that we were using. As I expected, there were a lot of things that got grouped into the data that shouldn’t have been there, like full novels. I also want to mention that the reason that my .csv file contains the number of views that the track got on Genius is that I used that number to weed a lot of tracks out. Any track under 10000 views was not considered due to there being a lot of very random small tracks posted to Genius. Below is a snapshot of the full dataset.

The data includes all sorts of tracks. Everything from Yung Joc’s dirty south classic, “It’s Goin’ Down,” too much more recent additions by Kendrick Lamar, like “XXX.”

There are plenty of biases with the data. Biases not really because of a person influencing it, but because Genius has a lot of random pages with a large number of views that either has nothing to do with Trump but include the capital word somewhere, or have to do with Trump but is not a track. Also, the sentiment analyzer is not perfect. There are professional python coders that struggle with successful natural language analysis and I am solely relying on NLTK to give me results. Furthermore, NLTK has a pool of bad words that bring the score down. It shouldn’t be news that hip-hop music generally has a lot of negative words or expressions in the lyrics whether or not they are meant to be negative. NLTK does not care and so it will see a swear word that may be used in a positive way and yet bring the sentiment score down. When I started on this project, I knew that it would not return me the most perfect dataset, rather I did it because it is a topic that is interesting to me and I truly felt that it would be a great way to incorporate and encapsulate everything I have learned in this class.

The project can be broken down into three main steps. I split up the code into three separate documents for this reason as well:

  1. The first step is to grab all of the URLs from Genius in HTML. This has to be done manually. I basically went to the Genius website, searched the person of interest, then kept pressing load more until I got every single search result. Then I used the inspect function to get all of the links. This is put into one file. Now onto the first step. In my first block of code titled html2url, I simply change the HTML file into a nice list of URLS written in a .txt file.

  2. Using this new file, I took it to the next block of code called processURL. This does exactly what its title says. It goes through each URL using BeautifulSoup and collects the views, date, name of artist and song, and the location of the full lyrics. The lyrics get written in full in a folder titled lyrics in case I want to check the full lyrics to any song. It is during this step that all tracks under 10000 views are filtered out.

  3. The final step uses the code called songsentiment. Here, the sentiment of the song is calculated by using the file that was written as the outcome of the last step with all of the full lyrics. What this means is that songsentiment goes through this file one song at a time and for each song, it also goes through that song’s full lyrics. When this code is called, the user also has to specify what the word of interest is. This way, going through the lyrics, the code knows to look out for either Trump or Obama. Then it analyzes those lines and returns the average sentiment for that song. The user also has to specify if they want the data by year or by song. If by song is chosen, the code will write a .csv file that included everything about the song. The date, the name, the artist, the lyric location, the views, the person of interest, and the sentiment for that specific song. If by year is chosen, the code will write a .csv file that includes just the person of interest and the average sentiment for each year.

1_MHEWkoFimCm2qpyQt5CdSQ.png

The graph below is the comparison of Trump and Obama’s sentiment in hip-hop music over the course of 18 years. While Obama isn’t mentioned until 2006, I decided to keep 6 years of just Trump to show how he was portrayed in hip-hop before he had anything to do with politics. Trump appears to have started off neutral before jumping drastically between positive and negative. Starting in 2008, the appears slightly positive before going on a downward trend past his election date. Obama starts off neutral leaning on negative before a huge positive jump in 2010. During his second presidential term, he appears to bounce between positive and negative, before ending on a higher positive than ever before.

I also wanted to highlight some interesting points in the data. With regards to Obama’s data, his most positive song, among many, appeared in 2018 in one of Chief Keef’s tracks. Sosa’s line, “feel like Obama up in the V.I.P, may not seem like a very positive line, but keep in mind, there were many high scoring songs, and Sosa’s happened to be a few decimal points more positive. Obama’s most negative song appeared in 2015 on Tech N9ne’s Special Effects. The line addresses Nina’s haters, saying, “hate me like Obama.” The song was the introduction to Nina’s album, and he touches on many political, religious, and personal topics. The song came out during Obama’s second term, a time that drew a lot of negativity from many in the hip-hop community.

On the left is Chief Keef’s song I Need More, while one the right is Tech N9ne’s song Aw Yeah? (interVENTion)

With regards to Trump’s data, his most positive feature appears in 2000, far before Trump had any significant part in politics. The line appears in Nelly’s first hit single “Country Grammar (Hot Sh*t),” and has a fairly significant placement in the track. Around this time, and even years before, Trump was gaining traction in hip-hop music for the money he had. Many tracks actually started using his name as an adjective, when referencing money. This reached its climax with Mac Miller’s 2011 track titled “Donald Trump,” a song Mac noted he regretted making later in his career. Then Trump started getting involved in politics, which was not taken lightly by many in the hip-hop community. There are a lot of negative songs about Trump, but the one that had the worst rating was a 2017 track by the Gorillaz titled “Let Me Out.” The track has an interesting, albeit depressing, story about its conceptualization and recording. The Gorillaz originally came up with the idea and recorded their parts while Trump was still running for office. The song imagines a theoretical Trump presidency. The Gorillaz approached Pusha T, featured on the track, to record a verse, telling him, the album was a party for the end of the world, like if Trump won the election. When Pusha wrote his verse, Trump had won already, which created this eerie, crystal ball like feeling, when the song was completed.

There were also some very odd, yet ironic items that found their way to the dataset during the first round of data collection and before I sifted through the data. They also go to show the limitations of the program. One was Thomas Moore’s Utopia, and the other was George Orwell’s 1984. Both works are in essence about theoretical worlds, one which dreams of the perfect society, and the other, imagine what happens when that perfect society goes a bit too far. Fitting for the world we live in right now.

My battle with the data collected through crawling was definitely a challenge. Figuring out what to call with BeautifulSoup was difficult as well. Overall I am happy with the product, as it is what I hoped to have coded, even if the results are not perfect, in the sense that the data collection was a bit flawed. The next time around, I would use a different sentiment analyzer. I am unaware of others at this moment, but I am sure there are some out there that might be more complicated but more accurate. I also chose not to include Hillary to make the data clearer and simplify things overall. In the future, maybe I would consider adding more people. The code is set up such that I could technically look for any word in the lyrics of the songs that I have collected. Maybe I could expand from just presidents and analyze other aspects of the data.

I want to thank my teacher, Chris Tanner, and all of the wonderful TA’s for such a great class.

What do Pepsico, Target, and New York Times have in common?

What do Pepsico, Target, and New York Times have in common?

Design Observer, November 2018

Last year I attended The Design of Business and The Business of Design conference at Yale School of Management. It was two days of mingling with high energy creative thinkers and strategists.

The design industry has evolved so much. When I went into ‘applied arts’ some decades ago, spending money to go to art school was looked upon with a different lens. Especially in India where I grew up you either became a Doctor, Engineer, Lawyer, or CPA. But if you decided to go in the arts or design… you were an odd ball, maybe considered a loser too because you would not be able to support yourself.

Over the years my basic design background evolved and expanded to encompass book design, fashion design, textile design, painting, and all of these skills evolved with digital tools. As I went through grad school at Pratt Institute in New York and later moved to the Bay Area, the world wide web was just taking off. I vividly remember sitting in meetings and arguing with engineers who would not think twice when using multiple fonts on a web page and unintuitive colors for links and visited links. I lived and survived through the era of web pages that had black backgrounds and yellow and lime green type. And let’s not forget those blinking buttons for call to action.

When designers started designing for the web there was a clear divide between the print and the web world. There was this unspoken superiority and the east coast — west coast divide was evident. I myself remember the snobbery behind working on online projects. The Google search page always came into every conversation. Craigslist was another. How not to be like them, all text, and all links.

When it became cool and acceptable, suddenly a surge in job titles came about, User interface designer, Information architect, multi-media designer… Trained designers were able to expand their design prowess, their grids, gutters, typographical expertise, and nit picky leading and kerning and created a new language with the new found tools for onscreen needs. Print and Multi media design became two parallels that learnt to coexist. Over time, they also learnt to collaborate, and then came a time when it wasn’t a choice anymore, they had to blend and work well together, or else…

Then came the boom before the bust.

To add fuel to fire, everyone you interacted with, your nanny, the mailman, the taxi driver, everyone had a startup idea.

They all needed a website designed, they all needed a product prototype and presentations. I was teaching at the Academy of Art around this time and we had to incorporate app design in our new media class. The world wide web was getting smaller, it could fit in your pocket and we had to train designers to think outside the box one more time but this time the box was becoming much smaller, beyond the 1042 pixels.

When the dotcom bust came about and the economy slowed down, the in-house creative departments started shrinking rapidly. The love for design started to fade. You had to work so hard to convince a client to go through a redesign or think about their branding and engagement.

But problem solving was still required.

With lessons learnt from too many startups and not much thought into why they were there in the first place, a new breed of design thinking came into play. Consequently, media consumption and well designed consumer eye candy was subtly educating lay people on the benefits of a well designed product and interface. A creative problem solver became part of every team. It became fashionable and vey forward thinking to visually verbalize your problem statement. Design thinking became a snob norm. Thinking outside the box was your edge in the noisy overcrowded valley and elsewhere. What did that mean? What did that look like? If you have seen pictures of meeting rooms with white boards and colorful post it’s you know what I‘m talking about. Big word clouds and minimal viable questions preceded big spending.

But according to me, a lot of this design thinking became more thinking and less doing. There was a lot of noise. We suddenly saw design thinking houses opening up at every corner along with a Starbucks and a Philz. Everyone went through Design Thinking sessions and came out with lots of takeaways but there were fewer next steps. Where do we go from here? I don’t know, we never talked about that. We only talked about the problem, and figured out where it came from and how many ways we can dissect it to see if we really have a problem but we never talked about forming a committee or assigning a team to follow through on the takeaways. Of course, this is not the case with everyone, but it was largely the issue people started facing.

What are we doing as designers? Why are we saying what we are saying? How are we envisioning the message?

I couldn’t help but draw parallels to my life as a designer, and my normal human life. My role as a designer started off as a creator, someone who spent a lot of time to hone her craft. However, life had other plans and I had to quit my job as a creative director and become a full time cancer caregiver but, my design background and my need to find meaning in the mundane led me to question the cards that were dealt to my family. My son who was fighting cancer was three and his sibling was six when we started his treatment and we ended up spending so much time in the mindless activity of going in and out of the hospital to cure him that no thought was given to his our our emotional and psycho-social needs. None. My training in the discipline of design made me question that. My craft became the vehicle in creating a non profit that focused on bringing art as healing to the patient, siblings, and the care circle.

My 2018 Vision Board had a prominent spot for professional growth. The Design Observer Conference seemed like just the right fit. I was really hoping that this conference would do none of that preaching, if I may use that term. I wasn’t looking for a hands on training workshop on design, neither was I looking to be told how to do something. What I was looking for was to have a conversation, hear creative minds talk, share, question, and be humble.

So did that happen? Did Design Observer’s first conference deliver?

Zita Cobb, Founder and CEO of Shorefast and Innkeeper of the Fogo Island Inn.

Zita Cobb, Founder and CEO of Shorefast and Innkeeper of the Fogo Island Inn.

Keynote speaker Zita Cobb, a social entrepreneur, started the conference off by talking about ‘belonging’ in our societies. With everything going on in the world, especially here in the US with immigration, women's movement, diversity at stake, a conversation on ‘belonging’ in a design conference was refreshing and made me hopeful on the prospects of the conferences tone. The role of a designer most of the time becomes a work for hire. You are solving someones problems for a specific reason. As a creative thinker, owning the problem and looking at it inside out is what inspires me.

I had never heard of Fogo Island and I’m sure 95% of the attendees hadn’t either. It was fascinating to hear the social and cultural entrepreneur talk about returning to the island she grew up in and lay out the perils of growth, greed, and climate change on a small island in Newfoundland.

IMG_6437.jpg

So what is design?

As I’m writing about the conference I can’t help but add my experience to the conversation. Something that resonated with me was this underlying theme- Design is Good. Design for Good.

IMG_6509.jpeg

Whether it was Pepsico’s outgoing CEO Indra Nooyi and Mauro Porcini, SVP & Chief Design Officer, or Richard Ting, R/GA’s Global Chief Design Officer, or Valla Vakili, Head of Citi Ventures Studio, their message seemed to outline a utopia where people who have the ability to think creatively should be sought out for higher office. Does not matter what sector, does not matter what segment. There seemed to be an untold urgency in everyone’s presentations for creative people to rise from their design departments and take on leadership.

Richard Ting, R/GA’s Global Chief Design Officer

Target’s Chief Creative officer, Todd Waterbury said, as a leader you have to balance the soul but also represent scale to be accountable. If managed appropriately what emerges is a Brand. But the larger question was, how do you find the brand in culture and the culture in brand?

What is the gaping hole you will leave when your company is gone?

Todd Waterbury, Chief Creative Officer of Target

Inviting people to a party is diversity, asking them to dance is inclusivity

Caroline Baumann, Director, @CooperHewitt, Smithsonian Design Museum and Caroline Wanga, Target’s Chief Diversity Officer talked about leadership, diversity, inclusion, and creating a space that create an unintended consequence for doing good. I liked what Caroline Wanga said, Equality is giving everyone a shoe, inclusion is giving the shoe that fits. Conversations about inclusivity and equality in diversity are on everyone’s mind right now with the #metoo movement, #racialprofiling, #immigration, #equalpay and many similar conversations in our life right now. It was refreshing to hear different voices on these topics. Creative people are passionate and they are natural changemakers.

Valla Vakili, Managing Director & Head of Citi Ventures Studio

Leaders need to have experience making things.

Mark Thompson, CEO of New York Times and Tom Bodkin, Design Director of NYT were in conversation with Ellen McGirt, senior editor at Fortune. NYT pushed for questions and got pushed out by the current democratic regime. The conversation of news and packaging news is fascinating to me as a designer. We have the ability to create images that several million people will see and react to. We have the power to package and incite anger, compassion, or movement. Copy + Visuals have the ability to change minds and directions. This is a complicated, scary, intriguing world and as creative people we have an added responsibility to bring the real truth to the forefront.

Most of the time we work on projects where we are paid to promote a brand and shape a story, yes that is to pay bills, but the real job we all have as creative people is to help lead the change, use our power of one and add it to the collective power of ten. We do not have to become activists or renegades, no that is not what I’m prescribing here, but in our own way we can use our creative thinking to look at our surroundings and question, emphasize, expand, embolden. We can help repaint an old picture. We can help add voice to a cause. We can align our creative voice to shape truth.

David Rose, VP Vision Technology at Warby Parker, said something that I would like to close with, Of course he was talking about this in context of eye wear and the future of wearables. For me this statement opens up a whole new dimensional thinking for creative people.

David Rose, VP of Vision Technology, Warby Parker

David Rose, VP of Vision Technology, Warby Parker

When photography moves from intentional to incidental, we as witnesses or as mere spectators, and as creative individuals are going to be charged with more layers and levels of storytelling. We as Design Observers will have to play an active role because we will have to make sure that there is an intention behind every message that is incidental.

I will leave you with Jessica Helfland and Michael Bierut’s closing remarks…

Designers are optimists

We must be futurists

Deeply committed humanists

Think for yourself and do it loud!

The Impetus of Monster Doctor

The Impetus of Monster Doctor

In the early months of 2018, I found myself in between client projects at Whamix. This was unusual, as Whamix usually kept me pretty busy. I was unsure how to spend the handful of days between the completion of my previous project and the start of the next. With the encouragement of the CEO, Sunil Shah, I spent the time developing an experimental game that sought to investigate the potential of unique genre combinations. I began my research by looking to existing mobile games, which provided an abundance of material to draw from, but I decided early on that I was most interested in types of play that prioritized thoughtful decision making and accessibility over more action-oriented and skill-based mechanics. Playing at the confluence of visual novels, doctor sims, and classic text adventures, the project evolved into an experience I named Monster Doctor.

The Monster Doctor overworld.

In Monster Doctor, you take on the role of a doctor providing illegal care to Monsters, creatures from an alternate dimension that have arrived on Earth through human experimentation and now live among us as second-class citizens. The game is split into three chapters, each starring a different Monster. The goal of each chapter is to navigate the web of social, political, and cultural contexts of each Monster’s circumstance before deciding if and how to provide care based on what you’ve learned.

My favorite media experiences have typically been the ones that concern themselves less with answers or authenticity and more with questions and subversion. This personal preference became something of a style guide and litmus test during development. The goal of each chapter became to motivate an earnest question through bizarre and sometimes funny circumstance. To this end, I tried to avoid defining success in Monster Doctor. While there are consequences to every choice you make in the game, every Monster’s story is designed to encourage contemplation and hopefully even reflection. For this to happen in earnest, it felt necessary to foster an environment in which the player wouldn’t feel judged for or scored on their behavior. Thus, narratively or mechanically speaking, the game does not consider any choice to be “right” or “wrong”. If at any point during development I felt like the writing was becoming too didactic (a tendency of mine) or that alternative interpretations were being boxed out, I would rewrite the chapter.

The Yarn file containing all the dialogue for the Monster intake phase.

While writing Monster Doctor, I was occasionally reminded of that Tolkien quote about allegory and applicability. He argued that allegory mostly functions to preserve whatever dogged beliefs the writer may hold, while applicability serves the reader, meeting them on their own terms through shared experience. I found this proposed framework useful while developing a game, ostensibly intended for all ages, that occasionally addresses prejudice, religious intolerance, and political violence, to say nothing of a premise based on restricted access to healthcare. I don’t mean that Monster Doctor doesn’t have things to say, just that I tried to lean away from the obvious metaphors, at least as much as a game about healthcare released in 2018 can hope to, in an attempt to preserve the emphasis on the player’s experience.

The Riddle Tweak during surgery.

Developing the look of the game, I wanted something bright and approachable that wouldn’t dissolve entirely into cuteness or nostalgia. I was aiming for a familiar palette while trying to avoid environmental or character designs that telegraphed (or could be recognized as telegraphing) how the player is supposed to feel. Eyes are cutesy-big and colors are super bright, but there are some weird characters occupying the world of Monster Doctor, and their designs are not typically indicative of their personality.

An early version of the Snurflop design had external intestines and other organs that dragged on the ground behind it.

In my effort to curb the cuteness of the art style, I pushed some character designs into pretty macabre territory, at least for a family game. Some Monsters feature quasi-grotesque body modifications and one creature was initially conceived as having no mouth, having evolved to absorb nutrients from the environment by dragging its guts on the ground. I later decided that this was maybe a little extreme and updated the design, a decision that later heavily influenced the story of that Monster’s chapter in the game.

So Monster Doctor is a bright, sometimes zany, mish-mash of tone and genre. It’s a messy, little experiment with the goal of creating a space for the player to reflect for a minute, if they want to, rather than just react. In that sense, the story that unfolds in the game kind of resembles the development process of the game; Monster Doctor is more interested and interesting in the journey, not so much the destination. Dang, I think maybe Tolkien had something to say about that, too.

The epilogue scene, featuring Ro, the robot assistant.

Monster Doctor is currently in post-production. We will announce its official release in the next couple weeks.

Branding with Material Design and Sketch

We recently worked on a Fortune 500 client project. Our initial creative brief was all about a mobile design solution. We started researching Google Material Design for the same. After some initial research, we liked what we were seeing.

Theming with Google Material Design

Theming with Google Material Design

We decided to take on the challenge and design with Material system. As the creative director my first goal was to think about branding and visual hierarchy. I wanted to make sure that the client's brand was extended into this new system.

We asked our client to send us their branding guidelines and corporate identity manual. Three things that were important right off the bat where the fonts, colors, and visual structure. After studying their online presence and branding guidelines I created a brand extension in Sketch. It was important to get their entire color library and font library in one place so that when our designers start implementing the design they have only one place to go to for final brand input. We created a library in sketch with primary, secondary, tertiary colors as well as spot colors. We also added buttons, angles, and gutter spacing in our library.

Our partial brand system applied to existing Roboto library.

Our partial brand system applied to existing Roboto library.

Since we are not privy to share our ongoing client project, we created an internal fictitious project to help illustrate our workings on material design.

Color palette and type styling as seen in the above brand system image.

Color palette and type styling as seen in the above brand system image.

Typography on the web has been a bane of existence for designers. I have to say that I was pleasantly surprised when I came across the type system. This was exciting because now we could truly stay true to the brand and if needed we could add mobile specific typography into our new brand guidelines.

If you are a designer lucky enough to have worked in print and digital, there is one pet peeve, columns, gutters, and margins.  

I have spent many hours sitting next to a frontend engineer moving pixels around so that each item started at exactly the same distance. This caught my attention - Responsive layout grid.

With design systems spanning from a mobile device to desktop marketplaces and retail stores, adhering to standards across all platforms is crucial. I have to commend material design team for thinking about responsive design and making it part of their overall implementation. However, here is the caveat, while a great potential strength, layout and grid options are not a part of downloadable tools just yet. We had to go through all the available documents and create a custom layout and grid system in Sketch for our project. this was very painful and time consuming.

Custom layout and grid styling in Sketch

Custom layout and grid styling in Sketch

For someone who is well versed in Adobe Suite, I do have some complaining to do. Working with the symbols in Sketch can be painful. And why is everything called a symbol? Editing type is not a symbol, editing an icon might be.

However, this might be a learning and growing pains problem and not a tool problem… but when you are working off of an existing library e.g. Baseline, as soon as you want to edit anything at all, you double click on the element and it opens a new window, here the toolbars are very complicated for simple edits. When you are in your design and want to make an edit, a new window opens up, in there you have to double click to make the actual edit, which means, yet another window opens up. And the toolbars on the right of the screen have words like Prototyping and Overrides, not very conventional design language. And nether is the actual editing within each section. You have to nudge and fine tune so many pull down options for one minor edit.

At the moment there is no support for any Adobe tools. I would like to see more cross pollination with Adobe Suite. In the long term, if this tool is aimed for designers this will be a factor.

Entourage of levels within levels for one edit

Entourage of levels within levels for one edit

Would I encourage my design team to design with Material Design again, yes I would but the complex toolbar and not so efficient way to make edits does worry me. I understand that we are working in a responsive environment thus each element has to be independent and editable. But the number of layers within layers this creates, is a problem for me. I would have to add time in my design resource budget to account for client based theming. I do like the crisp look of the finished product and the accountability that things will look exactly as I had planned but at the end of the day I do see this as yet another tool in the ‘designers’ toolbox. Since we will be at the mercy of plugins, it will really depend on how Google Material Design, Sketch and other plugins can work with each other to bring us a seamless solution.

Whamix's Introduction to Google's new Material Design

Whamix's Introduction to Google's new Material Design

A few months ago we were presented with a challenge to create a detailed matching service. The route chosen was to match a human to a pet that truly fit their lifestyle needs in terms of data points that are often overlooked such as time constraints, training abilities, or monetary limits. The start of this work coincided with the release of Google’s new Material Design visual language. We jumped on the chance to create this matching platform using Google’s Material Design as it demonstrated a consistent and visually pleasing design language and we were intrigued by the tools it provided.

We then built Pet Story with Google’s Material Design and got to see first hands its strengths and current limitations. The result was something we were excited about.

 

Google’s Material Design uses Sketch’s plugin and library features to its fullest extent

Material Theme Page and Theme Editor

I’ve used plugins and libraries in Sketch before. They have always been incredibly useful for creating a unified design over multiple platforms and projects or exploring others’ UI breakthroughs. The Material Design plugin for Sketch is one of the most extensive systems I’ve seen so far. Honestly, it’s huge. There are hundreds of assets that are easily editable. Being able to use their theme editor to easily change the color palettes and typography is incredibly useful. Seeing these updates live in Sketch using their Theme Editor under the “Material Theme” page makes figuring out how all your design decisions flow together a rather nice experience.

Custom Libraries

While an extensive experience, these Material Theme edits are still limited. The Material Design website showcases their “Material Studies,” various examples of how the same platform can create a wide variety of sites and apps, with varied goals and focuses. While beautiful, some of these designs are not yet attainable. Rally in particular has a primary color theme that uses an additional 5 infographic colors. Easily adding these colors through the Theme Editor are not yet possible. Rally also showcases data tables, which are not yet available either, but should be in the future.

Another current limitation is paragraph formatting. While changing fonts is easy, changing their alignment, layout, and format is not. While frustrating for the nitpicky, this actually ensures that each design element is as readable as possible. This is fantastic for mobile design, you don’t have to worry about ensuring that you have the proper text size for your app, it’s built in. This is a limitation for desktop design, as the needs for layout and formatting are different. Sometimes a specific font needs a different leading to be as readable as possible. When you’re working with as much space as you are in desktop design, you need that flexibility.

There’s more to come as well. I’m sure that as google continues to update their plugin these libraries will expand significantly. When it comes to sifting through the many options they include a nice layout within their symbol library under “Material Components”, breaking down each subcategory for easy reference. Really take your time to look at these so that you aren’t overwhelmed when you try to look for what you need to insert from your symbol library.

 

Using mobile assets for desktop design

The Material Design plugin for Sketch has shown to be extensive and pliable, however it’s not done yet. The current iteration is obviously only for mobile design. Despite this and with quite a bit of edits to the library symbols, we were able to create a desktop website using material.io to create a design we were quite happy with. On their site, Material Design showcases how well their materials transition between mobile and desktop, but those assets don’t exist yet. To create our site design, I went in and edited all the the symbols based on the specs listed on their site to fit a desktop design. This took time, but having the specs listed made the process straight forward once I figured out that it was necessary. I imagine that future iterations won’t have this issue.

 

Google’s Material Design in the future

Google’s Material Design is currently a wonderful visual language with easily accessible tools for creating clear and aesthetically pleasing mobile UI. To create something that is truly unique and creative, or to even create something for desktop, takes a little bit of elbow grease. However, this is an early version of the plugin and more updates are on the way.

In time, this may become an industry standard tool that makes creating apps and programs a streamlined and accessible process. Check out Google’s Material Design here!