Awesome Web Design
Web Designを扱う資料や関連プロジェクトをまとめたAwesomeリストです。
目次
ブログとニュース
- Web Designer News: デザイナー向けに厳選された優れた記事。
- Marvel Blog: Marvelチームによる最新ニュース、資料、考察。
- The Next Web: 世界のテクノロジー、ビジネス、文化に関するニュース。
- Medium: 大小さまざまなアイデアへ独自の視点を寄せる読者と執筆者のコミュニティ。
- Creative Bloq: アートとデザインの着想。
- Smashing Magazine: プロのWebデザイナーと開発者向け。
- Sitepoint: Web開発者とデザイナーが、素晴らしいインターネット上のものを作る情熱を共有する場。
- Designer News: デザインコミュニティが集う場所。
- Reddit Web Design: デザイナーが有用な投稿を寄せ、質問し、議論へ参加できる場所。
- Morning Reader: テクノロジー速報。
- Google design: Googleデザインについてデザイナー向け動画を公開するYouTubeチャンネル。
着想
- Awwwards: 優れたWebデザインのトレンド。
- One Page Love: 優れたシングルページWebサイトを紹介するデザインギャラリー。
- Inspired UI: モバイルアプリのデザインパターン。
- Behance: クリエイティブ作品を公開・発見できます。
- Dribbble: デザイナーが作品を見せ合う場所。
- Product Hunt: 次のお気に入りを発見する場所。
- UI Movement: 優れたUIデザインの着想を毎日紹介。
- Pttrns: デザインパターン、資料、着想を集めた上質なコレクション。
配色
- Brandcolors: 世界的な大手ブランドの公式カラー。
- Adobe Color CC: カラーホイールで配色を作成したり、Kulerコミュニティの数千種類の組み合わせを閲覧したりできます。
- Paletton: 調和する色の組み合わせを作るデザイナー向けツール。
- Coolors: デザイン用カラーパレットを無限に生成。
- Lol Colors: 厳選されたカラーパレットの着想。
- Colordot: 人のためのカラーピッカー。
- Gradients.io: デザイナーと開発者向けに厳選されたグラデーション。
- UI Gradients: 美しいカラーグラデーション。
- Colorzilla: スポイト、カラーピッカー、グラデーション生成器。
タイポグラフィ
- Google Web Fonts: オープンソースのデザイナー向けWebフォントを、直感的で充実したディレクトリとして提供。
- Font Face Ninja Browser Extension: 閲覧中のWebサイトでフォント名を知りたいときに、Ninjaが見つけてくれます。
- Fontpair: 美しいGoogle Fontsの組み合わせとペア。
- Type Anything: 優れたフォントの組み合わせを作成。
- Type Scale: プロジェクトに適したタイプスケールをプレビューして選択。
- WhatTheFont: 画像で見かけたフォントに最も近いものを探します。
- Typewolf: Webタイポグラフィの包括的な情報、代替フォントの提案、実際の使用例へのリンク。
- Typ.io: 実在するWebサイトから得られるタイポグラフィの着想。
アイコン
- Flat Icon: 数千点の無料フラットアイコン。
- Font Awesome: アイコンフォントとCSSツールキット。
- Icon Finder: 100万点の無料・有料アイコン。
- The Noun Project: あらゆるもののアイコン。
- Favicon Generator: faviconとアプリアイコンの生成器。
- Freepik: さまざまな形式の無料ベクター素材。
- Vecteezy: 無料のベクターアート、ベクターグラフィックス、Illustrator背景などのコレクション。
- Material Icons: Googleによる無料で利用可能なMaterial Designアイコン。
- Ionicons: Ionic Framework向けの高品質なアイコンフォント。
画像
- Pexels: 優れた無料ストック写真を一か所に集約。
- Unsplash.it: 美しい画像ギャラリーを使ったプレースホルダー。
- Pixabay: 商用利用も無料の高品質な写真とイラスト。
- Placehold.it: すばやく簡単に使える画像プレースホルダーサービス。
- Imgur: インターネット上の素晴らしい画像。
- Flickr: あらゆる写真のための場所。
ガイドライン
- iOS Human Interface Guidelines: 美しく魅力的なiOSアプリを設計するために必要な情報を網羅。
- Google Material Design: Googleブランドのデザイン、コンポーネント、資料を詳しく解説。
- Laws of UX: UI構築時にデザイナーが考慮できる格言と原則のコレクション。
- Ultimate Guide: アプリを輝かせるモバイルアプリ設計原則の完全ガイド。
- GoodUI: UIを改善する5つの方法。
デザインツール
- Sketch: Mac向けの軽量なデジタルデザインソフトウェア。
- Figma: 共同作業に対応したインターフェースデザインツール。
- Adobe XD: プロトタイピングとワイヤーフレーム作成のツール。
- inVision Studio: 高速なプロトタイピング、アニメーション、組み込みデザインシステム、共同作業。
- Canva: 驚くほど簡単なグラフィックデザインソフトウェア。
- Framer X: インタラクションデザインとUXデザインのソフトウェア。
プロトタイプツール
- Zeplin: デザイナーと開発者のための優れた共同作業ツール。
- Avocode: すべてのデザイナーと開発者に開かれたワークスペース。
- inVision: 世界をリードするプロトタイピング、共同作業、ワークフローのプラットフォーム。
- Justinmind: Web・モバイルアプリのプロトタイプをすばやく作り、円滑に伝達できます。
- Marvel App: デザイナー向けの無料モバイル・Webプロトタイピング。
- Atomic.io: ブラウザ内で使える無料のインタラクティブデザインツール。
- Flinto: インタラクティブでアニメーション付きのデザインプロトタイプを作るアプリ。
チュートリアル
- Treehouse: 手頃な価格の技術教育をあらゆる場所の人々へ届けます。
- Tuts Plus Web Design Tutorials: 無料のWebデザイン・開発チュートリアル。
- Springboard: 目標達成とキャリア向上を支援するために設計された個別学習方式。
- Learn Sketch: 学習開始を助ける短い動画と価値ある資料集。
- Adobe XD Guide: XD初心者と現役ユーザー向けの1万2千語に及ぶ包括的なガイド。
書籍
- Web design playground: 最初のHTML一行から、興味深く魅力的なWebページの作成までを段階的に案内するガイド。
- Don’t make me think
- The design of everyday things
- 100 things every designer needs to know about people
生産性
- Pomodoro: 仕事や勉強をより生産的にする便利な時間管理手法。
- Toggl: 職場の生産性を高めるタイムトラッカー。
- Trello: 楽しく柔軟で手応えのある方法でプロジェクトを整理し、優先順位を付けます。
- RescueTime: 日々の習慣を理解し、集中力と生産性を高めるのに役立ちます。
- Qbserve: 自動時間追跡、請求書作成、リアルタイムの生産性フィードバック。
- Paste: Mac向けの賢いクリップボード履歴マネージャー。
- Sip: Mac向けカラーピッカー。
- Timing: Mac向けの自動時間・生産性追跡。
- Taskade: チーム向けの共同タスクリストとアウトライン。
Slackチーム
- Team Sketch: Slackを利用するSketchデザイナーのコミュニティ。
- Designer Hangout: 世界中のUX担当者がユーザー体験について話し合う場所。
- Design Talks: UI／UXデザイン、Webデザイン、フリーランス、デザイン批評などのコミュニティ。
- TheDesignerShip: 1,500人を超えるデザイナーと創業者のコミュニティ。
共有
ライセンス
