Blog

Learning Through Making

Thank you SubtlePatterns.com!

Thank you SubtlePatterns.com!

So I've been fiddling with the design of the page and I'm ready to settle for a bit before inviting people to come check out the new digs. The first decision I came to was the background pattern. I spent a lovely afternoon listening to Jeff Buckley and browsing SubtlePatterns.com while sipping green tea-- so very civilized don't you think? As is often the case with me, I come to the feeling first  or the big picture which is usually very clear to me from the beginning. And then I work backwards from there. I knew I wanted a lot of grey, but I also wanted dimension in some way. I wanted the site to feel like the office I hope to have some day. Modern and clean, but comfortable-- easy like sunday morning. The upholstery looking pattern felt right. Done. NEXT design consideration. Color!

Color

I 've been very drawn to this coral pink color for some reason. And I love it with orange... go figure, right? So then I picked a blue to cool down all that heat and I always like yellow and blue... and then, since it is clearly always my intention to rainbow gradiate, added green. Sure.  And I was still caught up on color dipping because of well, this stuff, and this, and everything on this board-- drool. 

Initial palate-- i like rainbows so much i don't even know i'm doing it!

Initial palate-- i like rainbows so much i don't even know i'm doing it!

Transparency, ftw? Nope. fml.

Transparency, ftw? Nope. fml.

Maybe circles? Maybe? A lady like? Maybe a lady can't read :(

Maybe circles? Maybe? A lady like? Maybe a lady can't read :(

Contrast

But the sharp contrast just wasn't gelling with my pillowy, upholstery, green tea and Jeff Buckley vibe. I liked the look but i didin't like the feel. I thought I wanted to color block  the whole page-- like a block of white at the top for the menu, a block of color for the header and then my diamonds and then a very web 2.0 dark grey and white footer with columns. Once i started putting it all together though, it just felt too heavy. There was too much dynamic energy and not enough ease. So instead I decided to deepen the palate and focus on a badge design element. It went something like this: 

Transient

It took a while to get the QR code to work in color. Lots of trial and error. Good news about designing for those though, you can round corners, stretch, and add color-- even take out certain parts and it will still scan. It appears to have a lot to do with the contrast in the four corners at least. For example, the parts that are currently green, when those were yellow, it didn't work. But it did work with blue and green. Odd. 

Living With It

So now I'm pretty happy with it. I brought in my fancy color tv ;-) I toned down the color scheme and added some transparency to the footer. I set my name and site title in a thicker, italic version of my body copy (Open Sans) to draw attention but also connote a flow. Right now it feels like it's done for a while :) The real design comes from living with it though. If i feel this way after using it and living with the design for a few weeks, then it's right. If it doesn't serve me, then, back to the art board for round 2 (thousand). But I digress... NEW WEBSITE! Ack! So freaking excited to have a brand new pair of web shoes for the new school year. See you later busted crocs-- mama's moved on to Finn Comfort. Grrrrl you know that's right.

Design Challenges

I have to admit, I'm really enjoying all the failures I'm having designing this site. Lol. I tell my students all the time that you learn more from failure than you do from success, but I mean, come on. Who likes to fail? Not this overachiever my friends, that's for sure. The interesting thing about designing for templated systems is that the constraints creep UP on you. They actually force you to be more critical about your design choices, don't they?

For example... I just started out with a banner graphic and made it look cool. In my head i think it went something like: color dipping is big right now, look how much I like it on Pinterest! and then this came out:

Transient

But then once it was on the page with everything else, it just didn't work at all. I like the color and I like the color blocking. As usual though, my scale and proportion are a litte off. And also, what does it really communicate besides my name? So then I tried the triangles as a background on the page itself. NOPE. Too distracting. In general, most of what I'm drawn to about my ideas for this design are too distracting. 

The question is, how can you add color, texture and pattern to a very modular site without looking all blocky and weird? Also, what am I trying to communicate about myself? I bet a bullet point would know...

  • Pop culture hound. It's a big thing for me. I am super interested in mainstream media (critical, but interested) and popular internet culture fo sho.
  • Into people. I'm social, my work is social, my pedagogy is social.
  • I'm an educator who spends a lot of energy and time designing for community experience. 
  • I love a the technology. On.The.Reals.
  • Serious crafter. Hence my pinterest obsession. I love fabric and beads and cooking. I do. It's true.

Does my banner communicate those things? Nope. Sigh. It's just cool. But cool is fleeting and cool is not my goal. Le SIGH. Back to the drawing board. and by drawing board, I clearly mean artboard.