個人的UIデザインの情報源まとめ
どうも。 最近エンジニアからデザイナーになったものです。 最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。 ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。 OSガイドライン OSのデザインガイドラインはUIデザイナーだったら必ず読んでますよね。 Material Design デザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅されていて参考になるし、金と手間隙かかってるなあと思います。 Blogもあり、更新頻度は高くないですが面白い記事が多いのでたまに読んでいます。 Human Interface Guidelines こちらはApple
デザインシステムの作り方徹底ガイド 参考にしたい導入事例まとめ
この記事では、デザインシステムを作成するときの基本ガイドをまとめています。 この記事は3つのパートで構成されています。 デザインシステムを理解する（デザインシステムとは何か、いつ作るべきか？） デザインシステムの作成（作成プロセスとやっておきたい項目） デザインシステムの具体的なサンプル例（デザイナーとデベロッパー、それぞれの観点より） デザインシステム追加の検討事項（その他のコンセプトや参考文献など） *この記事では、Webサイトやアプリ、オンラインサービスなどを表す包括的な用語として、「プロダクト（Product）」という言葉を使用しています。 この記事のコンセプトをイラスト化するために作成した、デザインシステムを公開しています。ご自由にお使いください。 Basic Design System – Figmaファイル デザインシステムを理解しよう デザインシステムとは？ デザインシステ
画面をデザインするということ - Qiita
この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている１エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 （実際にUX５段階モデルを意識して仕事してるわけではありませんが、何かしら
UIの細かい動きについて
イージングなしとあり 画像ではイージングがわかりやすいようにグラフを入れてあります。 横が時間、縦がスケール、点がキーが打たれていることを表しています。 UIごとのイージング UI素材ごとにどのような緩急の付け方が良いのか迷うかと思います。 ダイアログアニメーション以外に、画面遷移時のUIの動きやクエスト開始演出など様々なアニメーションを入れるたびにどのイージングが正解なのか、それについては正解はありません。 ゲームの色味やデザイン、世界観を知らずにアニメーションは付けられません。 また、UIがどこまで世界観を踏襲するのかで、システムのような動きにするのか、世界観に合わせた動きにするのかも変わってきます。 こういった部分は関係部署にコミュニケーションをとってどんなゲームを作りたいのかを把握し、イージングはどうするのかを考えていきます。 そして、予備動作やオーバーシュートが必要なのか不要なの
UI Stencils - Templates & Stencils for UX Designers / Developers
Drawing Stencils, Pads and Accessiories for Designers & Developers.
iPhoneのように横スライドするメニューのjQueryプラグイン - サイトロイド開発ブログ
みなさんこんにちは。サイトロイド開発担当の石本です。 最近、職場でのスマートフォン率が急激に高くなってきました。この記事を読んでいる方も結構な割合でiPhoneやandroidをお持ちなのではないでしょうか？Webサイト制作者の方はスマートフォン用のサイトを作って欲しいなどの要望が増えているのではないでしょうか？ 実は、サイトロイドでは近日中にスマートフォン用のサイト表示に対応します。単に縮小表示するだけでなくスマートフォンに合わせたレイアウトとUIになってますのでご期待ください。 今回スマートフォン用のUIを実現するにあたり、横にスライドするメニューを導入しました。オープンソースとして公開しますのでよろしければダウンロードしてご利用ください。 ダウンロード こちらから行えます。（jQuery.slideMenu） 使い方 1.jQuery本体とプラグインをインクルード 以下の記述をして、
Yetii - Yet (E)Another JavaScript Tab Interface Implementation | kminek.pl
Yetii stands for Yet (E)Another JavaScript Tab Interface Implementation. There are plenty of DHTML tabs scripts out there but most of them are either poorly coded, library/framework dependend or bloated with unnecessary functionality. So I`ve decided to come up with this simple, yet functional tab interface implementation. Features extremely lightweight, object-oriented code gracefull degradation
jQueryで実現するナビゲーション11選「11 Useful jQuery Tab Navigation Solutions」
TOP > WebDesign > jQueryで実現するナビゲーション11選「11 Useful jQuery Tab Navigation Solutions」 静的なWEBページにクリエイティブな動きや仕組みを実装してくれるjQuery。その機能性と手軽さで世界的に使われているライブラリですが、今日はそのjQueryを使ったナビゲーションを集めたエントリー「11 Useful jQuery Tab Navigation Solutions」を紹介したいと思います。 11 Useful jQuery Tab Navigation Solutions タブメニューからフューチャーリスト、スライダーを上手く使ったメールフォーム等、様々なクリエイティブなナビゲーションが紹介されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Fe
Dribbble - Show and tell for designers
Get inspired by the work of millions of top-rated designers & agencies around the world.
15 Useful Project Management Tools — Smashing Magazine
Below are 15 useful project management applications, almost all of which are targeted directly at web developers, designers (both web and graphic) and other creative types. The last one is not geared specifically at creative types, but is the most unique project management application I’ve found, and was included on that basis as well as its potential usefulness for designers and developers. There
Flash不要！JavaScriptで派手なWebデザイン
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を
Lovely Charts
Whether you are looking for flowcharts, sitemaps, business processes, organization charts, wireframes or other diagrams to use on your website, we can help! Visualization is a powerful medium of communication. What can be expressed in thousands of words can be easily conveyed through one image or diagram. Diagrams are pictorial or graphical presentation of information. They can be used for a pleth
[JS]jQueryのプラグイン33+1選 -2008年6月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 iPod-style Drilldown Menu iPod風に切替わるドリルダウンメニュー。 iPhone Lock Slider
オモロ動画検索 サグールテレビ（sagool.tv）
ズンバ（Zumba）で2017年に人気の高かった曲のランキングです。各地のレッスンでの使用状況やズンバ愛好家のみなさまのご意見などをもとに、編集部が独断で選定させていただきました。ユーチューブ（Youtube）の動画とともに紹介します。 【2022年】のランキングはこちら→ 【2021年】のランキングはこちら→ 【2020年】のランキングはこちら→ 【2019年】のランキングはこちら→ 【2018年】のランキングはこちら→ 【2017年】のランキング↓ 【2016年】のランキングはこちら→ 【2015年】のランキングはこちら→ 【2014年】のランキングはこちら→ 【2013年】のランキングはこちら→ 【2012年】のランキングはこちら→ 【2011年】のランキングはこちら→ 【2010年】のランキングはこちら→ Tweet １位：「ファイヤーハウス」（Firehouse） 曲名
あのサイトのAjax、Javascriptを実装するための方法60選『60 More AJAX- and Javascript Solutions For Professional Coding』 – creamu
DiaryTechnology あのサイトのAjax、Javascriptを実装するための方法60選『60 More AJAX- and Javascript Solutions For Professional Coding』 あのかっこいいサイトのAjaxを取り入れたい。 そんなあなたにおすすめなのが、『60 More AJAX- and Javascript Solutions For Professional Coding』。あのサイトのAjax、Javascriptを実装するための方法60選だ。 ↑はCoda Popup Bubbles。 クールなポップアップメッセージが表示される。 » iCarousel carouselを作るためのオープンソース（フリー）Javascript » Product Slider スライダーで商品を選択できるインターフェース » Oversize
Highslide JS - JavaScript thumbnail viewer
What is Highslide JS? Highslide JS is an image, media and gallery viewer written in JavaScript. These are some of its advantages: Tip! Use the visual Highslide Editor to set up your Highslide installation without writing code. Quick and elegant looking. No plugins like Flash or Java required. Popup blockers are no problem. The content opens within the active browser window. Single click. After ope
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザイン
ユーザーインターフェイスデザインの参考になるサイト集
IDEA * IDEA
artViper Marketingagentur