ウェブデザイン - ページ 13

ウェブを使う人々は同質の集団ではなくむしろむしろ 非常に高い多様性を持つ巨大なグループ. 彼らの多くは、英語が母国語ではないか、または健康状態に優れた高学歴の都市住人ではありません。私たちが一般向けにデザインするときは、この事実に注意を払う必要があります。さもなければ、私達は多くの潜在的なユーザーを逃し、そしてサイトのサーチエンジンのランキングを押し上げる大きな可能性を失う. 普遍 そして 包括性 W3CのWebデザイン関連規格の1つであるアクセシビリティWeb規格に焦点を当てています。ウェブアクセシビリティイニシアチブ（WAI）の最終目標は、うまく機能するウェブをデザインすることです。 “ハードウェア、ソフトウェア、言語、文化、場所、肉体的または精神的能力にかかわらず、すべての人に”. アクセシビリティについて考えるとき、私たちが理解する必要がある最も重要なことは、ユーザーが持っている必要はないということです。 全損 感覚や能力の アクセシビリティサポートを必要としている. 部分的な視力喪失、または軽度の聴覚障害などの問題を抱えている人も、アクセシビリティのニーズがあります. それでは、だれが主要なグループなのか、Webをどのように使用するのか、そして慎重なデザイナーがどのようにユーザーエクスペリエンスを向上できるのかを見てみましょう。. 視覚障害 このグループの人々は片方または両方の目に軽度または中等度の視力障害、色覚異常、弱視、失明または聴覚障害を持つ可能性があります。 多くの場合、次のことが必要です。 Webコンテンツの表示を自分のニーズに合わせて変更する. 文字サイズや画像のサイズを変更したり、読みやすさを向上させるためにフォント、色、間隔をカスタマイズしたりする機能が必要です。マウスポインタを見ることができない人が次のようにしてコンテンツをナビゲートできるようにすることもお勧めです。 彼らのキーボードだけ. 多くの視覚障害者が使う スクリーンリーダー フロントエンドが意味的にコード化されている場合にのみ適切に動作します。それ以外の場合は、それらの特別な支援ソフトウェア Webページの構造を識別できません そしてユーザーは内容を理解できないでしょう. 説明の助けを借りて、ハイパーリンク、アイコン、画像、およびその他のメディアタイプの適切な説明をこれらのページに提供する必要があります。 オルト そして タイトル HTMLの属性ここでの経験則は、...

Microsoftの新しいオープンソースコードエディタであるVisual Studio Codeは、開発者に多くの素晴らしい機能を提供します。 ソースコード編集のプロセスを容易にする. それに加えて、Visual Studio Codeでは、ユーザーが作業をするときに飽きないようにしています。 その外観のいくつかの部分をカスタマイズする, 色、フォント、スペース、テキストの書式設定など、多くの機能と同様に、 リンティング そして 検証ルール. この記事では、最初に見てみましょう Visual Studioコードワークスペースの外観を変更する方法, それから私は2つの助けを借りてデフォルト設定をカスタマイズする方法を紹介します JSON-フォーマット設定ファイル. VSコードにカラーテーマを設定する方法 Visual Studio Codeでは、次のことが可能です。 カスタムカラーテーマを設定する あなたの編集者のために. 作成済みのテーマを使用するには、をクリックしてください。 ファイル>設定>カラーテーマ トップメニューバーのメニュー。当たったとき “入る”, コマンドパレットがポップアップ表示され、選択可能なテーマのドロップダウンリストが表示されます。. を押しても同じ効果が得られます。 F1...

こんにちは仲間！クリスマスの時期がやってくるので、デザイナー全員が一生懸命働き、余分なお金を稼ぐのに最適な時期です。作業の過負荷は頻繁に発生する問題であるため、作成プロセスを加速する必要があります。私達は助けるためにここにいます. 今日私達はあなたに持って来ます 見栄えの良いクリスマスつまらないものを作るための迅速かつ簡単なチュートリアル クリスマスボールの飾りとしても知られています. チュートリアルの終わりには、金属ボールの3Dイラストで見られる素敵で光沢のある効果を作成する方法がわかります。このチュートリアルでは、Adobe Illustrator CS 5を使用します。.私たちが行ったものを含む6素敵な装飾が施された無料のベクターファイルをダウンロードしてください. 始めましょう. ステップ1 - 形状と勾配 とともに 楕円ツール, 輪を作ります。それを丸めるためにshiftを使う. 使用 グラデーションツール 円を埋めるために。画像に示されているように、形状に放射状のグラデーションを作成します。. この場合は、赤のグラデーションを作成したので、古典的な赤を使用できます（100マゼンタ そして 100イエロー CMYKで）。画像では、グラデーションの中心がボールの中心ではなく、右上に少しあることがわかります。濃い赤は、影をシミュレートするために左下に向かっています. ステップ2 - 輝きと影を追加する コピーする 円（Ctrl / Command +...

ウェブサイトを構築することは伝統的にすべての主要なブラウザ、それらのうちのいくつか、またはまったくしないで動くかもしれないさまざまな技術を含みます。最近のWeb開発者は、特定の機能がブラウザまたはその多くのバージョンの1つでサポートされているかどうかを確認するために、常にCanIUseを参照することになります。. CanIUseは、標準HTML、CSS、およびSVGのブラウザへの参照、それらの参照、W3Cからの仕様の状況、および各ブラウザに存在する問題およびバグへのリンク（利用可能な場合）を追跡します。たとえば、Edge、Firefox、およびOpera MiniはCSS Reflectionをサポートしていません。サポートされているブラウザでは、ベンダープレフィックスが必要です。. CanIUseは デファクト デスクトップブラウザとモバイルブラウザの標準的なWeb仕様の互換性がどこまで記録されているかを記録するツール. caniuse.comを通じたブラウザバージョンとは別に、CanIUseはCLI（Command Line Interface）としても利用可能です。また、CanIUseの結果をターミナルまたはコマンドプロンプトから取り出すこともできます。 Terminalで頻繁につまずいた場合は、CLIによってワークフローが効率化されます。. 要求事項 CanIUseコマンドラインをデプロイするには、まずNodeJSとNPMをインストールする必要があります。. 実行している場合 npm -v または ノード-v CLIを展開する準備ができているバージョン番号を返します（下記参照）。それ以外の場合は、 “コマンドが見つかりません” エラーが発生した場合は、ここからNodeJSインストーラをダウンロードしてください。インストーラはWindows、OS X、およびLinuxで利用可能です。使用しているOSを選択してください. CLI CanIUse CLIのインストールはもうすぐです。ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行します。. npm install -g caniuse-cmd このコマンドはCLIをグローバルにインストールし、OS内のどこからでもアクセスできるようにします。インストールしたら、コマンドライン...

成長分野 インタラクションデザイン モバイルアプリからWebサイト、さらにはビデオゲームまで、すべてを網羅しています。スキルセットは需要がありますが、正確には何が必要ですか インタラクションデザインのキャリアを始める? インタラクションデザインは、 デジタルインターフェイスプロジェクトのためのUXデザインとUIデザインのコンボ. インタラクションデザイナーは、Webサイト、デスクトップソフトウェア、またはその他のあらゆる分野に特化することもできます。 ヒューマンコンピュータインタラクションが必要. このガイドでは、 必要なスキル そして 最高のヒント 熟練したインタラクションデザイナーになる必要があります。この業界には最良のコースはありません。それはただハードワークと粘り強さを必要とします。 さらにプッシュする そして 学び続けます 途中で. IxDの基本 どのデジタルプロジェクトもインタラクションデザインの影響を受ける可能性があります。それはあなたを強制します インターフェースの美学を超えて どのように典型的なユーザーを検討する インターフェースと対話する. インタラクションデザイナーがインターフェースデザインを担当 ユーザ心理学の観点から. あなたがUXデザイナーとして働いているとき、あなたは主に心配しています 行動と測定基準, ページの表示時間やコンバージョン数など。あなたがUIデザイナーとして働いているとき、あなたは焦点を当てます 美学とデザインの原則. あなたが両方の分野のスキルを持っているならば、IxDでのキャリアは素晴らしいアイデアです。あなたはあなたが参加するどんなチームにとっても真の資産になるでしょう、そして多くの上方移動性があります. インタラクションデザイナーの仕事は...

編集者注： これはFood Identitiesの作者、Addison Duvallによる寄稿で、食物、デザイン、そして文化の交差点を探るブログです。彼女はいくつかのことを書き、他のことをデザインし、そしてたくさんの食べ物を食べました。. この世界には、需要の高いデザイナーとそうでないデザイナーの2種類があります。私たちのほとんどは後者のカテゴリーから始め、そして残念なことに、私たちのうちの何人かは私達のキャリアの間そこにとどまっています. しかし、需要が高いことと需要が低いことのギャップを埋める方法はありますが、それは必ずしも明白ではありません。それは容易ではありません、そうでなければ、誰もがそれをやっているでしょう。しかし、私はあなたがあなたが得るクライアントの品質を向上させることに興味があるデザイナーであると仮定するつもりです、それで私はあなたにまっすぐにそれを与えるつもりです. これに従うことができるいくつかのステップはここにあります あなたの潜在的な顧客へのあなたの魅力を後押ししなさい, そして平凡なパフォーマーからはしごを登る 需要の高いスーパースターデザイナーになる. 思考をする デザイナーが持つことができる最も重要な資産は彼または彼女の思考プロセスです. ハイレベルのクライアント - あなたがあなたのポートフォリオで作品を作成したときに考えていたことに、単なるビジュアルよりもはるかに興味を持っている - あなたが高需要デザイナーとして後に行きたい種類. あなたが高級クライアントと会う前に、それが物語を伝えるようにあなたのポートフォリオを手配することは有用です。あなたがあなたのポートフォリオを潜在的な顧客に提示するとき、ただたくさんのきれいな写真を見せないでください, あなたの意思決定過程に入った考えを説明する. あなたは独自のセールスポイントをカバーするあなたのマーケットリサーチを通して潜在的な顧客を連れて行きたい、そしてそれは市場性のある、効果的なデザインを作成することに入ることに関連しています. あなたが誰のためにデザインしているか知っている 新規顧客の場合は、 あなたの過去のデザインを構成するあなたの選択を説明する. あなたの選択はあなたのターゲットユーザーとなぜそしてどのように働いたのですか？これらの質問に対する答えを入手してください。そして、あなたが最も頻繁に設計する人々からデータを引き出すことによってそれをすることができます。. 必要に応じて、ユーザーへのインタビュー、電子メールリストの作成、投票または調査を行います。人々の言うことだけに耳を傾けるのではなく、あなたが作成したデザインに対する彼らの活動や反応を見てください。. クリック、読書、購買習慣を観察しましょう. それらの習慣をあなたが馬の口から得たものと相互参照して、より良く、より完全な適応症を得る。. ビジュアル自体の背後にあるプロセスを表示します。なぜこれらの色やそのロゴの概念、そして最も重要なのはあなたの選択がデザインの効果をどのように向上させたのですか？あなたの理想的な顧客の心理と彼らが奉仕する市場をより深く探求してください。需要の高いデザイナーはこれを毎日行っています. あなたのクライアントを考えます すべてのデザインクライアントは彼らのために考えることができるデザイナーを持つのが大好きです....

多くの人がInstagramとアプリに付属のフィルタを使って自分の写真をより面白くて美しくすることを愛しています。しかしこれまでのところ、これらのフィルタの使用はアプリ内での使用に制限されています。あなたがしたい場合はどうなります Web画像にInstagramのフィルタを使用する, あなたがあなたの個人的なブログやウェブサイトに載せたい写真のように、アプリの外で? さて、あなたはCSSGramを使うことができます。 Instagramのアプリで見つけることができるものに似ているフィルタであなたの写真を編集してください. 編集が手動で行われるPhotoshopとは異なり、CSSGramでは、プロセス全体がCSSを介して行われます。. 使い方 効果を生み出すために、CSSGramは利用します CSSフィルタ そして CSSブレンドモード, 基本的に、必要なInstagramフィルターを模倣する程度に効果をブレンドします。効果は疑似要素を介して画像コンテナに適用されます。この1977年の例でこれがどのように行われるかを調べてみましょう。 これが追加された擬似要素です。. ._1977 役職：相対; content： "; display：block; height：100％; width：100％; top：0; left：0; position：absolute; そしてこれはCSSフィルタであり、Blend氏はこれを追加した。 .1977 -webkit-filter：コントラスト（1.1）明るさ（1.1）飽和（1.3）;フィルタ：コントラスト（１．１）輝度（１．１）飽和（１．３）。 1977年以降：背景：rgba（243、106、188、0.3）。ミックスブレンドモード：スクリーン。 使い方 フィルタクラスをimage要素に直接追加することはできません。コンテナクラスまたは親クラスに追加する必要があります。例えば、 コンテナとして....

設計者または開発者としての仕事を楽にすることができるソフトウェアを見つけることは、困難で時間のかかる作業です。市場には何千もの解決策がありますが、あるものは素晴らしいもので、あるものはそれほど良くありません。そのうちの多くは無料トライアルを提供していないか、この期間にすべての機能を提供していないので、あなたはお金を投資するべきです. さまざまな分野（ロゴ、ランディング、およびWebサイトの作成者、アイコンライブラリなど）から、2018年にどのサービスで最も高く評価されているWebツールを知りたいのか、ここでは30の優れたソリューションを紹介します。それらをチェックしてあなたの意見を共有してください. Tailor Social - よりスマートなソーシャルメディア管理ツール あなたの次のWebやデザインプロジェクトのためにあなたのソーシャルメディアのプレゼンスをアップグレードしようとしているなら、Tailor Socialをセットアップすることは強力な出発点です。. Tailor Socialは、Tailor Brandsのロゴデザインおよびブランディング企業による一連の製品の最新版です。. 新しいソーシャルメディア管理プラットフォームは、既存のソーシャルメディアツールを拡張して、スケジュール設定、デザイン、および関連コンテンツを発見するためのAIベースの推奨事項を含む一連の機能をすべて提供します。. あなたが最初にサインアップするとき、あなたはあなたの業界を選ぶことができるだけでなく、関連しているさまざまな異なるポストを通してスクロールすることもできます。このステップを完了すると、Tailor SocialsのContent Guruアルゴリズムが選択に基づいて投稿を見つけ、ソーシャルメディアカレンダーにすばやく入力してTwitterやFacebookを始めます。. 戦略にもっと直接的なアプローチを取りたい場合は、いつでもスケジュールにコンテンツを追加および削除したり、ソーシャルメディア投稿デザイナーを使用して独自の投稿を作成したりできます。自分のテキスト、背景、カラーパレットを追加して、ソーシャルメディアのすべてのアカウントに投稿するための本当にユニークなコンテンツを作成できます。. 会社の月額10ドルの基本プランで2つのアカウントを管理することから始めることも、月15ドルのProfessionalアカウントで7つのアカウントにアップグレードすることもできます。複数のプロジェクトとクライアントがある場合は、月額50ドルで最大30のアカウントを提供するコーポレートプランを選択できます。. Hotjar - あなたの訪問者があなたのサイトを実際にどのように利用しているかを見る Hotjarは、あらゆる規模の組織に対して完全で手頃な価格の洞察を提供する、オールインワンの強力なソリューションです。何、なぜ、そしてどのように訪問者があなたのウェブサイトとやり取りするのかをもっとよく理解してください。ヒートマップはその場であなたのためにそれをするでしょう。 Hotjarはそのようなヒートマップとドキュメントの例を提供しています。. Hotjarが提供するもう1つの優れた機能は、Webサイトの訪問者の行動を記録したり、クリック、タップ、またはスクロールした場所を確認したり、ドロップポイントがどこでどのステップでどの場所であるかを理解できることです。. あなたのフォームがどのように使われているのかを知りたいですか？ Hotjarがお手伝いします。どのフィールドが×に時間がかかりすぎるかを発見することによって、オンラインフォームの完成率を向上させます。¯Â¬これは空白のままで、訪問者がフォームやページを破棄した理由. 無料の永久プランから始めて、いつでも必要なときにアップグレードしましょう。価格設定ページでは、スタートアップからフォーチュン500まで、あらゆる種類の企業向けのソリューションを見つけることができます。Hotjarを使用している210,000社に参加して大成功を収めましょう. Landingi - 強力なラ​​ンディングページビルダー Landingiは誰でも使用できる優れたランディングページビルダーです。コーディングスキルや特別な知識は必要ありません。大企業のPayPalやSonyMusicなど、4,000社を超える企業が大成功を収めています。....