Finished a freelance project this week! I was hired to create a logo for a friend’s condo, Helene’s Retreat. I’ll be writing about the entire process a little later this week, I have homework to get done for now…
Category: Work
Illustration: Drew Space
Posted onClient
Challenge
Recently a friend asked me to make him a profile picture for his Twitch account. He wanted half to be his face, and half to be a Dead Space mask. Since I’ve been in a flat design phase for a few months, it was a perfect fit. This post is pretty image-heavy, obviously.
Overwatch: McCree
Posted onSo I participated in the stress test and the open beta for Overwatch. I might be addicted. I spent way too many late nights and hours blowing shit up with Junkrat, flying around like a lunatic with Pharah, and zooming through enemy fire with Mercy. HOLY SHIT THIS IS THE BEST GAME EVER.
Ahem. Anyway, my friends and I are all jonesing super bad since it doesn’t release until May 24, so I drew McCree, one of the heroes, for my husband. He wanted a graphite drawing, and I chose the cover of McCree’s comic as I thought it was a great image. Turns out that doing graphite shading when the original is shaded with watercolor-esque is fucking hard.
This is one of the only drawings I’ve ever done that I like; that just doesn’t fucking happen. Next up: Junkrat!
Tools used: Bristol paper, graphite pencils
Text Effects Sass functions & mixins
Posted onCSS has come a long damned way from the days of having to use tables because positioning wasn’t available. (Sure, dating myself a bit, but as they say: you’re only young once but you can be immature forever.) Time was that if one wanted any sort of effect on text – and we’re talking system installed fonts here, nothing fancy – you had to create an image. Once the semantic web was encouraged, you then had to replace a heading tag with said image to get the best SEO as well as have the creative look. Of course, every browser had different support for the technique so there were dozens of image replacement hacks. (If you’re interested in a history lesson, CSS-Tricks has an entire page dedicated to the different techniques.) Nowadays CSS can do a helluva lot of basic text effects directly in the browser, with fantastic cross-browser support.
Windowfy Sass Mixin
Posted onIn my travels around the internet, I see many interesting portfolios for both designers and developers. Often these portfolios include images of the web site or application as it would look in a desktop window, usually an OSX (Mac) window. I really liked the effect, and I wanted to recreate it in CSS. Once I had done that I thought it was pretty cool, and I wanted to share it so I made a Sass mixin, which proved to be more enlightening that I had originally anticipated.
First Evah CodePen Online Meetup
Posted onSo last week we had a CodePen online meetup. This was my first ever meetup, online or not, and it was FANTASTIC! We had to present something, and about 2 pens in I was doubting my abilities, but whatever. I’m sure someone out there is doing something similar and my pen helped them. See and read about the glory!
I had this typed up and didn’t post it, but rather saved it as a draft. Then I saw that they posted the video over on the CodePen blog, so I’ll just link to that. We plan on doing it again, so if you’re interested, keep an eye on the CodePen site for more information!
Flat Solar System
Posted onMy daughter is learning about the solar system and other bits of astronomy in school, so I thought it would be fun to create a little CSS animation that shows how the orbits work. I found this image on Dribbble that I really liked the look of, and decided to recreate it in CSS. This served well enough to explain to her how much smaller than the sun we are, and the Earth’s place in the solar system. Right now of course, these orbits and sizes are not at all to scale, but maybe someday!
Product page redesign (unused) – Bass Pro Shops
Posted onNOTE: This is an incomplete piece and was never officially presented to Bass Pro Shops for consideration.
In 2014, while working on optimizing the CSS (a project that got postponed indefinitely) I started envisioning a product page redesign for Bass Pro Shops. The current product page was created in 2012 when the big site redesign happened, and while it was acceptable for that time and place, it wasn’t holding up well under evolving user needs. Since this wasn’t a requested project I had an open canvas for design, which was quite rare.
Eat/Sleep/Code/Repeat
Posted onWhen I saw this little gif on Richard Keeling’s website I knew I needed to recreate it in CSS, with a couple of minor changes.
Keep In Touch (social links) – Bass Pro Shops
Posted onIn 2014 I redesigned the Keep In Touch (social links/icons) landing page and the area in the footer on Bass Pro Shops. If you’ve been reading this series, you can probably spot a pattern; Bass Pro did a lot of redesigning in 2014 to bring many pages up to the newest site design standards.