(デザイン初心者向け)メルカリのデザインチュートリアルを作ってみた(ホーム画面UI編)｜ココディー｜note
(*この記事はデザイン未経験者や、非実務経験者の方に向けた実践記事です。) ✏️目次(再掲) 0. 前置き 1. メルカリとは 2. UIトレースをしてみる 3. デザイン観点の追加と、トレースの調整 4. 実際にメルカリのデザイナーに聞いてみた 5. まとめ・終わりに 0.前置きこんばんは、ココディーです。 前回、こんな記事を書いて、デザイナーや、デザイナーに未経験からなったという人達から、たくさんの反響をもらいました。ありがとうございました！ この記事の中で、問題視していたのは「デザイナーの総数を増やしていく必要性」でした。 その上で「ノンデザイナーからデザイナーになっていくプロセスが確立していない」ということを課題として、その解決の一つの方向性として「デザイナーに弟子入りするということ」を挙げていました。 とはいえ、「未経験からデザイナーのもとに弟子入りをする」という事も、デザイナー
Sketch買ったばかりのプログラマがアイコンデザインに挑戦してみたメモ #tryswiftconf - その後のその後
「try! Swift」2日目のセッション "Live Design:🎙🎨" （日本語タイトル：ライブデザイニング）で、Sketchを使ってサクサクとアイコンをつくっていく過程を見て、 Sketch使いやすそう。買おう。 #tryswiftconf— Tsutsumi Shuichi (@shu223) 2016年3月3日 と思い *1、さっそくダウンロードして同じ手順をなぞってみることにしました。 Sketch - Professional Digital Design for Mac ちなみに購入する気満々だったのでこういうタイトルにしたものの、Free Trialで30日間は無料で使えるようです。 @niwatako さんの聞き起こし記事を参考に手順をなぞっていきます。 try! Swift ライブデザイニング:🎙🎨 #tryswiftconf Day2-10 - niwat
iOS 9 GUI (iPhone) — Facebook Design Resources
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
自身で一から作り上げることができるデザインチュートリアルまとめ「38 Best Design Tutorials for Learning Sketch 3」
TOP > Design > 自身で一から作り上げることができるデザインチュートリアルまとめ「38 Best Design Tutorials for Learning Sketch 3」 1つのデザインを完成させるためには、多くの素材の組み合わせが必要になってきます。フリーで配布されているものも多数ありますが、時には自分で作らなくてはいけない、オリジナル性を求められるシーンに遭遇することもあるのではないでしょうか？今回はそんな時に参考にしたい、自身で一から作り上げることができるデザインチュートリアルまとめ「38 Best Design Tutorials for Learning Sketch 3」を紹介したいと思います。 iOS Design using Sketch. Part one: iOS Navigation Bar – YouTube アイコンやイラスト、UI、アニ
アプリUI制作のチュートリアルで学ぶSketchの使い方 (1/2)
グッドパッチのデザイナーがSketch 3を使ったUIデザインの方法を解説する本連載。第1回ではSketchの魅力についてお伝えしました。今回は、スマートフォンアプリの「Sign upページ」を例に、基本的なUIをデザインする上で必要なSketchの操作を説明します。Sketchの使い方だけでなく、UIデザインに役立つTipsも紹介します。 ※文中の（A）などはショートカットキーです。積極的に使って覚えていきましょう！ Sign upページは、以下の手順で作成します。 アートボードを用意する ナビゲーションバーを置く ユーザーアイコンの画像を丸く切り抜き配置する 入力欄を作成する ボタンを作成する 解説の中では細かい数値や色については触れませんが、同じ数値で作成したい方は図を参考にしてください。また、今回作成する「Sign upページ」のSketchデータはこちらからダウンロードできます。
Sketch3でこれからデザインする人に使い方のヒントになりそうな操作をまとめてみる | バニデザノート
Sketch3は、ウェブサイトや、アイコンや、スマホデザインや、レスポンシブデザインなどのデジタルデザインに特化したデザインアプリです。 直感的で、定義をすればするほど速くデザインができるんですが、PsやFwと比べると、シンプルになりすぎてて「あの機能はどこなの？っていうかあるの？」って思うものがいくつかあったので、まとめてみたいとおもいます。
Sketchの使い方: 初心者がマスターしておきたいSketchでのデザイン作業がぐっと効率的になるチップス | コリス
10 Sketch Tricks for Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レイヤー間でスタイルをコピペ レイヤーの移動 カラーピッカー 角丸の半径を個別に設定 再利用できるシンボル ツールバーのカスタマイズ iOSデバイスでデザインレビュー Sketchの便利なプラグイン Sketchでプレゼンテーション iPhone, iPadの画面を録画 レイヤー間でスタイルをコピペ レイヤーに同じデザインをコピペしたい時は、カラーコードなどをコピペするのではなく、スタイルをレイヤー間でコピペできます。 レイヤー間でスタイルをコピー ⌘ + Option + C レイヤー間でスタイルをペースト ⌘ + Option + V レイヤーの移動 レイヤーを上下に移動させたい時は、ドラッグ&ドロップの代わりにキーボード
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
最近、Adobe製品を全部消してしまって仕事しています。Adobe製品ではない、次世代ソフトで仕事をしていますが、Webデザイナーがいわゆる「脱Adobe」するとどうなるかなどを書いてみたいと思います。第2回目は実際に「脱Adobe」してみてでてきた課題を書いてみたいと思います。 Webサイト制作では、レスポンシブWebデザインが一般化しつつあります。 レスポンシブWebデザインの案件が増えることで、ベクター形式で納品を指定されたり、素材を支給される事が多くなりました。 ベクター形式の素材を取り扱う場合、データファイルに「PDF保存オプション」を指定しているかどうかが鍵になります。 ファイルをAdobe illustrator形式やEPS形式などに保存するときに「PDFデータ」が含まれている場合は、他のアプリケーションで開ける確率が高くなります。 Adobe illustrator形式のフ
Material Designに備えておこう！さまざまなUIコンポーネントが揃ってるPSDとSketch用の無料素材 -Android Lollipop UI Kit
2015年注目のMaterial Designをベースにした45種類のUIコンポーネントが揃ったAndroid Lollipopのユーザインターフェイス用のデザイン素材を紹介します。 iOS版Chromeも先日のアップデートでUIが一新され、Material Designが採用されました。 今年はフラットデザインから進化したMaterial Designがガンガンきそうですね。 Android Lollipop UI Kit Material Designは、デスクトップ・スマホ・タブレットをはじめとするさまざまなデバイスで直感的に操作ができるよう新しいUXのアプローチです。Androidにも全面的に採用されています。 Android 5.0: Lollipop 今回紹介するのは、そんなLollipop用のさまざまなUIコンポーネント・エレメントが揃ったPSDとSketch用の素材です。
Sketch Land
การที่มีความเข้าใจเกี่ยวกับประวัติเทียบประกันรถยนต์จะช่วยให้คุณมีความรู้และความเข้าใจที่ดีเกี่ยวกับการพัฒนาและการเปลี่ยนแปลงของวงการประกันภัยรถยนต์ตลอดกาล ซึ่งเป็นประโยชน์อย่างมากในการเลือกประกันภัยที่เหมาะสมสำหรับคุณและครอบครัวของคุณ การเทียบประกันรถยนต์เป็นขั้นตอนสำคัญในการเลือกประกันภัยที่เหมาะสมสำหรับคุณและครอบครัว โดยมีหลายปัจจัยที่ควรพิจารณาในการทำเช่นนี้ ดังนี้ ทำความเข้าใจเกี่ยวกับการเทีย
UARRR.org
Apple Watch GUI Sketch Template I could write a lengthy post about my decision to provide a fast and easy way for designers to build Apple Watch apps in Sketch but that would be a lie. I needed this file myself, threw it together and here you go. An Apple Watch 42mm Template for Sketch 3.2. It’s a first version. A draft. Based on what Apple provided and what Apple provided is far from perfect. Thi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーによるAtomic Designの実践〜導入編・運用編〜
GitHub - ment-mx/Prism: Creates a beautiful artboard color palette with all your 'Document Colors' and their respective color label in a variety of formats.
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
https://creative-tweet.net/blog/2014/12/sketch-3-advent-calendar-2014-25.html
[Sketch] Sketch Repo - Sketch関連のリソース紹介サイト
Sketchを更に便利にパワーアップするプラグインのまとめ
[Sketch] Yosemite UI Kit - Sketch 3用のYosemite UIキット
Sketch 3 Advent Calendar 2014 - Adventar
iOS8のデザインに役立つ！iPhone 5s/6/6Plusでの主要なエレメントが揃ったPSDとSketchの無料素材 -iOS8 UI Design Kit
