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 Details, Little Big Details, the 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!
1. Herrlich MediaOn 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 vadisCheck out an old school-looking cursor that fits the site’s antique atmosphere.
3. PH Digital LabsHover 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 ArchiveTry hovering on the lovely logo in the yellow box, and watch it make room for the text beneath it.
When you scroll down Grafik’s blog, an envelope button appears, and hovering makes the envelope change from closed to open.
6. WhiteboardOnce 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 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 NoiseInstead of tapping on your keyboard, drag your cursor around the screen to propel yourself from item to item.
9. SnipcartThis pageless site has a sticky header that smooshes in and sticks as you scroll down. Useful, compact, delightful.
10. Knuckles IndustriesClick the circles on the right-hand side, and watch the “X” clearly mark your spot.
11. QuechuaThis 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.
13. Axel AubertThere’s a tiny triangle at the top of the screen. Hover on it, and the page kicks backward to show the nav.
14. Herrlich MediaThis 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.
15. PinterestWhen loading images, Pinterest shows a central color of the upcoming image.
16. Sixty FPSA 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 MediaAnother Herrlich Media attention to detail: the colorful loading mustache on their portfolio page.
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 BlogAs you continue down the blog article, you get to know the estimated remaining reading time. It’s delightfully useful.
20. Paul StamatiouCurious 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. IGNAnother red loading bar shows your progress — but this time for a slider instead of a whole page.
22. SartorisanThis 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. SafariSafari’s URL bar doubles as a loading bar, filling up with bright blue.
24. Reunite the RiverWhen loading this interactive site, you get an Applesque loading graphic on a droplet followed by a river filling up.
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. ThreadlessYour cart is lonely and sad, but you have the power to put a smile on its face (and food in its stomach).
27. FacebookInstead of seeing your own name listed when you’re in a relationship with someone on Facebook, you just see “You.”
28. Sydney Convention & Exhibition CenterThe rippling blocks of white make for a memorable mail experience.
29. Watts NewWhile 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 TypeThe sliding bar and circle provide an efficient (and fun) way to preview your icons and colors.
32. TridivWatch the enchanting animation that introduces Tridiv’s icon (and the floating shapes to follow).
33. The Washington PostClick 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 ChromeA 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+Delete an entire circle of people? Sure I will, if I get to watch it roll away!
Delights for Mobile Users
36. IFTTTThough 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’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 MobileIf 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. SnapchatIn the Snapchat app, the ghost logo dances around when you pull down to refresh on your list of recent snaps.
40. iOS App StoreIf 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 😀 )