Tag Archives: Design

Should Comment Entry Forms Be Above or Below Existing Comments?

Nov 9, 2011 by Matt | Posted in Design 2 Comments

Traditionally, blog themes have placed the form to leave a new comment below the listing of existing comments. This still holds true in most WordPress themes to date. However, many sites now have the comment form above the comments. Notable sites include Mashable and Reddit.

I was pondering the reasoning behind this recently. The obvious answer is that it encourages more comments, as someone who just finished the article is prompted to post while the content is still fresh in their mind. Meanwhile, having the form below the comments requires that a user read (or simply scroll past) others’ messages—perhaps even seeing like-minded comments and deciding against leaving one.

Assuming this is true, you could promote a higher volume of comments by placing the form higher up, or on a higher traffic site, promote a higher quality of discussion by putting it toward the end. I assume someone has done tests, but I couldn’t find any publicly-posted results.

Thoughts?

Create Color Palettes With ColorSchemer Touch

Nov 4, 2011 by Matt | Posted in Design No Comments

If you do even a little bit of web or graphic design, you might have run into a cool poster or product label somewhere and thought “I like this color scheme.” ColorSchemer Touch is a neat iOS app that will help you out with those situations. If you snap a photo, it will let you tap colors within it and build a color palette.

It also has a couple of manual color pickers, including a basic color wheel and the nifty “LiveSchemes” tool, and integration with Colour Lovers. So you can browse and save other palettes as well as creating your own. You can easily email color palettes or save them to your camera roll, as well as syncing them to Color Lovers.

ColorSchemer Touch is currently free on iTunes, though I believe it is usually $2.99.

The Shortcomings of Mega Menus

Oct 10, 2011 by Matt | Posted in Design No Comments

A design paradigm that has been increasingly popular of late, the so called “mega menus,” is a convenient way to corral large quantities of navigational links into a sensible hierarchy. It sounds good on the surface, and often does work well, but it’s not always the best solution.

UIE.com has a very interesting article, 6 Epic Forces Battling Your Mega Menus, that explains some of the primary usability issues with mega menus. A few of them could be designed around fairly easy, such as the common lack of indication that a menu trigger will open a menu. It’s a good read.

The Amazon mega menu seemed like an ideal solution to the growing tab problem. Finally, their design team had a way to show everything you could do on the site without eating up rows of tabs in the header.

Yet, just as suddenly as it had appeared, the mega menu suddenly disappeared. Replaced by a more sophisticated navigation scheme (that’s still on the site today), the mega menu’s lifespan was less than a year.

On the other hand, Jakob Nielsen has some good things to say about mega menus as well as plenty of usability tips for their implementation.

5 Sites to Find Free PSD Resources for Your Web Designs

Aug 10, 2011 by Matt | Posted in Design, Featured 6 Comments

Looking for some high-quality PSD resources? Maybe your design skills are lacking and you need some professional-quality elements for the theme you’re making for your blog. Or maybe you need some social media icons. Or maybe you’re just don’t feel like reinventing the wheel again for that login form.

No matter your reason, anyone doing some web design can benefit from some freebie PSDs.

Creattica

Envato’s Creattica site, which is primarily a design gallery slash place to hire freelancers, has a category for downloadable freebies. There’s some good stuff, from icons to textures to audio player skins.

PixelBeam

PixelBeam is largely one guy making some cool graphics (though he seems open to contributions). Everything is free for commercial use, with a few “simple rules” to follow, namely that you link to PixelBeam if you’re sharing the resources and that you properly credit PixelBeam if you use them in a project you intend to sell somewhere like ThemeForest.

Premium Pixels

“Premium Pixels is a bunch of free design resources & tutorials created by Orman Clark. Don’t worry, shameless freeloading is encouraged, feel free to use and abuse at will.” Licensing is similar to PixelBeam. You can do pretty much anything you want with the PSDs, so long as you don’t redistribute them as-is. Attribution is requested for projects you intend to sell.

365psd

BittBox

BittBox is a good source for textures, patterns and the occasional Photoshop brush. There are tutorials and the like now and then, too.

Don’t Assume a User’s Browser Window Size

Jun 29, 2011 by Matt | Posted in Design No Comments

Chris Coyier has an amazing article that finally puts the screen resolution myth to rest. Despite screen resolutions getting progressively bigger, the available width for your web designs is not. If you have a ginormous 30-inch monitor, you probably don’t keep your web browser full-screen. You probably have it at a more comfortable size and use the extra space to keep other things visible simultaneously. (This goes double for Mac users, who don’t really have the whole “full screen” habit to begin with.)

The post also demonstrates a way to use a bit of jQuery magic to record users’ browser window sizes and dump it into a database, since Google Analytics does not yet provide this metric.

Practically, it’s still best to use the old “keep it under a thousand pixels” rule. It matches up well with the most common browser window ranges, and many of us have lower screen resolutions anyway. I primarily use a 13″ laptop with a 1200-pixel wide LCD. That means I keep Firefox resized to be around one thousand pixels wide, leaving some breathing room while still being able to view most web sites without annoying horizontal scroll bars.

Screen Resolution ≠ Browser Window [CSS-Tricks]

Design Spotlight: Pro Blog Design 2011

May 27, 2011 by Matt | Posted in Design 2 Comments

The industrious Michael Martin has once again redesigned Pro Blog Design, this time going for a more open (and less blue) look. The new design better incorporates promotion for Pliable Press and his custom design services, while still leaving room for third-party advertisers on blog posts.

I really like the texturing and color palette. They’re subtle, but still eye-catching. Legibility has been improved as well, thanks to Michael’s efforts to improve the typography. The new title font is much easier on the eyes than the blocky one from the previous theme, and he seems to be using TypeKit now, which doesn’t have the side effect of making the text difficult to select. (That was a problem with the previous theme, though I think it may have been fixed later on.)

Anyway, go check it out for yourself.

The League of Moveable Type

May 23, 2011 by Matt | Posted in Design No Comments

Looking for some high-quality open source fonts, perhaps to use with @font-face? Look no further than The League of Moveable Type, an organization that curates a collection of professional typefaces licensed in a way that doesn’t inhibit your ability to use them on the modern internet.

We’re done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won’t have it. It’s time to raise our standards. Here, you’ll find only the most well-made, free & open-source, @font-face ready fonts.

Their blog also occasionally links to other open fonts, along with other things of interest to typography nuts.

The current selection is impressive, though there are currently only 14 or so typefaces at this time. I’m particularly a fan of League Gothic and Goudy Bookletter 1911.

How To Create a Stylish Button Entirely with CSS3

Apr 27, 2011 by Matt | Posted in Design No Comments

Web designers have been making dynamically-sized buttons using the “sliding doors” trick for awhile now, but isn’t that technique so 2003? Wouldn’t it be cooler to construct buttons using only CSS?

Line25 has a fresh tutorial on How To Create a Stylish Button Entirely with CSS3.

Next we can begin styling the button with a coloured background, this is where CSS gradients come in handy. Two colour swatches are converted into gradient syntax for both Mozilla and Webkit browsers using the handy CSS Gradient Generator, then a fallback option of a flat colour is added for non-supporting browsers.

The tutorial only uses the -moz and -webkit gradient properties, but someone in the comments included ones for Opera, Internet Explorer 10 and the W3C’s proposed syntax for the actual CSS3 spec.

Little Big Details: A Blog of UI Details

Feb 9, 2011 by Matt | Posted in Design 2 Comments

Michael, the guy behind Pro Blog Design and PliablePress, posted a link recently posted a link to a neat design blog recently. Known as “Little Big Details,” it features minor design elements that are exceptionally functional and possibly worth emulating.

I like the concept, especially since the most interesting parts of a design are often the little bits.

And it’s nice to see that I’m not the only one who found this nifty feature in the iPhone version of Twitter.

Little Big Details [Tumblr]

HTML5 Gets a Logo

Jan 21, 2011 by Matt | Posted in Coding No Comments

The W3C has put up a microsite with the new logo for HTML5. It looks pretty good, certainly better than its predecessors, even if it does have a bit of the “Web 2.0″ look that is finally starting to lose its novelty. I like that they kept the gradients to a minimum, which is starting to become more common in the aftermath of the glossy “Web 2.0″ style.

You can pick up SVG and PNG versions of the icon there, as well as T-Shirts featuring the logo…and free stickers if you live in the U.S. and have some spare postage stamps laying around.

Webmonkey brings up an interesting, and troubling, point about the HTML5 Logo site. The FAQ calls the logo a “general-purpose visual identity for a broad set of open web technologies, including HTML5, CSS, SVG, WOFF, and others.”

It doesn’t really matter if the New York Times thinks CSS 3 or SVG are HTML5, but we’d like to think that at least the organization in charge of describing what is, and is not, HTML5 would make some effort to distinguish between tools. Lumping everything together is as silly as a carpenter referring to every tool in their toolkit as “a hammer.”

That doesn’t sound very good to me. Is “HTML5″ becoming the new buzzword to replace “Web 2.0,” and sanctioned by its own standards body?

Update: And now it sounds like the HTML spec is no longer going to have specific version numbers…