Don't Use Em for Media Queries
Software developer, author, and host of Full Stack Radio. November 30, 2017 Update: It looks like the bug in Safari has been fixed in Safari 15, so I wholeheartedly recommend using em for media queries now. Keeping the post up for historical reasons, but the conclusion is no longer valid. In March 2016, Zell Liew published a really great in-depth post titled "PX, EM, or REM Media Queries?", where
ノンデザイナーのための25のグラフィックデザインのコツ | POSTD
>このコツを大いに活用してグラフィックデザインに挑戦してみてください！ ソーシャルメディア向けのデザインからイベント用の招待状まで、どんなデザインであろうと使えるグラフィックデザインのアプリはたくさんあります。 ペアリングフォントやスケールから行揃えやホワイトスペースまで、デザインの世界は複雑な面を持ちます。この25のグラフィックデザインのコツが、創作過程のあれこれを通してあなたの手助けになるでしょう。 各項目をイメージした画像をクリックして、 独自のデザイン に編集してみましょう。楽しいデザインを！ 01. フォント頼みをやめて、書体を制限してみる このデザインを編集してみる シンプルかつ効果的なグラフィックデザインのために読みやすいフォントを使いましょう。いくつもの書体を使用したデザインは読みづらいものです。統一されたフォントを使うようにしましょう。 ここではAileronのフォントフ
エンジニア／Webデザイナーでも知っているべき、グラフィックデザインとタイポグラフィの常識
エンジニア／Webデザイナーでも知っているべき、グラフィックデザインとタイポグラフィの常識 1. FontLovers #1 エンジニア／Webデザイナーでも知っているべき、 グラフィックデザインとタイポグラフィの常識 生明 義秀 2. 0.伝わる情報を 表現 するには、なにが必要？ 3. 伝わる情報を 表現 するには、なにが必要？ 1. コンセプト（テーマ、ポリシー） 2. 理論、技法（セオリー、テクニック） 3. ツール（操作方法） 4. 伝わる情報を 表現 するには、なにが必要？ 基本中の基本 グラフィックデザインの4大原則 ＝要素間における相対的な関係性の理論 5. グラフィックデザインの4大原則とは？ 1. 6. ❖ 近接 ❖ 整列 ❖ 反復 ❖ コントラスト グラフィックデザインの4大原則とは？ 7. グラフィックデザインの4大原則とは？ ❖ フィールドに対するアプローチ De
「シングルページ」流行の7つの理由と最新事例まとめ (1/4)
「シングルページ」と呼ばれる、1ページで完結しているWebページを見かけることが多くなりました。シングルページの概要と、CSSフレームワークを使った実際のシングルページの作成を通して、シングルページのデザインの考え方や作成方法の知識を身につけられる連載をお届けします。解説はデザイナーの石嶋未来氏にお願いしました。（編集部） シングルページとは、1ページで完結しているWebページのことです。最近よく見かけるようになりましたね。シングルページのみを集めたギャラリーサイトなどもあり、Web制作に携わっている方であれば一度は目にしたことがあると思います。 シングルページで作られたサイト。左から、モバイルセキュリティソフトウェアのLookout, Inc,（https://www.lookout.com/）、「重陽」ブランドの包丁を製造販売している堺菊守 河村刃物株式会社（http://chouyo
FacebookのコメントシステムがCSSでレスポンシブ(リキッドデザイン)に出来なくなっているけども 実は対応されていた | 9ineBB
ちょっと前まではFacebookのコメントシステムがCSSでレスポンシブ(リキッドデザイン)化する事ができていたのですが それが不可能になってしまっています これは、ちょっと使いづらいなと思ったのですが スマホやタブレット向けには、初期値でレスポンシブ化になっていました スマホ、タブレット向けには自動的にレスポンシブ化されている スマホやタブレットでアクセスすると親要素に合わせて自動的にレスポンシブ化するようになっています こんな感じに 自動的に画面幅に合わせて、コメント欄が小さくなるようになっています コメントボタンはクリックすると表示されます つまり、CSSでレスポンシブ化しなくても 自動的に端末別にレスポンシブにしてくれるということです PCでのサイズを取得して設置すれば、あとは自動的になるので実は改良されていたのですね Chromeのデベロッパーツールのエミュレータで確認可能です
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
xScope • Measure. Inspect. Test.
A powerful set of tools that are ideal for measuring, inspecting & testing on-screen graphics and layouts. Mirror Effortlessly see your designs and applications on iOS and Apple Watch while you work on them from your Mac. Text new A powerful way to search, decipher, and reformat text and character glyphs. Dimensions Instantly find the dimensions of any on-screen element simply by rolling your mous
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
Why negative is positive in web design
With all the terms that get thrown at us during our design education (be we self or institutionally taught), it is easy to understand why some land only glancing blows with barely any penetration into our psyches. Those that will soon fade from our realm of full understanding without the constant reinforcement and attention being devoted to them. Which is what we are wanting to do today, devote a
デザイン作業のスピードアップ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、ゴラクログのデザインを担当をしている鬼石広海と申します。 弊サービスは現在大幅リニューアル中ですので、UI周りはリニューアル後、又機会があればご紹介させて下さい。 今回は、駆け出しのデザイナーさん達の多くが課題にあげる、デザイン作業のスピードアップについてお話します。結論から言いますと、細部から作らずに土台作りを頑張ることが、結果的にスピードにつながるというお話です。 では実際にバナーデザインを例に紹介します。 1.構成要素を全部置く まずはプランナーやプロデューサーと話し合って決めた構成要素を、とりあえず全部キャンバスに置いてみます。
Webデザインに黄金比や白銀比を取り入れる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの白浜です。 人が見て美しいとデザインとされる黄金比や白銀比。なんとなく知っているものの、作り方や使い方がよくわからないという人もいますよね。 今回は黄金比や白銀比の考え方についてわかりやすく解説するとともに、Webデザインのレイアウトや画像制作に黄金比や白銀比を取り入れる方法・お役立ちツールをご紹介します。 良かったら参考にしてみてください。 （編集部注：2013年12月16日に公開された記事を再編集したものです。） 黄金比・白銀比って？ 黄金比・白銀比は、古くからある人が見て美しいと言われる調和的な比率のこと。デザインに黄金比や白銀比を使用することで、言葉で言い表せない芸術的な美しさを加えることができます。 まずは黄金比・白銀比がどういうものなのか、基本の考え方についてみていきましょう。 黄金比の比率と作り方 コトバンクによると、黄金比(Golden ratio)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Design for Kids: Typography | Envato Tuts+
One Page Love
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
http://atnd.org/events/49286
http://timing-design.jp/24th_designstudy/
Whatpx - Pixel Guesstimation Game
イラストレーター・中村佑介氏の『イラスト講座①』"見やすいイラスト編"（2014.3.12）
Create a website style guide
Basic Design Note
