Jose Ocando
Jose Ocando
  • Видео 25
  • Просмотров 389 933
Speed Design: Creating feeling with type, choosing media, and proof of concepts
- ABOUT -
I really enjoy speed art videos where the artist talks about how they made decisions during the creation process. So, I tried to do that with this small proof of concept design. I enjoyed digging into topics like how to choose photography that works well for website design, how to create emotions and vibes with typography, how to use proof of concepts in client review processes, and a few other tidbits. I hope it's helpful to any designers out there!
- CHAPTERS -
Chapter 01 | 00:16 - Proof of Concepts
Chapter 02 | 02:20 - Sourcing the Right Imagery
Chapter 03 | 04:47 - Futzing with typography
Chapter 04 | 09:34 - Ornamental divider
Chapter 05 | 11:48 - Entering the polishing phase
Chapt...
Просмотров: 668

Видео

Animating Circle Progress Indicators for Autoplaying Tabs
Просмотров 4 тыс.Год назад
- ABOUT - Circle Progress Indicators are such a fun way to keep a user engaged as more content loads. Watch as I make one using just Webflow animations. See it live (desktop only) j-playground.webflow.io/circle-progress-indictor *I used Refokus' Automatic Tabs Booster. Find the documentation here: www.webflow-tools.refokus.com/tools/automatic-tabs - CHAPTERS - Chapter 01 | Intro - 00:00 Chapter...
2 Ways to Create Aspect Ratios in Webflow
Просмотров 9 тыс.2 года назад
- ABOUT - We'll cover two ways to create aspect ratios in Webflow. One is the "padding hack", which can be done using all native Webflow styles. The other is the relatively new "aspect-ratio" CSS property. It's not in Webflow yet, but we can add it in an HTML embed element and see it right in the designer. - CHAPTERS - Intro | 00:00 Styling the Padding Hack | 02:10 The Padding Hack and Responsi...
Ingenious Position Sticky Layouts Inspired by Teamway.io - a Webflow Tutorial
Просмотров 19 тыс.2 года назад
- ABOUT - Teamway (teamway.io/) uses this really cool expanding accordion layout to communicate benefits to the user. In this Webflow tutorial we'll recreate the accordion strategy inside of Webflow using position sticky. - CHAPTERS - Chapter 01 | Intro - 00:00 Chapter 02 | Setting up the accordion infrastructure - 1:00 Chapter 03 | Styling with position sticky - 05:20 Chapter 04 | Outro - 10:3...
Scaling Section Animations Inspired by Patagonia | A Webflow Tutorial
Просмотров 6 тыс.2 года назад
- ABOUT - I love how the current Patagonia website (patagonia.com) uses this animation to introduce full-bleed sections. They initially start out inline, with white padding around them. And, as you scroll through the section, the padding scales out. It's such a great way to transition to full width content. Let's recreate it in Webflow. - CHAPTERS - Intro | 00:00 Building the infrastructure | 0...
How to Change Layouts inside of a Collection List | a Webflow Tutorial
Просмотров 6 тыс.2 года назад
- ABOUT - Currently, Webflow has a limit on the number of collections you can have on a page: 20. I ran into this limit recently and had to figure out how to use two different layouts inside of the same collection list. Now, I'm sharing my findings with you :) - CHAPTERS - Intro | 0:00 Overview of the Grid | 01:20 Adding the Collection List | 02:47 Using nth-child to make the first item take up...
Making a Faux Infinite Canvas in Webflow
Просмотров 3,7 тыс.2 года назад
ABOUT Have you been on one of those sites where the header, or maybe even the whole site, feels like this infinite canvas of cards? I've wanted to try developing something close to that just using the native Webflow interactions and collection lists and the result is this tutorial :) Intro: 00:00 Building the infrastructure of the canvas: 01:25 Making the animation: 07:30 Adding in header conte...
Creating a Parallax Slider in Webflow
Просмотров 49 тыс.3 года назад
A couple of days ago I came across this site: niarratravel.com. There's a lot of beautiful things about it, but I was really drawn to the parallax slider and promised myself to try recreating it in Webflow using just the slider component and interactions 2.0. - CHAPTERS - Chapter 01 | Starting the build 01:04 Chapter 02 | Developing the card 02:51 Chapter 03 | Developing the slider buttons 09:0...
Nav Takeovers | Webflow Development Tutorial
Просмотров 6 тыс.3 года назад
SKILLSHARE If you're a beginner or intermediate user, check out my Skillshare class: "Webflow for Beginners." Together, we create a simple one page portfolio website for a photographer, starting with the assumption you don't have any experience with HTML, CSS, or Webflow. Use the link below to get 2 months of Skillshare for free. skl.sh/2PU9tML - ABOUT - Nav Takeovers are a beautiful way to int...
Website Speed Design | Wright Bacon
Просмотров 1,3 тыс.3 года назад
- ABOUT - I love Speed Art. Watching someone complete something, sped up 5, 10, 15x you get a sense for how they create something, what their process is like. I wanted to do the same thing with a home page design and provide some voice over to talk about fundamental design principles. *Note. This design is not affiliated in any way with Wright Bacon. It's just a concept using the photos they up...
How to Rotate a Typograghic Badge using Webflow Animations
Просмотров 13 тыс.3 года назад
SKILLSHARE If you're a beginner or intermediate user, check out my Skillshare class: "Webflow for Beginners." Together, we create a simple one page portfolio website for a photographer, starting with the assumption you don't have any experience with HTML, CSS, or Webflow. Use the link below to get 2 months of Skillshare for free. skl.sh/2PU9tML - ABOUT - Designing badges is a lot of fun. But an...
How to Center Things with Absolute Positioning | A Webflow Tutorial
Просмотров 12 тыс.3 года назад
- ABOUT - In this Webflow Tutorial we talk about centering a play button inside of a card using absolute positioning. I try to cover what's going on really carefully so you can understand some of the foundational concepts around positioning. Thanks for watching! Read Only Link: preview.webflow.com/preview/jocando-tutorials?preview=b1ade817df2e41566f53d6b876d5b9f9&pageId=5f8b8be531dcca5981bd18ee...
How to add Schema Markup to your Webflow Project
Просмотров 17 тыс.4 года назад
SKILLSHARE If you're a beginner or intermediate user, check out my Skillshare class: "Webflow for Beginners." Together, we create a simple one page portfolio website for a photographer, starting with the assumption you don't have any experience with HTML, CSS, or Webflow. Use the link below to get 2 months of Skillshare for free. skl.sh/2PU9tML Sorry for the nasaly voice and sniffles. Still sic...
2 Ways to Develop FAQs - a Webflow Tutorial
Просмотров 15 тыс.4 года назад
SKILLSHARE If you're a beginner or intermediate user, check out my Skillshare class: "Webflow for Beginners." Together, we create a simple one page portfolio website for a photographer, starting with the assumption you don't have any experience with HTML, CSS, or Webflow. Use the link below to get 2 months of Skillshare for free. skl.sh/2PU9tML - ABOUT - FAQs are one of my favorite components t...
8 Awesome Custom Code Hacks for your Webflow Project
Просмотров 29 тыс.4 года назад
SKILLSHARE Check out my newly launched "Webflow for Beginners" class. Together, we create a simple one page portfolio website for a photographer, starting with the assumption you don't have any experience with HTML, CSS, or Webflow. Use the link below to get 2 months of Skillshare for free. skl.sh/2PU9tML - ABOUT - In this tutorial, I cover 8 different pieces of custom code that power up your w...
Drawers, Flyouts, and Hidden Menus | A Webflow Tutorial (Re-upload)
Просмотров 14 тыс.5 лет назад
Drawers, Flyouts, and Hidden Menus | A Webflow Tutorial (Re-upload)
Sliders, Carousels, and Tabs - A Webflow Tutorial
Просмотров 78 тыс.5 лет назад
Sliders, Carousels, and Tabs - A Webflow Tutorial
Webflow Tutorial - Creating a CMS Powered Slider
Просмотров 16 тыс.5 лет назад
Webflow Tutorial - Creating a CMS Powered Slider
Webflow Tutorial: Ten Tips for Creating a Responsive Website
Просмотров 38 тыс.5 лет назад
Webflow Tutorial: Ten Tips for Creating a Responsive Website
Webflow Tutorial - Mint Redesign Concept
Просмотров 26 тыс.5 лет назад
Webflow Tutorial - Mint Redesign Concept
Sketch Exercise - #designabovethefold - Boston's Public Garden
Просмотров 5655 лет назад
Sketch Exercise - #designabovethefold - Boston's Public Garden
Project Grids, Newseletter CTAs, Blog Teasers, and Unique Footers Developed in Webflow
Просмотров 2,3 тыс.5 лет назад
Project Grids, Newseletter CTAs, Blog Teasers, and Unique Footers Developed in Webflow
Creating an angled edge website header in Webflow
Просмотров 5 тыс.5 лет назад
Creating an angled edge website header in Webflow
UI/UX Tutorial: Designing a login screen with Sketch
Просмотров 1,4 тыс.6 лет назад
UI/UX Tutorial: Designing a login screen with Sketch
Using a Vimeo Embed as a Background Video in Weblow
Просмотров 19 тыс.6 лет назад
Using a Vimeo Embed as a Background Video in Weblow

Комментарии

  • @CSEMohamedAsmaan
    @CSEMohamedAsmaan 4 дня назад

    Is it possible to make it as grid

  • @mabelledaccache6564
    @mabelledaccache6564 8 дней назад

    I love your videos. It's exactly what I was looking for. Can you make a video for the tabs on mobile version ? It would be really great. Thank you again for all the awesome videos

  • @akintangun
    @akintangun Месяц назад

    You have a real talent for teaching! Really appreciate your clear explanation of positioning!

  • @akintangun
    @akintangun Месяц назад

    THANK YOU!

  • @gabrielfonseca333
    @gabrielfonseca333 Месяц назад

    Thank you SO MUCH! I was struggling with this like for 4h, until I found your explanation. Thanks Jose!

  • @jvvicr
    @jvvicr Месяц назад

    One question how can I set up the end? so they can repeat again like a loop or something

  • @jvvicr
    @jvvicr Месяц назад

    Awesome man I was trying to do this manually with swiper, and was difficult. This is even easier and nice.

  • @arpitabanik6240
    @arpitabanik6240 2 месяца назад

    Amazing!!If i want to bind this with cms collection for same structure how to do this??

  • @sofianbettayeb3205
    @sofianbettayeb3205 2 месяца назад

    This is amazing, thanks Jose

  • @roving-camera_72
    @roving-camera_72 2 месяца назад

    Very helpful. Thanks for sharing.

  • @jeosbeavadra9270
    @jeosbeavadra9270 3 месяца назад

    I followed step by step but that drop-cap thing didn't work for me

  • @SebastianMorales-cy1li
    @SebastianMorales-cy1li 3 месяца назад

    love this tutorial

  • @ReeseBrasileno
    @ReeseBrasileno 3 месяца назад

    This helped a lot even if this was made years ago. Thank you!

  • @joeypouladi
    @joeypouladi 3 месяца назад

    You are a Godsend 🔥🔥💯 HUGE HELP. Really was out here thinking there was no way to center things positioned absolutely 🙏' - '

  • @AbdulrahmanOsama111
    @AbdulrahmanOsama111 3 месяца назад

    broooooooooooooooo i love you

  • @SunblaKhan-lk6ol
    @SunblaKhan-lk6ol 3 месяца назад

    If you're thinking about adding a blog component to your site, BlogHandy could be a great option. It's simple to integrate and offers smooth functionality, making content management a breeze. Might be worth checking out

  • @webjoe4556
    @webjoe4556 4 месяца назад

    GREAT JOB! LOVE IT

  • @irenailyaev1289
    @irenailyaev1289 4 месяца назад

    Hey Jose, this was very helpful, your tutorials are really great! thank you so much for making them!! I wanted to ask, could you make a tutorial on how to make a filter section for an e-commerce website (for the page showcasing all the products). Looking forward to see your tutorial if you'll be interested in making one :)

  • @AhmadAteek
    @AhmadAteek 4 месяца назад

    Thank you!

  • @rrabochiy
    @rrabochiy 4 месяца назад

    o dear, thanks a lot!

  • @sofiaerofeeva2733
    @sofiaerofeeva2733 4 месяца назад

    I've spent so much time finding how to do it THANK YOU

  • @Violant3
    @Violant3 5 месяцев назад

    God-tier tutorial! very well explained

  • @zardiax
    @zardiax 5 месяцев назад

    how do you activate this web flow "find anything" search bar?

  • @7deniseta
    @7deniseta 5 месяцев назад

    love your videos and love your voice, it's soo relaxing, thank you Jose!

  • @jevgenisuija
    @jevgenisuija 5 месяцев назад

    Thank you Jose, very nice approach to present information!

  • @Svetlana-hk3mm
    @Svetlana-hk3mm 5 месяцев назад

    Thanks a lot! Your video was helpful.

  • @user-sf1pq4ee2e
    @user-sf1pq4ee2e 5 месяцев назад

    Thanks a lot for your tutorial

  • @EmilyMarais
    @EmilyMarais 5 месяцев назад

    Great video! I just wish there was a recap at the end to remind me of the steps and which I could screenshot to refer back to!

  • @layla-lz8pi
    @layla-lz8pi 6 месяцев назад

    thannk you so much you saved me

  • @iwebmediahub8087
    @iwebmediahub8087 6 месяцев назад

    Life Saver, thanks for this video, you just gain a subscriber lol

  • @candrad.s9504
    @candrad.s9504 6 месяцев назад

    heyy there, so i have a probelm on my slider, so whent it reach the last pagination, in the slider there are blank space, how can i fix that?

  • @aseembathla4382
    @aseembathla4382 6 месяцев назад

    This is an insane tutorial. Thank you!! Subcribed!

  • @thrrlya
    @thrrlya 7 месяцев назад

    thanks a lot ur so adorable

  • @lamouralice4533
    @lamouralice4533 7 месяцев назад

    7:20 Parallax movement setting 9:34 Slider Buttons

  • @taunado
    @taunado 7 месяцев назад

    In terms of web dev - is using Z-index not a more traditional and perhaps better way to make text on top of an image?

  • @vicentecerda171
    @vicentecerda171 7 месяцев назад

    Great video! watched it for the first time about a year ago and I keep coming back to it for how genius it is

  • @hellalocal
    @hellalocal 7 месяцев назад

    Could you move right and left on scroll?

  • @peatear42
    @peatear42 7 месяцев назад

    thank you!

  • @jayreambonanza1991
    @jayreambonanza1991 8 месяцев назад

    Okay. I'm now in the Webflow geek club. Cool stuff

  • @zoegatti857
    @zoegatti857 8 месяцев назад

    Thank you so much Jose! You're such a great instructor and this tutorial 100% worked for me. As someone new to Webflow, I have been struggling to find tutorials that I can easily follow, but your video was extremely straightforward and easy to follow and you do such a good job with explaining the how and why. Will continue to watch your tutorials and learn more from you!

  • @jo69123
    @jo69123 8 месяцев назад

    damn, this was fucking impressive

  • @erikakaishi1431
    @erikakaishi1431 8 месяцев назад

    Wow! That tutorial saved my life. I spent many many hours trying to build a one-step slider and your video made me build it in some minutes. Thanksssss a lot!

  • @Releasly
    @Releasly 9 месяцев назад

    42:00 why don‘t you use simply a div with background image set to cover rather than using html code

  • @user-fe1gc6nq2x
    @user-fe1gc6nq2x 10 месяцев назад

    Hey Jose idk if it is to do with the new Webflow changes but your design no longer works for some reason, in staging it is also off. the top pane is too high above the other two? and when I follow your instructions I get the same issue?

  • @ArtfulUI
    @ArtfulUI 10 месяцев назад

    That's brilliant 💎 Appreciate your tutorial!❤

  • @matthewoldham2836
    @matthewoldham2836 10 месяцев назад

    This is working perfectly for images, but how would you do this for a map object?

  • @empressdrelsie
    @empressdrelsie 10 месяцев назад

    Thanks @JoseOcandoVideos. How do I remove the space at the end of the slides

  • @matthewoldham2836
    @matthewoldham2836 10 месяцев назад

    Another really useful, clearly-explained tutorial. Thanks Jose!

  • @emiolaodunayo440
    @emiolaodunayo440 10 месяцев назад

    Can these sliders be link with cms

  • @ilyaskaynak3343
    @ilyaskaynak3343 10 месяцев назад

    thx bro , u are grateeeeee