Bootstrap実践編 Sass,CSSを追加してオリジナルデザインにする（４） - マンガでなれる？WEBデザイナー講座
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyph
Bootstrap実践編 デザインソフトでデザインを作り込む（３） - マンガでなれる？WEBデザイナー講座
前回からの続きで「Bootstrap実践編 デザインソフトでデザインを作り込む（３）」の説明を始めます。 前回のタイポグラフィ、サイトカラー見本にロゴを作成して追加しました。 通常、Webデザインはロゴマークのイメージに合わせて作成します。 今回は無料ベクター素材のサイトなのでロゴマークはペンのイラストを描きました。 ロゴのフォントはペンツールで書いたイメージです。 ロゴデザインとWeb制作の同時発注は稀なので Web制作を依頼された場合はデザインカンプを制作する前に クライアントにはロゴの手配をしてもらいます。 サイトによってはファビコン画像が必要な場合もあります。 2. Webデザインを作り込む アートボードを作成した後はBootstrapの12カラムに合わせてグリットを用意します。 1からグリットを作成するのは面倒なのでBootstrapのテンプレートを使います。 http://bo
Bootstrap実践編 スケルトンサイトから制作するWeb制作短縮方法（１） - マンガでなれる？WEBデザイナー講座
えっ！？HTMLだけでできるんですか。 私はインブラウザでコーディングするとデザインイメージ湧かないから苦手なんですよ〜。 逆に遅くなっちゃいますよ。 クライアントだっていろいろ修正変更とか言ってきそうじゃないですか。 デザインとコーディングを同時に修正するなんて大変すぎます。 クライアントと案件内容にもよりますがスケルトンサイト（ワイヤーHTML）から見せながら制作した方がデザインが通りやすく納得されやすい事が多かったです。 初期の段階でサイトの骨格がすでに決まっているのでコーディング時間を大幅に短縮する事も可能です。 デザイナーはデザイン作業に集中できます。 （※全ての案件に対応できるわけではないので案件によってはワークフローを変更する必要もあります） 今回紹介するワークフロー （１）スケルトン（骨格）サイト制作 Bootstrap3のジェネレーターを使って作成する （２）デザイン作業
Bootstrap実践編 基本的な書式、タイポグラフィー、サイトカラーを作成する（２） - マンガでなれる？WEBデザイナー講座
どういった内容のサイトか、雰囲気やイメージを膨らませながら サイトカラーや使用するフォントを決めます。 私はIllustrator、Photoshopなどでカラーを作成する時はAdobe Colorで色見本を作成します。 今回はSketchでカラーを作成するのでMaterial Design Color Paletteというプラグインを入れてカラーを作成してみます。 Material Design Colorというサイトから色をコピーすることも可能です。 マテリアルデザインのカラーなので最近のWebデザインの流行に合わせたカラーが作成できます。 色の明度によってもサイトの印象も違ってきますので こういったツールを使用すると制作するサイトのカラーを容易に検討することができます。 今回制作するサイトはベクター素材を配布するフリー素材サイトなので デザイン性のある明るい配色にしたいと思いました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
