10 cheat codes for designing User Interfaces
I’d probably assume that most of us started in UI design with the littlest knowledge or nothing at all. But even though the odds were against us at the start, we managed our way through numerous design books and articles to understand how colors, typography, layout, etc work. I remember how it is established in us at Make Technology, a UX-driven company, that Design can’t be simply explained by co
Atomic DesignからみたBootstrap｜Yoko Nishida
はじめまして。UIデザイナーの@nikoko45です。 最近Webサービスのデザインガイドラインを作っていて、特にコンポーネントをどうまとめたら良いのか模索中です。ユーザーには一貫したUIや世界観を提供でき、開発者にはもっと効率的に作業スピードをあげられる方法はないか考えてみました。 デザインガイドラインで目指したいこと 一貫性のあるデザインを維持するために、デザインファイルのテンプレート作成、コミュニケーションやレビューのコストを少しでも減らすことがゴールなのかなと思っています。（参考：一貫したデザインのためにデザインシステムを運用する方法） 色々記事を読み漁った結果、どうやらデザインガイドラインとしてコンポーネントを整理するにはAtomic Designが役立ちそうということで調べてみました。 Atomic DesignAtomic Designとは インターフェースに含まれる要素を、
CI&UIリニューアルしながらデザインシステムを作った話｜Yoko Nishida
「コデアル」という求人サービスのデザインシステムを作ってみました。CIリニューアルに伴う全スタイル＆コンポーネントの刷新、エンジニア＆デザイナー間の協業、そして約3ヶ月運用してみた感想をつづってみます。 実際に使っているドキュメント、Sketchファイルはこちら↓ ・Codeal Design Guideline ・Codeal UI Kit.sketch ・Sketch Tips for Codeal Design Guideline Codeal Design Guidelineの中身はこんな感じ。 1. デザインシステムとは組織やサービスの形態によって解釈は分かれると思いますが、私はデザインシステム＝ブランド、設計、開発をつなげるガイドラインだと認識しています（引用：結局デザインシステムは何なのか） スタイルガイドやテンプレートだけではなく、それらをチームでどう活用するかを言語化して
Sketchでデザインしながらガイドラインを作ろう｜Chizuru Kamisono
はじめまして。UIデザイナーのカミソルです。 わたしはOHAKO.incの受託事業の部署でサービスの体験設計からUIデザインをしています。 今回はSketchのSymbol機能を使って、デザインしながら効率よくガイドラインを作る方法について書きたいと思います！ ※この記事はSketch Advent Calendar 2017 19日目の記事です。 なぜデザインしながらガイドライン化したいのかガイドラインを作る目的は2つあります。 1. エンジニアとの連携のため "カラーの種類"、"テキストスタイルの種類"、"画像として書き出すもの"、"コンポーネント"の4つがはっきり伝わるSketchデータにしたい。 2. デザイン運用のため デザインを運用をするとき、誰でも追加や変更がしやすいようにしたい。「デザインしながら」とつけた理由は、デザインしていたら自然にガイドラインが出来ていた。という
Why Sketch / Sketch Tokyo 2019
https://sketchtokyo.studio.design
Why Your App Looks Better in Sketch
Spot The DifferenceCan you spot the differences between these two images? If you look hard enough, you might notice a few subtle differences: The image on the right: Has a larger shadow.Has a darker gradient.Has the word “in” on the top line of the paragraph.The image on the left is a screenshot from Sketch, and the image on the right is a reproduction on iOS. These differences arise when the grap
Framer Xはプロトタイピングツールを超えていく – なかじー – Medium
プロトタイピングツールとして知られてきたFramerが、8/1より、全く新しいタイプの後継プロダクトをβリリース中です。 その名もFramer X。 つい数時間前にBeta2バージョンがリリースされ、その全貌が明らかになりつつあります。 手元にβ版が手に入ったので、使い心地をレポートしていきます。 ざっくり旧版と新版の違いを要約すると、下の３点になります。 Framer（旧版） ① コードタブ（≒Atom）、デザインタブ（≒Sketch）の２つでそれぞれレイアウトとインタラクションを構築していく ② CoffeeScriptベース ③ MVBアーキテクチャが人によってごちゃごちゃで、再利用がしづらい Framer X（新版） ① xcodeのStoryBoardのようなデザインツールがベースにあり、そこで作成したコンポーネントにスクリプトを付け加えていく（≒Unity） ② TypeScr
複数のデザイナーで Sketch ファイルを共同編集・バージョン管理するための「Abstract.app」ワイワイやっていき - DeNA Design
複数のデザイナーで Sketch ファイルを 共同編集・バージョン管理するための 「Abstract.app」ワイワイやっていき#Sketch#CVS#Abstract Abstract というツールを使うと同じ Sketch ファイルを同時刻に別の人が作業・編集→後ほど合体といったワークフローで、共同デザイン作業が行えます。 ブランチやマージといった概念で、「Git」のような作業が Sketch ファイルで行うことができます。複数人デザイナーがいるチームにはとてもオススメのツールになります。差分確認・レビューも行えるので、まさにデザイン版 GitHub ですね。 お一人様利用で導入してもログが残るので良いかも。(でもそれは使える環境であれば TimeMachine で十分な気がする。) Push / Fetch / Status / ラベリング の作業が自動で行われているのもポイントで、
Atomic design system with Sketch libraries
Being in a startup with a couple of designers, we were working on different products and never had to cross each other’s path! But soon our products started looking different! Be it internal dashboards or client facing mobile applications, most of our designs were framework dependent to match our fast-paced product development. We soon realised the need to unify our products. The only way to do th
デザインのバージョン管理をGitHubでしてみたら修正点が3秒で分かるようになった話 - Money Forward Developers Blog
こんにちは。デザイナーの大橋です。 今日は、私が担当している “（しら）ずにお金が（たま）る”自動貯金アプリ『しらたま』 で導入してました、デザインのバージョン管理の話を紹介します。 デザインのバージョン管理といえば、AbstractやKactusがありますが、今回はあえてGit Sketch Pluginを試してみました。 デザインデータをGitHubで管理しようと思ったキッカケ 私以外のチームメンバーがみんなエンジニアだから、間違いなくGitHubに寄せたほうが効率いいんじゃないか。 新しいツールを導入すると、プロジェクトに関する情報が分散してしまいがちで、エンジニアも招待したり登録してもらったりしなきゃいけないのかなという印象。※あくまで印象です。 Kactusはプライベートレポジトリが有料。 こんな感じでなんかファイルが増えてく。。。(忙しいと放置しがちでよくない。。 GitHub
Nested Symbols & Auto-Updating Styleguides | Jan Losert - Store
Nested Symbols & Auto-Updating StyleguidesLet me present the smartest template and your future starting point for every User Interfaces in Sketch. Stop wasting your time by crafting the same design systems and elements from scratch over and over and over again - and let the magic of this template’s nested symbols begin!
You’re Burning Budget on Design: An Argument for Modular Design
I recently wrote an article about how to make your designs as modular as your code. As I explained in the article, Atomic Design is an incredible way to create designs that can be replicated and communicated easily, across your team. Along with increasing your ability to communicate within your team, modular design also makes changing styles across your design incredibly simple. Done properly, mod
AEUX
Real layers Build visual design layers in After Effects as editable as possible with shape and text layers. Images will be exported and built as files when needed –even from Figma in the browser. Grouping/Ungrouping In Ae, a layer exists either in the current comp or somewhere else –which is very different from the grouping in most design apps. It is now possible to group and ungroup precomped lay
Unleashing The Full Potential Of Symbols In Sketch — Smashing Magazine
Javier Cuello started using Sketch a few years ago, as a replacement for his favorite design software back then, Fireworks, which had been discontinued by Adobe — leaving a whole generation of designers broken-hearted. In this article, Javier will outline how to make use of symbols in Sketch in order to unleash their full potential, going from the most basic situations to some more advanced use ca
Belajar Bahasa Inggeris Online 2022 (Kelas English 1-to-1)
Kalau anda teringin nak fasih English, boleh belajar Bahasa Inggeris online dengan kami. Kelas dijalankan menggunakan Zoom / Google Meet. Kelas Bahasa Inggeris Online Ini Khas Untuk Orang Dewasa Yang Faham English, Tapi Bila Speaking: Ayat Berterabur, Grammar Hancur Dalam proses nak fluent English, kenapa mesti malu? Kami di JomEnglish Academy faham, anda nak sangat cakap smooth dan rasa confident
Hacking the Button in Sketch
tl;dr: There are working Sketch files for you at the bottom of the article. Go ahead and use it! Make sure you have Sketch v46 or above. I love Sketch. Coming from the old days of Photoshop, Fireworks it truly has transformed the way I and many other designers work. I was very excited about the recent updates from Sketch, which included nested symbols, symbol overrides, and resizing options. All t
Must-Have Sketch Templates for New UX Designers - Freebie Supply
Here’s a list of Sketch templates for anyone who’s just getting started with UX design. I hope you’ll find them useful and that they improve your workflow. Responsive Grids Bootstrap 4 Grid A useful Bootstrap 4 grid template by Jeremy Elder. Responsive Grid for Sketch Responsive grid for web, tablet and mobile by Tomas Skarba User Flows User Flow Diagram Template Create with ease beautiful diagram
This is, without a doubt, the coolest Sketch technique you’ll see all day.
When Sketch launched resizing rules in Sketch 39, it was such a game changer that I wanted to bake a cake with the Sketch logo on it just so I could present it back to myself. So it goes without saying that when symbol overrides came around in Sketch 41, they had me yodeling out of pure jubilation and ecstasy. It was a pretty big deal. After much trial-and-error, I’ve created some of the most flex
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Design System based on the 8pt Grid
GitHub - usagimaru/Sketch-AppleSystemFont-Plugin: A Sketch plugin for applying Apple system font to text layers. (For Japanese designers.)
