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はシンボルを入れ子状にすることができ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
