Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: WebDesign

[Freebie] Must-Have Sketch Templates for New UX Designers – UXデザイナーのためのSketchテンプレート

  • Pocket
  • このエントリーをはてなブックマークに追加

UXデザイナーのためのSketchテンプレートのまとめ記事。グリッドレイアウト素材、画面遷移のパーツが用意されたもの、アイコン、ワイヤーフレーム素材、iOSやAndroid、FacebookなどのUIモックアップ、カラーパレットなどのSketchファイルが紹介されています。Webディレクター、UXデザイナー、UIデザイナーといった職種の人にオススメ。

[CSS] Trendy CSS Text Shadows – CSSで描く、クールなテキストシャドウ作例

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSのtext-shadowのクールな作例。それぞれ使われているフォントや色指定についても紹介されており、「View CSS」をクリックするとCSSの確認もできます。フラットデザインが流行った後によく使われた、斜め方向にブラーなしの作例が多いです。Webでテキスト使ったちょっと印象的なタイポ組みたい時なんかの参考になりそうです。

[Web Design] CSS & JS Sliders From CodePen – CodePenからスライダーを紹介したまとめ記事

  • Pocket
  • このエントリーをはてなブックマークに追加

CodePenにあるCSS & JSスライダーを紹介したまとめ記事。稼働するものをEmbedしてるのでちょっと重いですが、各作例右上にある「CodePen」ロゴをクリックすると単独で表示する事ができます。様々な手法のスライダーが多数紹介されているので、スライダー選びの時に役立ちそう。

[Freebie] uipixels – ハードウェアのモックやUIテンプレートを配布するサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

ハードウェアのモックアップ素材や、WebやAppのUIテンプレートを配布しているサイト。素材のフォーマットは作例にもよるけど、Sketch、PSD、Aiなどがあるようです。いくつか詳細を見てみたんだけどどれも無料のようで、ダウンロードボタン押すとすぐに落とせます。面倒なメアド入力とかTwitterでリツイートするとか(あれ大嫌い)、わずらわしい手順がないのがステキ。素材探しに使えそうです。

[Web Design] Easing function 早見表 – イージング指定の早見表

  • Pocket
  • このエントリーをはてなブックマークに追加

アニメーションで使われるイージング指定の早見表。オブジェクトの移動量と時間軸とをグラフで表した一覧は、マウスオーバーする事でアニメーションを確認できます。また各詳細ページからはCSSやSCSSでのtransition指定、JSでの指定方法のコードも掲載されています。アニメーション指定する時のイージング選びの際に役立ちそうです。

[CSS] CSShake – シェイクアニメーションを多数用意したCSSライブラリ

  • Pocket
  • このエントリーをはてなブックマークに追加

揺らす事だけにフォーカスしたとってもニッチなCSSライブラリ。CSSファイルだけで構成されているので、導入も簡単です。サンプルアニメーションもサイト内に多く紹介されています。マウスオーバー時なんかに使えそうですが、常に動いてると押してアピール強すぎて少々ウザくなるかもしれません。

[CSS] CSS Text Effects From CodePen – CSSテキストエフェクトまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

CodePenで紹介されているCSSテキストエフェクトのクールな作例をまとめた記事。ほとんどのものはPure CSSで作られてますが、モノによってはマスク背景とかに画像が使われたりもしてます。動きのある作例も多いです。元ネタがCodePenなので、コードの確認もサクっとできて汎用性も高いです。見出し装飾のネタ探しなんかにも使えそう。

[Software] Brackets Themes – Bracketsのテーマ配布サイト

  • Pocket
  • このエントリーをはてなブックマークに追加

テキストエディタBracketsのテーマを配布しているサイト。ライト系ダーク系合わせてかなりの数のテーマが紹介されています。インストールはサイトからダウンロードするというよりは、Bracketsの「機能拡張マネージャ」内で探して、そのままインストールという流れ。テーマの適用はまた別の所にあって、インストール後に「表示>テーマ」に行くとプルダウン内に増えてます。コードの見やすさは生産性に直結するから拘りたいところ。ちなみに自分はダーク系テーマが好きなのでTwilight使ってます。明度低め、コントラスト高め、彩度抑えめで見やすいです。