Drawing Stencils, Pads and Accessiories for Designers & Developers.
UI Stencils - Templates & Stencils for UX Designers / Developers
Drawing Stencils, Pads and Accessiories for Designers & Developers.
必要な物は紙とペンだけ！ペーパープロトタイピングのススメ
まずは紙。家にあるチラシの裏の白い部分でも可能なのですが、方眼のものが製図しやすいです。お気に入りのノートを使ってみてください。後述するプロトタイプ制作ツールのMarvelから、無料のプロトタイピング用紙（PDF）が配布されているので、こちらを使ってみてもいいですね。 基本的にどんなペンでも構わないのですが、太いペン、細いペン、薄い色（灰色）のマーカーの3種類あれば文句なしです。マーカーはなんやかんやコピックが使いやすいのかなーと思います。 その他 紙とペンだけでOKですが、よく使うアイコンが手軽に描けるUI Stencilsという定規兼ステンシルがあると便利です。iPhone用ステンシルだけではなく、様々な種類が用意されているので、興味のある方はUI StencilsのWebサイトを覗いてみてくださいね。 ペーパープロトタイプの描き方 1. ざっくりとしたレイアウト組み まずは画面をレイ
UIデザインが捗る！Prottでスマホサイトのプロトタイプを作成しよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。LIGでデザイナーをしています、マチルダです。 最近、前職でお世話になったデザイナーの先輩から「アラサーは品が命」という格言をいただいたので、全体的に生き方を見直そうと思っています。 今後とも末永くよろしくお願いいたします。 数年前から、スマートフォンサイト制作のお仕事が多くなりました。 そんなこんなで、「スマートフォンでの使いやすさ」とはなんぞや？を考える日々を送っているのですが、使いやすさって、実際に使ってみないとわからない…でも、自分で実装する技術も時間もない…！ 今回はそんなデザイナーさんでも簡単で素早くプロトタイプを作成できるツール「Prott（プロット）」の使い方をご紹介したいと思います。 ※今回は分かりやすいよう、LIGのスマートフォンサイトをサンプルにして作成手順をご説明いたします。 「Prott（プロット）」とは？ Prott（プロット）はUIデザインで有名
[CSS]ブラウザの表示領域いっぱいにボーダーを配置するスタイルシートのテクニックいろいろ
Simplified page borders in pure CSS デモページ（当方作成） [ad#ad-2] 下記に、元記事で紹介されている方法（その1）をはじめ、コメントに掲載されている方法を含めて紹介します。 対応ブラウザは基本的に:before, :after疑似要素を使用するため、IE 8+, Firefox, Chrome, Safari, Operaとなります。 ブラウザの表示領域いっぱいにボーダーを配置する方法：その1 元記事で紹介されている方法です。 デモページ：その1（当方作成） HTML HTMLは、divなど特別な要素は配置しません。 以下に紹介する全ての方法で共通です。 <html> <body> </body> </html> /*------------------------------------*\ BORDERS \*---------------
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
国内外のデザイナーによる美しいポートフォリオサイト11選
この記事では、デザイナーやクリエイターの美しいUIのポートフォリオサイトを10サイト紹介します。ユニークで美しいポートフォリオサイトは、UIデザインに詰まった時や自分のポートフォリオサイトを作る時の参考になります。 １. Jason Benjaminさん モーション・ビジュアルデザイナーのJason Benjaminさんのポートフォリオサイトです。EvernoteのUIデザイナーもされていたとのことですが、サイトの方も直感的に過去の作品を閲覧することができます。 ２. Adrian Zumbrunnenさん GoogleのUX/UIデザイナーであるAdrian Zumbrunnenさんの個人サイトです。今流行りのチャットボットのような対話型UIで、一言ずつ表示される吹き出しはあたかも本人に話しかけられているようなデザインになっています。システム的に導入するには敷居が高そうなものの、対話型と
クリックした要素を全画面に広げて、ページ遷移せずに新たな要素を表示する「cta.js」 | NAKAZI LAB.（ナカジラボ）
「cta.js」はある要素をクリックするとその要素が全画面に広がり、ページを遷移せずに新たな要素を全画面で表示することができます。 サイトのメニューを表示したり、コンテンツが少ないサイトのアバウトページ代わりに使えそうです。 デモページ JavaScript (function($){ $(function() { var closeFn; function closeShowingModal() { var showingModal = document.querySelector('.modal.show'); if (!showingModal) return; showingModal.classList.remove('show'); document.body.classList.remove('disable-mouse'); if (closeFn) { closeFn()
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホゲーがなんたるかを理解するためにスマホでゲームやった話 - S_Shimotori’s diary
I/O 3000