はてなブロガーとして個人的に注目しているウェブデザイントレンドまとめ - 太陽がまぶしかったから
photo by Alki1 2014年のウェブデザイントレンドまとめ ウェブデザインについては前々から興味があって、素人ながらにトレンドを追っているところがある。僕自身の好みや実装スキルの限界もあるのだけど、このブログ内で「素振り」をしておいて、別サイトに反映させる事を考えたりもしている。 そんなわけで「ブログで2014年をふりかえる」ひとりアドベントカレンダー11日目は、個人的に注目しているウェブデザインのトレンドについて振り返っておきたい。「デザイン」というよりも要素技術に近いところも含む。 バイラルメディア風デザイン 良くも悪くも今年はバイラルメディアの年だった。著作権の問題があったり、スパム的手法で広がるバイラルメディアのメディアとしての価値はどうしようもなく失墜してしまったのだけど、シェアや回遊率を高めるための導線などの知見については取り入れたくもある。 実質的にGoogle一
2014年Webデザイナーはコードをどこまで学ぶべきか、Webデザインが今までどのように進化してきたかのまとめ
Webデザイナーはコードを学ぶべき？ コーダーはデザインを学ぶべき？ 両方に精通している人はなかなか多くはいません。Webデザインがどのように進化してきたのかその流れをしっかり押さえ、デザインとコードのギャップをつなぐことができたか振り返ってみましょう。 A brief history of web design for designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 先日の彼らの記事「しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則」と同様に、分かりやすいアニメーションもお楽しみください。 1989年：Webデザインの暗黒時代 1995年：Webデザインの始まりはテーブルから 1995年：JavaScriptが表現の幅を広げる 1996年：Flashにより自由の黄金期へ 19
クソエンジニアが最速でそれなりのWebデザインをできるようになる方法 - UIU
趣味などでWebサービスを作るときにもっとも悩ましいことのひとつがデザインだと思う。外観は重要な要素だとは理解しているし興味も一応あるけれど、実践に乏しいからどうしていいのかわからない。かといって、タダで頼めるような都合のいいデザイナーはいない。結局めんどうになって、Twitter Bootstrapで体裁だけでっち上げた妙にオタク臭いデザインになってしまう。僕もかつてはデザインを気にも留めないクソエンジニアだったけど、必要に迫られて勉強したらそれなりに手を動かせるようになったのでその方法を紹介する。僕が今年入社したスタートアップにはデザイナーがおらず、新機能を作るときなど仕方なくデザインをこなす必要があった。結果的に、仕方ないなりにPhotoshopを使ってプロトタイプを作りHTML/CSSコーディングするくらいはできるようになった。ここに書くのは仕方なくそれなりのWebデザインをする方
DTP→Webデザイナー転向時に、これやったら捗ったよリスト13
元々DTPやってました 自分は大卒でとある広告メディア系の会社に入ったんですが、ずっとDTP（エディトリアルデザイナー）の仕事をしており、正式にWebデザイナーに転向したのは2012年頃の話です。 「このまま紙だけやっててもそのうち食えなくなっちゃうよなあ…」と思い、仕事のかたわらHTML/CSSをはじめとしたWebの勉強を始めました。一応HTMLかじったことはあるものの、知識は大学生の頃で完全にストップしており、floatって何？レベル。（テーブルレイアウト世代） 一念発起したはいいものの、いざ勉強をしようとすると色々と問題が生じるわけですね。 Photoshopでデザインなんてやったことない、Illustrator使いたい 呪文みたいなコードを延々と打つ作業がだるい うまく動かなくて一つのコード間違いで3時間潰れたりするのが辛い 本屋行けば技術書、入門書はいくらでもあるけど、逆に何選べ
IllustratorでWeb向け、ピクセルベースの作業を行う上での設定（完全版）｜DTP Transit
Illustratorをウェブ制作に使い、ビットマップ書き出しするときのアレコレについて、これまでいろいろと取り上げてきましたが、現在、下記の制作方針が最強だと思われます（ツッコミ歓迎ですので、何かあればお気軽に）。 ドキュメントプロファイルは「Web」。［プレビューモード］を「ピクセル」に変更、［新規オブジェクトをピクセルグリッドに整合］はオフ ［線の位置］を「内側」にして作業 ［アピアランス］パネルメニューの［新規アートに基本アピアランスを適用］のチェックをはずしておく ［新規オブジェクトをピクセルグリッドに整合］はオフに ［プレビュー境界を使用］にチェックを入れる キー入力を「1ピクセル」に アートボードの座標に注意 sRGBを基準に これによって、次のような問題を回避できます。 プリントメディアの設定で制作されたドキュメントをWeb向けに利用しようとすると、エッジがにじむ。 ［新規
新人ウェブデザイナーに送る。ウェブデザインブックマークサイト決定版！
おはようございます。CD藤本です。 厳しい冬も終わりを告げ、大好きな春がやって来ました。 桜、誕生祭、キャンプ初め、サイクリング開始。と良いことづくしの春。 当社でも11名の新入社員を迎え入れました。 個性あふれるフレッシュな11名の新人たち。ようこそSOLGへ！！ さて今回は、デザイナーなら誰でも知っていると思いますが、新人ウェブデザイナーのために、ウェブデザインのブックマークサイト・ギャラリーサイトを紹介します。 僕が知っているだけでもこの手のサイトは30サイト以上あります。老舗から新参者、洋物中心のところから和物のみにこだわったところ。縦長にこだわったところからスマホのみに絞ったところ、パーツのみに絞ったところもありますね。 僕が何年も使い続けた結果、ここが至極のブックマークサイト（以下ブクマサイト）だ！という5サイトを紹介します。 （今回はパソコンサイトを扱うブクマサイトに限らせて
なぜデザイナーはボタンをあと3ピクセル左に寄せるべきなのか？
by Ugo Cristofori デザイナーにとってデザインのディテールは非常に気になるところですが、デザイナー以外には違いがあまり伝わらず「ボタンを3ピクセル動かすだけで製品が改良されるの？」と言われたりします。しかし、プロダクトデザイナーとしてGoogle Venturesで働いているBraden Kowitzさんは「それでもデザイナーは細部にこだわるべき」として、細部までこだわるべき理由と、他の人たちにそれをどう伝えるべきかのテクニックについて語っています。 Why you should move that button 3px to the left | Google Ventures http://www.gv.com/lib/design-details ◆デザインは外見のためだけに行うのではない by Bytemarks ・ディテールを適切にすると信頼感が増す 顧客がオンラ
ポータルサイトのデザインをする時に意識したこと5つ - Design Color
もくじ グローバルメニューを埋れさせない 色を使いすぎない 余白を空けすぎない 囲み線を多用・強調しすぎない サムネイルに黄金比や白銀比を使ってみる 1.グローバルメニューを埋れさせない ポータルサイトは情報量がとても多いです。ユーザーを迷わせないためには、画面が遷移しても変わらずそこにいてくれる「グローバルナビゲーション」は頼りになる存在です。それが他の情報に埋れてしまってはもったいないですよね。なので、デザイン時にはまずこの子に注目してみました。 白抜きのメリット 色々なサイトを観察していると、ナビゲーションバーに白抜きを使っているサイトが多く見られました。 調べてみたところ、白抜きは小さな文字でもやや大きく見えるというメリットがあるとか。なぜなら、白は「膨張色」だからです。 膨張色とは明度が高いことから、他の色に比べて膨らんだり広がったり錯覚する色のことです。白や明度の高い暖色系が膨
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://saeki.me/%E3%81%8A%E5%8B%89%E5%BC%B7/299/