Design Features in Professional Websites

Kool Website Designs

http://www.calm.com/

This site is probably the most interesting one I've found. It's by far the most minimalistic functional website I have seen, with at the most 5 different things taking up screen space. The obvious one is the background video, the 2 buttons in the bottom right for volume and video selection, and the logo, with a button for the menu which advertises their app & offers different amounts of meditation, and links to various affiliated pages.

I first took interest in the menu, and found that it was a simple animation done with CSS3.

After that I found where the videos were hiding, which are shown through HTML5's video tags and some javascript to fade it in and out.

 Finally, I found the code for the actual video controls. The code for which is incredibly long, so I grabbed a screen cap of the different names for the events instead.

http://thestatusaudio.com

This one was a little more generic for a professional design, featuring a lot of big pictures and some text. A lot of their design was hard to read if only because they made it overly complicated, but most of it used CSS3 animations. I went ahead and grabbed a simple example of this, with a hover button.

Next was an image rollover. I couldn't find the javascript used for this but I'm sure it's buried somewhere in the source code.

http://www.nicholasmoegly.com/

I wasn't able to find anything else unique about the last site, so I grabbed one last website that had something I actually hadn't seen before, although the only reason I was able to is because of the school filters.

This site has a neat loader spin thing, which used what looks like a combo of CSS3 and javascript for a placeholder loading image for social media links.