Sketch + InVision + Zeplin + Abstractで効率化するデザインフロー
デザイナーの西田です。 弊社では目的に応じて、複数のデザインツールを使い分けてUIデザインを作成しています。 昔は各々好きなデザインツールを使っていたのですが、事業がどんどん拡大し、メンバーが増えていくと、チームで統一されたワークフローがないと回らない状況になっていきました。各ツールの長所＆短所を何度も議論した結果、現在はSketch + InVision + Zeplin + Abstractの組み合わせで進めています（2018年9月時点） 今回の記事では、現状のデザインツール＆フローに至った経緯を紹介していきます。 目次 1. プロダクト＆チーム プロダクト チーム 2. ワイヤーフレーム：自由 3. モックアップ：Sketch vs AdobeXD vs Photoshop Zeplin連携 Sketch Librariesによるコンポーネント化 4. プロトタイプ：InVision
追従ヘッダー実装時に使える動作・デザインパターン例 - NxWorld
常にユーザーの視線に入るようにしておきたいとかサイトの回遊率をあげたいなどの理由で実装を頼まれることが多いと追従ヘッダー。 単純に基本となる見栄えを維持してそのまま追従させることも多いですが、少し変化を加えてほしいという要望をもらうことも少なくないので、そういった場面で提案しやすいようによくある動作・デザインのパターン例をまとめました。 紹介しているサイトの動きや見栄えは、いずれもPCでの表示確認時のものになります。 変更を加えずにそのまま追従 スクロール時にデザイン・位置とも特に変更を加えず、単純にファーストビューでの見栄えをそのまま維持して追従させるパターンです。 少しCSSを書くだけで容易に実装できる�点がメリットですが、ヘッダーの領域が広いデザインの場合は�その分コンテンツが見える領域が狭くなるというデメリットがあるので、仕様やデザイン上でどうしてもヘッダー領域が広くなってしまう場
UXエンジニアが知っておきたいデザインシステムの原則 | Goodpatch Blog
Featured image: Business vector created by Freepik UXエンジニアという言葉を聞いたことがありますでしょうか。 私もここ数年で聞くようになった言葉です。UXエンジニアという仕事はまだ生まれたばかりで、定義が曖昧ですが、私は一言で言えば「UXデザインをする、もしくはその工程に関わるエンジニア」のことだと考えています。最近クックパッドさんでもUXエンジニアを採用しており、「UXエンジニア」って何する人？ クックパッド流・開発力を高めるDesignOpsの進め方は私の印象に残っている記事の一つです。 グッドパッチがチーム全員でデザインをしているように、UXデザインはデザイナーだけの仕事ではありません。例えばUIデザインがよくてもページの読み込みが遅いとユーザーの体験は悪くなってしまいます。その他にもエラーメッセージの言葉や見せ方、フォームのバリデ
UIデザイナーへの道のり。インプット・アウトプットできるデザインリソース｜Goodpatch Blog グッドパッチブログ
これからUIデザインを学びたいけど、どこから学ベばいいか分からない。 自分でUIを作ってみたいけど、何を参考にしたらいいか分からない。 デザインツールを何となく使っているため、きちんとマスターしたい。 と悩んだことはありませんか？ Goodpatch Blogでは過去に、様々なデザインを学べるデザインリソースやツールを発信してきました。 そこで今回は過去に紹介した記事も含め、UIデザインを学ベるサービスやプラットフォーム、そしてアウトプットへ繋げるツールをご紹介します！ オンラインビデオ講座：どこでもすぐに新しいことを学べる UIデザインを作るうえで、デザインツールは欠かせませんよね。ツールをより使いこなすために、「ツール 使い方」などで検索をすると、溢れ出る多くの情報に気が滅入ってしまったり、静的な説明文を理解をするのに時間がかかってしまうことはありませんか？そんな時に役立つのがオンライ
フロントのチーム開発効率を最適化するワークフローと SPA 設計 | Nagisaのすゝめ
ちょっと意識高そうなタイトルを付けてしまいましたが、皆さんどのような開発でお過ごしでしょうか。 Nagisa では現在フロントエンドエンジニアは1人です。長きに渡って1人で開発してきましたが、最近は iOS エンジニアやデザイナーも開発に参加することでスピードとクオリティを担保しています。 そこで今回はスキルや役割の違うメンバーで効率よく開発を進める。そしてコードをカオスに落とさず秩序を保つために行ったワークフローの改善や、取り入れたデザインパターンなどを紹介したいと思います。 複数人でチームを組んで開発をするのは、1人のときよりも難しいです。雰囲気で開発を進めていけばコードはカオスに陥り、スピードも品質も担保できなくなります。 他人のソースコードを引き継いだ時や3ヶ月前の自分 (殆ど他人) のコードを改修している時も似たようなことが起こります。 逆に、1人で開発して1人で継続的にメンテし
ReactNativeを既存アプリに組み込むのを断念したメモ - Qiita
弊社のアプリはフルネイティブでswift/kotlinで書いているんだけど、どうしても同じ機能を作るときにまとめて作れないかとモヤモヤする。かといってクロスプラットフォームな開発はcordova/titaniumなどで辛酸を嘗めたのであまりやりたくない・・・ そこでReactNative（以下RN）が流行っいるしどうかなって考えた。 結論 既存のswift/kotlinで書かれたプロジェクトに組み込んで徐々にリプレイスを・・・などと考えたが甘かった。使うにあたって結論として「タイミングが今じゃないな・・・諦めよう」としました。 詳細は以下。 考えたこと 特定の画面をReactNativeで書いて共通化できる？ これは全然できる。 ネイティブからjsをコールする感じ、webview読み込むあの時代の仕組みに近い。 この辺を参考にいただければ。 ざっくりいうと提供されている RCTRootVi
Atomic Design を導入してみた話 - Money Forward Developers Blog
こんにちは。 iOSエンジニアの廣瀬です。 以前から感じていた課題に、デザインデータ・UIコンポーネントの管理 がありました。 その解決策として Atomic Design の考え方を取り入れてみました。 今日は、"（しら）ずにお金が（たま）る"自動貯金アプリ『しらたま』（ https://sirata.ma/ ）の開発時に実施した Atomic Designの導入 について紹介します。 デザインデータ・UIコンポーネントの管理 ここでいう デザインデータ・UIコンポーネント とはデザイナーが使っているツール(Sketch)や、フロントエンドとなるiOSアプリのコードレベル(Swift)の話です。 具体的に管理がうまくいっていない状態とは下記のような状態と言えます。 カラーコードやフォント名がコミュニケーションを取るときに飛び交う アプリ全体で 色 や フォント の使い方にコンセプトが無い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
開発環境で使う Docker / docker-for-development - Speaker Deck
Engadget | Technology News & Reviews