Streaming live at 10am (PST)

Sectioned design inspiration links


#1

I went through my "inspiration" bookmarks folder yesterday and put aside some for the Webflow community. They are all "sectioned" design related. (is there a better term?)

  1. http://www.letstravelsomewhere.com/travel-inspiration/pascal-mannaerts-malaysia/ - Very slick, the text block is neat. Observe its behaviour when hovering next and prev articles arrows.
  2. http://www.nytimes.com/projects/2013/tomato-can-blues/ - Typical NYT lab thing, filed under "neat". How wool will it be to work on such behaviours without coding when Webflow will treat us with scrolling capture and parallax?
  3. http://mailchimp.com/goes-with-you/ - Strong advice for websters: if you don't use Mailchimp products, you should anyway know their website from A to Z. They know web, a lot. Also even if you don't use them, test drive their apps, really. Mailchimp devs are Webflow quality devs at the very very least. After a chile you'll see that they don't use trends, they often start then, or popularise them.
  4. https://medium.com/p/c7d422e3ebee - because among all the beautiful-but-crap content on Medium, there are some beautiful-and-meaningful experiments too.
  5. http://www.blackmagicdesign.com/products/blackmagicursa - As a filmaker, this page excites me on various levels. Rad page for a totally rad product. I hate when people usually use "mind blown" when they see a goldfish following a laser pointer, but this product let me speechless for minutes (the price is very low). As for the page, the pics are gorgeous and very very well exploited in the sections. How they bleed outside of the main content is very elegant. It breaks the layout to let your brain breeze and it kind of make a reading path. I'm already photoshopping my sections images to make some elements pop up outside.
  6. http://bellroy.com/pages/slim-your-wallet - talking about reading path, here's one pretty obvious. It's a fun page! For a product that i'd like to get eventually. This link is filed under my "purchase" bookmarks folder as well.
  7. http://avocode.com/?utm_medium=email&utm_source=csshat_purchasers&utm_campaign=avocode - A dark one, colors are good, animations on load are nice. I bookmarked it also for the product.

Now who's turn is it?


#2

That Avocode got me gitty. Thanks for the shares!


#3

Wow! Thanks Vincent.

A confession: I've been feasting my eyes a gorgeous,scrumptiously laid out site that...alas, is not responsive :o( https://munchery.com/

  • The 'reveal on hover' over the nav item 'MORE' in Header > reveals clean sub-nav
  • Minimalist 'reveal on hover' interactions for the '+'/ add buttons & Subscribe form
  • 'Hide on scroll' > hides Header so viewer has more page height

Love their breadcrumb like interactions: 'reveal on click and scroll' reveals a moving underline below the titles of each section of a page - which is also used in a slider here in the MAKING EATING BETTER EASIER section

Question:
a) I love wider-than-960 layouts (e.g. Munchery.com is 1200px). I read Webflow is working on wider but can I design at Webflow's current 960 and expect it to scale to wider with the injected code (that I saw floating around the forum somewhere) - yet still be responsive?

Again, big thanks to you for kicking this off Vincent (just please, no more Blackmagic /photog gear sites - I'm only just managing to get my photog gear addiction behind me smile )

Adam


#4

#5

Thank you so much for taking the time to post this - I'll try it out today!


#6