How to be inspired

Whether someone decides to take a class or start doing their own research, an initial moment of inspiration is necessary to kick start the process. This post was inspired by an email I woke up to from my sister, essentially saying, “I want to become a web designer.” As her brother, nothing could make me happier.

do I really like this?

I would like to know what inspired her moment. From the outside looking in, I can only guess. Part of it was definitely my influence. In thinking about it closer, her and I are a lot alike in our strengths – if I could be happy and enjoy success in this field, then naturally, she could too. Web design is equal parts aesthetics, organization, and desire. Always learning, always creating. These are strengths and values we share as siblings.

What follows is a rundown of how one can get started in the field. Would love to hear people’s own stories in response.

Step #1 – Owning Your Domain

This may seem like a weird first step to some, but nothing is more thrilling than publishing your first html files to your own site. I think I had three iterations of my first domain, geodigi.com, before I ever did any kind of client work. It’s a person’s first digital sandbox to do whatever they want.

nothing could make me happier.

After receiving the email from my sister, I went and purchased her name domain. Upon presenting this news to her, she thanked me – not knowing what it really meant. In time however, she will come to realize, this is the spot where everything started.

Step #2 – Getting Educated

The field of web design is changing so rapidly, one must stay on it continuously to ever develop a strong knack for providing solutions to people (clients/bosses/friends). It’s all a daunting amount of information at first, but once one gets on top of the pile, it’s just a matter of maintenance.

Coursework

While I praised those who come into the field self-taught, it’s not the only avenue to becoming a web designer – you can take courses. There are pros & cons to doing coursework.

To illustrate my point, my sister decided to enroll in a collegiate level course on the beginnings of HTML & CSS – which in theory, should give her a well-rounded view of the building blocks of the web. Before we sat down and had a screen-sharing session, she was painfully wading through the first few homework assignments. Doubt began creeping into her mind; do I really like this?

We are a passionate bunch

When I finally sat down and looked at what she was doing (she is working on building website for her soon-to-be wedding, college coursework applied to a real life need, smart) she seemed frustrated and kind of bummed out. When I looked at the code, it quickly became obvious the true culprit of her frustrations was the course itself. She was learning late-nineties web development from a lady who obviously doesn’t know what-is-what in the world of web design – this is a common problem in web design courses.

After two short sessions with me showing her how HTML & CSS played together, it clicked. Today she described the process of building her website, “addicting.” How fucking cool is that?

Self-Taught

Google is your friend.

In breaking out self-teaching into its own section, I do it injustice. It really is the catalyst to becoming a professional. If one isn’t willing to put in the hours teaching themselves, then they truly aren’t inspired. You don’t meet a lot of people in the field that gloomily say, “I’m a web designer.” We are a passionate bunch, and in a competitive world, passion is necessary to get ahead. In other words, you should be self-teaching in addition to coursework.

There are so many top ten lists for, “web designer resources,” that one only needs to simply Google it – and oh yea, Google is your friend. “Look it up dear,” is finally the answer to every question.

We are also big fans of Lynda at We the Media.

Step #3 – Get to know your peers

When was the last time you saw a post about, “How to become a shoe designer,” or, “How to become an investment banker?” Ok, there are some out there, but no profession likes to talk about itself like those involved in web design – we are a truly narcissistic industry (I mean that in an endearing way). There is probably a 10-1 ratio of useful web design blogs over just about anything else – it’s our playground, perhaps it’s because we had a head start.

It’s important to find your heroes

As a first step to getting to know your peers, it’s important to seek out those who inspire. Look through some CSS Galleries and identify the designers that really do it for you.

One of the first for me, and I’ve probably mentioned this before, was Jonathan Hicks.  One of his previous sites resonated heavily with me – I pretty much ripped him off on the first version of this site (before I began sort of blogging). It’s important to find your heroes, and with a little bit of internet stalking you can quickly find what they’re into and what they’re not. Follow them on Twitter, subscribe to their blogs, obsessively check their portfolios – do what it takes. Emulate. Emulate. Emulate.

It’s also important to reach out to your local communities – there are always meetups going on, I think here in Portland we are averaging three events a night or something. I wish I could attend more, but sometimes the work gets in the way – you tend to do a lot of what you love.

Conclusion

True criticism is what you should seek.

Becoming a web designer is a path full of triumphs and frustrations - the most important thing to remember is to keep plugging away, solutions always present themselves. Don’t plan on becoming a web designer overnight, it’s a long process. I didn’t start calling myself a web designer till a good web designer stopped beginning critiques with, “you’re straddling the line between mediocre and really really awful.” True criticism is what you should seek.

Please share your stories – I would love to hear them.

More and more I think the response to boredom from many kids in school (from 8th-12th grade) is to gravitate towards computers and the self-taught realm.  I first started playing with Photoshop (at 17), not because I was introduced in a school, but because I was excited about pirating something so expensive.  How many designers started in a similar way? 

I don’t mean to discredit those with big piles of debt, I’m with you.  But I can’t help but be in awe of those who just do it and become self-taught rockstar designers without all the fat.  Thumbs up.  

More and more the internet provides all kinds of free training – for those that seek it. I compare k12 education to my experiences in learning to play the guitar (albeit a little older).  While Django and Robert Johnson are fantastic guitar players, if not the best – I want to “play The Fucking Clash,” – three power chords, I’m good.  A well-rounded education is important, but you also have to serve them up what they want.  Especially when competing with the internet, video games, and broken families.

The web gives us power – those who are willing to sweat and just do – don’t need a college education and they certainly don’t need a resume.

I can’t say I regret college – I had a great time and learned a lot of life skills, but for what I do, I probably would have been better off diving right in.  Now I am a 27-year-old designer watching the big 30 creep closer and closer – at what point am I dated?  Scary stuff!  Thank goodness for We The Media and it’s ever expanding talent pool – I will forever be connected to the talent of youth.

Yesterday was inspiring if anything – thank you to those who I met and spoke with.

Jeff and I got back to our room and I use the words “passed out” here, although it was somewhere between passing out and going to bed – do you know the difference? Anyhow, the alarm came quickly and we got up, showered, and headed down to the complimentary continental breakfast. We’re staying at the Hampton – shitty wi-fi, fantastic continental, take your pick. One more good thing about the Hampton is it attracts a lot of the industry “rockstars.” Shit, Jeff and I were there, and we’re pretty important. I jest, but the highly talented Shaun Inman was there and I did get to pick up the size medium American Apparel Mint T-shirts he brought. Thank you Shaun – it was an awkward moment, but it was never dull – my name is George.

After all this we made our way to the conference, what follows are my notes from the different panels/presentations, enjoy.

Design is in the Details

Naz Hamid started with many quotes, “Less is more”, and “God is in the details/Design is in the Details” Showed examples of design in details in many fields, cooking, industrial design, etc… Overall I think his presentation was really entry level. I wanted to be blown away and I was just kind of left with a, “well yea…” taste in my mouth. Oh well, not a bad presentation by any means, but definitely light on theory.

The one real world practice I took away was his use of different comps for different components of the site – this is something I will definitely try.

Checklist and Guide

• Experiment – Playing around with things in a few PSD files. Use the source files of the client. Play with color. Logo in one comp, background in another, navigation in another – don’t commit. Then start mashing up.
• Choices – Making choices on client needs, your styles, typefaces, and colors. Pick the things that are simple, most logical choices.
• Stay Consistent – Make sure homepages and subpages reflect eachother. Avoid minutae with clients.
• Completeness – Finish the comp and get it done done.
• Step In, Step Out, Step Back: Balance – Walk away for awhile – take notes when you get back about what is striking you – first impressions.
• Be your own critic – Address the things you may feel the people signing off will have issues with – compromise just a bit, it will go a long way.
• Complexity is Simplicity
• Obsession is Healthy – Dedication to the design, we put in long hours.

Thoughts, Breakthroughs, & Revelations – Let a design sit in your head and think about it. Not Billable Time.

Weird Turn Pro: Crowdsourcing for Creatives

Derek Powazek comes across as very genuine. His presentation was pretty fun and he provided some great examples of the good and bad sides of crowdsourcing. Now following him on twitter – he seems like a seasoned pro of “growing communities.”

“When the going gets weird, the weird turn pro.” – Hunter S. Thompsen

Three lies people who don’t get crowdsourcing tell:

• Lie 1: Everyone on the net is an idiot – well they’re are some idiots, but some really smart people doing some really good stuff.
• Lie 2: Good stuff is too hard to find – traditionally has been human editors. It’s gone from traditional, to non-traditional, to moderators. Or it’s computers, text search, and Google. Now the interesting method is the hybrid model, Digg, flickr. Discussing leaderboards and how it encourages users to game the system. Show a random swath of “good results” to avoid the bad results of the game caused by leaderboards.Wisdom of Crowd – Selfish interests that increase the overall good. Says that if we all guessed numbers of beans in a jar, 99% of us would be wrong, but averaged out, we would be 99% right. Simple answers are the correct place for using the wisdom of crowds. Also needs to have diversity of viewpoints. Design for selfishness.Learning from Assignment Zero – Started by Jeff How – “Here everyone, write stories.” Nothing worked because nobody wrote anything. But increase the selfish motivation.

“Using crowdsourcings as a cost-saving measure doesn’t work. Communities must be cultivated, respected, and managed if they are to create economic value.” – Jeff Howe, who coined the term, “Crowdsourcing.”

• Lie 3: You can’t make any money. Threadless example – be the trusted middle man. How do they do it?
  • Contests – Ego, Winning, and Money
  • Fun thing on buyer end – The golden tag on a tshirt, Alumni Club.

Cautionary Tales:

• Yahoo Games Wii Sites: They pulled in flickr feeds tagged, “wii.” Flickr users rebelled and put in tons of “yahoo sucks” type images.
• GM Tahoe Apprentice Campaign: “Hey who wants to help us make a commercial for our SUV.” To make the commercial, all you could do was use their video and pictures and change the text. Chaos insued. “The Earth is now your Bitch”, “MURDER YOUR ENTIRE FAMILY.” They put the participants in a very narrow box. GM was greedy with their content – you couldn’t export it anywhere else, it could only work on the site. But it actually worked – drove more traffic to gm.com than google and yahoo combined.

Community is Grown, Not Built

1. Give people tools they want
2. Trust them to do good
3. Reward Good Contributions
4. Punish bad contributions
5. Expect the unexpected – Flickr Geotagging the word “Fuck” over iceland.

Blood, Sweat, and Fear: Great Design Hurts

And this is where the crappy web connection killed my notes. I guess it isn’t so smart to post notes inside of WordPress while having an unstable connection. Either way – this panel was great.

First was Michael Lopp from Apple, he’s a product manager and seems to be a damn good one at that. He started off with some keynote issues, which was ironic, being from Apple. He proceeded to talk about Apple building everything like a present. From OSX being inside of their computers being inside of great packaging being sold at a great store being debuted by a great leader – yea, I could listen to someone from Apple talk about this stuff all day. He had some great anecdotes, which I wrote down – but alas they are deleted.

Are you comfortable being an asshole for the integrity of your design?

Then came John Gruber of the Daring Fireball fame. I read his blog pretty frequently and he’s always on point with thoughts on Apple. He continued to talk about the “blood, sweat, and fear” that goes into great design. In the end he stated that it’s ok to be an asshole as a designer – it means your more dedicated to your vision. Thank you John we all need that.

All in all this was a great presentation and I got to sit on the floor the whole time, which means it was a packed house.

A General Theory of Creative Relativity

You know how when you’re watching Die Hard and you just know that everything is going to be ok because badass John McClaine is on the job? You know, the bad guys are toast, he took a beating but won, and the girl who was in his life but couldn’t handle his badassnes when he wasn’t saving the world, comes back into his life? That’s like Jim Coudal – except he’s saving the world from shitty creative work.

“He’s a man’s designer.”

I would work for Jim Coudal, as Jeff said, “He’s a man’s designer.”

He framed his general theory as a spark between the known and the unknown, the variable or the constant – it was slow to start but then once he got going, he was on fire. I must say that his booking the band exercise was perfect for his concept.

At the end of his talk people had a Q/A round – this is where I decided how much of a badass Jim Coudal was. Again, I lost my notes, so I am going from memory. Small teams are better and meetings are bad news. That’s pretty much all I remember – sad.

Conclusion

First day wrapped up and it was unbelievable, each panel progressively better than the last. I must say with this year’s SXSW and the whole working for myself thing – I definitely feel a lot more happier in where I am at, it’s been a great year. I have also learned I need to take more pics at panels, doh!

Think Bro-conomy, Think Big

So how does one crack the bro-conomy nut? When I was at an agency I noticed the guys who were making the deals getting all sorts of cool shit. Occasionally it would trickle down and I would get something like the aforementioned hoody or a circle-hoe. But for the most part it stopped right before the schwag hit the creatives. I think the most important part is exposure to clients. Before the end of this long winded, much adu about nothing post, I’ll talk about web design, a few tips to help one thrive in the bro-conomy, and a few of my own personal bro-conomy stories.

Web Design and the Bro-conomy

I can’t think of a better profession to be in that web design for gaining access to the bro-conomy. Think about it – every single business in the world needs a website. It’s the new yellow pages minus the monopoly of the yellow pages (don’t worry, I will keep bagging on this waste of paper company later). There are usually two types of deals which arise, the pure-tradeout deal and the perks plus deal.

Pure Tradeout

Obviously this is the type of deal where no money exchanges hands – it is “I will do X for you, you do Y for me.” The cool thing about these types of projects is they are usually amongst friends and they’re usually low stress. Cause really, is he/she really your “bro” if they’re stressing you out?

The Perks Plus Deal

These a bit more straight-laced than the pure tradeout deal, a hybrid of the paying client and the bro. These deals usually come into play when a client doesn’t have a lot of money, but you appreciate what they’re trying to do and more importantly they’re just cool about it. A total cost of doing the work is estimated and then the price is knocked down for free schwag or other forms of services rendered (The IRS is going to come pounding on my door down for this.). These are usually low stress as well and help line the pockets with a little cash.

F the Man!! (-;

Sometimes a client will just throw free schwag on top to sweeten the deal – and those types of things go a long way in getting that extra effort out of a creative *hint hint*. Again, it’s a beautiful time to be a web designer, embrace your inner bro-ness.

How to Thrive

Like anything in life, this is all you. Well, occasionally a client will make the offer – but for the most part you have to hunt down your own “bro” deals and let people know you are open to them.

Hunting Down a Bro Deal

This is really a simple process that comes down to wants and needs. Do you want a discount on all of your outdoor gear? Then go to your local shop and offer to help out with their website.

A skill fit for a Mongoose

If the people working there can’t make the call – put yourself in front of the owner. For so many people, getting something they want in this way is begging – for the web designer, it’s offering up a highly sought after skill.

Sniffing Out the Bro Deal

This is sort of a Carpe Diem skillset – if a client hasn’t gone there, but can’t come up with necessary funds to start the project, this is where one would interject that trade out is an option. But don’t do it if the client doesn’t have something you want. A lifetime’s supply of gravel is hardly useful if you live in a cramped one-bedroom apartment. However, in thinking beyond yourself, you may be able to help out others (that need gravel).

Story Time with George Huff

Watch Company X

Watch Company X is a small high-end watch company based here in PDX – our deal consists of money and watches. I knew with them being a startup, they probably couldn’t afford to pay what I normally charge. Me, fancying shiny objects, was more than open to broker a deal involving trade. In our initial meetings I let them know I was open to cutting some of the costs down with trade – we reached an agreement and all is good.

Hecklewood + HomeSkillet = Love

Hecklewood Clothing is a peddler of the dopest streetwear. HomeSkillet Records (my labor of love) is a record label from the cold lands of the north who also put on a music festival every year called HomeSkillet Fest. The story goes like this, I sought after acquaintance Sam Huff (Hecklewood Founder) to design a tshirt for HomeSkillet Fest 2007. HomeSkillet Records, being as low budget as they are, could only offer up my web design services. Pure trade-out ensued and with the shirts being finished, I am indebted to Sam Huff to help him redesign and build Hecklewood Clothing’s website. So far the projects have been laid back and now Hecklewood Clothing store is one of my favorite places to just “pop-in,” and say hello. And I am quite convinced that I’m Sam’s favorite guest, and if not Sam’s, definitely Motley and Iggy’s – his two pitbulls.

Quality Trees Unlimited

Quality Trees Unlimited was probably one of my first non-bro tradeout deals. In the end the project didn’t work out – I helped the guy out the best I could, but he just didn’t deliver on any of the stuff I needed to complete the project. In hindsight, I feel bad – but I am getting over it.

The grey area of a sour deal

Danielle, my fiancee, decided we needed some trees in the backyard removed. Now before anyone screams bloody murder, these were ratty trees that were hazardous to our home. Anyhow, the guy she called shows up and first thing I do is notice the side of his truck doesn’t have a website, then I notice the business card doesn’t have a website, so I proposition him to get rid of my trees if I build him a website.

We reached an agreement and he handled his side of the deal. I ended up designing and building his website, but he couldn’t ever decide on a new domain name. He had previously tried to set a website up through the Yellow Pages “we’ll build your site and the screw you over” service, and they had the old domain he wanted. In the end he was unresponsive and just didn’t know how to get his stuff done. I tried to help, but couldn’t do anything because Yellow Pages would only talk to him. The last thing I could do was zip up the files and send them to him. I don’t think the site was ever launched. Not exactly an ideal bro deal.

Conclusion

I ended with the last story cause I wanted to illustrate not all bro-deals end up in an ideal place, especially if a person isn’t really your, “bro.” The best bro-deals are the ones where people actually know each other and strive to live up to their reputations. If the guy from Quality Trees Unlimited or myself decided to screw over one another – there would be no repercussions other than guilt.

The bro-conomy relies on people doing business with their friends and acquaintences, not some random Joe from company X. So really, the Quality Trees project was just a trade-out, not a bro-deal.

So as webdesigners (or whatever you may be), embrace the bro-conomy and thrive, and please share some stories, I always find them interesting. And remember, while the bro-conomy is something special, it’s not everything – ultimately money talks.

Cheers.

I’m freaking out man!

Building a WordPress theme can be broken down into three steps; design, front-end development, and lastly the WordPress implementation itself. I’m not quite sure how others do it, but the following guide is a detailed look into the process I have developed for building WordPress themes.

Design

I’ve detailed my process for building this latest version of eleven3, in that post I discussed mostly design. Starting your own theme should work the same way. It’s important to ask questions such as:

• What problems are you trying to solve?
• Who is your theme for?
• What is your sites most important content?

The word, “theme” is used for WordPress – but it doesn’t mean that your site needs to have a theme. However, having a “theme” may help one along their way to achieving their vision. A good place to get inspired is cssremix.com, who’ve been so kind in showcasing some of my own work. And for the quick and dirty answers: use Adobe Photoshop, use pixels for measuring (if this seems strange to you, just do it and thank me later), try to make sense of Khoi Vinh’s gridding lecture, think about what parts of your site can expand and contract nicely (if you’re a beginner, keep to expanding vertical), and for imagery check out istockphoto.com. Wow, learning web design can’t can be summed up in one sentence.

Front-End Development

I’m probably stating the obvious here, but jumping into WordPress at this point would be akin to being stinky and dumb. (-; Make your site look how it is supposed to look without any real functionality. Get it working in all browsers and upon completion – then think of WordPress.

But how?

There are a ton of “we have layouts” sites out there. And while tempting, it’s the same thing as using a WordPress theme and tweaking it. The only way to get a good understanding of code is simply just to code yourself. Start fresh. Here is a base I use for many of my sites – free to build from.

Personally my first step in coding a site is to lay the design and fresh HTML (use Dreamweaver, Coda, or any other code editor of choice) document side by side and hand code the structure. I know it would help to know where to start and I can only offer this advice – study the source code of the “famous” web designers, they’re critically acclaimed for a reason, they do everything thoughtfully and well.

Mmmmmm CSS Zen

The next step would be to start styling content using CSS – if you’re at this point and you’ve never seen CSS code then I’m not going to lie to you; your road to CSS Zen will be long and hard. If you are still not overwhelmed, create a new CSS document in Dreamweaver (or your preferred coding app). A first step I eventually figured out on my own (and then a punk 17 year old showed me the asterisk – j/k QD) that would have saved me a ton of headache is the clearing technique (which is frowned upon in some countries). It goes something like this:

* { margin: 0; padding: 0; }

The reason to clear the padding and margin values is to avoid all the different “inherit” values of HTML elements. To be more concrete, an <h1> tag in internet explorer may have 8px of bottom padding, whereas it may have 10px in Firefox. Why do they have any values at all? I’m not sure, it could be because HTML came along before CSS. Just ask a couple of ‘timers about spacer gifs.

Coding CSS is a mix of looking at your comp in photoshop to find pixel values (told you so) and slicing up your comp to place images in your end product. Eventually you hope to have a functioning website that looks consistent across all browsers.

WordPress Implementation

And now for the fun part implementing WordPress. It should be safe to assume at this point you have your WordPress installed on your server and you have a fully functional layout working in all the major browsers. Ready, ok go!

The conies and taters

Step One

Duplicate the default theme located in wp-content/themes/default/. Copy the default folder and rename it “your-theme-name.” Make sure your duplicate is located in the same directory “themes.”

Step Two

Start transferring your HTML, CSS, and images into the theme folder. Working within your theme folder, make the following changes (don’t worry, you can reference stuff if necessary from the original default folder):

• Delete all the files in the images folder and replace with your images
• Delete all of the functions in functions.php
• Delete all of the css (except for the commented out header) in style.css and then paste your own CSS in its place.
• Change the information at the top of style.css to reflect you and your new theme.

Step Three

Save a small screenshot of your comp/design (300pxX240px) and save it in your theme folder as screenshot.png – this will help you switch to the theme in your WordPress presentation options. Here is my theme screen shot for this site.

Step Four

Begin to think of your coded HTML as seperate components – a header, a sidebar, a footer, and then content. And if you are just a little bit quick, you may have jumped ahead and seen files in the folder called just that – header.php, sidebar.php, footer.php – but what about content? Well content is the one thing that changes from page to page, while the others are static and don’t change. So really, content is index.php, archive.php, search.php, page.php, and single.php. These files have a little bit of explanation here.

Step Five

It’s a copy and paste job. Copy your header code that should be on every page and put it underneath all the code in header.php. Look at the code in header.php and see what makes sense for you to have in your own header code. Things like the php between the <title> tag and the call for the style sheet first come to mind. Do the same thing with your footer and sidebar.

Step Six

Read this article about “The Loop” and then open up index.php. You will see the code that loops through each entry pulling the values requested – the_time being the time, the_title being the title, and so on and so forth. Copy the HTML from your main page entry and paste it bellow <?php endwhile; ?>. Then copy the different php snippets from the old HTML loop that you need and when finished delete the old entry html from just below <?php while (have_posts()) : the_post(); ?> down to <?php endwhile; ?> and place your new HTML loop in there.

If there is any other structural stuff that belongs on this page that isn’t in the header, footer, or sidebar add it in the necessary places as well. Continue to flush out the other content pages using the same methods.

Step Seven

Upload your new WordPress theme folder into the wp-content/themes/ directory and login into WordPress. If you have done everything right – you should see your screenshot and name of your theme. Click it and then visit your website – you should see your theme on the site.

That’s it!

Conclusion

Building a WordPress is simple if you already know how to design, code HTML and CSS, and FTP into sites. In this post I outlined my own process – not any sort of “official” WordPress process. I’m sure there are folks out there would think of my copying and pasting of the folder and subsequent files as “cheating.” Honestly though, when I am working – I am shooting for efficiency and long-term maintainability. I know in building within the structure set forth by the good folks at WordPress – I will be ok well into the future.

If you have questions about any of this – feel free to leave a comment and get a dialogue going, there is no such thing as a dumb question. This is meant to be a simple guide for those who are interested in WordPress or Web Design in general.

“We hate it”

If one could predict what projects are going to go awry and why – perhaps the “Designer’s Crisis” could be avoided. It seems there are a few situations I have found in my limited experience which have a higher risk than others. It’s tough to design for designers, work under tight deadlines, and to follow someone else’s brand guidelines while resisting the “Designer’s Touch”.

Designing for Designer’s

First off, let me say this – everyone is a designer on some level. From the critic to the creator, being a designer not only means to create, but it also means to have an opinion of something designed. When I walk by a beautiful building, I may comment about its design, I may not. But I certainly have an opinion of some sort, just ask. It works this way with about any object created with some aesthetic forethought. Now I don’t mean that everyone can design – just that they probably, at least, have an opinion.

“Can you move it a little to the right?”

How much qualification does that opinion get someone? It depends. Have they designed something similar? Seen a lot of similar work? Or is the subject of the design something they feel they truly know better, such as a brand? With every project, a designer will be designing for a stakeholder – if that stakeholder is a true designer, one that can create, chances are the project has a higher chance of the “Designer’s Crisis.”

Tight Deadlines Effect End Product

If time is a designer’s best friend, then lack of time must be a designers worst enemy. Once again, I have been inspired by Veerle and decided to include the topic of deadlines and end product. The process of creation isn’t about clocking in and clocking out. Which also means as time on the clock is running out – it doesn’t really register – often affecting the end product.

In all reality we need those deadlines, as the discussion that followed Veerle’s post pointed out, we just need to be good at managing them. In a perfect world, I could say a project will take 15 hours, clock in and out, and be done. But it never works that way. A design is on my mind 24 hours, including dreams. Things like saying yes instead of no, or slowly gaining the ability to accurately estimate times before hand is a huge step in the right direction.

Style Guides and a Designer’s Touch

When viewing a brand guideline document for the first time there are usually two thoughts that cross my mind; the first being, “wow, I can’t believe someone had to put this together.” The second is overwhelming feeling of walls closing in. We design because wevwant to create something new. Whether it’s a mashup of different things or something completely original – we want to put our own touch on it. An extensive style guide can be stifling.

There is really no way to avoid projects with style guides, so the answer is to handle it case by case. On some projects you will receive direction to follow a style guideline to a T. Some projects leave breathing room to accent the project and make it better. But never assume – because when it goes awry and one gets accused of not following the guidelines, the Designer’s Crisis ensues and things get ugly. Always ask how much creative rope is available.

In Conclusion

While the time before handing over completed designs tests a designer’s ability, the time following a Designer’s Crisis tests a designer’s resolve. To take criticism period is difficult for anyone. But when criticism gets ugly or mildly offensive, it invokes a sense of failure – followed by frustration. As difficult as it may seem, the best thing to do is to stay positive. It’s totally ok to feel like throwing a chair on the inside (maybe that’s just me (-; ) but on the outside one must retain composure. Relationships and reputation are what get us through our careers. One or two bad design reviews are a minor blip on the radar compared to the dozens and dozens of good reviews one may get over the course of a career.

Additional Resources

• Handling Criticism
• Top 10 List for Handling Criticism
• The Delicate Art of (Web) Design Critique

With any creative work, the longer you expose yourself to it, the more stale it becomes. That’s why, about three months ago, I got the itch to redesign my site.

So here we are, one year ago and change I launched version 2.0 of eleven3. Today I launch version 3.0 – and yes I am just as excited as my last redesign. There are a lot of reasons for my excitement, but mainly it’s just a new look, a new focus, and more flexibility. Gone is the rigid and closed-source Movable Type and arriving is the flexible, fluid, WordPress.

Continue reading for the off chance of relating to the requirements of the relaunch, the design phase, the challenges of coding the front-end, and the use of WordPress and a plethora of plugins that now make up the site. A lot of work went into it, my hopes are that it is well received.

Redesign Requirements

The Tools
There are many examples out there of great tools facilitating great work – but let’s not forget the old adage, “It’s a Poor Craftsman that blames his tools.” I had become the poor craftsmen. Movable Type was my tool and I had grown fully tired of it. It kept timing out when I created new entries and the comment spam kept getting worse and worse. Overall the system felt bloated and rusty. In the end – your tools can put you in a rut, the old adage is only half true.

The Focus
If version 2.0 had something to say to new visitors, it would have been, “Hey! Look at my portfolio.” My life has change considerably since then and the portfolio is no longer my focus. There are two main reasons for this change. After blogging for about a year I found out how much I really enjoyed it, and then I realized how secondary and unimportant my blog seemed in the context of the rest of the site.

Notice the hierarchy of the page and the prominence of the portfolio.

My content wasn’t really findable and old posts just seemed to die. My primary focus in the redesign has been to put the spotlight on the content I am generating, both old and new.

The other reason I have decided to place my portfolio as a secondary element is due to the fact I have started a creative shop called We The Media – this is where the main body of work will reside. I will discuss WTM and it’s goals in another entry.

Inspiration and Design

There were many steps and components to the project – but I would say one of the most important is the feedback I received from some really talented designers. Without them pushing me to explore further, I may have stopped short of what I feel has evolved into a solid site. While my name is on it, it was a group effort.

Sketches
As with any web design project, I started by sketching out a few ideas in my book. I will be the first to admit that my drawing skills directly straddle the line between almost mediocre and really really bad (ironically my webdesign skills were described the same way once).

This sketch was nowhere near my final design other than in layout, initially I wanted to do something more ornate.

Inspiration
Danielle, my fiancee, came home one afternoon with a pile of old magazines from the 40′s, 50′s, and 60′s. Immediately I discarded the vintage coolness factor and traded it in for the, “Where are we going to put all this crap,” attitude. As always, I was proven wrong and over time I grew to love these magazines. The ads were so rich and copy-driven, the pages so big, and the content had substance. So one night I started scanning them in and collaging them together in photoshop. This ended up being the foundation for the site.

My good friend Nicholas Galanin should write about why I chose to use those ads – he has a way of describing his work that gives it depth and artistic merit. Me? I just say things like, “I used those ads because I thought they looked cool.” Lame lame lame.

The Grid
After being exposed to Khoi Vinh’s gridding exercise from SXSW ’07, I have applied it to everything I do. I usually opt for the 12 column grid and this project is no different. What a wonderful approach. For those Photoshop users out there, here is a great little plugin for setting up a quick grid, courtesy of Andrew Ingram. I’ve never heard an argument for not using a grid – but I am certainly open to it.

The Elements
Tape – My early comps had tape in them – it just wasn’t the masking tape. It was more like the transparent tape with lines in it and is really hard to tear. It also was really hard to make it work – which is why it was eventually ditched.

The masking tape was an evolution from that and I am quite happy with the outcome, for now at least.

Rounded Corners – The first version I did felt really boxy. It was one of those things you feel, but don’t necessarily have the courage to overcome till someone says something. I slowly migrated from the abrupt edges to the rounded corners. While it may not necessarily go with the look and feel of the ads in the background, it does separate the side bar in a way which gives it a “site within a site” feeling. A goal I wanted to accomplish with the new sliding sidebar approach I am trying.

The Side Panel - I’ve been using mootools for a few projects lately and as stated above, I am experimenting with a new solution to avoid the long scrolling sidebar. I’m not a fan of blogs that scroll forever, unless one updates the content more than once a day.

By creating a consistent look and feel, I was able to have continuity across the four panels and allow the user to access the information without leaving the page or having to scroll down. It also separates the content into groupings of information that become clearer by looking at the navigation. What’s worse? A click or a scroll? Who knows, but what has a fun factor?

The Carpet - It was around 2am when I came across an old advertisement in a vintage Esquire Magazine. For many reasons, it seemed like the perfect footer for the site. It was greeny, shaggy, and had the little up curl which had so much potential for customization. Eventually it became what is visible now.

I think it’s a carpet ad, but I am not totally certain.

Front-End Fun

Browser Compliance
Ask anyone who builds websites what the biggest thorn in their side is? I have no doubt the majority will likely name Internet Explorer 6.0. At the time of writing this post, IE6 has 36.6% browser share. I’m not sure what the breaking off point for IE6 users will be, but for my personal site – it was almost 36.6%. Eventually I caved under statistical pressure and rest assured the site is working just fine in Internet Explorer, but it did not get by without my nasty poem.

MooTools and (Slimbox)
I wrote code for the sliding panels not too long ago and used it for a few projects. Once I had the moo.fx implemented, I moved on to setting up lightbox – another favorite piece of JavaScript trickery. Unfortunatly, MooTools and Lightbox didn’t seem to be compatible, and that is when I stumbled upon Slimbox – a Lightbox clone. Once again I was happy having my fade to black photo slides.

Standards
I was so tempted to keep this site as “Transitional” and keep my target=”_blank” tag in some of my external links, yet I decided to go strict. Why? So I could shake my tail feathers just a little bit more. Seriously though, standards are very important and if I am going to sell clients on their importance, I have to walk the walk myself.

A splash of WordPress

This was my first attempt at migrating a Movable Type blog from a WordPress blog. It was surprisingly easy and it makes me very happy to be in the WordPress camp. There are a few reasons for this.

Ease of Maintenance
I handle all WordPress maintenance in Dreamweaver and do not have to rely on an internet connection to get between different templates. I know Movable Type had a way to do it – yet it seemed like an afterthought. Using a WYSIWYG editor to edit code is nonsense. I had gotten to a point where I hated logging into make any edits. Not to mention having to rebuild the entire site for things as simple as a date change.

MT4 has been released and I hear good things, but as I stated – it was too little too late for me.

Extensive Plugin Library
I am using several plugins to make this baby hum. The development community for WordPress is huge and getting plugin to work is much easier than in Movable Type. Just about every little thing I had the, “I wish it did this,” thought for was actually floating around somewhere and just needed to be tracked down. Brilliant!

Putting it all together

After extensive testing, a migration to Media Temple, and a lot of little tweaking, eleven3 Version 3.0 is ready for all the scrutiny and praise it deserves. It will always be a work in progress, but at least now I feel liberated to make the progress. Now if only I could figure out a way to make the size of the document go from high to low without sacrificing aesthetics or functionality.

I decided to write this post because I always liked it when designers wrote out in detail their processes – it’s how I learned myself. For some people, this will be a big repeat of what they already know. But I am hoping that others will find it useful in discovering their way as a designer. It’s a great field and everyday I feel fortunate getting to do something I absolutely love.

Feel free to include it in your IE Stylesheet:

/*

An ODE to IE6 – By A Webdesigner
—————————-
The road has been long,
full of anguish and pain.
How long will we endure,
the internet’s shame.

Once you were nice,
all light and fast.
Then came Firefox,
and lit up your ass.

Get a better browser,
the geeks have been saying.
The internet looks weird,
No PNGs displaying.

Conditional Statements,
feel like dirty code.
With anger and hope,
I write this ODE.

I create thee,
oh you dirty IE stylesheet,
With the hope of the future,
and pressing delete.

*/

But here it is, the year two-thousand and seven, june, and I must say the new site has grown on me. Certain things still don’t feel quite right (list of articles is hard to scan, usability seems to point at ad clicking trickery), but overall the biggest thing that has swayed the new site to my favor is the way they are assigning a hierarchy to their top level stories. Check it out. It’s kind of nice going to a site and having it say to you, “this is what you should be reading.” Not in an annoying in your face star burst kind of way, but in a subtle “water flows downhill” kind of way.

Then I went there today…

…and decided that the marketing department hates their visitors. Nothing is more irritating than being shown the content you desire, only to have a big stupid ad flash in front of it. Not only does this reduce my brand loyalty to Wired, it also reduces my brand loyalty to whomever paid for this big flashing blob of annoyance.

In this case “the new at&t.” But I wouldn’t write a whole post sparked by just an normal advertisement would I? Nope! This ad wouldn’t go away. The choppy animation finished and then it stayed, just like how it looks below. I couldn’t access the primo content. WTF Wired? Shouldn’t they be testing for Firefox OSX users? In reading some user comments around the site, I noticed others felt my pain. I wanted to yell and scream.

The trials and tribulations of a web user, sigh….

I had a colleague ask me about this site, asking if it was mine. While I do live in Portland, I do love CSS, I am shocked that Google would bestow this honor upon me. And as James Hall, a CSS guru from The Good Harvest, told me, blogging about the fact I am known for Portland and CSS will make my Google Search ranking even stronger for those terms!

So here I am. Feeling fancy! Indulge me in my narcissism and run a search for portland and css. Oh happy joy day.

Ok, back to the code.

——

Update: Ok, no longer number one, stupid Google! That lasted all of 20 minutes.