前の会社では新人ウェブデザイナーが必ずやっていたことの一つに、文字詰め1,000本ノックがありました。1,000は大げさな数字ではなく、実際にはそれ以上の数をこなしていたと思います。 ウェブデザインのUI/UXにおいてタイポグラフィは重要な存在で、特にミニマルやフラットなどはタイポグラフィが非常に重要な役目を担っています。 フォントやタイポグラフィの知識を深め、テクニックを身につけるのに役立つ情報をまとめました。
趣味などでWebサービスを作るときにもっとも悩ましいことのひとつがデザインだと思う。外観は重要な要素だとは理解しているし興味も一応あるけれど、実践に乏しいからどうしていいのかわからない。かといって、タダで頼めるような都合のいいデザイナーはいない。結局めんどうになって、Twitter Bootstrapで体裁だけでっち上げた妙にオタク臭いデザインになってしまう。僕もかつてはデザインを気にも留めないクソエンジニアだったけど、必要に迫られて勉強したらそれなりに手を動かせるようになったのでその方法を紹介する。僕が今年入社したスタートアップにはデザイナーがおらず、新機能を作るときなど仕方なくデザインをこなす必要があった。結果的に、仕方ないなりにPhotoshopを使ってプロトタイプを作りHTML/CSSコーディングするくらいはできるようになった。ここに書くのは仕方なくそれなりのWebデザインをする方
こんにちは、ユーザファースト推進部デザイングループの元山です。 デザイナーの皆さんはWebやアプリなどをデザインする上でフォントを作った事があるでしょうか? ずいぶんと前から「これからはWebフォントの時代だ」なんて言われながらも、現実は中々使うのが難しいなぁと感じている方は多いかもしれません。 今回はクックパッドで実際に作ったオリジナルフォントを使ったWebやアプリのデザインについて事例を交えながら紹介してみたいと思います。 クックパッドでの事例 印象と機能を向上させるデザインのためのフォント ブラウザやアプリの標準のフォントではない特殊なフォントを使う理由として真っ先にあげられるのは、やはり文字の雰囲気や見た目でデザイン的な印象や見え方を向上することができる点だと思います。最近ではAppleのWebサイトもオリジナルのWebFontを使ったデザインに変わりましたね。 クックパッドでは特
TL;DR 先日名刺の入稿用データを作成していたのですが、印刷物用のデザインは慣れていなかったので結構時間がかかってしまいました。Web 関係の知識だけでは、綺麗な制作物は出来ないと思い、総合的なデザインができるようにデザインの基礎を勉強。今回は Web 関係者も知っておきたい、タイポグラフィやフォントに関する知識をまとめました。また使う機会があるかもしれないので、メモしておきます。 レイアウト 視覚的に明快で上手に配置されたものは読者に好まれます。そういったレイアウトを作るために、余白の使い方や文字や画像配置などの知識をおさらいします。 1.アクティブ・ホワイトスペース 小さなテキストを広い余白に配置すると存在感が増し、視線の滞在時間が長くなります。余白は一見無駄のように見えますが、意図的に配置されていることが多いです。 余白の美 空白により読者のコンテンツの読み進めを制御することができ
いつもは海外のウェブサイトをテーマごとにまとめて紹介していますが、たまには日本のもと思い、まとめてみました。 デザインやアイデアによい刺激をうける国産のウェブサイトを紹介します。 海外のも定期的にまとめています。 面白いアイデアを使った最近のウェブサイトのまとめ -2014年3月 デザインや仕掛けが素晴らしいウェブサイトのまとめ -2014年1月 MIDORI AOYAMA DJ/プロデューサー Midori Aoyama氏のサイト。フラット・スクロールの定番のトレンドに斜めのグリッド、ポリゴン、アニメーションなど最新のデザインが非常にかっこいいです。制作会社はLETTERS, INC.で、今日リニューアルしたばっか!
こんにちは、デザイナーの佐藤タカアキ(@sato_tkaaki)です。 突然ですが、柔らかいものは脳に快感を与えて、緊張を緩める効果があるって知っていますか? 脳がリラックスすることにより、様々なアイディアが生まれるのだそうです。 日々の業務でアイディアに詰まってしまう時もありますよね。 そういう時はほっぺたを触ってリラックス…しても出ません、そんなんじゃ。 そこで今回は、デザイナーにオススメしたいアイディアの集め方とその活用方法をご紹介します。 なぜアイディアが浮かばないのか? そもそも、どうしてアイディアが浮かばないのでしょうか。 感性が豊かじゃないから?暇さえあればいやらしい妄想ばかりしちゃってるから?ちがいます。 それは経験や知識など、そもそも持っている武器が少ないからではないでしょうか。 ここで再確認しておきたいのは、ゼロから生まれるアイディアは存在しないということ。 アイディア
フラットデザイン、今や大きなトレンドとなっています。 これまであれだけ「Skeuomorphismデザイン」を推進してきたAppleでさえ、iOS 7からフラットデザインを採用し始めました。潮流とは儚いものですね。 フラットデザインの特徴上、見た目がシンプルで質感を要しないので、制作するのに「Skeuomorphismデザイン」ほど時間がかからず大量生産できちゃいます。なので、質の高いアイコンセットを選りすぐるのには結構時間がかかります。 ということで、今回はそんな「フラットデザイン」に使えるエレガントなアイコンセットを20個集めてみました。参考になればと思います。 フラットデザインに使える無料アイコンセット20選 5 Flat Popular Browsers Icons Set PSD https://gooloc.com/5-flat-popular-browsers-icons-s
by Ugo Cristofori デザイナーにとってデザインのディテールは非常に気になるところですが、デザイナー以外には違いがあまり伝わらず「ボタンを3ピクセル動かすだけで製品が改良されるの?」と言われたりします。しかし、プロダクトデザイナーとしてGoogle Venturesで働いているBraden Kowitzさんは「それでもデザイナーは細部にこだわるべき」として、細部までこだわるべき理由と、他の人たちにそれをどう伝えるべきかのテクニックについて語っています。 Why you should move that button 3px to the left | Google Ventures http://www.gv.com/lib/design-details ◆デザインは外見のためだけに行うのではない by Bytemarks ・ディテールを適切にすると信頼感が増す 顧客がオンラ
素晴らしいデザイナーは日々、自身のスキルを向上しています。 「もうここで十分です」と言って成功したデザイナーを誰も聞いたことがないでしょう。 ウェブデザイナーのスキルアップに役立つ20のメソッドを紹介します。 20 Methods for Upping Your Current Web Design Skills [ad#ad-2] 下記は各ポイントを簡潔に意訳したものです。 原文はそれぞれもう少し長いです。 ユーザーインターフェイスのデザインパターンのスタディ ウェブデザインのために最も良いUIをチェックし、研究してください。 ディテールに注意を払う 日常や他のウェブサイトのディテールを見て、自身のデザインにも多くを加える練習をしてください。 SEOのテクニック クライアントの多くはSEOサービスを提供するウェブデザイナーが好きです。 ウェブデザインのトレンドを知る ウェブトレンドは単に
「あなたは感覚派デザイナー?それとも理論派デザイナー?」 このような質問をされると、理論派デザイナーだと答えたくなる理系出身デザイナーのタカハマです、こんにちは。 今回は、そんな理屈っぽい私の大好物である「デザインの要素と原則」をご紹介したいと思います。理論派デザイナーの方はもちろん、感覚派デザイナーの方も知っておいて損はないですよ! 「デザインの要素と原則」はビジュアルデザイン全般に活用できる Webデザインに限らず、ビジュアルデザインの基礎を学ぶ上で、大変参考になる「デザインの原則」というものがあります。いわゆる「Design elements and principles(デザインの要素と原則)」や「Gestalt principles(ゲシュタルト原則)と言われる原則で、デザインの構成要素や要素同士の関係性が全体に与える影響をまとめたものになります。 調べてみると識者によって分類や
Get inspired by the work of millions of top-rated designers & agencies around the world.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く