Entries Tagged 'Design' ↓

Although I make my living as a web developer now, I still can’t resist dabbling in print design (which is where my career in design and development started). I’m feeling a bit rusty with creating initial design concepts, but with the right inspiration and a little time to shift to that other side of my brain I can come up with some pretty fun things!

I had the pleasure of creating save the date postcards, an RSVP postcard, and an invitation for Bertine and Zach’s wedding. They provided a few links to other designs around the internet that they liked, told me their desired color scheme, and let me loose! We probably went through three or four “do you like this or that?” rounds of concepts, but I very much enjoy where we landed!

There is just no greater feeling than holding my design work in my hands — something that is not so easy to do with the web! There is just something about the texture of a nice paper and the smell of fresh ink… I think I will hold onto my print design knowledge as much as I can, though I always have knitting (and now sewing) for other tangible evidence of my creativity and craftiness.

Bertine and Zach were very easy-going “clients,” so I thank them for entrusting me with this project! And it seems that doing this work has opened the possibility of more freelance print design work — tonight I’ve been working on my friend, Mary’s, save the date postcard for her wedding (to Jonathan) in June.

I’m very happy to be able to help my friends as they go through such an important part of their lives!

And, oh —

Bertine had a few invitations left over, so she was able to get crafty with a hole-puncher and use the smaller details of the invitation to wrap around the favors (hand warmers for winter in Minnesota). Love it!

i don’t post nerdy things about what i do professionally very often, but i thought this one might be beneficial to others. there are also a few elements in the solution that i’d like to better understand, just because it’s so nice to learn. so if anyone has any further tips, please share!

on to the good stuff — the company i work for is undergoing a pretty major rebranding. we’re a division within the company and still working out some of the kinks in order to keep our part of the business somewhat unique, but i started working on our new web styling this week. here were my goals:

• affect the html pages as little as possible (as we have hundreds upon hundreds, so it’ll take some time to adjust each and every one) and do most of the design work via css
• but also try to add/change as little of the css as possible, just to keep it a little less complicated
• and use a flexible layout with the intention of being a little more accessible to mobile devices

so, most of the new styling was applied pretty painlessly (such as a new background color, new typeface, and new header graphics). it wasn’t until i got to the content area until i started having trouble. though making a flexible layout (that would expand or contract depending on the viewer’s browser window size) wasn’t difficult, the two columns i needed within were a little bit fussy. one of my columns (#navigation) needed to be a fixed width, and i wanted the other column to expand or contract as necessary to maintain the design. i spent most of the first day when i was working on this project looking around the internet for a solution, but i just could not find the right resource.

so i tweeted my frustrations and went home. but i continued to think about it all. night. long.

i found flexible layouts with css positioning by dug falby on a list apart, and tried to use the tips in this article.

however, as expressed in comment #7, the css styling in this article placed all the container height importance on one column, #navigation. which brings me to another point i needed to keep in mind with my new layout — most of the content on our sub-pages is defined by the client that “owns” the page. they may have a lot of text explaining their program (in the #copy column), or they may add more related links (in the #navigation column). either way, i needed either of my columns to determine the overall container height, not just my position:absolute column.

having position:relative on my #container and position:absolute on my #navigation column just wasn’t working. i wanted to believe that some css magic had been thought up since the article was written in 2002, but i just couldn’t figure out how to get my #navigation to determine the height of the #container and push my footer elements to the bottom of the page. i got close with a couple other solutions (though i didn’t document them and my memory, even just a few days after all this craziness, isn’t what it used to be), but couldn’t find exactly what i wanted.
i did also try to float my two columns. or at least tried to float the #navigation column, but i had two problems with this simple solution:

1. i would have to move the code of the navigation above the code for my content, which would not be very nice for users of screenreaders or for browsers without css-rendering capabilities.
2. i would have to give my #copy column a fixed size, or somehow try to find the magical minimum and maximum percentage of width to fit both columns in the #container no matter the browser window size. dislike.

however, the next day i found a very succinct example via dynamic drive.

here’s the code i ended up with:

notes:

• overflow:auto was the recommended code, though i found that in ie7, it just added scrollbars to my #wrapper in a smaller browser window. so i changed it to overflow:hidden and that seemed to be a-okay.
• anyone interested in explaining a negative margin to me? i’m not sure why this works or what exactly it’s doing, but i like whatever it is.
• _padding is apparently a fix for ie6? i figured it wouldn’t hurt to have.
• i added display:inline in order to keep #navigation aligned to the right margin of my design in ie7 (without this, it was either falling outside of the margin in small browser window or aligned too far inside of the margin in a larger browser window). why is internet explorer such a pain?

i’m pretty pleased with this solution. it’s a bummer that i had to add another div (the #container that’s around #copy), but i’m sure it would’ve been difficult to find a design solution (that made me happy) that wouldn’t involve moving things a little bit on the html pages, so oh, well. i don’t have to worry about how that’s going to work for another couple months. we will also be adding global navigation within the bar across the top of the design, and figuring out how a few other elements that are optional on the pages will layout. for now: i’m calling this a success with css!

i thought about a series of items and people repeatedly this weekend. one of the items was this blog.

i take all of these photos to share. so i post them on flickr. my flickr feeds to facebook now, and i post my photo-of-the-day to twitter. so i’m sharing photos and friends are seeing my photos, but what i really, really want is to share them here.

so i think i need to create another blog or two. one for my random everyday life things, one for my crazy adventures (i’m so far behind), and one for design and inspiration to be a designer (i got two new books this last week).

i’ve been looking to blogs like the pioneer woman or dooce for their set-up and how they manage things. i also read raymi and covet the simplicity of her posts and blog style (anything goes, post all photos, forget things/remember things, write like you’re gossiping with a friend). so i guess i’m conflicted on how i want to use this little pork chop cutlet of the web.

it’s somehow already autumn and for about a second a couple months ago i was full of motivation. then i went on vacation to new england. when i came back, i didn’t really want to be back. it was just so great going from town to town, stopping where we wanted and doing what we wanted and eating really great seafood. we got back to minneapolis and suddenly summer was over and the fun had stopped and my calendar was empty and i was broke and it was cold enough in my house that my cats are on me all of the time. in the span of my 6 vacation days, things in this fair city slowed to a seeming halt. (though work got busy, but that’s something else.)

i guess it’s becoming more and more okay that it’s autumn and soon it will be winter. this happens every year, i think. i complain about how it seems like other minnesotans forget how to drive in the snow (and rain, and at 8 a.m., and when the sun is shining, and when there’s a game…); i guess i forget how to keep up my spirits in the autumn?

luckily there are occasions such as happy hour (“happy tower” at parma 8200, though i’m not really sure why) and the minnesota renaissance festival to ease me through the transition.

also, the sky has been just incredibly lately. i spend too much time taking photos while i drive lately, maybe. i just can’t resistant purple and pink clouds!

so i spent friday night watching chick flicks and thinking about my blog and knitting. early the next morning, vani and i went to the renaissance festival. of the 40 years of renfest, i would guess i’ve gone to about 10 of those years? not all sequentially. i went once or twice as a pre/early-teen, then a couple times as a snotty high schooler, and a few times during my college years, then i’ve gone the last three or four years… so, it’s a place i enjoy, obviously.

always must have chicken and wild rice soup in a bread bowl. my own personal tradition. since i went with vani this year, i even got fresh ground pepper. (she carries it in her purse! because she’s a genius.)

vani played an olde strategy game while i photographed chess pieces.

we enjoyed a turkey leg. geez, that thing was massive. tasty, though.

and to offset the photo of vani digging into said turkey leg, here is a cute photo of her wearing a bodice from felix needleworthy. i always stop by the shop and say “hi” to estelle.

vilification tennis is hilarious. i introduced the show to vani as jason introduced it to me at last year’s fest.

this dude was making little glass critters.

we stopped by to ooh and aah at twig the fairy, but she was out and about. we borrowed her backdrop for a memory moment.

this dude again.

this camel is peeing. vani thought that if i tweeted that i was watching a camel pee it would be too much information, so i got the camera out instead. (?)

i bought a pretty gypsy-style bodice because i want to be a gypsy girl. i’ve got a whole lot of costume left to develop, though.

i didn’t see very many fairies this year. maybe it was too cold of a weekend? or maybe they were extra sneaky.

glass blowing! i had a prime seat.

i was all: how much?! but there was still a long, finishing process for the vase to go through. after we watched the demo, we went through the shop again with open eyes. all amazed at the beautiful. i wanted to buy something but anything i thought was worth buying and that i would use was well over $50. if i hadn’t bought the bodice, would i have bought some glass? hmm…

glass blowing demo was by david tate.

post-festival, i laid on my couch all night and watched john hughes movies. because that’s how i roll.

this morning i brought kristi to chez daniel to help me spend a groupon. i had read that the brunch was amazing, and i love a good brunch, so away we went. it was a weird little restaurant inside of hotel, so it was kind of hard to find at first. or maybe my hunger was blocking my direction skills. in any case, we got in, got seated, ordered coffee, and went to town on the buffet. all sorts of breakfast items, cheeses, pasta salads, plates upon plates of dessert, and a chocolate fountain! (i went in for a chocolate-dipped pineapple before bothering with anything else.) the mashed potatoes were among the most notable menu item.

afterwards we went to ikea, where i wanted everything. mostly i want a new desk and desk chair and an expedit shelf with boxes for organizing stuff. i didn’t buy anything though: i told myself i have to clean out that second bedroom that i keep closed and ignore before i can even think about buying furniture i probably don’t need at this point in my life.

those idea houses really are full of genius ideas.

parting, unrelated note: sometimes i look in the mirror and admire my hair. i haven’t dyed it in years; all of my highlights are natural. my color is my own. i look in the mirror and wonder how i got to be so blonde. am i having more fun? maybe.

man, i miss summer, though.

Hey, I got a new tattoo. It’s very itchy today (but I’m not scratching!).

Stuart recently began apprenticing at Tough Love Studio in south Minneapolis. He needed some victims volunteers to begin his new adventure in tattooing, so I said “sure.”

I found an image of a bison cave drawing through Google, and Stuart worked with the image to customize it for tattooing. He did a very lovely job; I’m very happy with it!

The colors in the tattoo are perfect — when it heals a bit more and calms down, it’ll look nice and organic. Maybe I’ll call it my bison birthmark.

Stuart kept his workstation very orderly. It was all very clean and comforting.

After a brief break so I could stretch my leg, little droplets of water (or is that ink?) would gather on the tattoo as if it was sweating. I thought that was kind of cool — this is the first tattoo I’ve gotten that I could actually watch while it was being done. My first tattoo was a scorpion (because I’m a scorpio) in 2000, and the second was a very small line-drawing of a rooster I doodled in Germany in 2004).

The actual tattooing was more uncomfortable than I remember it being, but I suffered through pretty well (though not without verbalizing “ow ow ow”).

This was the sketch Stuart created before making his stencil. There were slight modifications between this and the final tattoo that we discussed beforehand.

I go back for a touch-up in about a month!

When we were done, Stuart wrapped me up and we went out for a celebratory beer. Yay for a new pet!

I forgot to mention some other web projects which are pretty exciting lately:

I recently redesigned my design for Kira Elizabeth’s website. Kira is a clothing designer specializing in wedding gowns, but she also styles accessories.

A news release for UExcel was recently released.

College-bound students now have a new option when it comes to getting ahead in college and saving money on tuition. Two leading education organizations, Pearson and Excelsior College, are launching a new credit-by-exam program called UExcel™. The UExcel program can help students turn their knowledge into college or university credit by taking and passing a computer-based examination through Pearson’s global network of testing centers. Students who pass the UExcel exam will receive college credit from Excelsior College, which they may then transfer to the higher education institution of their choice. The program is currently in its beta phase and, for a limited time, is offering students the opportunity to take UExcel exams in the areas of Calculus, Physics, Political Science and Psychology for free (exams have a retail value of $85USD).

I’m posting this here because I coded this site! My coworker, David Herkenhoff, designed the layout.