I design with code | Shannon Wiedman | TEDxUMary

I design with code | Shannon Wiedman | TEDxUMary

Translator: lisa thompson
Reviewer: Peter van de Ven Hi. I’m Shannon, and I design with code. August 6, 1991,
was a big day for the world. Something was created on that day that would lead change
for the way we interact with each other, gather information,
and spend our free time. August 6, 1991, was the day that World Wide Web
inventor Tim Berners-Lee published the first website
from a lab in the Swiss Alps. The first website was simple, and it was created as a way to share
scientific papers across the world. In 1991, I would have never known that someday I’d be designing
for the World Wide Web that Tim invented. In 1991, I was seven years old,
and I had a really cool haircut. (Laughter) I haven’t cut my hair since. (Laughter) In 1991, some of you
probably weren’t even born yet, and what’s cool about that fact: you grew up with the internet. When you were seven years old,
you could have said, “Hey, when I grow up,
I want to design websites.” If I would have said that
to my parents, they would have been like, “Website?
Like, what does that word even mean?” I did grow up wanting
to be an artist, though. I love to color. I love coloring books, crayons, drawing,
markers, all that sort of stuff, and a lot of kids do. But my love for creating
never left me as I grew older. And when I was younger,
I also loved the computer. I was fortunate enough to have a dad who
loved having the latest technology around, so we always had a computer, growing up. I’d use the computer to create art
in programs like Paint and Kid Pix, and I’d use the computer
to play games all the time, and they came on these giant things
called floppy disks, and it was awesome. (Laughter) Art stuck with me as I got older. In high school, I found
a love for colored pencils, and I went through a colorful bird phase that landed me an art scholarship
to the local college for fine art. My year as a fine artist, I didn’t quite know what I wanted to be
when I grew up, I found out. Like, I just didn’t know
if it was right for me. I mean, I was a fine artist.
Like, I was fine. I wasn’t going to be
the next Picasso or van Gogh. (Laughter) But I loved art, and I loved to create, but I just didn’t see
a future for myself as a fine artist. I wanted something where I could maybe
use my creative talents to solve problems. I needed more focus. And it turns out there’s a name for that: a designer. So I quickly traded in my pencil and paper
for a MacBook and a mouse, I switched colleges, and I went from a fine art student
to a graphic design student. And I loved it; I knew right away
that this was where I belonged. I thought if I could find a career
doing this every day, I’d never have to work a day in my life. So I graduated college,
and I got a job at an agency, and my job was to design websites;
I was a web designer. That can mean many different things, so I’ll explain to you, kind of,
how it worked at the agency. So I’d be provided
with a set of wireframes, and these are basically,
like, blueprints for a website, similar to blueprints for a house. They’ll decide the overall
structure of the website, what should be on the page
and sort of where it’ll go. And I would take those wireframes,
and I would create designs for them based on a company’s brand,
fonts, colors, all that sort of stuff. A lot of people just would tell me, like,
“You’re just making it pretty” or “You just made it pretty,” but design is much more
than just making things pretty. It’s about creating something
that is beautiful and functional. It’s a lot more
than just colors and fonts. Yes, those are important. But creating a delightful experience
for the end user of a website is also part of our job. Basically, after I was given
those wireframes, I’d create my designs in Photoshop. So my designs were static, meaning you wouldn’t quite
be able to interact with them; buttons would have styles
but you couldn’t click them. All of that interactivity would come later when that static web design
was turned into code, which would be the next step. So, when I was finished
with my designs in Photoshop, I would hand those files over to
a developer to make that website function, and they would take that static file, and they would turn it
into a working website. And they basically were translating
that design into code. And code, I mean,
it just seemed really complicated. I’d look at, like,
a screen of code and be, like, “What? Like, that’s gibberish.
That’s too complicated. That’s not for me. No, no, no. I’m intimidated by this.” But I had to get over my intimidation
because I noticed a problem. Sometimes my websites wouldn’t quite
turn out how they had looked in Photoshop after they had gone through
the coding process. Little design details
would get lost in the cracks. And for good reason too. I mean, I’m designing
something in Photoshop. It’s very flat. It’s not interactive. And then they’re turning it into code. And I’m not a coder, so I don’t quite know
all the things about the language, so I might be designing things that aren’t quite possible
when they get into development. And then you’ve got to think
about mobile devices and so on. So as a designer, being able
to speak the language of code became something
that I needed to be able to do because I needed to try to solve some
of these problems that were happening. And I started to speak
the language of code, and it helped me out a little bit, but I needed to take it
a step further, I decided, and I needed to learn code. Learning code was going to help me
make this process smoother. It was going to help me save those little design details
from falling through the cracks. So, starting code, I just
started asking a ton of questions. I was, like, “What languages do I need to learn?”
“How am I going to learn them?” “Can I do this at the job that I’m at because there are already
people that do this?” And “Should I even be doing this?”
was my last question. I was feeling pushback from people. Like, “A designer that wants to code?
You’re crazy. It’s a different side of the brain.
Stick with design. You’ll hate it.” And I sort of felt like
I should just stick to design, and just I was being told that my designs weren’t going to be
pixel perfect in the end. Well, that made me upset,
and I wasn’t going to settle for that. So I was, like,
“Ah, I’m going to learn code.” So, I thought about how design
and development could work together, not versus each other. We all want to create
the best product in the end, so how can we work together
to make the best things possible? And how can I help everyone
understand that design matters; even down to the pixel,
the details matter? So I started learning code. And the languages of HTML and CSS
quickly became my two best friends. After I started learning these languages,
I was, like, how come nobody told me? Like, these, to me,
are a designer’s language, and I wish I would have
known that a long time ago. CSS, as a language,
especially gets me really excited. It’s a language that basically tells elements how
they’re going to be displayed on the page: sizes, colors, fonts, things that are all
directly related to design. And when I got into coding, I also realized, like,
it was nothing to be intimidated by. Yeah, it’s hard sometimes,
but also, like, totally fun. (Laughter) So it was great. And going from someone
who just created these static designs to actually someone who coded designs was a really different
change of pace for me, but it was one that I needed to do to be able to create
the best websites possible. I realized that pretty quick. And I love using both sides of my brain. Not like I don’t normally, but – (Laughter) Like, I get to be creative with the design and then on the other hand, I get to be
technical with the coding side, which is more black-and-white,
like, does it work or doesn’t it work and fix it. It’s a great balance. And most importantly,
I became a better designer because learning the language of code
helped me create better websites because I could design something
and while I was designing it, think about how I was actually
going to code it in the next step. So it was a really great idea
to start to learn code. So, some designers still think
I’m crazy for loving to code. I understand it’s not for everyone, but it’s a skill that is
very much needed out there. In 2020, there will be 1.4 million jobs
in a computing-related field. And to know that there’s a place
for people who love to design and with code, it’s awesome. There’s tons of jobs for you out there. There’s many names
for people who do what I do: Front-end Web Developers, Designers,
Web Designers, UI Designers, User Experience Designers,
all that sort of stuff, and you could probably ask five different people
with one of these titles what they do, and they’d say something
completely different. So it just depends on where you work
and how you define these roles. But really, the titles don’t matter. The fact that designers
can learn code matters. The fact that there’s a language out there that you can basically use to tell
a website what to look like matters. Code’s just another language, another language that many of us
are already speaking, and I think you
should learn to speak it too. You won’t regret it. I’m Shannon, and I design with code. Thank you. (Applause) Host: Thank you, Shannon. Quick question.
You had this Girls Develop It thing? Talk a little bit more about that. Shannon Wiedman: Yeah,
so Girl Develop It, actually, this is a national organization
that started in 2010, and me and my coleader, Megan,
started a chapter of it in Fargo in 2014, basically, when we were both
learning to code. We wanted a class to go to because we were searching the internet
for how to do this. So, Girl Develop It provides classes
for women that want to learn coding, and we started the chapter in Fargo, and we’ve been running that
for about a year and a half. It’s been pretty cool. So … Host: Talk about the culture
of CoSchedule a little bit. We have some CoScheduler people here. SW: I’d better be careful what I say. (Laughter) No, it’s really great. You know, having the opportunity to be designing for an application
like CoSchedule is awesome, and given the opportunity
to do what I love every day with being creative
in design and coding – they actually gave me
the opportunity to design and code; whereas, I didn’t have that before. So it’s been really awesome
to find that spot. Host: So what’s the next thing
in Shannon’s life? SW: Let’s see … Lately, I’ve had this crazy idea
that I want to start a code school, so I don’t know. I don’t know what’s going to happen
with that, but it’s crazy. Host: It’s in the cloud.
SW: Yeah. Host: Could be in the clouds.
SW: It’s in the cloud somewhere. Host: Everybody, Shannon. Thank you. SW: Thank you. (Applause)


Leave a Reply

Your email address will not be published.