Adobe XD Tutorials

Landing Page Tutorial for 2018 – Part 1 of 2 (Design)

hey everyone Garry Simon of course set ro welcome to the very first tutorial of 2018 for the corsetry channel and today we're gonna be focusing on designing a

landing page and I'm gonna show you my process and what's also cool is the fact that this landing page we're gonna be designing is for a personal project that I have high hopes for and it's based on

a crypto currency project so what is a landing page well first a landing page is basically any page in which your users will land on and it depends on you know whatever type of project you have

regardless to the type of project it has to have a goal you have to have an objective for that page and so in my context is going to be a web-based app that I want people to click on a button

and ultimately create an account so they can use this app essentially so I'm just gonna walk you through my process I'm gonna be using Adobe experience design however you can use anything that you

really want so first let me switch over to the desktop and I'll show you the actual app that I've been working on here so this is just basically in an app I'm calling it Crips CR y pts actually I

showed you how I design the logo in one of my previous videos and this is just basically taking the concept of cryptocurrency real-time charts as seen here I'm gonna have more information

though this is still very much in development and then with combining it with basically you know real-time chat right here so I that is the purpose of this app and so what we have to ask

ourselves as designers slash developers is how can we get people to use this app or as many people as possible and that of course is by designing an effective landing page alright so just to show you

something real quick as you can see here I swear a lot some some some one which was just really myself how to use a name of right there ah so let me show you what happens when we we ban one well

look at that I know it's so silly anyhow so let's go ahead and actually design a landing page for this app and I'm gonna show you how I do it so oh but real quick before we begin make sure you

check out my site course cetera comm where you're gonna find a bunch of courses on modern design and development a lot are free and others you can access for the cost of buying me like a six

pack each month that's it now also it probably wouldn't hurt to subscribe here on YouTube and be sure to make sure the notifications are turned on alright let's get back to it

here I have Adobe XD or experience design up and by the way let me just show you real quickly the very you know the beginning step is to actually load up XD and choose web 1920 because I'm

going to I'm going to do a web based approach for the layout here at least initially and right here I have the logo already set up along with three of these icons he scripted currency icons that

we're gonna be using in the actual landing page I just wanted to have them ready to go I will make this file available for you to download however so you can start with me also I'm a big big

advocate if you're trying to learn how to do something instead of just sitting there watching on YouTube you should also follow along especially you know if you're really wanting to become a better

designer actually physically going through the steps helps kind of ingrain in your memory much better alright so for this landing page I said like I said I have one goal and that is just to get

people to click on a button in order to join the chat which will load up you know some type of login system but we're not going to focus on that we're just gonna have that call to action and so

your landing page really needs two most effective landing pages the least they consist of a few elements first is a headline you know some type of very catchy title that kind of informs them

instantly of kind of at least what this this whole website is about or this landing page a sub headline where you can go into a little bit more detail and then a call to action of some sort so

we're gonna have those three elements plus some sort of very unique sort of illustration or graphic that's relevant to this service alright so the first thing I'm going to do is I'm going to

change the background I really like light gray if we're gonna go for a lighter or you can use dark gray if you wish I'm just going to go on the lighter side of EB EB EB alright and this type

of landing page I'm gonna use is very simple it's not gonna be very content heavy so I'm gonna have everything kind of just there's gonna be a ton of padding around at least in a desktop

version so I'm gonna put the logo stay right around here and this right here again when it comes to design in general there's not many things that you can do that are absolutely wrong you know a lot

of things are subjective one of the first things I usually ask myself though is you know do I want to have anything in the background do we want just a flat color do we want a gradient do we want

some type of maybe a watermark in the background and so the idea that I had is when it comes to cryptocurrency charts for instance like this over here this is called a candlestick chart and these are

very popular and a lot of people who are involved in crypto currency and stock trading in general understand what these are what I want to do is kind of have a chart in the background as a watermark

so let me just show you how I would recreate that here in XD so just going to use the rectangle tool and just drag out something right around this size I don't want a border I do want to fill

however because we're using a watermark and this is gonna be really just like a an afterthought a secondary you know element we want it not to have a lot of contrast in comparison or in contrast to

the background itself so if I take the background color right here and go slightly darker like around da da da then I think that will be good now you could see it just enough to will to

where you understand what it is but it's not going to take away from the important stuff which is the foreground elements so I I'm going to show you a real cool thing if you've never seen xD

Doby experience design before but first I want to add like a bottom little candlestick sort of thing all right I'm gonna make this the same color as well all right that looks good so what I'll

do now is I'm going to situate this right over here to the lower left and we're going to use the repeat grid tool and so with both of those selected I can hit repeat grid and then drag this out

all the way to the right now I want to increase the spacing just a little bit between them right there looks good okay now this next step is kind of tedious and because of that I will speed

up the the video momentarily but I just wanted to show you how we're gonna adjust this make custom adjustments to each one of these before I do that so I'm gonna ungroup them and now ya the

general concept by the way of what I wanted to do is to make it kind of start out low and then it's gonna grow all the way to the right that gets people excited when it comes to these type of

things so I'm going to let's see here we'll take these I let see these initial ones right here and by the way these are each a group so I'm gonna take these initial ones over here and just ungroup

them alright because the repeat grid tool will group those up take these initial ones I'm gonna scale them down and now what I want to do is just make adjustments so the way Candlestick

charts kind of work is this is based on a period of time like a minute for instance and then this is the next minute it'll start from wherever the other one went off either whether or not

it's going down up in price or down in price and so these initial ones I'll just kind of make like that and of course we're gonna have to adjust the lines underneath them

too match the bottom so for instance take this take this and so I'm gonna do this all the way to the very end and I'm going to increase

you know the direct that trajectory if I could talk right as I go along to the right alright so I'm going to go ahead and pause as I go through all these and do this actually I'm not going to pause

I'm just going to pry speed up the video [Music] okay so I know technically the anta which that I have here are only going in one direction

I have Skyy popping up but really just a minor detail so now what I want to do at this point shut the hell up please okay is I let's go ahead and get rid of that is hit ctrl G and I will group them all

up and then I'll get out the layers here rather right there and with that selected we'll go ahead and just lock this because I don't want to adjust it anymore I don't want to mess with it by

accident so we'll lock it right there okay so now let's go ahead and integrate or create a headline something that will really draw the users attention to usually on the upper left or centered in

the middle and it's you know larger than the rest of the elements and text on on the page for the most part at least and it informs the user in some unique way so what I'm going to do is just kind of

do a little bit of equation so I'm gonna say crypto plus chat which are really the two foundational elements of what my service is about equals Kryptos or crypts rather that's the name of the

service so crypto currency plus chat real-time chat is this service you know I it could be better the way to really find out is to do split testing when you launch the site

to see you know which iteration of the headline a sub-headline the call-to-action copy and anything else would really result in the most signups that's what all you can really do at

first is just a guess on what would be effective so I'm gonna use a font called Mont Surat monster I have no clue how to pronounce that it's free though you can google it and download it we're gonna

make it bold alright I'm going to make it black and make it larger maybe I'm gonna make it semi bold I don't want it to really contrast too much or not contrast but you know equal the same

with too much of the logo so maybe semi bold and maybe not quite black maybe just writing around 5 3 5 3 5 3 next gonna have a sub-headline underneath and let's draw out some space

here and this I'm gonna do I'm just gonna left click and do like an area sort of copy here and this is gonna be the sub sub headline so I can elaborate a little bit more on what this is so

when it comes to good ad copy or landing page copy you want to emphasize benefits rather than features for the most part so I'm gonna put slack meets real-time crypto currency charts now is that a

benefit or a feature it's probably a feature but that's all I came up with so far I will probably adjust this more so in the end so let's see here our medium I think let's see here so we want to

create enough of a contrast either through size and weight and color to really make these two elements discernible from each other and make them easy to read so in terms of visual

hierarchy we can see first we sort of have Crips such as the the branding via the logo the identity of the service then we have this right here which is the headline it's more important than

our sub headline and this is all reinforced through font size spacing positioning color etc alright I think that's pretty good I think I'm gonna make this instead of medium maybe just

regular alright and then we're gonna have a call-to-action button right here I'll say right around that size we don't need a border I'm gonna make this I think like a a blueish color let's see

right around there seems pretty good I think yeah that works well all right so inside of here I'm gonna have some copy so this is gonna be our call to action which is a button join up

or sign in let's make that white for the most contrast all right get it over here well now we'll put it right here so we'll give it a little bit of a border radius by left-clicking and dragging

those little angles right there and then I'm by the way I think I want to make this just a tad bit smaller but we'll make it semi bold okay and I'm going to zoom up

and just put an icon right here and we'll use the pen tool and hold shift and just make a triangle hi to the border give it a white fill and we want to Center it between the left of this

button and the beginning of this text all right that's looking pretty good right there okay so this bakes a question what goes over here by the way you could also

position this layout differently than I did it doesn't have to be you know two column side-by-side sort of arrangement you could for instance you know take this over here maybe or if you have a

toolbar at the top you could just put it in a traditional kind of like a header navigation area you could just do this Center all this stuff up and then have some sort of illustration down here

really it's up to you and ultimately the the answer comes through split testing and understanding how that all of that works effectively so right here I'm gonna have like a illustration of sorts

and I'm still gonna I'm gonna you could do it for instance with Illustrator or any of your other favorite vector applications however Adobe XD does have decent basic tools where you can do this

you do a lot of work essentially completely in this this app here so what I wanted to do here was kind of give them a visual representation not a literal one I don't want to take a

screenshot of this interface but I wanted to kind of recreate it in a simple vectorized fashion so I want to illustrate to them that this is damn that's just one up high I've that's pick

one for you I just wanted to illustrate that there are charts here on one part of the interface and there is chats here on this part of the interface and I want to

do this in a very simplified sort of abstract manner so I'm gonna have an actual let's see what do you call a monitor right here and I'm going to recreate that interface in a very

simplified manner and then even have some little chapped lips using these three icons up here so the first thing I'm going to put on it is a actual monitor so I'm just gonna left click and

drag out an area mmm I'll say roughly right around here we'll go ahead and get rid actually no I'm gonna keep a stroke here and that way we can really make it stand out because I plan on having it be

mainly white and so there's not enough contrast without it to really make it stand out so we're going to add a border and I'm gonna make it three for a stroke and then also we'll go ahead and pull

this in just slightly so I have a net basically that's sixteen by nine sort of monitor resolution I'm also going to do a stand down here so I'm just gonna hit control D to replicate that and just

move it down while holding shift will drag this in will say roughly around here we're gonna make it completely normal coroner's hold alt drag this in maybe up a little bit more and let's see

we'll make the fill color get the eyedropper all right the same right there and then I'll do one more so we'll take it ctrl D drag it down and then I'm

gonna hold alt and scroll wheel to zoom up and then hold alt and scale out alright that looks pretty good right there you know what I might want to make this

color a little bit darker for the fill and the border so what I'll do is come right around here forró forró forró add that as a swatch and then choose that real quickly all

right and finally here all right awesome so I'm just going to move this into place a little bit more see what this looks like zoomed out by the way I can move

everything else down more in Center there we go and then um let's see what else you know what I'm gonna make the background of everything here just a little bit lighter it's coming in just a

tad bit too dark there we go so it's f4 f4 f4 okay so now the goal is to take this and create sort of I like I said an abstract representation inside of this monitor here okay so what I'm gonna do

at least initially I'm gonna bump this up probably writing around there but I'm not going to be keeping it quite that bold it'll go back to three but I just want to have some white space between

the interface elements in the outer right here so the first element that we have is this sidebar this black sidebar and that's going to be the only part of that sidebar that I actually decide to

you know place or depict in this interface I'm not going to add the individual icons in the middle it just become a little bit too busy again we want this to be simple for the look that

we're for and so I'll just use that and then we also have this middle area I'm not gonna have well I just keep looking at this username I'm not going to have this

little sidebar for the users area because that is actually collapsible so I'm just gonna have this section and we can see it's lighter so you may just keep that white so I'm not gonna put

something there I'm just gonna do this section right here for this panel and so what I'll do is duplicate that control D and drag it out right there and then make it light maybe like that well

that's fine for now we're not going to see this part we're gonna see the fact that this is orbital overlapping a little bit next we'll have and by the way it's not really 50 percents more

like over here there's a little bit more room dedicated to the chat so next we'll have let's see here we have a chat bar the actual input area down here oh by the way check this out cool stuff huh

I stole that from Facebook by the way there's gonna be a lot more um emoticon it's not just two of them so let's go ahead and do that little chat area down here no stroke give it a fill probably

the same color right here and then I'll also give it a border radius and then I'm gonna duplicate it just for that little area where it had those little user reactions something like that

alright and then also the individual chat messages how would I Ella straight that in a simplified manner well it's very very simple again we want it to be simple so at this point by the way we

can go ahead and get this back to three oh I hate when it does that just take it down to three this way for some reason if I hit three there it affects the opacity which we don't want

all right so looking at this so far so good alright let's go ahead and do this little individual chat clip elements I'm just gonna take this one and duplicate

it we're not gonna make it as thick but there'll be just varying degrees of this so we can repeat this as a repeat grid vertically like that and then ungroup it and then we could just adjust these to

varying sizes to represent chat messages so again it's really simple stuff like that alright next I just want to have a very simple representation of the the candlestick chart the the graph which

shows up over here in this area so it's gonna be the same process almost as these the background process but nowhere near as many of them so I'm just to save myself time I'll duplicate that we'll go

ahead and make this um like a desaturate a green almost maybe like that so that's 6/8 EAD if you're following along I'll rotate it 90 degrees all right we'll start one here oh let's just do a repeat

grid make your life easier be something right around here okay that's fine ungroup it and now let's make our individual adjustments so by the way let me just take everything here start it

down a little bit lower alright so it there I'm not gonna pause because this will go by pretty quickly we're gonna need one for when you need a red color for the negative so that's

pretty good ie 1 8 8 8 8 all right yeah we'll go back up here almost done we'll make this one red I should have added these as swatches save myself a little bit of time not a big

deal though and finally rate here all right that's sweet so let's see what this looks like at this point I'm gonna move it over just a tad bit more I think so around

there all right and then finally one of the last elements we'll be creating a little chat messages like I mentioned before so I'm going to give this the same stroke so if I double click in here

because this is a part of a group we'll see the border and the border will be this color and it's 3 pixels it's what we want and then I'm going to create a little chat area so a little like kind

of like a chat container message blip thing if you know what I mean let's go up to 3 again keeping the same aesthetic across now we're going to zoom up all right and I'm going to use the

pen tool I'm gonna left click left click here drag out to create a Bezier curve and then come back like that I think that's good right there

all right so now what we can do I'm gonna take both of these holding shift so both of these layers are selected and we can see this up here we have these little path tools we're gonna choose add

tada awesome stuff so now it's all part of the same path oh you know what before I do that I'm gonna back up I want these to be rounded so we'll say right around here so now we can do that BAM

awesome so now we're gonna put some text in it and this is gonna be simple text something like let's see here should I sell the text is white so that's why we can't see it so let's go

ahead and yeah right around the mid gray will work alright let's see what this looks like so far I think that's a little bit too big so if I take both of these and well I could scale them down

this way holding shift when you do this yeah it does actually yeah sometimes when you do this it will mess up the alignment of the text in relation to the path so you

can always just make adjustments if you need to to the path itself or the size or location of the of the type all right so that one's good I would say right here you move it a little bit closer and

then well take the same process and repeat it two more times so now I want to go there let's go ahead and bring this one right here I'm gonna take this and just both of those hit ctrl D will

put let's see here we're gonna take both of these here and put them like right there I don't really want it to cover too much of anything that's important in this section so this one I'll make it

say it's mooning that's a lingo for crypto trading and stuff like that again we need to get the border on this all right and then finally this one right here I'm gonna stick this one I think

like right here we'll get that stroke on there duplicate these guys will put this one right here this one I'm gonna make a little bit different maybe a little bit

more lines of text we need to stop the bud okay fear uncertainty and doubt okay so now we have to make adjustments to this container and this is fairly simple so if I go down right there I double

click on this and double click again we'll have access to the anchor point so I'm just gonna hold shift to select all four move up and that looks pretty good right there all right I like that this

is a pretty solid in my opinion so this is it for the actual landing page I'm gonna have now I am going to take this and export them as SVG files and export these individually and that way I can

use CSS to animate these on top of this little monitor section so I'm going to do another video where we take all this right here and get it up into HTML CSS and export the assets as you can see

right here and do that animation that I was talking about so look out for that video real soon if you're watching this in the future its done already so just check out the

channel and you'll find that video alright see you later

The program I used to design this landing page is Adobe Experience Design (Adobe XD). I created a course on how to use it! 50% OFF COUPON: https://goo.gl/Zbgnmk (Watch for $9.99)

Written tutorial: https://goo.gl/2BW3Eb
Project file: https://s3.amazonaws.com/coursetro/pre.xd
https://coursetro.com for more good stuff! And subscribe here!

Follow along as I tackle a landing page design for my own cryptocurrency app! Learn how I approach landing page design.

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS weekly!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!