PR

Adobe XDによるWebデザイン【コーポレートサイトのワイヤーフレームとデザインカンプ】

記事内に広告が含まれています。

どのように、Adobe XDを用いて、ウェブデザインをしたらよいのでしょうか?この記事で、コーポレートサイトのKrushnamurti Foundation of Americaをお手本として、ワイヤーフレームとデザインカンプのファイル作成手順をご紹介します。

スポンサーリンク

模写デザインの手順

Wire Frameファイル

今回模写デザインをしたKrishnamurti Foundation of Americaを、以下の3つの部分に分け、各コンテンツを挿入する場所を配置しました。

Header

サイトアイコン、メニュー、メインビジュアルのカルーセルの場所を配置

Main Contents

各コンテンツの場所を設置。

Footer

About、Mailing list form, Contact detais, Copy rightの場所を配置。

Comprehensive Design Layoutファイル

Wire Frameに配置した各場所に、画像やテキストを挿入しました。なお、デザインの統一性や簡略化のために、配色やコンテンツの内容を一部変更しました。

Header

サイトアイコン、メニュー、メインビジュアルのカルーセルの場所に、画像とテキストを挿入

Main Contents

各コンテンツの場所に、画像とテキストを挿入

Footer

About、Mailing list form, Contact details, Copy rightの場所に、画像とテキストを挿入

スポンサーリンク

おまけ(コーディングの手順)

CooperateSite-kfa

作成したデザインカンプに従いながら、コーディングして、ウェブページを制作しました。

HTMLファイル

headタグ

  • metaタグで、language codeとviewportの設定
  • titleタグで、ページタイトルの設定
  • linkタグで、css、bootstrap、fontawesomeとjQueryの読込

bodyタグ

  • Bootstrapで、Global Navigation、Carousel, Grid Design Layoutやスタイルの実装
  • headerタグで、サイトアイコン、ヘッダーメニュー、メインビジュアルのカルーセルを作成
  • divタグで、各コンテンツ、ページスクロールを作成
  • footerタグで、Mailing list formの設置, About, Contact details,とCopy rightの記述

CSSファイル

bootstrapで実装できないスタイルは、CSSファイルに書き込んで、実装しました。

color

background

height/width

margin/border/padding

img

jQueryファイル

jQueryのメソッドを使用して、ページ内スクロールを実装しました。

ページ内スクロール

scrollTop、fadeIn、fadeOutとhideのメソッドで実装しました。

スポンサーリンク

まとめ

AdobeXDの基本操作を習得しながら、Wire FrameとDesign Comprehensive Layoutのファイルを作成することで、Corporate siteのデザインをすることができます。さらに、デザインカンプに沿って、コーディングすることで、ウェブサイトを制作することができます。

ウェブサイト開設の手続き[サーバーレンタルと独自ドメイン取得】もご覧ください。

タイトルとURLをコピーしました