How I Approach Design as a Front-End Developer

Regardless of your background, passion and practice can broaden anyone’s ability to design.

Blueprint
Blueprint
3 min readFeb 25, 2016

--

By Eric Liang

Growing up, I noticed that I was a very visually-oriented learner. I had always enjoyed things like photography and film. My first real design experience involved making graphics and posters for the clubs I was involved with in high school.

During my first year at UC Berkeley, I took a student-run class called the Web Design Decal, and that’s really where my technical and design sides merged. Now, I enjoy the entire design and front-end development process, and I love getting to work on projects that allow me to do both.

More broadly, what excites me most about design is the rapid pace that the field’s been growing at. Less than 10 years ago, there was absolutely no design presence at many established firms like Google; tech companies were evaluated on primarily their engineering talent. Today, you can see such an improvement, with many startups — like Airbnb, Slack, and Medium being defined and lauded for their good design process.

Overcoming Early Challenges

For someone getting interested in design, the best thing to do is just to practice as much as you can. There’s a really good video on the topic here, but here’s the gist:

A lot of people get started in design because they have a good eye or think they have good taste, but the work they produce in the first few years doesn’t stand up to their own scrutiny. In the beginning, everything you make just doesn’t seem good enough.

I’ve definitely felt this way and felt overshadowed by my peers whenever I compared my work with theirs. This difficulty as a beginner exists because your skills don’t quite match up to your taste. The only real way to get past this hurdle is to simply practice all the time.

Initial sketches for workflows through Gradescope

See a website that’s not designed well? Brainstorm and prototype some solutions. Hate the way that you interact through an app? Design a better experience.

It’s important to always be thinking of new ways to solve existing problems. By doing so, you’ll start to develop your design skills and improve on them.

Part of the design for Gradescope’s improved admin dashboard

Personal Design Principles

It’s easy to equate good aesthetics with good design. Visual design is definitely crucial, because it often provides the first impression that can either engage or distract the user.

But having something look good is only a small part of what you should consider. It’s easy to say things like “This color is too bright” or “This looks too crowded”, but any changes must be justified. When I design, I spend a good deal of time on the visuals, but they should be well-reasoned and shouldn’t detract from what’s more important — experience and interaction.

Engineering and design work with different goals and constraints. Software engineers usually have very specific goals to reach, whereas design goals can be a lot more open and ambiguous. It’s also challenging to think in terms of the audience and not as the engineer — I still struggle with this a lot!

When you’re working as an engineer, it’s really easy to make assumptions on how the user will interact with or perceive your product. When I work on front-end development, I try to go through a couple of iterations and user testing sessions before diving deep into the code. That way, the changes and features I add are made with the user in mind — which is really what design is all about.

Eric Liang studies Computer Science at UC Berkeley. Check out his Medium and his website to see some of his design work.

To keep up to date with more thought leadership about tech and social impact, follow us on Facebook and sign up for our community newsletter!

--

--

Blueprint
Blueprint

A team of students dedicated to building beautiful software for nonprofits and bridging the gap between technology and social good. www.calblueprint.org