How do frontend and design interact with each other?

Let’s discuss how the disciplines of frontend development and design interact with each other. Even though they are completely different skillsets, having a little bit of knowledge from the other discipline can significantly improve your core abilities, as either a designer or a developer.

Full Transcript Below:

Cris:

Frontend development. So being essentially a frontend developer and then design and how those two merge.

Aaron:

Balance and white space and repetition and rhythm and all these visual patterns.

Cris:

It’s all the actual flow that the user is moving through and the way that they’re interacting and the feel and the vibe. Where do they kind of start to diverge a little bit? Where does frontend and design kind of diverge?

Cris:

So Aaron, we’re back in the studio here. We’re talking today about frontend development. So being essentially a frontend developer and then design and how those two merge. So there’s obviously going to be some differences, some interactions with them but let’s just kind of talk there.

Aaron:

Yeah.

Cris:

How would you define design and how would you define frontend development?

Aaron:

Mm-hmm (affirmative). Yeah. So, frontend is everything that encapsulates the code that you give to the client and that they run on their browser. So-

Cris:

Okay.

Aaron:

All the JavaScript for describing the UI, for describing the state of the app. But also down to the CSS and how the page looks and the HTML, the structure of the page and all that.

Cris:

So all the actual flow that the user is moving through and the way that they’re interacting and the feel and the vibe?

Aaron:

Yeah, yeah. Yeah.

Cris:

They talk user experience a lot when they’re talking frontend. Cool.

Aaron:

Yeah. Yeah.

Cris:

So now design, where does design come in?

Aaron:

Design is a whole separate industry predating computers and stuff. It goes back to traditional design, posters and billboards and commercials and business cards and all this. But what we’re interested in is that web design. So where those traditional principles and patterns apply to creating a web interface. So it’s things about balance and white space and repetition and rhythm and all these visual patterns, but applying those to a web user interface.

Cris:

Gotcha. So it’s the actual how does it look? And all the principles, and then we brought in front-end development to actually make it interactive.

Aaron:

Yeah.

Cris:

In a way, and tell a story in a different way then they were doing before obviously with magazines and all this sort of stuff.

Aaron:

Yeah.

Cris:

So that’s kind of I guess where obviously they interact with each other. Where do they kind of start to diverge a little bit? Where does front-end and design kind of diverge? Is this something that people can do both of these things? Should they only do one of them? What are your thoughts?

Aaron:

Yeah. I mean, as someone who does both of them-

Cris:

You’re like, I think no one should do both.

Aaron:

I would say don’t do it. No. I would say it’s definitely possible to do both, but there’s not a lot of crossover of skillset. It’s a whole other world to do design, but that being said there’s benefits to knowing both the design and the front-end because they do interact. Like you were saying, a designer comes up with the whole polished high fidelity design and hands it off to the developer.

Cris:

Mm-hmm (affirmative).

Aaron:

But then it’s the developer’s job to interpret that into web technology.

Cris:

And interpret the story, maybe of where that design was even trying to go?

Aaron:

Right.

Cris:

Yeah. So you started with design primarily and you have moved over the years now to being a front-end developer. So how do you feel that having that design background has helped you move into the frontend space?

Aaron:

Yeah, I think it does help a lot. In the ideal world the design is all done before development happens and then it’s wrapped up, put a bow on it and give it to the developers. But it’s not always the case, it doesn’t happen like that. So sometimes a client might give us one page that was designed and we have to extrapolate what every other page looks like based off that one page, which is a hard task for someone who’s not trained in design, doesn’t have a designers’ eye.

Cris:

Oh yeah, okay.

Aaron:

So I found for cases like that it’s really helpful, as I can see the designers’ intent and how that is supposed to be extrapolated to other pages.

Cris:

Interesting.

Aaron:

Or they might give us just the desktop designs and we have to extrapolate what the mobile design looks like based on that. So yeah, I find myself using those skills a lot even when I’m not designing, just in interpreting designs.

Cris:

That makes sense. So I mean obviously if you can have a design background and to move in the front end development, it seems to be beneficial to help with that overall story arc. But if you are someone that just is in the space, you started as a front end developer and that’s what you do. What are some kind of design aspects or best practices or things that would be worth looking into as a frontend developer to help the designers basically in a way?

Aaron:

Yeah. I think it’s one of the cases where a little bit goes a long way.

Cris:

Okay.

Aaron:

Obviously they’re separate fields, so you don’t need to master them both.

Cris:

Mm-hmm (affirmative).

Aaron:

But I would say when I look at a webpage and one thing that makes it immediately apparent that it was a developer and there was no design involved is the inconsistency in margin and padding and spacing.

Cris:

Oh, okay.

Aaron:

It’s just something that if you’re not looking really closely that a lot of developers will miss. So I would say as general advice, just pay attention to if there’s a 10 pixel spacing here and a 15 pixel spacing there. The eye will catch that even if you don’t really know what’s wrong. So just detail oriented I’d say and yeah just consistency goes a long way.

Cris:

Yeah. Well it’s interesting because for me personally when I think of design I think much more artistic and free flowing. So maybe from a front end development standpoint that’s part of it where like they’re not even thinking as far as the fact that like no design has clear principles and rules to it and the reason that it is appealing is because it actually follows these standards.

Aaron:

Yeah.

Cris:

So that’s interesting, I never really thought of that before. Do you have other final thoughts? Maybe let’s say someone that is looking to either get into design work or looking to get into being a frontend developer. I mean, are there things like cues that they could see to be like, hey listen, I have a designer’s eye or I have a frontend developer’s mindset. That could kind of push them in one of those directions. Red flags, if you don’t like math maybe you shouldn’t be a frontend developer or whatever.

Aaron:

Yeah.

Cris:

Yeah.

Aaron:

Yeah. I think yeah, well we kind of mentioned a couple times the designers eye. I think that a lot of times predates your skills in it, like it’s something you might be more naturally inclined to. You just look at something and know that it’s a little off, even if you can’t put your finger on it. If you’re a person who notices stuff like that, kind of go that direction of design and learn the skills to help you identify that thing that you can’t quite put your finger on.

Cris:

Okay.

Aaron:

Then on the frontend side, yeah I think just if you’re fascinated with the technology and the technology is the part of it that excites you then follow that. But yeah. Like I said before too, knowing a little bit of each side goes a long way.

Cris:

It’s going to help you be strong.

Aaron:

Yeah.

Cris:

On either one.

Aaron:

Yeah.

Cris:

Cool, I love it. Well, I appreciate this. I hope this gives some clarity to people that are in this space and as always I’m excited to have you the unicorn that knows both of these very well. So, yay Bixly.

Aaron:

Well, thanks for having me.

Cris:

You’re welcome.

Alexandra:

Thank you for joining us for this episode of Bixly Tech Tuesday. I hope you enjoyed some of that information about the interaction between the disciplines of frontend development and web design. How they interact with each other and how understanding a little bit from each side can really level up your skills either as a designer or as a frontend developer. Don’t forget to check out the description box down below, we have a ton of really helpful links for you guys including a link to a free custom software guide that just kind of gives you some tips and tricks and walks you through the process of planning out your own app idea. Now, if you feel like you’re ready to get started on maybe developing that app or even just seeing if Bixly might be the right fit for you, check out our website bixly.com. Right at the top of the homepage is a button that says, get my roadmap and what that allows you to do is actually up a free 60 minute meeting and consultation with Cris himself. He’ll give you all of his insight and feedback on your app idea, maybe even some estimates and just see if we’re the right fit for you. Until next time this has been an episode of Bixly Tech Tuesday.