Hip Front-End Wizadry

In this topic, let’s discuss some of the trendy, hip front-end things and how they are done/their effectiveness. What I mean by that, is for example, if you go to pretty much any new, upcoming startup’s website… You’re going to typically see a pretty hip design and layout featuring image-heavy content and even some background videos. We can switch topics here but lets show each other links of websites that feature content like this and then lets discuss, break it down, and talk about implementation. This will help us all grow as coders and stay up with current trends.

One thing I’m seeing more and more lately is actually background video. It is typically done in greyscale as well. Does anybody have experience with this and know how it is achieved? What part is done in the coding vs what is done in the video editor? Also, what about browsers which don’t support or slower systems. Let’s start with a discussion on that. Links:

https://www.jumpcut.com/

I’m starting to see a lot more cool backgrounds with SVG…

Some websites use SVG shapes to make the backgrounds angled in a way that cuts the page from div to div in a cool way. Instead of having different coloured background to differentiate sections, SVG allows you to make cool cartoons and curved/edged backgrounds when transitioning down the page…

A page like this => http://pixels.fi/en
They use SVG’s to create the animation on the front page…

2 Likes