It no longer looks similar to Doug Bowman's site. Check it out: High5Advertising.com. I've talked with Greg on the phone a few times now, and he seems like a decent enough guy. Consider this drama all over with :)
Coming here from Google? please read this first as this situation has been cleared up and his company's site has been redesigned.
I debated posting this or not, but in the end I had to do it. The people who run YLunch.com and High5 Advertising are thieves, plain and simple. The High5 Advertising website is a blatant rip-off of my friend Doug Bowman's website, and he noted this recently in a post to his weblog.
Now theft like this happens a lot, and although it pisses me off to no end, the reason I am posting this entry is because of the way they handled the situation. A few days ago I received an email which was sent from the oddly 90s-style email address webmaster@ylunch.com, and was sent to Doug, me, as well as other designers on the CC. These other designers include Benson Low, Brady Frey and others. The email started off well, with someone named Vadim Lisserman essentially falling on his sword and saying that they have various designers with whom they work, and the person who designed the site is no longer employed. Okay, good start. But then it gets stupid real quick:
[...] "From my own personal business opinion there are tones [sic] of websites on the internet that have the same layouts. What makes a really good website is the color schemes, graphics and fonts. I compared the two websits and have found that there are no identical graphics, color schemes or fonts. I also have checked with my current webdesigner and was informed that we have all original copies of graphics and code that was used to design the website. I hope this puts everyone at ease."
Yes, thank you Vadim! I am so happy that your designer has the original files that were used to put together your table-ridden and blatantly lifted design. While I no doubt believe that your designer does have some of the "original files", they are only original in the sense that they were recreated in an effort to directly mimic Doug's hard work. They're about original as a fake Rolex is "original".
After reading this foolish remark, Benson, Brady and I all sent emails out (CCd to everybody) that discussed in-depth our feelings of such idiocy. Words like "blind", "crime", "acknowledge", "moron", "con artist", "liar" were used, and they obviously got the point. Our boy Vadim replied in terse phrases saying that he's not responsible for the design and that it will be changed. Okay, good, here's where it should have ended. But it didn't.
A little bit later I got an email from a guy named Greg Sirochinsky (another funny article) who sent me this tidbit of fun:
"My name is Greg I am the CEO of the company. Your input is greatly appreciated. I was wondering if you can show me some of the websites you created. Then if they are good we can listen and implement your feedback. I look forward to seeing links from you."
Hmm, okay, so now I have to prove myself to them in order to point out the obvious that they stole another person's hard work. They sent that same email out to both Benson and Brandy (CCing the whole crew on each one) and that's when the real good stuff started. See, Greg has this thing about talking on the phone... every time he sent us an email, it was usually ended with "CALL ME: 847.XXX.XXXX" so we could proceed to waste part of our day while he informs us that they're not thieves. Brady did some investigating and found out that our friend Greg Sirochinsky is a Ricky Martin fan who uses that same "business number" to sell Ricky Martin tickets. Greg also is a fan of Disney on Ice, but hey, there's nothing wrong with a little Ricky Martin and Disney, especially at the same time.
After telling him that I needn't prove my skills to him for this little pissing contest, he responds:
"As I said please send over some quality "ORIGINAL" websites, prove that you are worth talking with, and maybe we can continue this great discussion."
So by now you can imagine I'm a little miffed. We sent some emails back and forth after this, and then Greg Sincrhonwhateverhisnameis drops this:
"NEW DESIGHN WILL BE UNVALIED EBY ARTEMIS THE GREAT SOON.....THEN YOU WILL ALL SEE HIS POWER...AND BE IN AWW...HIS WORDS "THERE IS NOTHING SPECIAL ABOUT STOP DESIGN I LIKED HIS SITE AND WAS MERELY GIVING HIM PUBLICITY" A NEW SITE WILL BE UP SOON ONE THE IS A LITTLE BIT MORE ADVANCED THEN JUST PURE PLAIN CSS THAT IS GETING OVERDONE AND OVER COPIED.... STAY TUNED NEW SITE WILL BE UNVEILED WITHIN 6 MONTHS"
Yes the email was in all caps like that. I believe that Artemis The Great is the web designer responsible for the previous rip-off, but I'm not 100% certain, but either way, once I stay tuned for the next 6 months I'll be able to preview his awesome and fearful web design power. I truly don't believe that Doug needs any more publicity after designing sites like Wired and Blogger, but hey, maybe everybody needs a kick.
I emailed Greg about the irony of him asking me to show him some of my original and creative work, when his own designer has stolen the work from others. I think that upset him a bit because in response he sent us this email:
"How many PAYING CLEINTS DOES YOUR COMPANY HAVE??"
Ouch! Right where it hurts! You got me Greg, I admit defeat in the face of your greatness, especially when you follow-up with such bourgeoisie classics like:
"I have 5 projects and over 75 paying clients each paying between 75 - 1200 per month to work with me."
I replied with this piece of quickly-written snark:
"btw, greg, this pissing contest is getting a bit old. why not just apologize for ripping off Doug's work and continue to work on your site so people stop making fun of it? wouldn't that seem like a better business decision instead of trying to make yourselves look better by comparing how many clients we have?"
In response he thought that instead of disagreeing with me anymore, he'd just try and partner with me:
"The new site will blow your mind away...maybee you can outsource some of your projects to my company....Dosent that seem like a good bussiness descion to you..."
And then...
"I know how to build a VERRY sucessfull bussiness..maybee we should talk after Artemis is done with the new portfolio"
I don't even know what to say to things like that, so I ended the email conversation soon thereafter. Lesson to people who steal other websites: fall on your sword, accept responsibility, and change it. Obviously creative work shouldn't have been stolen in the first place, but once it's stolen you shouldn't 1) email readers who are pissed off at you, 2) piss them off even more, 3) tell them how much money you make so they think you're a big-timer, 4) ask how much money they make to prove their worth, and then 5) finally ask them to do work with you and/or partner. Greg Sirochinsky is an idiot, and if you ever are in Chicago, don't use Ylunch to find a restaurant because it'll probably taste like bad PR.
(No comments on this post because I don't want Greg trolling. Sorry guys.)
I've already got a new one open in Photoshop :)
When I used to work in Chicago (back like 3 years ago, wow I'm old), I'd have to go downtown occasionally for meetings with clients and I remember most of the meetings were in this really huge office building about as downtown downtown as you can get.
I remember my very first meeting in that office building I went to the wrong floor, and I ended up at the Agency.com offices. I ended up making my way to the right area and was at the meeting on time, but after the meeting I went back to my desk and checked out what Agency.com was since I had never heard of them before. I saw they were a global design firm, tons of great clients, offices everywhere, had a nice portfolio, and I wrote them down on the short list of design firms I wanted to work at after I graduated college (which, at the time, was two and a half years away.)
I spoke with a bunch of my colleagues at Streams about Agency.com, and since they had been around in the dotcom days, they let me know that Agency.com used to be a really huge entity, but since the crash they had shrunk a lot and cut a lot of employees and were now floundering. That was basically the last time I thought or talked about Agency.com.
Just tonight I was at some random design site and I saw they mentioned Agency, so I decided to check their site out since I hadn't been there in years. Their site is now all in Flash and their new logo doesn't really do it for me, but at the bottom corner of the site they have a link to their 10-year history which documents the Agency.com rise and fall and rise again.
I'm not really sure why I wrote this entry, but I do know that thinking about that meeting and landing at their floor really brings me back. Good stuff :)
I dunno who this is but he commented on SvN today and it confused the hell out of me.
*Head inflating*
That link is to what was supposed to be the new himike.org design, but I don't think it's cool enough anymore. I designed it back in July/August, and my design tastes have changed since then. I don't think it pushes the paradigm enough.
What do you guys think?
Things I'd really like to buy, but probably shouldn't until I have the money to buy them:
Nooka Zoo v2 watch with an orange strap.
Apple iPod nano in black. And I can pretend to still be a student to get the 2GB for $179! Sweet!
23" Apple Cinema display, and I can get a student discount on that too! Sweet again!
OmniGraffle 4.0 Professional when it's released. Pssst, I have a secret: I use OmniGraffle 3 for all my design comps because it's way faster than Illustrator, in fact, 9rules v2.0 is being designed in it as we speak.
00.com makes my eyes bleed.
Make sure to visit BOTH the HTML and Flash sites (the Flash one is much worse in my opinion.) They should scrap the "IT & IS" company and just sell the domain, it would probably be a wiser decision.
Over at Business Logs we've had the pleasure of doing more work for one of our favorite clients (launching soon, as in, very soon, as in, less than two weeks) and while the project motors on, I got to thinking about how to describe the sites we know and love.
One- or two-word phrases that are abstract enough so that they embody just the right attributes of the site they're describing. Sleek, modern, organic, mechanical, shiny, homey, rusted, etc. Not too abstract like professional, smart, corporate, friendly, etc. For non-designers, I feel that describing a design is very difficult. Because telling a designer what you like/dislike in a site is very important, here are list of sites and their associated describing words I feel work well to justify them (keep in mind I think all these sites have great designs):
Coudal - Organic, minimalist, print-like, warm, unobtrusive.
Agenzia - Post-modern, minimalist, industrial, cold.
The Storytellers - Detailed, comforting, minimal, selective, thoughtful.
Beseku - Stark, modern, living, tight.
I have to get back to work now, but what do you guys think?
Over at Stylegala I made a comment regarding the Ruby on Rails website being featured there. In general I think the site gives off the normal 37ish glow, but with one glaring exception: the header is really ugly.
Not the logo, I think the logo is absolutely flawless and whoever designed it should be commended for their hard work. But the header itself is poorly designed: the type is incorrectly set, the leading is off, padding between elements is slightly skewed, and it looks like the anti-aliasing of the text is a little wonky. All in all, it's a simple header that with a little bit of TLC could look pretty nice. Not being one to not backup my comments, I decided to redesign the header myself.
The old one used a typeface that either was Interstate, or one that looked like it, so I kept with the same one for posterity. The major problem with the old header is that the weights of the two lines looked too similar for either to stand out. Even though one was black and the other grey, the two lines blended together and didn't feel right. The vertical padding between the logotext and the tagline was too small, so I aligned the two lines and gave them a little more spacing.
To jazz it up a little bit, I used the ruby color in the logo for the new logotext, and then gave it a few layer effects so it would stand out as being a bit more important. Thoughts?
(And if the RoR people are reading this, feel free to steal the image and just stick it up there!)
You are a company in need of a user interface designer who does more than just draw wireframes. You know that great visual design is important in web applications, and you want the best person out there.
John Zeratsky is a designer who can jump into that position and blow you away. Plus, he lives in Chicago so he's right in town for all you big design agencies. Give him a job, will ya?
I just wanted to give a big shoutout to Naz over at Weightshift for his amazing redesign. He and his friend Khoi are two of my favorite designers out there, and they both redesigned their sites within only a few weeks of each other and I'm sure they're both secretly jealous of the other's new digs.
I made an 18-hour roundtrip trek to Chicago last spring to attend seriouSeries where I met Naz for the first time, not to mention some other guys you may have heard of. Big ups to Weightshift on the redesign, and some additional props to Scrivs for dropping it in the Vault courtesy my submission. Good stuff.
Thanks to everyone who voted over at Plastic Pilots, The Car Blog was awarded a 2-star award today!
I remember in the movie Office Space, Peter and his buddy talking about what they would do if they "didn't have to work" — where the answer to that question is your true calling in life. Well if I "didn't have to work", I'd most definitely want to be in one of these positions, so the following are my dream jobs:
Lead Human Factors Researcher at IDEO. IDEO is an internationally known design firm that specializes in moving from research, to prototype, to product very successfully. They make stuff you can pick up with your hands, interact with, and put on a shelf. I want to lead a team of 3-4 people whose sole purpose is to speak with people in the target audience and get their feedback about the product we're designing or redesigning. I want to sit down with a potential user, buy them coffee, and speak openly and intelligently about their feelings regarding this product. What are they trying to accomplish? What emotions or fears stand in the way of accomplishing that goal? What other products have they used, and what was their experience? Then I would take that information, generate reports and presentations, and others working on the project would take my advice and weave it directly into the product's design.
User Experience Designer at BMW Group DesignworksUSA. DesignworksUSA is BMW AG's North American design arm. DW has worked on the Z4, the X5, and the new Rolls Royce Phantom (which I happen to see driving around Bethesda, MD last weekend!) and is continually working and competing with the design headquarters in Munich for the latest BMW designs. I want to be in a position where I can design the interior space of an automobile based on usability testing, research, and interface design best practices. I'd love to measure where the average hand comes down on the door arm rest for the average driver, and stick the power window buttons perfectly right there. Or to make a center console arm rest move with the chair so that if the seat is lowered, so does the rest. Or to make an in-car entertainment/computer system that isn't as awful as the iDrive. When a consumer buys a new car, I'd like to think that many hours of ergonomic research went into the design of the inside of the car as well as the outside.
So what are your dream jobs?
The Porsche USA homepage was redesigned using XHTML Strict and CSS. Ooooooh baby!
The old homepage was really ugly (look at interior pages for a hint at the previous design) and I actually went to the Porsche site less because of the old design. It appears as though Porsche has only redesigned the homepage and not internal pages, but that's okay because this is a gigantic step in the right direction.
The old homepage had a smaller, less noticeable (as if a giant gold and red badge could be less easily seen) Porsche logo, and this new site clearly separates it out into its own block of whitespace so that you can quickly identify this as a Porsche. It also appears as though they re-anti-aliased (I think it's a word) the typeface because it's definitely less jaggier now than it used to be.
A car site is nothing without big photography and it's tough to have an image that's larger than the one on the new homepage — it spans the full width of the content area and even has a cool transparent navigation section on top of it to seal the visual effect. The four mini-sites on the bottom of the page are each represented not only with a link, but also with rectangular imagery that keeps the user's interest even on the bottom of the page.
Something else that caught my eye is the sheer width of the website. It's way past 800px across which means that they weighed the business factors and actively chose the wider with homepage. Wow, that's really exciting.
The navigation technique is really nice, and I've always been a fan of the alternate pixel fake transparency effect even though it's not used very often. The entire navigation is done using absolute positioning of non-semantic divs, but you know what? I don't care because this is a step in the right direction and nitpicking doesn't do any of us any good.
Full imagery at the end of the navigation drop-across is very nice, but it does take some time to load especially if you're on a dial-up connection (not me ... dual OC3 pipes). Even though it sounds blasphemous, I would have liked to see the navigation/header done in Flash so it would load quicker and not have to pound through hundreds of lines of Javascript. Mercedes has a nice Flash nav on their site (well, damn, I think all car sites do) so maybe they should think about that as well. Of course then it would be inaccessible, which is a big deterrent, and I don't know any of the surrounding business factors either, but it's just my quick suggestion.
Whenever a large website redesigns with web standards (validating or not, semantic or not) it's a huge plus for the professional community. If you check the CSS file you can tell that some skillful people wrote this CSS. Box model hacks, backslash IE5 hacks (with funny developer comments), alpha transparency filters, -moz-opacity rules, I love it! I'd like to commend the entire web team at Porsche North America and any subcontractors for a job very well done.
The Car Blog is a go! TCB (The Car Blog) is a blend between a car forum, a weblog, and an online magazine, and is a place for car people to go and vent or rant about the world of automobiles. I did a better job of explaining the site on the About page, so go check that out if you want more. This blog entry isn't about explaining what TCB is, it's about giving you the nitty-gritty about the design decisions I made, why it looks the way it does, and the CSS ballyhoo and tomfoolery that powers the visuals. So let's get into it!
Successful car site design incorporates heavy imagery and a deep sense of visual amazement, because when it comes down to it, we like to buy and look at cars that we think look good and car websites are the same way. When I started out sketching initial concepts for TCB, I knew that we needed a solid header graphic that incorporated big-time car imagery for some off-the-bat visual punch. I went over to my favorite photo resource, stock.xchng, and found this gorgeous photo of a Ferrari 360 Modena against a blue sky. After some Photoshop color-shifting and slicing, I achieved an effect that I think lures your eyes down the page more because of the slicing's vertical orientation.
The typography choice for the logotype is DIN, even though I was originally considering Interstate. Both typefaces are examples of auto-specific fonts, where in the U.S., Interstate (or an identical twin) is used on all interstate highway signs. Just look up at the green rounded rectangles next time you're driving, and you'll noticed the slanted ascender tops which are its dead giveaway. I ended up choosing DIN because it is the German equivalent of Interstate, and I love German cars. DIN is one of the most recognizable sans-serif typefaces out today, and if you just look around a little bit, it'll pop right out at you. Oh, and the B-Logs font is Myriad Pro, but you already knew that ;)
I've never been fully in control of a website that has advertising on it before, so I was really excited to make the ads on TCB not as ugly as other ads on the web. Coudal and John Gruber have done a fantastic job deploying text-only advertisements on their pages that are integrated into the design, and I went to school on their examples in order to make the TCB ads work as well.
We have three different ad placements on TCB, and each one has their own design style and physical area on the page. The "Premier Ad" is underneath the Leading Article area on the homepage (as well on top of the content in the individual entry pages) so because of its placement, it needed to be tightly integrated with other elements on the page so I wouldn't throw-up when looking at it over and over. I reused the blue from the header graphic and navigation to get the color scheme for the Premier Advert box, and then kept the rounded-box metaphor going as well. The top part of the div was done using a background image (nothing fancy), and I used a superfluous display: block'd span element underneath it to round the bottom as well.
The advertisement at the top of the Shortlinks box needed to 1) not look like an "ad", and 2) blend into the style of other shortlinks. What I did was simply use the same style as other ones (except not in an unordered list, and no light grey background) and add a background image on the bottom that alerted users that it was an advertisement in the same manner as the Premier Ad on the left. If your gamma is correctly adjusted, the background of the rounded "ADVERTISEMENT" rectangle should match the lighter grey underneath other entries over there.
And then underneath the Shortlinks box we have our third category of ads — the least intrusive, and also the least "styled". I made these simple because once your eyes get to the section of the page where those ads would be, you're most likely reading the main page content and I didn't want to force a visual saccade over there which would throw your reading off. These don't have rounded edges like everything else, or do they? And this brings us to our next section.
When we were talking about the design of this site way back in the summer, we decided the baseline browser would be IE6, which makes development a whole lot easier. The cool thing, also, about developing for high-level browsers is that we can do things with the CSS that we normally wouldn't think of. Some of that stuff included Mozilla- and Safari-specific styles to spice it up a bit.
-moz-border-radius — A Mozilla-specific style that rounds the corners of a block-level element. It was used in those instances where I felt multiple divs just to accomplish a rounded corner effect wasn't necessary (like the light-grey shortlinks entries, as well as the advertisements underneath the shortlinks). Also, enough people are out there using Firefox so I thought a nice segment of the population would benefit from such stylings. And if you're like me, and use Safari instead of Firefox...
text-shadow — This effect was implemented in the latest version of Safari (Jaguar users, I think you're out of luck) and it looks wicked cool. I actually use this effect extensively on the homepage: the current navigation tab text, the leading article title, the leading article subtitle and category, the author/comment count div, the sidebar links, and also in the footer. So if you're using Safari, you get an extra treat that others don't :)
The navigation of the site uses an inverted tab style that I've used in the past, and thought it would work well here too. Sliding doors are in effect, however I've been using that technique since before Doug gave it a name :) Some really intricate-looking design effects were achieved quite simply by using background images. For an example, the navigation tabs appear to overlap the underlying color, but that entire unordered list just uses this background image to make it appear complicated. Also, to make the Shortlinks header appear to be offset from the Leading Article header, I just stuck that image in the navigation's background as well. Boom! Effect achieved with no CSS headaches.
Even though in the header you can click on both the TCB and Business Logs logos, the top header graphic is all one image. In an effect similar to the old imagemap idea, there are two divs up there with transparent backgrounds that "cover up" where the clickable areas appear to be. You can see this for yourself if you hover about 20px left of the left edge of the B-Logs logo ..... it's still clickable.
This wasn't the most complicated CSS design I've worked on (the gov't work I did was, go figure) but it's the design I'm most proud of. My test for a website is if I get sick of the design before I even launch it, but for this one, I was excited to show off my work and see what people thought and haven't gotten sick of it yet :) This site is also really rewarding for me because our writers are very influential people in the design community (Jason Fried, Carlos Segura, Didier Hilhorst, to name a few) and working with them on a project was really great.
This site wouldn't look like it does now without the help of my usual beta testing and feedback team: Paul, Matto, Nigel, Mike, and Alex. Thanks guys.
And that's it. What do you guys think? What would you change? Any bugs? Let's hear it, good or bad.
For the Windows users in my audience, here is a screenshot of what the site looks like with Safari-rendered text-shadowing. Makes you want to buy a Mac, eh? :)
Here's a purposefully incomplete list of some skills and terminology associated with "my profession": usability, cognitive walkthrough, scenario-based design, interaction design, user experience, heuristic evaluation, information architecture, UI design, formal usability testing, horizontal- and vertical- prototypes, and user-centered design methodologies.
To be a usability professional — whatever that "really" means — you need to have overly-specific (and confounded) terms and phrases for things that do not need them. I tell the client that I am "using scenario-based design processes to improve the information architecture" when that really means that I'm "thinking like a user in order to make the site easier to move through". Wow, wasn't that easier to understand! Why is it that people feel the need to jargonize things in order to sound as though they know more than they actually do? Why is it that people who work specifically on the user's experience with technology specialize so much and seem to be proud of this specialization? If I ever categorized myself as just a "heuristic evaluation expert" or "navigation designer" or "usability testing professional" then I don't think anyone would feel the great need to hire me. Specialization may be good for some fields, but if you're a user interface designer and don't know the first thing about information architecture then I won't hire you.
It is so very interesting to me how so many companies don't "get" usability and the user experience. For once and for all, let me say this: all a company has is its reputation, and what customers think about their product and that's it. If your product sucks, or is difficult to use, then a potential customer will go and buy a different widget from your competitor. If your product sucks, then the approval of your company drops, and you'll make less money. Oh my god, I just simplified the entire field of product design and economics into one sentence, but it's true.
Here's an example. Method's dish soap was a brand new product with absolutely no market penetration prior to its launch, you know, a brand new company and all. Then it launched, and people realized it was a genius example of industrial design and aesthetics, so they bought a ton of it. Now Method is moving past companies in the soap industry (if there is one!) and gaining market share every single month. Game over, good design wins. See how easy it is! Now what if every company would realize that good design means everything? Don't you think that consumer products would be easier to use? Hell ya they would.
The entire user experience field is just applied common sense to me. Who's going to be using the product? Okay, now what would they need in order to accomplish their task? What other products have they used before, and how much do they know about similar technology (meaning: what other products are they "used to"?) Now Joe Schmo and 50 other people complained about this feature, let's evaluate it. There we go, the entire user experience field compacted into a paragraph.
This entry is not a rant directed towards practitioners in the field of UX, but is directed towards businesspeople who don't know squat about our profession. Until corporations realize that "well-designed products = more money + more customers", there will always be consulting firms making truckloads of money that have a staff of 20 User Interface Designers, with another 5 Information Architects, 2 Human Factors Researchers, and one User Experience Group Director.
And by the way, IconNicholson is still looking for a User Experience Group Director, so if you'll excuse me, I'm going to go apply for it.
I'm calling this post "Fake Designers II" because Paul already wrote a little bit about this topic back in the day. I was talking with him tonight on IM for a few hours about this, and I feel strongly enough about it that I think it warrants a full weblog entry.
I will go out on a limb to say that over 85% of people who consider themselves "web designers" aren't very good at their profession. Yes, I consider myself in that category because I don't consider myself an artist — in fact, I'll be the first one to tell you that a site I've worked on for hours sucks or could've been much better. It takes me hours and hours of work to make something look halfway decent, when a real designer like Jon Hicks probably takes a fourth of the time, and makes it look twice as good. Why? Because he's a real designer.
Look at a site like LA Times.com. The padding is completely off, there is no whitespace where space is needed, Gestalt principles are not followed, and the list goes on and on. But this is a major site, obviously done by people who have the title "Web Designer" or by a consulting team that is full of "web designers". Now, in contrast, take a look at Silverpoint's website, employer of Shaun Inman. Notice anything? Yup, Silverpoint's site was designed by "real designers", notice how it looks great, in contrast to the LATimes site which looks awful.
Both were done by "web designers", but one design looks terrible while the other is amazing.
Here's another example, one that validates the point I'll be making in a second. Take a look at Blogger.com's new website designed by Doug Bowman. Notice how it's really great looking? Now take a look at WordPress.org and take note of the difference. Matt, creator of WordPress is a great guy, but he's not a designer. Doug Bowman, on the other hand, comes from a diverse print background, and is a fantastic designer.
Being a CSS and XHTML guru does not qualify you to be a web designer. You may know every CSS hack in the book, but if you haven't design experience or background, then you probably aren't very adept at designing anything. The "web design" profession is so amazingly saturated with people from programming backgrounds with no design experience it really astounds me. Yup, I come from a pseudo-programming background, which is why I never tell anyone that I'm a "web designer", because when I look at my stuff compared to Shaun Inman's or Doug Bowman's, it's not even remotely close. That, right there, is the reason I do not consider myself a web designer, because I cannot do what they do. I cannot open Illustrator and bang out a logo for a client in under an hour. I cannot go straight to Photoshop without trial and error on my trusty paper notebook first. Can you?
There are rumors discussing how my college, RIT might start up a "Web Design" major soon. I think this is an absolutely god-awful decision, and I'll tell you why.
Good web design is not something that is possible to teach. You can teach how to be a good designer, and then how to work with the internet as a medium for your designs, but teaching "how to design for the web" is just a disaster. It will bring people without a real design background the false sense that they are good web designers, when in fact, they have no design ability but know CSS like they know their first name.
It's too specialized. Just like majoring in "Wireless Networking" is a waste because it's too specialized, majoring in "Web Design" will only teach you one thing. What if a client needs you to outline a participatory design strategy for a web application they are building — without an HCI-background ("but I'm a web design major so I know all there is to know about this stuff!" no you don't) you will not have adequate knowledge to help the client. Talk about being bootstrapped.
Wanting to be "the next so and so" will not get you anywhere. Jumping into Flash and trying to be "the next Todd Dominey seems ludicrous doesn't it? Well it's the same way with jumping into CSS and trying to be the next Doug Bowman, it doesn't work like that. Becoming an expert in the medium is one thing, but becoming an expert in the art expressed on that medium is totally different.
For the first time in my entire life as a designer (since '96, I was 13) Adobe Photoshop unexpectedly quit.
While the beach ball was spinning and my hard drive was thrashing, I kept saying to myself, "there is no way Photoshop is gonna go down. C'mon 'shop! You're a horse, I know you can do it!" Then the MetaDesign'd icon in my dock self-imploded in what could be considered the "black-hole" effect, and vanished.
I wasn't upset (I have an obsessive habit of saving every document every 30 seconds) for I hadn't lost any work, but was slyly grinning, knowing that for the first time in 8 years, I had "out-worked" and "out-smarted" the design goliath. I was 'shop'n faster than it and my G5 could keep up, and the C code behind it just could take it anymore.
For the record, I wasn't doing anything really exciting. After changing the Image Mode of a .GIF file from Index to RGB, I double-clicked on the first layer so that I could delete some color and leave transparent goodness below. I double-clicked once, and nothing happened. Then I did it again, and the beach ball spun, and my app crashed.
Before that crash, Photoshop had been running on my computer for 6 days.
I really have to hand it to the entire Adobe Photoshop team, for they actually made an application that I trust not to lose any of my documents — one that I expect will always "just work" for me. If I had to pick an application to be granted mission-critical status, I'd say Photoshop would do nicely.
When starting a new project, sometimes it's impossible to find enough creativity to make it look the way you want. When I have designer's block, I peer at a few of my very favorite websites. Here are a few, and reasons why I like them so much.
Fluffco. Wood grain, organic feel, comfortable-looking typography, Fluffco really has it all. Their homepage's emphasis is on quality photography to set the mood, and then a subdued logotype just to breeze in and remind you where you are. The spacing between visual elements is absolutely perfect, and the sidebar is just amazing. I really can't say enough about this Canadian duo...... go there and be stunned.
Absenter. I met Naz when I was in Chicago last — very cool guy. He just redesigned his website, and I can't get enough of it. I love the bright blue entry titles, that's just genius.
Coudal. If you haven't seen Coudal's new design, then you must have been on vacation for the past few weeks. They work the three-col to its logical conclusion, and use topical photography to emphasize current projects. The oversized serif headers are magical, and uppercase descenders in Gill Sans were the perfect choice.
skinnyCorp. An oldie but goody, these guys are the force behind Threadless and they are just oozing with design talent. Look at that navigation — I've never seen it done quite like that, and I keep wanting to use a similar concept in every site I design. Their Work section is dropped in the grid layout perfectly, and is very easy to navigate and understand.
Behavior. The creatives at Behavior switched to all XHTML and CSS a few months back, and have been basking in its glow ever since. Not much more to say, go to that site and poke around. I promise you'll be impressed.
37signals » 37express. JF and Co. design the most beautiful and useful interfaces out there, and I think this single page is the best XHTML they've ever stitched together. Two-col and three-col elements blend together seamlessly, drawing your eye to the most important areas of the page. The are the masters of perfect sidebar design, and I still draw on their network of sites for inspiration.
Cuban Council. They are heroes in the design community and consistently work on projects that blow me away. Every designer wishes they were as talented as these four guys.
I could go on, but I think this will provide a good start.
Without sounding like the dogmatic regurgitators abound in some corners of the web design community, I'd like to throw some people over to the "real-time" undesign of Doug Bowman. He's done the unthinkable, he's redesigned his website by removing the design.
As JF always says, "there is something inherently beautiful about simplicity in design" (paraphrased, ofcourse) and I think Doug has always thought that way too. In a week where others are adding colors and styles, Doug wanted to keep it simple stupid.
Without taking too much away from Doug's writeup about this redesign, I want to let readers quickly know that he removed the stylesheet from his website, started fresh, and in a few hours redesigned his entire website with a crisp, fresh aesthetic.
No extraneous elements. No superfluous markup. Just usable design.
As if Mondays aren't by definition eventful enough, three influential organizations launched their new sites today: Blogger, MP3.com, and Dave Shea's web design company Bright Creative. Following Paul's writeup on the differences between TypePad & Blogger, I feel as though I owe it to myself to write down what I think of these three extremely different sites.
Doug Bowman teamed up with the moneymakers over at Adaptive Path to launch the redesigned (and Google-powered) Blogger. Doug talks about some nifty VIP stuff regarding how the design came about and design process involved — and to be honest, it doesn't matter. The site is hot no matter what anyone says of it, or who put it together.
I love it because it just spews out the brand image right into your face. It's big, chunky, fun, creative, young, and a whole lot of other buzzwords all rolled into one web application. The redesigned logo must have stirred Doug's creative juices, because a site this thoroughly enjoyable definitely must have been great fun to create. Crazy good job man.
So MP3.com launched today without much fanfare. The only reason I even saw it is because Doug linked to it from his weblog. It's black, it's grey, it's got pixel fonts, and stuff isn't kerned well. 
Look at the picture in the top right corner of the site (copied here) — I know pixel fonts are tough to kern through Photoshop, but get in there with a 2600% zoom and clean up those gaps!
He uses web standards, so they get slight props for that, but in this day and age redesigns don't get noticed unless they're standards-compliant anyway. On inner pages, he uses an incorrect Sliding Doors implementation and leaves a noticeable gap between the tabs and the bottom-border in Safari (and Firefox, IE5, etc.). I know this is a beta version, and stuff is bound to be goofed-up, but c'mon. Most designers use Macs, and if your site doesn't look good in any Mac browser, expect to hear some grumbling.
Dave Shea quietly launched his design studio today, but as soon as you open up Bright Creative you don't think much about it is quiet. Maybe that was the effective Dave was going for, or maybe he just wanted to differentiate himself, but holy crap it's red. It wouldn't be so bad if the content area had a little more contrast between the text and the background — but it doesn't — so the piercing #F00 comes right through and distracts the hell out of me.
To go right along with low-contrast readability, the type on the subsection headers is so incredibly thin that it just disappears into the background. Same with the main header text. Oh well. It just proves that Flash + CSS + XHTML != usable site.
I don't think of usability as a "well-designed" product or interface, I think of it as a well-formed conversation between a person and the object with which they are interacting.
Interface design doesn't just apply to computer interfaces or the handle on a coffee pot (for you Norman fanatics out there) — an interface is the bridge that both an object and the user cross in order to accomplish some goal. The interface is where the communication between a person and an object takes place, and a "well-designed" interface is one that easily facilitates this exchange.
To be an interface designer, one must be well-versed in the intricacies of communication. The processing, translation, and flow of messages between two linked parties is what's important here, not the medium. This is why interface design is so important — because it's not just someone who knows how to prototype in CSS and likes user-centered design, it's someone who understands the goals and needs of all parties involved, and makes hard decisions in order to benefit them both as much as she can.
I see myself not as a pure "interface designer", but as an information designer — one who takes a set of goals and intelligently manages those goals through design. Information is passed from the application/object to the user (through the interface), and then is responded to by actions the other party takes. I think an example might be good here:
There are many different types of users associated with this service; people trying to sell an object, people looking to purchase an object, and others who just like to browse. Now these aren't all of the user types associated with eBay, but it'll serve as an example. Those people are on one end of this communication bridge, with eBay's business goals on the other. eBay is trying to entice you into purchasing an object, on which they receive a commission. They are trying to make the process of 1) going to the site, 2) navigating the listings, and 3) purchasing an item as easy as possible for an end user, because that will make them money in the easiest possible way.
Now those business goals are woven into the site's interface, somewhat invisible to the user. The placement of the search box, the allure of colors/prices, the busy layout — all of these are little ways to bring you deeper into the site so that you might purchase something.
The difficult part is designing the interface in such a way that it communicates the application's goals while meeting the user's goals at the same time. If I'm trying to find a vintage shirt, I want the search interface to be as clear and helpful as possible so that it aids me in my browsing. If the UI is inherently friendly and easy-to-use, then I will be able to find my shirt more easily. This balancing act between the two sets of goals is what makes a certain interface usable, when one party's goals compliment and are complimented by the other party's.
Some two-bit hack wrote an opinion post on how web standards are useless and too difficult to understand.
For my own sake, go to that link and feel the same pain and anger that I feel. What a loser.
Apparently not from Dan and Didier's treehouse.
Okay, so I'm gonna mess with my site live over the next couple of days (read: weeks). Right now I only changed the front page. The black and red is here to stay, however the design for the middle content is still in a great deal of flux.
Comments? Ideas?
Please realize that this is in no way the finished state of this site ;)
Updates
Fri. 4am: I changed the blog post headers, but still do not like the secondary navigation underneath the tabs. Expect this to be changing.
Fri. 6pm: The old entry headers are back up (and better looking), and I formatted the permalink/comments line underneath each entry as well. Stay tuned.
Fri. 7pm: The primary tab navigation colors and hover states are now a little easier to read. Thanks Matthew!
Mon. 3am: I changed the logo and navigation to position: fixed; for an added effect I might take down if enough people object to it. Also, the "recent comments" section is a little more stylistically sexy than it was before... it's basically more for my benefit, just so I can get a glimpse at the type of commentary happening without digging deep into TypePad. Next up, the sub-navigation!
The following Monday: I took down the fixed logo and header for a number of reasons, 1) too constraining, and 2) it left a big goofy looking white block in IE. Normally that wouldn't bother me that much, but potential employers who happen to read my weblog most likely don't use Firefox or Safari, and might think I was some kind of a two-bit web hack who didn't know how to get rid of big white boxes in my site layout. So I added a nifty fixed background on the bottom to fill my creative void.
Another day, another redesign. This time, I redid my résumé.
Next, I'm going to redo my portfolio to match it. Then I'm going to redesign my entire freakin' website to match both my résumé and my portfolio... sort of like a Mike Rundle conglomerate of information.
And don't worry, what I did to phark.net isn't permanent by any stretch of the imagination. It's just a filler page until I get my act together.
After Firefox (then Firebird) came out, I personally kept a tally of how many Internet Explorer users I converted to Mozilla users. Most recently, I converted my roommate Adam last night. The tally is now past 30.
Unless you've been living under the proverbial web design rock for the past few years, you know of Jeffrey Zeldman and his web studio: Happy Cog.
He recently revealed the third version of the Happy Cog website, and not much has been said yet about it by the blogging community — most likely because it was released on a Friday, and us webloggers usually have better stuff to do on the weekends than post entries. I would like to talk about it a bit though.
Right off the bat, I get a sense that the company is very down-to-earth and customer-focused from the logotype — it's set in Clarendon — a thick and bouncy serif that just exudes a "hug me" attitude. Happy Cog, the company name, is describing that they are but a contented piece in the larger scheme of things, and this logo definitely matches the company personality.
The thing that most impresses me about Happy Cog is not their redesign, but that they recently picked up Adam Greenfield of v-2 online fame. This completes the professional tri-fecta. In a corporate world of over-hiring and under-delivering, Happy Cog has grown their company by a third, and is now a fully-oiled web machine. They have all aspects of projects covered — design (Zeldy), backend (Alvey), and architecture (Greenfield). Each person has different enough responsibilities that they can work simultaneously without stepping on each other's toes. That definitely cannot be said of other agencies out there.
I think this type of ultra-consolidation is where studios in this industry will be heading in the upcoming years. Why split profit 6 ways when you could split it 3 ways without sacrificing quality? All you need to do is find the best of the best, and hire them to be on your team. When that happens — as it has with Happy Cog — your streamlined approach will be appreciated by clients and will earn you more money in the long run.
Method, arguably one of the most well-known design firms in the country, has redesigned its website to be completely done with Flash. To be honest, the old site had a black background with white and multi-colored text, so it wasn't all that usable to begin with — but at least it was instantly-recognizable and unique.
Now, with the design done completely without HTML, it's even less accessible, and pretty much just blends in with other design firms who have an all-Flash website and portfolio. Ho hum, big deal. And they use frames... gimme a break.
Do they know how impressed myself and the entire web community would be if their redesign used all XHTML and CSS? Or even if they simply tried to make their site accessible and standards compliant? Nope, they decided to take the path commonly chosen and throw together a Flash site.
C'mon, Method, you guys are better than this.
I'm currently home on break for another few days so I might as well blog a bit while I'm home so you and the other person who read my site don't get upset. Okay, here goes.
The redesign is slowly making progress, and please disregard that logo I put in a previous blog post — I ditched it in favor of the "logo-less" look. I thought that calling myself (even in jest) a corporation might sound a little too outlandish, and then I'd really start to get more mail about how American Express would like to help out my PHARKNET business. Give it a rest guys, it's just a weblog. And no NBC, I don't want my own small business startup show like Rocco had, so leave me alone.
What I want to communicate to the user is this: I'm Mike Rundle and I love the internet. This is a weblog that lets me write whatever the heck I want to, and sometimes you might not understand a word I'm saying. Sometimes you understand what I'm saying a little too much, and you are free to call me on anything I say by leaving a comment. Yes, I'm a student, but I'll do any kind of web project for money (except .NET crap). And the most important one, I play golf, and by god, when spring rolls around I will blog about golf. How I'm hitting the ball, what clubs I'm using, whether I cleaned my grooves (or not), whether I liked that new Callaway driver my buddy just got, and how I played yesterday with the fellas. Consider yourself warned ;)
I'll probably let a little piece of the redesign go live this weekend, but if not, don't hold it against me. It's coming slowly but surely, and please, don't call me Shirley.
If you've been wondering why I haven't posted in a few days, it's because I'm maxin' and relaxin' back home on spring break. A dial-up AOL connection is my sole connection to the outside interweb world, so I figured I'd give the ol' laptop a rest for awhile. That "awhile" officially comes to end here, I'm afraid, because I've got work to do.
I'm headlong into a full redesign and integration of my two weblogs: phark.net and phark.typepad.com.
"Wait a sec Mike, you just redesigned phark.net like a month ago!"
Yeah, tell me about it. My reasoning for this redesign is two-fold, 1) I'm sick of having to censor/edit/write posts for either my "web design" blog, or my "college and a little web stuff" blog, and 2) because user1st.com will not be what I originally planned it to be.
user1st was to be a web design studio (of sorts), where I would sell user interface design and information architecture work to various companies. To do this, I would need to write loads of self-serving, pompous, and third-person copy, and that's just not what I want to do.
I want future clients to read my weblog, scroll through the archives, and really get a sense of who I am before they decide to work with me. If they disagree with something I say in my weblog and skip-out on my proposal, then oh well, freelance work is not and will never be my sole form of income. If they like my ideas and think the work I've done in the past is good, then let's get in touch. Because of this, I'm going to integrate the freelance/business side of what I do with the personal/weblog side.
Also: Due to popular demand (a few of my friends), I've uploaded a preview image of the new site. Enjoy!
And even more: In about four days, something will be arriving at my door which will change the way I work from now on — a new computer. Not just any computer, but a 1.8Ghz G5/1GB of RAM/160GB/SuperDrive freakin' powerhouse. The display is a 17" Philips LCD with both DVI and analog inputs: I got it for $452 at Buy.com. I searched on the web for almost 5 hours for an LCD monitor with a DVI input for about $450, and finally decided on the Philips model. The Sony and Samsung lines looked great, however for some reason, the low- (and even middle-) end models don't usually include DVI inputs. And believe me, they are a necessity for an LCD monitor.
After seeing what Alex put together with his CSS dropdowns, I decided I'd give it a whirl.
You can check out my version over here. And if you're using IE, don't bother. Internet Explorer doesn't support the :hover state on anything other than <a> links. This is what it is supposed to look like (pretend your mouse pointer was over "Safari"):
But anyway, here is the XHTML that makes it happen:
<div id="nav">
<h3>What browser are you currently using?</h3>
<ul>
<li><a href="#">Firefox</a></li>
<li><a href="#">Safari</a></li>
<li><a href="#">Camino</a></li>
<li><a href="#">IE 5/6</a></li>
<li><a href="#">Opera</a></li>
</ul>
</div>
The entire thing is wrapped in a div tag with an id of nav. You could put it anything, but I chose this because I just wanted this example to be short and sweet.
Instead of just regular text in the nav, I thought that wrapping it in an h3 would make more sense semantically. But either way, make sure you've got some text there above the ul.
After that is just a basic unordered, vertical navigation. You can find the CSS that powers it on a ton of other websites, or you can just copy the CSS I used:
#nav ul {
display: none;
margin: 0;
padding: 0; }
#nav ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
width: 375px; }
#nav ul li a {
display: block;
padding: 5px;
font: normal 16px "Trebuchet MS", "Verdana", sans-serif;
background: #E6E6E6;
text-decoration: none;
border-top: 1px dotted #ccc;
color: #000; }
#nav ul li a:hover {
background: transparent url(blue.gif) top left repeat-x;
text-decoration: none;
color: #000; }
There are a few more CSS rules needed for the trick, but Alex does a good job explaining those over at his blog. I just wanted to show what I put together.
Update: As of this coming Tuesday, I will finally be completely finished with my Winter quarter classes, and will be on 12 days of a well-deserved vacation. I don't mean to pique anyone's curiosity (or do I?), but I've been planning some major changes 'round here, and I think this will be the best time to do them. Stay tuned :)
Also: Dan's giving me the stink-eye (taken with his camera phone!)
I was playing around with some typography, and came up with this quick little pseudo-navigation item:
I've really gotta diversify the way I design. I'm stuck on incorporating line elements into my work now — whether they be horizontal (phark.net) or diagonal (BMWxml). I guess the one avenue I haven't really explored would be the vertical implementation, so there you go :)
And gradients are cool.
