Sketchと1対1を目指すAtomic designなSwiftUIの作り方 - Qiita
はじめに VALU Advent Calendar 2019 11日目 (!) の記事です! VALU ではデザインに Atomic design (アトミックデザイン) を採用しています。 本記事では，VALU のデザイナーが作成した素敵な Sketch シンボルを差分なく反映し，かつ変更に耐えうる SwiftUI を運用するための方法をご紹介しようと思います。 昨年の VALU Advent Calendar にて，Sketchと1対1を目指すAtomic designなStoryboardの作り方 を投稿しました。本記事はそれを SwiftUI で行ったものです。まだご覧になっていない方は先にご覧ください。 Highlights SwiftUI を利用することで，「ファイル数増加」「子View更新時の伝播」「親ViewのConstraints破棄」など，UIKit (昨年の実装) で
【デザイン勉強会】私たちが今知りたいことを学ぶ！UI設計ナイト - DMM inside
こんにちは！ デザイナー２年目になりました、ライツ管理部の川崎です。 ライツ管理部は、エンターテイメント本部という大きな部組織が母体となっており、主に DMM picturesなどのデザインを担当しています。 そんなエンターテイメント本部と、セールスソリューション本部に所属する若手デザイナーがこのたび“いのこりデザイン勉強会（略して“のこ勉” ）”を発足し、第１回目となる会を先日開催しました！ いのこりデザイン勉強会の目的は？ 勉強会、と言っても固いイメージではなく、デザイナーである私たちが欲しい知識を吸収し、交流の場にすることが目的のイベントです。 記念すべき第１回のテーマは・・・ 『 UI設計 NIGHT 』 これが知りたい、とデザイナーからの要望が一番多いテーマです。 当日は、金沢を含め4拠点の事業所を中継でつなぐ形式で、第１回から大規模な会になりました。 慣れない運営にもどきどき・
Atomic DesignとSketchの活用 | ajike switch
こんにちは。 デザイナーの原です。 さて、皆さんは「Atomic Design」をご存知でしょうか？ 今回は、Sketchを活用した「Atomic Design」の実践方法についてご紹介したいと思います。 Atomic Designとは パーツ・コンポーネント単位でデザインを行っていくデザインシステムのことです。 通常のページ単位のデザイン方法とは異なり、パーツ同士を組み合わせて制作していく方法を指しています。 原子（Atomic）を一番最小のパーツとし、分子（Molecules）、有機体（Organisms）、テンプレート（Templates）、ページ（Pages）の5つの単位に分けられています。 原子（Atomic） パーツの中で一番最小のパーツを指し、UIの基礎的な要素になります。 他の原子と組み合わさることで、分子になります。 分子（Molecules） 2つ以上の原子から構成され
DIST.18「Sketch時代のWebデザインワークフロー」でグラフィックレコーディング - Uni-Q blog
いまは12月ですが、2017/11/10(金)のイベントについての記事です。 DISTではスタッフやっているのですが、発表が見れそうでしたので、試しにグラフィックレコーディングしてみました。 一部、自分がわかりやすい解釈で書き下してる部分があり、発表者が発言したそのままでない箇所もあります。また、実例を基づいたお話の社名などは伏せたりもしました。 案の定、何が書いてあるか分からない状態に。。これが自分なりのアレですね。 自分用のメモにはとってもいいなあと思いました。なによりも脳内も刺激されるというか！ DIST.18「Sketch時代のWebデザインワークフロー」 dist.connpass.com 「2018年に向けたツールの選び方」 HASEGAWA Yasuhisa さん 「あのコーポレートサイトができるまで」 こもり まさあき さん 「シンボルの効率的な作成・運用法とエンジニア連携
Sketch移行とUIコンポーネント化で、良いことしかなかった話
アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデータの属人化、という問題IQONは2010年にサービスを開始・運用してきたため、デザインデータの量がかなり多く、最新のデータがどこにあるのか分かりづらかったり、デザインデータのつくり方が「属人化」していたことが問題となっていました。 サービスの成長にともない2015年頃から徐々にデザイナーが増えてきましたが、新しいデザイナーが入った際すんなり作業を開始することが難しかったり、急対応が必要な際に作業し
【Sketch】TwitterのUIをトレースしながら研究しよう！（初心者向け） - NOGA BLOG
UIデザイナーの、のがちゃんです！ デザインスキルを上げるには、良いデザインを真似ること。私が尊敬するデザイナーの先輩達は皆口を揃えてそう言います。 １日ひとつdribbbleなどからかっこいいロゴや名刺などを選んでトレースすると良い。 そのときに、なんで自分がかっこいいと思ったのかを考えること。 デザイナーになる秘訣！Time Ticketで、石嶋未来さんに会ってきた - NOGA BLOG UIデザイナーで、本当にスキルを身に着けたい人は、新規事業とかのキラキラした仕事を求めるのではなく、TwitterとFacebookアプリをSketch3で完コピして、何故このUIなのか背景を理解して、Prottで動かして触って、iOSのガイドラインを読み込むと早いと思うよ。 — Tomo Tsubota (@tsubotax) 2016年6月12日 とはいえ、これからUIを学ぼうという方には、どう
ワイヤーフレーム、モックアップ、プロトタイプの違いとは？ | POSTD
開発者と仕事をしていると、スケッチ、ワイヤーフレーム、モックアップ、プロトタイプといった用語をよく聞くかと思います。しかし、あなたはこうした用語の意味を本当に理解しているでしょうか？ ワイヤーフレームやプロトタイプは、それぞれどんなときに利用するのか、知っていますか？ まず、アプリの構築を始める前に、スケッチ、ワイヤーフレーム、モックアップあるいはプロトタイプからスタートするべきだという理由を見てみましょう。 構築したいものがどんなものか、ブレインストーミングをしたり考え出したりするため。こうした作業により、あなたの期待するものが明確になる。 開発者にかかる費用を節約し、構築に必要なものを明らかにすることができる。 こうした作業の結果は投資家や最初の顧客、共同設立者に提示する目的で使える。 顔を突き合わせることのない開発チーム とコミュニケーションを取るためには、これらの用語を正しく区別し
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザインのための「Sketch」1dayブートキャンプ
Prottとsketchとzeplinのススメ
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ