Home / Software / Webflow tutorial: How to build a landing page using Webflow and Sketch

Webflow tutorial: How to build a landing page using Webflow and Sketch



How to build a landing page with Webflow and Sketch.

Webflow is a responsive website design tool. This is a Webflow and Sketch tutorial that talks you through the process of designing a landing page in Sketch and then turning it into a responsive layout with Webflow.

____

HERE ARE SOME NEXT STEPS…

1) HIRE ME: Want me to work with your startup or business?
https://bit.ly/2AybHq8

2) FREE EBOOK: “How to start a career in UX”
https://bit.ly/2xuYDDE

3) FREE PORTFOLIO REVIEW: Get my thoughts on your portfolio…
https://bit.ly/2KuhpxM

____

SOFTWARE USED
https://www.sketchapp.com/
https://webflow.com/

ON MY DESK
Macbook Prom Retina, 13 inch – http://amzn.eu/4FEX0gr
Dell ultra sharp 23 inch monitor – http://amzn.eu/dDeISAM
Desk lamp: http://amzn.eu/7Iu1RRB
Native Union iPhone dock – http://amzn.eu/fUv8741

____

Check out my social for more UX tips:

Instagram: https://www.instagram.com/robertsmith.co/
Twitter: https://twitter.com/robertsmith_co

Check Also

வீட்டு வரைபடம் வரைய எந்த software பயன்படுத்துறாங்க | வீட்டு மனையின் உயரம் | நீரின்றி அமையாது உலகு

zwcad #india #housedesign Be a part of #Aishwaryambuilder If you are #architects, #Civilengineers or #contractors ...

16 comments

  1. This tutorial is GREAT! Thanks Rob

  2. It would be great if we can just transfer our web design from sketch to webflow

  3. 13:09 I did exactly the same, but no magic happened 🙁

  4. At 12:37-ish, after you have made the hero-inner a flex box, you say the issue is that the items are bleeding into one another. You then use a Div block to solve this. Couldn't you have just either left it as it was before using the flex-box, or alligned the children of the hero-inner vertically? – Great video, i'm following along to try and understand the fundamentals. Thanks again!

  5. I'm going to get out of my construction career with thanks to these videos you've made.

  6. Super helpful ~ thank you !

  7. Mitchell Robertshaw

    Great tutorial mate. Thank you!

  8. How do you make the webflow canvas the same size as the sketch canvas(or change the width of the webflow canvas in general)? I can't create "section inner" width to 1200 because the webflow canvas is much smaller than that.

  9. Great video, but maybe try to work on your constant throat clearing.

  10. Michelangelo De Cia

    Awesome video, thank you:)

  11. Hi Robert, great video tutorial. Learning a lot in your channel. Do you have a link on the second part? Thanks in advance

  12. Francesco Belvedere

    Hi Robert — did you ever do the follow up to this video where you add the icons and graphics?

  13. diva-e sketch tricks

    very useful! thanks

  14. Not sure how limited workflow is, I use bootstrap all the time. I am afraid it gets stuck somewhere.

  15. Zachary Allen Kravits

    What's up Roberto! Awesome and quick vid!
    I'm actually currently looking into changing from marvel to some other prototyping tool. I currently use Sketch in order to design wireframes and UI. Would you recommend webflow over invision? I want to show the button states and be able to export the html file if possible.

  16. This is a great introductory video; it's really helping me learn Webflow. Thanks!