Show & Tell: Google Video – How Video Gets to You

by

0

screen-shot-2016-12-06-at-1-13-48-pmGoogle always has awesome animations. They truly are on the forefront of CSS animations. So I was watching a video (Sharon Jones & The Dap-Kings ‘This Land Is Your Land’ live in Chicago) on YouTube the other night, and it was a bit choppy. Google put up a notification bar below the video asking if my video playback was having trouble. Curious, I clicked the link. I was first presented with a Google Video Quality Report. From the page: “There are many factors that influence your video streaming quality, including your choice of Internet Service Provider (ISP). Learn how your ISP performs and understand your options.”

There is also a link that explains how video gets from them to you. This is the part that I loved. The animations show you in simple terms how video travels from them to you, using an image from the video you were watching as an example. Have a look!

Show & Tell: 10 HTML+CSS+JS experiments to try out

by

0

screenshot-2016-11-29-12-29-05I found an article hosted by the CSS Design Awards site that shows off 10 experiments using HTML+CSS (and sometimes JavaScript) to produce some amazing effects.

There’s an effect called tearable cloth, which, while not very practical, shows the amazing things you can do with HTML, CSS and Javascript. There’s a peelable sticker, which I could see used to reveal a coupon code on an e-commerce site. There’s a “jelly” scroll effect for mobile devices that looks sharp. There’s also, for you diehard Star Wars fans, a Star Wars-like text scrolling effect like the movies. And then my favorite, the 3D unfolding dropdown menu.

All of the effects are presented through codepen, so you can see how to implement these effects in your work. Check out the article on CSS Design Awards.

 

Show & Tell: Dealing with the Pressures of Constant Creativity

by

0

This week’s show & tell is an article that could prove useful in our futures. In a world where we are pushed and pressured to think creatively – and do it quickly – sometimes we’re just not feeling it. Envato’s blog (the people behind Tuts+) has some tips for us.

https://envato.com/blog/dealing-pressures-constant-creativity/

Style Tile: Taste of Polonia Event Site

by

0

(Taste of Polonia website image)

The current Taste of Polonia website (click for larger view)

The event I chose for my project is the Taste of Polonia Festival. Taste of Polonia is a festival celebrating Polish culture, food, and music and is held annually in Chicago’s Jefferson Park neighborhood.

The existing site needs help. It’s rather garish, and seems stuck in a time warp from 2000. Thankfully, it’s at least usable, even if not exactly visually pleasing.

Continue reading →

Show & Tell: Duet Display

by

0

Duet DisplayIf you’ve ever wished your Mac had a touch screen, good news! An ex-Apple Engineer came up with an app for that.

The app is called Duet Display, and it turns your iPad or iPad Pro into a touch screen-capable additional monitor for your Mac. You only need to connect your iPad and Mac using the Lighting connector and run the app, and voila!, your iPad is an additional and powerful screen for the Mac. Continue reading →

Show & Tell: Bright Bright Great

by

0

Bright Bright GreatI am in love with Bright Bright Great’s landing page. Everything from the background video to the typography made me fall in love with their site.

For those not in the know, Bright Bright Great is a design, strategy, and technology agency based in Chicago’s Avondale neighborhood (OK, if you want to get super technical, they’re in the Belmont Gardens neighborhood, but we won’t split hairs).  Continue reading →

Show & Tell: Material Design for Bootstrap

by

0

Material Design for Bootstrap marries together the best of Google’s Material Design and Bootstrap in one easy-to-use framework.

Material Design for Bootstrap marries together the best of Google’s Material Design and Bootstrap in one easy-to-use framework.

It’s no secret that I love Bootstrap. I’ve started using the new 4.0 Alpha version for my redesign/rebrand project, and that’s been quite an undertaking since there’s a lot that has changed in the way Bootstrap does things.

But while I was researching the new 4.0 Alpha version, I ran across something new and unexpected. May I introduce to you Material Design for Bootstrap, putting together the best of Google’s Material Design and Bootstrap.

Continue reading →

Rebrand/Redesign Project: TPAN Site first draft

by

0

TPAN Site First DraftFor the TPAN website rebrand/redesign project, I am once again choosing to use the Bootstrap framework. I am a big fan of Bootstrap because it takes the guesswork out of designing websites.

Because I tend to use Bootstrap quite a bit (currently at version 3.3.6), I’m considering switching over to the Bootstrap 4.0 alpha release. With version 4.0, the folks at Bootstrap are completely rewriting the framework to use flexbox, which is an exciting development. I’m considering switching over to it because I want to get my hands dirty with the newest version and take advantage of the flexbox advancements.

Show & Tell: COLOURlovers

by

0

COLOURlovers ScreenshotOne of the coolest websites I’ve been following for a few years now is COLOURlovers (yes, spelled the proper British way). Much like Adobe Color (formerly Adobe Kuler), it hosts user-generated colour pallets that you can peruse and use. COLOURlovers actually pre-dates Adobe Kuler/Color by a few years. Like the Adobe Color website, it also allows you to download most colour pallets (except those the author chooses to disallow downloads) as an .ASE file for use in Illustrator and InDesign, .ACO for use in Photoshop, as well as colour pallets in many other different formats, including plain text with HEX codes for the web.

Definitely worth checking out for inspiration for your next design or web design project.