PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 | スペースマーケットブログ
PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 デザイナーの横井です。こんにちは！ 猫飼いなのですが猫に顔をうずめるのが難しい季節になってまいりました（毛まみれ） 久しぶりのデザイン記事となりましたが、今日は弊社デザインチームが行ったAtomic Designのシステム化の紹介と失敗体験、そしてその道のりを、赤裸々にご紹介しちゃいたいと思います。 既に完成したデザインのコンポーネント化に悩んでいる方々の参考に、少しでもなれば幸いです。 初期のスペースマーケットデザイン ゴリゴリのPhotoshopデザインだった時代 弊社のメインサービスである、スペースマーケットのデザインは約3年前にリニューアルリリースされました。 当時は全てPhotoshopでデザインされ、１ページにつき１ファイル、スマートフォンもPCも別フ
Adobe XDとSketchで飲食店のサイトを作る【後編】
やっとムスリム向け日本食レストラン”HALAL SAKURA”様のWebサイトを公開しました。 いやー感無量ですね！東京のクライアントを相手に大阪から初めてフルリモートで全ての工程を終えることができました。 おめでとうございます！ そして前編に引き続き、Webサイトの制作工程を余すことなくレポートします。 Adobe XDとSketchで飲食店のサイトを作る【前編】ではワイヤーフレームはAdobe XDで作り、デザインはSketchで作るWebサイトの制作フローを紹介しました。 後編の今回はデザインを形にしていくコーディングについて詳しく書いていこうと思います。 今回の実装はどれもJqueryを使えば汎用的に使えるギミックなので、マークアップ初心者でも簡単に取り込んでいくことができます。 喜んでもらうにはアニメーションも含めてデザインする アニメーションを使うことはリッチにカッコよく見せる
Adobe XDとSketchで飲食店のサイトを作る【前編】
フロントエンドデザイナーの平尾誠です。 日暮里にあるイスラム系のムスリムの方のためのレストラン”HALAL SAKURA”のホームページ制作をさせていただくこととなりました。 そこでディレクション・デザイン・実装を僕一人で完結するこのプロジェクトを、前編と後編の二部作に分けて記事にします。 この記事はこんな人に向けて書いています 受託のWeb制作の進め方が知れます。 身につけたい技術 このプロジェクトを通して、僕が身につけたいスキルは主に二つです。 ・Adobe XDで何ができるかを知り、今後のフローに組み込んでいく ・初めてSketchを使ってデザインし、Photoshop脱却を計る デザインや実装をスムーズに行うためには、クライアントとのスムーズなコミュニケーションが不可欠です。そしてたくさんの差し戻し・変更を避けるためには、情報の共有がキモになります。そこでAdobeXdを使い、サイ
正式版となったAdobe XDとSketchを機能比較。これから習得するならどっち？
左側にオブジェクトの作成・操作とレイヤー、中央にスクリーンの表示、右側にオブジェクトのプロパティが表示されています。Adobe製品のUIは基本的に左側にオブジェクトの作成などのパネルが置かれているので、それを踏襲した形となります。ところどころSketchに似ていますが、Adobe製品に慣れた人向けに設計されているように感じました。 コンポーネントの共通化 Sketchは先日のバージョンアップでライブラリという機能を実装しました。これまでもコンポーネントを再利用できる「シンボル」という機能がありましたが、このシンボルを外部ファイルとして読み込んで、ファイルをまたいでコンポーネントの再利用ができるようになりました。 対してAdobe XDにもアセットという機能があります。アセットではカラー・文字スタイル・シンボルが管理できるようになっています。 Sketchはシンボルを入れ子状にすることができ
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
デザイナーとエンジニア間のコミュニケーションコストを下げる試み - Wantedly Engineer Blog
デザイナーの宇佐美 @Ui_Pb です。 速習会とは 2015年10月1日に、 Wantedly のオフィスにてSketch速習会を開催しました！ 実は、過去にも何度か社外の方を数名招待する形で速習会を行っております。 なぜ数名のみ紹介する形をとっているかというと、以前から定期的に行っていた社内勉強会に社外の人も数名招待しよう！という流れから速習会を定期開催するようになったからです。そのため、社外の方々だけでなく社内のエンジニアやデザイナーも毎回参加しています。 過去に行った速習会 JSONScheme速習会 きれいなCSS速習会 UML速習会 データ解析ツール速習会 TreasuData/DOMO編 Docker速習会 今回やったこと 今回の速習会では、Sketchファイルの基本的な編集方法とSketchファイルを貰った時に意識して見て欲しいポイントを伝えることを目的に行いました。 Wa
【Sketch3入門】最近注目されているsketch3を使ってみました。 | DevelopersIO
皆様、こんばんは清田です。 最近、勉強会等で耳にするようになってきたsketch3をプロジェクト内使用してみる機会があったのでご紹介します。 iOSエンジニア・UI/UXデザイナー勉強会のセッションでも紹介されたり、いろいろな企業でも採用され始めているとのことです。 実際 sketch3 の存在を知ってはいたのですが、実際に案件内で使用してみて結構いい感じでした！ sketch3とは sketch3公式サイト sketch3はオランダののアムステルダムのBohemian Coding社が開発しているとのこと 現在はMac専用のツールみたいです、Window版をリリースしなさそうな予感。。。 価格は8月29日現在で¥7,800円で、App Storeから購入ができます。 たまに半額セールをしている時があるみたいなので、そのタイミングが狙いめですね。 また無料で14日間使えるのフリートライアル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
THE GUILD勉強会『Atomic Design & Sketch』