Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
A collection of free resources made by designers at Facebook.A collection of free resources made by designers at Facebook. iOS 9 GUI (iPhone) Photoshop and Sketch templates of GUI elements found in the public release of iOS 9. Diverse Device Hands Two different diverse hands holding various modern smartphones (iPhone 4-6+, Nexus, Windows Phone).
友人のデザイナーがアプリのデザインをタダでやってくれることになったとします。あなたはさぞかし「持つべき友よ」と自己満足に浸ることと思います。でも、その瞬間に糞アプリが決定します。 20本に19本が糞アプリというのと同じように20回のうち19回のデザインが糞デザインだったりします。この状況は実は簡単に打開できます。20回リテイクを繰り返せばいいだけです。 カードゲームバトルをやっているディレクターも同じことを言ってました。カードのデザインでは、20回のリテイクなんて当たりまえだそうです。 また製造メーカーの開発者も「自社デザイナーで使える奴がいないんだよな」とぼやいておりました。つまり、どの分野であれ自称デザイナーのほとんどが屑同然ということでもあります。 さすがに友達に20回も出し直しさせたら人間関係にヒビが入りますよね。でも、あなたの命を注ぎ込んだ制作活動を邪魔する者は排除すべきなのです
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
業務や個人でのアプリ開発で、UI デザインを考えるときに参考にできそうなサイトを紹介します。なかなか個性的・奇抜だったり、少し古い UI が混ざってたりしますが、インスピレーションを働かせる良い刺激になります。 tumblr 多めです。 Behance https://www.behance.net/ Adobe のポートフォリオサイトです。 モバイルデザインのみならずファッションやグラフィックデザインなど、様々なコンテンツが登録されています。 このサイトでは Creative Field という名前でカテゴリ分けされており、アプリ開発においては Interaction Design や Web Design あたりが参考になります。 Pinterest https://jp.pinterest.com/explore/%E3%83%A2%E3%83%90%E3%82%A4%E3%83%A
「AllTheFreeStock」はフリー素材を配布しているサイトを一覧でまとめたサイトです。商用フリーな素材などを配布しているサイトを一覧でまとめ、iframeでそのサイトをその場で表示してくれます。フリー素材を探す際に重宝するかと思います。 以下に使ってみた様子を載せておきます。まずAllTheFreeStockへアクセスしましょう。 左側にサイトがずらりと並んでいます。「Free Stock Photos」の欄にはCC0ライセンスとなっており商用利用可ですね。その他のカテゴリに関しては、実際にそのサイトへ訪れてライセンスの詳細を調べてみてください。フリー素材を探す際にご活用ください。 AllTheFreeStock （カメきち）
ウェブデザインやアプリのUIを作成する際にどのような色を選んで組み合わせるべきなのかは非常に重要ですが、だからといってプロのデザイナーに頼むほどではない、というときに実践的な組み合わせのカラーパレットをスペースバーを押していくだけで爆速自動生成してくれるのが「Coolors」です。 Coolors - The super fast color palettes generator! http://coolors.co/ 「Coolors」にアクセスすると、すでに自動生成されたカラーパレットが表示されています。 スペースキーを押すだけで次々とカラーパレットが生成されていくという超簡単操作。 表示もサクサクなので、ただ変えていくだけでもすぐに理想の組み合わせが見つかるかも。 また、カラーバーのどこかをクリックすると、バーの下側に「LOCKED」と表示されて固定することができます。 もう一度スペ
こんにちは、霙です。 以前アメブロの方でまとめていた記事をこちらに持ってきて書きなおしました。 古い記事を参考にしてるのでもう皆さんご存知でしょうから、自分が参考にしたいなーと思うデザインを自分が忘れないためだけにメモしておこうという趣向で書いていますｗ 参考サイト ググるとすぐ出てきますのでご存知の方のほうが多いでしょうけれど、 私はログインデザインを大量に眺めたい時、おもに以下の2サイトを舐め回すように見ています。 何百種類もあるのでとっても参考になりますね。 100 Outstanding Login Forms | Design Reviver 100個ものログインフォームが掲載されている記事。（2009年モノです） 海外のデザインって自由な感じで羨ましい。。 Login Forms Design Showcase | Elements of Design こちらも膨大な量のログイ
フラットテイストのデザインが採用されたiOS7。そのデザインに合うように、webサイトやアプリケーションデザインもテイストを合わせて制作することが多くなってきていると思います。今回はそんな時に便利に活用できる、iOS7のガイドラインにそって作成された300個のフリーアイコンセット「RetinaIcon 300 Free Icons」を紹介します。 300個という豊富な種類が魅力的な、アウトラインタイプのアイコンとなっています。 詳しくは以下 メールやファイル、adobeアプリケーション、天気やSNSなどの定番として利用できる種類はもちろん、フェイスやファッションアイテム、フード、宇宙、スポーツといった個性的なジャンルもアイコン化されています。種類が300個も揃っているのが嬉しいですね。非常にシンプルなので、iOS7だけでなく、他のバージョンやイメージのデザインにも当てはめやすいのではないで
１－１．コントラストコントラストは、明確な視覚的差異を用いて重要な要素を強調します。色のコントラストは最も一般的な形で、強い色対比を使うことで特定の情報やアクションを際立たせます。 サイズや形状のコントラストも同様に重要で、大きな要素や異なる形状は視覚的に目立つため、キャンペーンのキャッチフレーズやウェブサイトのボタンに使用されます。 １－２．整列整列は要素を一列に配置し、整った見た目を作り出します。テキスト、画像、ボタンなどが整然と並べられることで、全体のデザインが統一され、情報が追いやすくなります。 整列は、ユーザーインターフェースやグラフィックデザインにおいて、読みやすさとナビゲーションの改善に貢献します。 １－３．繰り返し繰り返しは、デザイン内で一貫性と認識を高めるために同様の要素を使用します。これにより、ブランドアイデンティティを強化し、ユーザーに親しみやすさを提供します。 繰り
これはいいサービス！助かりますねー。 Picky-Pics（ピッキーピックス） チラシを簡単に作れてしまう 「Picky-Pics（ピッキーピックス）」はチラシや名刺をウェブ上でサクサク作れるウェブサービス。これさえあれば、Photoshopは要りません。デザインセンスも要りません。すばらしい！ 使い方は簡単。作りたい資料を選択して、デザインを選びます。 すると編集画面に移動します。あとは文字や背景を加工していくだけ。 素材は5万点近く用意されているそうです。 直感的に素材を追加できます。 各素材はドラッグすると移動します。簡単！ 編集画面の使い勝手もすばらしく、ピクセル数を合わせやすいガイド機能が実装されています。 フォントも豊富！これは嬉しいですねー。 出力は3パターン。ウェブページにもできるというのは嬉しいですね。 有料素材を使っている場合は、出力にあたって費用が発生します。この値段
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
