Adobe XD Tutorials

Creating a Clever 404 Page – Adobe Illustrator / XD Tutorial

hey everyone Gary Simon of course Tetro so today I'm going to be focusing on a real niche very focused subject and that is the concept of designing a 404 page

mainly doing this because I've been working real hard on the rxjs course have been promising for a while but I don't like a lot of time to go by my YouTube channel without actually

uploading something so over here to make it more difficult on myself and to see you know how I would do it kind of just off the cuff for designing a 404 page I have this page right here discover calm

and if I click this button take me to a useful website then it's going to just present me with a random website apparently and I will try to tackle the process of designing a relevant and

unique for a four page sort of illustration or layout or concept so if I click on this let's see where it takes me to all right ugly ass website all right so this is El mail.com see what

there lexer rankings yeah this site doesn't even practically exist as like a 3 million Alexa ranking yeah this looks really old school but you know that the whole concept is though for me to do

this this is just a an email service so I'll still do it okay so what would be a relevant 404 or a creative 404 page for an email service of looking again is there anything unique about this it's a

the easiest way to send a letter LML send your letter on post will just be there okay anyhow we'll just say it's email or message delivery or some sort that's a general concept so how would we

or how would I tackle doing a 404 page for such a concept alright so I'm gonna start off here possibly actually I'm not going to do illustrator we're going to do Adobe XD first it's just just a you

know this is from Adobe assist Adobe experience design in case you're unaware it's just a very quick an easy user interface ix tool you can design web mock-ups and

app mock-ups and all that stuff and prototypes here so you can do this in any application it doesn't really matter we're not making this a functional 404 pages just purely for design and coming

up with the process of coming up with you know just relevant sort of 404 pages so I'm not going to use their kind of layout because it was really ugly I'm just gonna make a very simple container

here where we'll have our fictional 404 page first I'm going to take the background and again I'm not really thinking too much about what I'm gonna do yet I just want to get a page here

something very basic I'm not gonna spend much time on it all right so we have our container here we have a gray background and this will be our fictional 404 page before I begin we'll just assume maybe

there's you know a very simp simple actually let's just make it el mal we'll use the same name at least I'll use montserrat iPhone I've been using quite a bit lately let's see here we'll make

it bold and we'll make it a little bit larger all right there's fine I'll duplicate it some fictional links real quick about all right that's fine for now okay so

this would be our kind of a fictional 404 page maybe I will duplicate this and create a very light background there we go all right so this would be our 404 page container essentially and so now

going back to the topic I coming up with a 404 page you know if you do something really really unique sometimes you can get actually get publicity for it so that's the whole point in doing this I

and also just an interesting user experience for your users anything up there ending up on a page that doesn't exist so in the concept of email or message delivery so this is where it

really takes some brainstorming you know what's happening when somebody reaches a 404 page while the page doesn't exist it's not a pleasant experience so let's try to make it better by doing something

that's relevant and witty or unique so how could we translate the concept of 404 you know something like a page that doesn't exist with the concept of email or message delivery all right so the one

of the things coming to mind is you know when you send an email sometimes you'll receive another email back stating that the address has not been able to be delivered for whatever reason usually

because that the email doesn't exist anymore they deactivated their account or something like that along those lines another way of coming up with ideas is just to use Google you know can help for

sources of inspiration so we can just go to like images at Google we can type in email broken and you know something might you know right away catch our attention and spark a new idea of course

we're not talking about stealing or anything like that here's a literal representation of the concept of mail obviously not electronic a mailbox you know it's something may

spark your your your tension and something may not one thing I'm thinking about in terms of likely an email box is you know yeah like it say for instance teenagers they come by

there and they're batting email or not email but mailboxes and that could potentially be a way to represent a 404 page so maybe a very simple illustration of a mailbox with the top portion of the

actual box laying on the ground maybe so maybe I'll try that direction maybe that could be a pretty unique way of saying okay we're combining the two ideas of email and a broken alright so I'm gonna

try that this may not be the easiest thing to do and I do have a Cintiq like a walk home monitor that I could draw on but I don't want to do that I'm going to keep this more simple than just freehand

drawing so I'm gonna use the mouse so I'm gonna come back to we're gonna use illustrate now you could do this possibly with their tools and Adobe XD because they do you have a pen tool and

some basic shape tools but I'm not quite familiar with them enough I'm a lot more familiar with Adobe XD so what I'll do is just create the illustration here in Adobe Illustrator and then just import

it assuming I'm able to do this correctly so let's see here oh there's a new update you know whatever alright so I'm gonna zoom up here just a little bit and

I think I'll start with the post like a wooden post or something with the rectangle tool alright so we'll make it kind of I got a in angle we don't look directly at it almost look at it from

like maybe you know 45-degree angle or whatever let's find the where is it at it's the shear tool here let's see maybe yeah something like that will work alright let's also I don't

want to stroke on this you could you know go with the stroke it all depends on how you want the end result to look something like that is fine and then let's go ahead and control C control F

transform reflect it's showing up on my other monitor we'll hit okay move this over okay so we're obviously based on the perspective that we have at at we're

looking from above and also to the side of this portion right here alright so okay so now we have to tackle kind of in a bit I will make this look like it's all you know like broken up or whatever

but what it will do now is use a rounded rectangle tool alright and we'll create the actual shape of the eye the mailbox itself the portion that's that opened alright

I'm also going to come over here in this section the lower left we want to be zero and lower right zero as well alright alright that looks like a fair enough

opening it seems to be about the right size now again this is going to be laying on the floor so we have to get this perspective right this may this might be a little bit eye a little bit

tricky trying to get this correct so I'm gonna go ahead and rotate it and then we can use some of these tools over here let's see we have a reshape and scale the shear tool I haven't really used

these tools too much in the past trying to get this right around and here's fine maybe it's laying kind of like that all right so I let me get up closer here there that way it looks like it's kind

of straight up and down all right I'm gonna duplicate this or yes ctrl c ctrl f we'll move it back something like that all right and then we'll take the pen tool now I

want to make this look like it's kind of like broken up a little bit there we go yeah something like that will work we'll connect this up and then we'll come up here right around here

all right and then come down here all right okay looks like crap now so what we'll do is let's see here I think a quick way of let me fix this by the way there we go that looks fine to me

a quick way of trying to structure this well we'll go ahead and just in case I screw something up I'll take everything and just move it over great copy and then what I'll do is we'll take our

window we'll go to our Pathfinder and then we'll use this divide tool all right so now we can just select the certain things that we want to select as being actual outlines based on what we

need all right so what I'll do is take let's see your just this one this one in this one and those are all going to be I'm going to use unite all right so that's the one side of it we're going to

take this one in this one and that's going to be the open portion will unite those we'll take let's see here I want to see what we're looking at so far we're gonna take this one this one this

one this one and then you need unite those so now our our shapes look like this okay now to really make it obvious that this is something that's banged up we're gonna use some different shading I

think we'll make this of course the typical gray color or the silver so let's go ahead and what I'll do first is let's get the the shading going so what angle is the the Sun coming we'll just

say it's the light source is coming from up here so the bottom will be with more light so we'll say we'll make this yes yeah right here's good we'll make this one slightly less bright all

right and then this one is going to be even darker now to really illustrate the fact that it's banged up we're going to use our pen tool connect these points here maybe this one will be a little bit

lighter all right like that we'll do the same thing up here all right this one will be a little bit darker all right and then um usually has you know mailboxes have those what do

you call little flags here so I'll just make a circle and ellipse rather just holding shift and alt while I do this and then we can use that shear tool and this will be let's see here we'll

make this kind of a darker red for now and then I'll use the pen tool I'll just create a slight bezier curve by pulling up yeah something like that'll work all right it seems a little

bit too big but don't worry we're not anywhere near done yet okay let's see do we want to show the bottom portion kind of coming out do we do we do we take this

we'll see if I can line this up correctly yeah maybe something like that will work then I'll just take the direct selection tool and move this over into place this

needs to be a little bit longer so I'm going to drag them out I will use maybe just a slightly different shade oops there we go all right so I'm gonna get rid of that

all right so not done yet I want to polish this up obviously a little bit more this is going to be a lighter color mmm let's see here there we go

now let's simulate this eye top portion being broken so what I will do is let's see something like that and then we will let's see here

I'll use this shade for now we'll just do this yeah this would be slightly darker and then we'll create another one right here this one will make yeah that'll work

and then we'll use this one for this point right here all right cool to really make this obvious a little bit more I think what we'll do is also use

will create part of it coming off here all right so let's see if we can get that all lined up we'll say we'll probably just a little bit coming off so we have to think of dimensions here

getting this correct something like that is fine we have to adjust the points afterwards all right and then we'll do another one right here make it aligned with that angle up there

okay and then we'll do that same thing like like this this and that doesn't have to be perfect I'm not really worried about it too much make this one use the eyedropper tool over here same

color is this oh wait okay it already was this one will be a darker okay so then we'll just do the same thing down here start like like that alright this one would be a lighter color so I'll

take the fill there we go and then um I'll take this doesn't have to be perfect still looks pretty obvious and then um yeah there we go sweet so it's kind of isometric in a sense all right

so now not done just yet and what we'll do I'm trying to think of I how I want to do this we have the light source coming from this way what we'll do is let me put this day I'll

think of how I may end up changing this we'll see but um I'm gonna take this we're going to get our layers out where those are there we go I'm gonna put this to the very bottom and we'll make a very

just kind of light shadow so I'm gonna choose grayscale what's that look like mmm not bad so I'm gonna I'm gonna try I'm gonna hide that and see if I would rather put

just like a soft or not a soft but a solid shadows being cast from this okay so I hit escape come down here there we go and then also this so should be something like this is e this would be

easy to mess up by the way we'll just put and we'll try that we'll see which one I like better just different approaches this would have to come out more alright do I like that do it like

that let's hide those and bring this back or this yeah kind of like this actually alright so we're gonna say that's the illustration we're gonna use for the

basis of the 404 page something that's unique I kind of almost want to change this a little bit make it look roughed up more do I do I do I do I want to do that I could just cut my losses and say

yeah we will yeah let's let's do that real quick I'm just gonna take a rectangle and we're start up here I select everything here and then pulse device wait do I want to

do that no I don't what I'll do instead is use a pen tool to kind of just cut off this section right here now I'm going to take this and put it to the bottom and then we

little hit divide I'm gonna get rid of the back but now we can easily just select if I right-click and ungroup select the top and move it off and maybe we'll make it go that way yeah something

like that maybe and then we'll connect up these wooden pieces this one will be darker all right so we'll go right there this one will be slightly slightly darker here but not quite as dark so if

I come up here yeah yeah something like that that'll that'll be fine and then let's see here we'll take another one let's see how do I want to approach this something like

this and I think that'll yeah you know what makes sense to go all the way and maybe we'll do this just dive one more time maybe right here

move this to the bottom select all this and then we'll divide it and then we'll ungroup and then shift this over just slightly that looked good let's see alright so then we'll just fill this up

alright so before we go in exports or import this into XD for our our file we're gonna make sure that certain things are you know they're there where they need to be in terms of their shapes

and their outlines being on the same path using the unite tool because there's some you'll be able to see strange artifacts in XD if these aren't united so all the faces this will be

this is the same color so we'll just unite that and i'm going to go through this real quick just on my own just to unite these certain areas that all look like they should be on the same face

all right that's good so if I look at the outlines this is what I have here all right cool so now I'm going to save this as it's just an SVG file we'll go ahead and

import it into XD all right so now let's say you know we'll think about how I want to position this in a second so this is going to be the main graphic that we're going to use here to

illustrate this 404 for this email service I'm going to put some text here I'm going to just going to put 404 let's increase this we'll make this bold all right and let's see here we'll say

something unique let's see or not I'm not sure if I can come up with something really clever here on the spot let's see bring down the size well have some type of secondary message here

we'll say mmm let me think there's some kids took a bat to the page you were looking for I showed oh let me see here let's let me get up my layers here now the way I created that text area it

wasn't an actual a text area let me just copy that and delete that there and now I can adjust the size oh that's right I'm gonna get rid of the page breaks here we'll put this life psych Center it

up over here with a lot of white space on the side and then we'll take this and move this over just trying to align it yeah something like that's fine period here do I like that I mean yeah

it's very simple I think it's a little bit you know it's it's it's slightly comedic and entertaining um is there anything else I want to do to it probably not I think what in there and I

think we you get the gist of essentially what I was going for here there we go so here is the final 404 page that I came up with obviously something very simple obviously it's meant to serve more is

kind of like an illustration tutorial i but yeah hopefully you found some value in that I again I've been working real hard on this rxjs course I don't want to let too many days go by without

uploading something here on YouTube so hopefully some of you were able to find value from that all right see you guys real soon

While I’m deep in development of an RxJS course, I took a small break this morning to cover the process of designing a clever 404 page. I put myself on the spot and use a random website generator from which I take on the task of designing a relevant 404 page.

Enjoy!

https://coursetro.com

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

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!