- So the other thing that I do that's gonna trigger
a bunch of people here in chat,
is I utilize the worst type face on the planet.
(soft music)
- Hi, everybody, hello.
We're gonna turn on some good streaming vibes in a minute,
but we wanted to hop in it kind of intro Peter,
tell you a little bit about him and then a little bit
about this new format of the show.
So let's start with an intro.
Who are you, mystery man, behind me?
(Peter laughs)
- My name is Peter Deltondo.
I work over at Unfold, check us out, unfold.co.
And I build products.
So I've kind of actually shifted a little bit
out of design, the last couple of years.
I kinda help oversee the department
and do more of the business stuff.
But I love getting to get my hands dirty and excited
to build some fun stuff out that place.
So a lot of our interest today
and kinda see where our imagination might take us.
- So, this is a little bit of a different show.
If you tuned into Adobe Live here before,
it's something that is called, la la, Imagibranding.
Welcome, a nice little like mid century flare on this.
So Imagibranding is just that.
It's where we create products and brands
with our imaginations.
We always have a crazy brief that kind
of takes us somewhere that we can only imagine.
And we get to work on that and create a product.
That's just crazy.
- We're back, all right.
We're here and we're back online.
Ready for--
- We're back, and I'm trying to come back in.
It's getting hot.
One second, I'll be right back.
- Yes, landing Peter, Peter to landing.
Go ahead and land right away, Peter.
And we can get started on our brief.
In the not so distant future humans have colonized Mars,
common foods and conveniences like pizza delivery,
have a new set of challenges with uncertain gravity
and atmosphere changes.
We need to create an app to help reassure the people of Mars
that their pizza will arrive just
as they remember it on Earth.
All right, so that is our challenge for today.
Man, we went all out on this one.
This is our very first episode of Imagibranding.
So if you love it, tell your friends.
Peter, I'm gonna hop over to your screen
and let's get started, let's look at what we're doing,
and kind of jump in.
We'll be working in Adobe XD today, right?
- [Peter] That is correct.
- Yeah. - So I'm just gonna come in,
bring this over here.
And I wanna show something that I do in all of my mock-ups
'cause I feel like this is really important
and people often forget about it.
Is I wanna come in and create and kinda simulate these bars.
If you go into XD and you go to get UI kits,
and then more UI kits, there's the iOS,
or if you're designing for Android or anything.
Go check these out because it's gonna be really cool.
And it's gonna give you the items
that I think a lot of designers often forget about.
So a lot of times you'll see people design things
to the very top of the screen.
And if we look, let me just pull up.
I like the notch and stuff up top, the bar at the bottom.
Those are things that we need to be thinking about
because we don't want our content
butted all the way to the top.
- Yep. - We need to leave space
and room for that home indicator
for somebody to tap there or swipe up and interact.
And so a lot of times people don't include those things.
And then your design like looks really funny
when it gets tossed into a mock-up at some point,
and it looks broken.
- When you're like starting on a screen.
Are you thinking of the entire thing at the same time?
Or are you just like this piece then that piece
and this piece then that piece?
Or are you like, okay.
- A little bit structurally, yeah,
you definitely wanna set some stuff up, and you know,
I'm a big proponent of an eight pixel grid system.
So I wanna kinda establish a little bit
of like vertical rhythm and spacing and whatnot as I go.
So I start to kind of establish a bit of that.
I'm gonna start adding in my colors.
So I'm gonna come in here, I'm just gonna snatch this.
I can then go in over here, and let's do like a color style.
So I'm gonna add that.
We'll call this like Mars Red, those red.
(soft music)
And so we've got that as a style.
And then like we said, we wanna start incorporating
some thing and what might that be?
How do we wanna structure this page?
So typically our wireframe things out,
usually I'm like whiteboard or just pen and paper.
I actually really liked doing it away from the screen,
because otherwise you start just designing it.
And I don't like doing that.
So the other thing that I do that's gonna trigger
a bunch of people here in chat,
is I utilize the worst type face on the planet
to wireframe stuff out.
So-- - I learned this from you.
- Yeah.
I'm gonna come in here and let's make this,
we can use our Mars Red for now.
And then I'm gonna switch to Comic Sans,
because now my brain just cannot process what this is,
and I don't take it seriously from a design standpoint.
And so it allows me to just really focus on the layout
and structure of what to (laughs),
and Levi Jones (indistinct) the chat.
- That is awesome, yes. - I love it.
- I may have-- - I just wanna come
in here now.
- I do the same thing, and I think you taught me this.
Is I make, because I don't work as much with type revisions,
I make all of my notes in hot pink.
Like, and I'll put just a giant block
of hot pink over something, if it's an image or something.
And that's just a reminder for me that I'm like,
I would never use this color in the design.
And so it doesn't make sense here.
And I used to remember that like something needs
to change in this zone.
- Exactly, so it just-- - Wow.
Challenge triggered. - It gives me something that--
I knew it, every time, every time I do this.
So just, it allows me to come in here
and I step away from the design for a second.
So we'll change this out pretty quickly here.
But like we said, we might wanna special out our offer.
And then we can look at things.
And this is also where I like to design really quickly
to test out a lot of ideas and then see what works.
So I know I want this section up here,
but now there's a couple of things that we could do.
So when we look at this from how we would next
wanna display information, we might wanna have
something here that is maybe something like this,
where maybe it's special ads on offer,
offer number one.
And then maybe next is popular items or something like that.
And then the question becomes,
how do we wanna lay out that information?
Is it something like this where we just keep doing things
in this kind of fashion?
Would we wanna come in and take a look at this and go,
all right, what if we double stack?
What if I do like item one, item two,
and I know this stuff's not lined up right,
and it only drives me partially mad, but.
- It's cool how easy it is, though, to just grab our boards
and make an entirely new art board.
And it's like, cool, these are all just my sketches.
Like these are the concepts that are in my head
that like we'll get it out here.
And from this point if we do a few more,
and then you look at it,
you can easily pick your favorite out of those.
Even if it's not the right one,
you can probably pick the best one.
- [Peter] Yeah.
- Doing any kind of dimensional thing,
really takes it out of the digital world,
and feels a little bit more physical.
- Let's spin this a little bit.
And then we just do a little rule across the edge here.
So, maybe we use our 333, and then I'm gonna bring that down
just to kind of cheat it in opacity,
we'll make that kinda light, will be about 16.
Give that a height of one, and then I'm gonna send this
to the back and then we're gonna do another one here.
- Oh, so you're kind of cheating
to almost create a dimension here, right?
- Right, so we could do something like this.
And then there could be like a small little description
in here about the pizza.
Let's see.
Take and bake on any planet.
- Love that.
- And then we'll drop that down here a little bit as well,
just to give a little bit of hierarchy in the text.
We can do something like that for now.
- That's interesting, the thought of using a color
as type hierarchy.
I always think about fonts and weights,
but I don't really think about color,
and it's smart to use like a different gray.
- Yeah, I mean just a little something
to separate it out a bit.
And then we'll pull this, oops,
just gonna pull that up a little bit more.
- And that's a great way to add visual interest to a design.
If you're working, especially on a white screen like this,
trying to cheat dimension makes it look like a material
instead of a screen, right?
That it looks like we've cut into paper cloth
and we've tucked something in there.
And so doing any kind of dimensional thing,
whether it's a shadow, whether it's a cut line like this,
really takes it out of the digital world
and feels a little bit more physical,
which I feel like makes it more
like I want to touch and interact with it.
So let's say that we wanted to do almost like a hover state
on that order menu to where those pizzas
would like pop up and have some kind of animation to that.
That's super easy to do with XD, right?
- It is.
So like for example, we could just literally do a screen
and maybe we come up here and I'm just gonna knock this up.
And it could just be as simple as that,
like I just knocked it up 10 pixels or something.
And then maybe in addition,
like we've got the rule down here.
Maybe I wanna make that Mars Red,
and that comes in the full color.
- Ooh! - And so, we could totally
do something like that.
And like I know we made it a little bit,
like we brought it up, but then I might also
just scale this a little bit.
So it's just gonna kinda grow, come up,
and then it'll scale back down.
- Attack of the pizza.
(soft music)
So we've got our pizza planet.
Hi, I've been chosen to help you.
He's zooms back.
And this feels like you're inside of the chat.
Like this is really cool.
- The app is happening.
We're having a conversation with Steve, sweet little Steve.
And there we go, there it was.
So that's what I was curious about.
Is how it was gonna handle the title and the character.
And it just perfectly scrolled up for us.
- Yeah, because it's gonna recognize
that that thing has moved away.
And so, a trick that you might wanna do.
I think I probably just deleted it,
but something else that you could do as an alternative,
depending if it's something that might come back,
especially like maybe as it scrolls or something,
is that maybe the way we wanna do that last screen
would be something more like this.
And maybe we wanna keep like, you're chatting with Steve.
Like that is always a part of it or whatnot,
but maybe this guy, we want it to move up.
We could shrink it a little bit,
and then I would drop the opacity to zero.
- Oh!
- And then I could do the same thing here.
So let me just see, keep it underneath,
and let's do opacity to zero.
And then I can just take this text over here
and throw it down.
And so now, here we go.
(soft music)
And then up and kind of fade out.
- Yep. That's so cools. - So that's another way
to do it versus it just kinda like disappearing,
and it'll still auto-animate it to an extent.
- This was Imagibranding, episode number one.
Hopefully we'll make a comeback.
It's all about using our imaginations,
breaking the mold a little bit.
Who cares about clients?
Let's go to Mars and build a pizza app, right?
So thanks for tuning in.
We will see you all on the next stream.
Hang out for the rest of the day, you're on Adobe Live.
(soft music)