デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」 - Qiita
ウェブサイトやアプリケーション制作の現場で、非デザイナーが度々デザイナーからフィードバックをもらう内容をアバウトに4原則にまとめました。デザインは理論だそうで、以下に挙げるようなポイントさえ抑えれば非デザイナーでも「ハズさない」デザインをつくることができます(デザイナー談)。 追記[09/23/2015]：参考文献について 本記事は以下に掲載しております参考文献「ノンデザイナーズ・デザインブック(Robin Williams)」の前半部分における要所を引用して作成しています。デザイナーの方が非デザイナーにアドバイスする際に非常に有用な本らしく、私自身受けたフィードバックもこの本の内容に基づくものでした。予想していた数百倍の反響があり心底ビビっていますが、これをきっかけにデザインに興味をもち更に自分で勉強していくきっかけとなれれば本望です。わかりやすくデザインのポイントをまとめてくれた参考文
テキストの扱いに困っている方へ - エンジニアのための「っぽい」デザイン術
不眠症なのでもう一記事。 今回は ・記事タイトル ・見出し文章 ・投稿日時 ・コメント数 ・お気に入り数 というよく一緒に扱うテキストの整理の仕方について書いて行きます。 写真素材は暗黙のフリー素材と化して10年の地元の友達です。 さて、まず困っている方のデザインを再現してみました。 かなり見づらいですね。 なぜ見づらいのかというと、主に2点 ・文字の太さ(font-weight)が均一 ・隙間(padding)が少ない これを解決するには、 まずこの赤枠分くらいのpaddingとってみてください。 これだけで大分見え方変わると思います。 次にタイトル以外の文字のfont-weightを細くしてみてください。 お〜変わってきましたね。 続けて、これは個人の好みによりけりなのですが最近私や社会は 割とh1要素であっても細いfontを当てたりするので タイトルとその他要素のfont-weigh
CSS, JavaScriptで実装された、チェックしておきたいUIデザインの最近のテクニックのまとめ
実用的なテクニックから、こんなこともできるんだ！とワクワクするすごいアイデアまで、Web制作者はチェックしておきたいUIを実装するテクニックをCodePenから紹介します。 JavaScriptは最小限にして、アニメーションなどCSSでできることは全てCSSで、というのが実装の傾向ですね。
何者でもなかったぼくがUIデザイナーとして転職するまで - OSHIIRE
はじめまして！webサービスの UIデザイン をしている @wariemon こと 割石 といいます。 この度、8月末で、新卒入社から3年半所属していた 面白法人カヤック を退職しました。 今日から FRIL を制作している 株式会社 Fablic にUIデザイナーとして入社します！ いわゆる転職エントリですが、webに関してゼロどころかマイナスからのスタートだった自分が、UIデザイナーとして転職することになるまでを書こうかと思います。 大学時代までは、印刷物のデザインを勉強していたので、webデザインのスキルはないどころかほぼ理解すらない状態でした。そんなぼくを快く迎えてくれたカヤックに本当に感謝しています。本当にありがとうございました！ 何者でもないまま過ぎた 新卒1年半 最初の1年半は自分の要望もあり、クライアントワークチームに配属され、制作スキルの基礎となる部分を培いました。 入っ
これだけ読めば大丈夫！デザインの基礎が学べる厳選5記事｜ferret [フェレット]
ferret編集部：2014年12月11日に公開された記事を再編集しています。 「デザインに関しては、全くわからないからデザイナーさんに全てお任せ！」 「デザインは感性や才能だし、なんて伝えていいかもわからない。」 と感じる方も多いのではないでしょうか？ デザインが本業でない場合、時間を割くのが難しいという担当者さんが多いのが現状です。 しかし、デザインの多くは原理原則や、法則に則ったうえで考えられています。少しでも理解することでデザイナーさんとの連携もスムーズになりますし、なによりクオリティが上がること間違いないです。 今回は、デザインの原理原則が分かりやすく書かれている記事をまとめました。 1.デザインの基礎 【追記あり】【初心者】デザインってなんだ？「デザイン」の概念と、４つの基本原則を知ろう こちらの記事では、そもそもデザインってどういうことか？といことから解説されています。 その
![これだけ読めば大丈夫！デザインの基礎が学べる厳選5記事｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/737c1201be8e91c4ffb6b8253f2f3a5fc2f857f3/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F467%2Feyecatch%2Fdefault-e50f142a015d29fc107e85693be29ce9.jpeg)
UXに関する疑問に答えて気づいたこと
8月8日、クリーク・アンド・リバー社主催のイベント「と、コラボ特別編」で UX をテーマに座談会をしました（#tocolabo）。ポッドキャストで対談したネットイヤーグループ株式会社の坂本貴史さんと参加者といっしょに「UXってなに？」という初歩的でありながらも難しい課題について話し合いました。セミナーでもワークショップでもない、話をするだけのイベントでしたが、参加者の満足度が非常に高い有意義な時間になりました。 上図: webディレクターの阿呆な研究の @azumi0812 さんが、イベントで作ってくださったグラフィックレコーディング 共有できるかどうかが課題 以前、HTML 5 Experts のインタビューで「いま、UXを語るのはなぜ悩ましいのか？」を話したことがあります。仕事環境、クライアント関係、役割に応じて UX という言葉のニュアンスが微妙に違うことがあるので、言葉だけ聞いて決
破綻しにくいCSS設計の法則 15 - Qiita
ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく 詳細度または特異性の高いものほど後方に記述する 可能な限り!importantしない 可能な限りハックしない 変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく 例えば、こういうScrap & Buildは単に通信量のムダ。
色々なWebサービスの会員登録画面まとめ - no web service no life
多様化する会員登録画面 色々なWebサービスの会員登録画面を、導線やSNS連携ボタンの配置を主軸に分類してみました。 各サービス、会員登録CVRを上げるために、導線や提示方法を工夫しています。また、SNS連携が必須になってきたことによって、画面に占める要素が増えてきており、その配置方法にも工夫がみられ面白いです。 ※キャプチャ取得タイミングの関係で、古いデザインもあるかもしれませんがご了承下さい。 ポップアップ提示パターン Sumallyやpixivは、Cookie制御がされており、初回訪問時にアグレッシブにポップアップを提示してきます。 Sumally pixiv Blabo!やAirbnbは、会員登録リンクを押すとポップアップで提示されます。 Blabo! Airbnb SNS連携ボタンが上に配置されているパターン 通常の会員登録への導線やフォームの上に、各種SNSのボタンが配置されて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP