Articles, Blog

Hidden Treasures Bauhaus – Homepage Tutorial | Adobe Creative Cloud

September 3, 2019


Hey there. My name’s Daniel White.
Some of you may know me as Dansky. And in this video,
we’re going to learn how to design a Bauhaus inspired
homepage, all in Adobe XD. And if you’d like to download
any of the free fonts that have been brought back to life
from the Bauhaus Dessau Foundation there is a link in the video description
but anyway let’s jump into it. Righty-o so we’re now in Adobe XD
and the first thing to do is go up to File. Or from the welcome screen
just select a new artboard. I’m working on a Web 1920 x 1080 upload,
so you can click this preset here, or you can enter a Custom Size
and I’ve already created mine. I’m going to double click on the text
up here and give this artboard a name. So we’ll call this Homepage. Next I’m going to do
is grab the Type tool and just start laying out
everything on the page. So I’m going to type some text. We’re going to create
some text links at the top. So we use the Repeat Grid tool and
I can then just drag out and repeat. There’s four links or so
and if I hover over these space in between each of these text objects
you can see it turns pink. Just click and drag to the left
or right or up and down. Depending on how you’re creating your grid
and it will adjust the spacing in between. So we’ll go first something like this. Then we’ll move these to the top and next I’ll grab the Type tool again
and we’ll type some text. “design is the intermediary between
information and understanding. Supercool quote there. And we’ll just center align this and we’ll set the size to I think 24
and press return. Now I could manually drag this
into the middle of the artboard and you can see those smart guides
really nicely snap that in place. You can also use the alignment options
from the Property Inspector. So I can just click this here and it instantly snaps
that to the center. So incredibly helpful. Now rather than creating this text again
I can just go to Edit, Duplicate or Edit, Copy and Paste, just drag that up and we’ll type a title. So we’ll go with “redefining design”,
very cool. We can just scale this up and
I’m just doing this at the moment with the default font
which on Mac is Helvetica. What I’ll do now is
I’ve got the Repeat Grid group here so I can double click to go inside
and select this object, here go to Edit, Copy. Just click anywhere to come out
of that Repeat Grid group and go to Edit and Paste. I can now drag this down. I’m going to use this as the text
for the call to action. I’m going to again centrally align this text
and just snap that to the center. In fact you can drag over everything here
and just snap that again. Just to double-check
that it is perfectly in the middle and it seems to be.
So that’s fantastic. Okay, so something else
I’m going to add is the logo. So if I switch over to Illustrator
I’ve got the original logo here and I’ve also got this version
that I’ve taken out the box. So I’m going to be using
this one in this video. So let’s just select this,
go to Edit and Copy, switch back into XD,
Edit and Paste. So super easy to just copy and paste
between Illustrator and XD. Love it. We’re going to scale it down,
holding shift of course. If we don’t hold shift
it will skew out of proportion. So let’s keep shift held and we’ll drag this up. Now I think what I’m going to do is
I’m actually going to have the logo in the center rather than
on the left or the right but I’ve got the repeat grid group here. So I’ve used this Repeat Grid tool
to create this group. Now I’m actually going to break it apart. So what I can do is go to
Object and Ungroup Grid. Now the great thing about this is of course
it’s no longer a repeat grid group. So you lose that flexibility but
it still keeps all of these objects. So sometimes you can use
the Repeat Grid Group tool to create the repeat grid group, lay
everything out and then I’m group here. Then you can edit things
on a deeper level. I’m just gonna scale this down.
We’ve got the b for Bauhaus. Let’s make sure that lines up against these
links and we’ll just manually the spacing. Yeah! It looks pretty good. Maybe nudge this a few pixels here and there. You can of course use the mouse
or the arrow keys on your keyboard to move text around. So that’s good. We’ve got a navbar. Of course,
we do need to change the text. So let’s say, let’s add a bit more text
and create some more believable links. We’ll have about, a product page,
reviews and contacts or contact. There we go. And of course I will need to go
and manually adjust the spacing now. But that’s fine. That’s the price we have to pay for a
centrally aligned custom navbar design. No-mind is definitely worth it. Okay, so spacing looks good. What I’m going to do is drag over
everything because this is the navbar. It’s pretty much done now, so I’m going
to go to Object, down to Group and then if this was a bit off-center
I can again just use those alignment tools in the Property Inspector
to align that centrally. Boom! It instantly snaps
it to the middle. Right, next I’m going to grab
the Rectangle tool and we’ll draw our box. For now I’m just going to
give this a fill color of a gray. At the moment it’s on top of the text,
so I’m just going to go to Object, down to Arrange and Send to Back and then
I can click on the discover text and just change the fill color
of that to white. We’ll position this very roughly and
again we’ll use that center aline trick. It already seems to be in the center,
which is fantastic. It’s very good to work
without any color. Just use different shades of grey,
to represent hierarchy. When laying up or wireframe in your design
because it keeps the focus on making sure the core structure of the page is great,
it works, the flow works and then we can work on adding the design
and making it look amazing afterwards. Something else I’m gonna do is I’m gonna
have a background image in here as well. If I switch over you can see the image
that I’m going to be using a heavy funky looking chair. I’m going to add this
as the background image. I’m gonna have kind of like a V here –
it’s sort of pointing downwards rather than just a
straight horizontal cut. So it’s going to be a bit
more visually interesting. For this I’m going to use the Pen tool
and I’m going to create a custom shape. I’m going to click in the top
left corner of the artboard. Now it does snap. You can see
with that blue line, it snaps there. But I could hold down shift
if I want to just doubly make sure that it’s definitely straight. And it’s left click again so the Pen tool allows us
to create custom shapes. I’m just gonna bring this down
so it’s gonna be on an angle and bring this over here
and then as I come up you can see it helps me line that up
with the anchor point on the left. Then we’re gonna
complete that shape. At the moment we have a border.
Let’s just deselect that, give that a fill. Then we’ll go for a really really light gray and
just select this and go to Object, Arrange and Send to Back.
Okay. So fantastic! This is where our image is going to go. And I’m just going to double click
to go inside the nav bar because remember that’s a grouped object so it’s a lot easier than ungrouping and
regrouping just to double click, go inside it and we can then go Edit, Copy one of
these links and then go to Edit and Paste and this is going to be where we’re
going to add an Instagram handle here. We’ll just go with Bauhaus,
all one word, bauhaus inspired and I happen to have the
Instagram logo here ready to go. But of course any logos and icons
for social media platforms. You can find those in a vector format
whether it’s EPS or SVG all online. We’ll scale this down and I’m just going
to quickly Eyedropper tool the same gray here. And we’ll scale this down
nice and small. Line it up and then just hold shift
and select both of these objects. Go to Object, Group and then
again you guessed it, we’re going to snap that into the center. Then just manually make sure that it’s
vertically central within this space here. Okay! Fantastic! So I think we can see our page
coming together really nicely. What I’m going to do next is
start add some of the creative. Now we’re going to work
on the fonts a bit more, introduce some color
and a background image. If I go up to File, down to Import and go into the Images folder
I’ve got a photo. We’ve got a super funky yellow chair. At the moment this is on top of everything. I’m going to go to Object, Arrange
and send that to the back. Now this custom shape that we created
with the Pen tool is of course now on top. But the reason that we created this shape
is we’re going to use this as a mask. At the moment we have this custom
shape on top so let’s select that. If we hold shift and select
the image that’s below. What we can do now is go to Object
and select Mask with Shape. Or if you’re on a PC just right-click
and the option should be here. We’ll go with Mask with Shape and you
can see it crops the background image to that custom shape and we
can move this around now. We can double click to go
inside that object and we can then go and adjust
the crop if we want. When you’ve done that
if you want to come out just click anywhere around the outside
and you’ll jump back out. Now we’ve got the image in. I could double click, go inside,
bring this down a little bit, maybe move this around, click to come out and then I can
start to reposition the title text, the subtext and the link as well. Now in terms of colors
I’ve got this same yellow here that I’ve been using
for a lot of things. I’m going to select the call-to-action box
and use that Eyedropper tool to sample this color here. In fact if I go to the Assets panel
I can actually add this as a color and then if I did want to go
and change this. At any point you can see it updates
every instance of that, but of course that would go against the brand
identity that we’ve created. But that’s incredibly useful if
that’s something you’d like to do. However with the Asset panel still open
something we can do that is equally is incredibly useful is we can select
the text we’ve already created and very quickly and easily change it. If I just ungroup our social handle here and I can select the text, hold shift and select the text here, select a title text here and select the call to action text. All four of those pieces
of text are selected. We can go to Character Styles
and click the plus icon. It adds these in as four separate styles
and we can edit these from here. and it will update every instance of
that character style in the document. So what we can do now,
is if I select this one down here you can see that is 20 points in size. So that would be this one. We can right click and go to Edit. Because the text links at the top in our
navigation are exactly the same font we could go and change this. So we’re going to change this
to something like Reross. I think we’ll go with Rectangular,
keep everything lowercase. But you can see it updates both,
those text elements at the top and at the bottom. Now I can do is go and give this a color. I think we’ll go with 6 6 6 6 6 6
and press return. That’s a really quick way to lay out
your wireframe or your structure. Just using the default font and
then you can select those fonts, add them to the Character Styles panel
in the Asset panel. What you can do is just go and change this
font by right-clicking and going to Edit. For example for the main title I could go
and edit this from the Character Styles panel. We could change this one here. I think we’ll go let’s start with Reross
and see where we go. We’ve got Reross.
We’ve got Quadratic there. And again we can change
that color to 666 666 but of course we can actually add
that color to our Colors panel here and exactly as we did with the other color
we can then change that as well. If you have a large document
whether an app or a website with lots of different screens
and lots of content this is an incredibly awesome way
to save a ton of time. So it’s definitely worth
utilizing the Asset panel. We’ve got some text here and we’re
going to change this one as well because this is the only instance of this text
I can just do it from the Property Inspector. On the right I think we’ll change
this to Rectangular as well and maybe just bring down the tracking. That’s the spacing in between
all of the letters as a whole. So we´ll drop that down
to negative ten and I think we’ll do negative
twenty on the title. Just bring those letters
a little bit closer together. Something else I’m going to do now is because
I’ve got this image in our custom shape. I’m going to grab the Rectangle tool
and just create a new rectangle. Just pick a very vibrant color for now. This is something I like to do
when I’m creating layouts is just pick random vibrant colors and it
makes it a lot easier to lay the page out. Now what I could do is just manually
drag this to the bottom down here so it snaps in place. I can just simply type a width of 1920
which is the width of our artboard and then align this to the bottom
just by clicking that tool there. Those alignment tools really really helpful. We can go to Object,
Arrange, Send to Back and now you can see it’s behind
the image in the custom shape that we created. We don’t really want this
to be this crazy vibrant red. I think I’m gonna go with
something a little bit lighter. I could use the Eyedropper tool and eyedropper to this gray. So we kind of get this it’s pretty
cool sort of shadow effect here. But I think we’ll go with something
just a touch lighter. We can see a social link down here. In fact I can go and change this
to the same color as well. I did that very manually then. What I could do is select
multiple assets or individual assets. Just go right click on the color and apply
that as a fill or boarder respectively. We can group these back together
and then just check. You can see I very slightly nudge
that into the center then. This is something I do, I get in the habit of doing a lot
is just using those alignment options. If I’m not sure just to click something and
make sure it’s definitely in the center. And last of all we’ve got
this link here. We’re going to go with Reross,
Rectangular for this as well and just zoom in nice and close,
make sure we’re centrally aligned. I might just nudge that down a tiny bit. There we go.
I can of course group this together as well. By holding shift selecting both of those
objects, go to Object, Group and just check. Yep we’re still in the center.
Fantastic! Something else I’m gonna do is
the b at the top here could probably just do it a little bit
more contrast from the background. I’m going to close the Asset panel,
grab the Rectangle tool and again create a rectangle.
We’ll drag it over the top half just touching the piece of furniture as well. We don’t need the Border
but we do need to Fill. At the moment this is a solid white fill. If we click this from the drop down menu, we
can change Solid Color to two different gradients. We’ve got Linear Gradient, which goes
from left to right or top to bottom. And Radial Gradient, which goes towards the
center or emanates outwards from the center. We’ll go with Linear because we’re
going to go from top to bottom. If I just select this point at the top here. We can pick a color as you can see. So I’m going to go with White and just make sure the opacity on that
slider is all the way a hundred percent. Then we can click the bottom point here. We can select a color for that as well. I’m also going to pick White but I’m going
to drop the opacity down to zero. So what I’ve done here is
we now have white at the top and this graduates through to
transparency or 0% opacity. Of course it is on top of everything. With that selected let’s go to Object,
Arrange and rather than Send to Back, because that will send it behind everything,
we’re going to use Send Backward. You’ve got the shortcut key here. I’m just going to press the shortcut key until it’s behind all of the text
in the call-to-action. So you can see I went
a little bit too far then. I’m going to use that shortcut key
to bring it forward. Fantastic!
Now I can adjust the height of this. I think I might have it so
it’s just touching the chair. It’s like a high light up here and
it just creates a bit more contrast, particularly for the logo and the links. It also just lightens up the image overall
and I’m going to drop the opacity down. This is how it looked before and you can
see now just brightened it up a little bit. I think we’ll go for about 60%. There we go: Before – and now we’ve just created
a little bit more contrast. I think one last thing I’m going to do is I’m actually going
to select this text here. If I zoom in I’m going
to pick another font. So we go with Xants. Just maybe increase the size a little bit. You can of course grab this point here and
quickly and easily adjust the size as well. Just double-check that is in the center
and then select all of these objects. Adjust that positioning and then maybe
just go up here double click and go inside and just close up some of these gaps. Just so these links are
a little bit closer together. You can see that we started with a rough
wireframe just laying the page out. We’ve now added the creative,
the styling, the fonts. We’ve set everything
up in the Asset panel. It’s really just a case of refining that
until you get your finished design. Something I have just noticed is this chair
doesn’t quite line up with this social link. You can see it’s a little bit off-center,
even though the social link is in the middle. What I’m going to do is zoom in here
on this point, double click. I can now double click on
the original shape as well. This is the mask. I’m gonna pull this to the right
a little bit to this anchor point. I can also click on the image as well, move that to the right a little bit and zoom back out. Even though this is technically in the center
I’m going to offset this ever so slightly. The reason I’m doing this is because
whether this is here or here it is quite difficult by eye to tell
if it’s in the center because there is so much space on the
left and so much space on the right. However something like this. Because we do have this chair
that is central and it meets at this central point, it’s a lot
easier to notice that and see it as a little bit strange
like it doesn’t line up So if I make sure that this lines up,
the chair lines up, the point lines up we’re all good in this space. I think it’s going to be very
difficult with someone to notice that we might be five or ten pixels
out on the left or the right. That’s just a little detail
to sometimes be aware of. But there we go. We’ve designed a Bauhaus inspired
homepage, all in Adobe XD.

3 Comments

  • Reply Felipe VI August 20, 2018 at 10:50 pm

    Good tutorial, bad Bauhaus understanding

  • Reply Leonardus Groenendyk August 21, 2018 at 3:52 am

    Have not used XD yet, so glad I watched this…you make it a piece of cake! Thanks.

  • Reply Wookieenator September 10, 2018 at 9:44 am

    Not to be that guy, but you didn't center the lower point of the mask at all, it was 7 pixels left of the centerpoint, you could have easily typed 960px as the X value 🙁

  • Leave a Reply