Give ‘n’ Go

givengoI’m on my second round of  Girl Develop It classes with the Seattle chapter. I’m learning that HTML5 and CSS3 are pretty powerful and can be dare I say – fun? From a design perspective I think its always a plus to learn some coding skills. It makes it easier to talk with your developers and empowers you to work independently on side projects.

While in class we’ve been inundated with wonderful code resource after resource. Everything from the helpful HTML5 Doctor to learning the possibilities of CSS3 buttons. My favorite so far has been Give’n’go, a CodePen collaboration with Dribbble. Basically developers peruse Dribbble, find something interesting and develop the code snippet. This little squirrel up top is my favorite, Dribbble snapshot on the left, interactive CodePen on the right (go here to see it blinking). You can even inspect the code to see how it was created. I think this would be a great exercise if you’re new to coding like me.

If you’re interested in learning to code whether it be html, css, javascript or something more advanced check out Girl Develop It. It’s likely they have a chapter near you!


CodePen 2013 Most Popular

Equations for Organic Motion - Test Sheet

Equations for Organic Motion – Test Sheet by Justin Windle

Anytime you want to stare at some incredible examples of what people are creating in the front end dev world just start exploring CodePen. If you are a CodePen first timer, you can start with the curated list of the 2013 Most Popular. Fair warning that minutes can turn into hours. Not from personal experience of course… In a practical sense, I’ve used the site to ferret out some bugs and play around with CSS before talking to devs on quick projects. Saves the “Can you make that larger? No a little smaller… still smaller. Ok, too far, slightly bigger.” You get the idea. I didn’t get the nickname Pixel Perfect Girl at work for nothing.


Interactive Resume

Website of Robby Leonardi

I like crazy examples of people pushing normal patterns with personal websites. In terms of designing your resume online, this interactive resume has to be one of the most elaborate I’ve seen recently. When you scroll the site plays out like a video game going through different levels to show skill levels and content. The illustrations are bright and remind me a bit of video games I used to play with my brother as a kid. I like the subtle details put in like the bubbles when underwater and the timed animations. Overall a fun idea.


Pure CSS Minion


As I get excited to go see the new Despicable Me movie tomorrow, I give you a Pure CSS Minion. I’ve been seeing a lot of great examples of what you can do with CSS beyond styling text these days. Another example to check out is Logos in Pure CSS, where each of the logo images hover over the CSS example to show how much the shapes match up. Only the Github logo seems like one little shape on the tail is missing. Pretty impressive overall I think.


Be a Code Superhero

I can’t say like the girl in the beginning of this video I wanted to be a mermaid growing up, but I never knew I wanted to work in software till much later. I started by working on a lot of small website projects. It wasn’t until I came to Seattle and tasked to start building prototypes when I really started to love it. Learning how to code is empowering. Having amazing mentors for me has been everything. It’s all about solving problems. Big complex puzzles that ultimately have an answer, you just need to take the time to find it.

“You don’t need to be a genius to learn how to code, just determined.”
Vanessa – created Girl Develop It

It’s not hard, just at first glance it may appear that way because it’s unfamiliar. Ever enjoy the Where’s Waldo Books? Trying to fix an error is sometimes like finding Waldo, but instead of a guy wearing a winter hat and striped shirt Waldo is a missing semicolon ; something so small, but makes a big difference. When things work just how it was planned, it’s magic.  -Brittany

Above video is how is growing computer programming education. 

Inspired by the dribbble community

dribbble typeI’ve been finding a lot of inspiration on dribbble lately. There are definitely some talented designers and illustrators uploading their work to the dribbble community. These are a few of my favorites this week (but not necessarily created this week by their respected designer). Be sure to browse dribbble if you haven’t done so already! -Holly

Designs clockwise: Moon Boots by Rokas Sutkaitis, Coolifornia by Friends of Type, Get Dough by Nick Slater, & We Make by Mary Kate McDevitt

Tech Wallpaper / 02

snow-abstract-setOne of my favorite parts of winter is snow. It rarely snows in Seattle if but once a year, so that means I must take to the mountains. Lucky for us they’re only an hours drive away. Today’s wallpaper I call “Snow Abstract” and I hope it makes you feel closer to the mountains too! – Holly

Downloads: 1024×768 \ 1280×1024 \ 1680×1050 \ 1900×1200 \ 2560×1440 \  iPad  \ iPhone
Click on any of the above sizes, right click the image to save to your favorite device, set to wallpaper and voila you have a new wallpaper!

Download past wallpapers.

Site Inspiration 01 / NYT Snowfall

NTY Snowfall Article
NYT Snowfall
The New York Times is doing a series on Snow Fall, and not only is the article a great read but the site is beautiful. I love how the paralaxing plays with timed animated gifs, videos and photos. My favorite section is probably the arial video of Cowboy Mtn, but that may be because I enjoy boarding at Steven’s Pass and seeing it birds eye is pretty cool!

I think it’s safe to say that paralaxing has become really popular this year. We all became familiar with it when Nike introduced their Nike Better World site. It appears to have since been taken down, but if you missed it check out Seth Weisfeld’s vimeo of the site. Have you come across any paralaxing sites that made you go wow? -Holly

View the article and site here.

Tech Wallpaper / 01

Wallpaper for your tech
We love pretty wallpapers and are excited to be creating some free goodies for your favorite tech devices. I love the holidays and couldn’t help but make this month a little holiday themed with a dash of Picas & Pixels. We have an abundance of sizes below to fit perfectly for any of your devices. Not sure which one to download for your desktop or laptop device? 1024×768 is generally a safe bet! And don’t forget to check back each month for new wallpaper downloads! -Holly

Downloads: 1024×768 \ 1280×1024 \ 1680×1050 \ 1900×1200 \ 2560×1440 \  iPad  \ iPhone 4s \ iPhone 5
Click on any of the above sizes, right click the image to save to your favorite device, set to wallpaper and voila you have a new wallpaper!

Designing for iOS

ios specsIt seems I’m always looking up the iOS resolutions for various mobile projects, with the ever changing technology (hello iPhone 5 :). And I’ve found it really helpful to have all the specs in one place. If you’re always searching like me, feel free to download my cheat sheet. – Holly

Related Posts Plugin for WordPress, Blogger...