タグ

DesignとWebDevに関するnoonworksのブックマーク (14)

  • Wixのテンプレートに学ぶソフトモーションなどのデザイントレンド

    あなたはフラットデザインが好きかもしれませんが、美しく魅力的なWebサイトを作るにはさらに良い方法があります。それは、ソフトモーションです。この方法は、ユーザーを一瞬で夢中にさせることができます。 数年前、フラットデザインがWebデザインにおける一番のトレンドになる以前のことです。私たちは腹を立てていました。なぜなら、その当時のWebサイトは見た目は似通ったものばかりで、どれもパッとしないものだったからです。もちろんその責任はデザイナーの私たちにありましたし、今もあり続けています。 その後、もう一度デザインで遊び始めたWebデザイナーが現れました。余白やグラデーション、マイクロインタラクション、モーションなどを求め続けるデザイナーもいました。私たちは、再び可能性を見つけたのです。 フラットデザインの問題点は、ミニマリズムの哲学に起因します。ミニマリズムは包括的に徹底されるべきです。実際、フ

    Wixのテンプレートに学ぶソフトモーションなどのデザイントレンド
  • イージング関数チートシート

    イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを(例えばペンのような)放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。

    イージング関数チートシート
  • もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita

    HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか? モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日語、文字詰めできないかな?ほら、このカタカナとかキモい。。」 「Webで文字詰めだと?無理なんだよあきらめな!」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで

    もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
    noonworks
    noonworks 2017/11/21
    これWebデザイナの仕事じゃないの……?
  • Beautiful Free Images | Unsplash

    The internet’s source for visuals.Powered by creators everywhere.

    Beautiful Free Images | Unsplash
  • フリー素材、無料画像の検索サイトNo.1【タダピク】

    NEW 2022.04.05無料サイト「Blank Phostock」を追加しました。 2021.08.27無料サイト「写真素材のおすそわけ」と「キュンカッツ」を追加しました。 2019.02.25無料サイト「fotoma」を追加しました。 2018.05.23無料サイト「フリー素材ドットコム」の情報を更新しました。 2018.02.21無料サイト「unDraw」、「motionelements」の2サイトを追加しました。 2017.09.08フリーイラスト素材サイト「ありさちゃんがいく!!」を追加しました。 2017.08.01無料サイト「イラスタ」、「じぃばぁ」の2サイトを追加しました。 2017.04.18無料サイト「ダ鳥獣ギ画」、有料サイト「ForYourImages」の2サイトを追加しました。 2017.03.29無料サイト「イラストお助け部」、「スキマナース」、有料サイト「Sn

  • Strikingly - あなただけのウェブサイトを制作するための、最高のウェブビルダー

    数分でウェブサイトを制作する ブランドを確立。世界を制覇。 コードはなし 、デザインのスキルも必要ありません。

    Strikingly - あなただけのウェブサイトを制作するための、最高のウェブビルダー
  • 素晴らしいアプリデザインの秘訣は、「マイクロインタラクション」にこそある - BRIDGE(ブリッジ)テクノロジー&スタートアップ情報

    Nick Babichさんによる寄稿記事です。ソフトウェアエンジニアテクノロジーの熱狂的な支持者。UI/UXに夢中。ソフトウェア開発、マネージメント、生産性などなどについて執筆している。Twitter アカウントは、@101babich。記事は、Mediumへの投稿記事を許可を得て翻訳したものです。元の英語記事もどうぞ。 私たちが日々の生活の中で体験するマイクロインタラクションの例 最高のプロダクトは、2つのことで秀でている:機能とディティール(細部)だ。機能によって人はプロダクトに魅力を感じ、ディティールによって、それを使い続ける。このディティールこそ、特定のアプリが競合から抜きん出る理由だと言える。 マイクロインタラクションは、ユーザーに対して快適なフィードバックを返すために有効なテクニックのひとつだ。 あらゆる道は、人間中心設計のデザインアプローチへと続いている。そこで最優先され

    素晴らしいアプリデザインの秘訣は、「マイクロインタラクション」にこそある - BRIDGE(ブリッジ)テクノロジー&スタートアップ情報
  • 日本のウェブデザインはなぜこんなにも世界と違うのか? - BRIDGE(ブリッジ)テクノロジー&スタートアップ情報

    記事は、ブログ『RANDOMWIRE』の運営者の許可を得て、翻訳しています(元記事)。 静寂が満ちる禅庭園、美しい神社、静穏な寺、洗練された茶道。日の伝統建築、現代建築、書籍、雑誌は世界中のデザイナーの羨望の的だ。 だが、どうしてか、こうした巧みな技術はデジタルプロダクトには生かされていないようだ。特にそれが顕著なのは、ウェブサイトだ。その多くが、1998年のスタイルから変化していないように見える。 例1:楽天市場 有名な日のサイトの多くを見てみると、次のような傾向が見られる。(例えば、 Yahoo Japan、楽天、ニコニコ、JR東日、読売新聞…) 隙間なく敷き詰められている文字 小さく、画質の悪い画像 数えきれないほどのカラム 色同士の調和に欠ける派手な色使い、きらきら光るバナー Flashのような、過剰に使用される時代遅れのテクノロジー 美しい俳句、質素なわび・さびとはかけ離

    日本のウェブデザインはなぜこんなにも世界と違うのか? - BRIDGE(ブリッジ)テクノロジー&スタートアップ情報
  • 「コード汚くてもデザインが見えればいいじゃん」への返答

    なぜコードが綺麗じゃないといけないの?という質問をごく一部の方、特にデザイナーさんから受けることがあるので(半分くらいの人はネタで言ってますが)、自分なりの意見をまとめたいと思う。勉強不足で浅い感あるので、偉い人にご指摘いただけると嬉しいです。 「コード汚くてもデザインが見えればいいじゃん」の定義について 「コード汚くてもデザインが見えればいいじゃん」はかなりふわっとした印象を持つので、ここでは「コードが汚い」の定義として、以下の2つを挙げる。 メンテナンス性に欠ける (W3Cの)仕様に沿っていない なので「コード汚くてもデザインが見えればいいじゃん」というのを「メンテナンス性に欠け、仕様に沿っていなくても、デザインが見えていればいいじゃん」という意味に置き換えて話を進める。 確かに表面的な視点で見ると、エンドユーザーには関係がなさそうに見えるかもしれない。 例えばメンテナンス性の高いコー

    noonworks
    noonworks 2014/07/10
    車のデザイナーが見た目だけでなく仕組みや性能を考慮するのと同様に、WebデザイナーはWeb技術を考慮して当然だしそれが仕事なのでは……
  • デザインの基礎力をワンランクアップしたい私(Webデザイナー)の注意書き

    Webデザインは、紙の上のデザインと違うところも多いと思います。でも同じデザインですから、歴史ある DTP デザインから学ぶことはいっぱいあります。デザインの基礎の基礎、レイアウトについて、デザインするときに気をつけたい基礎の部分の注意書きです。 毎日インターネットを見ていると、素敵なデザインの Webサイトに出会います。ときにはひと目惚れしちゃうようなこともあります。そんなデザインにあったとき、どうして素敵なのかなーと考えるのも勉強のうち。そう思って素敵なデザインはストックしておいて、自分なりにそのデザインが素敵な理由を考えてたりします。 デザインの理由 どうしてそういうデザインをしたのか … デザインには理由があります。気まぐれに色を選んだり、要素を配置したりしないからです。なので自分のデザインの理由、どうしてそういう風にしたのかということを、口で説明できないとダメだと言われます。もち

  • シニア層のためのWebサイトユーザビリティ

    2013年3月23日 ユーザビリティ 以前「笑っていいとも!」の山口智充さんのコーナーを見ていて、ちょっと驚いた事があります。20代~60代の女性の必需品をランキングしたもので、40, 50代女性では5位圏外だった「パソコン」が60代で3位にランクイン。シニア層のインターネット利用率は年々高まってきているのはニュース等で読んでいましたが、これを見てなんだか実感しました。という事で今回はシニア層のWebサイト設計について考えてみたいと思います! ↑私が10年以上利用している会計ソフト! 上記「笑っていいとも!」の件で興味を持った私は、シニア層のインターネット利用方法なんぞを調べていたところ、丁度私の母親が「インターネットで買い物がしたい」と言ってきました。彼女は海外に住む私と連絡をとるためにメールやSkype等を使う事ができるので、ある程度インターネットについて理解しているのだと思っていまし

    シニア層のためのWebサイトユーザビリティ
  • ネットで見られる提案書のまとめ | Webデザインのタネ

    一定期間更新がないため広告を表示しています

    ネットで見られる提案書のまとめ | Webデザインのタネ
  • 伝えるための情報デザイン、文章デザイン

    私たちは人に何かを伝えたいときに、言葉・絵・音・映像などを駆使して表現します。標識のようにひとつの形式でユニバーサルに伝わることもありますが、そうはいかないことがしばしばあります。このサイトでよく取り上げている「デザイン」「マーケティング」といった言葉は、広く使われている言葉ですが、人によって解釈や使い方が違うことがあります。そこで、切り口や伝え方を変えることで少しでも多くの方に興味をもっていただくよう工夫しています。 文章のペースや表現を変える技法を「修辞 (Rhetoric)」 と呼びます。この言葉にピンと来ない方はいらっしゃると思いますが。Wikipediaに書かれている技法の例をみると、耳にしたことがある言葉がたくさん出てきます。擬人法、反語、省略法、直喩法・・・これらをまとめて「修辞」といいます。 情報は大事ですが、その情報をどのように伝えたら効果があるのかを意識しなければ伝わる

    伝えるための情報デザイン、文章デザイン
  • 商用利用OK&無料の写真・フリー素材を集めました!総合素材サイト|ソザイング

    商用利用OK&無料の写真・フリー素材を集めました!総合素材サイト|ソザイング 申し訳ございません現在メンテナンス中です。 またのちほどごアクセスください。

    商用利用OK&無料の写真・フリー素材を集めました!総合素材サイト|ソザイング
  • 1