タグ

designに関するefclのブックマーク (367)

  • Pixate

    Saying farewell to Pixate. When we launched Pixate, our mission was to change the way mobile apps were prototyped. We joined Google just over a year ago to continue our mission, and to pursue a broader vision of changing the way products were designed and built. While a lot of the ideas we’ve been developing could work inside the Pixate framework, we believe we can have a larger impact if we move

    Pixate
    efcl
    efcl 2013/02/11
    デザインのプロトタイピングツール
  • iOSのデザインをするときに利用しているツールいろいろ | ナナメウエblog

    こんにちは、いつかiOSのデザインのみでべていきたい鈴木(@suzukisan__)です。 まだまだ若輩ですがiOSのデザイン環境について紹介させて頂きます。 画面設計 iPhone Idea Sheet あまり紙でやることはないのですが、使う場合はこちらのiPhone Idea Sheetです。 うちではむしろエンジニアさんのほうが使っています。 三階ラボ | iPhone Idea Sheet ver.01 あまりに使いやすいのでiPhone5用にiPhone5 Idea Sheetなるものをうちで作成しました。 iPhone5のワイヤーフレームに使えるアイデアシートをイラレで作りました | ナナメウエblog POP 来は紙に書いたワイヤーフレームから画面設計をイメージするためのものだと思いますが、普通にデザインだけしてコーディング前の画像を取り込んで画面推移を説明す

    efcl
    efcl 2013/02/07
    iOSアプリデザインツール
  • ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&有料まとめサイト - 酒と泪とRubyとRailsと

    ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&有料まとめサイト Jan 28th, 2013 Tweet Twitter Bootstrapはデザインが苦手なプログラマのための必須ツールです。今回は、一味違ったBootstrapサイトを作るときにきっと参考になるテンプレートをまとめてみました! 無料のテンプレート 無料のBootstrapテンプレートの紹介です。BootswachのようにCSSだけで適用できるものと、HTML/CSS/JSなどいろいろ追加しないと実現できないものがありますが、Bootstrapを使ったサイトを作るときには参考になると思います! Bootswatch このテンプレートネタを扱う上で、まず第一に語るべきなのが鉄板の「Bootwatch」です。 ちなみに、BootwatchをRailsで使う手順を「RailsにMetroライクなBoots

    efcl
    efcl 2013/01/29
    Bootstarapテンプレ
  • LayerVault IP Vault

    First from the vault: psd_native, our PSD.rb native C extension. Check out PSD.rb on GitHub and then contact us for more information.

    efcl
    efcl 2013/01/28
    デザイナー向けバージョン管理サービス
  • Alertbox: 軌跡は“F”を描く(2006年4月17日)

    アイトラッキング調査の結果から、多くの場合、ユーザーは“F”の文字 -- 横に二、縦に一の軌跡 -- を描くようにWebページを読むことが分かった。 F-Shaped Pattern For Reading Web Content by Jakob Nielsen on April 17, 2006 fast のF。あなたが用意した貴重なコンテンツは、こうして読まれている。瞬く間に、ユーザーの視線はウェブサイト上の文章を駆け抜ける。それは、学校で習った文章の読み方とはまったく違うものだ。 232名のユーザーに協力いただいて、数千に及ぶウェブページのアイトラッキング調査を実施した。ウェブページの読み方には、サイトの内容やタスクには関係なく、かなり一貫性があることが分かった。その顕著な読み方とは、アルファベットの“F”を描くようなもので、以下に挙げる3つの要素で構成される。 ユーザーの視線

    Alertbox: 軌跡は“F”を描く(2006年4月17日)
    efcl
    efcl 2013/01/10
    アイトラッキングで分かりやすいサイトはF字型を描く
  • AngularStrap

    About the project AngularStrap is a set of native directives that enables seamless integration of Bootstrap#^3.0 into your AngularJS#^1.2 application. With no external dependency except the Bootstrap CSS styles, AngularStrap is light and fast. It has been built from the ground up to leverage ngAnimate! AngularStrap is tested against the latest patch release of the 1.2, 1.3 and 1.4 branches. Quick

    efcl
    efcl 2013/01/07
    AngularJSにTwitter Bootstrapを統合する感じで使えるようにするライブラリ
  • Bootswatch

    Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.2 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.

    efcl
    efcl 2013/01/05
    Twitter Bootstrap のテーマ集
  • AIAD(アイアド)は、ファッションマーケティングのプロ集団です

    メディアは、手段にすぎない。 実行力のないコンサルティングは、無意味だ。 私たちAIADは、違います。 どこまでも課題ファーストで考える。 1978年の創業から鍛えぬいたファッション思考で、 ソリューションを導きだす。 ひとつひとつの課題に、統合化されたソリューションを。 クライアントの声にまっすぐ向き合う。 課題の先へ、さらに先へ。深く潜り、ビジョンを捉える。 そして浮上しながら、他にはないアクションを起こしていきます。 それは、才気あふれるクリエイターの広告かもしれない。 流通システムの改善かもしれない。 最先端のデジタルプロモーションかもしれない。 人材育成という一歩踏みこんだ提案かもしれない。 データは完璧ではない。だからこそ、持ちうる限りの知恵や感性を注ぐ。 すべては、ブランドの未来につながるビジネスモデルのために。 ファッションの未来を構築する。それが、私たちの使命です。

    AIAD(アイアド)は、ファッションマーケティングのプロ集団です
    efcl
    efcl 2012/12/08
    圧縮前のJavaScriptがあって便利
  • 第一回プログラマ向けデザイン勉強会を開催しました - satococoa's blog

    10/27(土)に 第一回プログラマ向けデザイン勉強会 を開催しました。 この勉強会は毎月やっている デザイナー向けプログラム部 (P4D) の逆バージョンで、デザイナさんにプログラマがデザインを教わるという趣旨で開催しました。 そして講師役として、いつもP4Dの方でもお世話になっている @machida さん、@ken_c_lo さん、@saucerjp さんの3人にお願いしました。 もっともこの3人をはじめ、P4Dに参加されているデザイナさんは普通にJSやFlash、ObjCなんか書いていたりして単にデザイナと呼んでいいのかどうかは怪しいところですが。 RailsエンジニアのためのTwitter Bootstrapカスタマイズ例 まずは@machidaさんのTwitter Bootstrapのカスタマイズ例の話からでした。 このテーマはP4D参加のプログラマからしきりにリクエストの

    efcl
    efcl 2012/11/01
    デザインについてのスライド
  • これぞレスポンシブ確認ツールの決定版!OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer

    ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。 Viewport resizer Viewport resizerの特徴 Viewport resizerの使い方 Viewport resizerの高度な使い方 Viewport resizerの特徴 Viewport resizerはブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも即時にツールを起動して、表示しているウェブサイトをあらゆるサイズに変更して確認できます。 フルカスタマイズが可能。 その場でサイズ変更してのカスタマイズも可能。 1クリックでスマフォやタブレットの縦・横向きを変更できます。 Media Queriesをサポート。 Metaのviewportタグを適合させます。 ページのリロ

    efcl
    efcl 2012/10/26
    レスポンシブの確認とかに使える感じのブックマークレット
  • ResponsiveIframes.js

    Responsive IFrames Turn Your Complex IFrames into Responsive Goodness NPR-style. Demos Download Extend/Fork The What and Why IFrames are commonly used to allow embedding of third-party content. Many popular services, such as YouTube and Facebook, make extensive use of IFrames in their embeddable widgets. On a responsive website, all page components must be responsive. There are multiple ways of ma

    efcl
    efcl 2012/09/22
    iFrame要素をResponsiveにするためのjQuery plugin
  • 管理画面のデザインに困ったらThemeForestを参考にする | 高橋文樹.com | デザイン

    この投稿は 11年半 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 困ったときのThemeForest情報です。プログラマかデザインの苦手なフロントエンドデベロッパ向け。前置き長めです。 プログラマを悩ませる管理画面 昨今のWebサイトではPHPなどのサーバサイドスクリプトとデータベースを組み合せることが多いのですが、その際管理画面というものを作ることがあります。 よくあるパターンとしては、CMSや業務管理アプリみたいなものを管理画面として作り、そこで作成/入力したデータを一般客向けのWebサイトとして表示するというパターンです。 問題1: 管理画面はデザイン予算がかけられない で、この管理画面なのですが、「デザインについて予算が割かれることがほとんどないわりに細かい注文がゴチャゴチャくる」ことが多いです。中の人はしょっちゅう触っていると何

    管理画面のデザインに困ったらThemeForestを参考にする | 高橋文樹.com | デザイン
    efcl
    efcl 2012/08/30
    デザインの参考に有料テンプレートのプレビューを参考にする手法
  • Avgrund - A modal UI concept

    A modal concept which aims to give a sense of depth between the page and modal layers. Click the button below to give it a try. Open modal Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of it, not intended for any practical use. Avgrund is Swedish for abyss. Created by Hakim El Hattab @hakimel — http://hakim.se

    efcl
    efcl 2012/08/22
    表示してる画面を少し奥において、モーダルビューをわかりやすくするUI
  • サイト制作時のメモ 2012年前半

    ここ最近でサイトを作ったときに思ったことのメモです。 個人的なサイトを昨年末と今年の7月に1つずつ、それ以外でやったのが春に1つ(結局なかったことにされたけど)、今やってるのが1つ。 昨年末のは一応レスポンシブウェブデザイン、7月のと春のは普通のソリッドレイアウト、今やってるのがスマートフォンサイト。 昨年末に作ったものについてははてなダイアリーの方でも書いたし、内容は被るけど改めて。 全般「HTML5 Boilerplate」は丸ごとというより必要な部分だけ抜き出して使うと便利。 「これは要らないかなー」という部分を探すのにはコード読まないといけないので、それだけでも結構勉強になると思う。 単純なサイトなら頑張って画像作らなくてもなんとかなったりする。 (対象がいわゆるモダンブラウザの場合) Sass 3.2から使えるPlaceholder Selectorは凝ったことしなくても普通に便

    サイト制作時のメモ 2012年前半
    efcl
    efcl 2012/08/19
    Graceful Degradation、多言語対応(アジア系)、Android/iOSのモバイル対応について注意点や参考サイトなどについて
  • Easel

    Easel is an in-browser, high-fidelity web design tool aimed at designers and developers on small teams.Design For the Web Easel is an in-browser, high-fidelity web design tool that lets you mockup, share and implement your ideas with ease. Design Design accurately with built-in web fonts and true-to-browser rendering. Start quickly by importing your existing styles with our chrome extension. Share

    efcl
    efcl 2012/08/08
    Webデザインのモック的な感じ コラボレーションツール
  • デザイン・アート系の本が手に入る書店集 – creamu

    デザイン・アート系のが手に入る書店をまとめておきます。 代官山にある蔦屋書店。スタバが併設されていて、コーヒーを飲みながらを選ぶことができます。とてもいい空間 limArtが代々木villageにオープンしたPOST。出版社をフィーチャーして時期ごとにがセレクトされています 恵比寿にあるlimArt。アートイベントなども開催されています 先日ローンチしたオンライン古書店、nostos books。デザイン、アート、写真、文学、エッセイなどの古が扱われています。ソートの動きがスムーズで使いやすいサイト 代官山にあったhacknet。残念ながら2011年5月8日にクローズしてしまいましたが、オンラインに注力しているようです。代官山店は片山正通さんによるインテリアデザインで、とてもいい場所でした

    efcl
    efcl 2012/07/19
    デザイン系の書店
  • Responsive Design Weekly Archive

    Bytes: The Best JavaScript NewsletterStaying informed on the JavaScript ecosystem has never been so entertaining. Delivered every Monday and Thursday, for free.Get Bytes

    Responsive Design Weekly Archive
    efcl
    efcl 2012/07/17
    Responsive Web DesignについてのWeeklyメールマガジン
  • Dialogs - WHATWG Wiki

    Problem statement There's no markup or API for dialog boxes, tool palettes, hovering tooltips, the contents of popup widgets, and the like. Real world examples today Registration Dialogs http://www.reddit.com/ - make sure to be logged out if you have an account, and click the register link <img src=http://junkyard.damowmow.com/477> http://digg.com/ - make sure to be logged out if you have an accou

    efcl
    efcl 2012/07/15
    ダイアログデザイン
  • [デザイナー向けGit解説] エンジニアと同じブランチで作業する日 | uniq-style

    前々回のGit解説の続き。 Gitでは色んな作業の仕方があります。 デザイナーとエンジニアの間でよくある作業の流れをイメージ描きつつ説明してみようかと。 今回は「エンジニアとデザイナーが同じブランチで作業する」です。 まず朝出社! 今日は検索ページを作るお仕事をすることになりました。 このイメージにそって説明してみます。 [イメージ内:P-1] エンジニアがみんなの場所(remoteとか呼ばれてるところ)から最新の「master」ブランチを持ってきて… そこから「search」というブランチを作りました。 [イメージ内:P-2] エンジニアは「search」というブランチで、検索フォームのあるページを作成しました。 デザインはまだ入ってません。 [イメージ内:P-3] エンジニアは「git push」というコマンドで みんなの場所remoteに「search」ブランチを置

    efcl
    efcl 2012/06/27
    デザイナーとgitで共同作業
  • The 29 Best WordPress Plugins For Just About Any Site [2024]

    Some things just instantly make other things better. Three examples: Ketchup, french fries.Coffee, mornings.Plugins, WordPress. Now there may be people living on the fringes of society and decency that would deny the first two. But no one would claim WordPress is better without plugins. No one. Sure, they may say there are bad plugins to avoid if you don’t want your site to crash irreparably. And

    The 29 Best WordPress Plugins For Just About Any Site [2024]
    efcl
    efcl 2012/06/23
    Responsive Web Designについての記事紹介などを行うメールマガジン