User Interface Design - 12 Useful Techniques — Smashing Magazine
Last week, we presented 10 Useful Web Application Interface Techniques, the first part of our review of useful design trends in modern Web applications. Among other things, we highlighted embedded video blocks, specialized controls and context-sensitive navigation. We also encouraged designers to disable pressed buttons, use shadows around modal windows and link to the sign-up page from the log-in
Essential Web Design Advice From a Wireframing Master [INTERVIEW]
So much information is out there and so many new technologies and proofs of concept are appearing across the web that it can be difficult to keep up with what's going on. For newer designers or developers, it can sometimes be scary to know where to start. That's why it's always good to talk to the masters -- individuals who are setting the bar by building high-quality apps and sites -- to see how
![Essential Web Design Advice From a Wireframing Master [INTERVIEW]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e279638c7cd92e757ab08bc5a965faaac71d0b50/height=288;version=1;width=512/https%3A%2F%2Fhelios-i.mashable.com%2Fimagery%2Farchives%2F07j3ThmP3LFu1u7B5Js22bW%2Fhero-image.fill.size_1200x675.v1647019226.jpg)
Collection: Design Patterns
Reuse, recycle, but don’t reinvent the wheel unless necessary. by Brian Christiansen at UI Engineering. Via. This collection captures findings of consistent, unique or interesting interfaces and design flows from across the web. Please note that the content of these sets is not representative of all of the patterns I've captured. I tend to use tags more religiously and recommend that you look ther
suggest.js - 入力補完ライブラリ
Japanese / English JavaScriptで入力補完を手軽に行うためのライブラリです。 (【お知らせ】ver2.0からprototype.jsを必要としなくなりました) 下記のような機能を持っています。 入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく) Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。 検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。 検索結果の表示上限を指定できます。(デフォルト上限20件) 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にES
Pencil – Get this Extension for 🦊 Firefox (en-US)
Pencil is a free and opensource tool for making diagrams and GUI prototyping that everyone can use. Top features: * Built-in stencils for diagraming and prototyping * Multi-page document with background page * Inter-page linkings! * On-screen text editing with rich-text supports * Exporting to HTML, PNG, Openoffice.org document, Word document and PDF. * Undo/redo supports * Installing user-defined
Balsamiq Mockups | Balsamiq
Let us guess... Your team spends hours debating the wrong details instead of agreeing on the big idea. You skip wireframes and waste weeks redesigning things that never should've been built. Stakeholders don't “get it” until it's too late—and now you're backtracking. AI makes jumping into code easier than ever. But without clarity, you're just shipping bad ideas faster. Balsamiq fixes that. Turn r
DUB - DENIM
DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming. [More] Try an exported DENIM HTML site Videos Current DENIM System RealPlayer G2, 8.0, or RealOne Player: 56 Kbps - 320×240 | 300 Kbps - 640×480 (Download RealPlayer) Excerpt - Downloadable R
The Paper Version of the Web
People have been sketching user interfaces since the birth of the web but the sketches usually stay locked away in old notebooks and discarded bar napkins in Austin, Texas. Many of the websites we use started out as scrawlings, and with people like Jakob Nielsen and Bill Buxton spreading the gospel of faster, cheaper paper prototypes, “next year’s Twitter” may already exist on paper. We don’t usua
Yahoo! Design Pattern Library
Welcome Welcome to the Yahoo! Design Pattern Library. We're thrilled to be sharing patterns and code with the web design and development community, we hope it's useful, and we look forward to your feedback. In fact, we've just launched two new Design Pattern forums: one for discussing this pattern library and another for talking about the ins and out of writing design patterns and maintain
Why we skip Photoshop
When designing a UI we usually go right from a quick paper sketch to HTML/CSS. We skip the static Photoshop mockup. Here are a few reasons why we skip photoshop: You can’t click a Photoshop mockup. This is probably the number one reason we skip static mockups. They aren’t real. Paper isn’t real either, but paper doesn’t have that expectation. A Photoshop mockup is on your screen. If it’s on your s
The Evolution of Pre-Launch Gmail In Screenshots | TechCrunch
When visiting Google yesterday for the unveiling of Gmail Labs, product manager Keith Coleman took us on a tour of the Googleplex’s Building 47. Along the way, we saw Googlers hard at work on Gmail, Reader, Calendar, and other related projects. But the coolest part was a stop in a conference room where Coleman had laid out printed screenshots depicting the evolution of Gmail’s user interface befor
本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記
第1回 そろそろ本気で学びませんか？ | Think IT これ、今この記事書いてる時点で650以上ものブクマがされているんだけれども、あまり内容がよろしくない。 というのも、解説はとても丁寧ですごくよい内容なのだけど、サンプルコードの書き方がどうも古くさい。 onclick属性とか、今時のフロントエンドエンジニアはそんな書き方はしない（と思う）。 なぜonclickをあまり推奨しないのか やっぱり、エンジニアとデザイナーorマークアッパーとの分業の点でHTMLの属性にスクリプトを書いちゃうのはあんまりよろしくない。 たとえばの話だけど関数の名前を変えたかったり、だとか、HTMLを変更したり、っていうときにミスが起こりやすくなってしまう。 これは分業していなくてもどちらにしろ発生してしまうことだと思う。 他にも前に書いたのだけど、aタグとかでonclickしちゃうとhrefにreturn
Design Decisions: Basecamp Project Switcher
Last week we released a redesigned project switcher in Basecamp. The project switcher lets you move between projects when you are inside another project without having to go back to the Dashboard. A video The best way to get a feel for the change, and why we made the change, is to watch a before and after video (below). NOTE: Unfortunately the text on the video is distorted when scaled down to the
Welie.com - Patterns in Interaction Designインタラクション集
A Pattern Library for Interaction Design This site contains a lot of best practices in Interaction Design. Over the years I have collected examples and insight on their applicability that I share with you here on this. So there is really no 'original' design to be found here, sorry. It has all been done before... See it as a reference or basic 'toolkit' you can use when design user experiences. It
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Design Solutions]![[Design Solutions]](https://cdn-ak-scissors.b.st-hatena.com/image/square/579f892153a98d5dbb1d61e422723f84887a1931/height=288;version=1;width=512/https%3A%2F%2Flive.staticflickr.com%2F171%2F452069651_c098414360_q.jpg)
Yahoo! UI Library
User participation increases when you don't have to login. - Jason Calacanis
Digg Blog, Digg By The Numbers, 2015 Edition
Digg - New Digg Comment System Video
A very different approach to tagging