デザイン修行:インターンブログデザインの完成とSass作業の準備

大体デザインは決まってきました。
インターンブログのデザインについてのまとめと、その後に、来週以降にSassの作業をするための準備作業を書きます。
他に、ブログを書くのにMarkdownを使っていて、SublimeText2で書いたMarkdownをプレビューできるようにMarkdown Previewパッケージを導入しました。便利便利!


インターンブログの狙いとか

  • Fjörd.jpでのインターンだと分かること -> 左上のタグ
  • Web Designerのインターンだと分かること -> ブログタイトル
  • 自分がどういう目的でデザインをしようと思ったか分かること -> メイン(The Power of Design)
  • 自分が何者か、どういうことをやっているか/やろうとしているかがわかること -> About
  • 自分が好きな/興味あるサイトを知ってもらう(自分がどういうデザインをするか) -> Links
  • 自分が今何をやっているか知ってもらう -> Blog

懸念事項とか

  • ブログタイトルに「by @satoko」を入れるスペースがあるか。なければAboutのところで少し目立たせ気味にしよう
  • ブログのトップページだけど、ブログ記事のリンクまで少し遠いがいいか
  • ヘッダは何pxとかメインブロックの高さ・幅とか決めてない。絵の時点でどこまで決める必要があるか
  • ブログタイトル・見出しなどtext-shadowする
  • box-shadowをブログタイトルの下のグレーのラインに入れる

パレット

  • ちょっと画面で見たのと、Gimpに落としてみてデザインしたのと若干違う色になってしまっているのはいいのか
  • #FFFFFF とか薄いグレー
  • #F6D580
  • #E38692

メインのbackground-image

左上のフラッグのbackground-imageの候補一覧


デザインからCSSに落とし込む作業

この辺りは初めての作業なので、色々と下準備をしていきます。

  • gemのアップデート
  • sass gemのインストール
  • ベースとなるサイトを探す(CSS/SCSSの参考にさせてもらう)
    DevLove2012のサイトは@machida さんが作ったので、アドバイスを求めやすそう

    DevLOVE2012
    http://devlove2012.devlove.org/

引き続き、こんな感じで作業していこうと思います。

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s