- Have you ever experienced a situation where you
finish your web design, you hand it off to a front end
developer to build, they code it, send it back to you,
and it just doesn't quite match your design?
Small things like padding and font size might be off
by a few pixels but it all makes a huge difference
to your final design, and you want it
to match what you created.
Today, I wanna talk about this problem
and also give you a solution to it.
(upbeat music)
So here's the thing about closing that gap between
design and development in your work, and that is
if you as the designer take a step forward and move
a little bit more into the development side,
it's gonna make the whole process smoother
and you're gonna get a better end result.
Don't panic, I'm not saying that you need to learn to code,
but what I am saying is that you should gain
an understanding of how code works.
If code is not something you've ever dived into before
then here's a very quick crash course in HTML and CSS.
HTML is the structure of our web page,
this is what we start with, this is the layout,
this is the bones for your website.
Then we use CSS to style this layout.
So CSS classes that are applied to HTML components
tell the browser how this layout should look.
Take this button for example, really, it's just a link,
which is an HTML element, but then we add CSS styling
to it to add a background, some padding,
give it some rounded corners, take off
the underline, and voila, a button.
All right, that's our crash course, so have we got that?
The HTML is the structure and the CSS
is the layer of styling that goes on top of it.
If that felt a bit overwhelming or if code
is just not something you're interested in getting good at,
then the good news is you don't actually have to write it
from scratch in order to use it in your design process.
There are other options, this is why I really like
Webflow and talk about it so much on this channel
because they make code extremely accessible for designers.
In fact, when you're using it you might not
even realize that you're coding but you are.
Let's just quickly jump into the Webflow designer
so I can show you what I mean.
On the left-hand side here is my add panel
where I put different elements into my design.
And this is adding the structure,
this is adding the layout, this is the HTML.
Then over here on the right-hand side is where all
my styling options are, so this is how I am
tweaking the CSS, I am changing colors, I'm adding borders,
doing everything that I would if I was coding CSS by hand
but instead here it's just in a WYSIWYG editor.
So if we take a look here at the code view,
we can see that all those things I was doing
was building out a web page in code.
Here's my HTML and here's my CSS.
I can also add hover states to all my buttons,
I can add interactions to elements.
Doing this will be much more powerful than just
handing your developer a static mock-up with maybe
some vague description of what you want
an element to do when you hover over it.
Here, you can mock it up, you can play with it yourself,
you can figure it out, people can see how it works
and how it feels to interact with it,
and while you could just export this code
and host it as your landing page, if you work on an app,
or perhaps you're just designing a single page
within a much, much larger site and you work with
a developer, then you can treat this
Webflow design as an interactive mock-up.
The developer that you're working with is gonna be able
to copy styles from it, they'll be able to see exactly
what code went into the interaction that you're hoping for.
It's gonna mean that the final product, the final build
will be much, much closer aligned to your design
because there isn't this design
and development disconnect anymore.
You might not even have to bother building out the
whole page in Webflow, perhaps you could just focus on
building the components that have tricky elements to them
or things that were harder to express in a static mock-up.
I hope you found this video useful and that maybe
you feel a bit more confident now about bridging
this gap between design and development
and making that process smoother.
So the more that you can gain an understanding of code
or utilize tools like Webflow to bridge that gap,
the better your final product will be.
If you wanna try out Webflow for your next project
then there'll be a link in the description
where you can do that for free.
And I'd like to make some more videos about this
designer, developer relationship so, if there's
any questions you have or any particular issues
that you've come across in your time,
working on web designs, then please let me know
about them down below in the comments
and let's talk about that some more.
All right, thanks for watching, give this video
a thumbs up if you enjoyed it and hit subscribe
if you're new because I make new videos about design
every single week and I'd love to see you in the next one.
All right, have a good day, see you next time, bye.