Responsive web design + web font + CSS Animation

Toshiyuki　Kurashima
Web Designer & Coder
OVERVIEW

Adobe XDで簡単な設計を行い、デバイスサイズに合わせて画像の大きさを変化させました。

YEAR 2019

XDでワイヤーを組み、PhotoshopとXDの連携でデザインカンプを起こしました。

■気をつけた点は

  • フォントの種類・サイズ
  • ベースカラー・メインカラー・アクセントカラー
  • それぞれのデバイスにおける余白
  • あえてイラストやアイコンなどをなるべく使わない

等でありシンプルなwebサイト制作を心がけました。

■動きとしては

  • デバイス毎に表示されるスライドの雰囲気を変化させる
  • 上部のナビゲーション(モバイル時にはドロワーナビ)から該当のメニューをクリックするとページ内スムーススクロールが行われるようになっています。

https://caffe-macchiato.work/

github URL: https://github.com/nanamestripe/harbor_hill



WEBSITE