https://publication.design.systems/how-to-become-a-designer-who-codes-52ae97f60d68?gi=81198e6b14b3
Open in app
Sign up
Sign In
[ ]
Write
Sign up
Sign In
[1]
Design Systems
Published in
Design Systems
Meagan Fisher
Meagan Fisher
Follow
Feb 20, 2019
*
14 min read
*
Member-only
Save
How to become a "Designer Who Codes"
The stages I went through on my path to learning front-end
development
Quick note: "coding" in this article is my shorthand phrase for
"learning enough HTML and CSS to be able to create the basic
front-end for the websites you design." Many developers will probably
see this as dipping the smallest of pinky toes into "coding," and
that's fine with me. [?]
Being a Designer Who Codes(tm) is a pretty awesome superpower. Not only
can you design pictures of gorgeous websites, but you can make them
exist on the real internet! (Because as much as I love them, Dribbble
shots are not the real internet). It's a bit like being a mad
scientist; you can bring dead mockups to life through your own
determination and genius.
Me every time I build a website
If it's not your thing, that's fine too! I'm not really trying to
convince you to do it, because honestly the fact that many designers
still don't know how to code gives me a big competitive advantage
(just as other designers have strengths I don't, which gives them
advantages. There's room for everyone! [?])
I will tell you why and how I've learned to build websites, if you're
interested.
I code because I love it, not just because it makes me a better
designer
I could write an entire article about all the ways learning HTML &
CSS will improve your career, but luckily for us Andrew has already
written a glorious article on that very subject. So instead, I'll
just tell you why I love it.
My absolute favorite thing about writing code -- and the reason I
stuck with it through the initial learning curve-- is that there is
pretty much always a right answer when it comes to code. Your code
either works or it doesn't. This is not the case with almost anything
else in life. When you write an essay, paint a picture, or design a
website, you never really know if you did it "right."
With code, there is a solution. You want to replicate the little
boxes you drew in Sketch in your browser? There is a concrete set of
words you can type in your text editor to do that.
As crazy and overwhelming as it sounds before you start, this is
what front-end development boils down to: knowing what words to
type in a text editor to make shapes appear the right way in a
browser.
Coming from the subjective world of design, I relish the
predictability and certainty of writing code. With development there
are rules anyone can learn, and once you know them, there's no limit
to what you can make.
Okay, but how do I begin?
Chances are if you're just starting out with coding, you are hesitant
to dive in because it feels like a big monumental undertaking.
Here's the thing: you can start as small as you want. There are
levels to being a developer, and even journeying into the very
beginning stage will give you a big leg up. Start with the absolute
basics of HTML and CSS -- the fundamentals of which haven't changed in
the 10+ years since I wrote my first tag.
Don't get overwhelmed by concepts like Internet Explorer, CSS3,
responsive design, Javascript, Wordpress integration, animation,
SVGs, etc. when you're just beginning. Ignore the things you hear
experienced front-end developers talk about on Twitter, such as
different layout methods or React or cross-browser compatibility
(these things will eventually make sense to you after you've been
doing it for awhile, but for now, they'll just stress you out).
When you're starting out, your code doesn't need to be perfect.
If you can learn how to style boxes and text in a browser, you
will be light years ahead of many designers working today.
And here's a very cool thing I found: if you want to keep improving
or if you get stuck, as a designer there are probably developers ALL
AROUND YOU. In my experience, developers are so excited that a
designer wants to better understand what they do that they will
patiently and enthusiastically answer questions or give you feedback
on your code anytime you ask.
When I learned to build websites, there were 5 stages I went through
as I got more comfortable with code. There are about 3,782 more
stages after this which I've yet to ascend to, and for now, I'm fine
with that. You can take your knowledge as far as your curiosity or
willpower will get you.
1. Get comfortable with the naked internet (sorry, not THAT naked
internet)
Have you ever seen the internet naked -- stripped of all the fancy
clothes and accessories we designers layer over the content to
enhance it?
If you want to start learning to code your designs, don't worry about
CSS (the style part) at first. Begin by appreciating the elegance of
raw, unstyled HTML. Get comfortable with writing it. To see what it
looks like, explore some websites with the CSS and images turned off
(google "Turn off CSS + [your browser name]" to learn how to do this)
. See what the internet looks like without a designer's influence.
CSS (there's a hint in the name : Cascading Style Sheets) is the
realm of the designer -- it's where color, typography, and layout come
into play. But underneath it all is HTML, and you have to appreciate
it to understand what really makes the internet tick. To begin, get
comfortable understanding and writing HTML. Learn how to put content
on a page, and know when and why you'd use