Drawn.ca has posted 2 interesting sources of atypical imagery which, I realized, can be great design inspiration:
First, Dogfoose uses close-up images of produce in his illustrations. The sample below uses broccoli as treetops for a kids magazine illustration:
What an amusing way to channel the miniature look (achieved through tilt-shift photography) for infographics purposes! Is this is a subliminal technique to get children to eat their veggies? Or just a quirky case of nonsequitur?
It doesn’t matter if these questions get answered or not; what matters it that these questions were asked because of the design.
Next, we have Dark Roasted Blend’s otherworldly microscopic images. This one’s from the Olympus BioScapes competition, a photo of Drosophila larva eye neurons:
We’ve gotten so comfortable with tiled textures, but why not take an asymmetrical, unpredictable image as a cornerstone for your design concept?
Why not make trends like photographic backgrounds your own and experiment in unchartered waters? These unusual sources should be a good starting point.
Although we’re now in this transitional stage of shedding off old browsers and web technologies that have been stumbling blocks to creating innovative new websites, there’s still confusion and fear that needs to be quelled. (Some people just can’t get excited that easily.)
Jeremy Keith’s article, Misunderstanding markup, seems like the ideal anchor at this point. First, it points out the differences between XHTML 1.0, XHTML 1.1, and XHTML 2:
- XHTML 1.0 = HTML4 with XHTML syntax
- XHTML 1.1 = XHTML 1.0 with the requirement that documents should be served with the XML MIME type
- XHTML 2 = a whole new specification that has little in common with XHTML 1.0/1.1/HTML 4
- XHTML has two types: pages that are actually served using the
application/xhtml+xml MIME type; and pages that are actually served using the text/html MIME type but follow XHTML syntax.
Confusion? Fixed.
Second and more importantly, it emphasizes what the triumph of HTML5 means for XHTML:
- You can still use XHTML syntax on HTML5 documents; it’s flexible enough and backwards-compatible (unlike XHTML2) that way. You can also go back to old coding conventions like uppercase tag names, optional quoting of attributes, and the absence of trailing slashes, and that’s okay too.
- In fact, you can serve HTML5 documents as
application/xhtml+xml and you get an XHTML document, affectionately called XHTML5. At this point, only XHTML2 is dead.
- Still scared about taking the plunge to HTML5? It’s as easy as replacing that long-winded strict, transitional, or (gasp) frameset DOCTYPE declaration to
<!DOCTYPE html>.
Once you learn items 1 and 2, the third item is all you’ll need to focus on from now on. It’s a comforting message that if you think catching up to HTML5 will be difficult, rest assured that it’s not as scary as it looks.
Fear? Fixed.
Let’s move on, shall we?
Welcome to hell.
Still on the subject of the dark side of the web: I found a contest for the ugliest website held last June. The winner, which turned out to be mytastynuts.com, won a free redesign package worth $1800. Now this could have been a little more buzzworthy if the contest and company site itself looked like there had been thought put into the design. Heck, if you ask me, the current mytastynuts.com looks better, and don’t really have the right to be doing redesigns.
Of course, there’s really no harm in entering a contest where a free redesign is up for grabs—even if it ends up being not much of an upgrade at all—but that’s the problem with web design: the threshold’s too easy to cross.
The ugliest website contest would also have gone viral if the site were designed in the ugliest manner possible. Something that looks like this (without looking like they’re ripping you off). But that’s the other problem with web design: not everybody “gets” good design.
- Many have high tolerance for badly designed sites and bad design in general. Put bluntly, they wouldn’t know if something looks ugly even if it hit them in the face. Sometimes design can depend on a person’s instinct and taste, but it can also suck
- Combine that with “it’s just a lowly website”, not something cooler like architecture, fashion, or an ad campaign, and it’s a steep, uphill battle.
- And to top it all off, there’s the thin line between design and decoration, which is the absence of purpose and real content. A website, more than any other designed entity, is nothing without content and function.
Don’t be such a downer
Okay enough with the pessimism. How do we get rid of said problems? Eliminate ignorance, for starters. Buckets of inspiration from CSS galleries and image bookmarking sites are always good to have, but it’s also important to know exactly what we should avoid.
I recommend grabbing some eyedrops before clicking any of the links below:
The next step is figuring out why said sites are on the list. But that’s for another (ugly) day.
So I was reading Elliot Jay Stocks’s post on the Apple tablet and noticed all the fancy gravatars his commenters had (maybe because they were not as small as the ones in the blogs I frequent). One in particularl that caught my eye was Jeremy Swinnen‘s and made me wonder if, like Sam Wilson‘s, it was a condensed version of his website and/or brand. I visited his site and turns out I was wrong.
Avatars are usually faces (photographs, caricatures, etc.) or logos, because that’s the most straightforward way to advertise yourself. But why not try something that remind people of your own website? Chances are that’s the first thing they do after reading your comment: check out who you are via your homepage.
If the logo in your avatar is featured prominently, which is probably the case anyway, then great. But I feel a disconnect when visiting a site that has no visual ties to the avatar associated with it. And putting a spin in your branding by using more than your logo in an avatar is a worthy challenge.
Sure, we also associate people with their respective URLs, but aren’t avatars the proverbial peacock’s feathers, the smoke and mirrors, the flashing neon sign—to lure people in, establish a connection, and possibly seal the deal on whatever it is you’re “selling”?
If you’re not choosing the most effective way to bring people over from Mr. Stocks’s site, then you could be missing out.
So we know there’s a backlash of the list article format going on. And we know that the general cure to the “disease” is to go for quality, not quanity. Discussions instead of a bombardment of links and screen grabs. Though of course, that’s debatable since if I’m a designer looking for these resources in the first place, I’d find them indispensable anyway.
The thing is though, if I am looking for that perfectly tiled background pattern or that brilliant CSS3 button tutorial, how do I scour through oodles of these lists to find exactly what I need? How would I know from my list of bookmarks or starred Google Reader items that the blog post titled “50+ Fresh CSS Techniques, Tutorials and Resources” is the one I need, and not “5 Useful Coding Solutions For Designers And Developers”? These titles are super vague and because the posts are super long, it’s now finding a needle in a haystack.
List article authors need to raise the stakes and add more useful features. A table of contents, for example, that summarizes all the items in the list. Tags too, that should describe the article with keywords as specific as possible.
Perhaps someone can even create an aggregator of these lists, with proper categorization and search. It could even be—gasp—the next “CSS gallery”.
Why fan the flames and tolerate list articles? Again, I know what they’re useful for. They’re a convenient way to check up on what’s new in the design blogosphere, and you can never have too many resources. They’re certainly taking up space for thought-provoking discussions, but the demand is high and we need them too. We might as well rally to improve the format instead of banish it.
The same goes for CSS galleries and image bookmarking sites. I welcome the large amount of sites because sometimes you can never have enough. But how I browse through and experience their content can definitely be improved.
I’m not just talking about aesthetics or readability here. I’m talking about what can be considered new forms of content with sub-content that can describe and classify them:
- the list article as a type of resource list that contains different downloadable files (e.g., brushes, vectors, photos), tutorials, screenshots, etc.
- the CSS gallery as a type of website list that contains different websites classified according to style, site type, color, CMS, topic, number of pages, designer, etc.
- the image bookmarking site as a type of image list that contains different images classified according to style, image type, color, resolution, designer, etc.
Is it possible to create new content formats for these? People have managed to do so many things with Twitter tweets, and Microformats are moving forward at a steady pace, so why not see if we can remix and mashup larger types of content, like ones contained in blog posts?
One of the biggest problems on the Web is that we’re marking things up on such a low level, while tapping into XML structures isn’t as easy to do yet. But imagine if we can make all these resources so much more organized and findable. Maybe people wouldn’t need to complain about list articles and CSS galleries as cliches then.
New year, new decade. But we still haven’t gotten past everything Web 2.0. We’re still dealing with the consequences of the social media revolution. The question is, which side are you on?
Pull the brakes?
We’ve seen people dumping Facebook and still not getting the Twitter mania, but here’s something pretty recent: the Web 2.0 Suicide Machine is making the meme rounds for those who suffer from social networking overexposure.
Most of the time we just hop on the bandwagon, publish the smallest details of our lives with abandon, and regret our actions only when it’s too late. Sites like My Parents Joined Facebook and Lamebook capitalize on those slip-ups, and we’ve all heard stories of people getting fired for something they posted online. A clean break from it all could be the answer. Or an exaggeration.
Interestingly though, Facebook has blocked the Suicide Machine. Thanks for playing!
Shift into high gear?
Tina Roth Eisenberg a.k.a. Swiss Miss tweeted that her unborn son already has a “gmail account, 3 domain names and a twitter account”. Pretty sweet, I’d say.
Again, this isn’t really a new phenomenon, but not many people are looking that far ahead. After all, who knows what the Web will be like in five to ten years. If domain names will still be the way to access websites.
Or maintain cruising speed?
Most of us probably lie in the middle and won’t think to axe their accounts or be so protective of their online identities as though they were real estate. Even if your new year’s resolution for social networking isn’t anything drastic, it’s still important to stay on top of your privacy concerns and online persona. Have you tweaked Facebook’s Privacy Settings yet? How about all the authorized third-party apps that have access to your Twitter account? Do you Google yourself every once in a while to see how other people find and paint a picture of you?
Bonus: try integrating a workout into those beloved websites. Now there’s a productive idea.
I know rattling off websites in blog posts are a dime a dozen these days and may not be your cup of tea. But you might want to read and bookmark these sites—you’ll definitely keep coming back to them.
It’s a very short list, so you won’t tire easily reading this, and the sites are more like Position is Everything than Smashing Magazine. (No offense intended; I know that SM does a wide variety of blog posts, not just lists and freebies. I just mean they’re more references than resources, okay?)
Web Design+
Web Design+ contains the solutions to common web standards problems. From choosing a DOCTYPE to implementing CSS hacks, this is a great one-stop-shop for the best practices in web design out there. There are a ton of HTML and CSS cheatsheets out there, but reading them shouldn’t stop there. Refine your markup and stylesheets with the help of this site, free!
When Can I Use…
When can I use… compares support for several web design features according to browser version, from HTML to CSS to SVG to other technologies.
For example: thinking of using CSS3′s rounded corners (border-radius)? It’s not even available on IE8 and Opera 10 yet. Of course, you don’t have to avoid using them just because the conclusion says “not ready”. It’s still a very useful page for recalling which browser version can support what.
On Having Layout
On having layout demystifies the concept of Internet Explorer’s hasLayout property. A lot of the IE-related CSS problems that web designers run into are related to hasLayout, so understanding how it works is essential.
The Ultimate Website Launch Checklist
The Ultimate Website Launch Checklist helps one go over key aspects of a website once it goes live. It’s more for the designer-webmaster hybrid, but regardless of your role in the process it’s a good view of what needs to be done.
A gallery that only cares about what your site looks like when it’s printed? Ironic, but that’s what printFancy is all about. Remember those niche design inspiration galleries? This site is obviously another example of that. But that’s not all.
Unfortunately, the fact remains that people still print webpages so they can read them in a more comfortable manner; it’s not very environment-friendly, and frankly, weird behavior to people who are in front of the computer 24/7. (Weirder than using IE6.) But it’s a web designer’s responsibility to accommodate that need. No excuses. Even if sometimes, it does feel like creating a whole other website (except if you’re a minimalist, I guess).
And when you manage to create an effective print version of a site, then printFancy is another opportunity to show it off, another incentive to excel in design. Which is not just about creating something looks pretty, but something that fills a need. In this case, the need to print sites out.
(Then maybe the gallery can have a section like this, and one wouldn’t have to hold a laptop the way Jason Santa Maria did.)
First the iPad, and now a debate on the relevance of Flash. Apple continues to ignore it and touts HTML5 as the future. Google is also pushing HTML5 on YouTube, with other video sites starting to follow suit. Even Mozilla is disabling it in its new mobile browser, Maemo. Clearly, the death knell for Adobe’s most controversial product is getting louder than ever.
But it’s still all talk, all noise. How about some real action? Thankfully, over at Binary Bonsai, Michael Heilemann has taken it upon himself to drop Flash for the whole month of February as a response to this tweeted challenge:
All those who think no flash on ipad is A-OK please uninstall flash from your current browser, use that for a month then get back to me.
Installing a Flash blocker isn’t really a groundbreaking exercise and is tamer than uninstalling Flash completely, but now is the best time to figure out how dependent we are on it.
So can you survive sans Flash? I won’t go out of my way to defend it nor suffer from withdrawal without it, but the status of HTML5 video alone seems troubling enough.
More importantly, most discussions cover only the question of replacing Flash video, not other applications like games. That would be an even tougher nut to crack, even with the dawn of purely Javascript-based games.
No, this is not about plagiarism.
Imagine my surprise when Jeffrey Zeldman blogged about a list of 60 WordPress themes. A few minutes before that, I found Douglas Bowman bookmarking another list, also from Smashing Magazine. It’s like my feed reader was trying to tell me something: yes, a list article can bring an interesting discussion if you’ll just let it.
Back to Zeldman’s post, which started a discussion on whether you should use existing themes for your own design:
…Even if you are a designer, you may ask yourself if you really need to perform that next site redesign from scratch.
Every once in a while I get clients that specifically want existing themes to be customized instead of starting from scratch, so clearly there is a demand for the practice. If clients have enough initiative to choose it as a solution, then why not? Does it take more effort to find and customize than start from scratch? Depends on how comfortable you are with someone else’s code, how much you trust the other designer’s expertise, and how much you need to customize.
The bulk of the debate will probably lie mostly in this situation, but to me it boils down to don’t reinvent the wheel, but don’t get complacent either. While it is a shortcut for building a website, it is not a shortcut for conceptualizing the website.
So the other situation is this: Sometimes I envy all the beautiful themes and templates out there because I don’t really get an opportunity to use them for myself. Does choosing to use someone else’s work for a web designer’s own website make sense? It seems counterintuitive but a real problem: sometimes we barely have time to dedicate to our own projects. Sometimes we just want to use something ready-made and have fun with it.
Although there are frameworks for practically level of development these days, from CSS to JS to PHP to whole themes, they are created specifically as tools for designers; they aren’t really products for designers as consumers. What I’m talking about are the real themes that are smart enough, beautifully-designed enough to meet your discerning needs. It could be as stark as Cutline or as detailed as WordFolio: compare this and this. (Now that would be good idea for a list article: websites that are highly customized versions of existing themes. Not to mention a good source of inspiration. A niche gallery, even!)
We could probably exclude portfolio sites since web designers would prefer to show off their skills on them—but even that argument can be ruled out if the customization is custom enough. Take blogs, tumblelogs, and other secondary sites that still belong to a web designer but don’t necessarily need a design from scratch. The issues with the client scenario website still apply, but there’s the added pressure of being your own worst critic.
Would you be confident enough to use one, or would you lose sleep at night without customizing at least some bit of it to keep your design cred intact? It doesn’t have to be a bad thing; it could be a different type of challenge.
*/
