How interactive mockups can help your design process – no coding required!

How interactive mockups can help your design process – no coding required!

– 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.

21 thoughts to “How interactive mockups can help your design process – no coding required!”

  1. yes! more design+dev relationship!.. I would like to know what other alternatives to webflow have you used previously to handover complex key user interactions to developers. Sometimes I receive mockups (static) and designer writes in the (trello) card the explanations of the interactions but sometimes what they had in their mind doesn't work and to prove it I have to end up doing it myself to show the concept, sometimes I have used paper prototyping to clarify states… I don't have any problem on creating this artefacts but it's sometimes demanding of my time, I wish I can convince the designers to come up with something closer to their idea so I spend less time "clarifying" and more time "coding" ..their excuse: we are a startup and there is no time for designers to do all this fancy extra process. 🙁

  2. I have been building web sites since the beginning of HTML (well before there was CSS and HTML standards…back when it was still considered an extension of ARPANET), including the first e-commerce and marketing web sites to prove people would want to actually buy things off the Internet (hard to believe, but in the early 1990’s most corporate executives did not view the Internet as a strategic or profit generating platform). Over the decades (wow, that makes me sound old), I have acted as the UX designer and work with many designers. The best collaborations have always come from a triad of effort between the designer, the developer, and the end user. Designers need to know some coding, just as developers need to understand the intricacies of design. There has to be a common, on going dialog between designers and development. Using toolsets like webflow is great because it constrains/focuses the designer to a pallet of options that can be transferred to usable and maintainable code. Likewise, it educates/demonstrates/enlightens the developer that the design vision can be achieved in code. There will always be a need for some compromise along the way (for example, your great responsive UX widget probably won’t work in IE, which is still the default browser for many, many corporate users…remembering even corporate users are consumers too). It was not my intent to get on top of a soapbox here, but I agree 100% that designers need to learn some coding, and developers need to learn some design principles. Great video series and a great channel!

  3. And if you're looking to do something similar with animation based tools, Flinto and Principal are where its at. Great robust programs and provide great visuals and interactivity to share with stake holders, dev teams, etc.

  4. Yes! More Design/Developer relationship videos please! There is a lot of discussion among designers about whether or not you should code, I believe it can't hurt. But I don't see much to the extent of how much you should learn. Is HTML and CSS enough or should we also learn Javascript. I'm currently at a company that is trying to convince me to learn frameworks like Angular and React-Native, do you think this is taking it too far now?

  5. This is a really cool demo Charli! Thanks for sharing. It'd be great to see some of the example design deliverables you've made. And I guess I'm curious to learn more about when you would use something like Web Flow for interactive mockups vs using tools like Principle or Framer?

  6. As a print designer trying to transition to web design, I definitely learned something here. Thanks Charli!

  7. Charli I myself am in app dev more recently in Java. While I am sure that there are differences between designing for the web as opposed to for traditional applications I am sure there are many things that are the same. As a designer how has your mindset changed and your actual workflows changed as you have become more familiar with the coding aspect of the web?

    Since I have been watching you I have seen you give a lot of the reasons why you support designers doing this and a lot about the programs you use and why but can you make more specific comparisons between the old designer charli and the new designer you have become?

  8. Hi Charli, what do you think about Zeplin? Is it the same as Webflow? Please how is Webflow better, if it is. Thanks

  9. Would you suggest that a website be designed in sketch or photoshop and then also created in Webflow? Or do you simply go into Webflow and create you web designs from scratch in there? Interested to hear about other designers processes!

  10. This video is full of awesome content. The only thing I’d say is that this feels way too much like paid promotion, which I know it is but it doesn’t feel like your normal videos. Is this process something you use at Seva or is that eliminated because you primarily do your own coding?

  11. That you’re actually are writing code goes for all web builders like Beaver Builder and Elementor or styling tools like MicroThemer

  12. Here's another tip: you can explore the HTML and CSS of any website right in your browser by right clicking and selecting "Inspect" or "Inspect Element".

  13. Excellent explanation. Whould like to know, please if I can cut out that part which talks about HTML and CSS to put it on my twitter accout with a mention to you ?
    Because you explained it sooo well !
    Can I ?

  14. Great video Charli, I have been wanting to build my own Tee-Shirt mock up site, will try webflow. If you ever make a tutorial video on Tee-Shirt mock ups I would definitely be interested.
    Thanks Charli.

Leave a Reply

Your email address will not be published. Required fields are marked *