Creating beautiful, but also practical UIs takes time, with a lengthy amount of design revisions along the way. I know. I’ve been there before. But what I’ve discovered over the years is that by making just a few simple, and quick adjustments to your designs you can improve the end-result massively. In this article I’ve put together a collection of my popular UI & UX tips from the past 12 months t
I've said it many times over the last few years. But today with even more certainty, I'll say it again: skeuomorphism is coming back. For the reader who isn't deep into the design industry’s nonsensical terms, a quick summary: Skeuomorphism is a term used in UI design to describe interface objects that mimic their real-world counterparts, complete with hyperrealistic shading and depth. A well-know
こんにちは。デザイナー飯山です。 シナップ社内では毎月チーム発表を行っているのですが、先日のデザインチームではいま注目の「デザインシステム」をテーマに社内発表を行いました。 そこで今回は、調査したデザインシステム事例の中からピックアップしてご紹介します。 デザインシステムとはデザインシステムは、組織でデザインを運用していくために存在しています。具体的には、UIキット、スタイルガイド、パターンライブラリ、Voice & Tone（どのように使用するべきかを示すガイダンス）、ブランドガイドラインなどで構成されています。 デザインの一貫性保持やチームでの共有を目的として、クオリティの高いデザインを効率的に進めるために活用される「唯一の指針」や、組織全体におけるデザインの「共通言語」となるものを指します。 複数人のデザイナーでデザインを進める大規模プロジェクトの制作現場などでとくに注目されています
僕の今の仕事というのは、デザイナーと（フロントエンド）エンジニアの間の立ち位置でいろんなことをしている。その重要な仕事のひとつが、このセッションの主題のようなデザインの言語化への取り組みをリードするということ。 具体的にやっていることの一つをあげると、例えばスライドにあるような、あるUIコンポーネントのことを何と呼ぶか、またコンポーネントの粒度についての話し合いの場を設けるようなことをする。はじめから原則と呼べるようなものがあればいいが、なかなかはじめから立てるのは難しく、各々の考え方・価値観というのをすり合わすため、ほぼ毎日に話し合いを時間をとって進めていたりする。 はじめはデザイナーが起こすデザインカンプ、といっても完全なものではなくある程度整ったSketchデータを確認しながらインベントリとしてUIコンポーネントを抽出する。そのコレクションからパターンやルールとして考えうることをデザ
Why The Book?Many of us have started to approach design in a more modular way recently. It’s just more manageable this way. We experiment with pattern libraries and style guides and almighty design systems, yet while some of us succeed, most of us fail. Our systems get out-of-date too quickly or just don’t get enough traction in our companies. It’s about time to fix it. That’s why we’ve teamed up
こんにちは、piece of cakeデザイナーの沢登（@sawamemo）です。 前回のエントリではjoinする前でしたが、1月の頭から入社しプロジェクトに参加しています。（今ちょうど入社して1ヶ月ですね） この1ヶ月間どんなことをしていたのかザッと書き出してみようと思います。 課題の可視化弊社ではgithubのissueで課題管理しています。 noteカイゼン目安箱で頂いたご意見・フィードバックやバグの情報、などなどを全て集約して管理しています。 ただ、この方法の問題として --- ・少人数のチームでは良いが、大人数になった時にissue数がさらにカオスになる ・あとからjoinしたメンバーは過去の経緯をissueレベルで探さないとならず、これまでの経緯の学習コストが高すぎる ・今、誰が何をしていてどれくらいのリソースがあるのかがパッと見でわかりづらい ・重要な課題が埋もれ気味になり、
日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用
An official website of the United States government Here’s how you know The .gov means it’s official. Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site. The site is secure. The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted sec
We independently research, test, review, and recommend the best products—learn more about our process. If you buy something through our links, we may earn a commission. In a chaotic time of brands revamping their logos, minimalism on the rise, responsive logo design is the new sexy and designers are lead on by the mantra of “less is more”, we can only wonder; what is the design world coming to? No
CSS Niteの「Shift10:Webデザイン行く年来る年」のデザイントレンドセッションがたった今終わりました。 「坂本の目」の部分で「画像解像度再考」ということでお話させていただきましたが、若干時間が足りないはずなので、ブログで補足しておこうと思います。 海外サイトは解像度が高くてもきちんと見える 今回、デザイントレンドで多くのサイトを見ていて気づいたのは、多くの海外サイトがフルHD(1920x1080ピクセル)以上の解像度の端末で見てもきちんと見えるように作ってあり、それに対して国内のサイトの多くは解像度の高い端末で見ると、文字が小さく読めないというものでした(比べるのがそもそも無理があるのは承知しております)。 実寸で見ていただいた方がわかりやすすいのですが、この画像でも幅1920pxで見た場合と幅1366pxで見た場合では、スケール感も全然違って、高解像度では文字も相当小さく感
The typographic scale is the bedrock of modern typography, used for centuries to choose harmonious font sizes. But there are flaws in those historical values. This is the classic typographic scale, as recorded by Mr. Bringhurst in The Elements of Typographic Style: The classic typographic scale is a collection of font sizes that are in visual harmony. A typographer chooses sizes from a typographic
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/designing-grids. We hope to fix this soon!). I'd be telling you the obvious if I said that grids are important in web design. You already knew that. You probably have even coded a few grids with frameworks like Foundation or B
If you’re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.) Luckily, more and more sites and apps are experimenting with alternative, more efficient solutions for th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
