Articles

Adobe XD Design Tutorial: App Landing Page

January 24, 2020


Hey welcome everybody, in today’s video
I’ll go over the whole design process of this landing page using Adobe XD, let’s
start by taking a quick look over the content break it down into sections and
jumpy to dribbble to find some inspiration. Since this is done for a
financial app that helps young people get ready for retirement I’ll search for that and open every shot that I like in a new tab. To bring everything together I’m
using Milanote, which is the place where I gather inspiration and create mood
boards, I’ll drag a new board over here and name it Paragon landing page is
that the name of the company I’m doing this for, double click to access it and
following that I’ll go in each tab I just open up, hit right click and select
copy image then paste it in the board. Once I’ve done that with every single
one just drag them on your canvas, this is kind of like a pin board so I’ll have
to reposition each element to my liking and usually I arrange the ones I prefer
at the very top. Milanote also has image search built-in so I can find images
from unsplash without having to leave my board, which is pretty cool; if I click on
that image and tap in mountains then I can get some imagery that’ll set the
tone for my landing page. Once I’m done I’ll either place captions or notes with what I like about my favorite ones and what I can apply to my own design; if
you like to sign up for Milanote for free and give it a shot you should find
a link in the description and of course help this channel out you can also get
20% of Milanote pro forever using the coupon code cosmin20. Now I’m ready
to jump into Adobe XD select a web document to start with this already has
a full HD view and now I’ll rename the artboard by double clicking at the top
let’s say paragon page and enable the grid which should be on the right hand
side. I’ll use everything but the two columns on the sides I’m doing this
design on the macbook touchpad so pinch to zoom out and adjust the canvas by
dragging on the handle here; haven’t had time to talk to you about the company
I’m doing this for, Paragon is an app that helps you save up money for
retirement and they’re about to launch a Kickstarter campaign, this is the logo I
just have the file on a separate monitor so I just dragged it and added the SVG
file automatically, place it at the top for now and I’ll
bring the rest of the colors in I have to do small adjustments for it to fit
here and in order to start saving up the colors you’ll need to disable the grid
layout first to make things easier and either select an item or use the
eyedropper tool to sample each color and on the left hand side click on the plus
button from the colors tab. I saved these different one in the panel and placed my
first text element, hit T and click anywhere on the canvas, pasting the
content for the main headline and give it a color let’s say this gray only
because I need to have a dark background. I’ll take the rectangle tool and create
a shape for the background, once I placed it I’ll make sure that the fill is navy
blue and this select the border styling. You have full control of the actual size
of the shape and once you’re happy go to the layers panel that’s at the bottom
here and set that layer to the back. I’ll do some small adjustments but this shape
will probably cover the whole canvas in the end. We’ll want to set a different
font for the headline once you have selected it on the right hand side you
should see the options panel and use the one called Rubik. Since it’s a headline
I’ll go with the bold font weight and give it a size of 40 pixels. I haven’t
drawn a pounding box for it I’ll have to manually break it down into several
lines, maybe there’s an easier way to do it but this is actually the first
landing page I’m designing in Adobe XD, so if there are any cool shortcuts I missed
maybe just let me know in the comment section below.
I’ve holded down the Alt key and duplicated the element
let’s give it a 20 pixel size and adjust the weight of the font, maybe have it
light and paste in the content for the sub headline, I’ll break it down in three
separate lines and using the Select tool I’ll then play around and reposition it,
maybe, maybe have it closer to the headline. At this point there are two
main character styles so to save them just select each one and go on the left
hand side and hit the plus icon now you can reuse them at any point. It’s time to have a button underneath so
I’m not doing anything too crazy right now this is a pretty basic layout but
the elements I’m about to create is what will make it stand out hopefully, I’ll
start with the phone mock up on the right hand side instead of using what
its pre-made, I’ll create it out of shapes once I place the first rectangle
round up the numbers for the dimensions and play a bit with the corner radius,
first let’s zoom in a bit and disable the grid to have a better look on what
we’re doing and on the right hand side you should see a field where you can
enter the corner radius, for the shape I’ll have 30 pixels, let’s go ahead and
duplicate the shape in order to create the screen and of course do some
resizing. The phone needs a notch at the top and if you like to add more control
on each corner hold down the Alt key and click and drag this handle, that will
give you individual control over any anchor point you’d like. Once I’m happy
with something I’ll try to do the same thing on the other side as well we’ll
zoom out now and get ready to create some triangles behind all of these
elements. Using the pen tool we can start from the left hand side and go up with
an anchor right about there and then have it behind the phone somewhere
around this place should be good, then close down the shape. I want to give it a
gradient feel for that make sure that the shape is selected disable the border
and click once on the color, at the top you should have three different options
for this shape one I’ll have a linear gradient, select each end point and using
the eyedropper tool I’ll sample the colors I’ve saved up in the panel on the
left; I’ll do something with the light and dark blue and adjust the way it’s
getting rendered through these points through moving them. Since we’re using the same
color as the background I really like the effect where it kind of fades out on
the left side, in the layers panel I’ll find it and drag it behind the other
elements to make it visible. Even though I like the position of the triangle I
like to give it rounded corners and since there’s no easy way of doing it
(unlike illustrator) I’ll place a circle at both ends and
create a new shape on top of. Okay, would also like to have a diagonal
shape behind everything so using the pen tool I’ll draw something there’s no
specific angle just do what feels right I’ll use the same gradient style, lower the
opacity of the triangle a bit just to give everything a bit of that one
feature I really like with Adobe X is the fact that I can drag an image on top
of any shape and it will be masked automatically, will want to play a bit
with using the same image behind the phone as well so there’s something
unique about the header, to do that I’ll duplicate the diagonal shape, drag and
drop the image again and now in order to have control over its position all you
have to do is double click on that shape. Hold down the Shift key to make sure
that the ratio remains the same and drag from either corners to make it smaller,
you can then click outside to deselect it. Right now it’s a bit too big
but before that let me select the phone shape and maybe give it a different
color, the navy blue should work just fine,
getting back to the image I’ll need to have few things as I want the one from
the phone to work seamlessly with the one in the background, not sure if I can
control the opacity of this image when I place it would be really helpful, right
now I’m just making guesses on what is the right position I think it’s closer
but it needs to move down a bit, as you can tell this can get pretty annoying
real fast, there must be a better way of doing it but maybe I just don’t know it.
I think it’s close enough for now I’ll have to look for that layer and place it
behind the initial diagonal shape, now duplicate the initial one and we’ll have
a gradient with one point being transparent so I can mask the left side
of the image where it cuts out; select the lighter end and next to eyedropper
tool you can adjust the opacity level of that point, will give a 0% and move it
around till I’m happy with the result. As I said this is the first time I’ve
used Adobe XD to design anything and so far it’s been pretty straightforward, as
the first impression it works great, love how snappy everything is I love dealing
with artboards and when i’m creating new elements there is no lag, I will be
curious to see though how it is with multiple airports but maybe in another
video, next to the phone i’ve created some shapes where i’ll place a couple of
michael’s i’ve downloaded from Envato elements i’ll also reuse the triangle
shape in other sections as well. I sped up this video since it took me a couple
of hours to complete the layout and I’m not sure if you have a couple of hours
to watch me work, a couple of good tips from time to time I’ll enable and
disable the grid just to make sure that everything is properly aligned, as I’m
doing this landing page I’m not even sure that Adobe XD should be used for it, I
still prefer Photoshop because well you can create something more unique, but I
guess this is the direction most design tools are heading towards and it’s
honestly refreshing to watch how it will change the way designers create new
things, for me it’s been a while since Sketch started becoming popular and I’m
happy to have to learn a new tool I’ve always checking YouTube for new tutorials,
it kind of it kind of reminds me of the days when I discovered Photoshop and
watch every tutorial I could get my hands on, if you have time I recommend
checking out Cody Brown and Caler Edwards, they have some dope videos on
Adobe XD and that’s where I learned all of the shortcuts I’m using right now.
With the icons I have them in an SVG document so I just dragged it on the
artboard and copy and pasted each one in the appropriate shape, then I’ll just
remove the other ones I won’t use. I’ve left the form at the bottom of the page
the messaging has visitor to sign up for the newsletter in order to get notified
when the app launches, so I’ll move the button to the right hand side and create
a rectangle next to it which will actually be the form field. I’ll make it
three hundred seventy pixels in width and try to match the corner radius with
the button, I’ll select the button first to see how many pixels it has and go
back and apply the same value. Now I think I’ve messed up here because
I’ve duplicated at an element that’s part of the symbol the button and it
applied the same thing to the button at the top, but I’ll just I’ll just remove
it afterwards. Let’s put in your email address and do some small adjustments
before taking a look at the page. This is the final design of the landing page,
hope you’ve enjoyed this video, if you did, don’t forget to hit the like button
and subscribe for more! Till next time, take care everybody, bye!

No Comments

Leave a Reply