Bootstrap Creator Mark Otto Speaks at Coding Dojo

Coding Dojo provides an immersive 12-week onsite and online coding bootcamp for aspiring web developers in Seattle and Silicon Valley. The team recently hosted a Tech Talk for Coding Dojo students at their Silicon Valley bootcamp, featuring Mark Otto and Connor Sears, formerly of Zurb, Twitter, and now GitHub. Mark co-developed the open source front-end framework Bootstrap (any coding bootcamp graduate will be familiar with and grateful for Mark’s work)! Mark and Connor talked about their respective backgrounds and the pathways they took to become the designers they are today, their most gratifying projects over the years, and more.

 

Was there a specific time when you knew you wanted to be a designer and that you were good at it?

MO: My dad has been a data programmer in bank services for 40 years, so we always had computers around us. My brothers and I all know how to take apart and put together a computer. I was always into the hardware aspect, but you could only buy so many motherboards in middle school before it got boring. So I started to spend a lot of time on the internet, not only downloading music illegally, but also on forums like HardwareGeeks. I downloaded a copy of Photoshop 6, went through tutorials for text effects and happened upon DeviantArt, where I made horrible, angsty teenage wallpapers. From there, I was starting to make icons, porting those over into Windows, and learning HTML and CSS. I cracked open Notepad and GeoCities- I remember copy and pasting a snippet of CSS and it changed the link color for the text when the link was visited. That’s when I was sold!

I still write HTML/CSS from scratch now- that’s how I fell in love with it. Two years later, I was being paid to do it.

 

CS: I thought I wanted to work in video production, so I was working in After Effects, doing motion graphics (like making lightsabers). My two friends were running a company called HitSense, and they told me I could do similar things on the web using Flash. A graphic designer at HitSense was designing beautiful websites at the time. They let me take a stab at building a homepage for a client using her Photoshop files as a guide; the client gave it the thumbs up; I was thrown into the deep-end, and then over time, those skills became more solidified. Growing up, I also remember having an innate ability to tell what looked good and what looked local and cheap.

After college, I emailed Zurb about a designer job, got a reply within 10 minutes, and was hired quickly. Three weeks later, I was moving to California. At Zurb, we were learning specific skills- how to design, how to deliver on projects etc. Those lessons enabled the rest of my career. It was like a 2 ½ year bootcamp!

 

Is it possible to tell if someone has the raw potential to be a programmer or designer?

CS: I think so. There is a level of aptitude when you talk to someone; the scrappiness is evident. It’s not the end result that you’re looking at, like beautiful design or great code. That’s an obvious indicator; it’s all the other factors. Is somebody willing to do what it takes to get something done? If it’s in a hacky way, can they learn from that process? It’s being able to talk to somebody and understand how they think about design and how they think about doing a task, figuring out and dissecting a problem down to its core bits and solving it. That’s a lot of what coding is, right?

Even when I interview somebody for a senior-level developer or designer position, I still go back to how well they solve problems. I ask about some problems they’ve solved and how they went about it. The way someone articulates that problem-solving is how I know they’re going to be really good.

 

MO: I think we approach design a little bit differently. The term design can cover so many things: graphic design, visual design etc. There’s the most frequently used quote: “Design is how it works,” from Steve Jobs. For me though, design is pretty systemic. Being able to look at a series of things and think of them together. Working with individual pieces, but keeping in mind the larger picture and taking a holistic approach to things is important. The other part too is having a lot of passion for wanting to build something and solve a problem. You can really glean those skills pretty easily. I’m here because I just wanted to spend all of my time making things on the internet and that’s all that I do.

 

 

What are some of the roles you can have as a designer?

CS: These terms are kind of dumb. We just started calling ourselves designers. Graphic Designers are usually very visually focused. Graphic design is about communication, so posters, billboards, album design for music, etc. Some people work with web design and call themselves graphic designers, which is fine because it’s all sort of loose terminology.

The term Product Designer basically came out of Facebook. They were the ones that first started embracing that term. Product Design is just people thinking about a new product and how it works in a cohesive and holistic way and how that affects the target market. They’re thinking about how the product works and how it’s built.

An Interaction Designer is more focused on workflows. “What happens when I click this button?” That includes workflows and whiteboard sketches.

 

MO: Then you have roles like User Experience and User Interface design, UX/UI. That one by far is the most prolific term and by far the weirdest for me. I call myself an Experience Designer, not a user experience designer. As evidenced by Bootstrap, I care a lot about building systems and seeing how they come together. I love doing the wireframes, the workflow, seeing how a user, an individual or a group of people interact with your product and how you can poke and prod them to get them to do what you want.

When we talk about User Experience, a lot of that can be more focused on wanting your users to be happy. But of course you want them to be happy! You don’t want them to be pissed off. You’ve seen Office Space, with the example of the PC load letter. You don’t want people throwing their phones at the ground or taking a baseball bat to them in an open field. That’s not fun. In my mind, those terms don’t really have that much value.

 

Is it possible to be only a web developer, UX, UI, visual, or graphic designer these days?

MO: If you’re a designer you make things work. You take a problem and you solve it, working within constraints. There is a spectrum of design and development, and you can be at any point on that spectrum: a UX designer, UI designer, visual designer, graphic designer, a web developer or a product designer. I’m a product designer, but My title at GitHub is actually Lead Front End Engineer.

 

CS: At GitHub when we’re hiring designers, I don’t think we’ve ever said, “We need a UX designer, you’re not going to code and you’re not going to do visual design.” We need designers who are also familiar with aspects of other job roles titles. You need to think about that experience and how the flow of someone using your product is going to be and what their expectations are and delivering on their expectations on that workflow. You need to be able to visually work on it and even code a bit of that work.

 

What do you look for when hiring a designer?

MO: There are three areas of focus that I look for when hiring designers. There’s code, which I don’t expect designers to be experts at. You need to be able to work with code and be able to work with a developer and at least have some shared understanding of what you’re building with or what someone else is going to be building. Secondly, you need to have those sharp visual skills and be able to make something look and feel good and compelling. You need to design for a mood or an emotion. The final element is critical thinking about design. How you’re able to talk about and taking apart a problem.

At GitHub now, we do have product designers. That’s the main role for anyone working on github.com or its mobile apps or its desktop apps. We also have a creative team, made of full-time illustrators and animators who build marketing materials for us.

 

Could you take us through a project that you’ve worked on in the past years that gave you the most satisfaction?

MO: Conor and I spent 6 months together at Twitter in 2011, starting in June. The project was called New New Twitter. Internally it was just called Twitter1, or T1 for short. This was when Jack came back to the company after being out for a while and he was like, “Time to put my stamp on the product again.” A handful of us engineers and designers were pulled aside and given one month to design Twitter from scratch with these three things in mind: a home timeline, the @ sign, and the # sign. We spent a month in this tiny room called the Goldeneye Conference Room at the old office.

 

MO: We spent a month there just making Photoshop documents of the iPhone app and then the desktop. We started with mobile first and had a blast doing it. I took over the @ tab. Connor was working on everything discover and hashtag and eventually profiles. After a month, our manager said we needed to start coding the design and work on a prototype. Our reaction was, “Cool. I love prototypes, let’s throw away the code.” But our manager was like, “No, this is going straight to production.” A week later we have a shell of a prototype written in PHP because the Rails code base for Twitter was horrible to deal with as a designer without 3 years of context leading up to it. For the next 5 months, all we did was iterate on designs and Photoshop documents and build code. Maybe we have different reasons why we love this project so much. I love this project so much because I spent a month in Photoshop and then I went right to code and I got to make this idea come to reality. After that we got out of that little room and we started working with more people because you can’t make those decisions early on with so many people. I sat with a bunch of engineers and the designers took over the HTML and CSS. That is a theme that’s happened in the last 10 years- designers have gotten really interested in CSS because you can make an art out of it. Just look at the Homer Simpson in CSS or the Coke can in CSS. It’s interesting to be able to solve problems and designers have a unique ability to approach those things.

We leapfrogged our engineers, who were stuck working with a legacy code base trying to figure out how to adapt all this new design to it. We learned so much and we screwed up so many things early on. We were working in a big cyclical workflow with the developers. The designers were coding the front-end of the product and the developers were coding the back-end of the product. A couple of the designers were back in Photoshop trying to figure out what NewNewTwitter was going to actually look like it- the textures and the general aesthetics and stuff like that. There were three different stages and teams working on one idea.

In 6 months redesigning a massive service like this, I worked my ass off and I had so much fun doing it. I slept very little and we were in the office very late. But it was just so much fun to be able to work at that speed at those different levels and make those decisions and show that designing a browser, building a browser can be so damn useful, so powerful. That was by far my number one project.

 

CS: Same! I learned the biggest lesson in this cyclical workflow with the developers: We realized that while we’re in our little room drawing pictures of screens of the iPhone app and Android app. But you’re actually not seeing the bigger picture. Once you start to code, you realize that one of those updates can take another thousand lines of code. The system becomes way more clear in code.

 

Thanks so much to Mark, Conor, and the team at Coding Dojo for sharing this excellent talk with us! Our three takeaways from this Tech Talk?

1. Young designers should follow their intuition when it comes to web design- if you have an opinion about what looks high-quality vs. low-quality (like Conor did from a young age), see where that can take you!
2. Rarely will you operate in tech as a silo; designers work with web developers, product managers, and other stakeholders on every project. Getting used to working on a product with others in a cyclical workflow is important, as we learned with the NewNewTwitter.
3. These days, the word “Designer” encompasses so many job descriptions. From Graphic Designer to Product Designer to UX/UI Design, be sure you know where you fit on the spectrum of design and expect to use skills from other roles!

Want to learn more about Coding Dojo? Check out their School Page on Course Report or the Coding Dojo website here!