Design and Code: Responsive App Landing Page (Part 1)

Hey guys! I’m so excited to release this brand new series on how to design & code these two colorful app landing pages (above the fold).

In this video, I’ll first show you how to design two landing pages right in Adobe XD. The first includes the iPhone X app mockup and the second includes a trendy character illustration.

Both of these app landing page versions include elements from earlier tutorials, so if you’ve been following along, it’s going to be super easy for you to complete this tutorial.  If not, there’s still time for you to catch up by watching the earlier tutorials on my channel!

Gold Membership

Gold Members can download the final project file below:


 
Members-only access. To view content, become an XO PIXEL Gold Member!
 

What You’ll Need

Artboard Setup

As you can see, I’ve already added two artboards that are 1280x800px. I’ve also added all the assets we’ll be using for this tutorial, including colors fonts and symbols, in the assets panel. Note that throughout this tutorial, we’ll be using the Google Font “Source Sans Pro”. If you don’t have Google Fonts installed on your computer, be sure to watch the tutorial I made on how to use Google Fonts on your computer.

Color Palette for App Landing Page Tutorial

Grid & Background

Let’s apply a background color to our two artboards. I’m going to use this light blue color.

To help align our content, I’m going to enable the 12 column layout grid. The layout grid includes options to change its opacity level or color. Right now, it’s a little hard to see the blue grid against the already blue background, so I’m going to raise the grid opacity for better visibility.

Now, that we’ve set up the artboard and grid, we’re going to design the device landing page.

Screenshot of the two artboards for an app landing page (above the fold)

Header & Navigation

First, we’re going to design the header and navigation area for our app landing page. To do this, I’m going to first grab the “Chatr” logo from the symbols library and align to the left edge of the grid. As mentioned earlier, this logo was designed as part of my two-part tutorial on how to design and prototype a messaging app, so be sure to watch the series to learn how to create this logo.

Now, we’re going to design the navigation menu. Grab the type tool (T). We’re going to write out four menu items that are related to an app landing page. In this case, let’s write home, features, pricing and learn more. Select all four text objects and apply the Semibold, 20pt character style.

Now, we’re going to draw a yellow rounded border that’s 140x42px around the “Learn More” menu item. Select both objects and “align middle vertically” and “align center horizontally” and then press Cmd ⌘ (Mac) or Ctrl (PC) +G to group the objects together. Now, evenly space out the other menu items and align them horizontally. Also, be sure to align the menu items and logo horizontally.

Screenshot of the header and navigation menu for an app landing page

Main Content

First, we’re going to grab the text tool and write out hero title for our app landing page. I’ll write “A Smart Messaging App For Everyone”. Now, apply the bold 50pt character style to the text.

Note that our main content area elements will all be aligned to the left-hand side.

Below the hero title, we’re going to draw a solid yellow dividing line. Grab the line tool (L) and draw a line that’s 95px wide. Color it yellow and set its border size to 4.

Now, grab the text tool and paste around three lines of Lorem Ipsum, placeholder text. Apply the Semibold 18pt character style to the text.

Finally, we’re going to design out CTA button. Grab the rectangle tool (R), and draw a borderless purple rectangle. Now, grab the text tool and write a call to action. In this case, I’ll write “Go to App Store”.

Now that we’re designed out main content area, we can add the final elements to our landing page.

Screenshot of main content area for an app landing page

Device & Abstract Shapes

To add our final elements, we’re first going to grab our decorative blobs from the symbols library and place it to the right of the main content area.

Now, grab the device mockup from the symbols library and place it on top of the decorative blobs.

I created this device mockup by exporting the Messaging App UI (PNG) and then placing it on this iPhone X device mockup.

Screenshot of device and blobs for app landing page

App Landing Page – User Illustration

To design the second version of our app landing page, we’re going to use the Flat Illustration we created from last week’s tutorial. If you haven’t watched that tutorial, be sure to check it out on my channel!

Simply select and copy all the elements on the device artboard, except for the blob and device. Select the “app user illustration” artboard and press Cmd ⌘ (Mac) or Ctrl (PC) + V to paste it in place. Drag and drop the illustration from the symbols library to the right of the main content area.

Screenshot of user illustration on app landing page

Mobile

Now that both of our landing pages are designed, we can design the mobile versions of our websites. I always like to design a mobile version of my responsive websites so that I know where I want certain elements to be when I start coding mobile-first.

I’m going to add two iPhone 6/7/8 artboards for both versions of our app landing page. As you can see, I’m simply copying over elements, shrinking them in size and doing small modifications to our elements to adapt them to a smaller screen.

Screenshot of mobile artboard for an app landing page

Conclusion

There you have it! You’ve just designed two versions of a colorful app landing page, right in Adobe XD. Stay tuned for part 2 in this series to see how you code this design into a responsive website. Be sure to give this video a thumbs up and subscribe to XO PIXEL for more great tutorials, just like this one.

Like this article?

I'm a Content Creator, Front-End Web Developer, UI Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog xopixel.com!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.