Get inspired by the work of millions of top-rated designers & agencies around the world.
Dribbble - Show and tell for designers
Get inspired by the work of millions of top-rated designers & agencies around the world.
Figma: The Collaborative Interface Design Tool
Downloads Get the desktop, mobile, and font installer apps
On negative hovers – CSS Wizardry
18 May, 2011 On negative hovers Written by Harry Roberts on CSS Wizardry. Table of Contents Spot the odd one out Underlines are obtrusive Intuition The answer? Issues Final word I’ve been mentioning moaning about something called negative hovers on Twitter for ages now, so it’s about time I wrote a quick post on them. At their most basic a negative hover is a link whose appearance is subtracted fr
使えるユーザビリティーガイドライン10 – creamu
遅いエントリーですが、Smashing Magazineで使えるユーザビリティーガイドラインがまとまっています。 ざっとご紹介しますね。 1. フォームのラベルはフィールドの上がベスト study by UX Mattersによると、フォームのラベルはフィールドの上が理想的とのこと。多くのフォームで、ラベルはフィールドの左に置かれ、2カラムのレイアウトになっている。いいデザインだが、最も使いやすいレイアウトとは言えない。なぜなら、フォームは一般的に垂直方向に並んでおり、ユーザーは上から下に向かって入力していく。ユーザーは視線を下の方向に向けていくのだ。そのため、ラベルが左にあるよりも、同じ方向にある方が認識しやすい。 2. ユーザーの視線は人の顔に向く Webページを見るとき、人の顔や目に視線が行く。マーケッターにとっては、注目を集める有効なテクニック。ユーザーは画像の中の人の視線が向いて
アイトラッキングから検証した、使いやすいフォームの10のポイント
Google Mail、Hotmail、Yahoo! Mail、eBayの各サインアップのフォームを使用して、22～33才までの平均27才のユーザー8人を被験者にしたアイトラッキングから検証した、使いやすいフォームの10のポイントをcxpartnersから紹介します。 Web forms design guidelines an eyetracking study 以下、10のガイドラインからポイントのピックアップです。 1. Vertical, not horizontal 水平ではなく、垂直に フォームのレイアウトは、水平方向の配置やそれが混在したものではなく、単純に垂直方向に配置したものが効果的です。 可能であれば、各ラベルも垂直方向に揃えて配置してください。 2. Left-aligned labels are clearer (anecdotally) ラベルは左寄せにすると、よ
色覚障がい者に配慮したWebサイトの作り方
2017年4月11日 Webサイト制作, アクセシビリティ, 色彩 今持ってるプロジェクトの中で、視覚・色覚障がい者にも配慮したWebサイトの制作があります。視覚障がい者向けのサイト制作についてはいくつか記事を発見できたのですが、色覚障がい者に向けたWebサイト制作についてはなかなかヒットしなかったので、断片的に読んだものを記事にまとめました。参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 追記: 一部表記の仕方を変更しました。 色覚障がいについて 目の、色を認識する細胞の変異で、色の識別が異なることを「色覚障がい」「色覚異常」と呼びます。色覚障がいといってもいろいろな種類があり、ここでは人口の多い赤系統や緑系統の色の識別が困難な、赤緑色覚異常の場合について書いてみます。 困難な点としては 灰色だと思ったらピンクのシャツだった 焼肉の際、生肉と焼けている肉の区別がつきに
Live Tools - Form Builder
Done designing? Click the buttons to get your custom code.
Foundation for Sites | The most advanced responsive front-end frameworks in the world.
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
IE8のレンダリングモードに関するまとめ
Apr 12, 2008 某所で行われたIE8 Beta 1についてのセミナーで、DOCTYPEスイッチとIE8の複数のモードの話を聞いていたら、頭の中がごちゃごちゃしてきたのでざっくりとまとめてみる。 レンダリングモードの使い分け まず最初に、IE8には以下の3つのレンダリングモードがあることを覚えておきます。 IE8標準準拠モード (デフォルトのレンダリングモード) IE7標準準拠モード Quirksモード (いわゆる互換モード) IE8のデフォルトでのレンダリングモードは一番上の「IE8標準準拠モード」になります。これらのレンダリングモードを覚えたら、次にIE8が備える「IE7エミュレート機能」について知っておきましょう。エミュレート機能とは「IE7とまったく同じレンダリングをする」ための機能です。つまりこの機能を有効にするとデフォルトのレンダリングモードが「IE7標準準拠モード」に
Internet Explorer 8正式版レビュー（1/3） - ＠IT
本稿は、2008年9月17日に掲載した「Internet Explorer 8（Beta 2）クイック・レビュー」というIE8ベータ2をベースにした記事を、正式版の情報に改訂するとともに、いくつかの新情報を追記したものです。 3月19日（日本時間では3月20日）、Internet Explorer 8の正式版（以降、IE8）がリリースされた。IE8では、HTML描画やJavaScript処理の高速化、HTMLやCSSのWeb標準準拠、Ajax関連の機能拡張といったWebブラウザの基本機能の改善と拡張が大きな特徴となっているが、これだけにとどまらず、「Webスライス」や「アクセラレータ」といった新機能（詳細後述）も追加されている。 本稿では、これらの改善や新機能の中で、特にWeb制作やWebアプリケーション開発に関連するであろうものを取り上げ、簡単に紹介する。IE8は以下のリンクから入手でき
Yahoo!<wbr> Design Pattern Library
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. (A pattern describes an optimal solution to a common problem within a specific context.)Welcome Welcome to the Yahoo! Design Pattern Library. We're thrilled to be sharing patterns and code with th
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IcoMoon App
Home
StyleBootstrap.info: Twitter Bootstrap Theme Generator
ウェブの画面設計に使えるまとめ - DesignWalker