タグ

*designに関するrutebozuのブックマーク (11)

  • ログイン画面のデザインまとめ

    こんにちは、工藤です。 今回はログイン画面のデザインを調べてみました。 何気ないんですけれど実はよく見る画面なのでもっと意識しないとなーと思うのですがつい後回しにしてしまったりします・・。 サムネイルクリックでログインフォームに飛びます。 シンプルなログインフォーム シンプルな背景に、ログインフォームが中央においてあるタイプです。 最近はフラットなものが多い印象があります。 evernote Rdio Simple magisto wordpress Google Favors.me ログインフォーム+新規登録などの誘導 ログインフォームにプラスして大きく新規登録への誘導や使い方などを説明しているタイプです。 はじめてサイトを訪れた方にもわかりやすく、親切ですよね。 Twitter Facebook nanapi ポップな印象のログインフォーム 背景にイラストを置いてみたり、他とは違う印象

    ログイン画面のデザインまとめ
  • 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck

    少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回 プログラマ向けデザイン勉強会 #design4p http://connpass.com/event/1185/ で発表させていただきました。 (#p4d プログラマ向けデザイン部 主催イベント http://prog4designer.github.io/) @mah_lab さんが ズルいデザインのRails gemを作って下さいました http://blog.mah-lab.com/2012/11/07/zurui-design-for-rails/ (Repository) https://git

    少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
  • ノンデザイナー向けのスライド・「Webデザインのセオリーを学ぼう」

    既出なんですが良かったので。空いた時間に、気になっていたスライドがあったので拝見しましたが、内容が素敵だったのでご紹介します。ノンデザイナーさん向けのデザインセオリーのスライドです。 Webデザイナーが読んでおきたい、最近公開されたWeb系のスライドっていうので知ったんですが、どちらかというとWebデザイナーさんなら知ってて当たり前じゃないかという内容かもしれません。 スライドの作成者さんのブログでもノンデザイナー向けの講義向けのスライド、とありました。→福井高専でノンデザイナー向けの講義しました デザインとアートの違い、なぜデザインが必要なのか、Webデザインとは、などなどが解説されています。Webデザイン論では必須の導線、レイアウト、情報のグルーピングにもしっかり触れてくれています。Webデザインには理由がある、というのが分かるかと思います。(「意味」って言っちゃうと語弊がありますよ)

    ノンデザイナー向けのスライド・「Webデザインのセオリーを学ぼう」
  • 良いデザインって?技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと

    デザイナーになりたいって思った時にPhotoshopやIllustrator、csshtmlを勉強しなきゃな〜><て考えると思うのですが、技術的なことを学ぶ前にまずデザインが出来なきゃ始まりませんよね。 センス?かっこ良さ?奇麗さ?良いデザインにしたいけど、何をしたらいいかわからない。そんな時に何を考えたら良いのかデザインの基をまとめてみようと思います XD はじめに 良いデザインって? 最良の方法? 1.コンテンツの目的 2.ターゲット 3.これらを組み合わせた例 デザインの基 1.書体について 2.ジャンプ率 3.ホワイトスペースを生かす >ホワイトスペースで情報を分割する >ホワイトスペースで囲む >ホワイトスペースにあえてはみ出す 最後に はじめに デザインという言葉を聞くと、かっこいい、かわいい、おしゃれ、きれい、などと感覚的なものを思い浮かべる方が多いのではないでしょうか

  • [連載]Webデザイン入門(1日目) | Stocker.jp / diary

    日から新たに、「Webデザイン入門」というタイトルで連載を始めます。 9月からWebスクールの講師をさせていただいているのですが、そこでカリキュラムとして渡されたテキストには「Photoshop や Dreamweaver 等のソフトの操作説明」しかされておらず、ソフトの操作方法を習得しただけではWebデザイナーとして就職し、仕事していくのは少々厳しいのではないかと思いました。 そこで、ソフトの操作方法と平行して「Webデザインそのもの」について考える時間を設けたいと思い、オリジナルのカリキュラムを作ることにしました。 ここでは、そのカリキュラムの一部をブログ形式にして掲載しています。 既にWebデザイン仕事をされている方はご存知のことばかりかもしれませんが、これからWebデザイナーになりたい方や、今はプログラミングなどデザイン以外の仕事をされていて、これからデザインも手がけてみたいと

    [連載]Webデザイン入門(1日目) | Stocker.jp / diary
    rutebozu
    rutebozu 2011/09/28
    前者を「プログラムを書けること」に置き換えると人事じゃない。 「「ソフトの使い方を知っていること」と「デザインができる」ことは別の技術」
  • kuler

  • プログラマーがかっこいいWEBサイトを作る5つのコツ - おかねがない(゚∀゚)ッ!!

    「かっこいいサイト作るぞ!」 と意気込んでみたももの、いざ作ってみると 「あれ・・・なんかダサい・・・」 WEBサイトを作成したことのあるプログラマーの方なら、 経験したことがある方も多いのではないでしょうか? WEB制作は、基的に、デザインはデザイナー、システムはプログラマー、という 役割分担の元に作業が行なわれるため、プログラマーが見栄えのするサイトを作ることは、 簡単なようで、なかなか難しいことです。 かくいうプログラマーである私も、いくつかのWEBサイトを個人的に作成してきましたが、 自分で納得のいく見た目のサイトが作れず、夜中の謎のハイテンション時にデザイン を完成させ、1度寝てから再度確認すると、そこには見るも無残なWEBサイトが・・・ なんていうことを何回も経験してきました。 そこで私が試行錯誤した結果を元に、プログラマーが、シンプルながら ある程度見栄えのするWEBサイト

    プログラマーがかっこいいWEBサイトを作る5つのコツ - おかねがない(゚∀゚)ッ!!
  • 優れたユーザインタフェースを設計する際に考慮する8つのポイント

    ユーザーにとって有益なユーザインタフェースを設計する際に考慮する8つのポイントをUsability Postから紹介します。 8 Characteristics Of Successful User Interfaces 以下、その意訳です。 ユーザインターフェイスの設計時に、考慮する8つのポイントを紹介します。 Clear Concise Familiar Responsive Consistent Attractive Efficient Forgiving To conclude… 1. Clear 明快 明快であるというのは、最も重量な要素です。 ユーザインターフェイスデザインの目的は、ユーザーに意味と機能を伝え、利用するアプリケーションと相互につきあえるようにすることです。そのアプリケーションがどのように機能するのか、どこに進むべきか理解することができない時は、ユーザーは困惑しが

  • 10人のデザイナさんに駄目出しして頂きました:Geekなぺーじ

    10名のデザイナの方々に「Geekなぺーじ」デザインダメだしをして頂けました! 何か凄く豪華な会合をして頂いて非常に恐縮です。。。 昨晩早速いくつかサイトデザインを変更してみました。 以下に、会合は開催された経緯、そこでの指摘、昨晩の変更点を述べます。 会合が開催された経緯 「Geekなぺーじのデザインは駄目だろう」とずっと思っていたのですが、「どうすれば駄目ではなくなるか」に関してどうして良いのかが全くわからないという日々が数年間続いていました。 そして、キッチリとしたサイトを作れる方々に対する憧れというものがありました。 ある日、twitterで何度かやり取りをして、その後某新年会でお会いしたcremaさんが過去の勉強会資料(デザイン勉強会の資料を公開します。)を教えてくれました。 それを見て「これはすごい」と思ったのですが、「じゃあ、この考え方を自分のサイトに適用したらどうなるの?」

  • 絵がうまくなるための11か条

    ■好きな絵を描く ・最初はモチベーションが大事 ・気になれる ・適当なものを描けば適当に終わる ・楽しい ■立体で描く ・輪郭線で物を見ない ・構造を理解する ・奥行きを意識する ■模写する ・模写は悪いことじゃない ・正しい線を手と頭に叩き込む ・自分の描きたい絵柄を見つけろ ■資料をかならず見る ・嘘をついてはいけない ・想像で描くのは自爆 ・嘘を描く場合でも、物を見ろ ■省略しない ・最後まで描く ・顔で終わらない ・バストアップで終わらない ・ディテールを略さない ・細い線で描く ■ライバルを作る ・相手よりも上手くなりたいと思え ・達成可能な目標地点を作る ・時には自惚れろ ■自分を追い込む ・絵を描かなきゃいけない状況を作る ・毎日○枚は描く、という目標を立てる ・頑張らなければ一生絵は下手糞だ ■自分より上手い人に見てもらう ・間違った部分を理解する ・正しい指摘をしてく

    絵がうまくなるための11か条
  • 秀逸なユーザビリティのボタンをデザインするための5つの秘伝 - GIGAZINE

    ユーザビリティを考える上でかなり重要なのがボタンのデザイン。聞いた話だと、某どこかのローンお申し込みページではボタンのサイズを極端に大きくして目立つようにして、ボタンに「OK」とか「投稿」ではなくデカデカと「今すぐ申し込む」というようにラベリングしたところ、数百パーセント増しで申込みがあったとのこと。ほんの少しのデザインの差でもバカにはできません。 というわけで、いろいろな有名サイトのアイディアが詰まって練り込まれたボタンのデザインを見てみると、どれもこれも一見すると普通に見えるようでも、実はそうではないことがわかります。それらには共通して5つのルールが適用されています。 秘伝の法則は以下から。 ■秘伝その1:色 ボタンの色はページの他のものよりも目立たせ、より明るく、そしてコントラストを効かせてページのカラーとは対照の色を使いましょう。 ■秘伝その2:場所 ユーザーがすぐに見つけることが

    秀逸なユーザビリティのボタンをデザインするための5つの秘伝 - GIGAZINE
  • 1