Episode Links

Abridged Transcript

I really like round numbers, so I was trying hard to make it to episode 50 before I announced that Design Edu Today is going on hiatus. Once I realized that it was going to be harder making it to 50 than I wanted, I decided that I’m just going to announce the hiatus, get some things done, and get back to making the podcast. It was at that point that I noticed my next scheduled release marks the two year anniversary of this podcast to the day, so instead of just announcing the hiatus I’ve decided to do a reflection on what I’ve learned over the two years of interviews. If you tuned into hear me interview a guest, that’s not going to happen in this episode, rather, this episode is going to be me talking about the top 5 takeaways from the past two years.

However, before I get into the takeaways, I’m want to briefly talk about the need for the hiatus. When I first started the podcast, the website was a complete afterthought. I had no idea how many episodes I was going to record, what the format was going to be like, what type of guests I wanted to interview, how many at once, etc. All I knew at the time was I wanted to demonstrate how much the field of graphic design has changed and how a print design program isn’t enough to prepare designers entering the industry today. I also knew I wanted to have transcripts of the interviews for accessibility reasons on the website and to make it easy for design educators to cite portions of the conversations in papers and journals. Needless to say, since I didn’t have too many plans, the website didn’t serve too many needs. With the benefit of hindsight, there is a lot more the website can do to enhance the value of the podcast, make it easier to identify topics of specific interest to the listener, and all around make it easier for me to maintain.

However, to do this properly, and not only deliver greater value for future episodes, I need to go back and review the 46 current episodes. So in addition to creating a new layout, coding the site, and picking the best CMS to automate the production process for future episodes, I’ve got lots and lots of writing to do. I’ll need time to do all this, but I don’t know how much exactly! Maybe a month, maybe two? I don’t really know for certain, but I want to be back up with the new website and new episodes as quickly as possible, hopefully by September, so check back often or feel free to contact me and ask for an update. I’ll try and keep the Facebook and Twitter pages up to date on the progress as well, but social media isn’t a habit for me quite yet.

OK, so now that the housekeeping is out of the way, I’m going go over my top five takeaways that I hope you got as well from listening to the podcast these past two years.

Takeaway Number 1: Just Enough HTML and CSS

I had preconceived notions going into this research project. The first, and biggest, was the ratio of how much front-end development Graphic Designer’s needed to know to be successful in the industry. At one point I was teaching HTML, CSS, and Javascript while teaching students to use Sass and Github for managing the process. We even got into specifics on performance, and testing their responsive layouts across multiple devices and platforms. This was too much in too short a time for a student’s first exposure to the medium, and since most graphic design programs only dedicate one course to cover everything an interactive designer needs to know, my approach never left time to cover actual interactive design principles. From the Design Edu Today interviews it became clear that it wasn’t necessary for entry level designers to have the in-depth knowledge necessary to be a front-end developer.

What I did find was that graphic designers need to know the medium of HTML and CSS. By understanding how HTML and CSS function, they are better able to design for its full potential. For example, HTML is the Structure layer and CSS is the Presentation layer. A parallel in print design would be Paper is the structure and Ink is the presentation. Once you truly understand these two fundamentals you know the medium’s limitations. This understanding opens the door for enhancements via the third layer, Behavior. You control the way things behave on the web via Javascript. It’s what makes image sliders, sticky navigations, navigation lists change on click or scroll, etc. A print design equivalent would be spot varnishes, foil stamps, embossing, laser engraving, etc. Once you know what you can and can’t do with the medium, you can then leverage it in unexpected ways.

The other preconceived notion I had was the level of testing visual designers do with their designs in an actual browser to ensure proper typographic hierarchy and smooth transitions from multiple column to single column grids. It may seem counter intuitive, but the interactive designs you create in design programs such as Adobe’s Experience Design and Bohemian Coding’s Sketch don’t look like what they will actually look like once they are in a browser, even though they are created on a screen, often times a similar sized screen. The print design parallel is designing a poster on a computer screen and then realizing the hierarchy and typography does not reflect the screen version—too big, too small, too similar, etc.—on the full size printed version. This same thing happens in interactive design, with an added twist: responsive design. Today there are a litany of popular screen sizes, not just within the Apple product universe such as the popular iPhone 5s or the latest iPhone 7 and 7 Plus, but you also have the LG, Samsung, and Google cannon of mobile devices.

We can’t forget the huge number of Tablet devices either, Amazon, Apple, and Samsung are all major players in this market. So in print design, to test the poster, you print up a full size low fidelity mockup to ensure that your design choices are appropriate. I wrongly assumed that design students needed a huge device lab containing as many of the different devices out there to test their designs on. This also meant design students needed to learn HTML and CSS to a sophisticated enough degree that they could create their designs so they could be tested in the browser across all these different devices, hence my approach to teaching interactive design mimicked instruction for front-end developers.

Based on the many conversations for the podcast, thorough testing of designs across devices and platforms was a job that falls more on the front-end developers. However, this doesn’t excuse designers from looking at their designs on actual devices, just like the end user would. Many designers I interviewed said that while the there is a steep learning curve, most can look at a layout and immediately spot where the design may fail when being viewed on different devices. However, designer’s still need to create a prototype of their designs to view on different devices to get a general sense if the font they are using is the right size for the user and if the three column grid used on the large screen design still holds up on a small screen. Fortunately the interactive design software industry already has a few tools for this right now, with more accurate and sophisticated tools being released regularly!

However, as an educator, creating a design that seamlessly flows across every device is my biggest source of frustration. Because of Responsive Design, you can’t just create a single iPhone 7 Plus sized mockup, an iPad Air sized mockup, and a 15″ laptop sized mockup and use prototyping tools such as InVison and Adobe Xd to view your static mockup on a device. This method won’t help you realize that your design for the 15″ laptop is too small for a 27″ monitor and too big for an 11″ Chromebook. So currently the only high-fidelity way for designers to test designs is by learning enough HTML and CSS to get their layouts in a browser or create a mockup at the actual size of over twenty-four thousand different sized devices that the end users may have to test in something like InVision or Adobe Xd. On the horizon are new tools like the Anima App plugin for Sketch and Affinity Designer, programs that let you create a single artboard and pin your elements in place and then when you resize the artboard, the elements are resized to fill the remaining space based on where they are pinned. This mimics the behavior of HTML and CSS in the browser at a fairly high fidelity, but as I said, there are only two examples of this currently.

Takeaway Number 2: The Designer’s Toolbox

The designer’s toolbox has drastically changed. Gone are the days when all a designer needed to know was Illustrator, InDesign, and Photoshop. When the profession shifted from predominantly print work to interactive work, InDesign became a largely obsolete tool awkwardly replaced by Photoshop for layout until Bohemian Coding’s Sketch came along as an interface layout tool. This happened because InDesign, even though a good layout tool for print design, isn’t a good layout tool for interface design. There are many reasons for this, but the biggest is it doesn’t work with the language of the web. There are no picas or points in CSS. In CSS you work in pixels, ems, and percentages. So front-end developers who get an InDesign file to recreate with HTML, CSS, and Javascript are getting something in a foreign language that they either have to spend billable time to translate, or the designer must spend extra time creating a document that has the necessary specs for the developers, again on billable time.

To compensate for the new language of the web, there are a ton of new tools, with more being created every day, to help designers work in an interactive screen based industry. Bohemian Coding’s Sketch was an early pioneer that let interactive designers work with native units like pixels, and it made it easy for designers to work in a workflow that natively includes common screen sizes. Another early pioneer was InVision. Their software platform lets designers upload their Sketch files through a web interface and create clickable prototypes that can be sent to others on the design team for feedback or the client for approval. InVision has even made it easy for the developer to export the necessary assets such as images, icons, and CSS styles from those uploaded Sketch files, totally negating the need for a written guide that are necessary when sending over a file created in InDesign.

Of the the new tools, one task is seriously untapped, version control. Developers have a tool called Git that allows them to version track their code by tracking changes to the code and then showing the changes between each commit. Git also allows a team of developers to work together. For example, one developer working on a feature could create a branch—essentially a copy of the project—and create the code for the requested feature without affecting the code in the main branch. Once the developer is done, they would create a Pull Request to have the code created for their feature merged back into the main branch. The developer working on the main branch could then review the Pull Request and look to see if the new feature affected the code in the main branch and accept the pull request, or create an Issue Comment asking for something to be tested and fixed before accepting the pull request to merge the two branches.

However, for visual designers working in teams, this type of version control and ability to share has been nearly impossible. Most of the designers I talked to working at firms or in remote teams said that all the designers work on the same files together. To accommodate this type of collaboration, most firms have their own file server or use file sharing services like Dropbox and Google Drive. However, this still doesn’t let designers work on the same file at the same time while creating a history of the incremental changes that can be reviewed side by side. So designers at firms have each come up with a proprietary naming convention for their files. For example, the original mockup of website will get saved as a version, then the next designer working on it will copy the original file, and then save the new version with a name that shows it’s newer than the original and indicate who was doing the work. A lot of times, some sort of written documentation or log will follow the ever growing set of files with short notes of who did what and when.

Takeaway Number 3: What Designers Are Actually Making

As I wrote in an earlier article titled “Changes in Communication,” the way we as a society communicate has drastically changed in the past 10 years. Because of this rapid change many forms of visual communication have become outmoded such as direct mail, brochures, and posters. Even static websites, still very much in use for things like coffee shops and yoga studios, are no longer in the realm of the graphic design industry. Now anyone can use a website builder such as Wix, WordPress.com, and many others along with a design template to create a static website for their business or organization.

So if graphic designers are no longer producing traditional visual communication pieces, what are they producing? Based on observations from my research I like to split what graphic designers are doing currently into three categories; branding, product, and service design.

The firms that focus on Branding Design will produce the visual identity of an organization. This will also include working with startup companies to determine a name, a philosophy, in addition to the standard color palette, logo, typography, etc., that will be applied to everything from apps to trade-show displays. What was surprising to me about these types of firms was how much work they outsources. Many either have independent contractors working in-house to develop or engineer things like an app or a website, or they contract with firms that specialize in interactive design and development.

The other two areas of focus for firms is the creation of products such as Evernote, ToDoist, and Blackboard, and services such as Lyft, OrderUp, and Spotify that may be accessed through a website, but are not simply static, brochure style websites. Before I discuss more in-depth about products and services, I want to clarify the difference between product or service and a brochure style website since they can be accessed the same way. A universal example is Google’s Gmail. When you access Gmail through a web browser, you are technically accessing a website, but that website is doing much more than providing information about an organization. Through Gmail you can send and receive communications, label and prioritize emails, organize and store contacts, add events to your calendar, etc. The design process necessary to create an email service, even though it’s technically a website, with such a wide range of features is significantly more involved than what would be necessary for your local corner coffee shop, even though they are both websites.

So now that I’ve distinguished between a brochure style website and a product or service, I want to distinguish the difference between a product and service. I’m going to use the previous examples of Evernote, ToDoist, and Blackboard as a product. Basically these are tools you use to create, track, something else, etc., etc. How you visually design for a tool to complete a task is vastly different than how you design a piece of visual communication.

Lyft and OrderUp on the other hand I define as services. When you go to their app or website they provide you with a service, in this case the ability to order a ride or food. In order for the visual designer to create the necessary elements, they need to intimately understand the actual service from beginning to end in order to design the proper visual experience.

While the design process for both products and services may be similar, it’s important to identify the distinction between them to fully highlight how much the role of the graphic designer has changed in just the past ten years. Instead of designing static visuals, designers need to focus on the entire experience of the user and figure out how to enhance their experience to create a need for the product. This is where the frontier for design education is, User Experience Design, which will be discussed later in this report.

Takeaway Number 4: Design is a Team Sport…Again

With the industry creating a lot of new tools for collaboration, it signaled another thing I wasn’t fully aware of, but was obvious once I thought about it, design firms are forgoing brick and mortar buildings for a more nomadic existence. Happy Cog is a recent example of an established interactive design firm with a large work space in downtown Philadelphia that they closed in favor of getting a membership to a co-working space for employees who didn’t want to work from home. Now everyone works remotely at Happy Cog. HAVAS helia is another example of a firm with a non traditional working model, in this case remote teams. With many locations throughout North America and United Kingdom, HAVAS helia’s offices don’t repeat the skills in each office, rather each location has it’s own specialty. For example, advertising design and development for ads on websites is done in Baltimore, and general branding is done in Chicago. Another example of this team collaboration approach is the firm Superfreindly, headed by Dan Mall, his firm is just him, but he has a long list of designers, developers, content strategists, information architects, user experience designers, etc. that he contracts with on a as need basis.

People working in different locations on the same project has only increased the need for specialization and all but removed the status of solo rock star designer from the industry. This specialization has also has lead to the proliferation of job titles within the interactive design industry. If you look through many of the job boards you will find dozens of titles including:

  • Graphic Designer
  • Digital Designer
  • Production Designer
  • Interactive Designer
  • Product Designer
  • Service Designer
  • Visual Designer
  • User Interface Designer
  • Front-end Designer
  • User Experience Designer
  • Interaction Designer
  • Front-end Developer

Making things even more confusing is that many of these titles share very similar job descriptions, skill requirements, and education. All of these job descriptions, despite the actual job title, ask for the potential hire to know UI software like Sketch and production software like the Adobe Creative Cloud, an understanding of HTML and CSS, the ability to conduct prototyping, user research and usability, and have a visual portfolio. So on the surface, they all look like they are the same exact job. But what they really are, is a group of closely related professions that benefit from the overlap of knowing each other’s discipline. Therefore, the common skills are actually ingredients in a recipe and each job title requires a different amount of each ingredient to produce the desired result.

For example, digital and visual designers will require a much higher proficiency of the design software and strong visual portfolio that includes branding, app and web designs, and prototyping, but their HTML and CSS skills will only need to be at a level where they work well with a front-end developer who will be primarily doing the coding. User Experience Designers need to know user research, usability, prototyping, amongst a lot of other skills necessary to understand human behavior, but they also need to have an understanding of visual design so they can work with designers to ensure the final product stays on point if they see that the visual doesn’t actually match the desired message or deliver on Key Performance Indicators (KPI).

I could go over the exact balance of skills necessary for each job title, but it would be overkill, the underlying theme is that no one person can create the entire project by themselves, not even the mythical unicorn, the designer who can also code. The unicorn who can design and code at a high level is then potentially missing the necessary user experience skills to do in-depth user research, content strategy experiences, ext. The bottom line is contemporary design is a team sport much like it was pre computer where you had typesetters, layout artists, graphic designers, etc. who were all necessary for the production of a piece of design.

Takeaway Number 5: Design Systems & Process

Design in its modern context has lead to a change to the traditional design process to account for these new working methods. Before I began my research, when I would design a website I would focus on an entire page, not individual elements. I would treat the design of a web page much like I would treat the design of a poster. I would focus on the sum of it’s parts, and how they interacted, instead of focusing on individual elements within the poster. I taught this approach to my students as well, asking them to go from wireframes, to sketches, to computer renderings of the entire web page. From my research, designing with a “whole page” approach isn’t the norm in the industry. Rather, most designers I talked to design elements of a page that create a Design System. The Design System is also referred to in the industry as Atomic Design or Pattern Libraries.

Once the system of page elements that includes things such as: navigation, buttons, lists, headlines with accompanying body copy and images is created, then a webpage could be quickly created by putting the patterns together to form a page, then pages to form a website. This method drastically changes the client/designer dynamic as well. When showing a webpage to the client for approval, clients will often get hung up on individual elements within the page, not the overall page layout. However, clients would nix an entire concept because they were unhappy with a specific element. By designing a system first, you get approval on the element level, then when the elements are combined to make pages, then an entire site, there is no need for client re-approval, because they already approved the system.

I have my students work using this same process now. Once my students create the initial design concept, they move on to creating what Dan Mall has coined “Element Collages.” Element collages are simply collages of potential elements that will be included on an artboard, with multiple iterations of each element. This forces the students to focus on the design at the atomic level. Once they have completed their element collages they move on to wireframes, then incorporate the elements into the wireframes that give a complete page.

Another takeaway from these interviews has to do with the actual interactive design process. It seems like everyone is doing it differently which was a bit frustrating since one of the goals of my research was to find a common design process. However, I did conclude that while everyone is doing things differently, everyone is looking at their own process to find ways to make them better. If you look at the popular interactive design conferences such as An Event Apart, Generate, Smashing Conference, Web Design Day, just to name a few, you will see that a lot of talks center around improvements to a very specific part of the design process. For example, Samantha Warren, Experience Design Manager at Adobe, gave a talk at An Event Apart a couple of years ago about the early stages of the interactive design process where a lot of work went into initial design concepts that didn’t fully flush out client expectations. This process lead to bigger issues down the road when clients were unhappy with very specific parts of the web site design that weren’t addressed early on.

So, to avoid having to design an entire website just to convey a concept in the early stages Samantha devised a process called “Style Tiles,” similar to mood boards where common elements on a website are put onto a single artboard in a way to convey the concept of the design. While this may seem like something you already do, it’s the conversations around the style tiles with the client that are much different, and as I already mentioned earlier, students aren’t prepared to have conversations with the clients. For example, showing a style tile that conveys the concept of being funny to the client and asking if they don’t like it, don’t simply move away from the style tile, ask them why it’s not funny. Ask them how do they perceive funny. Arguably the shows Seinfeld and South Park are funny, but they are funny in almost entirely polar opposite ways. So through conversations with the client and rapidly creating style tiles an interactive design can quickly pinpoint the exact type of funny that the client perceives as the best fit for their organization.

There is another step in this process that overlaps many, and maybe isn’t even defined as a “step,” and that’s creating a design system. A design system is very different from a branding guide where you set the standard for logo use, typography and color pallet. The way design systems are being used in contemporary design are more like the robust Unigrid System Massimo Vignelli created for the National Park Service. Not only did this system consist of typography, logo use, color pallet, it also had a grid system, a series of cards (elements such as headline/text/image, historical fact charts, timelines, etc.), basically the Unigrid System was a series of ingredients that gave enough instruction to create any necessary visual design pieces while still remaining consistent across all the National Parks. Brad Frost formalized this process for the web and coined it Atomic Design. In Atomic Design every element on a page can be broken down into Atoms (a headline, an image, a form input, a button, a search box, etc.). Then those Atoms would be combined to create a Molecule.

A Molecule could be series of input atoms used to create an entire form used to collect credit card information, or a Molecule could be a combination of text, image and headline to form a preview of an item for sale on Amazon. In the next phase of Atomic Design, Molecules are combined to form Organisms. For example, a series of product previews is combined into a list of products for sale. Another example is a shipping address Molecule is combined with a billing address molecule, and a credit card information molecule to form a checkout form. And just like with the Unigrid System, when Atoms, Molecules, and Organisms are combined with a grid and visual identity guides you have a template that can be used to create individual web pages, then those pages are combined to form entire websites. When the Atomic Design approach is applied correctly, the client has a guide to not only build a website that meets their current needs, but is also future friendly and allows them to expand when necessary. Also, animations or micro interactions would be a part of this system.

Closing Remarks

So, those are the top five takeaways I got these past two years from conducting the interviews. I hope you find them as insightful and helpful for what you do in the classroom just as much as I did. Don’t forget that I’ll be on hiatus as I review the previous episodes and write more in-depth show notes for them for the website redesign. My hope is to get this done by early September, but I’ll keep you posted.