デザイナーがプレッシャーに負けずにクリエイティブでいるためのTips
納期がせまっている時などに、浮かない表情でコンピュータのスクリーンをじぃーと見つめていることはありませんか？ これはグラフィックデザイナーにとって、ごく普通に起こりえることです。 そんなプレッシャーを克服して、クリエイティブでいるための5つのTipsを紹介します。 タイポグラフィは、ウェブを含めポストカードやビジネスカードやパンフレットなど、ほとんどのグラフィックデザインで機能します。クライアントからタイプフェイスの指定がないのであれば、自分から使用するタイプフェイスについて尋ねてみてください。 タイプフェイスを最終的に決めるポイントは、クライアントについて論理的に考えることです。そしてデザインの残りの箇所にそのアイデアを使ってください。 2. カラーを選ぶ シンプルでクリーンなデザインを保つためにグレースケールを最初に勧めるデザイナーはたくさんいます。カラーで困っている時、確かにそこから
ウェブデザインでこれは気をつけたいの35のポイント
ウェブサイトやブログの作成・運営で、避けておきたい35個のミスをnetjellyから紹介します。 List of Web Design Mistakes You Should Avoid 下記は、各リストを意訳したものです。 ※訳者注： 一部過激なものは表現を少し和らげています。 はじめに ウェブサイトやブログを開発・作成する際に、避けた方がよいミスをリストアップしました。 1. 作るだけでは終わりではない ウェブサイトは開発・作成だけでは終わりではなく、公開・運営する必要があります。そして、オンラインやオフラインでウェブサイトの告知に手間や時間をかけることはいっそう必要になります。もし、あなた自身があなたのサイトについて時間をかけないなら、他の誰もそれはしないでしょう。 2. 広告をコンテンツに混ぜない 広告をコンテンツに混ぜると、短期的にはクリック数を増やすかもしれません。しかし、ユー
ウェブデザインの見栄えをよくするための7つのキーワード | コリス
7 Key Principles That Make A Web Design Look Good下記、そのポイントを意訳したものです。1. バランス2. グリッド3. カラー4. グラフィック5. タイポグラフィ6. ホワイトスペース7. コネクションおわりに1. バランスバランスで一番大切なことは、デザインが一方向に偏らないことです。対称あるいは非対称のものでもウェイトにはバランスをおくようにします。実例： Subtractionこのグラフィックの重要なポイントは右のクロスです。このクロスはビジュアルのウェイトに大きな影響を与えています。 この小さなクロスがどれだけグラフィックのバランスに効果があるかは、あなたの手でクロスを隠して見てください。これが非対称のバランスと呼ばれるものです。ビジュアルのサイズやカラーをコントロールし、ウェイトを調整することができます。 仮にクロスのカラーがオ
これはもう使用しない方がいいウェブデザインのトレンド
昔流行ったけど、これはもう使用しない方がいいものや人気がすたれているウェブデザインのトレンドをWeb Design Ledgerから紹介します。 Most Used and Abused Web Design Trends of All Time 以下、その意訳です。 過激な表現も一部あるので、留意ください。 はじめに 鏡面反射 アクア フラリッシュ コーヒーカップ 地球 コミックフォント ストックフォト ペーパー ポラロイド 特大のRSSアイコン 音の自動再生 カウンター マーキー ブラックの背景 スプラッシュページ スキップの無いイントロ ブラックの背景 はじめに トレンドは、ウェブデザインにおける良くないキーワードではありません。実際に、下記のリストのものはその時々でウェブデザイナーを鼓舞させました。これらのアイデアは影響が非常に大きくかったので、大量のクローンが作りだされました。
ブラックベースの暗いウェブデザインで気をつけたいポイント
ブラックベースの暗いデザインのウェブサイトを制作する際に、取り入れたいポイントや注意すべきポイントをWeb Designer Depotから紹介します。 The Do's and Don'ts of Dark Web Design 下記は、その意訳です。 はじめに 1. ホワイトスペースの活用 2. テキストのホワイトスペース 3. テキストのコントラスト 4. フォントの取り扱い 5. カラースキームは最小に 6. スタイルスイッチャー 7. 暗いデザインがはまるサイトとは 8. エレガントな暗いデザイン 9. クリエイティブな暗いデザイン 終わりに はじめに ブラックベースのウェブデザインは人気が高く、エレガントでクリエイティブな魅力があります。しかし全てのウェブサイトに適したものという訳ではなく、適切であるときだけ使用されるべきデザインです。 ブラックベースのデザインを使用すると印象
既存のデザインのクオリティをアップする8つのポイント
デザインが単調な感じのときには、使用している色を鮮やかにしてみます。 変更した色をベースに、カラースキームを設計します。 Color Scheme Designer 3 2. モノクロは慎重に ブラックやホワイトなどモノクロをテーマにした素晴らしいデザインのウェブサイトは多数あります。モノクロは単色で構成されたものですが、一色加えることでデザインが容易になることがあります。 ポイントはその一色のみにこだわらずに、他の色も充分に検討することです。 3. グリッド レイアウトの活用
デザインを魅力的なものにする、シンプルな10個のテクニック
デザインを魅力的なものにする、シンプルな10個のテクニックをSmashing Magazineから紹介します。 10 Simple and Impressive Design Techniques 以下、その意訳です。 手間のかかるデザインテクニックは高度な効果を与えることができますが、間違ったところに使用してしまうと、意図したフォーカスとは異なり、ユーザーの気をそらすだけになってしまうことがあります。 これらのテクニックは、効果的に見せるために必要なデザインかもしれません。しかし、よりシンプルなテクニックでも充分な効果を与えることができます。 シンプルなテクニックやエフェクトというのは、デザインの基本です。 「less is more」の考えを元に、デザインの概観とパフォーマンスを劇的に改善できる非常にシンプルで印象的な10のデザインテクニックを紹介します。 1. Add Contras
写真の印象を一気に激変させて美しくするPhotoshopのお役立ちアクション61種類
Photoshopの一連の手順（画像のサイズを変更し、画像に効果を適用し、ファイルを目的の形式で保存するなど）を記録し、次回以降は一発でできるようにしてくれる自動作業機能のことを「アクション」と呼びます。このアクションを使えば、大量の画像をまとめてバッチ処理したり、いろいろと便利なわけですが、今回は写真の見栄えを美しくしたり、違う印象を与えるように加工するアクション61種類です。かなり便利なものが多いので、写真加工を頻繁かつ大量に行う人にはかなりお役立ちなのではないかと。 60種類の詳細は以下から。 いわゆる「クロスプロセッシング」を行うアクション ロモ・クロスプロセッシング ビンテージ風 HDR（ハイダイナミックレンジ）風 色あせたビンテージ風 肌のでこぼこを修正してなめらかに見せる いろいろなパターンのモノクロ写真へ変換 明度やコントラスト、シャープなどをブーストする ダークトーン・ミ
１ピクのラインにこだわったデザインスタディ
ヘッダ内、ヘッダとコンテンツなど異なる色の背景の区切りに１ピクセルのラインを使用したデザインスタディをSpoonfed Designのエントリーから紹介します。
Webサイトの制作／運用の効率化を図る 「ガイドライン策定」のすすめ（前編）（1/4）：CodeZine
Web標準に従うことは、SEO効果、ユーザービリティ、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従ってWebサイトを制作しようとすると、制作者の頭を悩ませる多くの問題が待っています。本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 はじめに Web標準に従うことは、SEO効果、アクセシビリティ、ユーザービリティ、相互運用性、互換性、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従って「正しい（X）HTML+CSS」でWebサイトを制作しようとすると、制作者の頭を悩ませる多くの
HTMLを綺麗に保つ12の原則 | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Chris Coyier氏がSmashing Magazineにおいて12 Principles For Keeping Your Code CleanのタイトルのもとHTMLコードをクリーンにするための12の原則を紹介している。厳密には11の原則だが、HTMLをクリーンに保つ上で実践的で効果的なものだ。WebデザイナやWebデベロッパは一度チェックしておきたい。12 Principles For Keeping Your Code Cleanで紹介されている原則を要約すると次のようになる。 [原則1] HTML 4.01を採用する場合でもXHTML 1.0を採用する場合でもStrict指定のDOCTY
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
サイトのレイアウトやエレメントを作成するPhotoshopのチュートリアル集
ウェブサイトのレイアウトをはじめ、ナビゲーション、ボタン、アローなどのエレメントを作成するためのPhotoshopのチュートリアルの紹介です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コリス
ウェブデザインのクオリティをアップする7つのポイント | コリス
テキストをかっこよく魅せるPhotoshopのチュートリアル集：Part 10 | コリス
phpspot開発日誌 - PHP/Ajax/JavaScript/CSS等の最新技術情報をお届け
[CSS]アイデア満載のスタイルシートのテクニック集 | コリス
今押さえておくべきWeb制作に役立つ37個のブックマークまとめ*ホームページを作る人のネタ帳
Photoshopブラシを使って、簡単トレンドデザイン - DesignWalker
