初代Macのアイコン「Happy Mac」をデザインしたスーザン・ケアのAppleでのデザインワークとは？
初代Macの「Happy Mac」「ゴミ箱」「爆弾」などをデザインしたことで知られるデザイナーのスーザン・ケア氏が、コンピューターの世界での多大な功績を称えられ、2018年4月に米国グラフィックアート協会(AIGA)からグラフィックデザイン・視覚コミュニケーションの分野で優れた人に送られる「AIGA Medals」を授与されました。その後のコンピューターデザインに大きな影響を与えたケア氏のApple Computerでの取り組みを、Milanoteがケア氏のスケッチ画や作品を通じて振り返っています。 The Story Behind Susan Kare’s Iconic Design Work for Apple | The Work Behind The Work https://milanote.com/the-work/the-story-behind-susan-kares-ic
Case Study: Our SVG Icon Process
When I wrote about why you shouldn’t use icon fonts in your next web project, I had no idea it would spark so much heated debate and intense discussion. One recurring question stood out to me: How might one actually implement an SVG icon system? It’s a surprisingly difficult question to answer. Should you use <img>, <svg>, <object> or pure CSS? Will you combine your icons into a single sprite or k
Googleのアイコンデザイン思想を学ぶ - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
編集部注：本稿はインフォグラフィック・エディターである櫻田潤氏が運営するブログ「ビジュアルシンキング」からの転載記事。同氏に許可を頂き、こちらに掲載させてもらった。櫻田氏は著書に『たのしいインフォグラフィック入門』があり、Wiredやニュースアプリ「NewsPicks」などメディア向けに、ビジュアルコンテンツの制作を行っている。 Googleが公開しているデザイン・ガイドラインのアイコンに関するところを読みました。 Icons – Style -Google design guidelines アイコンのデザイン・ガイドラインの対象は、「プロダクト・アイコン」と「システム・アイコン」の2つがあり、デザインする上で注意を払うことや、原則がまとめられています。 プロダクト・アイコン 「プロダクト・アイコン」はGmailやGoogle Mapなどサービスそのものに用いられ、サービスの特性や違いを
UIアイコンの最適化 — 認識速度の向上をめざして | architexture.jp アーキテクスチャ — 情報をデザインする可能性の探求
著者：アラ・コルマトヴァ（Alla Kholmatova） 翻訳者：浅野 紀予 インターフェース上のアイコンを、ただの装飾要素ではなく、その価値を高める要素にするのはどんなポイントでしょうか？ 直感的であること、美的価値があること、記憶しやすいこと、それとも文化の違いを超えて知覚できること？ 効果的なアイコンはそれらの特徴をいくつも持ちあわせていますが、私はあるひとつの尺度に注目したいと思います — それは認識速度、つまりそのアイコンをどれくらいの速さで発見し識別できるか、という尺度です。 単純な暇つぶしアプリなら、認識速度の違いは大した問題ではなく、体験全体を揺るがすほどの影響を与えはしないかもしれません。 でも、複雑なトレーディングアプリでは事情が異なるでしょう。その場合、アイコン表現に求められる要件は、一段とスピード優先の傾向を強めます。個々の要素の処理時間が、インターフェース全体
これは便利！アイコン型WebフォントのCDN「Font Awesome」
まず、以下のコードでWebフォントの呼び出します。 後は、表示したいところにコードを挿入するだけです。サイト内のアイコンをクリックするとコードが表示されます。 この基本形にクラスを追加すると色々とカスタマイズすることができます。 ちなみに「fa」は表示の基本となるスタイルで「fa-sitemap」はアイコンの種類を表します。スタイルの中身はこんな感じです。 .fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-sitemap:before { content: "\f
イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。 - kojika17
数カ月前に@suzukisan__が投稿された「Illustrator Unlimited Appearance - suzuki | JAYPEG」は、Illustratorのアピアランスを駆使して、1つのオブジェクトからカメラのアイコンを作るという、面白い試みをされていました。 アピアランスの可能性を示す、インパクトのある内容であったため、記憶に残っている方もいることでしょう。 このアイコンが投稿されてから時間がたっていますが、HTMLとCSSに分解されるイメージが自然に湧いてきたので、少しばかりのHTMLとCSSでアイコンを模写してみました。 HTML と CSS で作ったカメラアイコン 模写したカメラアイコンは、Internet Explorer 10以上 や、最新のChrome, Firefoxなどであれば表示されるはずです。 こちらがHTMLとCSSで書いたものになります。 ソ
APP icons
Good Sleep! Got Latte? Shuzzle Metrobot Screen Candy Vintaframe Pro Photo Candy Moldiv Ikonica HAPPINESSCAM TeaReading FaceLight StreamdIn InstaTiling Black + White Camera HD Google Maps InstaPlace Freshbox FoodSnap! Facetune FxCamera Camera SX Pro Camera FX Pro My Tally Counter Analog Camera CookWizMe HarrisCamera SoundNote MovieQuest MovieQuest Free MaxiCalc Red Valentine Fitness Pro HD Filibaba
Free Icon Search Engine
Download the best high quality ICO, SVG, PNG icon filesBrowse our online vector icon library powered by our merged partner Find Icons, the largest searchable free icons database in the world. Featuring icons for apps, settings, social media, email & more, get thousands of icons in lots of different styles, for free and in any format.
流行るかどうかは別としてロングシャドウデザインを考察してみたら意外と深かった – オレインブログ
フラットデザインが世間を賑わしてまだそれほど時は流れていませんが、海外ではフラットデザイン2.0という呼ばれ方もされることがあるようなロングシャドウデザインというものがどんなものなのか考察してみました。 そして、ロングシャドーデザインを作る方法を勝手ながら考えてみました。 ドロップシャドーデザインとは？ ロングシャドウデザインとは、言葉で説明するとこんなかんじになるのでしょうか。photoshopvipさんの言葉を引用すると、 斜め45度に差し込む光が作る、その名の通り、シャドウ部分を強調した、冬の日によく見受けられる様な、長い影が印象的なデザイン とこのような感じになりますかね。的確な表現かと思います。 ざっくりとどんなものかを検証してみました ハイライトの角度、シャドウの角度、ともに45°できれいに作ってあります。そして、配色ですが分かりやすいようにHSB方式で表記してあります。 ハイ
グーグル・ブランドの秘密：そのグラフィックデザイン基準に迫る | ライフハッカー・ジャパン
創業当時、セルゲイ・ブリン自らGimpを使ってデザインしたというGoogle（グーグル）ロゴ。当時と比べれば、現在グーグルの多彩なサービスロゴには、ずっと洗練された印象を感じます。そのデザインのポリシーを米メディア・Co.EXISTが紹介していました。その記事を翻訳して掲載します。（Top Image via Google Visual Assets Guidelines - Part 2） 検索サービスからはじまり、メール、マップ、ドキュメントツール、SNSなど、グーグルの製品・サービスは、いまや数多くのユーザにとって欠かせない存在となっています。ただ、機能面での充実ぶりに比べ、ビジュアル面での洗練さや統一感はいまひとつ...というのが、従来のグーグルでした。 そこで、このようなビジュアル面での課題を克服すべく、2011年4月、最高経営責任者（CEO）ラリー・ペイジ（Larry Page
アイコンデザインの参考に。GoogleのUIパーツ・ガイドライン資料 | ビジュアルシンキング
Behanceに「Google Visual Assets Guidelines」の紹介がありました。 これは、Googleのプロダクト・アイコンや、サービス・ロゴ、UIパーツについて、形状や色のガイドラインを定めたものです。 アイコンのデザイン原理 丸や単純な矩形の組み合わせできています。 アイコンやピクトグラムをデザインする際はレゴで遊んでいたときのことを思い出すとよいです。 パーツの組み合わせのおかげで、アイコン間の統一感も生まれます。 image by Behance image by Behance image by Behance ほかにも3つルールをピックアップ。 3D禁止 image by Behance 影のルール 真っすぐか45度、ソリッドに。 image by Behance 色のコンビネーション・ルール image by Behance こうした資料は、アイコンやロ
質感がたまらないiOSのデザインアイコン - RyoAnna
ボクシンググローブ 世界のデザイナーが集まるDribbbleで、質感がたまらないiOSアイコンを見つけた。どれも作り込みが素晴らしい。 ウイスキー Nikon 一眼レフカメラ レコードプレイヤー 日記 ミリタリーヘルメット 海水パンツ アクアリウムボトル アコーディオン コカコーラ キャップ プレイステーション マニラ封筒 BRAUN 時計 Amazon Kindle ホイール ヴィトンバッグ ピル カセットテープ スーツケース Minox カメラ マルボロライト ゴルフバッグ 洗濯機 ラジオ 特に、ボクシンググローブのKonstantin Datzさんと、マルボロライトのDavid Imさんのデザインが好きだ。 可愛いアイコンはどれだけ見ていても飽きない。 関連記事 iPhoneで最も美しいアプリアイコンは？ - #RyoAnnaBlog ハッピーマックをデザインしたスーザン・ケアのスケ
画像アイコンはもう古い！CSSでスタイル自由自在のアイコンWebフォント
Font Awesome, the iconic... / Foundation Icons Fonts -... / Typicons他...全5件
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Icons | Font Awesome
SORACOM アイコンセット
これ以上ないくらいミニマルにデザインされたフリーのアイコン素材 -Simple Line Icons
新着記事
フラットデザインの進化形！ながーく影を落とす「ロングシャドーデザイン」まとめ
商用利用可能なアイコン・イラスト素材ならICON HOIHOI