3 UI Design Books for Your College Class May 7, 2008
Posted by Ryan in : Tech, Reviews, Books, Design, Web Sites, Graphics, interface, Teaching , 1 comment so farMy friend Jake called me a few days ago to tell me he will be teaching a User Interface Design class at Ferris State University in Grand Rapids, MI next Fall. After my congratulations, he asked me to help him pick out a textbook for his students. Here were my suggestions:
I loved this book from the moment I picked it up and learned why the iPod makes us happy - it’s the Golden Proportion, or the Golden Rectangle, as some might say. Then, at the bottom of that page, you get “links” to some other design topics you may find helpful when discussing the Golden Proportion, like The Rule of Thirds. Anyone who designs anything, from software to hardware and anything between, needs a copy of this book.
I told Jake to have a copy of this book around for the class to reference, but I wasn’t sure if they all needed one.
This is the one book out of these three that I don’t own… yet. I saw this in the book store while searching for a book about Processing, so you can also find it near the graphics books. Information Design is the name of the game, and Mr. Tufte has some of the most beautiful and useful designs you will ever see. He even goes in to how they displayed and photographed some of his sculpture outdoors. Absolutely breathtaking.
This book would be a great resource for a Level II UI Design class, but I think it is perhaps too detailed for beginners.
I’ve heard a lot of folks tout Don’t Make Me Think
Since my friend was looking for a book about UI Design, I found this on my shelf and made my final recommendation to use Eric Eaton’s book for his class.
Design Whys starts out by telling you what this Interface Design stuff is all about, and walks you through specifying and planning a project. Then you get an introduction to the common UI elements: links, buttons, form elements; what makes a link clickable, colors, designing for different browsers and devices, why use a link vs. a button, basic typography. The section on Advanced Interface Elements breaks us out of what’s normally possible on the web to cover things that would now be considered AJAX-y forms, applications, metaphorical interfaces, and custom or experimental UI elements, like those created with DHTML, Flash or 3D.
After the first 200 pages of the book, he launches us into a case study of some useful websites (at least as they were in 2003). The sites in the book are no less useful, beautiful, or innaovative than they were 5 years ago, though. It’s interesting to take a look at what folks were doing back then that the world still hasn’t caught up with. We seem to be constantly wanting to homogenize the experience (maybe I’m guilty of that as well). There’s room to be daring on the web, and I don’t mean large fonts, pastels, and rounded corners.
I hope Jake takes my suggestions to heart and picks the best candidate. If you have a UI design book you swear by, or you have a comment or question about one of these books, I’d love to hear it.
Giving the client what they need, not what they ask for April 10, 2008
Posted by Ryan in : Markteting, Cervo, Reviews, Trends, Books, Design, Restaurants, Web Sites, Teaching, Storytelling, Programming, Freelance , 2 commentsJust now I was buying a new domain name because of a misprint in my AXIS interview - it’s probably a common mistake, so it was worth the $7.
Anyway, there was an ad for some wannabe-posh restaurant on I-Drive - “Bola”. link
OK, seriously, who has a flash website that plays music? With late-90’s slideshows?
I also love that when I link to the “blog” - check out the design they chose for that. All of the posts on said blog have this huge text right below the title and right next to the very stale and infrequent date of the posts - “No Responses”.
Way to go on the authenticity, D*****bags! It’s not the designer’s fault, there was a breakdown in communications. Somebody has also dropped the ball on doing a follow-up with the client once the dist settled.
If you really want to create a compelling experience on a website these days, I think the only option is to use video. If your restaurant is so “high-end”, hire a damn video crew to come out once in a while and throw THAT on your site - or maybe even your non-blog.
Check out some of the stuff MindComet is doing, for example. They don’t mess around. I can’t say I always love every site they put out, but they know their strengths. I definitely appreciate the need for experienced marketing folks working along side talented designers and developers. I don’t slight the person who created this project, they just had too many things to think about all at once.
I’ve recently been re-reading a book by one of my role models - Hillman Curtis. It’s called MTIV: Process, Inspiration and Practice for the New Media Designer
I actually had “New Media Developer” printed on my business cards for a while, and people would ask “What does that mean?” I’m sad to say I didn’t have a story for them at the time, but now I think I’d have a thing or two to say about it.
In MTIV (Making the Invisible Visible), Hillman, who is a world-renowned designer with clients like Adobe and bestselling bands on his client list, tells you how he gets his work done. In fact, all of his books are like that - he goes through his creative process. He’s got some steps, he identifies the goals at each step, and he gives lots of anecdotal support. He’s clearly been working at a very high level for a long time.
People who have read this book and really understand it would have never designed that site for BOLA - at least not in the last 18 months or so.
However, even at a job I had for a couple of weeks managing an online store for a print shop, I not only had to put my propeller hat on, but my marketing/customer/business hat on, and normally the propeller hat gets priority. That means I’m donating 40% at best to thinking “is this even a good idea, does this communicate the message, will visitors understand the story?”
Then a few weeks later, I’ve started writing code, laying out the homepage, or what have you, and it hits me - THIS SUCKS! Did I design this? Then I remind myself I’m “not a designer” (which is bollocks because I’m always calling myself a “front end guy”), and I come to terms with the reality of the situation. We’re not communicating effectively here, we’re masturbating and pretending the result was a web page.
How do we fix it? Drive back to Sanford, tell the client “I’m sorry Mike, I had my head up my ass when I designed this… will you pay me to fix my own mistakes?” Nobody is going to go for that! Sure, you can give them a spiel about ROI and conversions, and maybe wrapped in the warm fuzzy blanket of “SEO”, which might as well be voodoo and divination to most clients, you might even be able to convince them to spend 30% of the original budget doing what you really should have done in the first place, in 15% of the time, without your trusty subcontractors, in your spare time, just so you feel good about work that you’d already written off as “finished”.
No, you can’t fix it. Clients don’t go for maintenance contracts any longer. Most of them don’t even want to pay you for hosting, let alone support.
The ONLY solution is to do it right the first time. That means making checklists, getting your freelancer buddy support system to consult and make sure you’re not leaving any huge gaps (oh, you do have some sort of a peer support system, right?), and above all, making sure you understand what the client needs.
I’m only feeling the slightest bit hippocritical right now, and if you’ve worked with me in the past, and you’re quietly thinking I’m full of shit as you read this, consider this my formal apology for underdelivering. In most situations during my “freelance” (”slacker”) career, I didn’t put 110% to anything work-related, and it wasn’t until my “Tabula Rasa” day (Jan 17th, 2006), that I had even decided to push myself to improve, and it looks like it’s taken about 2 years and 3 months.
So, FullSail grads, budding New Media Designers and Developers, and folks that have been doing this “since the early days”, and are planning on making a concerted effort to create stunning work, every single time, even if it’s for half of your rent money, here are a couple of tips:
- It might take 27+ months to feel as though you’ve arrived
- You MUST make sacrifices in your personal life for professional improvement
- Freelance is not a hobby, it’s making a living. Mom and Dad can’t pay the bills forever
- Go buy a copy of MTIV
- Keep your head out of your text editor (or photoshop) while you’re asking the client how you can work together to effectively communicate the story of his/her business
- Don’t use flash slide shows with music on every page
iPhone Web Clip Favicon Fun! January 28, 2008
Posted by Ryan in : Tech, Links, HowTo, Drupal, Browsers, Trends, Design, Web Sites, interface, Branding, phone, Petentials , 1 comment so farIf you have a web page of any kind - blog, business, social network, whatever - take 3 minutes out of your day and hook this up.
Everyone has a fun little 16×16 favicon to sit in the bookmarks section, links bar, or tabs of their favorite browser (Flock, Songbird and Firefox come to mind). This has been a long-running tradition with webmasters and SEO companies to give you that last bit of branding: the favicon!
Now with mobile devices and desktop apps (rich internet applications, too?) getting into the mix, there is a need for favicons larger than squint. Enter, the apple-touch-icon and associated rel tag, which is even easier to implement than a favicon. No special file formats, no special programs needed. Instead of a screenshot of the web page, you now have a degree of control over a bookmarker’s (webclipper’s? that sounds nice) touchscreen.
All you have to do is name the thing apple-touch-icon.png and throw it in your document root. According to the primary vivid, it should be 57×57px, but that’s actually the rendered size and not likely the size Apple uses internally. If you go to http://apple.com/apple-touch-icon.png, theirs is a nice round 129×129, which is roughly 2 1/4 times larger than 57×57. I figure Apple must know something we don’t, so I’ll play along.
And now, a handy diagram to show you what’s up:
Favicon
16×16Apple Touch Icon
57×57Apple’s Official Icon
129×129
Once you get your image loaded, borrow the boss’ iPhone and add the webclip to your home page. There is also a preview screen that lets you know instantly if your icon is working (not pictured).
The iPhone even added a nice glossy, buttony finish to the experience. Ahhhhhh…! You’ll also notice the edges of your icon may get trimmed (which caused the boss to make a face). This is, as far as I know, normal. If you don’t want the boss to make a face, center the icon and leave some extra space around. Using the Apple example may be a helpful guide.
Last but not least, you may be wondering: “Why do I have to name my icon something so specific, and why do I have to use the document root?” Looks like you don’t. Again our friends at vjarmy.com tell us that there is a rel-tag we can throw in the header if we want to place the icon elsewhere:
<link rel="apple-touch-icon" href="/path/to/my-cool-icon.png" />
If you don’t want to use a .PNG, you have smelly feet, but if you’re OK with being known as the smelly foot man, by all means, don’t use the best web picture format. I also had to dissuade my boss from experimenting with transparency in the .PNG, because I’m quite afraid of the results. Imagine a person with a naked woman on their iPhone desktop; now imagine your company’s logo displayed distastefully close to (or on top of) an unmentionable portion of said woman’s body - with a transparent background! Yikes. I would feel very sorry for Six Apart on that day…
I find the apple-touch-icon tag to be a scoche proprietary for my taste, but so are iTunes tags in podcast RSS feeds, so I guess we must needs put up with a little bullcrap every now and then.
I also heard someone recently complain about sites that have a default iPhone interface, and I mostly agree. They should put the interface on a subdomain so you can get at the regular functionality of the site, but I believe a truly useful service should be user-friendly through multiple interfaces, and traditional web apps are not always suited to touch screens.
If you have any questions (or if I forgot something) buy all means, let me know.
I am also hoping to make a small and fun Drupal module that encourages you to upload a 129×129 image to use as your site’s official webclip instead of a screenshot, so be on the lookout for that. Would you like to see other iPhone-friendly features integrated, like style sheet includes, javascripts, etc? I’d love to know.
Drupal vs. Movable Type August 19, 2007
Posted by Ryan in : Tech, Blogging, Drupal, Trends, Design, Earth, Web Sites , 1 comment so farLighter Footstep is a community site to learn about reducing your impact on the planet, and I recently noticed on their Twitter feed that they’re considering switching to Movable Type from Joomla. This was the email I wrote back to Chris after his query about Drupal:
I don’t know much bout Movable Type, but I’ve watched some screencasts and heard lots of good things. As a blogging platform goes, they have one of the tightest and richest experiences you’re going to find anywhere. Six Apart does a great job on user experience. One downside is finding Perl programmers to do any custom stuff for you if you don’t already know any.
Drupal is fantastic for, but not limited to, publishing a community site with multiple user accounts, forums, rich media, and just about anything you can think of. Drupal is designed to be 100% extensible, so there is nothing on the web today you can’t do with drupal, it’s more a question of whether you have the vision, resources and expertise to pull it off.
Admittedly, I’d want a lot of customizations to make Drupal into a great day-to-day blogging platform - I’m currently using Wordpress almost everywhere I blog or podcast because it is just so streamlined - I imagine Movable Type is a similar experience. Using Drupal is like graduating from middle school to your first full-time job, where you are now responsible for lots of things you didn’t know you needed to manage, because someone was glossing over the grim details before. However, that also means you get more control. Still, once you get set up, the experience is very similar to any CMS platform.
As a personal plug for myself, I’d like to say I’m an extremely competent Drupal developer and theme guru. I’ve been working with drupal 25+ hours a week since January.
I hope this helps you in making your decision.
Addendum: Movable Type is not free for more than one user, or for commercial purposes. I see this as a very big issue, as there is an ongoing cost associated with your otherwise free-to-maintain website. Anyone considering getting into web publishing should consider the cost of “going pro” should the opportunity present itself.
Why the iPhone makes us happy July 17, 2007
Posted by Ryan in : Tech, Podcasts, Video, Trends, Design, podtech, interface , add a commentThis is the kind of thing I think one would study if they attended FIEA. Video by Robert Scoble of PodTech
I love Motion Graphics June 3, 2007
Posted by Ryan in : Music, Video, Film, Design, Web Sites, Graphics , add a commentFor a while in college, I studied 3D graphics, motion graphics, animation, etc. I’m also a big music guy, and a huge fan of Japanese sample artist Cornelius. So when I see stuff like this, it really gets me going.
New Server April 8, 2007
Posted by Ryan in : Tech, Site News, Career, Blogging, Podcasts, Cervo, Links, Drupal, Design, Fringe, Liberatr, Web Sites , add a commentEarlier this week, I lost 3 months worth of email, to a problem as-of-yet undiagnosed. I had been meaning to get things moved over to our CervoSites hosting (it is our hosting reseller plan), but I was worried the transition wouldn’t be smooth… like maybe I would lose all my email!
I am now on the new server and email is running again, but if you sent any important email to < rprice AT ryanpricemedia.com > you’ll have to send it again, I don’t have it.
Moving over the wordpress and upgrading from 2.0.7 to 2.1.3 couldn’t have been easier, and now links and posts share taxonomy - very efficient.
I also made the switch (and redesign) for Blogging Fringe, mostly because we were on Detroit Creative’s servers, and their PHP version is old. Also, I’ve been getting free hosting for Liberatr podcasts with Jake for a year now, and it is time to renegotiate the sponsorship.
We’ve been hosting the Cervo Systems website on our own servers for months now, and a few weeks I will make that look all pretty and make podcasting/media the focus of the site, but I have too many contracts open right now to get to work on my own sites. However, I was told the other day to consider myself one of the people in Florida who knows more about Drupal forms and theming than just about anybody in the state (Kia would argue the SouthEast, but I have nothing to back that up). You can see for yourself once we start opening up Petentials a bit more… right now only about 50 people have access to the site. If you want to get on the beta list, email me and tell me why.
Museumr - Make an art gallery experience with your photos March 27, 2007
Posted by Ryan in : Tech, Links, Trends, Design, Web Sites, photos, mashups , add a comment
Play Didge — Hero in Bed — ComicJuice Comic Mash-up fun March 26, 2007
Posted by Ryan in : Tech, Links, Drupal, Reviews, Trends, Design, Web Sites, London , add a commentI have been playing with ComicJuice - think ComicLife, but inside your web browser, and you can embed the content anywhere you can post an iFrame - NO FLASH!! Wow! Play Didge — Hero in Bed — ComicJuice Comic Mash-up fun
…and it was built with Drupal.
New Header Image March 7, 2007
Posted by Ryan in : Tech, Site News, Blogging, Mac OS, Design , 1 comment so farI don’t think anyone who regularly reads this blog thinks they won’t see posts like this every now and again - so to the people reading this post via RSS (and a few on email), visit the site and leave a comment about the header image I just put together waiting for some video to capture.
Link to the old image for comparison. I could tell you the message I’m trying to get across with the image, or you can figure it out for yourself.
Like the last header, I took this picture with my built-in iSight and edited it with the Gimp.
