Building (And Re-Building) the Airbnb Design System | Maja Wichrowska & Tae Kim
When building a design system, many implicit choices are made in a component’s architecture that can end up crushing the dreams of a productivity-boosting frontend utility and turning a shared component library into a vessel for friction, factions, and forking. Join us as we take you through the journey of Airbnb’s experience creating an effective, widely-adopted design system and the decisions an
クックパッドデザイナーが語る、新規サービス開発を加速させるためにやったこと––技術を使ってエンジニアをサポートする
2019年2月27日、恵比寿ガーデンプレイスザ・ガーデンホールにて、「Cookpad TechConf 2019」が開催されました。Cookpadのエンジニアやデザイナーがどのようにサービス開発に取り組んでいるのか、またその過程で得た技術的知見について公開します。プレゼンテーション「新規サービス開発を加速させる技術とデザイン 」に登壇したのは、クックパッド株式会社Komerco事業部デザイナーの藤井謙士朗氏。講演資料はこちら 新規サービス開発を加速させる技術とデザイン 藤井謙士朗氏（以下、藤井）：それでは、「新規サービス開発を加速させる技術とデザイン」というタイトルで発表させていただきます。よろしくお願いします。 軽く自己紹介させてください。 クックパッドの藤井といいます。Komerco事業部でデザイナーを担当しておりまして、2017年に新卒で入社しました。だいたい社会人2年目が終わ
これだけ守れば見やすくなるデザインの基礎
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co
動的デザインガイドラインのつくり方
Inside Frontend #2 / 動的デザインガイドラインのつくり方 / Masanari Hamada @nairirou / #InsideFE
チームごとに色づいたピクシブのStorybook運用 - pixiv inside
こんにちは、pixivでUX/UIエンジニアをやっている@do7beです。今回はピクシブ株式会社の各チームで採用しているStorybookの運用体制についてご紹介したいと思います。 Storybookについて StorybookはUIのカタログようなツールで、コンポーネントの一覧表示や、デザインの保証や動作検証に役立ちます。 このStorybookを採用することが、割れ窓に対する解答なのではないかとこの頃は思っています。Storybookの詳細な説明については他のアドベントカレンダーなどの記事にまとまっていますので割愛して、今回は社内でのStorybookの運用についてお話したいと思います。 チームごとの特色が出る運用体制 まだ導入してから日は浅いですが、pixivだけでなくピクシブ株式会社の様々なサービスでStorybookを採用しています。Storyの設計、コンポーネントの分割、担保し
Atomic Designとの
上手な付き合い方 / better-relationship-between-atomic-design - Speaker Deck
Atomic Designとの 上手な付き合い方 / better-relationship-between-atomic-design
Vueを用いた開発プロジェクト用に「コンポーネント設計・実装ガイドライン」を作った話 - Qiita
はじめに こんにちは、モチベーションクラウドの開発にフリーのエンジニアとして参画している@HayatoKamonoです。 この記事は、「モチベーションクラウド Advent Calendar 2018」8日目の記事となります。 概要 モチベーションクラウドの開発チームでは2018年10月から改善期間と称して、開発に関するガイドラインやルール作りをはじめとする、様々な改善活動に取り組んでいます。 その改善活動の一環として作成した「コンポーネント設計・実装ガイドライン」を今回は説明を交えながらご紹介して行きたいと思います。 目次 Componentの粒度に関して Container ComponentとPresentational Component コンポーネントの共通化に関して コンポーネント実装時の細かな決め事 CSSに関して まとめ Componentの粒度に関して これまではフロント
Atomic Designを採用したWeb開発におけるistyleの現状と課題 導入の経緯から効果まで - ログミーTech
Atomic Designを採用したWeb開発におけるistyleの現状と課題 導入の経緯から効果まで istyleにおけるAtomic Design利用の現状と課題 2018年10月18日、Roppongi Designersが主催するイベント「Designer X Engineer Development #01」が開催されました。デザイナーとエンジニアでどのように開発を進めていくか。デザインをプロダクトに落とし込むプロセスについて、どのような設計方法・ツール・コミュニケーションを行なっているかを共有する勉強会。今回は、5社のエンジニア・デザイナーが集い、自社における協同の現状を紹介します。プレゼンテーション「istyleにおけるAtomic Design利用の現状と課題」に登場したのは、株式会社アイスタイルの高田孝平氏、細江佳菜美氏、竹内美帆氏の3名。同社における新規の開発でAtom
デザインを共有するための言語化の取り組み - Speaker Deck
#html5j #html5j_e Webやアプリを世に出すにはエンジニアの力が欠かせませんが、競争が激しくユーザーの要望も高まっている現在、デザインは大きな差別化に繋がります。 同じモノ作りをする職業ですが、課題解決の取り組み方から評価の仕方まで違いがあります。その違いが誤解に繋がることもあれば、「よく分からない」と遠ざけてしまうことになります。お互いの力を合わせることでより良いプロダクトが生まれるはずですが、機会を失うことになります。趣向・感覚が違うという単純な話で片付けることはできません。 本セッションでは、エンジニアとデザイナーが協働していくためのアプローチと「相手に何かを伝える」というコミュニケーションの仕方を紹介します。
Documenting Design Workflows – Livefront – Medium
How to write a project README that boosts your design team’s cohesion and productivity. Documentation can be a sticky subject among designers. Some of us will tell you we should all be doing more of it while others strongly question its value, both justifiably. What usually dominates the conversation, though, is either handoff documentation like style guides and redlines, or discovery documentatio
VueFes.pdf - Speaker Deck
ίϯϙʔωϯτϕʔεͷར σβΠϯઢ σβΠϯͷϧʔϧ͕໌֬Խ͠ ଐਓੑʹΑΒͳ͍σβΠϯ͕ՄೳʹͳΔ ΧϥʔελΠϧͳͲʹઆ໌จΛॻ͘ͱ ϧʔϧΛकΓͳ͕ΒσβΠϯ͍͢͠ ࠶ར༻͍ͨ͢͠ΊɺσβΠϯ͕ݮΒͤΔ ݟͨͷʮσβΠϯʯͰͳ͘ɺ ϧʔϧͱͯ͠ͷʮσβΠϯʯΛ ͭ͘Δͱ͍͏ҙ͕ࣝࣗવͱժੜ͑Δ Ұ෦͢ͱͯ͢Δ ίϛϡχέʔγϣϯίετ͕ݮΔ ਖ਼͍͠σβΠϯʹ͍ͭͯͷڞ௨ཧղΛ࣋ͪ ͍͢ શମͷ౷ҰײɺҰ؏ੑΛҡ͍࣋͢͠ ΤϯδχΞઢ ΤϯδχΞͰ͍ܰσβΠϯͰ͖ΔΑ͏ʹͳΓ ͦ͏ XD, Sketchͷ࡞ΓࠐΈ࠷ऴՌʹ ͳΒͳ͍͜ͱ͕ٯઆతͳར scoped cssͰBEMֶशίετ͕աࢿʹͳͬͨ StorybookΛར༻ͯ͠ ݟͨͷ֬ೝ͕Ͱ͖Δ σβΠϯͷஈ֊͔Β࠶ར༻ੑΛߟ͑ͨUIઃܭΛ͢ Δ͜ͱͰɺ CSSͳͲ࣮ͷ߹͕ࣗ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ehya: Landing Page Design Template | Designspace
User Inyerface - A worst-practice UI experiment
For Sale Domain: prevue.io
zeroheight
GitHub - fontplus/web-typography-glossary: Webタイポグラフィの基礎知識と実践
Haiku for Teams | What collaboration can be
InHouseDesigners Advent Calendar 2018 - Adventar
Uxtools.co | 2018 Design Tools Survey Results
デザイナー・エンジニアの
コンポーネント分類基準と
その理想郷 - Speaker Deck
