Adobe XD Tutorials

Create a Personal Blog with Nuxt.js & Headless CMS (Ghost) – 1 of 2

today you're going to begin a two-part video tutorial where you're going to learn how to design as well as do the front-end development of an ox j s based

blog using a headless CMS called ghost before we begin this video sponsor is Linode and they make it easy and affordable to host your site app or service on whatever technology stack you

use unlike entry-level hosting services the note is a step up to powerful fast fully configurable cloud computing with server plans starting at just five dollars plus no hidden fees or surprise

outages Linode offers a no-nonsense hosting at a price you can afford so sign up now using the link below to get a twenty dollar credit on your new Linode account hey everyone what's up

Gary Simon of course satchel com so today we have a big one for you this is in total part gonna be I am about an hour and a half to two hours long split up into two different video tutorials

and the first ones today and so what we're gonna be creating from scratch and what we're gonna have created by the end of both of these videos is this blog right here this blog so first of all yes

it is responsive and second of all it's based on vgs tour next rather which gives you server-side rendering meaning that if SEO is important especially if you have a blog it should be important

to you then it's gonna render all this content for the search engines to be able to find it and so this is also i based on its grabbing all this this content here from a headless CMS so what

is a headless CMS well basically if you don't want to go through the work of having to create your own back-end in an area for people or yourself to have to write your posts and manage all them you

can use what's called a headless CMS there's a bunch of them out there I'm going to be covering the integration of them I have several of them the first one happens to be one called ghost and

in ghost I it makes it very easy to edit your content so let me just show you something really quickly I if I go here to my ghost panel this is the ghost I admin panel where

you write your posts and pages and all this other stuff and as you can see welcome to Ghost burrow welcome to ghost bro it's all updated in real time so if I go here and I say ghost burrow too and

just click update and refresh here we'll see ghost Row two we can we also have pages that are working here I just did a quick example I show you exactly how to pull in custom content from pages as

well so in this video tutorial I we're just going to be focusing on the UI design in Adobe experience designer Adobe XD you can use any other one that you want I'll but because I love UI

design and I'm releasing a UI design course soon I check the link in the description to sign up to get notified when it's available I love teaching design so we're gonna be

talking about all these design decisions and just ultimately try to help you become a better UI designer in the second part that's when we're gonna get into the coding I'm gonna release that

in a day or two and so yeah let's go ahead and get started but first make sure to subscribe alright we go ahead and get started here using Adobe experience design or Adobe XD you can

use sketch figma whatever else you want we're not going to be using anything that's too crazy my dog's Park in the background but we're gonna go ahead get started with I mobile first all right so

there's mobile first when it comes to front-end development in HTML CSS but also here in UI design as well so this will help us simplify the design as much as possible and work towards progressive

enhancement where I as we get to larger devices like a tablet or desktop we're going to skip the tablet just for this demonstration I want to be too long we're gonna go right to desktop after

mobile but then we'll be able to add more features and be able to change up the layout based on the increased width that we'll have at our disposal all right so right here with our Templar

iPhone template I we're going to get started here with the top you know this makes the most sense the the header section and the hero section alright so I've made the determination that I'm

going to separate the the actual navigation and the hero section in its own container and then beneath that we'll have our posts alright so let's go ahead and I'm kind of not sure where I'm

going to place this I'm just gonna put it randomly you can always adjust it later get rid of that border that XD is always adding and for this right here it's going to be our primary color that

we really want to use in the UI so I've already determined it's going to be somewhere right here in the purplish realm maybe a little bit more blue on the blue side I really like that right

there so seven seven zero zero FF is that color code you can also open up the the asset panel and you can take this color right there and we can use this as a

part of you know like a design system so we can just call this primary color there we go you don't have to do that but it's nice to manage especially if you're working

with a really large document then it's a it's nice and it's nice to be able to use that so I we're gonna have just the person's name up here so I for your blog or whatever whatever the name is could

be your personal name or not I'm going to be a Gary Simon of course I'm gonna make that white and we want this to contrast well so I just did a video recently where I did a review of the

stark plug-in or the extension here for XD it also is available for sketch and figma and if I get it out real quickly plugins we go to stark and we'll go to rapid contrast checker I take both of

these elements it's gonna let me know if this adheres to at least the WCAG standard for contrast of double-a and it is so the result the contrast ratio is 6.5 we need to get to 4.5 so this works

well if I had made this a little bit brighter for instance guarantee you it fails 4.1 so you really want to choose your care your colors very carefully when it comes to coming up with a color

palette or color scheme for your branding in your project so I'm gonna stick with these two right here I'm gonna use new neato for this it's a nice sort of round

roundish font you can't really tell here but we'll get some larger text and you can experiment with that yourself I think we'll go around size 16 for the type right here I'm gonna do duplicate

it oh we're also gonna make this bold and the reason I'm going to make it bold is because we want these these two type elements is going to be the menu over here to separate from each other so

that's a visual hierarchy by the way let me drag this over here in the screen this is a little app that I had made I and I'm gonna be making it available shortly gonna add more features to it

and also change this up a little bit probably add a couple more things but when it comes to UI design fundamentals these are the things that you really have to keep in mind the forefront of

your mind especially when you're starting out that for every element that you you create that's a part of your UI and the UI the whole UI itself you have to always be considering is my

whitespace correct I this little dragger bar right there that's just for me when I rate other people's designs is to contrast correct is the color correct all these things

are very important so like for instance just we only have a couple elements here but a lot of this comes into play already so for instance when I place this type right here

I didn't just place it right up against the edge because that would be bad for white space all right so I we want a lot of whites not a lot but enough so that it isn't too far but it's not too close

as well so somewhere right around here would probably be pretty ideal you could probably get a little bit further away but that's okay we also have our contrast the color we already know in

the contrast is working very good with each other white space is good visual hierarchy comes into play when you have a little bit a couple more elements so control D for instance so we have visual

hierarchy that we to pay attention to for the navigation so for the navigation I'm only planning on having three links so we don't have to have a hamburger menu icon if you had

more than that you probably won't be able to fit it on here I in which case you would use something like that but really I if you can avoid that hamburger menu you should do so because it's an

extra step that people have to click in order to access your links all right so let's go ahead and make this regular so right right there we've reinforced the visual hierarchy and so what is the

visual hierarchy well if you have these two elements that are exactly same size font weight color etc do.i doesn't really know where to look first right but once you start changing them up

through these different visual properties such as weight for instance you can really influence I just went the wrong way you can really influence where the I should go so I'm

gonna put who again and then make this regular so now we just gave given importance to this element right here let's go ahead and duplicate that move it over and we're just gonna have three

links like I said posts and duplicate that hold shift and just move it over and make sure they're even spaced apart and then contact all right so we take these three and I'm looking at the

whitespace and ensure that it's even from the left and top just as it is over here I think we could also probably scale these down just a tad bit more all these so maybe we'll go to 14 all right

and for now I like this just as is okay so let's continue on here I'm going to have a headline this is a very conventional thing you have a headline to inform the people or use ad copy to

try to get them to stay also inform them about you know what the site is welcome to my my dev vlog I don't know okay so we can now right here when it comes to visual

hierarchy once again we have an issue kind of don't know where to look now because everything is the same font size but the most important element to this point in the design happens to be this

h1 element of this this header element I say h1 because front-end developer in me so let's think increase this pretty substantially and then also make it bold so this is pretty good I may just get

rid of dev that'll allow me to increase the size a bit and now we've really placed importance on this element right here it's the first thing that you know chances are it's the first thing that a

person is going to read which is very important secondary elements are up here with for the navbar that let's go ahead and add a sub-headline which is usually just a sentence or two

of supporting text all right and we're going to just lorem ipsum this but first we'll put this at around size 16 we're going to make it regular and we're gonna use a plug-in called lorem

ipsum you can just go to discover plugins type in lorem and you can install it very quickly without having to reload fill with placeholder text insert it and let's drag this down oh

there's not enough let's go ahead and do that again lorem ipsum fill with placeholder text there we go so now we have more to work with now looking at this what is wrong alright

based on these elements what is the one thing that really stands out as being incorrect well white space this is way too close to the edge and it just throws off the

entire flow of the design gotta give it room to breathe so we're gonna hold alt and drag this in so that it drags in equally from the left and right maybe right around there

I don't want to quite have this much text so we'll maybe he just pulled that up a bit and now we're spacing things out you don't want to go too close it's too hard to read right around there

would be good alright and then we're gonna have a call-to-action button so we're gonna take the rectangle tool come from the center you'll get that Center guideline

left click hit hold alt and right around here I pretty good we'll change it after in a second and we'll drag those corners in you don't have to I'm choosing which is a subjective preference so it's not

objective it's not like 100 percent right or wrong to have rounded corners I'm choosing just to make these rounded and I'm going to take the type tool and I'm going to left-click from the very

left and drag out to the very right and the reason I'm doing that is because then it allows me to have this centered so I can perfectly Center the text higher me all right can't see it yet

because of the background and we need to change that definitely so we're gonna actually change this from white you could go by the way you could make this completely white in fact that might be

the better way to go about it I but I did this project beforehand and I'm looking at at a reference the way I chose to go about this so for instance you could do this let's move this out of

the way this would be perfectly acceptable because the eyes really is drawn to this call to action button tax right here because this element really demands a lot of attention because it's

a big wide area of white in a contrast for a while at the background this would be perfect perfectly fine I chose to go a slightly different route to make it not stick out quite as much because this

is a blog so the fact that I want people to hire me as well it's kind of like a side note really so to maybe D emphasize the importance of this call to action button what I'm gonna do is take the

background and we're going to make it darker remove the soft screen just by you know a small shade or so right there so you can still see it but then we're gonna take this so the contrast is

obviously horrible and we're going to use maybe a secondary color that works well so right there it's kind of like a neon or fluorescent orange yellow highlighter color I think that

works well right there is centered up we could probably stand to bold this as well all right something like that and then finally that's all I want to have for

this section we're gonna pull this up and what I'm looking at is probably to have you want to have an even amount of white space based on these three elements right here so the amount of

white space from here to here to the bottom of that text right here should be around even around the same from here to here at the bottom alright so that looks good and if you think there's too much

white space and because you want to have your actual blog posts up a little bit higher just you know move these up like that like that so that's pretty good right around here I'm happy with that

okay so now let's go ahead and continue on with the bottom section so we could just go with a hundred percent white here in in order to create you know a real stark contrast between these this

element up here the navigation and the hero section and this stuff down here I'm gonna go and do something slightly different I'm gonna take the background here the artboard background color and

make it just slightly gray so it's f3f3f3 that's what we're gonna use all right the reason I'm gonna do that is so that I can place our content in a container

of sorts so we'll take this so we'll say this is our container right here we want to make sure that this starts where this starts on the same column essentially so we'll just drag it out from the very

left to right and it looks like I'm not even you could definitely tell there's more space here so we'll get this fixed up here in a second there we go that's much better

now we'll get rid of the border because borders generally speaking especially in this context aren't good they just add a necessary clutter borders used to be real popular back pay for UI designers

we're gonna drag this in and you know what I'd like to see a little bit more of a contrast between this foreground elements so I'm gonna take this we're gonna just slightly make it darker so

we're at ececec right there so just a little bit darker not too much before we get to this container I do want to put like what would be a subheading like in an h2 element and CSS I'm just gonna

type in latest thoughts please don't ever use that color right there we got to fix the contrast there of course and so we're going to left the line that first of all and we are going to we can

just make this black this is entirely important so we can really scale it down latest thoughts right around there and I think that's good all right so now this will be like our first I post for a

fictional blog post so I'm going to take the rectangle tool left click and yeah come on right around here get rid of that annoying border drag the border radius and we could fix that afterwards

and now we're just going to go to a plug-in and I'm going to use unsplash let's type in office get image there we go so now we have an image that's placed in

there kind of just a placeholder image all right so let's take a look at these these border radiuses this border radius right here is 18 this one is 18 and it actually should be a little bit smaller

so that makes sense as if it's scaled inside of this container I think I like that pretty decently alright so next up we're gonna have kind of like the author or you could do like

a label this would be the associated information with the post so we'll do like Gary Simon I think we'll use this color and you'll see how this works you know what let's just make that leave

that black first of all because we're gonna have a little bit less than in typography here in a second we're gonna duplicate this and this is going to be our blog title actually I don't want to

duplicate it we're going to use this we're going to drag it out because titles can be you know multi-line let's say welcome to ghost I'm just looking off the the fictional

data that we're gonna have to use to work with when we get to the ghost API and all that so by default let's also make that black I'm just going to get all of our information here first that

we're gonna be using and then we're gonna make the type look really good and work well we're also go ahead and just take this stuff because it's already though it's already lorem ipsum for us

so we'll just drag it down here make it black there we go get this I set up evenly left and line it alright okay so right now this is terrible okay this doesn't make sense

for many different reasons so you have to prioritize your content as much as possible you know what is the most important element you know for this particular container which is the blog

post and it's really just a preview of the the blog post this is an excerpt so you have the author okay pretty important but you have the title the title is the most important thing so we

need to emphasize that as much as possible and this is official hierarchy so we need to increase this size so that it demands more attention so there we go we've already fixed this quite a bit and

made it look a lot more you know suitable for something like a card design here we separate this further though so first of all what size is this type right here

this is 16 this is 16 as well we could probably get away with making this 14 or so and that further you know separates the type in terms of visual hierarchy and for our author I think we could

separate this 2 even more so and you could use that you can do so in just as well as to you know introduce your brand colors more or reinforce it we can use it right here as well so let's go ahead

and make this regular as well and we're spacing these out just so that you look pretty solid here so I'm just looking at the amount of white space here versus here and I think this is solid right

here okay so now I am I think I'm gonna have a little bit of a drop shadow on here now I see a lot of people get these wrong like they'll make them roll dark like that and that just doesn't look

good you can do shadows but you need to make sure that they're really subtle and I'm going to take the up asset even down more so you could just barely notice it at all you don't have to by the way you

didn't have to do that that's just a kind of like a subjective preference that I that I had so now we can take this down quite a bit we'll take all this with the repeat grid tool and pull

it down get this up and there we go of course our example is going to have more but we get the point all right so far right here now normally

if this were a real project you would work in a design for the pagination and all that good stuff I know even a footer but we're just gonna end this part right here we are

already 20 minutes and we have a lot more to go all right so I this is a very first post all right so what are we going to do next all right what does what's the layout gonna look

like when somebody clicks on one of these posts I need to design that so ctrl D with that artboard selected and let's get to this so this is going to be a lot quicker we are going to delete

this this this this we're going to ungroup the grid we're going to get rid of the bottom view right there and I'm going to delete the picture and let's see here we're going to left align this

this is actually going to be I'm choosing I to have the title of the blog in this purple area and I'm going to hold let's see alt here and just to make sure that's we have the same amount of

margin and padding here and we're going to move this container up maybe right around there and maybe we'll leave this up a little bit all right so in CSS we can achieve this just with some negative

margin top and this way it kind of just gives us the same container field that we had and it reinforces the same style throughout the design and I think this is solid right here so what we can do

now is oops right click ungroup that before you try to delete anything specific and this is just where our contents going to go right around right inside here so you

could do a lot more lorem ipsum you know generate it to fill out the whole thing well I'll do that real quick actually to see here lorem ipsum and fill with placeholder insert text there you go you

get the point so this is where you know the blog post would essentially be shown and that's all I'm going to really dedicate to that that part of course you were if this were a serious project you

would give them a way to go back I'm planning on having the name you click the name is going to go back to the home page here but my back button would make sense having additional information like

when the post was created you can design for all that stuff as well if you wish just to keep it simple and so we can kind of get ruling here I'm gonna make it dead simple kind of

like this okay so I just so this is an unnecessary long let's push that up okay so now at this point we're gonna do the desktop all right so what we'll do is to go to the artboard tool we'll go to

desktop here web 1920 and now we need to take this design and translate it to this design which is obviously completely different we have ai landscape mode instead of a portrait

essentially so it would not make sense to just keep this same design for here so we're gonna have to change it up and so that's where a responsive web design comes into play and all that good stuff

so let's go ahead and we're gonna take just the top stuff I'm gonna duplicate it and just drag it in over into this artboard get that right there and let's get rid of the layer so we have a little

bit more room alright and what's nice is there's a responsive resize by default so when we resize this whole thing for the most part it works of course you know we have issues up here so what we

want to do now is get this working so that it makes sense for our desktop so the first thing that we want to do and by the way you can go to your artboard and click on layout right here we could

see the grid right here it's kind of just like handy way so you can place items where you want to we'll say there's a container for a web 1920 maybe right around here so nothing will exceed

this outer bounds right here so we'll take contact and put it in the right part of this grid right here alright and then we just want to make sure that these are even out inside so for now we

can go ahead back and hide the grid layout and we're gonna move these over and we definitely can scale things up here so when it comes to front-end development and CSS with media queries

we can set the body font size to something like I you know from the default 16 and we could push it up to 18 20 and everything will scale up automatically and you'll see all that

here in the next video but what we want to do is increase the size of these elements so we can go to like 16 or maybe even larger like 20 or so and we can also do the same thing

with the padding so look how close it is up here when you're dealing with the desktop or these largely devices you have a lot more room to work with your padding and your whitespace your margins

and all that so those should be adjust as well so let's push this down maybe to right around there and these are a little bit too close as well so let's get these moved a bit so we want to have

an equal amount of distance between these so let's go over here and then there we go all right so welcome to my blog this can be increased you know drastically this right here

just kind of looks silly let's increase to size again we're still lacking in the white space because this is all really pushed up let's give ourselves some more room here take these elements there we

go so as you can see as we're spacing everything out things are starting to make a little bit more sense so let's increase this you could probably stand to get this in a little

bit as well I still think these might even be just a tad bit too small there we go all right so very simple I think this would be this background right here would be

perfect for having like a a watermark sort of thing for instance if this was like a code blog or something we could do this like this is a little bit generic you see

everybody doing this but just just for an example I'm not going to do this for real but we could change this to like monster around here and we could have like a big graphic like a SVG in the

background and what we could do is take down that ax pasady or make it the same color and this drop down the brightness just a bit so then we right-click or just go to our layers put it just above

the rectangle and then we have a nice little sort of you know illustration of sorts to make this look a little bit interesting I'll leave that there maybe I'll integrate it into the actual

project so this hire me yeah make that a little bit bigger push things down just to slightly take this all right so far so good okay so now at

this point oh by the way I beam that we're on desktop I mean if you wanted to you could have taken these things and left line them here this type element this type element in this and then have

another column of content perhaps over here you could have done that just as easily but we're keeping it pretty simple here but now the one thing that it's gonna change up is this port

portion over here so let's take this element right here I'm and duplicate it drag it over right click on or not right-click but just ungroup that get rid of those three now you have an

option here oh by the way to get that latest thoughts in here as well okay you have an option really you could you could really just take these and put them in like a column of

three or four what I mean by that is we repeat grid and just do this just push this out to the where this column meets right here and maybe make them a little bit larger so there's not so much space

that would be perfectly fine really but what I'm gonna choose to do is something different so what we'll do is right-click and ungroup see it'll automatically group your entire

selection for you when you use repeat grid so that's why you do that and we're just gonna pull these out like this alright and then we're going to take these three bits of information and put

them over here and really the the thumbnails that we're gonna be yours they're gonna basically going to be like square all right and then we're gonna take these two elements put them here

for now and we're gonna increase the size of these because they're all the font sizes are increasing here maybe just by well first of all let's let's push this out let's push that

all right and what we'll do is um we're going from 14 hero city like 22 here scale this up quite a bit as well and then this type type definitely scale up alright

so now it looks a lot better all right right around there looks good also like I said we're going to be using the e/m unit before our padding and our margins when we get to CSS so that means that

these these are flexible union units that will scale up their relative units that will scale up an increase as the browser width or the device width increases so what we want to do is move

these things away from here because that's what that's the amount of space that's the amount of hot margin that will exist on mobile but it's gonna be more so I hear so what I'll do is just

take all four of those elements move them in like here I'm still having a hard time seeing the difference between this colors oh that's because this is white no wonder Gary I am let's see here

we want to get this background color okay there we go there we go that's a lot better so now we can see the difference and we want to make sure everything's evened up there's too much

space here and not enough there so we got to keep things consistent yeah right around here seems good all right put that right there and there we go so now we can take this will scale it

down just to show a few and that looks pretty good so again I pay attention to all of these different variables let's do the final page which will be just this version right here the

specific post view page over here and really it's going to be very very very similar in fact I think what we'll do to try and make this as fast as possible is first of all that's 51 okay I want to

remember that value right there 51 and 25 okay we're gonna take everything with exception to my that logo there we go and hit delete and then we're gonna take this and we're gonna

copy come back over here paste alright and obviously we need to take these layers and sort them at the bottom drag that out alright and then we will start that here increase that one to 51 scale

this down give yourself some more white space this stuff over here we need to fix that in a bit we're going to drag hold alt there we go and then this of course all

right of course we lost our little you know this element I don't think I'm gonna include it anyways just because we're keeping things real

simple here but yeah and that's basically it of course this the actual contents gonna fill out this area a lot more so it looks like an actual blog post and not just some you know

uncomplete thing but that's basically it right there so let's real quickly if you wanted to prototype just these two elements or these two we can switch to prototype

anybody clicks on any of these push it over there tap it will be just a transition and yeah and then if somebody clicks the name we'll go back so now we hit play

oops we hit play and we click on this there we go very simple not very exciting so that is going to be the design that we that we work on and we make it a rout reality

with the help of next as well as the headless CMS ghost alright so now that we have the design done here and we know what we exactly you know what we want it to look like we're in the next video in

part two which is the final part we're going to go ahead and make it function in knucks j/s using the headless CMS as ghost all right so I will see you guys will

soon make sure to subscribe goodbye [Music] [Music]

http://www.linode.com/designcourse – Use code ‘DESIGNC19’ to get $20 credit on your new Linode account!
– Welcome to this 2-part crash course into designing and developing a personal blog in Nuxt.js and a Headless CMS called Ghost. Nuxt.js is a Vue.js framework that provides SSR (server side rendering), which is great for blogs as it’s SEO friendly.

A headless CMS is a backend for your blog that allows yourself and other writers to easily create posts, pages, etc.. without having to code the backend yourself.

In Part 1, we’re going to focus on the UI design of our blog in Adobe XD (though, you can use Figma or Sketch too). We’ll create a mobile mockup and a desktop mockup for the blog.

In part 2 (releasing in a day or two), we’ll finish up the project by stepping into the world of frontend development and making it a reality in the browser.

Here is the Adobe XD link from the design featured in this video:
https://xd.adobe.com/view/d5027cfb-44d6-45e1-4b58-b408e0442298-a333/

Part 2 is here:

Enjoy!

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

Subscribe for NEW VIDEOS!

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!