Create avatar illustrations in Sketch App with this free library. Combine clothes, hair, emotions, accesories, and colors. Video 📺
この記事は RECRUIT MARKETING PARTNERS Advent Calendar 2017 の投稿記事です。 こんにちは!現在キッズリーのデザインを担当しているデザイナーの町田(@macheri_me)です。 今年で中途入社3年目となりました。本日は弊社の制作事例をもとに、AdobeXD・Sketchの活用法についてご紹介します。 【この記事を読んでもらいたい人】 これからAdobe XD、Sketchどちらを導入しようか悩んでいる人 デザイン制作フローの中で課題を抱えており、解決したい人 Adobe XDとSketch。自分のチームにはどちらが最適か サービスのデザインを制作する際、何のツールを使っていますか?少し前だと Adobe Illustrator、Photoshop、Fireworksといったグラフィックツールが多かったかと思います。しかしながら、これらはUIデ
Figma:https://www.figma.com/ (2019 年 12 月 1 日 : 古くなって意味消失してた部分を編集しました) ##Figma とは デザインツール、Figma をご存知でしょうか。 一言で表すならば、コラボレーション機能満載の Sketch です。 本記事を公開した 2017 年時点では、あまり知名度が高くなかったものの、2019 年時点ではだいぶユーザーが増えたように感じます。Google Trends で、Sketch と XD、そして Figma の今と昔を比較してみます。 2017 年 2019 年 (純粋には比較できませんが)2 年前は Sketch と Figma に約 25 倍も開きがありました。ですが現時点では約 10 倍くらいでしょうか。日本ではなんと逆転しています。(タイトルの通り!) そこでもう少し Figma に頑張ってもらうべく、本
ウェブサイトのデザインが決まらないときは、PhotoshopやSketchで編集できる、UIコンポーネントやPSDテンプレートを活用してみましょう。アイデアを形にしやすくし、写真や文字テキストを編集するだけ手軽にデザインを完成させることができます。 今回は、2016年のデザイントレンドを盛り込んだ、無料ダウンロードできる UI コンポーネントや PSD テンプレート素材をまとめてご紹介します。本格的にデザインをはじめる前のモックアップやワイヤーフレームとしても活用できるアイテムを中心に揃えています。 詳細は以下から。 Web制作スピードをアップする、無料UIコンポーネント、PSDレイアウト素材まとめ Chat UI Kit ミニマルなレイアウトに、カラフルな配色を活用したUIコンポーネントは、Photoshop と Sketch 用ファイルがそれぞれ用意されています。 Carbon Mat
An example sketch of the medium.com UI and this article before publishing I’m passionate about sketching and visual thinking, and I believe that these can boost, improve a design process. I’d like to share articles, resources I found most interesting and useful this year, and I also included resources that I created. The resources are organized into 3 categories: Articles; Books; Tools & Other Res
UIデザイナーの、のがちゃんです! デザインスキルを上げるには、良いデザインを真似ること。私が尊敬するデザイナーの先輩達は皆口を揃えてそう言います。 1日ひとつdribbbleなどからかっこいいロゴや名刺などを選んでトレースすると良い。 そのときに、なんで自分がかっこいいと思ったのかを考えること。 デザイナーになる秘訣!Time Ticketで、石嶋未来さんに会ってきた - NOGA BLOG UIデザイナーで、本当にスキルを身に着けたい人は、新規事業とかのキラキラした仕事を求めるのではなく、TwitterとFacebookアプリをSketch3で完コピして、何故このUIなのか背景を理解して、Prottで動かして触って、iOSのガイドラインを読み込むと早いと思うよ。 — Tomo Tsubota (@tsubotax) 2016年6月12日 とはいえ、これからUIを学ぼうという方には、どう
Sketch、かなり普及してきましたね。特にアプリ開発ではSketchでのデザインがスタンダードになりつつあります。 今回は、Sketch用のテンプレート・UIキットとして、無料でダウンロードできる素材を紹介します。 クオリティの高い、美しいデザインを集めました。 SketchのUIキット Minimal UI Kit ミニマルなAndroidのUIキットです。 ダウンロード Wild_ Full Website Template for Sketch PCサイトのSketchテンプレートです。 ダウンロード Phoenix UI: Vol 1 – for iPhone 6 / Free PSD & Sketch iOS用の12画面がセットになった美しいテンプレートです。 ダウンロード Shop iOS App Freebie – UI & Prototype ショップアプリに最適なiOS
Sketchがレスポンシブデザインに対応した神アップデート!Smart Symbol Resizingをリリース 昨日アップデートされたSketchのバージョン39からSmart Symbol Resizingという機能が追加されました。 これがとんでもなく便利な機能だったので紹介します。 Smart Symbol Resizingとは? 今までシンボルをリサイズしようとするとこんな感じでシンボルの中身まで変形してしまうので、デバイスのサイズが複数になったときにシンボルの再利用ができないという問題がありました。 それを解決してくれるのがこの「Smart Symbol Resizing」です。 ・Stretch ・Pin to corner ・Resize ・Float in place と4つの設定があり、可変してもいい部分と可変にともなって相対的に位置を移動する部分とを分けてシンボルを作
最近、ちょいちょい耳にするFramer.js。 アニメーションを作るのに適してるライブラリ・・・というくらいしか知りませんが、試しに使ってみようと思いました。 Framer Studio なるCUIツールがあるので、お試し版でダウンロードしてみました。 Framer Studioで何が出来るのかがわかる動画 SketchのオブジェクトをFramer Studioにドラッグアンドドロップするだけで、JSのオブジェクトが生成されちゃうっていう。これはヤバイ。 Framer Studio - Basics on Vimeo Framer.jsの特徴 アニメーションに特化したJavascriptらしい・・・。coffescriptもいけるようです。 他のライブラリよりは比較的簡単そうなので、学習コストはそこまでかからないように見える。見える・・・。見え(ry Google、Apple、Facebo
※「Sketch」はMac専用アプリです。Windows版はありません。 __「演習ファイル+動画+演習付き」__で記事を書いてます。 エンジニアの人から「Sketch使ってみたい」「日本語の記事が少ない」という声を聞いて、最近社内で勉強会しました。 Sketchについて日本語の記事を調べてみたところ、このレベルの記事はけっこうありました。 ただ、学びやすいか?といえばそうではないらしいので、少し工夫して学びやすいように書いてみました。 __ハンズオン用__などにご利用ください。 #Sketchとは Sketchについて一応さらっと書いておきます。 ・アプリやWebのデザイン・UI設計などに使われるMac用アプリケーション IllustratorやFireworksのようなツールです。 ・$99 買いきり(2016/02 現在) 有料です。 ちなみにApp Storeでは買えなくなりました
今年からSketch3を使いはじめまして去年まではずっとPhotoshopを使っていました。Sketch3は動作が軽いのと思った以上に簡単に扱えたのでPhotoshopからの乗換えであれば割とすんなり使えると思います。 ただ業界的にはPSD納品でよろしくって場合もあり、会社全体でAdobe製品を使っている場合は個人では乗換えに踏み切れず普及しにくいのが現状なのだろうなと思います。 それにどんなに評判の良いツールでも乗換えは腰が重たいもので、ショートカットやガイドの引き方、マスクの扱いなど何をするにもいちいち調べなければならないのでストレスが溜まります。 しかし、先に知っておけばこのストレスも2割くらいは軽減されたんじゃなかろうか、と個人的に思った項目をまとめました。 複製レイヤー名に[xxx copy]をつけない Sketch > Preferences > Layers タブの D
Photoshop and Sketch templates of GUI elements found in the public release of iOS 9. Go make good stuff. Most people find this file useful for mocking up apps. Others use it to concept ideas or create custom interface elements that work harmoniously with those native to iOS. Whatever your use, we hope you make good stuff with it. New to this app design thing? You may want to become acquainted with
Thousands of UI/UX resources from great and resourceful designers around the world Sharing and building on each other's work is the ultimate form of learning and retaining knowledge. Since 2012, we're curating some of the best resources to help you design, prototype, and collaborate better and faster. UI Kits Apps Icons Illustrations Wireframes Ideas Web iOS Material Data Forms Mockups Real Annota
PhotoshopとIllustratorとSketchが最近のウェブデザインツールとして上がってますね。 お客様のニーズに合わせて、いつもはデザインしないアプリをベースアプリとして デザインを要求されることもあるかとおもいます。 今回は、「だいたい同じことができる、でも得意不得意はあるかも」といったことをアプリをまたいで考えてみました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く