タグ

webdesignに関するOkkyのブックマーク (361)

  • Humaaans by Pablo Stanley - Illustrations on Blush

    Add a humaaan touch to your compositions!

    Humaaans by Pablo Stanley - Illustrations on Blush
  • フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと|Pittan|note

    フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか(前置きなので次の章まで飛ばしてOKです) デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう?」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか?」と質問するのが何か新しい画面を作るときに必ず発生していました。 「(いつも聞いてる

    フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと|Pittan|note
  • Low-fidelity wireframes

    WireframesBuild low-fidelity wireframes with drag-and-drop components.

    Low-fidelity wireframes
    Okky
    Okky 2018/07/19
    figmaとの組み合わせで活用できそう
  • 独学でWebデザイナーになるためのWebデザイン勉強法

    こんにちは! Webデザイナーのおまめです。 私は実務未経験でWebデザイナーとして採用してもらったのですが、「美大も出てないのにどうやってWebデザイナーになったの?」と聞かれることが多くなってきました。 そこでこの記事では、私が全くの初心者から独学でWebデザインを勉強した方法や、Webデザイナーになるまでの過程を詳しく紹介します。また、未経験からWebデザイナーになった友人や先輩の体験談を集めて、叡智を集結させました。 独学でWebデザイナーを目指したい人はもちろん、副業Webデザイン仕事がしたいという人にも必ず役立つ内容になっているので、ぜひ最後までご覧ください。 スクールに通う場合は…… 「デジタルハリウッドSTUDIO by LIG」では未経験から6ヶ月で「現場レベルの」Webデザイナーを目指せます。働きながら学ぶ社会人も多数です! 「デジタルハリウッドSTUDIO by

    独学でWebデザイナーになるためのWebデザイン勉強法
  • Sketch移行とUIコンポーネント化で、良いことしかなかった話

    アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデータの属人化、という問題IQONは2010年にサービスを開始・運用してきたため、デザインデータの量がかなり多く、最新のデータがどこにあるのか分かりづらかったり、デザインデータのつくり方が「属人化」していたことが問題となっていました。 サービスの成長にともない2015年頃から徐々にデザイナーが増えてきましたが、新しいデザイナーが入った際すんなり作業を開始することが難しかったり、急対応が必要な際に作業し

    Sketch移行とUIコンポーネント化で、良いことしかなかった話
  • レスポンシブWebデザイン時のメインビジュアル周りの挙動の考察

    こんにちは、森山です。 最近のブログではレスポンシブWebデザインのことばかり取り上げていますが、実際に現在お受けしているお仕事もほぼ100%がレスポンシブWebデザイン対応でご依頼いただいています。 おかげさまでレスポンシブWebデザインの経験を積ませていただくことができ、制作の際もあまり悩むことは少なくなってきたのですが、そんな今でも「ここどうしよう・・」と私を悩ませることがあるのが「メインビジュアル」(あるいはスライドショー)周りの挙動についてです。 写真だけを表示している場合は単純に縮小すれば問題ないことが多いのであまり困らないのですが、難しいのはキャッチコピーなどのテキストと合わせて表示させたい場合です。実際に制作するサイトはこのパターンがとても多いのですが、写真と同じ比率で文字まで縮小すると読めないし、でもある程度可読性が保てる文字サイズを維持しようとすると今度はレイアウトを再

    Okky
    Okky 2018/05/07
    レスポンシブのメインビジュアルをどうするか
  • http://www.life-is-bitter.com/entry/ui_checklist

    http://www.life-is-bitter.com/entry/ui_checklist
  • サイトのメインビジュアルに悩んだときに参考にしたい!11個のレイアウト手法 - Hatsuka

    最近のwebサイトは、トップのスライドショーや、1画面にドーンとメインビジュアルがあるものが当たり前になってきています。 メインビジュアルを作るのが苦手な私ですが、ある程度レイアウトのセオリーを知っておくことで、少しは苦手意識が払拭できるのかなと思っています。 ということで今回は、11のレイアウト手法を元に、参考サイトを33個ピックアップしてみました。 1.反復 同じモチーフを繰り返し置くことで、強調させる手法です。 サイズや色を変えてたり、コマ撮りっぽくすることで、リズム感が出ます。 商品やロゴ、人物など、なにか強調したいものを見せたいときに使えます。 Life is electric SAKUZAN|美濃焼のうつわ 作山窯 good design company 2.対比 2つ以上の要素を、同じ構図や分量で配置する手法。 情報に優劣をつけず等しく見せたいときに使えます。 webではメニ

    サイトのメインビジュアルに悩んだときに参考にしたい!11個のレイアウト手法 - Hatsuka
    Okky
    Okky 2018/04/10
    メインビジュアル
  • SANKOU! | Webデザインギャラリー・参考サイト集

    コーポレートサイト ブランドサイト・サービスサイト ECサイト・オンラインショップ キャンペーン・特設・プロモーションサイト ポータルサイト・メディア・情報サイト プラットフォーム・コミュニティサイト 採用サイト・採用ページ ポートフォリオサイト スタイリッシュ オーソドックス ユニーク 遊び心がある・作り込まれている イラストを使用 3D表現・3Dイラストを使用 シズル感・訴求力のある写真・動画使用 写真少なめ・写真以外のビジュアル表現 さりげない動き・動きなし やや動きあり ダイナミック・印象的・細やかな動き 日語メイン ノーコードツール「STUDIO」で制作 スマホ特化・モバイルファースト Web・ITAI・デジタル・テクノロジー・通信関連 サービス・アプリ・ツール 病院・クリニック・歯医者・医療・薬 学校・教育・幼稚園・保育園・スクール 金融・投資・保険・士業 カフェ・飲店・

    SANKOU! | Webデザインギャラリー・参考サイト集
  • 講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)

    2014年2月19日(水)開催のパソナテック様主催セミナー「クリエイターのためのトーン&マナー設計について」の講演資料です。 発表者:山口陽一郎(株式会社コンセント デザイナー) This is a presentation about tone and manner design for creators. Prepared by Mr. Yamaguchi from Concent, Inc., for Pasonatech staff seminar on February 19th, 2014. Read less

    講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
    Okky
    Okky 2017/10/10
    トンマナの考え方。わかりやすい。
  • ランディングページの作り方、7つの超重要ポイント。

    ランディングページ(LP)の作り方を、超重要ポイント7つに絞って説明します。対象読者は、これからLPを作成する方です。インハウスのご担当者だけでなく、制作会社さんが読んでも役立つでしょう。作り方だけでなく、コンバージョン率をアップさせる点も、詳しく解説したからです。1回読んで分からなければ、繰り返し読んでください。それだけ価値ある内容になっています。 ランディングページの構成。 まず最初に、ランディングページの構成について、左図を使って説明します。ランディングページの構成は、大きく7つのブロックに分かれます。 キャッチコピー。 お客さんの関心事を、ズバリ指摘します。関心事とは、対象ユーザーが抱える、悩みや課題です。このパートは、メインコピー(1行)とサブコピー(2行)、写真の3つの部分で構成されます。 共感部。 なぜ多くの人が関心を持つのか? お客さんの気持ちに寄り添いながら、言葉で解きほ

    ランディングページの作り方、7つの超重要ポイント。
  • インプットを習慣にする - LOG

    Webデザイナーとして一番最初の会社に就職したとき、よく先輩から「インプットをしろ」と言われた。 Webデザインのブックマークサイトを見たり、Dribbbleを見たり(当時はまだBehanceやPinterestは全然流行ってなかった)するということ。Webに限らずデザイナーなら誰でも一度は言われることだと思うけど、最初はなかなか大変で、苦痛だった。 僕は学生時代から自分のサイトを作ったりはしていたけど、業務は未経験だったので、最初はとにかく仕事をこなすのに必死だった。その時にいただいたフィードバックは今でも自分の中に大切なものとしてしまわれているけど、まぁそれは置いといて。 ただでさえ仕事は未経験のことばかりで大変なのに、それに加えてインプットをするなんて、時間や脳のリソースがない感じ。あと、インプットをしろと言われても、一体どうインプットすればいいんだ?と悩んでいた記憶がある。 インプ

    インプットを習慣にする - LOG
  • 読みやすさのデザイン備忘録 | 深津 貴之 (fladdict) | note

    noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。 来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック(経験)ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です(現時点では個人の見解です)。基的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。 書体をサンセリフ系に変えるべきか?デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも

    読みやすさのデザイン備忘録 | 深津 貴之 (fladdict) | note
  • シリコンバレーで学んだ海外Webサイトの美しいHTMLメール15事例 - パパパパ

    Webサービスの運営をしていると、「いかにユーザーを集めるか」と同時に「いかにリピーターになってもらうか」という課題にぶつかります。リピーターになってもらうための一つの施策として考えられるのが、登録ユーザーに定期的にメールマガジンやお知らせメールを届けるメールマガジン。以前であれば、テキストメールを工夫して”文字で魅せて”いましたが、最近ではHTMLメールで非常に綺麗にデザインされたメールが届くことが多くなっています。そこで今回は、以前に紹介したシリコンバレーで教えてもらった美しいWebサービスを中心に、各サービスがどのようなHTMLメールを作って、配信しているかを紹介したいと思います。 人の心を動かすような美しいデザインのメールが届いたら、それだけでサービスを好きになったり、見る目が変わったりします。そんな素敵なメールを集めてみました。 1. zozi http://www.zozi.c

    シリコンバレーで学んだ海外Webサイトの美しいHTMLメール15事例 - パパパパ
    Okky
    Okky 2016/08/18
    メールマガジンのデザイン
  • かっこいい日本語フリーフォント16選(デザイン向き) - 無料で使える日本語フォント投稿サイト|フォントフリー

    語のフリーフォントを利用してデザインする際などに「クールなデザインにしたい」「かっこいいフォントを使いたい!」という場面があるかと思います。 ただ、英語のかっこいいフォントはすぐに見つかるのに、日語になるとすぐに見つけられないということがあります。 そこで今回は、デザイン性が高くてかっこいい日語フリーフォントフォントのタイプに分けてご紹介していきます。 商用利用可能なものから、漢字を含んだもの、カタカナのみのかっこいいフォントまで幅広く用意してみましたのでご覧ください。 かっこいいゴシックフォント 鉄瓶ゴシック 鉄瓶(てつびん)ゴシックは、フォントな自由さんが公開している角ゴシックフォントです。 「源ノ角ゴシック」を改変して制作されており、極太の文字かつごつごつとした質感がかっこいいフォントです。 商用:OK ひらがな:◯ カタカナ:◯ 漢字:◯ ▷ 鉄瓶ゴシック スマートフォン

    かっこいい日本語フリーフォント16選(デザイン向き) - 無料で使える日本語フォント投稿サイト|フォントフリー
  • Color Palettes for Designers and Artists - Color Hunt

    Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.

    Color Palettes for Designers and Artists - Color Hunt
  • UXに関わる仕事をして感じた4つのこと | ベイジの日報

    当社がWebサイトを企画・設計するときは必ずユーザ行動の分析から入り、ここ4年くらいはカスタマージャーニーを作ることが定番化している。そのため、Webにおける設計業務の一環としてUXデザインの一部は行っていた。しかしながら、サービスの根幹に関わる類のUXデザイン的な仕事はほとんどなかった。 ところがここ1年くらい、UXコンサルというか、アドバイスというか、 支援というか 、単にWebのUI改善を超える立場での仕事を依頼されるケースがでてきた。一般企業でもUXという言葉が使われるようになってきており、市場の中で課題意識は高まっている。一方で専門職としてのUXデザイナーはまだまだ少なく、実務に落とせる人材が不足しているからだろう。 そのUX支援っぽい仕事をいくつかする中で、UXを実践するうえで私なりに感じたことがある。その中から4つほどをまとめてみた。 まず1つ目、概念的なUX理論をいくら知

    UXに関わる仕事をして感じた4つのこと | ベイジの日報
  • The Blog | Welcome to Adobe Blog

    The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

    The Blog | Welcome to Adobe Blog
  • UIデザイナーに必要なのは、決定力のあるデザインを作る能力 | tsublog

    最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり

    UIデザイナーに必要なのは、決定力のあるデザインを作る能力 | tsublog
    Okky
    Okky 2016/05/16
    伝える、伝わることを前提にしたデザインを用意することが大事というのは当たり前かもしれないが大きなポイントだと思う。
  • 【境界が無くなる】デザイナーとエンジニアの仕事内容 デザイン会社 ビートラックス: ブログ

    アメリカ、特にサンフランシスコ周辺の会社を見てみると、エンジニアに加えてデザイナーの需要が高まっている。これは見た目やUXが優れたプロダクトへの人気が上がっており、企業としてもよりユーザー目線で使いやすくニーズにあった製品を作る為に、企画段階からデザイナーを参加させる事が増えていているからであろう。 それに伴いデザイナーの役割が、これまでの”見た目を美しくする”事から”ユーザー視点で最適な問題解決方法を見つけ出す”へと広がりを見せている。 このビジネスに対するデザインの重要性の高まり-デザインシフト-でデザイナーやエンジニアに求められるその役割と仕事の範囲に変化がおき始めている。恐らく10年程前と比べてみると、それぞれの仕事の範囲が多種多様に広がっているのに加えて、オーバーラップする領域も増えているだろう。 デザインの未来を示す15の変化で下記のような項目があった。 “デザイナーとエンジニ

    【境界が無くなる】デザイナーとエンジニアの仕事内容 デザイン会社 ビートラックス: ブログ
    Okky
    Okky 2016/05/04
    とはいえ軸足となるスキルは必要なので、T字型のスキルセットが大事なのかなぁ。