【神】Photoshopより、ずっとはやーい！Sketchの素晴らしさを動画で学びながら体験してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、カクシンのアートディレクターのまきこです。アイドル集団「ハロー！プロジェクト」では賛否両論の新体制がはじまりましたが、わたしは変わらず大好きです！ さて、みなさんは、 「Sketch」というデザインツール を使ったことがありますか？ 今回、オンライン動画学習サービス “Udemy” で人気の「Webやアプリの最新デザインツール Sketch3」という動画講座をPRするため、初めてSketchを使うことになったのです。しかし、SketchってWebデザインの現場だとちょっとマイナー。Photoshopと何が違うのかもよくわからない……。 だけど実際に使ってみると、作業がものすごーく早くなったし、 だったんですよ！ 実際に受講した動画講座の内容に沿って、その魅力を紹介しますね！ そもそも「Sketch」って？ Sketchは、アプリやWebサイトのUIデザインに特化したツール。ペー
複数のデザイナーで Sketch ファイルを共同編集・バージョン管理するための「Abstract.app」ワイワイやっていき - DeNA Design
複数のデザイナーで Sketch ファイルを 共同編集・バージョン管理するための 「Abstract.app」ワイワイやっていき#Sketch#CVS#Abstract Abstract というツールを使うと同じ Sketch ファイルを同時刻に別の人が作業・編集→後ほど合体といったワークフローで、共同デザイン作業が行えます。 ブランチやマージといった概念で、「Git」のような作業が Sketch ファイルで行うことができます。複数人デザイナーがいるチームにはとてもオススメのツールになります。差分確認・レビューも行えるので、まさにデザイン版 GitHub ですね。 お一人様利用で導入してもログが残るので良いかも。(でもそれは使える環境であれば TimeMachine で十分な気がする。) Push / Fetch / Status / ラベリング の作業が自動で行われているのもポイントで、
アプリUI制作のチュートリアルで学ぶSketchの使い方 (1/2)
グッドパッチのデザイナーがSketch 3を使ったUIデザインの方法を解説する本連載。第1回ではSketchの魅力についてお伝えしました。今回は、スマートフォンアプリの「Sign upページ」を例に、基本的なUIをデザインする上で必要なSketchの操作を説明します。Sketchの使い方だけでなく、UIデザインに役立つTipsも紹介します。 ※文中の（A）などはショートカットキーです。積極的に使って覚えていきましょう！ Sign upページは、以下の手順で作成します。 アートボードを用意する ナビゲーションバーを置く ユーザーアイコンの画像を丸く切り抜き配置する 入力欄を作成する ボタンを作成する 解説の中では細かい数値や色については触れませんが、同じ数値で作成したい方は図を参考にしてください。また、今回作成する「Sign upページ」のSketchデータはこちらからダウンロードできます。
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
エンジニアでもSketchを効率的に使うためのまとめ - Qiita
あえてプラグインについては何も書きません。Sketch自体の使い方についてフォーカスして書きます。 はじめに SketchはPhotoshopやIllustraと違い、機能がしぼってあることでエンジニアでもかなり使いやすいシンプルなUIのアプリケーションになっています。UIがシンプルである故に、意外と知られていないかなり便利な機能なども結構あります。隠れた機能を知ることでかなり効率的にSketchを使用できます。 自己紹介 Wantedly Advent Calender4日目を書きます。デザイナーの@usa619_ です。 WantedlyではUIデザインは基本的にSketchで行っていて、エンジニアもSketchを使うことでコミュニケーションコストを下げるようにしています ref デザイナーとエンジニア間のコミュニケーションコストを下げる試み 基本ショートカット Sketchのショート
人気アプリ「Sketch」もMac App Store撤退--ストアの問題が浮き彫りに
「Mac App Store」に、小さいながらも次第に広がっている傾向がある。開発者らが、ソフトウェアを同ストアから引き上げて、顧客に直接販売し始めているのだ。 最新の例は「Sketch」だ。オランダのSketchは現地時間12月1日、Mac App Storeから撤退するとの発表をブログに掲載した。2014年10月に同じように「Coda」を引き上げたPanicは2015年に入り、Mac App Store時代の79ドルから99ドルへと値上げして以降も、販路変更による販売数への大きな影響はなかったと述べた。むしろ、直接販売に移行したことで、ライセンス販売数は減少したが売り上げは44％増加したという。 これは、Mac App Storeの外で売れたアプリは、Appleに販売額の30％を一律で支払う必要がなく、開発者に入る販売数あたりの売り上げが増加するためだ。 しかし、Sketchによると、
SketchでiOSアプリのデザインからインタラクティブなプロトタイプまでを作成できるSketch 3用プラグイン「Silver」がリリース予定。
Georgeさんたちは「近年多くのプロトタイピングツールが開発されていますが、Sketchでデザインしたアプリのモックアップをこれらのプロトタイピングツール用に書出し利用するのが面倒に感じた」として今年の初めからSilverの開発を始めたそうで、OrigamiやPixateなどを多くのプロトタイピングツールを研究し、 Framer：Framerjsを利用したJavaScriptベースのプロトタイピングツール Pixate：Googleが買収したプロトタイピングツール Origami：Facebook製のプロトタイピングツール Flinto：Webベースのプロトタイプ＆モックアップ作成サービス Proto.io：WebからiOS, Androidデバイスのモックアップ作成サービス UXPin：最初から様々なテンプレートが用意されているプロトタイピング作成サービス I started work
アプリのUIデザインで使っているツール 10選+
2年前に同じ趣旨の記事を書いたが、いろいろ変わったのでまた書いてみよう！ Sketch 3（Mac） + Sketch Mirror（iOS） もう、Sketch以外でデザインするのはイヤだ、と思ってしまうほどパワーのあるデザインツール。ベクターベースのグラフィックツールなので、Adobe Illustratorと近いのだけど、もっと機能が絞られていて、UIデザイン寄り。いろいろと細やかに気がきいていて、好きなところを書ききれない感ある。起動が早い、ファイル保存も早い、数字書く窓でそのまま計算できる、ファイル書き出しするとき1.5倍とか3倍とか自由に拡大縮小できる、実機プレビューがリアルタイムかつ容易。 iPhone実機でデザイン確認するときは、iOSアプリSketch Mirrorでつなげることができる。リアルタイムで変更が見れる。昔はいろいろバグがあったけど、だいぶ安定して安心して使え
Sketch.appで描かれたDribbble投稿作品まとめ10こ | Goodpatch Blog
最近のMEMOPATCHではSketch.appについての記事を続けてアップしているのでSketchに興味を持たれている方もいるのではないでしょうか？ 前回記事: 「Fireworksユーザーに朗報？海外で話題の新しいWeb制作ツールSketch.app」 前々回記事: 「Sketchを買ったら読んでおきたい！基本的なことからちょっとした小技、ショートカットまとめ」 Sketchをダウンロードして気になるのが、どんなものを作れるかではないでしょうか。Sketchはまだ新しいアプリですがいくつかのクオリティの高い作品がDribbbleなどのデザイン投稿サイトにあがっています。そこで今回はSketchで描かれたアイコンをご紹介します！ （各リンクはDribbbleの作品ページに飛びます） Mailbox client [.sketch] https://dribbble.com/shots/1
Awesome Design Sketches Made For Various Web Projects | Top Design Magazine - Web Design and Digital Content
Writen by Bogdan+ / Comments Off on Awesome Design Sketches Made For Various Web Projects Before you start working on a web project, the first logical step is making the sketches for it. This not only helps the analyst for having a better understanding of the overall project and to create the specification, but it also helps the entire team to visualize the final product. The sketch will be a raw
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
