10 Stunning Web Design Ideas You Must See in 2019

By | January 27, 2020


hello and welcome to red stapler channel
in this video we’ll show you the collection of 10 stunning web design
ideas in 2019 that you should see and details about technique and library they used
ready let’s check it out this one used three.js WebGL library and combined it
with custom shader the text and noise images were used to create texture map
on plain surface before shader processing writing a game might sound complicated
but actually this one is only just a sophisticated checkbox put together with conditions SCSS and Haml were used to help
creating logics this one is a clever implementation of
SVG radial gradient mask the modified image with sketch effect were put in
place and add JavaScript code to mask over with the original image on mouse
click This cool effect is achieved by carefully placed div and a simple
transform animation box shadows were used to create 3d light effect SCSS was used
to calculate the transform amount and apply to each it an awesome slider using
SVG image our animations were at by JavaScript using TweenMax which is part
of GSAP or GreenSock animation platform actually this one was created with
almost pure CSS using 3d transform and grid template the JavaScript was added
to just enable the scroll feature I really love this one
the 3d text was created using text geometry and all cardboard textures were
embedded into the JavaScript code using base64 encoding TweenMax again was used
to move the camera when typing new letters as for physics engine an
open-source library cannon.js was used This is pure CSS animation it looks
like we have a sphere shape but actually it’s just a circle div box shadow and
moving face to create an illusion of spinning again this one is pure CSS at
first I was certain that this was made with three.js but actually it was made
with lots of simple square divs box-shadow
CSS animation and 3d transform a good design for a product showcased a
transparent product pictures were added to page with CSS hover property to
create hover effect the grid regenerated with JavaScript which automatically
recalculate when resizing browser window no extra library was used and that’s all
for this video you can find all links to the code at the description box below
hope you guys enjoy and if you want to see more development tips and tutorials
don’t forget to subscribe our channel weekly update thanks watching and see
you next time bye

55 thoughts on “10 Stunning Web Design Ideas You Must See in 2019

  1. Red Stapler Post author

    Link to each pen: https://redstapler.co/10-stunning-web-design-ideas-2019/

    Reply
  2. nOOb dEb Post author

    I am second commenter and biggest fan of yours plzz send me a email. I will send you a project of mine I am a student of class nine learnig web online from nepal send me a email sir plzz…

    Reply
  3. andres felipe cano Post author

    i love your videos
    Greetings from Colombia

    Reply
  4. Kiran Tirumalasetty Post author

    that product case design is awesome man!

    Reply
  5. Grizzle X Post author

    Great video! What's the name of the song/music?

    Reply
  6. Cono Man Post author

    227 likes 0 dislikes. Now that's a community!

    Reply
  7. Kaybe - Cryptosphere Post author

    Awesome websites. That cube written in css. Incredible!

    Reply
  8. Jevon Thomas Post author

    This is such a humbling video. There's always so much I can still learn in this field.

    Reply
  9. Azaz Ahemad Post author

    Awesome man!!! Last one is too satisfying

    Reply
  10. bodguy Post author

    unfortunatly most of these examples are not useful on production web development…

    Reply
  11. Deber chaos theory Post author

    so in what exacly they a made of i min are they made in wix or somthing else

    Reply
  12. TohBey Post author

    Might just be my headphones, but i think you need to turn down the bass(?) in your voice a bit.
    Other than that. Great video.

    Reply
  13. nuwan goonewardena Post author

    Hey red stapeler, could u pick maybe one of these and do a tutorial on how to do it?

    Reply
  14. Napalone mamuśki z twojej okolicy Post author

    Most of these examples are made just because they can. They’re unusable

    Reply
  15. Bahtera Kurniawan Jaya Post author

    Me: i want to created outstanding web design, Client: i want u to make a website for us, but we dont care about design, our budget only a half for your demand, just use wordpress template!

    Reply
  16. Цзин Кэ Post author

    Only the last one and color mask picture could be useful.

    Reply
  17. Oldie Goldie Post author

    Stop wisper and speak like a man, iritatibg wispery voice

    Reply
  18. Huaixing Su Post author

    the last one is stunning, the others are a little confusing and only demo level.

    Reply
  19. TheRealNaxos Post author

    Not stunning design, extravagant. No where near good design.

    Reply
  20. Bit Whys Post author

    I have to be honest… I feel like there is a different level of quality between your website and your YouTube channel. I bookmarked the site cause I saw some really cool tutorials but kinda got a slight "shady" vibe from the site. It could have been ads or just the layout, not sure.

    However, your content here is top-notch and shows a level of detail and consideration that one might not get from the website. Since your clearly a thoughtful and knowledgeable designer and developer, I would suggest a redesign of the site. Just a suggestion, but either way thanks for all the content and keep it up.

    Reply
  21. Chriss Re Post author

    They all Look fine but the shop grid is not well separated to be useful. The brands blend with the brand next to it. I would make the shadows more present. Most of those effects have one big problem. Aside from some promotion i get far beter user experience without them.

    Reply
  22. Marios Kexagias Post author

    have you all these ? example , number 1/2/3/4/5/etc , and show us all the code?

    Reply
  23. Balaporte Jean Post author

    that's awesome bro
    thk you
    Jesus loves you
    and he'll come back
    Believe in him and repent !

    Reply
  24. The Brand Team Post author

    Really great stuff, just note that some things can be done with fewer packages or some vanilla JS and CSS. Example, droppy woppy input can be done with matter.js and some css tweaking. Keep up with the great vids.

    Reply

Leave a Reply

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