Building an Award-Winning Website with Webflow & XD (Design Process)

Join my Webflow Wizards Community
/ timothyricks
I designed this website in Adobe XD and developed it in Webflow. Shortly after launch, it won the Site Of The Day Award on CSS Winner, was featured on Muzli's Interactions of the Week, and was also featured on various website inspiration social media accounts. In this video, I'll take you through my process for creating this website. View the website at www.crushedito...
Try Webflow using my affiliate link below.
webflow.grsm.i...

[@kevnn6443]

Thank you for showcasing your design process, and for being so open about it! You give such great advice :) I've been so overwhelmed learning Webflow, but watching your videos has motivated me a lot! Keep on inspiring!!!!

[@timothyricks]

Thanks so much for the encouragement! I'm so glad to be able to help. Keep on learning! The Webflow learning curve can be steep, but it's well worth it.

[@walizenlegrand9040]

Yeah finally we flow feels fun to learn

[@luckyloop7503]

Dude you're not only a great dev but also a great designer... and an even greater teacher! Thanks

[@timothyricks]

Thanks so much for the kind words!

[@alexbjorkman]

the way you explained the interactions with the client through each step of the process was brilliant. thank you

[@en2336]

Wow, got chills watching this; a master at his craft. You're a joy to watch!

[@lucasrochas2008]

I would love to see more of your design process. Especially content creation, handling documents from clients (images, videos...) and seo

[@timothyricks]

Lucas Rocha Thanks man! I’ve been getting for requests for that lately. Definitely want to make a future video like that

[@NormenGaze]

This Video is Amazing! Thank you! You have so much insides to share and after watching the beginning I could‘t believe that I only watched 4 minutes! It felt like ages in the most wonderful way possible, because I got so many informations. Thank you!!

[@timothyricks]

That’s so great to hear! Thank you!

[@brandonricketts1762]

Buddy you absolutely killed this entire project. I've just found my way into the UX space and I was considering building a site in webflow and you absolutely gave me some great insight and inspiration here so thank you and keep making magic like this!

[@man2012ism]

Hi bro, thanks so much for this guide. I’m currently redesigning my company’s website on Webflow. I’ve to admit, the planning part plays a huge role in achieving clarity & speed when developing. 👍🏻

[@timothyricks]

Yes, absolutely

[@cesarv.6365]

I appreciate you sharing your process. I'm new to webflow but coming from a coding background made it easier to adapt to the webflow way of building websites. Love your content. Great job! 👍🏼

[@killjeffrey]

This is how your present a case study (or whatever) - much better than just static text.

[@stvngunn]

Another killer video man. Love seeing behind the scenes stuff like this. Thank you for sharing.

[@timothyricks]

Steven Gunn Thank you! That’s great to hear. I’ll try making more of these in the future.

[@ayushkumarchandra]

You really got a great client who understands design and your design and development we're awesome as usual. Please make a video on pricing design and freelancing.

[@bartderuyck]

Hi Timothy, I just wanted to leave a comment to say that this is fantastic work. Unique, beautiful, and inspiring!

[@timothyricks]

Thank you so much!!

[@silvana9371]

I'm so GRATEFUL for all the information you just shared. I'm so impressed! THANK YOU SO MUCH! You just got a new subs.

[@eli.alcaraz]

This is really inspiring. Thank you sir! I love seeing other people's process, and I've definitely learned a few things here from you. Thank you for sharing!

[@des7638]

Yo. This was amazing. Insanely beautiful work, and super cool to see the process. Extremely inspiring and educational. Keep up these videos and you're gonna get internet "famous" . And thank you for your generosity.

[@edisontsui]

Love how you layout the process. Brilliant.

[@borislutters9438]

Usually don't comment on videos but have to say this is another level of design tutorials, great work! Keep it going!!

[@felixquansah5214]

This channel is a pure gem! Absolutely valuable content here. Thanks for all the knowledge shared

[@anshkid]

Thank you very much for this video Timothy. Loved the art direction on this site! I am very grateful for all the amazing content you are putting out.

[@timothyricks]

Thanks so much!

[@harshlpatel]

This kind of content is really inspiring. And showing the whole process is great

[@atnsn]

It was helpful to see the steps you took to complete the project. This is probably how I’m going to do it from here on out. Thank you!

[@lorrainekanana3094]

Thank you for sharing this I have learnt so much

[@daph_w]

Thanks for showing this! the initial process of communicating with the clients to get the right direction is quite difficult. I just started out recently, i find it a bit hard for the clients to communicate what they want for their design or website. They would say something really big like oh I want it like Netflix, but showing me reference of really ugly websites. It was hard to wrap my head around what they want. Hopefully you can keep creating more content like this 🥰🥰

[@timothyricks]

Daphne Wang Yeah, it can be really challenging for sure! This is where I find the keywords and moodboards help.

[@katyma2368]

Loved seeing your process for this, as well as the final website!!

[@en2336]

More design process vids please! :)

[@ezekielrivera]

This was great, Tim. Appreciate your sharing. You've got a new subscriber.

[@GeraldineMurphyEnamel]

Top class design and thank for sharing your process. That’s very generous

[@corporateGuy89]

thank you so much for sharing this!!!

[@CaioGonzalez]

I have been watching all your videos it's all being so helpful! Thank you so much for sharing your knowledge it's actually amazing! ♥♥♥♥

[@leelameka]

Thank you for posting this! : )

[@sameenfatima7061]

wonderful video! Got yourself a loyal subsciber.. I'm so in awee

[@thewzrdharry]

Really impressive work. Love your process 🙌

[@chukkaemmanuel]

Lovely job man 👏🔥

[@IvyGreen9907]

This was really useful. Thanks!

[@timothyricks]

So glad to hear that!

[@dentalrosie8403]

Found this very useful, thanks so much!!

[@SuhailAmar]

This was great. Love your videos.

[@Vengefulization]

Soooooooo Great! Thanks!

[@tjveach]

Nice job.

[@studiosoaked]

awesome work. very imspiring.

[@Simon-zan]

Your content is amazing man. Beautiful site, well done!

[@timothyricks]

Thank you!

[@ilonadzen]

Wow, thanks for such a nice and helpful video! This really does inspire to experiment more with my own projects:)

[@timothyricks]

Ilona Dzengelevičiūtė Love to hear that!

[@jaysenb]

that was next level work!

[@Brovrt]

Amazing work. Where do you find such high quality photos for these kind of projects?

[@RocknRollCEO]

Wonderful stuff Tim.. Thanks for sharing.

[@dylancozian]

Thanks for sharing with us your process mate !

[@noahmitchell8222]

Super helpful video. When you covered the internal page design, you mentioned that you have to just get the bad ideas out of the way. How much of that did you share with the client? Just a finished design? A few options? The entire process, bad ideas and all?

[@timothyricks]

Hi Noah, the other options were just for me to see and test. I only presented the strongest option to the client to get feedback on that. The moodboard phase is where I got client feedback on various options.

[@iamtommyok]

Really great video. Thanks for uploading this and hoping to see more soon!

[@DesignDen673]

This is so amazing and inspiring. Could you please also talk about the pricing process?

[@jaysenb]

I love this so much, do you have a full tutorial for the whole project, particularly the animation in XD parts? Love from the UK!

[@carolineminorchristensen829]

Thank you for this - veeerrry inspiring :)

[@by_gato]

Thanks, you are doing a great job, I am improving my skills with your videos.

[@timothyricks]

Happy to hear that!

[@jamesabadfernandez8002]

Thanks for the video, it is awesome, you killed it.

[@mukaidziwamawelewele4222]

Hi Timmy, hooe u are well, i am a big fan if your work, just wondering if you would do a short video explaining the steps for the Animea website to build the Header text animation. Thank you

[@gauravrathod5858]

Congratulations Brother

[@_a_kraus]

Hey Timothy, great job! I was wondering - and this is probably a strange question - why you chose a width of 1492px for your artboards, respectively which grid you used in the design (if any), also regarding the subsequent implementation in Webflow.

[@timothyricks]

Thanks so much! For this project, I set the artboard width and height based the browser window size of the laptop I was using at the time. When I build in WebFlow, I set all my element sizes based on the screen width so I needed an apples to apples comparison between full screen mode of XD in my browser and WebFlow itself. No grid was used for this project.

[@mariusdelucio4968]

Thank you for sharing ! cool video :) !

[@choonah]

Salut! now almost daily vids! bravo man. I guess now its time for some more tutorials on implementing custom code into WF projects :D haha

[@timothyricks]

Thank you! And oh, for sure! They're coming

[@jeberulz]

This is very useful, thanks a lot for creating this content. Please can you share your brand archetype template? Like what questions did you ask clients etc. Much appreciated. Thanks

[@timothyricks]

John Iseghohi Sure thing! I get most of the high value information on an initial call because filling out a long form can feel like a chore. I save the simpler, this or that, questions for this follow up form. tricksdesign.typeform.com/to/R8bFvd2u

[@michelleneous]

love this video! really helps break down the "whats your process?" your question! may i ask what fonts you used for that website?

[@timothyricks]

Thanks so much! The headings font is Reckless and the body font is DM Sans.

[@sankalpbalani]

You started directly designing the website but most people say that you should first wireframe the project and once you are happy with the wireframe only then start designing. What's your opinion on that ????. Btw loved your work

[@timothyricks]

That's a great point! Sometimes I wireframe and other times I don't. Personally, I find wire-framing first saves time in the art treatment phase, but sometimes it limits my creativity.

[@nimeshsinha]

Amazing!

[@madselsoe]

Great video - really inspiring 🙏🏻

[@timothyricks]

Thank you!

[@madselsoe]

Would love a tutorial on fading different section background colors 😊

[@dodogemy3009]

Is it possible to share the documents of the design process ? It will help us alot to structure our projects

[@timothyricks]

Hi Dodo, this may help! Relume created a free cloneable moodboard template based on this concept. webflow.com/website/Relume-Moodboard-Tool

[@normthomasmarketing]

That’ was a great break down. How long was the 66 hours spread over? Like 2-3 weeks? Great process and build. Any links for the resources for titles.

[@timothyricks]

Norm Thomas Thank you! It was probably spread over about 6 weeks of work. The project was put on hold for a couple weeks in the middle because of a life event but picked back up quickly after. If you’re asking about the animated titles, I did a video tutorial on how to implement those with the code in the description. kzbin.info/www/bejne/rpqkooeradFmY8k

[@normthomasmarketing]

@@timothyricks cool I will check it out. And I was asking the duration just to see if I’m on a good timeline. About 1.5-2 months sounds great. I guess some clients differ. Thanks very much. I’m a new fan.

[@nkennaamadi6526]

hi timothy do you not design the wireframes before the design?

[@SgtSOB]

Thanks for the video Tim! Is there a specific reason why you use XD over Figma? Just curious if you've used both and what your thoughts are. Thanks!

[@timothyricks]

Tom Sobczyk Thank you! I just use XD because the agency I work for does, but from what I’ve seen, Figma seems like the better tool.

[@simuls.4812]

Can you do 3d box manu tutorial, as you did for Churches United for Men?

[@timothyricks]

Thanks so much for the suggestion! That would probably be a cool tutorial for a future video.

[@simuls.4812]

@@timothyricks I am excited

[@walisonmartinsw]

👍