UIデザインことはじめ

エンジニア２人で起業しました。
シャチョーは、IoTとか組み込みとか電子工作とJavaScriptが得意です。研究開発部門っぽいところにいました。
私、フクシャチョーはWeb屋さんでインフラ、バックエンドを主にやってました。

さて、お仕事きました。フロントエンド、誰がデザインするんだ問題
iOSアプリも開発するようになりました。UI/UX誰がデザインするんだ問題

ということで、２人のうち誰かやるしかないので、門を叩くことにしました。

SlideShareでの役に立つSketchのお話

このスライドはまず始めに読む。
Prottとsketchとzeplinのススメ
Sketchで変わるワークフロー

上記のスライドを作成された方のサイトで、もっと詳しく実装方法に書かれています
Amazing workflow of UI design

SlideShareでの役に立つUI/UXのお話

日経のサイトリニューアルについて書かれています。勉強になります。
確実に良くするUI/UX設計

How to learn Sketch

Design+Codeには役立つ記事が山盛り

Learn Sketch 3 - Design+Code
Essential Sketch Plugins for Designers and Developers - Design+Code

動画

• Sketchapp TV | Free Sketch Video Tutorials & Design Resources | Sketchapp Freebies for iOS, Android, Web UI/UX and Animation

SkillShareやUdemyの動画教材もやくにたちます。

少しバージョンが低くても、基本はそこまで変わっていないので大丈夫でした。

他の人のSketchファイルをみて勉強する

• Sketch App Sources - Free design resources and plugins - Icons, UI Kits, Wireframes, iOS, Android Templates for Sketch
• Sketch Repo - 💎 Free Sketch App resources

テンプレート

iOS 10 GUI (iPhone) | Facebook Design
プラットフォームデザインキット - Messengerプラットフォーム
MengTo/AppStoreSketch: A quick App Store template for Sketch

お役立ちツール

Sketch Mirror- Features

はめ込みイメージを作る

• Devices | Facebook Design

使いたい、ちょっと使っている

動きを合わせて、クライアントさんに見せる時に重宝

• Flinto – App Prototyping Tools For Designers

デザインのインスパイア

• Collect UI - Daily inspiration collected from daily ui archive and beyond. Based on Dribbble shots, hand picked, updating daily.

• 100 Brilliant Color Combinations and How to Apply Them to Your Designs – Design School
  配色に迷った時に見るととても良い。

素材系

• Material Icons | bluefirex.design
  マテリアルアイコンのセット