The UI & UX Tips Collection: Volume One. | Marc Andrew
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
Skeuomorphism is making a comeback - DESK Magazine
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
SINAP | 参考にしたいデザインシステムまとめ 10選
こんにちは。デザイナー飯山です。 シナップ社内では毎月チーム発表を行っているのですが、先日のデザインチームではいま注目の「デザインシステム」をテーマに社内発表を行いました。 そこで今回は、調査したデザインシステム事例の中からピックアップしてご紹介します。 デザインシステムとはデザインシステムは、組織でデザインを運用していくために存在しています。具体的には、UIキット、スタイルガイド、パターンライブラリ、Voice & Tone（どのように使用するべきかを示すガイダンス）、ブランドガイドラインなどで構成されています。 デザインの一貫性保持やチームでの共有を目的として、クオリティの高いデザインを効率的に進めるために活用される「唯一の指針」や、組織全体におけるデザインの「共通言語」となるものを指します。 複数人のデザイナーでデザインを進める大規模プロジェクトの制作現場などでとくに注目されています
デザインを共有するための言語化の取り組み - Speaker Deck
#html5j #html5j_e Webやアプリを世に出すにはエンジニアの力が欠かせませんが、競争が激しくユーザーの要望も高まっている現在、デザインは大きな差別化に繋がります。 同じモノ作りをする職業ですが、課題解決の取り組み方から評価の仕方まで違いがあります。その違いが誤解に繋がることもあれば、「よく分からない」と遠ざけてしまうことになります。お互いの力を合わせることでより良いプロダクトが生まれるはずですが、機会を失うことになります。趣向・感覚が違うという単純な話で片付けることはできません。 本セッションでは、エンジニアとデザイナーが協働していくためのアプローチと「相手に何かを伝える」というコミュニケーションの仕方を紹介します。
言語化と価値観、そして悩み｜Hiroki Tani
僕の今の仕事というのは、デザイナーと（フロントエンド）エンジニアの間の立ち位置でいろんなことをしている。その重要な仕事のひとつが、このセッションの主題のようなデザインの言語化への取り組みをリードするということ。 具体的にやっていることの一つをあげると、例えばスライドにあるような、あるUIコンポーネントのことを何と呼ぶか、またコンポーネントの粒度についての話し合いの場を設けるようなことをする。はじめから原則と呼べるようなものがあればいいが、なかなかはじめから立てるのは難しく、各々の考え方・価値観というのをすり合わすため、ほぼ毎日に話し合いを時間をとって進めていたりする。 はじめはデザイナーが起こすデザインカンプ、といっても完全なものではなくある程度整ったSketchデータを確認しながらインベントリとしてUIコンポーネントを抽出する。そのコレクションからパターンやルールとして考えうることをデザ
Meet “Design Systems”, A New Smashing Book — Smashing Magazine
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
Building Flexible Design Systems
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
noteの会社に転職したデザイナーの話。｜sawa / swn.jp
こんにちは、piece of cakeデザイナーの沢登（@sawamemo）です。 前回のエントリではjoinする前でしたが、1月の頭から入社しプロジェクトに参加しています。（今ちょうど入社して1ヶ月ですね） この1ヶ月間どんなことをしていたのかザッと書き出してみようと思います。 課題の可視化弊社ではgithubのissueで課題管理しています。 noteカイゼン目安箱で頂いたご意見・フィードバックやバグの情報、などなどを全て集約して管理しています。 ただ、この方法の問題として --- ・少人数のチームでは良いが、大人数になった時にissue数がさらにカオスになる ・あとからjoinしたメンバーは過去の経緯をissueレベルで探さないとならず、これまでの経緯の学習コストが高すぎる ・今、誰が何をしていてどれくらいのリソースがあるのかがパッと見でわかりづらい ・重要な課題が埋もれ気味になり、
宣言ブロックのCSS設計 - kojika17
日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用
18F: Digital service delivery | Building a large-scale design system: How we created a design system for the U.S. government
Official websites use .gov A .gov website belongs to an official government organization in the United States. Secure .gov websites use HTTPS A lock ( A locked padlock ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites. Today, there are nearly 30,000 U.S federal websites with almost no consistency between them. Between the
The modern web design process: creating sitemaps and wireframes | Webflow Blog
Hillary Pitts’ web design sitemap example breaks down an ecommerce site into its most basic building blocks.Have you ever looked out of an airplane window and seen the outline of a brand-new subdivision taking shape below? It’s kind of like a sitemap: a footprint signaling where structures need to be built, as seen from 30,000 feet. A sitemap provides a diagram of the site’s hierarchy and shows wh
Responsive Logo Design Guide for Designers & Brands (2023)
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
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
Designing grids | Zell Liew
(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
Hamburger menu alternatives for mobile navigation
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ページを開く
Design engineer
Root - Website Wireframe and Design Starter Kit
Designing design systems
http://twitter.com/i/moments/880688233641848832