1/26(Tue)
第1回:2014年12月6日公開
80min
スマホ対応サイトといえども、開発はPCでするもの。タッチパネルでデザインする訳にはいきません。だからと言って、PCのディスプレイで開発し完成したモックを実機デバイスで見るととんでもない事に!文字が小さすぎて全く読めなかったりします。それは、タッチデバイスの解像度がPCの2倍~4倍だからです。つまり、PCで見ている大きさの1/2~1/4に見えてしまうという事です。
Photoshopではレイヤーを沢山重ねたpsdファイルで作業しています。実機検証のために、jpgやgifの1枚画像にしてスマホに送っていたのでは、オンタイムでの確認ができません。スピードが命の現場ですとそんな事を悠長にやっている時間がないので、UIはコーディングとインタラクションでモックを作ってしまい、画像はバラバラにどこかから持ってきてパーツで使っていくというやり方をしてしまう事も多いと思いますが、そんな事をしていてはデザイン以前のUIにしかなりません。
この授業ではスマホサイトを多く手がけている制作会社の現場で行われているUIデザイナーの開発方法を学び、本格的なUIデザインを実践できるスキルを学びます。
※photoshopがインストールされている事を前提に授業が進んでいきます。
photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#5:Webサイトでよく使うビジュアルデザインの作り方」の録画授業を受講されると、より理解が深まります。
※この授業はスマートフォンをご用意していただくことでより理解が深まります。
ダウンロード参考:Skala Preview Ps Play
・リンクボタン制作にAdobe CC photoshopを使います。
http://www.adobe.com/jp/products/photoshop.html
Adobe CCのアセットを使います。
・psdからのcss3抽出にAdobe CC DreamWeaverのExtract機能を使います。
https://helpx.adobe.com/jp/dreamweaver/how-to/extract-photoshop-design-code.html
・コーディングにSublimeText3を使います。
http://www.sublimetext.com/3
・UIのインタラクションにWOWフレームワークをつかいます。
http://mynameismatthieu.com/WOW/
スクー放送部
2014年12月6日公開
80min.
スマホ対応サイトといえども、開発はPCでするもの。タッチパネルでデザインする訳にはいきません。だからと言って、PCのディスプレイで開発し完成したモックを実機デバイスで見るととんでもない事に!文字が小さすぎて全く読めなかったりします。それは、タッチデバイスの解像度がPCの2倍~4倍だからです。つまり、PCで見ている大きさの1/2~1/4に見えてしまうという事です。
Photoshopではレイヤーを沢山重ねたpsdファイルで作業しています。実機検証のために、jpgやgifの1枚画像にしてスマホに送っていたのでは、オンタイムでの確認ができません。スピードが命の現場ですとそんな事を悠長にやっている時間がないので、UIはコーディングとインタラクションでモックを作ってしまい、画像はバラバラにどこかから持ってきてパーツで使っていくというやり方をしてしまう事も多いと思いますが、そんな事をしていてはデザイン以前のUIにしかなりません。
この授業ではスマホサイトを多く手がけている制作会社の現場で行われているUIデザイナーの開発方法を学び、本格的なUIデザインを実践できるスキルを学びます。
※photoshopがインストールされている事を前提に授業が進んでいきます。
photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#5:Webサイトでよく使うビジュアルデザインの作り方」の録画授業を受講されると、より理解が深まります。
※この授業はスマートフォンをご用意していただくことでより理解が深まります。
ダウンロード参考:Skala Preview Ps Play
第2回 タッチデバイス時代のUIデザインの極意 脱静止画で体験するサイトへ
第3回 タッチデバイス時代のUIデザインの極意 Webデザイナーの開発現場での役割
スライド資料
2014年12月13日公開
70min.
UIを静止画で考えてはいけません!
見てるだけのサイトに人は飽きてしまう時代になりました。ユーザーの指先とコミニュケーションをとれるサイトを作る必要があります。つまり、タッチデバイスには指先でなぞった時反応するインタラクションが必要不可欠です。マウスオーバーで反応するPCサイトから、縦×横×時間で作るタッチデバイスのサイトへ思考を変換していきましょう。
この授業では「見ているだけのサイトから体験するサイトへ」。
時間軸のあるサイトを作る極意を学び、あなたのスキルの幅を広げていきます。これまで多くPCサイトを手がけてきたベテランデザイナーにこそ受けていただきたい授業です。
・リンクボタン制作にAdobe CC photoshopを使います。
http://www.adobe.com/jp/products/photoshop.html
Adobe CCのアセットを使います。
・psdからのcss3抽出にAdobe CC DreamWeaverのExtract機能を使います。
https://helpx.adobe.com/jp/dreamweaver/how-to/extract-photoshop-design-code.html
・コーディングにSublimeText3を使います。
http://www.sublimetext.com/3
・UIのインタラクションにWOWフレームワークをつかいます。
http://mynameismatthieu.com/WOW/
スライド資料
2014年12月20日公開
70min.
この授業では、モバイルファースト時代のWebサイト制作において、Webディレクター・フロントエンドデベロッパーとの共同開発でデザイナーがすべき事を学んでいきます。
タッチデバイス対応サイトはUXと言われているように、UI自体がエクスペリエンス(体験)を内包しています。見るだけのサイト(PC)から体験するサイト(タッチデバイス)へ。熟練したデザイナーこそ2次元の中でデザインをしてしまいがち。
タッチデバイス対応サイトやアプリ開発では、Webディレクターはエクスペリエンスを考えたワイヤーを作ってきますので、インタラクション担当のフロントエンドデベロッパーとの共同作業でモックを作っていくワークフローになります。PCサイトの手法で、Webディレクターが持ってきたワイヤーからデザイナーが一枚絵のカンプを起こし、コーダーさんに渡してスライスに切ってもらう、という流れでは表現できないからです。これからますますWebへのアクセス比重がスマホへシフトしていく中、フロントエンドデベロッパーとUIデザイナーはますます連携を深めて開発して行く事になるでしょう。少数精鋭の制作現場においては、フロントエンドデベロッパーがUIデザイナーを兼ねている事も少なくありません。そんな今時のフロント開発現場でのお役立ち情報をお伝えします。
※photoshopがインストールされている事を前提に授業が進んでいきます。
photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#5:Webサイトでよく使うビジュアルデザインの作り方」の録画授業を受講されると、より理解が深まります。
第1回 タッチデバイス時代のUIデザインの極意 Photoshopと連携したデザイン実践スキル
第2回 タッチデバイス時代のUIデザインの極意 脱静止画で体験するサイトへ
スライド資料