PLAID 複数のコンテンツを重ねた全体のレイアウトも面白いですが、それぞれにちょっとしたスクロールのエフェクトが組み込まれているのも楽しい演出です。 各コンテンツの左上のメニューが地味に便利。 Nedd よくある普通のフラットなスタイルに見えますが、各コンテンツをクリックするとダイナミックなエフェクトがかっこいいです。1ページなのに、コンテンツがたくさんある不思議なサイト。
PLAID 複数のコンテンツを重ねた全体のレイアウトも面白いですが、それぞれにちょっとしたスクロールのエフェクトが組み込まれているのも楽しい演出です。 各コンテンツの左上のメニューが地味に便利。 Nedd よくある普通のフラットなスタイルに見えますが、各コンテンツをクリックするとダイナミックなエフェクトがかっこいいです。1ページなのに、コンテンツがたくさんある不思議なサイト。
ここで意識してほしいのは、Webデザイン以外のデザインを見るということ。 グラフィックや映像・パッケージ・プロダクト・建築など様々な年鑑が毎年出版されているので、普段見ないデザイン分野やその年のデザイントレンドを一気に見ることができます。 ただ、デザイン書は基本的に高価格のものが多いので、まずは図書館などでチェックすることをオススメします。気に入れば購入し、財産として持っておくと良いでしょう。 …少し脱線するかもしれませんが、こちらのコピー年鑑も面白いですよ。 3.自分の限界を超える もう限界きてるよ…という方に試してもらいたい方法。 それは、制限時間を設けてデザインをスケッチブックに描き出してみることです。 例えば3分間でスケッチブックに何個のアイデアを描き出せるか、一度やってみてください。 さて、いくつアイデアが出てくるでしょうか。 最初は1つや2つくらいしかアイデアが出てこなくても、
今年のお盆は9連休の方も多いのではないでしょうか... / おすすめスライド デザイン編 / Webデザインのウソ・ホント ~ Web らしく...他...全21件 今年のお盆は9連休の方も多いのではないでしょうか? お休み中に時間を持て余すようでしたら、過去にご紹介したスライドを読み直してみませんか?きっと新たな発見があるはず。 そんなスライドを厳選してまとめました。まずはデザイン編から。
Illustratorを覚えようと緩めにがんばるブログです。ただいま新アドレスhttp://suzukimemo.com/への移行中です。
フラットが最初にきた時ほど大きな波ではないと思いますが、単調なフラットなデザインのアクセントにつかえそうなじわじわきてる新しいデザイントレンド「long shadow design」を紹介します。 long shadow design 「long shadow design」は文字通り「長いシャドウを使ったデザイン」で、フラットなスタイルに奥行きを与えることができます。 dribbbleなどのアイコン作品でも最近よく見かけますね。
こんにちは。梅雨入りしたのかしてないのか曖昧な天気が続きますが、体調は崩してませんか?比較的嫌われやすい時期ではありますが、私は雨は好きなほうです。「小夜時雨」「涙雨」「白雨」等、雨を含んだ日本語は美しいですよね。 さて、先週は明朝体とゴシック体について書きましたが、今週は和文書体と欧文書体について書こうと思います。 フォントには日本語の漢字、ひらがな、カタカナで構成された「和文書体」と、アルファベットで構成された「欧文書体」があります。二つの書体は、文字の形状の違いから文字のフォーマットも違います。 それぞれのフォーマットから、文字間隔の詰め方について考えてみましょう。 和文書体のフォーマット 和文書体は【仮想ボディ】という正方形のフォーマット内で文字が収まるようにデザインされています。実際は仮想ボディの枠いっぱいではなく、ひとまわり小さい枠(字面枠)の中に文字が作られます。 仮想ボディ
資料の出来栄えを大きく左右する「色」。資料を作り込むほどのめり込み、抜け出せなくなってしまう。何が正解か分からず、全く抜け出せない泥沼。 「もうちょっと青みを…」「いや、赤みが強すぎるから、彩度を落として…」「この色の組み合わせはないなぁ。何色を差し色にしよう…」 色は無限大。限りある知識と経験だけでは、なかなか正解の配色を手に入れられないことでしょう。 そんな時に私が役立てている、配色に関するお話しを致します。 カラーパレットは自作しない そもそも私は美術的なセンスがありません。美術の成績も、彫刻などの造形ものはそこそこでしたが、絵画的な課題はてんでダメでした。 そんな私が自分で配色を作ろうと思ったら、時間がいくらあっても足りません。そしてクオリティは、かけた時間に反比例していくでしょう。 ですので私は、自分で作りません。他の色んな物を利用します。 それは時に写真や画像であったり、人が作
最近「フラットデザイン」という言葉をよく耳にする 。 このデザインスタイルは、グラデーションやシャドウなどの立体的要素を極力避けコントラストの強いカラーパネルと文字要素を活用して構成される。このスタイリッシュなフラットデザインの出現により、今までのエフェクトゴテゴテのUIがいきなり古くさく感じる事態が発生している。 ここ最近ではGoogleが提供する種々のアプリやFacebookのUI、Windows 8、そして多くのスタートアップ企業が提供するスマホアプリで、このフラットデザインをUIのテーマとして採用するケースが増えている。 例えその呼び名を知らなくても、サイトやアプリを通して、多くのユーザーがそのデザインスタイルを目にしていると思う。代表的な例としてはClear、Moni、Clear Weatherなどが挙げられる。 フラットデザインの主な特徴特にはっきりとした決まりがある訳ではない
競合に負けないWebサービスをつくるため、UI(User Interface)、UX(UserExperience、ユーザー体験)にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです! 目次 基礎知識 1.UXのためのUIデザイン 2.UX is not UI 3.ククパド美ちゃんと学ぶ!クックパッドのUI改善プロセス:前編 応用編(Webサイト) 4.ククパド美ちゃんと学ぶ!クックパッドのUI改善プロセス:後編 5.コンテンツで改善する UI デザインの極意 応用編(スマホアプリ) 6.UI&UX / 重要なのは、毎日さわって嬉しいUI UX! 応用編(タブレットアプリ) 7.ニコニコ超デザイン-
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、ゴラクログのデザインを担当をしている鬼石広海と申します。 弊サービスは現在大幅リニューアル中ですので、UI周りはリニューアル後、又機会があればご紹介させて下さい。 今回は、駆け出しのデザイナーさん達の多くが課題にあげる、デザイン作業のスピードアップについてお話します。結論から言いますと、細部から作らずに土台作りを頑張ることが、結果的にスピードにつながるというお話です。 では実際にバナーデザインを例に紹介します。 1.構成要素を全部置く まずはプランナーやプロデューサーと話し合って決めた構成要素を、とりあえず全部キャンバスに置いてみます。
私はデザイナーとして、流行りのデザインにとても詳しいという訳ではありません。今気持ちはHTML5やwebサービスの作成等、どちらかというとテクノロジーの方に興味が強くなってしまっていて、インプットの種類もかなりそっち寄りに…デザイナーと名乗るのがちょっと恥ずかしくなってきてますw で、とはいえデザインとかデザインに関する事を考えるのはすごく好きだったりします。 今回は最近読んだ記事のいくつかで、ここのところ流行りの兆しを見せているフラットデザイン、そしてその対極とされているスキュアモーフィックデザインについて色々考えていたことの理解が進み、ある程度頭の中で整理できたので、ちょっと記事にしてみようかなと思ったわけです。 言葉の定義で戦うのはあんまり好きじゃなかったりしますけど、この辺りの事を頭に入れた上で話をするのは有意義なのではないかなと思ってます。解釈のおかしなところなどご指摘ありました
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。 Countable.js 様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 iCheck クリックしたラジオボックスやチェックボックスから、返り値をとれるjavascript。それをキーにして何かを動かしたいときに。 Almost Flat UI フラットデザインUIを簡単に実装で
昨年度からWebサイトに取り入れられ始めたパララックス効果、現在でも取り入れられているWebサイトをよく見ます。実際にパララックスが取り入れられているWebサイトを実際に触って興味を持ったり、作成された方もいるのではないでしょうか。参考にできるパララックスを使ったサイトはたくさんありますが、今回はパララックス効果を上手く取り入れ、ストーリーを印象的に伝えているサイトをまとめてみました! (参考: 15 Awesome Websites That Tell a Story As You Scroll) Every Last Drop http://everylastdrop.co.uk/ 私たちが起きてから寝るまでに使う水の量が視覚的にわかるWebサイトです。 Ben the Bodyguard http://benthebodyguard.com/index.php 写真やメモ管理アプリの
【フレッシュなWebデザイナーの皆さんへ】数ある... / ━━国内ギャラリーサイト━━イケサイ、ABM、S... / 【イケサイ】国内のコーポレートサイトが中心のデザ...他...全14件 【フレッシュなWebデザイナーの皆さんへ】 数あるWebデザインギャラリーサイトの中で、新卒Webデザイナーがとりあえず毎日見ておけば間違いない特にオススメのギャラリーサイトをまとめました。
中型ライダー(二輪)免許を持っているライターの内藤です。 本日は、ライダーキック並みの強烈さで役に立つ見本サイトをまとめてみたいと思います。 Web屋さんはご存じの方も多いかもしれませんが、ブログをしている一般の方、Webデザイン・DTPに興味のある方、お店を持っている方なども必見です! 部品に特化した見本 部品に特化した見本サイトをご紹介します。 見出しデザイン(h1,h2,h3……その他DTPでも) はじめは見出しデザインに特化した見本サイトまとめ。 見出しデザイン.com http://midashi-design.com/ 見出しタグ(h1,h2,h3……)のデザインの見本ですが、DTPなどでもヒントになるものがたくさんあります。 カテゴライズは、グラデーション・テキストのみ・テキスト非画像・上線・下線・丸・四角・囲み線・斜線・点線・角丸。 ヘッダー部分に凝っても見出しが適当だと全
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く