タグ

ブックマーク / ascii.jp (3)

  • UIデザイナーの私が4年間で学んだ、ダッシュボードのデザインで大切な26のこと

    モバイルアプリ相互送客ツール「Tapdaq」のメインデザイナーであり、Dashboard UI Kitの作者として知られるJan Losertさん。4年間のダッシュボードデザインの経験からまとめた26のステップは、UI/UXデザイナー必読です。 過去4年間にわたってダッシュボードとアプリケーションのデザインを続ける中、プロダクトをさらに良く効率的なものにするために、いろいろな部署と付き合っていくこと、そしてそうした部署の人たちの知識を活用することを学びました。 この記事では、私が学び、日常のルーティンに取り込んだすべてのステップを紹介しようと思います。こうしたステップがあったからこそデザイナーとして大きく成長できたと思うので、読者のみなさんに役立つことを願っています。 事前準備をする Step 1. 集められるだけの情報を集める(例示は3パターンでお願いする) 私にとって、実際に稼働してい

    UIデザイナーの私が4年間で学んだ、ダッシュボードのデザインで大切な26のこと
  • ゼロから始めるレスポンシブWebデザイン入門

    スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基まで、菊池 崇氏が解説します。

    ゼロから始めるレスポンシブWebデザイン入門
  • Webデザインが捗るPhotoshopの時短ワザ4つ

    カンプのデザインやパーツの作成など、Webデザインにも欠かせないPhotoshop。もっとラクに、もっと速くWebデザインするために、すぐに役立つ4つの時短テクニックを紹介します。 面倒なスライス作業は「画像アセットの生成」機能で不要に Web制作で面倒な作業といえば、カンプから画像パーツをスライスする作業。パーツがたくさんあったり、あとからデザインが何度も変更になったりすると、いちいち書き出すのが手間ですよね。 Photoshop CC(14.1以降)の「画像アセットの生成」を使うと、スライス作業が不要になり、レイヤーグループごとに画像ファイルを自動的に書き出せます。 例として[角丸長方形]ツールと[テキスト]ツールで作った以下のようなボタンを書き出してみましょう。 [角丸長方形]と[Button]の2つのレイヤーを選択し、command+Gでグループ化します。グループ名には、書き出した

    Webデザインが捗るPhotoshopの時短ワザ4つ
  • 1