ART 2360 website design
2.0 xd file setup & wireframe assignment: part 1
OVERVIEW:
In the exercise, you will setup an Adobe XD document for desktop, use various XD tools to
organize the file, and create a wireframe for the Dundee Beer website. Below you will find
the step-by-step instructions, but please be sure to follow along with the recorded in-class
example, for more details.
Step 1: File Setup
• Create a new XD file and create a custom artboard at the following dimensions:
Width: 1366px
Height: 768px
This is a typical 16:9 ratio, giving us an understanding of the “screen real estate” that we
can use. Keep in mind, this is the “full screen” dimensions of a typical laptop and also a
proportion that is adaptable to projectors, desktop screens, secondary monitors, tablets
and some mobile devices (in landscape orientation).
Note: It is never a good idea to use the full screen dimensions as your web layout size,
as there are various OS and browser menu bars that take away from this size. Also, it is
unusual that someone would have their website browser open to “full screen”. Usually, a
person opens their browser to about 60-80% of the screen size.
16:9 Ratio
Widths
100% = 1366px
80% = 1092px
60% = 820px
1366px (@100%)
1092px (@80%)
820px (@60%)
768px
Step 2: Grid
To establish parameters within the full screen, you will need to create a grid that defines
that maximum width of the content. For this exercise, we will use the width of 960px and a
12 column grid.
Note: 960px is also slightly arbitrary, however it is a useful number because it is divisible
by many factors, and since you can’t have 1/2 a pixel, using a width that can divide into
whole numbers in various ways is important. Also, this width is smaller than most tablet
widths (1024px X 768px), which will allow your website to be seen without scrolling on any
device larger than a typical tablet.
960 ÷ 12 = 80
960 ÷ 10 = 96
960 ÷ 8 = 120
960 ÷ 6 = 160
960 ÷ 5 = 192
960 ÷ 4 = 240
960 ÷ 3 = 320
960 ÷ 2 = 480
Complete the following steps to create your grid.
•C hange the height of the document to 3000px. This number is arbitrary,
but it will give us enough space on our artboard to add vertical scrolled
sections. To do this, click on the artboard title, and change the “H” value
to 3000 in the right side menu.
• Click “Grid” in the right side menu. Then assign the following values:
Columns: 12
Gutter: 20px
Column Width: 62px
Leaving a margin of : 201px
Step 3: Wireframe Kits
XD has a powerful selection of Wireframing kits available for free or subscription. These
kits use the Colour, Character Styles and Components panels to form a comprehensive
library of standard buttons, styles and colours used in most Wireframing. You can access
the Wireframing kits online or from within the 2.0-sourcefiles folder.
• Open the kit and examine the contents.
• You can access this and other kits by clicking “File > Get Ui Kits”
• Copy and Paste components from the Kit File to your New Document
It is also recommended that you install the following plug-ins for XD. To do so, go to the
Plug-Ins panel in XD and search for the two plug-ins::
• Lorum Ipsum
• Wireframer
Step 4: Wireframe Layout
• I mport the finished document titled, “example.png” found in the sourcefiles folder and
centre the document.
• L ock the “example.png” file and working over the finished elements, create a wireframe
that captures the various elements in the layout. Feel free to use components found
within the Wireframe Kits and the plug-ins.
Step 5: Saving the Document
• To save the document locally, choose “Save as Local Document” from the File menu.
• Once you have completed part 1, take a bit of a break and continue to part 2.
