How To Build Complex Web Designs Using Webflow

Complex web designs are difficult to master. Just looking at it on a portfolio page like dribbble or behance might leave you scratching your head as to how you can accomplish something like that. You might even read comments saying "Good luck building that". Well, with Webflow you can reach a fidelity of design that only very experienced web designers would be able to with typical html css.
👇 Support the original designer
dribbble.com/shots/20598813-W...
👇 Download the Figma File
www.figma.com/community/file/...
🛠 Try Webflow 👇
webflow.grsm.io/arnau
0:00 Intro
0:20 Figma
1:00 Going over the layout
1:50 Figma To Webflow Plugin
2:30 Starting Webflow Nav
4:20 Background Design
5:00 Main Complex Content
7:00 Middle Content
9:46 Bottom Content
13:00 Absolute Positioning
14:00 Responsiveness
14:47 My take on mobile
🚀 Subscribe for more weekly design content
bit.ly/2FQLrO5
🎥 What I use in my videos!
kit.co/arnauros/filming-setup
📄 Bonsai Referral (try for free)
www.hellobonsai.com/invite?fp...
👨‍💻 Connect with me
arnau.design
🌎 Socials
/ arnau_design
/ arnau_design
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you!

[@ArnauRos]

Do you struggle to build complex web designs?

[@slipstream01]

All day long

[@LorettaBangBang]

Not if I do everything with CSS grid. Have you tried?

[@ArnauRos]

Grids are great too!

[@kenab7007]

That technic to convert PX to REM !!! I CAN'T THANK YOU ENOUGH MAN! ❤

[@itspraveensharma]

It is such a cool video that I have watched this video so many times and have also searched similar videos on your channel but haven't found anything like this....really hoping you upload some more builds like this probably with BRICKS + ACSS as well...

[@nathanaelmeshesha4557]

fire video, definitely make more and please make one that goes deeper into different breakpoints. Struggling with how to make the more complex designs look good on mobile and what aspects to remove.

[@VideoEditorJohn2021]

Awesome video! I love how you break down the process of building complex web designs using Webflow. Your step-by-step approach makes it easy to follow along and understand the concepts.

[@ArnauRos]

Glad you enjoyed it!

[@imogenann5642]

Super Helpful to see the way you would build it, I find there are so many ways to make stuff I'm not always sure I'm picking the best one!

[@ArnauRos]

Glad I could help!

[@jonhowlett4011]

Great video man, picked up some tricks and techniques I've not used before 💪🏼🔥

[@ArnauRos]

Great!!!

[@jo69123]

This is one of the best videos I saw about webflow

[@ArnauRos]

I appreciate that !

[@EcomGraduates]

this is solid!

[@izahlavana]

Thanks for sharing ❤️

[@ArnauRos]

Thanks for watching!

[@user-to3zb8jq6f]

can you make a tutorial where you build also a complex website but responsive?

[@slipstream01]

Gold as always. Keep it coming please post more help to start as a freelancer

[@ArnauRos]

More to come!

[@othonc2647]

Great video! learned the trick about/16rem! Its the little things my brother!

[@ArnauRos]

It really is a life saver

[@RoyyanArianto]

Need full tutorial (responsive web) to apply this complex website adjust in tablet & mobile. tq

[@meetparekh2033]

That was really informative! I do wonder that you stoped using rems in certain places and I thiink that if you add the Finsweet fluid responsive code the website will be fluid repsonsive right? I am not sure for this specific build.

[@ArnauRos]

Hey! For this specific design i just wanted to transfer over the same pixels, usually it would all be done with rems but here i wanted to move fast

[@vizmorya7499]

Hi Arnau, At 6:50 how it came to 60rem when it is 1096px width for top row ?

[@ArnauRos]

hey, i manually converted it with 1096/16rem

[@rukaiya8706]

It's fairly easier than I thought though. But how about using % instead of Rem for padding & margin? As it scales nicely on all the devices, so no need to change settings manually

[@ArnauRos]

Sometimes % can be the answer, however its harder to scale designs correctly if you're using the full width of the breakpoint. In this case the design would stretch all the way and using rems allows it to scale depending on the root html font size

[@siddhantgupta1300]

This guy is just too good. I randomly was searching a problem on KZbin. And suddenly this guys video pop in my suggestion feed. The thumbnail and title was speaking exactly what i was looking for and so i clicked on it. And it happened again and again until i realized i spent 2 hr watching your content. Its really getting annoying 😒. Btw joke aside😅 .Your the best keep the good work going.😊 Love from india 🇮🇳 ♥️

[@ArnauRos]

Thank you Siddhant!!! I’m glad the content resonated with you so much, hope to see you on upcoming videos :)

[@siddhantgupta1300]

@@ArnauRos sure brother😊

[@basharalhussain]

Thanks for the amazing and tidy content I was wondering about the method you used to convert the design from Dribble to Figma, is there a plugin or something else? Thank you in advance, our wonderful teacher

[@ArnauRos]

No plugin! I have a video on it in my channel - dribbble to webflow and to figma too :)

[@ishansharma7384]

@@ArnauRos I have a similar question. Could you kindly provide an explanation of the method or share a relevant link for learning purposes? Your assistance is greatly appreciated."

[@jo69123]

Do you think that connecting a webflow page to a SiteGround custom domain could cause performance issues when loading the site?

[@ArnauRos]

I haven’t used siteground, usually namecheap but if its just a domain service it should be fine

[@joshbedo8291]

When i do the background like that its off center for me

[@ArnauRos]

hey! Try sharing your file here I can take a look

[@STARIMANCE]

Is that div-navbar responsive???

[@ArnauRos]

nope! Just an exercise in translating design to dev. But we can make it responsive in a few clicks not a problem

[@kishangautam7506]

Bro how did you replicate exact same design in figma?

[@ArnauRos]

The power of autolayout! You can download the file on community if you want to try out for yourself :)

[@5214428]

How did you move it to Figma?

[@ArnauRos]

I just rebuilt it from the screenshot!

[@andeederek9338]

Why are you so handsome bro

[@ArnauRos]

🫶

[@DOOHYUNCHO]

canb you kike do it more slowly on next video so beginner like me can catch up better great video btw

[@saralraj6839]

Pls make it responsive. Thats make it complete...

[@hiimaustin]

Booomm!! Straight to the subscription button🥹❤️

[@ArnauRos]

Thank you Austin :)