Design
Build the boat and make it look good too
That’s what the life of a front-end web developer often entails, so how exactly do they connect with each other? I’ll start with the process esteemed...
LOOK MA, NO PHOTOSHOP!
For most of my graphic design career, Adobe’s wonderful line of design software has made it possible for me to create anything I want for a variety of purposes. From print to web graphics, Photoshop and Illustrator have always been my go-to applications whenever I wanted to make something that …
Adam Temple
Apr 3, 2013
For most of my graphic design career, Adobe’s wonderful line of design software has made it possible for me to create anything I want for a variety of purposes. From print to web graphics, Photoshop and Illustrator have always been my go-to applications whenever I wanted to make something that was guaranteed to look great across any medium.
It might surprise you to know then that I’ve begun to use a humble text editor for most of my recent design work. “Wait, what…?” you might protest. Why on earth would I ditch these other powerful programs for writing lines code instead?
Let me back up a little. During my time here at Bixly, whenever I’ve created graphics for websites it usually involves making carefully hand-crafted images that are then sliced up and given to the developer to implement into his/her code. Afterwards, there are occasions when something needs to be tweaked or shifted and the developer will usually come back to me with some changes that need to happen that only I can fix. You can imagine how that would get tedious and time-consuming for both the developer and myself.
I already had a healthy knowledge of the HTML and CSS coding languages and how they work together, so looking into how to style and design things using the same things was relatively easy. I studied up on how to use CSS3 to design user interface elements and started putting it to practice.
I was blown away by what I could make.
Not only was I able to add soft shadows, highlights, gradients, rounded corners and borders to my designs but I was able to piece objects together to make even MORE complex illustrations. I had no idea this was possible and once I started coding and practicing with what I would otherwise create in Photoshop, a few things became apparent to me:
Code is flexibleIt is admittedly a pain to resize and tweak images in Photoshop to make it work just right for my designs. Not only is this EASY to do in code but it is also easier for a developer to understand and change himself if he so chooses. Why continually save out new images when a simple tweak to some code fixes the problem without duplication of files and work?
Designs are easily resizableHave you ever needed to get closer to some text or zoom in on a particular part of a website for a closer look? Aesthetically it can be a painful experience as the images around or behind the text you want to read loose focus and become pixelated and ugly. Not so with coded designs! Graphics are mathematically generated and can be infinitely blown up or shrunk down in the browser without ANY degradation in quality and smoothness.
The webpage loads fasterIt typically takes more time and effort for a browser to load a webpage with lots of images making up the buttons, the header, the backgrounds, etc. Well-written coded designs load MUCH faster! No more waiting painfully for a webpage to render everything it needs to load — the experience for the user is much better the fewer the images involved.
At this point, coding is proving to be more than effective and useful for making the web a better-looking place. Not only that, but it’s been surprisingly more enjoyable for me to use than tediously pushing pixels in Photoshop (call me crazy). I hope to continue to increase my skills in this area and be a more effective designer for the web.