In the past few month one of our graphic designers at Blayzer has taken on the task of improving her front end programming skills, focused on HTML and CSS. We talked with Liz about her experiences as she delved into programming. During our discussion, Liz shared some tips for other designers interested in learning more about programming, as well as some resources to help them along the way.
What is your background?
I graduated college with a Bachelors degree in illustration with an emphasis in animation. I took a lot of graphic design classes as well. During my 4 years in school, I only ever had one project where I was required to design a website. Our teachers didn’t even grade it; they just wanted us to have some knowledge in web design. After I graduated I started looking for job opportunities in either illustration or graphic design but found it impossible. Every place that was specifically print related graphic design wanted designers with minimum 3+ years experience and required the applicant to be familiar with website design and front end coding (even though this was supposed to be a print only job!). I kind of felt my stomach drop like I should know how to do all this and it never came up in college at all.
What made you start to learn more programming skills?
I realized that this was a major trend in the industry. Designers aren’t expected to just be designers anymore, and I wasn’t the only one dealing with this same problem.
I was missing a huge part of my education. If all these jobs I was applying for expected me to already know this stuff, then why did I never learn any of this in college? I felt really behind and unprepared for the real world, and I had to take matters into my own hands.
How did you get started? What were the first things you did?
My first job in website design all I had to do was design the websites but not program. Later I got a freelance job where my boss required that I finally learn some front end coding. He recommended that I sign-up for teamtreehouse.com and they taught me step by step how to front-end code in WordPress. I still think it’s easier to learn when you have a teacher helping you and to show you when you are doing something wrong, but it was a good tool to learn the basics. Once I started at Blayzer, my boss wanted me to be able to program an actual website. He had me take an online course on how to use Twitter Bootstap which I liked a lot. A lot of my previous training kicked in and combined with this new information, I was beginning to feel more comfortable programming. A lot of learning front end coding is to design something and then research how to get the desired effect in programming. The best part was my boss was able to help me if I was having a really hard time with a project because he is also a programmer.
What advice would you give other designers who are just getting into programming?
I would say that the online tutorials are a great source and are worth paying for if you don’t have the time or money for a formal college education. Take a broad introductory course in front-end coding then find another course that is specific to whatever you are going to program in (Bootstrap, WordPress etc.). For me bootstrap made a lot of sense, and their website is really easy to follow, which is super important to me. If you can find a mentor to help keep you on track or steer you in the right direction when you are stuck on a problem, that is also really helpful, but the way you learn the fastest I’ve found is being able to problem solve for yourself. I’m typing html/css questions into Google constantly. Also, never stop learning and researching, web design is constantly evolving 2 years ago responsive design was so new but now if your site isn’t responsive you are way behind. I’ve just started learning how to use LESS instead of CSS. It’s tricky, but once I get the hang of it I know it will really help me as a programmer.
How have the skills you’ve learned helped you as a designer?
Now that I’ve learned even more about programming and website design I think of design differently. Instead of making a website look good first, functionality second, I try to do both things at the same time. How will this look responsive? Is content past the fold on the page? Is this font easy to read on a monitor? Will they look at this site on a mobile device? When I design logos I always ask if they are making a website if so a horizontal logo typically works best. I try to ask all the programming questions as I ‘m designing in order to make the best site for my client.
What resources have been most useful to you?
Generators are my favorite links because they make it easier to create specific effects, For example, if I want to add a gradient but I want to test how different colors would work, I can use my eyedropper and pick a color, see how they look in real time, and then the website generates code that is cross browser compatible! These are two of my favorites:
Ultimate CSS Gradient Generator
I also like sites that compile a lot of info that otherwise you have to search everywhere to find, for instance this site that has all the social media image sizes in one place:
Constant Contact Social Media Image Guide
Media Queries for Standard Devices
This site is the bible for CSS questions:
A lot of times it isn’t until I’ve already designed something that I have to go back and figure out how to program it. It can be really frustrating at times because with my design background I don’t have the professional training other programmers have, which sometimes makes it difficult for me to interpret the jargon they use in the instructions or they might not go into detail on things they assume you already know how to do. I may find a website that has the answer I need but not be able to understand the whole process or how to apply it to my problem. The resources I like the most are ones that are written from a design perspective and break down the answer step by step in layman’s terms. That’s why I want to create some resources that might help other designers turned programmers who are experiencing the same learning curve as I am.
Liz found many great learning resources as she was studying, but she also found areas where there were gaps or instructions weren’t quite thorough enough for a beginner. To help others who are starting out in programming, Liz will be putting together some instructional guides and videos on things like basics of HTML and CSS, getting started with LESS, and using Bootstrap. Check back often for tips in these areas and more!
Interested in more regular design and programming updates? Follow Liz on Twitter at @Liz_Blayzer!
