はてなブックマーク

Here’s an emerging UI pattern: a web page loading bar. Unsatisfied with progress indicators provided by the browser, some sites are implementing their own ones to show the load status of the next page. The progress bar appears as a thin line overlaying the content, sitting right underneath the browser toolbar, growing in width across the page as the next one loads. Here is a screenshot of the bar

I wrote two posts on the topic of WebKit font smoothing before, but unfortunately the situation has grown worse since then. In allowing the designer to pick their own font smoothing mode with the -webkit-font-smoothing CSS property, WebKit developers have opened up an opportunity for typographic abuse, namely, the disabling of subpixel font rendering. As I mentioned before, WebKit gives designers

A fair while back I wrote a post on pressed button states using CSS, which was a tutorial on how to implement a pressed down button effect on custom styled links. In that post I used images to achieve the visual effect. Now that we have good CSS3 support, that method is really out of date. In this post I’ll show you how to achieve the same effect using CSS3, as well as how I’d go about styling the

What’s a good size to use for the body text of your website? A recent Smashing Magazine article makes a case for using fonts sized 16px or larger, and others have proposed this before. This is the default 100% browser font size, though it’s rarely used. But rather than theorize, let’s do a poll and find out what size people like best. I’m focusing on 4 sizes here: 13px to 16px as I think this cove

Here’s a new technique I’m trying out: a slide-out interface element using just CSS, no JavaScript. It can be used for things like fixed navigation bars or little feedback forms you see sometimes on the side of the page. Here’s how it works… Let’s do the feedback form as an example. See the demo right here. Supports IE8+ (and IE7 too if the container div is changed to an anchor) and every other mo

Apple’s latest update to their Mac operating system, OS X Lion, brings with it a few user interface tweaks. Here are 4 methods I’ve noticed that Lion uses to make its interface appear simpler. (If you’re interested, you can find more screenshots here from the developer preview release) Weaker button separators Here’s a simple effect that simplifies the feel of double buttons. Take the forward and

I’m a big fan of LESS, the CSS pre-processor. Many of the people who learn about it immediately see its potential to make their CSS development easier, however, some express doubts–they just don’t see how extending CSS functionality helps since they can do everything using vanilla CSS. One of the big ways LESS helps–probably the biggest–is through something called mixins, that is, being able to re

The case of Opera is a strange one at first glance. Here is an innovative and powerful browser that’s fast, good looking and has all the features you might want–indeed, it has more features than all the other browsers, and tends to introduce the good things first (Opera had tabs first)–and yet with all of that it still has a tiny market share. Beyond a small, dedicated user base people just don’t

Webkit, the engine under the Safari and Chrome browsers, adds an interesting property to CSS called “font-smoothing”. You can probably guess what it does by its name. There are three different values you can use for it: -webkit-font-smoothing: none; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; The first one will turn font smoothing off, showing your text with

Here’s a simple technique to get hover controls working on the iPhone. Hover controls are links and buttons that appear when you hover your mouse over a a target area and so are useful for a lot of secondary actions like delete and edit links–a way to simplify your interface. The iPhone has a touch screen, so you can’t really hover over anything, but the following technique will still work. Instea

One important interaction indicator on the web is the mouse cursor. The default cursor arrow changes into a pointing hand when you hover over links for example, which indicates they are indeed links and can be clicked on. It also changes into other things to differentiate context, for example it can change into a text input cursor when hovering over text fields to indicate you can type there. When

CSS frameworks have become quite popular over the past couple of years. Some of them try to fit in everything: a grid system, a style reset, basic typography, form styles, you name it. Others focus solely on the grid, but still end up a bit bloated. With added complexity comes… well, complexity: a steeper learning curve, increased development time, and – cringe – tougher debugging. Here is a fresh

The blog is currently in a bit of hiatus, which means there hasn't been any new content for a while. All the old posts are available in the archive.

There is a lot of information out there about various interface design techniques and patterns you can use when crafting your user interfaces and websites, solutions to common problems and general usability recommendations. Following guidelines from experts will likely lead you towards creating a good user interface – but what exactly is a good interface? What are the characteristics of an effecti

A good user interface (UI) is essential if you want your product to be usable, but you must always be careful to not fall into the trap of focusing too much on that interface. A good UI should fade away, putting content in the front seat – it should be transparent. Sometimes there can be too much ‘UI’ – controls and buttons that are too strong and distracting win over content in their battle for a

I can safely say that usability these days on the Web is much better than it was several years ago. The Web is growing up and designers are learning and discovering optimal ways of doing things, as well as optimizing and re-working their current sites to make them better and better. Yet there are still many sites today that make basic mistakes that have a very negative impact on usability and visi

One of the key elements of building a strong brand is color selection. Every color has a different feel and various associations. By choosing a color or a combination of colors for your brand identity, you will take on those associations. Colors will evoke certain emotions and feelings towards your brand so it is vital to choose a color that will represent your identity effectively. Research revea