#Tutorial 1

prepared by Siti Fazariah Hashim

Creating a web design in adobe XD (Purposely choose a to create a landing page)

1. Launch adobe XD and choose custom setting for the web page size.
Custom size – W:1540 H:930

2. Under appearance section, change the fill color from solid to linear, apply this color
to top linear handle color code #313132, and to bottom linear handle color code
#161618 and adjust the position of the handle to your desired looks.
3. Add in text or text logo and put it 67px on top left corner of the landing page. Press
option(mac) to see the px position. Next draw a line as tall as the artboard and
create your text navigation button as picture shows below. keep the color to
#707070.

Next create your navigation menu. Keep the font size to small size and style it with
your preferences.

4. After you have finish with the navigation bar, go to plugins and search for Icons 4
design tab and install. after installing look for search icon and put it on top of right
side align with the navigation bar.
5. Now import any picture to be added into your header. File > Import > png images.
and design your first landing page the way you like it.

6. To create a blur box effect, create rectangle box and set the blur effect to 17 and
brightness to -7.

7. Create your second page by creating a new artboard next to your landing page.
8. To create link between two pages, change to prototype mode, select product
navigation on index artboard. drag the blue line to product artboard. You can set the
trigger and transition function.
9. RUN & TEST.