Grids跡地no grid here
バイオハザードのマークはどのようにデザインされたのか？
by Tony Webster 細菌やウイルスなどの有害物質が、実験室や病院から外部へ漏れ出して引き起こる災害を「バイオハザード(生物災害)」と呼び、有害物質の存在について警告するためのシンボルマークが制定されています。このシンボルマークが一体どのように作られたのかを、デザインや建築について語るラジオ番組「99% Invisible」が解説しています。 Biohazard: Iconic Symbol Designed to be “Memorable but Meaningless” - 99% Invisible http://99percentinvisible.org/article/biohazard-symbol-designed-to-be-memorable-but-meaningless/ バイオハザードのシンボルマークが統一される以前は、危険物質の存在を示すマークが山の
Googleのマテリアルデザインの「動き」がどのような法則に従っているのかがよくわかるムービー「Material Design Motion」
Googleが2014年に公開した「マテリアルデザイン」は、単純な「OSのデザイン」ではなく実用性に加えて「素材」や「現実の感覚」を取り入れた独特のデザインフレームワークになっています。アニメーションを用いて、「動き」にもこだわることでプロダクトの品質を向上させているとのことですが、マテリアルデザインの「動き」がどのような法則にのっとっているのか、わかりやすいムービーが公開中です。 まず、マテリアルデザインの「動き」はどのような点で他のアプリやソフトウェアデザインと異なるのか？というこだわりの概要は以下のムービーからサクッと理解できます。 Material Design Motion - YouTube マテリアルデザインは、現実世界を生きている私たちのような「命」が感じられることが特徴です。 反応がよく、自然で、意識的。 そして、意図を持って動きます。 スマートフォンのスクリーンの形をし
ウェブサイトをデザインするときにインスピレーションを刺激するUIを集めた「Inspiration UI」
インターネット上に存在する無数のウェブサイトの中から優れたUIのものだけを大量に集め、「404ページ」「マップ」「ショッピングカート」など、UIの優れた部分でカテゴリ分けすることで、デザインの中で参考にしたいポイントを自由に検索できるようにしたサイトが「Inspiration UI」です。 Inspiration UI - Find design inspiration from real live projects http://inspirationui.com/ 「Inspiration UI」のトップページ上部には「Popular」「Recent」「All Patterns」と書かれたタグがあります。 トップページを開いた際には「Popular」が選択された状態になっており、Inspiration UIで人気の高いサイトがズラリと表示されています。 マウスオーバーすると、ウェブサイ
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
Webデザインのプロのテクニックを非常に簡潔に分かりやすくまとめた -Web Design in 4 minutes
Webページやブログ、プロダクトページ、ポートフォリオなど、ちょっとした工夫でプロがつくったかのようにかっこよく、魅力的に見せるテクニックを4分で学べるコンテンツを紹介します。
フォントや文字のデザインをUI上で見やすくするコツをまとめた「Typography for User Interfaces」
by Marco / Zak ウェブサイトやアプリをデザインするにあたって、使いやすい・読みやすいコンテンツを作成するために必ず考えなければいけないのが「情報をどのように配置するのか」ということ。情報の多くは文字や文章で表示されるということで、ウェブデザイナーのViljami Salminenさんが、なぜウェブデザインにとって文字列が重要になるのか、どうすれば読みやすい文字列をデザインできるのかをまとめています。 Typography for User Interfaces | Viljami Salminen https://viljamis.com/2016/typography-for-user-interfaces/ ◆グラフィカルユーザインタフェース(GUI)の成り立ち GUIの歴史の中で重要な転換点にいるのが、マウスによるウィンドウ操作を初めて導入したゼロックスのコンピューター
黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ
黄金比や黄金螺旋を使い、Webサイト、雑誌や同人誌の表紙、フライヤーなどのレイアウト、コンテンツの配置、余白のとり方、写真の構図、オブジェクトの形のデザインにうまく取り入れるデザインテクニックを紹介します。 以前に1,000ブクマ越えの「黄金比をサイトのデザインに取り入れる簡単な３つの方法」を記事にしましたが、黄金比の取り入れ方もいろいろ進化しています！ What Is The Golden Ratio? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 黄金比（Golden Ratio）とは 1. 黄金比をレイアウトに使う 2. 黄金比をスペースに使う 3. 黄金比をコンテンツに使う 4. 黄金比を写真の構図に使う 5. 黄金比を形に使う エジプトのピラミッド、ダヴィンチのモナリザ、これらとTwitterやペプシのロゴとの共通点は何で
2016年のロゴデザインのトレンド -2016 Logo Trend Report
「Ombré（オンブレ）」とはここ数年、海外セレブたちが火付け役となって人気になったオンブレヘアーの美しいグラデーションで、特定の2色間をグラデーションでつなぐデザインです。ロゴデザインではこのグラデーションをベクターベースの面白い形状で色分けして利用しています。 Circles 完璧と無限を表現する美しいサークルは、非常に人気が高いデザイン要素です。最近のトレンドは、サークルの上にサークルを重ねたり、繰り返して使用しています。こういった幾何学的な形はシンプルであればあるほど良く、要素に区別をつける時にはフラットにしたり透明にしたり、グラデーションにしても効果的です。 Half and Half
さりげなく使える、Webデザインの参考になるサイト集
作成：2016/04/11 更新：2016/06/29 Webデザイン > ありふれた当たり障り無いレイアウトではなくて、ほんの少しでも印象に残るレイアウトを作りたい。デザイン考えるとき、提案前に一度は見ておきたいまとめ。 エンジニア速報は Twitter の@commteで配信しています。 一部にグラデーションを使って視線をフックさせる 複数の色相を組み合わせたグラデーション。オーロラや紅葉など自然界によく見られる配色ですが、ページ全体に入れると少々キツく感じるときがあります。 そんなときは、上図のように色相差のあるグラデーションをワンポイントだけ使うことによって適度に視線をフックさせることができます。 INUPATHY こちらは被写体の気持ちを代弁するかのように、目立たせたい箇所にグラデーションが使われています。目立つけど、色ベタよりもキツイ感じはしません。 株式会社ジェイ・シー・エス
ノンデザイナーも必見！デザインの基礎が学べるスライドまとめ
どんな商品やサービスにおいても、デザインは必ず関わってくる分野です。優れた商品やサービスをつくるためには、チーム全員がデザインに関する基礎知識を身につけておいた方が良いでしょう。 そこで今回は、ノンデザイナーでもデザインを簡単に・楽しく学べるスライドをご紹介します。もちろんデザイナーの方々にとっても役立つものばかりなので、ぜひ参考にしてください！ ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう そもそもデザインって何？という根本的なところから、良いデザインの選び方を具体例を交えて紹介しています。タイトルの通りノンデザイナー向けなので、これからデザインを勉強する人、デザイナーと関わる仕事をしている人は必読です。Q＆A方式でスライドが進んでいくのでさらっと読めます。
デザインは一手間が大切！画像が見違えるほど魅力的になるデザインテクニックのまとめ
一枚の絵には千の言葉に匹敵する価値がある「百聞は一見にしかず」は、コミュニケーションデザインにおいても有効です。わたし達は今までの経験と研究の両方の側面から、画像が多くのユーザーの目を引きつけることを知っています。 自身で撮影した写真画像、どこかでダウンロードした画像に一手間加えて、画像を魅力的にデザインするシンプルなテクニックを紹介します。 画像を美しく仕上げる一番簡単な方法がこの「クロップ」です。クロップは不必要だったり気を散らすエリアを取り去ることで、構図を見直し、焦点を強調することができます。 【注意】クロップするエリアが大きい場合は、可能な限り大きい画像を使用します。これは切り取った後の画像が小さくなってしまうからです。小さいからといって拡大してしまうと、ピクセレーションが起きてしまい、汚い画像になってしまいます。 クロップする時に便利なのが、「3分の1ルール」です。このテクニッ
イラストにおける遠近法を使った構図の上手なつくり方 -基本と透視図法の描き方
遠近法をきちんと理解することは、イラストを描く時の基盤がしっかりし、あなたのテクニックを高いレベルに導く原動力になります。 プロのイラストレーターで講師でもあるMatt Laskowski氏が解説する遠近法を使った構図のつくり方を紹介します。 Perspective Drawing: Creating Illustrations with Dimension illustration: ©Matt Laskowski 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 遠近法を使った構図のつくり方: 基本の1点透視図法 遠近法を使った構図のつくり方: 2点透視図法 遠近法を使った構図のつくり方: 3点透視図法 遠近法を使った構図のつくり方: 実践テクニック 遠近法を使った構図のつくり方: 基本の1点透視図法 PerspectiveとCom
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【公式】テックキャンプ | 国内最大級プログラミングスクール on Twitter: "【デザイン1day速習会開催のお知らせ】 基礎的なデザインスキルを1日手を動かして学んでいただく速習講座です。 1ヶ月ガッツリは難しいが1日で完結させたいと考える未経験者の方、また予備知識として学習したいエンジニアの方大歓迎です。 https://t.co/4OJqHtixJy"
ユーザビリティの大原則は「ユーザーに考えさせないこと」 - 7/16～7/22のWeb担の記事まとめ | 先週のWeb担まとめ記事 | Web担当者Forum
まさとらん on Twitter: "とても実践的なスマホ向けの「Webパフォーマンス改善例」が勉強になった。早速試してみる…丨モバイルWebのUIを速くする基本テクニックがわかる─Google I/O 2016 High Performance Web UI https://t.co/zQDgH4kIJE"
Webデザインの勉強にいい！レイアウトやUIエレメントやカラーの使い方の参考になるStyle Guideのまとめ
デザインの理由や意味がよく分かる良書！WebサイトのUI設計や情報デザインについての考え方が見直せる -だから、そのデザインはダメなんだ。
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
