伝わりやすく使いやすいシステムアイコンができるまで｜東芝 UIデザイン
こんにちは、東芝のUIデザイン担当の池田Rです。 PCやスマホを使っていると「ショッピングカート」や「サムアップ」「虫メガネ」など様々なアイコンを目にします。普段意識することはありませんが、実はこのアイコン、テキスト無しでユーザーに情報を伝えることができる重要なアイテムです。 この記事では、そんなアイコンのデザイン検討から完成までのお話をご紹介します。 アイコンには、アプリケーションを起動するランチャーアイコン、メニューの補足やボタンの役割を果たすシステムアイコンの大きく2種類があります。ここでは東芝の様々なアプリケーションで使われるシステムアイコンに絞ってお話します。 １．まずは手書きで「メッセージする」のアイコンのモチーフは“吹き出し”。「ロックする」のモチーフは“南京錠”といったように、まずは使用用途ごとにモチーフを考えます。システムアイコンは誰にでも正しく意味を認識してもらう必要が
2021年、最も注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 今年公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2021 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 4. ホワイトスペースはたっぷり使用してください 5. アイコンをグリッドシステムで使用する際の注意点 6. アクションを実行
【トレンド分析】最近のアイコンのデザインが似通ってきている問題 デザイン会社 ビートラックス: ブログ
最近のスタートアップにおけるロゴトレンドでは、そのスタイルに多くの類似性があることがわかった。その中でも、特にスマホ向けのアプリの影響でアイコンの存在がそのブランドを強く印象づける役割を果たしている。 【トレンド分析】最近のロゴデザインが似通ってきている問題 – 第2弾 多くのアイコンがどんどんカラフルに限られたスペースに複数のアイコンが並ぶスマホのホーム画面で存在感を出すためなのか、最近のアイコンはどんどんカラフルになってきている。これは、画面の解像度が上がってきている恩恵でもあるが、どんどん没個性にもつながっている。 カラフルアイコンの代表的なのがインスタグラム。インスタは2016年にそれまでのカメラ風のアイコンから、思い切ってカラフルなグラデーションを取り入れたアイコンにリデザインを行った。 Googleサービスの見分けをつけるのが難易度高めカラフルなカラースキームの代表といえばGo
これぞプロのデザインテクニック！簡単なのにすごい、アイコンを作るテクニックのまとめ
オリジナルのアイコンを作るシンプルで簡単なデザインテクニックを紹介します。 円や矩形などの基本的な形を組み合わせたり、変形させたりして、さまざまなアイコンを作成します。 作業に慣れてしまえば、どれも1分もかからずにアイコンを作成できます。 The Super Simple Guide to Iconography 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 目のアイコンの作り方 矢印のアイコンの作り方 バッテリーのアイコンの作り方 箇条書きリストのアイコンの作り方 クラウドのアイコンの作り方 次に進むのアイコンの作り方 ファンネルのアイコンの作り方 プレイ・ポーズのアイコンの作り方 位置矢印のアイコンの作り方 位置ピンのアイコンの作り方 サウンドのアイコンの作り方 ウェーブのアイコンの作り方 Toptalのアイコンの作り方
iPad ProでUIスケッチできるアプリBluprint をリリースしました
UXデザイナーのiPad Proレビュー記事で、UIのスケッチにいいと。僕自身もスケッチが大好きなので、ものすごく欲しくなって。この記事に挙げられているのが『純正メモ』と『Adobe Comp』なんですけれども、Compは機能が中途半端で、僕はこれを使うならSketchでいいんじゃないか？と感じたので、純正メモでスケッチをしてみました。カメラでいちいち撮影したり消しカスに悩まされることがなくなり、確かに圧倒的に紙より捗るものの、幾つか問題がありました。 Notesアプリで描いたスケッチ毎回画面のスクウェアを描くのが面倒スクウェアは勘で描くので、サイズがiPhoneと同じにならないもちろん解像度もiPhoneと全く異なるアイコンなどを何回も描かなくてはならないMacに転送した場合、画像をトリミングしてからでないとInVisionなどのプロトタイピングサービスに配置できない1画面に2〜3個しか
Share: The Icon No One Agrees On - BOLD by Pixelapse
Share: The Icon No One Agrees On And why iOS 7's icon is nicknamed the "uploader" What do each of these symbols have in common? They are all trying to convey the exact same action - share! Sharing to a social network or via email is a ubiquitous action nowadays but designers have still not been able to reach a consensus on what symbol to use to represent it. Not only does each major platform use a
Illustratorテクニックとフリー素材まとめ | コムテブログ
作成：2013/10/21 更新：2014/11/01 無料素材 > フリー素材は沢山あるけれど、どこに何があるか分かりにくい。ロゴやイラストを作るのにまたあのサイトを探さないといけない。そういったことで１回まとめました。今回厳選したつもりですが、それでも量が膨大になったので簡潔にリストアップしてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フリー素材まとめ ダウンロードしておきたいフリー素材一覧 Illustrator のチュートリアル 小技 基本テクニック フリー素材まとめ ダウンロードしておきたいフリー素材一覧 ロゴやイラストを作ったりするときに役に立ちそうなアイコン、ベクター、背景、テクスチャ素材をまとめました。少し変わったモノが多いですが、筆者が何度もアクセスしてしまうブクマ一覧です。 学校や教育関係／アイテム全200種類のアイコン素材 -
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog