ブラウザでウェブサイトをデザインする（gasp！）[終了]

StackOverflow https://stackoverflow.com/questions/432849

  •  10-07-2019
  •  | 
  •  

質問

賛否両論に対する人々の意見に興味があります。ブラウザでウェブサイトを設計し、Photoshop、Fireworksなどから離れる方法について

私は自分のウェブサイトのリニューアルを設計し、ブラウザで試してみましたが、振り返るつもりはありません。

例（12列の960pxグリッドを使用）：

<div id="news_section" class="floatleft columntwo spanfourcolumns">
   …content
</div>

<div id="recent_work" class="floatleft columnfour spansevencolumns">
   …content
</div>

デザインが再び楽しくなっただけでなく、グリッド、垂直リズム、黄金比を使用することも、これまで以上に簡単になりました。言うまでもなく、設計と静的コーディングのギャップを完全になくします。

あなたはどう思いますか？

役に立ちましたか？

解決

最初にブラウザでページのワイヤフレームを（HTML / CSSで）作成してからデザインを適用すると言っていますか？それが私がすることです（そして37Signals その考えに従いますも）。

このサイトはすぐに使用でき、見た目をよくするために時間を無駄にしないため、Photoshopに触れることなく静的なワイヤフレームを作成するのは開発者にとって良いと思います。

また、プログラマーの多くのデザインストリークはありません-太陽の下ですべてのPSコマンドを知っている人々にそれを任せたいです：）

また、 YUIグリッド CSSフレームワークを使用して、レイアウトを迅速に作成します。

他のヒント

まあ、ブラウザを使用して仕事をすることは世界で最悪のことではありませんが、いくつかの「地獄のこと」があります：

1） IEを使用してアプリを設計しないでください。 ChromeまたはFireFoxを使用します。 IEの非準拠の振る舞いは、あなたのCSSが実際には有効ではないのに有効であると思わせるのにだまされます。 IEの主な使用例は、IEでサイトをテストすることです。

2）例で行ったように、クラスの表示にクラスの名前を付けないでください。

しないでください

iDesign Steveがブラウザで直接設計することを学んだ場合

  1. イノベーションが苦しむ：SteveはCSS / HTML / whatnotの制限を気にしません。彼は、人類がまだ見たことがない最も印象的なサイトを自由に使うことができます。 CSS / HTML / whatnotを制限することで時間内にdeisgnを承認したのは平均的なプログラマーJoeの義務であり、いくつかの愚かなブラウザによって破綻するのを見ると、たまたま締め切り前にかなりの市場シェアを獲得します。 それに直面して、CSSを書くことはアセンブリコードを書くような感じです。最も基本的なこと（流動的な複数列レイアウト？）を達成することはとてつもなく難しく、しばらくの間は高くなります。
  2. Steveのクールネスファクターは減少します。私が知っている開発者は、WYSIWYGツールを使用してHTML / CSSを生成したり、これを受け入れられるとは考えていません。必要なのはテキストエディタだけである場合、それほどクールに見えません。顧客がスティーブのモニターを見ると、いくつかのウィンドウの代わりにたくさんのテキスト、100個の小さな面白いアイコン、半分がカラフルな下書きになっているのを見ると、彼は「私の7歳の孫も何かを入力できる」と考えるかもしれません...＆quot;。
  3. Joeには、Steveよりもさらに多くの制約があります。サイトはアクセス可能で、レイアウトはあらゆる種類の出力に対応するのに十分流動的である必要があります。JavaScriptでうまく再生できます... CSS / HTMLが書き換えられても、苦労するポイントはありません。

優れたチームメイトになり、今すぐPhotoshopを起動します。ジョーは請求書を支払うために仕事が必要です。

まあ、私のデザインのレベルが下手な人にとっては、ホワイトボードスケッチの1つで、そのままHTMLとCSSになります。

それでも私のウェブサイトはひどく見える...

これまでに行ったいくつかのサイトで、両方のアプローチを採用しました。毎回、HTML / CSSで直接設計されたページの作業ははるかに少なくなりましたが、魅力的なWebサイトではなくなりました。魅力的なページを作成することに関心がある場合は、Photoshopから始めます。 Photoshopでアイデアをより迅速に作成でき、柔軟性がはるかに高いため、アイデアを試すことができ、視覚的に優れたサイトを思い付くことができます。

PhotoshopでWebサイトをデザインすることはありません。物理的なスケッチからHTMLとCSSに直接進みます。私はそれをより早く見つけ、あなたが何時間も取り組んできたもの（Photoshopファイル）を捨てることになりません。

私は、ワイヤーフレームにとどまり、紙からブラウザに直接デザインすることを選択しました。もちろん、それは私に役立つものであり、それは私がはるかに創造的なデザイナーになりました。

独自のCSSライブラリを使用したいのですが、 Googleブループリントを見て、ウェブデザイナーのマーク・ボールトンによるこの記事をご覧ください。

いや！

  • テーブルの代わりにクラスを使用するだけで、「すべてのテーブル」の間違いをやり直しています。
  • コンテンツ（これをどこに置くか）をコンテンツとミックスしています。クラスはこれが何であるかを伝えず、どこに置くべきかを伝えます。
  • デザインは固定サイズです。ウィンドウのサイズ変更ではフローしないため、水平スクロールまたは右側に大きな空白が必要になります。

しかし、PhotoShopに言及する理由がわからない。これはほとんどWebデザインの最後のツールです。おそらくIllustratorだけがこれに適したツールではないでしょう。

物理的なスケッチを使用すると、デザインの正しい軌道に乗ることができますが、Adobe Illustrator内で見栄えのよいレイアウトを作成できることを発見しました（Photoshopよりも要素の移動がはるかに簡単です）。デザインが完成したら、Photoshopを使用してスライスします。

検討すべき意見の1つは、設計対象者です。クライアント向けのサイトを設計している場合、Photoshopで簡単にモックアップを作成して、レイアウトを把握し、設計を承認することができます。クライアントがデザインに同意したら、モックアップの要素に適合するワイヤーフレームを作成し、モックアップから実際の画像を必要とする要素を直接スプライスできます。

この方法に従うときは、モックアップを実装するために使用できるすべての利用可能な設計要素を検討し、仕事を成し遂げるだけでなく、適切に設計されセマンティックな性質でそれらをまとめることを確認する必要があります。

コンパス、特にブループリント/セマンティックは、ブラウザで設計するときに非常に役立ちます。また、別のファイルにレイアウトとスタイルを保持するのが好きなので、ワイヤーフレームを1か所に保持しながら、好きではないスタイルをより簡単に破棄できます。また、カラーパレットを使用し、フォントスケールで作成することをお勧めします。どちらもSASS変数を使用すると便利で簡単に実現できます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top