By Gary simon - May 23, 2017
This post is based on our free course:
React vs Angular vs Vue.js by Example
The reason we're starting off with Adobe XD is because I always first create a mockup/prototype of the project I'm about to create. This leaves out any guess work when it comes time to write the HTML, CSS, and Sass.
We will also design our web app with the Bulma CSS framework in mind.
Be sure to Subscribe to the Official Coursetro Youtube Channel for more awesome videos.
Bulma is a "modern CSS framework based on Flexbox". It's relatively new and becoming a popular alternative to Bootstrap and Foundation as a frontend CSS framework.
It's what we're going to use when we step into the development phase later in the course with React, Angular and Vue.js.
The reason it's worth mentioning at this point in the course is because we will refer to the Bulma Documentation while designing the web app here in Adobe XD.
Whenever you're designing a mockup for a web app whether that be in Adobe XD, Sketch, or any other graphics app, you should be mindful of the CSS frameworks (if any) that will be used. This way, you can ensure that the presentation of the app mockup will closely match any of the predefined elements used within the framework.
If you know that you will be using Bootstrap for instance, be sure to refer to the Bootstrap documentation based on the elements you may use. We're using Bulma, so we will be sure to reference the Bulma documentation when designing the header, nav, hero section, and other UI elements.
There's no specific purpose for the type of app we're building. It's just going to be a well-designed, generic landing page for a fictional company, called MyCompany; original, eh?
So, in Adobe XD, the first step is to open up the WEB-DESIGN-GRID.xd from the project files.
Note: To access the project files, please visit the React vs Angular vs Vue.js by Example first lesson page, click "join or login" (create a free account if you don't have one), verify your account, and visit the course's home page to download the project files after logging in.
The first element that we're going to focus on designing is a horizontal navigation bar that will span across the width of the browser.
We will use the Adobe XD rectangle tool to draw out a simple navbar with no border and a fill color of #383838. Then, we will use the type tool to create a simple MyCompany type on the left, and right-aligned will be a horizontal menu.
Bulma offers a navigation section in their documentation. It's worth looking at how we should style our navigation, as we will use Bulma for this element of our web app.
Next, we will use the type tool once again to create the navigation menu items. The type should be slightly smaller than the logo type and also not absolutely white (use a mid-gray color here).
Note: Hit CTRL-D to duplicate each menu item and hold shift while dragging to the right until the purple margin-guides show up so that you have even margin between each link.
Next, we want to add a single call-to-action button to the very right. Bulma also offers pre-styled buttons, which you can check out here. We will use the hollow style button design for this.
Use the rectangle tool to draw out a rectangle, get rid of the fill, and give it a border color of #1EC9AC.
Next, use the type tool to left-click and drag from the very left of the button to the very right. Then, center-align the text and type "JOIN NOW". Make sure it's the same color.
Your design should look similar to this:
A common element in many landing pages is the hero section. This is a large area that's used to inform the visitor about the purpose of this company or page. It will feature a heading, subheading and a call to action button.
First, you use the rectangle tool to draw out a large rectangle as shown below:
In the project files, drag the clouds.jpg graphic on top of the rectangle that you just created. Adobe XD will use it as a clipping mask to feature the jpg:
Next, use the type tool a few times to create a heading and a subheading. The heading should be a larger (and possibly thicker weight) font, while the subheading draws less attention through smaller type:
Note: Notice the grid here? You can click the layers icon on the lower left corner of Adobe XD to reveal the layers, where you will see a GRID layer. These are responsive columns that will help structure our layout. Right click on the grid and bring it to the front from the arrange menu. You can also decrease the opacity as I have done above. The subheading text was created with the type tool by left-clicking and dragging from the left of the column to the right of the 9th column.
Next, we will choose the JOIN NOW type and the button rectangle behind it, CTRL-D to duplicate, and drag it underneath the subheading.
Then, get rid of the outline and give it a fill with the same color we've been using. Increase the size of both of these elements and make the type white. The type should be changed to "Learn More":
Underneath our hero section will reside some secondary, supporting content for our landing page.
Bulma uses FontAwesome for their icons. We're going to use a cog icon and import it into our design.
First, visit FontAwesome Icons and search for "cog". You'll notice the name is fa-cog. Once we have the name, you want to visit FA2PNG. This site will take in a FontAwesome icon name, and allow you to generate a PNG out of it.
Make sure the color is the primary color we have been using, put in the fa-cog name, make the size 100 and click Generate. Download the PNG and drag it onto your artboard:
We want it to fit within a single column of the 12-column grid system.
Next, use the type tool to create 2 separate sections of text to the right of the cog. The first will extend from column 2 to column 6, and the second will extend from column 7 to the 12th.
Make the first section of text larger in font size and a heavier weight. You can also adjust the line-height of the second section to match the height of the first section:
We're going to use a card-style layout for the testimonials. Bulma offers a card element for this purpose. Take note of how the Bulma card design appears, as we will re-create it in Adobe XD.
So, use the rectangle tool to create a 4-column width rectangle, and give it a light gray border and a slight drop shadow:
Then, use the type tool to create the actual testimonial copy (remember to give it good margin and padding away from the card content). This will consist of 2 type layers, one for the testimonial and one for the author as shown below:
Select the card container and the two type layers. then click on the repeat grid button and drag it to the right so that you see 3 cards. You will need to adjust the inner margin between each card by left-clicking and dragging to the right or left.
To finish off this design, let's add a real quick, simple footer. Make it the color of the primary color we have been using. Then, add a white text section left-aligned and use FontAwesome to import a Facebook and Twitter icon as shown below:
Select the artboard title and then copy / paste it. It will automatically a copy of the artboard to the right.
Delete everything with the exception of what's shown here, and change the heading to FAQ
Next, adjust the testimonials card container so that it consists of a question and answer section. These card containers will serve as the basis for each QA. Once finished, select all of the card content and use the repeat grid tool to drag 3 cards to the right, and 3 cards to the bottom as shown below:
Click on the Prototype tab and drag a link from the FAQ menu of the original artboard to the FAQ artboard we just created.
Repeat this process so that you the FAQ page can go back to the original artboard when a user clicks on Home. Now, you can play the prototype and interact with the prototype.
Let's simulate what this app will look like on a mobile device, such as an iPhone. Click on the artboard tool and click on the iPhone6/7 Plus preset. It will add a new artboard as shown below:
Next, select all of the content in the original artboard, copy and paste it and move it on top of the iPhone artboard:
Now, we have to make adjustments to make this content fit within this artboard. We're not going to use the navigation items we created, so we can delete all of those.
Next, use the line tool to create a simple hamburger menu consisting of 3 short horizontal lines. (Draw one, duplicate it and drag it down, repeat this process one more time to create 3 lines).
Continue to make adjustments to the hero section so that it looks similar as shown below:
Keep on going with the same process of resizing and resituating to finish off the rest of the layout. You will have to use the repeat grid tool on the testimonials to make them display vertically instead of horizontally. You will also need to adjust font sizes so that they're smaller for a mobile viewport. In the end, it should look roughly like this:
Let's create a second artboard (duplicate the iPhone artboard we just worked on) which will show what happens when a user clicks on the hamburger menu.
Draw out a white rectangle with no outline and a slight dropshadow. Then, use the type tool to write "Home", and the line tool to create a separator underneath it. This is consistent with the appearance of the Bulma responsive navigation. Select both of these elements and repeat grid so that it shows 4 total links:
Release the repeat grid and make each link unique based on the menu we created. Then copy the "JOIN NOW" button and text from the first artboard and drag it underneath our 4 links. Make size adjustments as necessary to make it look like this:
Remove the hamburger menu and use the line tool to create an "X" button. (Note: hold shift to create a 45 degree angle for the lines while drawing them with the line tool)
Then finally, switch to the prototype tab and link the hamburger menu from the iPhone artboard to the new artboard we just created. Make the "X" icon go back to the iPhone artboard, then click play!
The last step is to replicate the original iPhone artboard to create a FAQ page representation. By now, you should have a solid understanding of how to work with the Adobe XD tools to manipulate the elements to fit within these different artboards.
In the end, your FAQ artboard should look similar to:
Switch back to the the Prototype tab and make your necessary connections and then click play once more!
Your mobile app prototype is now complete and interactive!
Stay tuned for the rest of this course as we take this mockup and make it a reality in Angular, React and Vue.js.