From carefully considered microinteractions to detailed design experiences, designers and developers reward us with little nuggets — if we’re paying attention.

As a sequel to our delightful details post, we have yet another 40 details rounded up from our office and around the web, including examples from Delight is in the DetailsLittle Big Detailsthe Best Designs, and Awwwards.

Take a moment to smell the digital roses with us (and gain some worthy inspiration for your next web project). Cheers!

Happy Hovers

1. Herrlich MediaHerrlich Team PageOn the roll call of Herrlich Media, you get the studio’s iconic mustache jumping to each team member’s face as you mouse over them. (And one more bonus Herrlich hover: try touching the links at the bottom of the page.)

2. quo vadisquo vadis pageCheck out an old school-looking cursor that fits the site’s antique atmosphere.

3. PH Digital LabsPH Labs pageHover on the top links to navigate, and BAM! you feel like you’re outside a barber shop. Need some hover effects for your site? Check out Tympanus’s Creative Link Effects. (Bonus effect: scroll to the bottom and hover over “Strategy + Technology + Creative”)

4. Black Visual ArchiveBlack Visual Archive PageTry hovering on the lovely logo in the yellow box, and watch it make room for the text beneath it.

5. Grafik

Grafik pageWhen you scroll down Grafik’s blog, an envelope button appears, and hovering makes the envelope change from closed to open.

6. WhiteboardWhiteboard's button glowsOnce you get to the bottom of the page, the “About Our Company” and “Say Hello” buttons have a two-part hover: first the orange filling, and then a hazy orange glow.

More Than Just Navigation

7. Thinking for a LivingThinking For a Living's siteThinking for a Living gives us the chance to be keyboard ninjas (since copy-and-paste shortcuts get so rote). This site deftly provides a page to explain the keyboard shortcuts (see keyboard icon on top right of main site page).

8. We Love NoiseWe Love Noise's pageInstead of tapping on your keyboard, drag your cursor around the screen to propel yourself from item to item.

9. SnipcartSnipcart's siteThis pageless site has a sticky header that smooshes in and sticks as you scroll down. Useful, compact, delightful.

10. Knuckles IndustriesKnuckles Industries siteClick the circles on the right-hand side, and watch the “X” clearly mark your spot.

11. QuechuaQuechua siteThis splendid site features navigation on the left. Simply hover over the dots and you’ll get an explanation of where you’ll go — a very helpful touch.

12. TraskTrask's siteThe navigation bar’s icons are fun to put your mouse over. You can imitate these lively icon interactions with the help of resources such as LivIcons and Tympanus.

13. Axel AubertAxel siteThere’s a tiny triangle at the top of the screen. Hover on it, and the page kicks backward to show the nav.

14. Herrlich MediaHerrlich's arrow helps ease navigationThis site has a variety of rad features (and thus is on this roundup more than once!). For navigation, an intuitive arrow hangs from your browser’s chrome to guide you back up the long scroll pages.

Lively Loading

15. PinterestPinterest's loading screenWhen loading images, Pinterest shows a central color of the upcoming image.

16. Sixty FPSSixty FPS loading screenA loading screen that shows what’s actually happening behind the scenes? Cool! With PreloadJS magic, Sixty FPS ushers you into an impressive Chrome Experiment site.

17. Herrlich MediaHerrlich's loading screenAnother Herrlich Media attention to detail: the colorful loading mustache on their portfolio page.

18. YouTubeYoutube's page has a top loading bar

A red bar with a faint glow appears at the top of the page when your load speed is slow enough. A fine flourish!

19. iA BlogiA's blogAs you continue down the blog article, you get to know the estimated remaining reading time. It’s delightfully useful.

20. Paul StamatiouThis blog shows how far down the page you areCurious about your progress through Stamatiou’s post? A simple red bar at the top of the page subtly reflects what proportion of the article you’ve finished.

21. IGNIGN slider shows your progressAnother red loading bar shows your progress — but this time for a slider instead of a whole page.

22. SartorisanThis slider shows your progress through itThis slider’s green load bar improves upon IGN’s by segmenting it into the number of slides, then loading each cumulatively. It’s a delightful way to orient yourself within the slider.

23. SafariCheck out Safari's URL bar loadingSafari’s URL bar doubles as a loading bar, filling up with bright blue.

24. Reunite the RiverReunite the River's load pageWhen loading this interactive site, you get an Applesque loading graphic on a droplet followed by a river filling up.

Terrific Text

25. SoundCloudSoundcloud's site shows "epic" in time length

If you look at the URL when you’ve filtered your search results to “> 30 min,” the duration isn’t “greaterthanthirty”… it’s “epic”!

26. ThreadlessThreadless site's cartYour cart is lonely and sad, but you have the power to put a smile on its face (and food in its stomach).

27. FacebookFacebook relationship statusInstead of seeing your own name listed when you’re in a relationship with someone on Facebook, you just see “You.”

Enticing Emails

28. Sydney Convention & Exhibition CenterAn example of a delightful emailThe rippling blocks of white make for a memorable mail experience.

29. Watts NewAnother delightful email designWhile the engaging visual on the laptop graphic strikes you first, the email’s creator paid attention to the email’s length and added useful “Top” links throughout.

Endearing Actions & Animations

30. Lush TypeLush has a great interactionThe sliding bar and circle provide an efficient (and fun) way to preview your icons and colors.

31. SparkboxSparkbox's site has a delightfully useful footer – plus an easter eggVisit the bottom of the page and get a bigger footer with more info. Then, if you’re not impressed, you can get an extra easter egg.

32. TridivTridiv's SiteWatch the enchanting animation that introduces Tridiv’s icon (and the floating shapes to follow).

33. The Washington PostWashington Post's special articleClick the spinning silver icons to learn about the perilous Great Falls of the Potomac River Gorge, and cue the animations about swimming dangers.

34. Google ChromeChrome's handily helps you close tabsA simple pleasure in Google Chrome is the ability to close the tabs to the right — which are usually the ones you want to disappear.

35. Google+Google+ animates the circles that you deleteDelete an entire circle of people? Sure I will, if I get to watch it roll away!

Delights for Mobile Users

36. IFTTTThe If This Then That App has a great logo feature when the app screen flipsThough you have to first download the iPhone app, IFTTT has a great attention to detail in its logo. See a hazy IFTTT logo when you check out the settings on the mobile app that’s flipped as if you’re looking through the back of a clouded glass door.

37. PathPath has a great menu that goes from a + to an xPath’s entertaining “+” button in the lower left of the screen turns into an “x” and pops out a bunch of options. Bet you can’t tap it just once…

38. Spotify MobileSpotify Mobile's load bar is a nice ellipsesIf you get the mobile app for your Android or iPhone, you get to watch the ellipses jog along while you’re waiting for your tunes.

39. SnapchatSnapchat's load bar dancesIn the Snapchat app, the ghost logo dances around when you pull down to refresh on your list of recent snaps.

40. iOS App StoreiOS App store lets you go straight to your fresh, new appIf you stick around the App Store while your new app is downloading, you’ll see the button change, and you can open it right away.

More Details To Attend To?

What details have you seen that you’d say belong on this list? Share in the comments!

(And let’s give the designers and developers who created these details a digital pat on the back 😀 )

Comments