デザイン時に注意したい角丸の使いかた - Design Color
もくじ 大きな角丸はあまり使わないほうがいい理由 要素によって角丸の大きさを使い分ける理由 大きめの角丸でもおかしくない場合は？ 角丸の大きさを後から調整するPhotoshopプラグイン はじめに なんとなくで使っていたけど、一度ちゃんと考えてみよう！と思わせてくれたきっかけは、こちらのスライドでした。 今回は、こちらのスライドの角丸についての部分に沿って考えていこうと思います。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック 大きな角丸はあまり使わないほうがいい理由 「ズルいデザイン」のスライドでは、「角丸は5〜6pxくらいが最も無難でキレイ」とのこと。また、下記のようにも言われています。 「R半径が大きい角丸は、野暮ったいデザインになりやすいので、あまり使わないほうがよいです」 引用元：少ない手間と知識でそれなりに見せる、ズルいデザインテクニック たしかに、私も以前に、デ
すごいWEB
Awesome and has more than a degree. We head out one. What it is overwhelming. It is dangerous stuff. Amazing what moves the people. And, in the sense of the excitement, the world can not be changed only amazing thing. I want to meet those amazing, really want to be. I think so anyone, I want to share with everyone and wow wow. It is amazing, amazing thing. Than it really is not that amazing. From
参考にしたい日本人クリエイターのポートフォリオサイト 40
Warning: Use of undefined constant more_link_shrarp_remove - assumed 'more_link_shrarp_remove' (this will throw an Error in a future version of PHP) in /home/users/1/limeline/web/nnmal/wp-content/plugins/more_link_sharp_remove/more_link_sharp_remove.php on line 16 Warning: Use of undefined constant ddsg_language - assumed 'ddsg_language' (this will throw an Error in a future version of PHP) in /ho
第二弾:シリコンバレーで聞いたデザインが美しいWebサービス／アプリ15選 - パパパパ
このブログは、僕がこれまでWebサービスをいくつか作ってきて、失敗したり成功したり色々体験していることをまとめています。 前回の「シリコンバレーで聞いたデザインが美しいWebサービス／アプリ15選」の第二弾ということで、こちらで聞いた美しいWebサービスやアプリを紹介してみたいと思います。 Airtime https://www.airtime.com/ 先ごろローンチされたばかりの新しいプロダクト。Napsterの共同創業者ショーン・パーカーとショーン・ファニングが再びコンビを組んで作られたビデオチャットサービスです。トップページの未来的なイラストも目を引きますが、ログイン後のチャット画面は、一瞬ブラウザであることを忘れさせるほどの見栄えがします。 Pose http://pose.com/ ファッション関連サービスなので、当然デザインもハイクオリティ。アプリに入って行くと、素敵なWel
デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素
元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいｗ はじめに：デザインとは webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。 webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。 だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザイ
0からWebサイトを作るためのWebデザインに関する記事まとめ - ネットサービス研究室
Webデザインの基本 http://webdesignrecipes.com/4-factor-of-designing/ http://webdesignrecipes.com/web-design-beginner-learning-dtp-design/ http://07design.net/blog/?p=237 http://07design.net/blog/?p=338 効果的なミニマルデザインと退屈なデザインの境界線 | Webクリエイターボックス ホワイトスペースを使ったウェブデザインの考え方 - バニデザノート ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。 (フェンリル | デベロッパーズブログ) 上記の7サイトは文字や画像の配置やレイアウトなどWebデザインの基本的なことが書かれた記事です。どの記事も気合を入れて書かれたものが多い
デザインの参考になるWEB見本をスクラップして収集する方法 | nanapi[ナナピ]
デザインの参考になるWEB見本をスクラップして収集する方法に関するライフレシピをご紹介します。nanapi [ナナピ]は、みんなで作る暮らしのレシピサイトです。はじめに WEBデザインに興味のある人や、ノン・WEBデザイナーの人におすすめしたい、WEB見本を収集する方法を紹介します。WEB見本をたくさんスクラップして、デザインのインスピレーションや参考にお役立てください。 収集手順 以下のSTEPの手順になります。 STEP1 RSS登録 GoogleReaderにWEBデザインのギャラリーサイトを登録します。 ※ギャラリーサイトの紹介について後述します。 STEP2 WEB閲覧 ブックマークレットを使って、FirefoxでWEBページを閲覧します。 ブックマークレットの利用方法： GoogleReaderの設定＞追加機能で、特定のタグの「次へ」ブックマークレットを、ブックマークバー
人気がある8つのウェブデザインのスタイルから学んでおきたいポイント
人気があるウェブデザインのスタイルは良い悪いに関わらず、効果的に機能し人々を魅了する何かをもっています。 それぞれの主な特徴とそれがなぜ機能するのか、8つのウェブデザインのスタイルについて紹介します。 A Detailed Look into Popular Styles in Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. Illustrations 2. Printed Paper 3. Realism 4. Imageless & Typography-Focused 5. Minimalism 6. Vintage Look 7. Large Images & Photo Backgrounds 8. Rich & Sleek User Interfaces おわりに はじめに さまざまなデザイナーがいるように、敬意をはらう多くのウェ
シンプルでフリーな使えるCSSのレイアウト集７１５:phpspot開発日誌
715 Awesomely Simple and Free CSS Layouts | Design Shack シンプルでフリーな使えるCSSのレイアウト集７１５が紹介されています。 １から作らないでもこうしたものに頼ればすぐに出来ますね。自分の好みの使いやすいページを覚えておくとレイアウト作成をすぐに終わらせ、肝心のツール部分に集中できそうです。 Primary CSS: 22 Layouts Little Boxes: 16 Layouts CSS Easy: 8 Layouts Max Design: 25 layouts Iron Meyers: 224 Layouts 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」 複雑なCSSレイアウト
角丸や文字装飾からアニメーションまで自動作成できるCSS3ジェネレータ「CSS3.0 Maker」 | ライフハッカー・ジャパン
最近、CSS3のチュートリアルなど、CSS3関連の記事をよく見かけます。CSSを自動的に作成してくれる「ジェネレータ」も、続々登場しています。今回は、非常に使いやすくて、多機能なCSS3ジェネレータ「CSS3.0 Maker」を紹介します。 以下に使ってみた様子を載せておきます。 まず「CSS3.0 Maker」にアクセスしましょう。 スタイルの設定プレビューCSSのコード対応ブラウザ といった具合になっています。上部にメニューがあり、そこで様々なタイプのスタイルを選べます。以下に一部を紹介しますね。 Border Radius いわゆる「角丸」というもので、角を丸くすることができます。 Gradient 図形の色をグラデーションできます。 Box Shadow 影をつけることができます。ぼかしも可能。 これらの他にも、図形を回転できる「Transform」や、テキストに影をつけられる「T
HTML5についてのおさらい｜Web制作 W3G
Updated 2010.07.29 / Published 2010.07.29 これからHTML5を使いはじめようという方に向けたHTML5のおさらいです。HTML5の記述方法にはじまり、導入にあたって間違いやすいところや勘違いしがちなところをまとめてあります。 hgroup, header, footer要素の説明を含めた続きもあります(続HTML5についてのおさらい)。 HTML5の記述方法 まず最初に、必ずDOCTYPE宣言を行います。HTML5には公式のDTDがないので、すごくシンプルになっています。 <!DOCTYPE html> 続いて、html要素にドキュメントの言語を宣言します。 <html lang="ja"> そして順番にhead要素ときて、文字エンコーディングの指定ですが、charset属性が新たに利用できるようになりました。 <meta charset="UTF
WEBデザインをプロっぽく仕上げるPhotoshopのグラデーションファイルの厳選まとめ | 日刊ウェブログ式
フォトショップのグラデーションファイルは作業を早めるのに役立ちますし、テンプレートだと色の参考にもなります。PhotoshopやGIMPの色合いが美しいグラデーションを厳選してまとめました。 追記: 2010/12/04 グラデーション追加/リンク切れチェック Photoshop Gradients Nice photoshop gradient set Download Source Web 2.0 Photoshop gradients Download Source Ultimate Web 2.0 Gradients - FREE Download Download Source 黄金比グラデーション・白銀比グラデーション | DesignWalker Download Source 日本の伝統色グラデーションファイル | DesignWalker Download Source
ウェブデザインにおけるネガティブスペースの活用ガイド
ネガティブスペースを巧みにつかったウェブサイトの紹介をはじめ、ウェブページのレイアウトでどのように分析し改善するのか、効果的に活用するガイドをSix Revisionsから紹介します。 Negative Space in Webpage Layouts: A Guide 下記は、各ポイントを意訳したものです。 はじめに ネガティブスペースとは ネガティブスペースの重要性 ネガティブスペースを実例から学ぶ まずはデザインの単純化から ネガティブスペースを分析、そして改善 ネガティブスペースの活用例 おわりに はじめに ネガティブスペースは多くの場合、ミニマリズムのようにシンプルを美とした特定のデザインだけのものであると誤解されています。本来ネガティブスペースというものは、あらゆるデザインにおいて注意を払い、そして慎重に組み立てて使用すべきものです。 ここではネガティブスペースが何であるか、そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブデザインのセンスを学ぼう、2012年上半期洗練されたディテールのUIデザインのまとめ
ウェブデザインのセンスを磨こう、素敵なUIデザインのまとめ
Ａ４折形
https://quarter4.info/inspiration/dtp-designed-by-web-designer.html
新着記事
http://www.designwalker.com/2010/06/jquery-forms.html
【ネタ帳】ウェブ系のお仕事してる人が喜びそうなアイコンセット30個 + 25記事*二十歳街道まっしぐら（FC2ブログ時代）