I remember back when I designed my first real website. I opened photoshop, set my guides to a width of 940 and did whatever I wanted within those guides. I understood a little bit about development, but design was my focus. I remember being completely excited when I was told that I wasn’t going to have to do any coding. All I would be doing is creating website designs in Photoshop and handing them off to a developer. Life was so easy.
It has taken me a few years and a large portion of website designs, but now I know that web designers must learn code.
Here at Todaymade, web design isn’t just creating the pretty pictures, it’s about knowing how sites will function. We create the best online experiences we can and we do this through design and development – not design then development.
Web design isn’t just creating the pretty pictures, it’s about knowing how sites will function.
Click To Tweet - Powered By CoSchedule
So why is learning code so important? I’m not telling you that you need to know all of the ins and outs of making a fully functional website. I’m just telling you that you need to have at least a basic understanding of HTML and CSS when you design for the web.
Here’s why
I made all of the mistakes. Yes, that is true – as a designer that didn’t know a lot of code I sold some things that weren’t possible to do when it came down to development. In my defense the mistakes I made I only made once – and now I am telling you about them in hopes you won’t make them too.
Mistake #1 – What the FONT?!
I sold a font that wasn’t a web font. I starting designing sites when there was no such thing as google fonts or font squirrel. I was given a list of 10 fonts I was able to use. As a designer this was terrible. So I would create headline fonts that were fancy, because I had seen it done on other websites. Little did I know that the developer had to make each one of those headlines into an image because the font was not available for the web. It didn’t take me long to know I had to stick with my small list of 10 fonts – I didn’t want to complicate development… or get beat up by a developer.
The 10 dreaded web fonts of years past.
This problem has evolved over the years. Now there are tons of web fonts that are available for use. Recently, I have made the mistake of assuming most fonts are available for web and if they aren’t the client will happily pay for an online license. This isn’t always the case. We all know what happens when we assume… your font will default to arial… yikes.
Solution: Start small. The first code that I wrote was a style guide that went along with my photoshop website design files. I coded simple H1, H2, H3 tags, colors and quote styles. This was a great asset to the developer. It was also a check point on my part to make sure my fonts were good to go and all of my headline styles were accounted for.
Mistake #2 – Desktop. Tablet. Mobile.
Two words. Responsive Design. “Hey Shannon, this desktop site looks great but how does it look on mobile?” I only got that question once, before I knew that I needed to start from the ground up when it came to design – mobile first. There was one time that I remember where we had the whole site done and developed and the clients next question was – what does this look like on mobile? It is a lot easier to work up than it is to work backwards. My solution to this was to start designing with a responsive grid. This helps a lot on the design side of things, but still makes it tough to see how things are going to adapt to different devices when you are working in Photoshop.
Solution: Learn to develop a responsive website. It can be as simple as you want it to be. The first site I did was creating an online resume for myself. I started with a template and dug into the code to see how it worked.
Mistake #3 – That won’t work in IE6…7…8…9
I don’t think I’m the mistake here I think something else is, either way it was a problem. I had to make sure the websites I was designing were fully functional across all browsers and devices. Being just a designer working in Photoshop, I didn’t know a lot of the problems that could arise across browsers and would find them out too late.
Solution: You might not always have the answer to this problem but seek out experienced developers for their advice. Make sure you check that all of the design features and functions you are selling within your design are supported by all browsers.
My biggest mistake
Assuming that my designs were going to turn out exactly the way I designed them after I handed over my Photoshop files to development.
There have been times I have been disappointed with the launch of a site, because a couple items were a few pixels off or the font didn’t look quite right. You will never know of some of these issues unless you start moving your designs into code. Not all developers are designers and can see things the way you do. I don’t know how many times I said “could you move that a couple pixels to the right?” and got laughed at. It might seem funny but design is important and every detail counts. Great design LIVES in the details.
This is why I code
I know that my designs are going to turn out just how I had planned. I can pay special attention to design within the code. I know what things aren’t possible and what I can do to make the site function better. I get to design THROUGH code. Code isn’t just for developers, it is for designers as well and it’s about time we start taking advantage of it.
Code isn't just for developers. Designers can design through code.
Click To Tweet - Powered By CoSchedule
Where do you start?
I started by getting myself a book on HTML and CSS and just played around in a free text editor called Text Wrangler. I also visited W3 Schools on a daily basis. If there is something you want to learn, type it into Google and you will be amazed with all of the coding resources that you will find. If you get stuck, talk to a developer and have them help you along. You’ll find that having a developer to troubleshoot with when you run into issues is priceless, so find a developer and buddy up.
Still not convinced? Check this out.
Do you think it's beneficial for designers to learn code?