I think Rundle would appreciate this list more than me, but I can definitely go along with it.
- When your markup is readable by humans
- When your functionality degrades gracefully
- When you can increase the text size willy nilly and it doesn’t break your layout
- When your site works in Internet Explorer without you trying
- When your site’s hierarchy is hierarchical even without your stylesheet
- When your url structure makes sense
- When you make a really awesome form
- When the client says “this is great, this is exactly what we wanted” and you agree
Friday I said I believe your message is the most important aspect of your site to keep in mind when designing it. For me, the second most important issue is your audience. When designing a site it might be easy to say that you are designing for everyone, but you must realize that every site serves a specific audience.
When I say this I do not mean generic audiences like single white males age 20-35. What I mean are specific types of audiences. For this site I perceived my audience to be web designers and others who may have some interest in design or programming for websites. This along with my message helped me to develop the design of the site. I realized that most designers work with resolutions above 800×600 and so I made just a little bit wider than that. Content wise, I know I have to bring something different to the table to attract readers because there are plenty of other well-established design blogs out there and I also know what kind of style and tone is allowed. Finally, I knew that most designers would respect a minimalist site because they would also see the usability involved along with the design and understand that it is not easy designing something simple that is different. Once you have figured out your intended audience (besides “everybody”) then you can have a better idea of how you should structure your site.
more
Jon Tangerine, David DeSandro, Trent Walton have all come up with ingenious ways to create image-free logotypes by pushing the limits of CSS (Sean Martell made a mouth-watering CSS-based logo too, but doesn’t contain text) that one has to wonder: is this the next step in online branding and identity?
The simplest argument against this could be that a logo must be constant. In the absence of CSS styling, possibly even helper JavaScript, an image will not suddenly morph into a default browser style and render a brand generic. See the image above for how the CSS-based Opera logo degrades in different browsers.
Now that excludes the scenario where images are turned off, and where text—styled text—can come in. Instead of simple image replacement techniques, we now have @font-face embedding and other advanced effects to bring the text as close as possible to the original design.
Text is great because you can read it, as can search engines. Another thing text based logos have going for them is they’re easier to make bigger; that’ll win over a lot of clients.
But there’s a great deal of extra markup required to achieve the necessary look. Does this make sense for the notion of a logo, which is inherently more portable with an image than with a bunch of divs, spans, classes and IDs? Should logos always be images and nothing but, or can they be both text and images? Which should come first, designing the logo in the browser or in a graphics program? Or should all of this experimentation remain just that: experiments?
Me, I just love we could be on the brink of shattering print conventions, yet again.
Google is throwing its own hat into the web fonts ring with the Google Font Directory and the Google Font API. While it appears it doesn’t have any partnerships with the big names in typography like TypeKit does, just a handful of open fonts, it does have a partnership with TypeKit itself (as you’ll see below).
How the Google Font API works
Once you pick a font, you can embed it on a webpage by grabbing code that looks like this:
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
And use it in your stylesheet like this:
h1 { font-family: 'Josefin Sans Std Light', arial, serif; }
You can also use other fonts using the WebFont Loader, which is a JavaScript library developed by Google and TypeKit.
Bane or Boon?
Although I won’t be ditching Font Squirrel anytime soon, one great thing about this new development is that the fonts are hosted on the most reliable servers in the world, just like the different JavaScript libraries are. The even greater thing is that this is Google, one of the strongest forces on the Web, is placing a stake another aspect of web standards.
Of course those things are scary at the same time. Google can just pick any endeavor under the sun, spend resources on it, and possibly dominate, if not dictate the market in no time. It may not get the purist designer types on board, since Google doesn’t exactly have the best reputation for great design, and its presentation has a bit of a developer slant, but it knows its web design technologies well. And in the case of web standards, where new practices are being adopted and old browsers are being discarded at a snail’s pace, Google’s massive resources and influence can only do well to speed things up.
The three-dimensional, folded look hailing from the fascinating art of origami has been circling my design radar for a while now now. Let shop around for a bit of inspiration and see how you can inject it in your own work.
A really short history of Origami
Origami is a Japanese word that literally means “folded paper”. While the term itself showed up only as recently as 1926, it’s been around much longer, as the use of cut and folded paper was first used in religious rituals. It was during the Heian period, when paper became a more abundant commodity, that origami branched out into a form of entertainment. There is documented proof that paper folding developed independently in Europe as well.
Get the look
The easiest way to go origami is to use imagery that actually follow how folded creatures and objects look like. In this case, the website Tori’s Eye uses birds. It takes a step further and gives different textures to the background to match the playful, crafty feel. Top it off with some JavaScript animation and you’ve got yourself a stunning origami-inspired website.
This one is a less literal interpretation of the origami look. The idea is to use a lot more diagonal lines instead of just perpendicular and parallel ones. The shapes behind the main content area seem to be mimicking sheets of paper stacked together, but keep it abstracted with transparency effects. This happens again in the background.
Ian Soper’s site looks it has a long sheet of paper with many folds standing upright. Spreads for iPad does the same thing, but vertically.
Fonts
Choose more angular, abstract typefaces for a nice origami effect in text. There are a ton of origami-inspired alphabets out there, so I’ll just list fonts you can actually use:
Origami font by Formfound (Peter Fritzsche) (free for personal use)
Cube font by Fontfabric
Cube 02 font by Fontfabric
Quad font by Fontfabric
Facet font by Fontfabric
You can also use dingbats and other similar accents:
Origami Bats dingbat font by Lauren Ashpole (free for personal use)
Logos
Color and shade are playing a bigger part in current logo trends so it’s no surprise that illusions of three-dimensional effects, including folded shapes, are popular right now. The logo for Simpla CMS is one such example.
These logo concepts by TKhoury actually use the folded effect to convey more meaning.
Some closely related techniques to be inspired by: cubism, facets, hexahedrons, ribbons, quilts, mosaics, optical illusions.
Icons
This social media icon set by Paddy Donnelly is a breath of fresh air from all the other ones out there. Adding these to websites short of mandatory lately and if you’re adventurous enough, why not go for this almost abstract look? Or make your own—it’s a great exercise for deconstructing recognizable logos.
Buttons
I know that rounded corners, especially with “the new (CSS3) hotness”, are not only trendy but have also been psychologically proven to appear more friendly and thereby more clickable, but you can still apply the basic idea of making sure a button looks like a button while retaining a more geometric, less marshmallowy feel: use gradients, bevels, and shadows.
You could even go the opposite route and apply the sharper edges on buttons you don’t want users to click, which Jeff Atwood calls The Opposite of Fitts’ Law:
Uncommon or dangerous UI items should be difficult to click on!
The spiky button is an exaggerated example, but the idea is sound: apply the less welcoming look of hard edges on the buttons you don’t want users to click on.
Backgrounds
It’s the easiest and most recognizable way to incorporate a certain look in a design, and you can pick from a variety of options: patterns, textures, or photographs.
Mediasoldier uses a folded paper pattern in the header background that really captures that origami feel but also matches the grungy and grid-loving look of the site. It also mixes with two other backgrounds: the striking cracking concrete wall, and the subdued diamond fence.
Other Design Touches
Will graphics be prominent in your design? Give them a 3D twist. The illustration on Cogaoke is an excellent style. Bonus points for imitating Japanese character styles in the text “happy”.
Dog ears and page curls can be elegant additional touches instead of distracting and annoying. And although Cleverclick’s design isn’t so obviously origami-like anymore, the still exudes its minimalist, organic sensibilities.
Fold away
Origami is a great design concept to build upon. Experiment with shapes, shadings, and space to come up with an edgy look—literally.
Right now, so many major players in the web browsing space have turned to the WebKit project for its rendering needs—
- Apple: Safari
- Google: Chrome
- Nokia: Symbian web browser for S60
- Google: Android web browser
- Research In Motion: BlackBerry web browser
- and more
—that one has to wonder if web browsers should just stop running on their own and agree to just merge, possibly under WebKit, since it seems to be so popular across the board. To be clear, if Mozilla’s Gecko renderer had the same track record, I’d say the same thing.
It’s less a matter of killing healthy competition and innovation among vendors, more about eliminating the headache of rendering differences. People can probably file away all the browser bugs and inconsistencies across browsers and their various versions in a full encyclopedia set. (IE6 would take up at least a couple of volumes.) This tedious aspect of front-end development could be greatly reduced if all these browsers adopted the same rendering kit. Then the vendors can focus on improving and innovating in other aspects, like what Google did with its JavaScript V8 engine.
Mozilla can enjoy more time expanding its already large and loyal userbase, working on Labs products like Bespin and Weave, pushing for the WOFF web font format, and so on.
One can argue that if we should be able to choose browsers, then the same can be said for underlying rendering engines, and accept the differences as a a consequence of the freedom to choose. But does a consumer of the Web need to choose which rendering engine he prefers? Or are the differences something we can finally do without?
I, for one, would be thrilled if we didn’t have to worry whether websites looked the same in every browser, and just focus on making websites look and behave the best they can. And I’m pretty sure ordinary users don’t even think about rendering differences.
Blackbird Pie is Twitter’s very own tool for embedding tweets on webpages without the cumbersome, semantics-killing screenshot method. It still lacks the dead-simple interface Twitter is notorious for, since you have to enter the URL of the tweet to grab the embed code and it’s not even built into the system yet, but that’s because it’s a rough prototype at this point.
Since Twitter is an ecosystem of early adopters, it didn’t take long before a bookmarklet surfaced, which sports only a minor difference with the original code in the date format, and seems to display better on this site.
Note that this method inherits your websites styles, which means you may or may not have to tweak your CSS to accommodate it. Unfortunately it still looks bad in feed readers.
Has progress been achieved here?
I’m not sure this is any better than a screenshot. Putting aside the long-winded user flow of grabbing the code since that can be remedied once it’s built into the Twitter system, there’s an overflowing amount of inline CSS to copy and paste. The advantage to this static code, however, instead of a JavaScript embed is that the text is preserved even when the tweet is deleted.
The question remains: should people go through all this trouble to use tweets as quotes? Is there really that much more to be gained by preserving the tweet “format” over a simple blockquote? I still don’t think so.
Several design initiatives are taking advantage of the “global village” via the Web, and here’s a look at some of them. Perspectives that are completely different from your own—thousands of miles different—are just one way for you to grow as a designer, so take down some notes and get your passport stamped:
How would you illustrate your city?
CitID invites designers to honor their respective cities creating logos for them. Submission is by email and it’s a great way to get acquainted with design sensibilities from every corner of the world.
How would you create a charity site in 24 hours?
FullCodePress pits Australia, New Zealand, and the US against one another in a 24-hour race to build websites for charitable organizations. Last year’s teams designed for RainbowYouth (New Zealand) and NSW Disability Discrimination Legal Centre (Australia), with NZ coming out on top.
This year: Team USA members are already locked in, with no less than Jason Santa Maria at the helm, but applications for the Aussie and NZ teams are still open until May 5th. The showdown happens from June 19 to 20.
How would you build on an existing design?
The Exhibition Season of this year’s Layer Tennis is done, but if you missed all the live action this compilation video provides a great wrap-up. There were some interesting new matches this time, covering typography, motion graphics, photography, video editing, and the return of the 10-city tournament.
How does this color make you feel?
To wrap up this little excursion we’ve been on, here’s a golden resource for all the global designers out there: David McCandless and AlwaysWithHonor.com designed an infographic on What Colors Mean Across 10 Cultures.
Check out the more colorful, animated visualization of browser support for the latest HTML5 and CSS3 features based on data from When can I use… Inspired by a General Dynamics postcard and an infographic on America’s wealthiest religions, this single-serving site is quite literally a rainbow that’s painting optimism for the future of web standards.
Each ray represents a feature, and the different bands of color represent the leading browsers, IE6 excluded (finally). More under the hood details here, praising the virtues of Sass and Photoshop-less, in-browser design. Kudos to Paul Irish (again!) and Divya Manian.
Blame it on the need to express oneself in as many avenues possible, or the tendency for this community to navel-gaze out of narcissism or frustration, but you can’t deny how comic strips are a brilliant outlet for these designers. Each carries a different subject, sense of humor, and illustration style that you’ll want to subscribe to all of them.
Brad Colbow: The Brads
Brad’s also been tapped to create more informative strips such as Learning About Contrast in Design and Misunderstanding Markup: XHTML 2/HTML 5.
Kyle Weems: CSS Squirrel
I’ve mentioned CSS Squirrel when he announced his branching out to podcasting, but poking fun at the latest industry developments and insider info is where he shines.
N.C. Winters: Freelance Freedom
NC goes through the ups and downs of freelancing at Freelance Switch’s Freelance Freedom.
Business Guys on Business Trips
BGOBT tells the most awful office tales in detailed narrations but minimal line art.
Matthew Inman: The Oatmeal
The man behind Mingle2 and SEOmoz, Matthew has gone on to create humorous quizzes and infographic-style comics at the very viral The Oatmeal.
Phil Thompson: The FrontEnders
Phil does a front-end spin on the British soap The Eastenders.
Ricardo Gimenes: Behind the Websites
Ricardo creates a fleet of colorful characters to represent different websites, and now makes strips for Smashing Magazine’s The Smashing Cartoons.
*/
