【sketch】TwitterのUIトレースをして気がついた事｜Masaki
初めまして。UIデザイン勉強中のマサキ(@Masaki_4_5)です。 UIデザイン、とりわけiOS appのデザインスキルを得る一番の近道を探した結果、良いデザインから吸収するのがまず大事という事を聞きました。 このように、sketchで優れたアプリのUIトレースをし、その工程でページの遷移やそのUIになった訳を考察して行くことがスキル獲得にはもってこいらしいです。sketchさえあればお手軽ですしね。 早速Twitterのプロフィール画面とタイムラインの２画面を、Sketchを用いてトレースしてみました。Sketchを用いたトレースについてはネットで既に多く説明されていたのでつまずく事はありませんでした。 Twitterをトレースして気がついた事 左：元画像 右：トレース 1.フォントについてTwitterにはinstagramなどと同様に、和文には"Hiragino sans"、英文
Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな
約４ヶ月「小手先のテクニック」を捨てコンテンツ制作をしてみた感想 - ou’s diary
どうも。王連 (@seo_ou) | Twitterと申します。 ３名の小さな会社組織でアフィリサイトを作って生計を立てている者です。今までＳＥＯで上位をとるテクニックばかりに力を注いでいましたが、今回、巷で言われている小手先のテクニックなどを捨てコンテンツ制作と向き合ってみました。 着手から約４ヶ月、一通り形になりましたので、「サイトの紹介」「制作過程」をご紹介したいと思います。 作ったサイトと概要 ＜今回作ったサイト＞ nurse-colors.jp ＜制作期間＞ 下準備：６カ月くらいふんわりと企画 着手：2014年12月中旬 公開：2015年 4月16日 ＜サイトのコンセプト＞ 「看護師の声を可視化する」 現場の看護師の声を重要視しＷＥＢ上で可視化するというのが大きなコンセプトです。 今のところ「読み物コンテンツ」と「看護師の転職方法をリサーチしたコンテンツ」があります。今後は、地方
[JS]Twitterのように残りの文字数をカウント表示するスクリプト -charCount
TwitterのUIのように、入力できるテキストの残りの文字数をカウントして表示するスクリプトをcss globeから紹介します。 Simplest Twitter-like dynamic character count for textareas and input fields デモページ 上記デモページではデフォルト版とカスタム版の二種類があり、デフォルト版は残りの文字数をカウントして表示し、カスタム版は設定した残りの文字数を超えると表示が強調されるようになっています。 スクリプトのオプションでは入力可能な文字数、強調表示する文字数の設定と、カウンターを配置する要素やクラス名やテキストデータを設定できます。 charCountはjQueryのプラグインのため、実装にはjquery.jsが必要です。
アイキャッチ画像・ロゴ作成のための6つの優秀な無料ツール / Maka-Veli .com
事情があって、プロのグラフィック・デザイナーを雇えない場合はありませんか。コストが問題であったり、時間に追われていたり…といったことが原因で。あるいは、デザインの才能はあるけれど、ITに弱いという人もいるかもしれませんね。こうしたことが身に覚えがある方には、ブログ用のシンプルな画像やウェブサイト用のロゴを簡単に速く作ることができる優秀な無料ツールがある、というのは嬉しい情報ではないかと思います。 以下の6つのツールはロガスターのおすすめです。 文字通り数分で、シンプルかつ綺麗な画像やロゴが、誰でも作れます！ 1. LiveLuvCreate LiveLuvCreateはほとんどの人が使いやすいと感じる画像作成サイトです。 LiveLuvCreateを使えば、一つの背景画像から複数画像のコラージュまで、様々な種類のデザインレイアウトから選ぶことができます。三つのテキストエリアでは沢山
無料で総額1万円以上の有料素材をダウンロードできる2014年10月版Envato素材シリーズ
ロイヤリティフリーの写真素材やBGM、サイトテンプレート、プロジェクトファイル、PHP・JavaScriptのソースコードファイルなど、企業や公式サイトが使うようなハイクオリティな素材を提供しているEnvatoは、各素材サイトから毎月1つずつ、有料素材を無料で提供しています。2014年10月は、通常45ドル(約4900円)で販売されている多機能なWordPress用のテーマを始めとし、文字や文章に動きをつけてアニメ化できるファイルやTwitterをウェブサイトから直接操作できるWordPress用プラグイン、ハロウィンっぽい音楽や3Dモデルなど、合計1万2000円相当の素材が無料ダウンロード可能です。 素材を無料でダウンロードするにはアカウント作成・ログインが必要なので、まずは以下のページを参考に無料アカウントを作っておきます。 無料で商用利用可の有料サイトテンプレートファイルを「Them
Themeleon :: Twitter Profile Designer by COLOURlovers
Test tweet! Link example. @atreplyexample. This is where your first tweet will be! Don't worry, this will not appear on your timeline.
2014年8月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン関係 コーディングを考慮したWebデザインガイドライン Webデザイン用の Photoshop の基本設定、1px 未満のにじみを発生させない、共通モジュールの外部ファイル化など、コーディングしやすいWebデザインカンプを Photoshop で制作する方法について。 Photoshopでバナー “いい感じ” に制作せよ！ Photoshop でバナーを作る時の環境設定やテキストツールの使い方など。 このブログの [Webデザイン] 文字組みについて本気出して考えてみた も紹介されていました。 DTP→Webデザイナー転向時に、これやったら捗ったよリスト13 | 279-design DTP（
フラットなフリーの日本向けソーシャルアイコンセットを作りました。 | バニデザノート
関連記事 [update!] 基本最低限、カスタマイズするだけの無料wordpressテンプレート「bee1.2」 2012/09/19 [配布]photoshopでドットのラインを描く方法＆破線（点線）ブラシ 2011/11/21 ウェブデザインのワイヤーフレーム（モックアップ）作成で使える、シンプルなOmniGraffleステンシルを作りました。 2011/10/07 12×12pxのミニマムなソーシャルアイコンセットを作りました。 2011/09/24 カラーリングでフォルダを見分けたい方に。mac os x lion で使えるカラーフォルダアイコン 2011/09/21 基本最低限だけ、あとはカスタマイズするだけのwordpressテンプレート「bee」 2011/08/22 フラットなフリーの日本向けソーシャルアイコンセットを作りました。 2011/08/21 Comments:
Webデザイナーに愛を込めて。ディレクターが意識すべき７つのポイント | LPO研究所
LPO研究所所長の鎌田です。 先日、弊社デザイナーが「新人Webデザイナーにありがちな５つのコミュニケーショントラブルとその解消法」という記事を書きました。 この記事は公開2日で1万人以上もの方にお読みいただきまして、本当にありがたい限りなのですが、そのなかで 「指示を出すディレクターにも問題があるのでは？」 というご意見を同時に多数いただきました。 皆さんの仰るとおりでして、「売れるWebデザイン」というのは、デザイナーとディレクターの真剣勝負によってのみ生まれます。どちらか一方が依存している状態、考えていない状態では、ターゲットの心を掴むデザインを作ることはできません。 では、「売れるデザイン」をWebデザイナーに作ってもらうために、ディレクターは具体的にどう動けば良いのでしょうか？ 実はデザインディレクションにも、誰でもカンタンにマネできる「ちょっとしたコツ」があります。 今回は「デ
[CSS]このホバーエフェクトかわいい！蝶番を軸にぷら〜んと開くCSS3アニメーション
Twitterのボタンをホバーすると、蝶番を軸に開くかわいいアニメーションを実装したスタイルシートのデモを紹介します。 パタリと開いた後、ぷら〜んとするのいいですね。 Hinged Twitter Button 実装は、こんな感じです。 HTML TwitterのアイコンにはFont Awesomeが使われており、アイコン、アカウント、蝶番をそれぞれspan要素で配置しています。 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <a href="http://twitter.com/jonitrythall"> <span class="button"> <i class="fa fa-twitter"></i> </span> <span cl
僕のWordPressブログで効果を出している+αなカスタマイズ
ブログをやり始めて、見て貰えるようになるには 時間と努力、そしてチャンスが必要です。 チャンスというのはインフルエンサーのツイートだったり、Gunosyやはてブのエントリー入りなどいつ訪れるかわからないのですが、とにかくそう何度も訪れるものではありません。そういう時の為に準備は万全にしておかないとせっかくのチャンスを一時のアクセスで終わらせてしまう事になります。 photo credit: merwing✿little dear via photopin cc スポンサーリンク TwitterのフォロワーやFacebookのファンを 増やす真面目な仕組み作り インチキなフォロワーを購入したり相互リンクで無意味なフォロワーやファンを増やすというものではありません。 現在は、情報が次から次へと流れ、また各サービスがブログを見易いデザインで見せる為、正直読んでいるブログが誰のどんなブログかわから
[JS]アナタのソーシャルコンテンツをまとめてPinterest風レイアウトで表示するスクリプト -Socialist
ブログのRSSをはじめ、Facebook, Twitter, Tumbler, Google+, Pinterest, Flickr, YouTubeなどのコンテンツを全てPinterest風のグリッドレイアウトで表示するjQueryのプラグインを紹介します。 幅800pxで表示 Socialistの使い方 Step 1: 外部ファイル head内に当スタイルシートと「jquery.js」と当スクリプトを記述します。 ※ダウンロードできるデモファイルにはjQueryの記述が無いのでご注意を。 <link href="../jquery.socialist.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <scri
これから企業でアクセス解析を推進する人たちに知っておいて欲しいこと
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Welcome to Dezinerfolio | Dezinerfolio
Bootstrap Templates and More on WrapBootstrap
Free & Premium Design Resources : Medialoot
CSS-Tricks - A Website About Making Websites
The Cicada Principle and Why It Matters to Web Designers » HTML & CSS, Layout » Design Festival
今必要なCSSアーキテクチャ
