For years, web designers used Adobe Photoshop to design the user interfaces (UI) for websites. Over time, some designers starting using Illustrator and some started experimenting with non-Adobe alternatives. Ultimately, it doesn't matter what tool you use, but there are several advantages that some tools are able to provide that others can not. In this lesson, we are going to learn about Adobe XD—Adobe's most recent tool specifically created for user interface designers.
Over the years, web designers have used several different tools and software developers have created several different design applications to help provided healthy alternatives to typical Adobe products (e.g. Photoshop and Illustrator) that were better suited for web design. One notable example is Sketch App, which is one of the most popular and celebrated web design tools. Sketch was first released in 2010 and has since increased in adoption ever since. It took several years, but eventually Adobe released a product similar to Sketch: Adobe XD.
Below is a list of key features that Adobe XD provides:
In this hands-on activity, follow the steps below to create a simple Home Page in Adobe XD. This exercise is designed for beginners with no prior design experience. The only requirement is that you must have Adobe XD installed and you must have an Adobe ID.
Launch XD, then at the Welcome Screen, create a new "Custom Size" document that is 1600px wide and 1000px high.
First off, do a "Save As" and name it something like "mysite.xd" and be sure to save it in your personal folder (not your github.io website folder).
Next, in the upper left hand corner of the artboard, rename the artboard to "Home"
Next, turn on your Grid, set it to 12 columns wide with 250px margins on each side. This grid layout setup will provide a centered "container' area that is 1100px wide.
Tip: you can double-check that this is setup correctly by drawing a rectangle across the 12 columns and see if it is 1100px side.
Use the Rectangle tool to draw a 1600x100 header with a light grey (#cccccc) fill color at the top edge of the artboard. Make sure that the rectangle has no border. In the Layers panel on the left hand side, rename the layer to "header bg" by double-clicking on the layer name.
Add Site Name (aka Site Identity, Logo, etc.) - use the text tool to write the name of the site in the top left hand corner of the interface inside of the header section. Zoom in and out via "command +" and "command -". Font: Arial 24px Bold.
Add Site Navigation (aka main nav, top nav, etc.) - create a main top nav by either using the text tool, or copy-pasting the site name (Command-C, Command-V), or by duplicating the site name (alt-click + drag) and place it on the top right corner inside of the header. Font: 18px Arial Regular. Set the text say "Blog" because this is going to be the blog page. Then repeat this step by either copy-pasting or duplicating (alt-click + drag) the "Blog" text to create the next two nav items: "About" and "Home"
Create a header group (folder) by selecting both the header bg layer and the site name text layer then right-clicking and choosing "Group" (or pressing "command G"). Rename the layer to "header"
Use the Rectangle tool to draw a 1600x500 hero section with a lighter grey (#eeeeee) rectangle just below the header. In the layers panel, rename it "hero bg" and move it below the header in the layer order.
Add Hero Text - use the text tool to write the words "Summer 2019" inside of the hero section. Arial 100px Bold. Be sure to center align the text. Immediately below it, place a sub-heading/by-line/sub-header txt block with a short description like, "A website I created while learning web design at Iolani." Arial 21px bold.
Be sure to create a hero group (folder) by selecting the hero bg layer and both hero text layers then right-clicking and choosing "Group" (or pressing "command G"). Rename the layer to "hero" and move it below the header group.
Use the text tool to create three sets of lists, each one containing a category Header (Arial 18px Bold), a category short description (Arial 16px Regular), and three list items (Arial 16px Regular). Draw a small black circle for the list bullets then repeat each list item by either copy-pasting or duplicating (alt-click + drag) each line item.
Once you have one list category set complete, repeat it 2 more times to create a three column layout by either copy-pasting or duplicating (alt-click + drag) each category list set.
Be sure to create a parent "lists" group (folder) that contains three "list" sub-groups (sub folders) within it by selecting each set of lists and grouping them together and labelling them accordingly.
Create your footer section by using the line tool to draw a top border (1px light grey #ccc) to a footer section and within it copy-paste (or duplicate) the main navigation within it. Be sure to group the layers and name the folder "footer"
When you are done, you can preview your site directly inside of XD by hitting the Desktop Preview button in the upper right. It should looks like this:
Congratulations—you just designed a home page for a website using Adobe XD.