XD Daily Creative Challenge - VPN Application

[Music]

[Music]

well hello everybody and welcome back to

the adobe xd daily creative challenge

i'm your host jesse showalter and we are

here for day three challenge number two

we got people jumping in the chat right

now make sure that if you're watching

this over on youtube you come on over to

behance because that's where the party

is folks follow the link there that's

posted and join us in the chat we got

sam peterson moderating everybody else

is slowly but sure we're dripping into

the chat today and we are doing some

exciting things on this fine is it

wednesday already it sure is hey quick

side note it's my birthday today is my

birthday and i get to do a stream with

you guys so i'm really excited about

that um we are gonna jump over to my

screen so you can see what we are doing

because abhishek kumar is here in the

chat let me know where you're coming

from and what your favorite type of

wednesday morning drink is let me know

is it coffee is it tea is it matcha is

it lacroix is it lacroix is it water i

don't know massage in the chat annie

young is in the chat and they are here

for the creative challenge that is

building your xd and ui ux design skills

in nine challenges all you gotta do is

come over to behance.net slash challenge

xd hit that big blue button receive

those challenges each day jump into the

discord where you can post your work

watch the daily show and then share your

work there today we are building a

little vpn application that's a virtual

private network we're going to be

building that vpn so make sure you get

your starting file there and again we

have our discord over here we're going

to be checking in on our discord server

and reviewing some of your amazing work

when we're done with today's

challenge all right so with that being

said let's jump over to our challenge

our starting file which you'll have

access to head over to the little

challenge tab get your starting file

roomie says happy birthday to me their

birthday was on monday amazing august

babies in the house hope the vpn can get

us streaming adobe live from mars yeah

we hope that as well all right well

thank you for the birthday wishes let's

zoom in and see what our project is

challenge number two design a prototype

a mobile vpn experience where users can

select their country that they want to

activate using the vpn got that

inspiration and those resources and our

starting resources that you have

are an art board has a little bit of

text on here and an icon yours may or

may not have those that's all right but

you definitely have this big map and a

bunch of flags to use today that's what

we're going to be working with

today i'm using montserrat which if you

are trying to figure out some good fonts

head over to fonts.adobe.com

i found this great little pack that's

just the design foundations pack i have

all of them actively installed because i

have adobe creative suite

the creative cloud application on my

computer and so i have all of these with

their multiple weights a fun place to

browse for typography alright so what we

want to do is a really simple

application

where users can turn the vp on vpn on

and then they can switch countries of

origin where they'd like that vpn that

private network to route their internet

connection through okay got that little

power icon but we have this really fun

kind of dot grid kind of map thing

that's happening

and so let's play with that really quick

let's get a fun visual here the first

thing i'm going to do is just zoom in

and i'm going to hit r for rectangle i'm

going to drag out a little rectangle

which is going to end up being my frame

all right i'm going to frame this thing

out and mask this thing out let's make

it gray so you can see it real quick

remove the border beautiful that's what

we need and then we're going to drag it

over onto our our map

uh image here i'm gonna grab both of

them i'm gonna say mask with shape okay

so i'm just masking the shape there but

then what i wanna do is something a

little bit tricky i wanna come inside to

my world map and turn on 3d and why

don't we give some fun kind of

perspective to our map and then move

that around so it's not such a flat

object but no no no

there's some fun three dimensionality to

it but then the whole thing is still

masked and framed inside of our shape

we're going to move that up love that

pop that right into place i'm going to

use command or alt left bracket to make

sure we move it all the way to the back

right so it's in the back and then i'm

just going to bring the opacity of that

thing down

and now once we're here you can always

double click into your map okay and you

can select the map itself

maybe we don't want it to cut off maybe

we just want a little bit of africa

that continent in there or maybe we

liked it how it was i don't want south

america dripping down so far so i'm

going to do something like this and i'm

going to grab my mask shape and just

bring the mask down so the whole thing

can kind of be seen right tracking with

what i'm doing there so far so good i'm

just going to bring that up a little bit

actually i think that works well for us

and we don't need the whole thing

perfect

now we have this really fun kind of like

3d kind of like mask shape behind it i

almost just feel like i want a little

bit more

um just a little bit more direction

there yeah something like that that

looks way cooler okay um all right uh

with that being said this is just gonna

be let's make this the main screen where

users can turn on the vpn we got this

big power button let's play with it i'm

going to zoom in where did i get this

power button icon i actually use an app

called icon jar it houses all of my

icons i can keep them

go back to them search for them so

that's where i pulled that one we're

probably also gonna need some sort of uh

like map pin

uh how about uh

directions

what do we get for

directions how about a pin

yeah almost there like kind of like this

map pin something like one of those

um let's look at oh location that's what

we probably want to search for beautiful

what i like about icon jar is i can just

grab

and then it removes the application out

of my way and i can just drop it onto my

onto my design file so we're probably

going to need one of these as well so

wherever you get your icons get you some

icons

there's some great plugins actually

let's show a few plugins

we actually do have the icons for design

plug-in which is a pretty decent one if

you're looking for some designs or

excuse me some iconography but there's

also the streamline icon pack that has

its own plug-in inside of adobe xd

highly recommend that one as well now

when we're scaling icons

keep this in mind that as you scale it

the size changes but because this is an

outlined icon we actually need to change

the size of the outline itself as well

right so what do we have we had eight

pixels there uh or the stroke width of

eight

bring that down we probably want to do

something similar but as it's smaller

it's got to be a little bit less right

so that things look similar okay now you

don't have to worry about that if

they're filled icons but i can nerd out

about icons all day don't worry about me

let's do this

let's just shrink this guy down a little

bit again we're going to take the

size of it down so it's not so

overpowering let's hit

uh o or excuse me e for ellipse popping

the lips in there i'm just gonna center

this thing

take the border off and let's pick a fun

color not this purple let's do something

a little bit more

kind of techy

kind of inspired how about kind of a

almost like yeah we want a nice seafoam

bluish kind of green deal going on there

that'd be kind of fun and we'll put our

icon in the middle let's make it white

so it looks a little bit friendlier i

like that

and this is just going to be a nice big

power button that you can turn on now

what would be cool though is that's a

little bit bright actually in my opinion

so we might

just chill this out a little bit more to

the blue side and then

yeah i kind of like it a little bit more

on the blue turquoisey side anchor it

with a little bit of depth there okay

it's friendly it's fun it works all

right with that being said if you have

any questions feel free to ask those in

the chat i'd love to answer questions

while i'm designing i'm going to take my

circle

and my ellipse i'm gonna just copy paste

and do a new version of it let's pump

this up and this time this time let's do

a radial gradient for this bad boy

um and let's go

we want the same color so let's grab our

color let's actually put it in our

swatches and let's rip these

ones out of our swatches okay

that's good now we can come back to our

radial gradient we can play around with

it and say hey let's make sure both

sides are using

the same color but let's bring the

opacity down on one of them on the

internals

of that guy that'll be good

um okay and then let's bring the opacity

of the whole thing down bring it up here

and then just make sure we drop it

behind i'm gonna press command or alt y

to bring my uh my uh layers panel back

up instead of my plugins okay now that

we have that we can just kind of

duplicate these because what we want is

kind of a pulsing

thing that moves out from the center

you're tracking with what i'm going for

here i kind of just want a little bit of

that pulsing and maybe we'll do

and as you pulse out pulsate out i feel

like it should probably get

less

visual or a little more opaque excuse me

so let's do another one i'm just going

to

duplicate copy paste behind like that

and stretch this one out one more and

this one should be barely visible like

two percent let's zoom in so you can

kind of see it i kind of dig it i'm into

it it could be a little bit better but

we'll work on it we'll get there right

all right hello to tomas and john chris

olsen in the house the adongo is

everybody's here the whole crew is here

today let's grab this whole thing and

let's actually take our

our map

we're gonna move this to the very back

and then let's just lock it so we don't

mess with it anymore and let's take this

whole thing here and group that together

and just call this our power button in

our layers see how we're kind of

organizing things a little bit beautiful

okay

with that being said we got our power

button we got uh let's let's make this

the same

kind of green color like let's show that

we are connected and then uh maybe we

can have

uh our map just unlock it really quick

let's bring it down to like more like

four or three percent so it's not

interrupting us we want good contrast

and clarity between

a little bit decoration a little bit of

spice but we also want good clarity okay

let's do something a little bit smaller

so let's drop this down to 20.

let's pick a nice neutral cut or we

could go black actually let's go an off

black color and we'll drop down from

semi bold medium to regular where we

connect it to let's be connected to

spain okay

drop that underneath maybe down to 18 so

there's some good contrast there good i

like that i'm just going to group these

together and turn on stack it's going to

automatically give me a vertical stack

and i can control the spacing of my

stack right there but what's great is

if i want to switch these up i could

right i like them how they are but i

always like to drop things into stacks

you know just as i go because that seems

to be

just good planning for the future in my

opinion all right i'm going to do

another e for ellipse let's draw a

little avatar up here i'm just going to

choose a color so you can see it for now

but i'm going to fill this probably with

a plug-in that i love called ui faces so

again we're uh we can

any of these sources is fine for us

we're not going to be picky let's select

a photo it's going to give me some

options here here's a here's a friendly

looking fella let's pick him and just

apply it in there

we got ourselves an avatar love that

okay so that's probably how you get to

your account

this is folks plugins smarter not harder

that's the way to go all right um let's

go over

well what should we do what should we do

what should we do maybe like an icon

here yeah we can do an icon um we'll

figure it out maybe yeah let's do a

little

i'll tell you what let's switch these up

let's put mr avatar over here

with

a white border

that's just kind of extendable for later

use if we ever had to switch something

in the background love that and then

let's go back to icon jar and look for

menu yeah let's take this fellow right

here a little outlined menu yikes that

is massive we're gonna bring it down

it's gonna look the chunkiest ever but

that's okay we're gonna

we're gonna change the

the size of all the elements here a

little bit let's go back to our

elements here

[Music]

wow i don't know what happened there

let's just get rid of that you know what

i have a better idea

when life gives you lemons make your own

icons that's

that's what i always say all right let's

do something a little bit funner anyways

all right i'm gonna grab this just drag

it out just build my icon um

i liked my off black we want to keep

that so let's just keep reusing

similar

colors throughout so we're keeping

consistent that's a little bit thick for

me

and why don't we round those corners

okay we're gonna round the corners to it

and

let's zoom in as we're building our

custom little icon here

maybe something like that

and we got i love that smart kind of

stacking that's happening there let's do

something like that yes literally at

this point ever we've seen every single

kind of hamburger menu you just gotta

make something crazy and have some fun

with it i do kind of like how

accidentally it kind of looks like a

little bit like it matches the dot grid

kind of pattern of everything in the

back so i like that all right cool we

did that let's do one big tappable area

so really all we want here is to know

that we're connected it's on and then we

want to be able to turn this puppy on

to a different location if we need to so

let's set r for rectangle

kind of lining up to the edges of my

icon there we're not really using

uh you know proper spacing of things we

could we should if we had more time

but i am at least going to line things

up a little bit with other elements on

my canvas here so

let's take this whole thing and bring it

down

and zoom in and we have that i knew we

were going to use a

little location pin icon so let's bring

that down just kind of tuck the size of

this thing down really big

let's make it white i think white on the

screen really pops

and i'm just going to use my alignment

tools beautiful um and let's do this

let's bring this down

these should both be

white should they not

they should um and they're a little bit

big for this right so um just a little

bit big so let's bring this down

probably to 22 and we can bring this

down to the minimum that i would ever go

for mobile interfaces which is 16 pixels

that that keeps it real usable okay so

we're connected into spain we know that

but how about

uh

other

networks how about that

net

works

can't spell networks at all okay and

like maybe like current space oh how

many networks have are available how

about like 21

available

networks beautiful love that

okay we're just keeping it simple

keeping it cool we're gonna group the

whole thing together

and

let's just let i mean we're going real

minimal here i'm just gonna move this

down maybe move this up we're playing

with a little bit of spacing now and i

like it generally speaking i think it's

pretty simple and easy and i kind of dig

it so um it doesn't look like much but

our next screen is going to be where

some of the magic happens we're going to

do some basic transitioning over and

then if we have time we'll pulsate this

little button all right how does that

sound pretty cool okay so if we click

other networks we should be shot over to

a place where you can select uh

different options okay so we'll probably

at this point we'll move this

actually we'll keep that boom love that

we'll turn this into

if we can like a back arrow button right

instead of searching for one and failing

to find one let's just build our own

really quickly shall we

beautiful

beautiful

and i'm just going to hold down shift

and get some nice 45 degree angles as i

kind of kick that out copy and paste and

boom

i use repeat grid instead of flippy

uh flip that thing around all right now

let's just okay yep yep yep

yeah something like that

i'm struggling building my

my icons right now but i don't think you

guys will judge me too much let's just

shrink it down make it a little bit

smaller that is the ugliest arrow i've

ever built my life but in a rush it'll

work for us let's go like this let's go

select

server

or network that was the terminology

we're using right

net

work now if we do some auto animation

later on i'm kind of thinking right now

it might be cool

to let's just bring this down in size a

little bit and choose more of our black

color there we go

uh okay cool i'm gonna take that out

of

the grouping there or the

um stack we don't need it to be in the

stack

but we wouldn't mind

matching things up between our icon

good and this is really big so let's

just take this down to a usable size

here something like this

and we're going to right align our text

just like so

and move it to be about it was 28 from

the side okay cool so we're going to

select our network now it would be cool

if when you clicked on one i'm thinking

right that we do some auto animation in

between that could be fun again right so

we have our this background map and what

if we

like moved over

to a new

area right showing kind of showcasing

the transitioning of networks that

you're kind of using i like that

this thing will probably go away and so

will this thing although

let's just uh maybe we have a search

maybe we have a search of some kind here

okay so let's do a little search

we'll get rid of

this guy this big

piece of text while this is why we

always want to lock the layers that

we're not using so we don't select

things like that okay let's get rid of

this piece of text

and our smaller text we're going to move

it up out of our

stack again and let's just put search

networks

like this

and i tell you the

search bar should never be highlighted

in green so let's pick a nice

kind of neutralized gray oh probably

hello hello can we find the gray that's

getting kind of used in there and save

that as a swatch color we sure can um

and then

we're not going to use that icon but

let's an off gray like this right we

want to keep some contrast

and we're going to get rid of this icon

because we can't use that let's just do

a really quick

we're going to search for a search see

that all right

bring it in it's again massive

now

one thing you know as we shrink these

you have to mess with the size and

everything you could use a fun plug-in

that we have called

transform session

uh let's start a transformation session

and

watch out that's not the right one is it

uh yeah that should be the right one

apply transform okay i don't know it's

messing up for some reason so let's stay

away from that plug-in right now i don't

vouch for all plug-ins but i do try to

use them if i can we'll just thin it out

it can be really

really easy process again we could have

made this icon ourselves if we really

really needed to okay let's pick a nice

off gray what is that kind of off gray

color we're using let's apply the same

thing

for our search icon

all right grab our icon zoom in so we

can actually select these things

and

center it like so all right so we got a

little search bar here no problem no

biggie but now we're gonna do the rows

and this is the majority of the rest of

the interface hopefully we can get this

done in time i'm gonna hit r for

rectangle draw it a little rectangle

here

and i like it let's fill it with our

light gray

let's round the borders a little bit

something like that and then let's zoom

in and let's do another one inside

and what we'll do is we'll just fill it

right if we had if well you know the

easiest if we had these in our assets we

could just drag them in but what we'll

do is

we'll drag in our country of origin

something like that

and we won't take the time to fill in

the rest of them but what we will do is

just

reuse a little bit of

typography here just go this one's usa

love it okay

and move that right there and then maybe

we probably need like a selection so

we're gonna hit e for ellipse

a little bit of a selection guy let's

say we're active on this

love it we're making like a radio a

radio selection right so let's just drag

this down

fill it with green all right so we've

selected that one

love that

easy easiest radio select box you've

ever made in your life gonna just center

and align all of these things

okay and then let's just put a line at

the bottom of it

and we'll make it again our light gray

okay that's a lot of distance and room

for this line we don't need that now a

little trick that you can do is first

let me just group these together is you

can draw a rectangle i do this all the

time it's i kind of use it as a spacer

okay

i'll move it to the back so you can kind

of see everything and then

i'll just decide whether like where i

want it to line up with all my elements

i'll center align everything

like so

and with that selected i'll move my line

up and then i will literally just

remove all of the uh

like the fill from this so let's just

make it opaque and now we grab all of

our elements background everything here

boom group it together command or

control r for repeat grid and we just

drag down a bunch of selections all

right now from there we could go in and

fill in all of those elements and we

don't have enough time but what you

could do is

create components out of these and on

and off switch toggling on and off which

ones

fill in all the different countries and

then pulsate that button but i don't

want to miss the opportunity to check

out a little bit of your work today so

i'm going to head over to the discord

server and we're going to take a look at

a few projects this one is by davis and

it says awesome done let's check it out

this is our nft website or login it

looks really good i wish i could see a

little bit of

a little bit of prototyping of some kind

but i mean i actually love this

direction visually color pop super fun

only thing i would say is watch out for

your login buttons it's hard to tell

over here what's primary what's

secondary that kind of thing but this

style over here is really really fun

very art gallery-esque really really

cool this submission is by elemento p i

love that name hello let's go this is

the uh

login i love this background image it's

really really fun make sure when we're

using fun background images like this we

think about readability and contrast

like maybe our

login area here is a little tough to see

it's tough to see these labels you

always want to have helper text and

labels in my opinion but you want to be

able to read all this stuff really

really good if you can oh here's some

people using our medusa sculpture this

is uh kdnell oh i hope i'm saying that

right

kind of a fun kind of planet love the

colors behind it really really clean

really fun i like that you did vertical

text we should definitely definitely be

playing with more vertical text um in

the work oh here's a little bit of a

video prototype

yes cool

fun you kind of flip-flopped it put it

on the other side got a little bit of

that motion that's kind of fun now

what's really cool is i ran out of time

yesterday but what you can do is move

from one board to another and have this

thing really move around fly around into

different positions so it doesn't look

like such a loop you know like that's i

mean mine ended up looking like a loop i

like this i like the medusa sculpture

kind of looking like it's on a card

right because a lot of times nfts are

represented by a piece of work on a card

so i think that's a great way to do that

as well you also we could have gotten

really really complex and made our nft

artwork oh that's kind of fun i like

those

oh come on i like it i like it a lot

that's a fun little animation really

colorful and neat i challenge you if you

want to keep going on your nft site to

uh to actually separate and export all

those different pieces out from

photoshop and then 3d transform and

animate them all in different kind of

movements so it's not one piece moving

but multiple pieces moving ah that could

be a fun challenge hey everybody thanks

for joining us today on the xd daily

creative challenge can't wait to see

your vpn project submissions submit them

on behance and also on discord so we can

take a look and stick around be in

discord because there is amazing mentors

there and stick around for amazing

content here

on behance adobe live we'll see you

tomorrow for the xd daily creative

challenge take care

you