タグ

2016年10月14日のブックマーク (3件)

  • ハマダナヲミのPhotoshopで作るUIデザイン入門 – WPJ

    Photoshopはもともと写真編集のためのソフトでしたが、印刷物やWebのデザインツールとしても使われるようになり、いまではデザインツールとしても多く使われています。このLessonでは、iPhoneアプリを題材として、PhotoshopでUIをデザインする方法を紹介します。 アプリのUIデザインのワークフローを知ろう Webサイトの制作では、PhotoshopでのデザインからHTMLCSSに メンバー登録してください いつもWPJのご利用ありがとうございます。 この記事は、読める記事数の上限に達したか、プレミアムメンバー限定のため、お読みいただけません。フリーメンバーに登録すると読める記事数を増やせます。

    ハマダナヲミのPhotoshopで作るUIデザイン入門 – WPJ
  • ノンデザイナーこそ知っておきたい!デザインでセンスより大切な心理学のルール

    デザインに一番大事なのはセンスだと思っていませんか? ディレクターやエンジニアにも役立つ、Webデザインで使える心理学のルールとは? ミズーリ工科大学の研究によると、Webサイトに対するユーザーの第一印象の94%以上はデザイン関連の要素で決まっているようです。また、なんと88%ものユーザーが、ユーザビリティの問題があったWebサイトを再び使わないと決めることも分かっています。 しかし、Webサイトのデザインには高度な技術力や美的感覚が必要だと思うのなら、考え方を変えてください。美的感覚は確かに重要ですが(なんといってももう2016年なのですから!)、Webサイトに必要なのは美的感覚だけではありません。実際、一番大事なことでさえありません。一番大事なのはユーザビリティであり、もっと実入りの多いWebサイトを確実に作るには、心理学のルールを使ってWebサイトをデザインしなければなりません。 ル

    ノンデザイナーこそ知っておきたい!デザインでセンスより大切な心理学のルール
  • 最近流行の斜めのデザインをSassで実装する理想的なコードを考えてみた!

    斜めのデザイン、流行っていますよね。いろいろな実装方法がありますが、柔軟で使いやすい、疑似要素を使ったSassのコードを考えてみました。 最近、Webサイト制作でデザインガイドラインの一部としてティルト角(tilted angle)を頻繁に使う必要がありました。この記事で「ティルト角」とは、次のように(Webページの)上か下の辺が完全に水平ではなく少し傾斜している部分を指すものとします。 ティルト角の実装方法はたくさんあります。base64でエンコードした画像を背景に適用して(カラーや角度などの)カスタマイズで大変な思いをした経験があるかもしれません。 positionをabsoluteに指定した疑似要素(pseudo-element)にskew(ゆがみ)やrotate(回転)を適用する方法もありますが、形がゆがんで(skew transform)しまうので、これも避けたいことの1つです。

    最近流行の斜めのデザインをSassで実装する理想的なコードを考えてみた!