タグ

デザインに関するikosinのブックマーク (297)

  • クックパッドの新しいロゴに込めた思い - クックパッド開発者ブログ

    ユーザーファースト推進部デザインチームの上ノ郷谷 (かみのごうや) です。 9月1日よりクックパッドサイトのロゴが新しくなりました。もうみなさまご覧になっていただけたでしょうか。 ロゴを新しくしたのは、2014年から格的にはじまった世界展開に合わせて「毎日の料理を楽しみに」を世界へ。という思いをもっと知ってもらうため。そして世界中のみなさんに親しみを持ってもらいたいという思いからです。 ロゴの基的な構成、使われている色には変更はありませんが、さまざまな思いを込めた大きなマイナーチェンジになったと思います。ロゴデザインを担当したものとして、どのようなことを考えながら作ったのかを書いてみます。 これまでのロゴと新しいロゴ まずはクックパッドのシンボルでもあるコック帽のロゴマーク。このロゴマークをもっと強調させ、認知を高めるために茶色い枠を外しました。枠を外すことでキーカラーのオレンジの印象

    クックパッドの新しいロゴに込めた思い - クックパッド開発者ブログ
  • iOSアプリデザインリニューアルの舞台裏 - クックパッド開発者ブログ

    モバイルファースト室の @slightair です。 先ほど、デザインをリニューアルしたクックパッドiOSアプリ 6.0.0 をリリースしました。 https://itunes.apple.com/jp/app/kukkupaddo-no.1reshipi-jian/id340368403?mt=8 この記事では、どのようにして新しいデザインをiOSアプリに適用していったのかを紹介したいと思います。 新しいアプリの画面 スクリーンショットを見ていただければわかるように、全体的にフラットな印象を与える画面に変わりました。 トップ レシピ詳細画面 サイドメニュー この記事で全ての画面を紹介することはできませんが、ぜひダウンロードしてお手持ちのiOS端末で触ってみてください。 新デザインの適用 基的には、画面デザイン案をもらい、既存のアプリを修正して少しずつ適用していく形で進めていきました。

    iOSアプリデザインリニューアルの舞台裏 - クックパッド開発者ブログ
  • ウェブサービス開発の現場におけるデザイナー不要論と5〜10年後の生存戦略 - 情報建築家 石橋秀仁

    稿では、まず「ウェブサービス開発の現場で、ウェブデザイナーの仕事エンジニアに奪われつつある」という脅威を語る。次に、生存戦略を考えるヒントとして「分かりやすい生存戦略」を2つ提示する。「アートディレクター」と「フルスタックウェブデザイナー」という2つの生存戦略だ。 なお、「仕事を奪われていくプロセス」と「生存戦略を遂行するプロセス」について、5〜10年程度のタイムスパンをイメージしている。 ウェブデザイナーの仕事エンジニアによって奪われつつある ウェブサービス開発の現場では、ウェブデザイナーの仕事エンジニアプログラマーによって少しずつ奪われつつある。とくに小さな組織や新規事業の現場では。 象徴的なのは「Bootstrapがあればデザイナー不要だよね」論。「もはや社員としてデザイナーを雇う必要はなくて、必要な時にランサーズで発注すればいいよね」「スタイルシートいじったり画像パーツ作

    ウェブサービス開発の現場におけるデザイナー不要論と5〜10年後の生存戦略 - 情報建築家 石橋秀仁
  • Style Tiles

    Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client. Style Tiles are similar to the paint chips and fabric swatches an interior designe

    Style Tiles
  • コーディングを考慮したWebデザインガイドライン

    2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。Read less

    コーディングを考慮したWebデザインガイドライン
  • プログラマーがイラレで絵を描けるようになると、こうなる - ppworks.jp

    プログラマー、絵が描けないじゃないですか(偏見) こんなじゃないですか。 なので描けるようになりたいなとずっと思っていて、ベジェ曲線って滑らかでナンカヨサソウ、とチャレンジしました。 「ベジェ曲線」習熟ドリル 7,8年前に買ったのがこれ。そう、チャレンジは2回目なのです。前回は3ページぐらいで挫折してました。んで、最近急に暇になったのをキッカケに「よしやろう」という気になり始めたのです。 改訂二版〈Illustratorで学ぶ〉「ベジェ曲線」習熟ドリル 作者: 中村高之出版社/メーカー: ラピュータ発売日: 2005/04メディア: 単行購入: 2人 クリック: 8回この商品を含むブログ (4件) を見る (2014.1.10追記) なんと、長らく手に入りにくかったこちらの書籍が新装改訂版で再登場とのこと。 表紙が若干、損していた分、今回はスタイリッシュで内容と合っていてヨサソウです。

    プログラマーがイラレで絵を描けるようになると、こうなる - ppworks.jp
    ikosin
    ikosin 2014/07/19
    フルスタックだ
  • WebエンジニアのためのWebサービスデザイン実践講座

    DeNA 社内勉強会に呼んでいただいて、お話させていただきました。 Reviewに登場していただいてるサービスはこちらです。 動く小説投稿サイト Denkinovel by @katryo さん http://denkinovel.com/ ご協力ありがとうございました( ˘ω˘)

    WebエンジニアのためのWebサービスデザイン実践講座
    ikosin
    ikosin 2014/07/18
    ( ˘ω˘)
  • コンテンツ無しのUIギャラリー Empty States

    コンテンツ無しのUIギャラリー Empty States
  • 情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ

    Empty Data(またはEmpty Status)」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります(Webでの404に近いですが、少し違います)。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考:モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし

    情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
  • Material Design

    Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

    Material Design
  • Google Design

    “What if form did not just follow function, but also followed feeling?” Without compromising the functional foundations of our apps, Material You seeks to create designs that are personal for every style, accessible for every need, alive and adaptive for every screen."

    Google Design
  • デザインの役割からみる「トーン」と「マナー」

    こんにちは。デザイナーの山口陽一郎です。 去る2014年2月19日(水)に、株式会社パソナテック様主催のセミナー「クリエイターのためのトーン&マナー設計」にて登壇させていただきました。 皆さんは「トーン&マナー」という言葉を耳にしたことがありますか?「トンマナ」と略されることの方が多いかもしれません。その説明の前に、ちょっと寄り道をさせてください。 デザインのふたつの役割とトーン&マナーの演出 デザインには大きく分けてふたつの役割があります。 1. 機能性を高める これはユーザーにとって製品をより使いやすくしたり、誤操作の危険をなくしたり、迷わないようにサポートするための役割です。 そしてもうひとつが今回のセミナーのテーマとしてとりあげた、 2. トーン&マナーの演出 です。製品に、それが使われる場にふさわしい属性・キャラクターを付与する役割です。 たとえばレジャーグッズなら「楽しさを想起

    デザインの役割からみる「トーン」と「マナー」
  • Webデザインの間違い・トップ10

    ここで挙げるのは、ユーザーに対する残虐行為の、もっとも酷いものトップ10だ。極悪なユーザビリティは、かつてより少なくなったものの、Webデザインの悲劇やHTMLホラーはいまだに多い。 Top 10 Mistakes in Web Design by Jakob Nielsen 1996年5月1日 1996年以来、私は多くのWebデザインの間違いトップ10を作ってきた。全リストへのリンクは、この記事の最後に載せてある。この記事は、全リストの中からもっとも酷いものを集めた、ハイライトだ。(2004年更新) 1. 質の悪い検索エンジン 必要以上に一言一句にこだわる検索エンジンは、ユーザビリティを低下させてしまう。入力ミスや、単数/複数の違い、その他の検索語の揺れに対応できないものが、これに該当する。こういった検索エンジンは、特に高齢者のユーザーにとって使いにくいものになるが、誰にとっても問題では

    Webデザインの間違い・トップ10
  • ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ

    「ウェブの未来を担う次のUIデザインは『カード』にあり」と言われるなど、ウェブサイトを格子状にレイアウトしたグリッドデザインは人気で、多くのアプリやウェブサイトで採用されていますが、実際にグリッドデザインと以前からあるリストデザインの2種類をテストしてみたところ、「リストデザインの方が明らかに見やすく、ユーザーの反応がいい」という結論が出ました。 List Beats Grid: Linear Feeds Perform Two to Three Times Better Than Grids http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/ グリッドデザインとリストデザインのどちらが当に効果的なのか?ということを調査したのはソ

    ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ
  • 自分のwebサイト作る工程 - MEMOGRAPHIX

    2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ

    自分のwebサイト作る工程 - MEMOGRAPHIX
  • 大体いい感じになるKeynoteテンプレート「Azusa」作った - MEMOGRAPHIX

    いい感じのスライド、作るのむずいので、大体いい感じになるKeynoteテンプレート作った。ここからダウンロードできる。 Azusa - 大体いい感じになるKeynoteテンプレート解説サンプルも兼ねた解説スライド作った。 Introducing Azusa // Speaker Deckだいたいスライドに書いたけど要約すると下記のようなことを考えた。 スライド作るの難しい色とか難しいかっこよくしたいAzusaっていうのを作ったAzusaは、大体いい感じになるKeynoteテンプレートです Azusaの特徴大体いい感じになるカラースキーム大体いい感じになるフォント大体いい感じになるマスタースライド色カラースキーム考えた 白っぽい色(白っぽいクリーム色とか白っぽいねずみ色) 黒っぽい色(赤っぽい黒とか青っぽい黒とかそういうの) 緑とか青とかピンクとかのアクセントカラー1色 原色すぎないほうがイ

    大体いい感じになるKeynoteテンプレート「Azusa」作った - MEMOGRAPHIX
  • in the looop | Looops communications

    ループス・コミュニケーションズは、 企業のSNS活用戦略の立案・運用改善、啓発教育などのコンサルティングサービスや、リーダーシップやイノベーションをテーマとした企業研修を提供しています。

  • 理系にも分かるイラストの描き方

    ちょっとしたイラストが描けたらなぁ。なんて思うこと多いですが、デジタルならではの方法で簡単に描く方法が公開されていたので、簡単ですが訳したいと思います。詳細はオリジナル記事であるHow to Draw Cute Thingsを御覧ください。 最初に好きなネコとかハムスターとかナマケモノなどの動物の画像を用意する。基的に何でも良いけど、慣れるまではモフモフ系がやりやすいみたい。トカゲとか蛇はむずい。 選んだ動物を円の集合にする 円じゃなく三角や四角を使ってもよい。動物をシンプルにする工程。画像ソフトのシェイプから選んでね。 できた形の輪郭を描く 必要のない線を消す。余裕あったら脇の下を細めたり足の重なりを上手に書いたりしてみる。 全体のバランスを変形してかわいくする 頭大きくしたり、胴体縮めたり、太らせたりしてかわいくする。ここはセンス。 可愛さは目に宿る 目が一番大事。サンプルを参考に。

    理系にも分かるイラストの描き方
    ikosin
    ikosin 2014/04/02
    イラスト書いてこれ( https://suzuri.jp/ )で出品したくなる
  • 『難しくないデザイン効率化のすすめ』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。アメーバゲーム部門でデザイナーをしております吉田直由と申します。 リリース直後からの1年2ヶ月の間、ガールフレンド(仮)でUIデザインの運用を担当しておりました。 運用のフェーズになると大きく問題になってくるのが「業務の効率化」ではないかと思います。便利ツールの導入や、難しい技術の取得などもありますが、、、使い慣れない技術は逆に効率を下げる結果になってしまうのでは? と、なかなか一筋縄ではいかない問題です。 ガールフレンド(仮)デザインチームの場合、1年目~3年目の若いメンバーが多く、さらにメンバーの数も10人という大所帯でした。 どう

    『難しくないデザイン効率化のすすめ』
  • クックパッドの元山和之氏「デザイン力向上のカギは観察すること」【連載:UI・UXキホンのキ】 - エンジニアtype | 転職type

    「デザインが分からない」 時折、エンジニアからこうしたセリフを聞くことがある。 たいてい、このセリフが意味するのは「自分には絵心やセンスがないから」という単純な理由なのだが、当に絵心やセンスがないとデザインは理解できないものなのだろうか? この連載では、デザインの質的なロジックやデザイナーの思考法を、毎回著名サービスにかかわるデザイナーに語ってもらう。 連載第一回目となる今回は、日最大の料理レシピサイト『クックパッド』のデザイナー、元山和之氏の登場だ。 クックパッド株式会社 デザイン部 デザイナー 元山和之氏 1985年生まれ。 名古屋市立大学芸術工学部を卒業後、広告代理店を経てはてなに入社。『はてなブックマーク』のメインデザイナーを務めた後、2013年3月にクックパッドへ移り、サイト全般のデザイン業務にかかわる。ほか、社内で利用されるデザインフレームワークづくりにも携わっており、プ

    クックパッドの元山和之氏「デザイン力向上のカギは観察すること」【連載:UI・UXキホンのキ】 - エンジニアtype | 転職type
    ikosin
    ikosin 2014/03/03
    “デザインへの理解を深めるための情報源”