タグ

webdesignに関するp130のブックマーク (165)

  • 2018年に流行しそうな、注目Webデザイントレンド20個を大予想

    あっという間に一年が過ぎ、2017年には多くの革新的なデザインが登場しましたが、2018年はどんな一年になるでしょう。今回は、2018年に注目したいデザイントレンド20個を大予想。たくさんのデザイン事例と一緒にご紹介です。 グラフィックデザインの201年トレンドと比較てみてはいかがでしょう。 https://photoshopvip.net/106130 コンテンツ目次 1. 3Dデザインが人気に。 2. ARデザインの増加 3. 3Dタイポグラフィの増加 4. デジタル・ハンドメイド・アート 5. 鮮やかで発色の良い色やグラデーション 6. 2Dを融合した3Dアニメーション 7. フレキシブルな3Dデザイン 8. よりアーティスティックな写真デザイン 9. モダンなレトロイラストレーション / アニメーション 10. カラーフィルタを使った写真デザイン 11. レスポンシブ・ロゴ 12.

    2018年に流行しそうな、注目Webデザイントレンド20個を大予想
  • Webサイトを使いやすく!UIデザインのCSS小技テクニック21個まとめ(実例サンプルコード付)

    素敵なインターフェースを心がけ、ユーザーエクスペリエンスを格段に改善することができる、UIデザインの重要ポイントを具体的なHTML/CSSのサンプル例と一緒にご紹介します。これらの各ポイントは、もともと@steveschogerがTwitterでツイートした内容となります。 1. アイコンはラベルよりも少しだけ明るくしよう。 文字ラベルの横にアイコンを配置するときは、少しだけ色を明るくしてみましょう。こうすることで、もっとも重要な情報(文字ラベル)をうまく強調することができます。 See the Pen Little UI Details : 小技テクニック01 by PhotoshopVIP (@vipcrew) on CodePen. 2. 明るい背景色では、白文字に少しだけ影を追加しよう。 背景色が明るく、白文字を利用するときは、文字に少しだけ素敵な影を加えることで、より読みやすくな

    Webサイトを使いやすく!UIデザインのCSS小技テクニック21個まとめ(実例サンプルコード付)
  • รูเล็ต ทดลองเล่นรูเล็ต เว็บพนันออนไลน์ อันดับ 1 เครดิตฟรีกดรับเอง

    7 คาสิโนออนไลน์ ชั้นนำที่ดีเยี่ยมที่สุด Ichimaruni-design คาสิโนออนไลน์ ขอชี้แนะ 6 เว็บเดิมพันออนไลน์ชั้นหนึ่ง ที่มีครบทุกสิ่งที่มีความต้องการ ไม่ว่าจะเป็น คาสิโนออนไลน์ บาคาร่าออนไลน์ ไพ่โป๊กเกอร์ออนไลน์ พร้อมรับโปรโปรชันเครดิตฟรีที่แจกให้แบบจุใจ เว็บไซต์ตรงไม่ผ่าเอเย่นต์ เล่นง่าย ได้เครดิตฟรี ๆ ไปเลย UFABET เครดิตฟรี ไม่รับไม่ได้แล้ว กับโปรเด็ด โบนัสปัง UFABET เครดิตฟรี สิ่งดีๆที่เรามีให้เฉพาะสม

    รูเล็ต ทดลองเล่นรูเล็ต เว็บพนันออนไลน์ อันดับ 1 เครดิตฟรีกดรับเอง
  • UIデザインにユーザーストーリーが必要な理由

    Tom Brinton氏はBYUを2012年に卒業した後、CitrusBits、Wallaroo Media、CustodyXChangeでUI/UX設計者として働いてきました。彼は優雅なインターフェースをデザインすることが好きです。 あるデザインチームが、クライアントの新しいアプリのモックアップについて話し合っているとします。すると、アプリがどのようにあるべきかついて、チームメンバーはそれぞれ 違う考えを持っているということが明らかになります。こうなると、ミーティングはすぐに、「何が正しいか」というよりも、「誰が正しいか」という議論になってしまいます。 誰もが自分のデザインを守ろうとしますが、誰もユーザーを守ろうとはしません。ひょっとしてあなたにも思い当たる節がありませんか? このようなときにこそ、ユーザーストーリーを導入する必要があります。 最近では、UI/UXのプロがアジャイル開発で

    UIデザインにユーザーストーリーが必要な理由
  • プロのデザイナーが実践している、最近のWebデザインで見かけるカラーを効果的に使ったテクニックのまとめ

    カラーはあらゆるデザインにおいて、非常に重要な要素の一つです。 プロのデザイナーはWebサイトやアプリで、さまざまなテクニックを用いています。 カラーのコントラスト、類似性、使用比率で、フォーカスポイントを作成したり、階層をつくりだすこともできます。最近のWebデザインで使われているカラーを効果的に用いたテクニックを紹介します。 5 techniques for fine-tuning UX with color 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. カラーの使用比率でフォーカスポイントを作成 02. カラーのコントラストで注意を引きつける 03. カラーを使用してUXのパターンを作成 04. カラーを使用して階層を作成 05. カラーの類似性を使ったテクニック まとめ 01. カラーの使用比率でフォーカスポイ

    プロのデザイナーが実践している、最近のWebデザインで見かけるカラーを効果的に使ったテクニックのまとめ
  • これでもう悩まない!2017年のデザイントレンド完全ガイド

    2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジーファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表!確認しておきたいポイントとは? 2017年のWebデザインはどうなる?

    これでもう悩まない!2017年のデザイントレンド完全ガイド
  • シンプルが一番!ミニマルスタイルのWebサイト基本原則と実践ポイントまとめ

    第二次世界大戦後の芸術的な動きを起源としたミニマルスタイルは、現代のウェブデザインにおいて再び人気となっています。うまく適用することで、ユーザーの作業を簡略化するのに役立ち、より早いページの読み込みやあらゆるスクリーンサイズへの互換性など、ウェブサイトにとって多くのメリットがあります。 ミニマルスタイルはシンプル過ぎるように見えるかもしれませんが、「少ないことは豊かなこと(英: Less is More)」というモットー以外にも検討したいポイントがいくつかあります。今回は、ミニマルスタイルの原則を学びながら、ウェブサイト制作の実践テクニックをまとめてご紹介します。 詳細は以下から。 ミニマルスタイルのウェブサイトとはどんなもの? フラットデザインやヒーローイメージ、ハンバーガーメニューなど現在人気のデザイントレンドの多くは、2000年はじめに始まったミニマルスタイルに影響を受けています。

    シンプルが一番!ミニマルスタイルのWebサイト基本原則と実践ポイントまとめ
  • モバイルオンリー、グリッドの使い方の変化、ボタンに使われるアニメーションなど、Web制作者が備えておきたい現状とトレンドを解説

    モバイルファーストからモバイルオンリーへ、レイアウトのグリッドやローディング時のアニメーション、ボタンに使われるアニメーションも少しずつ変化し、人工知能によるデザインなど、Web業界は着実に進化しています。 Webデザイン、そしてグラフィックデザインで今起きている現状と知っておきたいトレンドを紹介します。 2016年は「モバイルファースト」の年でした。そして、2017年はついに「モバイルオンリー」の声が聞こえてきます。 行き過ぎだと思いますか? 実際のところ、2015年には上位サイトへのすべてのトラフィックが、モバイルで56%を占めていました(2015年 トラフィック レポート)。この割合は上昇し、2016年のデータはまだありませんが、専門家はモバイルのトラフィックが全体の60%を大幅に上回っていると考えています(モバイルのトラフィックは増加し続ける唯一のデバイスです)。 デスクトップユー

    モバイルオンリー、グリッドの使い方の変化、ボタンに使われるアニメーションなど、Web制作者が備えておきたい現状とトレンドを解説
  • Sketchで使える美しいテンプレート・UIキットまとめ(フリー素材)

    Sketch、かなり普及してきましたね。特にアプリ開発ではSketchでのデザインがスタンダードになりつつあります。 今回は、Sketch用のテンプレート・UIキットとして、無料でダウンロードできる素材を紹介します。 クオリティの高い、美しいデザインを集めました。 SketchのUIキット Minimal UI Kit ミニマルなAndroidUIキットです。 ダウンロード Wild_ Full Website Template for Sketch PCサイトのSketchテンプレートです。 ダウンロード Phoenix UI: Vol 1 – for iPhone 6 / Free PSD & Sketch iOS用の12画面がセットになった美しいテンプレートです。 ダウンロード Shop iOS App Freebie – UI & Prototype ショップアプリに最適なiOS

    Sketchで使える美しいテンプレート・UIキットまとめ(フリー素材)
  • コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ

    ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を2分割し、スク

    コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
  • 16種類(45カテゴリ)の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選(スライド付)

    2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今

    16種類(45カテゴリ)の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選(スライド付)
    p130
    p130 2016/08/02
    スマートフォンのUI傾向調べたデータ。ありがたく学習させていただきます。
  • Page Not Found - NxWorld

    Page Not Found Where are you going to fly? You seem to have followed a route that does not exist.

    Page Not Found - NxWorld
  • 優れたUXを実現するための人間中心デザインとは? - UXploration

    当記事は、2015年2月5日に無料動画のオンライン学習サイト - schoo WEB-campus(スクー)にて開催した授業「優れたUXを実現するための人間中心デザインとは?」のフォローアップになります。 当日の授業の内容は schoo の下記ウェブサイトよりご覧いただけます(会員登録が必要です)。 はじめに 当企画は schoo と弊社コンセントとの合同企画で「社会に求められる価値あるデザイナーとは?」というテーマのもと、著者含むコンセントのアートディレクターの佐藤とサービスデザイナーの大崎の3名でそれぞれの立場から1人づつ授業を開催してきました。 デザイン領域の拡張に伴うデザイナーとしての役割とは? 佐藤 通洋 先生 - 無料動画学習|schoo(スクー) サービスデザイン時代のデザイナーのあり方とは? 大崎 優 先生 - 無料動画学習|schoo(スクー) 最終回となる今回は、以下の

    優れたUXを実現するための人間中心デザインとは? - UXploration
  • 京都 山科の美容・ヘアサロン Refuge レフュージ | hair salon refuge(レフュージ)

    TEL:075-203-8129 平日 9:00〜19:00 金曜日12:00〜21:00 日曜・祝日9:00〜18:00 Refuge Information レフュージについて 店内はできるだけ木の素材を使い、 皆様に自宅でゆったりと寛いでいる時のような空間を目指してきました。 特にこだわり抜いた「個室」では、 音と香りに包まれた光の空間で、最高の癒し気分を満喫してみてください。

    京都 山科の美容・ヘアサロン Refuge レフュージ | hair salon refuge(レフュージ)
  • スタイリッシュで使いやすいUI制作の参考になるWebサイト6選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    お疲れさまです、デザイナーのモモコです。 つい先日大雪が降ったと思えば、もう春一番が吹いたと聞いて、時間の流れは早いなとしみじみしています……まだこたつを仕舞いたくない! さて、今回はスタイリッシュで使いやすいUI制作の参考になるサイトを6つご紹介します。 スタイリッシュで使いやすいUI制作の参考になる4つのサイト UYI https://useyourinterface.com/ ※現在はサービスを終了しています。 インタラクティブなUIを集めたtumblrページ。左メニューのArchiveから今まで投稿されたものを一覧で見る事が出来ます。 サムネイルにGIFアニメを使用しており、実際の動きを確認しながら見られるのが良いですね。 UNHEAP https://www.unheap.com/ 綺麗で実用的なUIが作成できるjQueryプラグインを多数紹介しているサイト。 フラットデザインで

    スタイリッシュで使いやすいUI制作の参考になるWebサイト6選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • [CSS]水平型の多階層ナビゲーションのアイテムをさまざまなアニメーションで表示するスタイルシート

    あちこちでお目にかかる水平型の多階層ナビゲーションで、子階層を表示する時のアニメーションのさまざまなバリエーションを紹介します。 通常時の見た目は同じですが、一手間加えてあると「おっ!」ってなりますよね。 Animated Navigation Examples ベースのHTMLは、非常にシンプルです。 HTML ナビゲーションの各アイテムはリストで実装し、nav要素で内包します。 <nav class="nav"> <ul> <li> <a href="#">Nav Item</a> <ul> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> </ul> </li> <li> ... ... </ul> </nav>

  • 余白の取り方が美しい、シンプルで素敵な国内ブログデザイン10 | tipsBear

    シンプルかつ記事が読みやすい素敵な国内ブログデザインを10サイト、主観で紹介させて頂きます。 可愛いデザインのブログをお探しの方はこちらの記事へどうぞ。 ブログのデザインって作ってみると思っているよりバランスをとるのが難しくて苦戦します。 下記のサイトは記事内に画像が無くテキストオンリーでも余白の取り方が美しくて読みやすかったり、装飾の使い方が絶妙だったりと、ブログのデザインを作る上でとても参考になりますので是非目を通してください。 アインシュタインの電話番号 の目次のようなトップページは一覧性が高くて見やすく、記事内も余白がしっかりとられていて読みやすいです。アクセスの度に変わる配色は統一感があってとても綺麗。

    余白の取り方が美しい、シンプルで素敵な国内ブログデザイン10 | tipsBear
  • Julian Lloyd

    In this article, we will go over some of the unique and challenging situations that players may find themselves in when trying to bluff their opponents. Covered are the right spots to bluff, types of bluffs, and our targets for bluffing. Breaking down each situation and having a plan for each action your opponent may […]

  • Style Guide Boilerplate

    WHY If you're like me, you find yourself using common design components from one website to the next. You could grab the lastest and greatest framework and use that to handle these common components, or you could roll your own framework. Style Guide Boilerplate is geared for people interested in creating their own "tiny Bootstraps". Style Guides: Promote consistency Promote modular thinking Add cl

  • この秋、デザインやファッションに使いたい10色 -2013年秋のトレンドカラー

    暑いのが苦手なので、秋がくるのが待ち遠しいのですが、身の回りなどにちょっと秋のエッセンスを加えてみたいなという秋のムードを表現した素敵なカラーをPANTONEから紹介します。 Pantone Fashion Color Report Fall 2013 Pantoneがセレクトしたこの秋を楽しむ素敵なカラーは、10色。 今回は各色の紹介とともに、Pantoneのデザイナーがオススメする組み合わせたいカラーも加えてみました。 まずは、2013年のトレンドカラーでもあるエメラルドから。 ※各カラーのリンク先は各カラーのアートワークとデザイナーの紹介ページです。