I’m not a huge fan of ‘the fold’ but I am a fan of content. Can you find it in this:
In case you’re curious, the top edge of the article title is 800 pixels from the top edge of the page. AOL paid over $300 million dollars and that’s what they got for their money.
Below is a list of books that I’ve bought but either haven’t read or haven’t finished reading. The majority of them are Sitepoint books. That’s because Sitepoint occasionally runs ridiculous deals where you can buy their books dirt cheap.
One day I hope to have time to read some of these.
Ordering Disorder: Grid Principles for Web Design
The Art & Science of CSS
Create Stunning HTML Email
Don’t Make Me Think
Fancy Form Design
JQuery Novice to Ninja
365 AIGA Year in Design
Online Marketing Inside Out
Photography for the Web
Build Your Own Wicked WordPress Themes
The PHP Anthology
The Principles of Beautiful Web Design
The Principles of Project Management
How to be a Rockstar WordPress Designer
Sexy Web Design: Create Stunning Web Interfaces
Simply SQL
I designed the new look for the site today.
Before I reveal it, I wanted to go into why I needed a new design. The previous design was a pretty good representation of me. It had a bold, minimalist style, it was high contrast, and it broke the traditional mold of what a blog looks like.
It also had two big drawbacks. One, it was designed for longer form posts and didn’t work well with short form updates because it only featured the most recent post on the homepage. Two, tweets and links, which I update all the time, were treated as secondary content. Because I don’t write posts every day, I need those to be treated more like posts, just short ones.
I also decided that I do want something more of a traditional blog design for this go-round. Why? Because I plan to clean this theme up, add a bunch of options to it, and then make it my first published theme.
It won’t be popular, but that’s okay because it’ll still be mine. So without further ado, here it is:
This isn’t quite finished. I haven’t designed the sidebar content yet and the footer (not shown) still needs a little work. But I’m going to start modding the default 3.0 theme (Twenty Ten) to look like this.
I’m taking notes from all my sessions and I’ll be posting those later and then updating them with links to presentations and such as I get them (and have time to post them).
It’s been very interesting meeting so many different people from all over the country and from across the pond. The biggest surprise so far has been running into so many non-technical people, from people running charitable organizations to traditional designers to marketers and businesspeople. I’ve only actually run into a handful of web designers or developers.
Lunch is almost over on day 1. More to come later.
Highlighting exceptions allows people to quickly spot problem areas. Example slide was a bar chart full of gray bars with one very low bar that was red. Second example slide showed negative % change in red with other percentage values in black.
Everything on your dashboard will be a performance indicator but not necessarily a key performance indicator. Example: Total sales: 9.1M — the value looks good. But if the percent change YoY (year over year) is -13.6% then the total sales value isn’t very good at all. Choose the right data to display.
“Pie charts are a bad idea regardless…” Really? It’s a bad idea in his example slide with 50 different items listed out. “Round visuals aren’t an effective use of real estate.” A round visual may leave some whitespace on the table but the last time I checked that wasn’t necessarily a bad thing.
“Bar charts are fine but…” He’s showing a slide with too many bars. Lesson here is: be careful of the data set range you choose to include.
Shiny doesn’t work for data graphics and can actually cause confusion. Example slide shows a highlight on a pie chart causing one section of the pie chart to look like two sections.
It’s difficult to prototype a dashboard because you need to develop the data model to support the prototype. Suggestions for good prototyping: Focus your work on the static portions of the dashboard. Get the right layout, data, metrics, and visualizations. Vet your ideas with the programmers to ensure feasability.
There was a list of links presented at the end that I didn’t catch, but Scot Hacker did (scroll to bottom of post).
Design Fidelity – the longer the publication timeframe the higher the design fidelity. Daily newspapers have a low fidelity. Monthly magazines have a high fidelity.
The better the design:
Wired commissions custom fonts for their magazine. Much of typography has been lost with the move to online. Fixing that is one of the goals of Wired.
Wired’s custom fonts have 10,000 kerning letter pairs! A typical font has 500.
Wired’s Tablet Project:
Combine the fidelity of print design with the flexibility of online design.
400 Designers and 1,100 Editors at Conde Naste, parent of Wired. They need a digital solution that can integrate into the existing design workflow. Conde Naste reaches over 60 million people a month.
Slide showing the flow of an article being built for Wired. Lots of steps in the process.
K4 is the database architecture that allows simultaneous distributed design and editing with remote tie-in.
What is the best way to navigate a digital publication? Influential factors: print magazines, iPhone, digital and web content, ergonomics of a tablet device, intuition and what they thought people would find easy to use the first time. Three design goals: allowing the content to shine, walk-up usability (instant, intuitive interface), and revolution through evolution, meaning not doing everything at once. The application will evolve over time.
Showing a slide diagraming the workflow to repurpose a print article for tablet devices.
Magazine browsing is a left-to-right linear process along a vertical axis (down). Tablet app uses the same flow.
Here it comes. The WIRED reader prototype is about to be shown with the current March issue on it.
iPad application will release first! Adobe worked with Wired to create this thing. Wondering if they used the new Flash-to-iPhone native app conversion to build iPad version? Demo is on a Dell. Ads are scrolled through just like in the print version. Advertising is still very important.
Showing some very cool interactive features. Image galleries in articles, 360 degree rotating 3D images, animated graphics, etc. These are the features that will make the tablet version of the magazine so compelling. Showing a second gallery implementation now–this one with thumbnails.
They’ve actually designed pages different for landscape and portrait orientation. On top of the magazine layout, that’s insane. Just showed a zoom in on an complex image. Ads with interactivity. They’ve built ways to layer interactivity on top of flat advertiser assets, like a photo explorer for hi-res photos, form interactions, 360 rotation for 3D images.
Showing built-in audio. Called Kevin Smith annoying.
Showing several different platforms, including several smartphones.
They won’t launch with usability features for sighted or otherwise handicapped users. They said they would add those features in the “years to come.” I’m willing to bet that will piss more than a few people off. Also doesn’t make Adobe look good since they’ve had longstanding usability issues with Flash.
They don’t yet know how the new tablet app will affect the website and what content ends up on the website. They want to reset the economics of print journalism.
They want to reach out and be wherever their readers are, including the iTunes store. This was a response to a question about giving away subscriber data to Apple. Good question. Surprised that they don’t seem to be very concerned about it at all though. I hadn’t even thought about this issue until the questioner raised it.
Psychology Cards
10 minutes late to the start of the panel — Groupon breakfast ran long with cool conversations with cool people.
He’s talking about iLike.com where, instead of getting a form to enter artists he likes, he was presented with a grid of artists (picture + title) that he could select bands he likes. At the bottom of the page he could see more artists or he could go to the homepage. Very much like Netflix.
He clicked through 10 pages of artists. The visual nature of the list piqued his curiousity.
Recognition over Recall – select bands you know rather than bands you like.
More seductive interations on iLike: they gave him the iLike challenge where they played song snippets and rewarded points like a game depending on how fast you can identify the song name.
Increasing motivation = psychology.
What do we know about people? We’re curious. We seek out patterns. We don’t like to make choices but we like choice. Mine: We see patterns even where there are none. We seek the opinions of those we trust or we rely on the wisdom of crowds. People like to talk about themselves. People like free stuff.
His stuff: we’re lazy, self-centered, like to be the hero of the story, respond to our name when it is called out, we’re afraid of change.
If we know people are curious, how can we use that?
If you salt (seed) the tip jar people are more likely to add tips. It’s an example of the social proof (similar concept to the wisdom of crowds).
Good example of social proof: the let’s fix Outlook site that has a wave of user avatars in the background.
The Hot Wheels section has tons of options but it also has a mystery car where you don’t know what you’re getting. That’s the one the speaker’s kids always want.
California Kitchen gives out a card prize but you can’t open it. You have to let them open it when you come back. It could be a free appetizer or $1,000. Great example of mystery.
LinkedIn will show you some of the people who have viewed your profile but you have to upgrade your account to see everybody who views it. It only shows you a teaser of who has looked at it though. A “leader in the design industry” for example.
Quantcast gives away website metrics for free then asks “Is this your site? Get Quantified to get more data.”
Private beta + social proof = a powerful combination, much like a nightclub where you have to be invited to get in.
Provide a limited interface. Twitter has a max of 140 characters. Rypple limits reviews to 200 characters.
Earning points to unlock features or spaces.
Sabre’s internal wiki:
Giving limited points to dish out to your own skillsets from a list forces you to limit your responses to what you’re really good at (great idea for a job applicant board!).
Showing a “No Parking” sign. Now showing a Chili’s sign: Curbside pick-up only. All others will be crushed. Showing several other examples of humorous copy online.
You meet people at parties but you don’t really remember their names. Some sites throw in default data. Example: Brighter Planet encourages you to go green. It starts out by populating your profile with defaults and giving you a default rating. It asks for a lot of data but everything you enter affects your rating number. They only expose one form field at a time. You enter one and that form field goes away and it shows you the next one. This is both default data and a good feedback loop.
“Brains pay attention to what brains care about, not necessarily what the conscious mind cares about.”
What does the brain find interesting? Surprise, novelty, the unexpected, fun, playfulness.
Mailchimp has recommended sizes. If you make an email too wide it starts giving you warnings “ouch, stop it, too wide, etc.” If you make it too wide you tear the monkey’s arms off.
Will the real dopplr logo please stand up? Every visit the color bars change on the site. Very spartan site except for color. Color represents locations, cities around the world. But they don’t tell you that, which makes it a fun thing.
Pattern recognition, playfulness, delightfulness.
Sorry, no 9 tips or 5 lessons, but he is making a group of “mental notes” cards. The next time you’re sitting down with a group trying to solve a problem (ex: we need more registered users), you pull out a card and then brainstorm different ways to apply the principle of psychology that is on the card (ex: social proof). Cards will be available at the end of April. Preview packs of the first seven cards are being given away to attendees of the panel!
I missed a lot of stuff. I couldn’t keep up with the speaker. Good panel.
Paul posted his presentation on his website.
We specialize in large, corporate, committee-driven web projects. (paraphrased)
I’m talking about pain-free design signoff for your clients, not you! If the client is happy, you’re happy.
Paul is using the story style that he used in his recent article (it was either in Think Vitamin or Smashing Magazine–can’t remember right now) and in of his recent podcasts.
You present your perfect design and the client isn’t happy because you didn’t find out about his audience or other stakeholders. You presented only one design instead of three, leaving him with no way to pick and choose elements that he wants to build his own frankenstein website. Now he feels like he has to tell you exactly how to do your job:
“Can we fill in that whitespace with copy? Make it bold, make it bigger, make it brash. That’s what I want. Can you move it slightly to the left? Make the logo bigger.”
You feel like you’ve been reduced to a pixel-pusher and you start to argue that you’ve only budgeted for three revisions.
Do you ever say “screw it, I’m just going to give the client exactly what they want,” and just washed your hands of the project. Yes.
The problem is that we are too defensive. We minimize the interactions that the client has on the project so that they don’t screw it up. We don’t do multiple designs because we know it will lead to Frankenstein creations. We discourage them from showing the design to others because we’re afraid of design by committee.
The client feels ignored, kept in the dark and like we think they’re idiots.
Use the skills we already have and communicate.
What the client wants:
How to give them what they want while building a quality, user-centric site: collaboration not confrontation.
Don’t ask them for sites they like. Show them sites you think are appropriate and talk through the elements you think apply and why you think they apply. Get their feedback.
Next show them moodboards. A moodboard shouldn’t take more than an hour or two to make. This is the “multiple comps” step but you’re not spending days building the different designs.
Next up build wireframes. You can build the wireframes with the client using paper or a whiteboard. You can involve developers and project managers at this stage.
Now you can move to the design mockup process. Now you’re producing a single mockup which won’t be a surprise to the client because you’ve already done everything else together. Now you want to present to the key contact rather than a committee. Because a committee will all have different opinions and they will try to find common ground, which means designing on the fly and making compromises. Now you’re back to the Frankenstein design.
Again ask if it meet business objectives? Does it meet the objectives? How will users react to it? Provide them with all of the background information. Paul suggests giving them a video with the mockup in it so that, when they send it around for feedback, they have to send the video with all of your background information and reasonings.
Design testing. The flash test: show it to them for five to ten seconds and then ask them to describe what they saw.
Iterations. One or two rounds of iterations instead of endless rounds because you’re already most of the way there before you even start designing the actual mockups.
Collaboration not confrontation
I’m redesigning my site. If you’ve been around here at all, you’re probably thinking “but Chat, you just did that in December!” Well, yes, I did. But that was more of a triage. Taking a broken website and fixing it so that it had the bare minimum usability.
One thing I’m very proud of with the triage design: total images for the entire site (not counting any images I add for specific posts, like this one) are about 3.7kb. You read that right. 3.7 kilobytes. Not 370 kilobytes. Not 37 kilobytes. 3.7.
The new design will be a bit heavier than that, but I’m going to try to stay true to the principles of lean and mean. I’ve spent months trying to come up with a design that reflects me. Months before the redesign I was trying to create a new design. One road I went down was a three dimensional wall look. Another had me trying to creative an illustrated look. That second one definitely isn’t me but I wanted to grow who I was as a designer.
I’ll keep working on the growth thing but, in the meantime, the new site I’m designing represents who I am right now. And that’s a minimalist designer with a love of iconography and type. I’m including a mockup of the new homepage here.
Mockup of new homepage
After trying to come up with something for six months, when I finally let go I designed the new homepage in two hours.
Creating a website can be a daunting task, especially if you’ve never done it before. More and more people are turning to blog software like WordPress to get a site up and running with very little effort and even less know-how. Free themes let them quickly choose a theme that works for their needs, whether those needs are running a business or talking about their cat (I’m obligated to mention talking about cats whenever talking about blogging in a broad sense. Thank you for that media.)
The problem with free themes is that they usually don’t meet your exact needs or do exactly what you want them to. Then there is the problem that it’s hard to stand out and be unique when you have a website that looks identical to dozens, or even thousands, of other websites. If you use WordPress long enough, you’ll eventually want something unique.
This post isn’t going to cover how to build your own theme, that’s covered in other places. What I want to do here is simply provide some sources for inspiration. And, if you are just starting out, these sources also include lots of free templates that you can start with.
ThemeForest, part of the Envato network, at the time off this post offers 538 WordPress themes that range in price from $10 to $35. Each theme includes multiple screenshots you can look at as well a live preview. You can sort by rating, sales volume, price, and more. The sidebar breaks themes down by category including magazine, corporate, non-profit, and entertainment.
WooThemes is kind of cool because they actually seek out leading web designers to create custom themes for them, which leads to them having some of the best themes available. At least from a visual perspective.
Personally, I think the real power of WordPress theming is in the niche/custom themes. WordPress can be made to do a hell of a lot more than just blogging. Custom themes with custom plugins can create a turnkey wiki, or store, or real estate website.
Frameworks are somewhat of a new concept, although in web years, I suppose they’re more like teenagers. Frameworks handle most of the heavy lifting, the repetitive stuff that needs to be done for each theme. You can build as many themes as you want that all use the same base framework, which itself is a theme. It’s a brilliant idea and, if you’re designing a theme and you’re not planning to roll your own framework, you should consider starting with an existing one.
Pure inspiration. We Love WP gives you a good idea of just how flexible your designs can be. The sky is the limit. If it can be a website, it can be WordPress theme.
The definitive source. WordPress has been aggregating themes since long before people starting building a cottage industry around selling “premium” themes. Since it’s open to anyone they’re not all gems, but you can do keyword searches or sort by popularity to help narrow things down.
These guys take existing GPL themes, modify and improve on them, and then re-release them. For free. They’re fairly new and “they” might be one person. I’m honestly not sure. I like the concept behind the site though and I hope the idea takes off.
RocketTheme releases one or two new themes a month. In November they did a big refresh on their existing themes, updating them all with new features.
Mashable bills itself as the “Social Media Guide” and that apparently includes guiding people to free themes for social media software like WordPress. I wish they would drop the hyperbolic adjectives but, hey, they have advertisers to please and bills to pay. And their content is free.
One more collection of free themes. These are definitely not all gems but there are a few good ones in the mix. Enough to warrant taking a quick look.
Chat Clussman is a design technologist and a father. His main obsession is quality of life but he’s also fond of writing, photography, design, grids, Apple, and WordPress. He lives in Austin, TX.
