Section: Designing a Header

Let’s add our header image. Now, this is important. Macaw arranges the elements that you create sequentially in the code it outputs. So, when you’re designing in Macaw, it’s best to start from the top of the page and work to the bottom. If you hop around too much, you’ll get a page that looks fine at first glance, but turns into a mess as you resize it.

Select the Element Tool (R)— click at the top left of the page and drag it to the right. Chances are that it’s not lined up perfectly with the 1200px width of the page. You can change the width value to fix that, located in the top bar. Change the X value to 0%, the Y value to 0px, the width to 100%, and the height to 550px.

Now, let’s add a background image. Take a look at the Background section in the Inspector tab. Click on the + to add a background, and when given the option of gradient or image, select Image.

Since we’ve already imported our images, select “Choose from Library”, and pick the file “DeathtoStock-NateEmbry.jpg”.

You’ll probably see a close up blurry view of the image — under the Size option, select Cover. The cover function sets the image to match the width of the page and cut off the excess of the photo. Click OK and you have a background!

Let’s add a logo. Click on the Library tab, select “logo.png”, and drag it onto the canvas.

Open up the Inspector tab. We want our website to look nice on Retina displays, so click the @2x button located under the Image title. This will cut the size of the logo in half, which is the perfect size for our design.

Drag the image over to the edge of the left edge of the 1st grid column, and arrange it so it’s 40px from the top of the page. You can change these values in the top toolbar as well — X will be 10%, and Y will be 40px.

Next, add your call to action. Click on the Text Tool (T) and click and drag to create a text box. The tagline for Accessory Box is “New accessories every month tailored to your style”, so let’s go ahead and type that in.

Let’s edit the typography in the Inspector, adjusting each entry in order. For the typeface, we’ll select Oswald, with a weight of 400. Text will be 36px tall, with 1.4 em line height. For the text color, we’ll enter #FFFFFF (white). And, we want all of our characters to be uppercase, so we’ll toggle on the All Uppercase button.

Next, we’ll increase the character spacing to 3px. We won’t worry about the next 3 entries, but we will switch the paragraph alignment to Center. We’re also going to add padding in this text box. Change every padding entry from 0 to 20px.

Add a border around the text box by using the border selection. The top input box determines the border thickness — input 3 to create a 3px thick border. The bottom input box determines the radius of a rounded edge — input 8 to create some nice 8px rounded corners. Last, click on the color box next to the border thickness to change the border color — we’ll make it white (#FFFFFF) again.

If there’s too much space between the bottom of the text and the bottom of the text box, just drag the bottom edge up to the top — Macaw will automatically adjust it to the lowest possible height.

This looks good, but there’s a lot of conflict between the text and the background. Let’s give the text more emphasis by giving the text box a partially transparent background. Select the background color button. You’ll see a color picker that allows you to pick both color and opacity. Let’s select a dark grey, and set it at 40% opacity, with the final value being rgba(40, 40, 40, 0.4).

Let’s add an input box. Click on the Input Tool and draw a box. Adjust the values so the input box is 45 px tall and 25% wide.

Add a button by clicking on the Button Tool (B) and drawing a button that’s also 45px tall.

Click on the input. In the Inspector window, we’ve got a variety of options. We’ll name the input “signup”. From the drop down menu below the name, select email as the type of input.

For typography, we’ll use the following values:

Open Sans 400

16px 1.4 em

#333333

Add 10 pixels of padding on the top and bottom, 15 pixels of padding on the left and right. The background color will be rgba(204, 204, 204, 0.9) —the 0.9 value determines transparency, so our box is partially transparent.

Macaw makes it super easy to add placeholder text to input boxes. Just click on the Text tool or press T, click on the input area, and start typing. I’ll add “name@email.com” to the input field, so users know they’re supposed to input an email address.

We can do the same thing for the button. Click on the text tool, then the button, and type in “Submit”.

Now, let’s edit the button.

For typography, we’ll use the following values:

Open Sans 700

16px 1.4 em

#FFFFFF

Toggle the “All Caps” button

Skip the padding and head into the background. We’ll change the button color to rgb(15, 125, 187) and leave the rest of the values as they are.

So that button’s looking good. We’re about to move on to our next section, but there are two things left to do: tell people why they’re giving us their email address, and throwing this entire thing in a container.

First, let’s make a quick text box above the email input that tells users a bit more about what they’re signing up for. Nothing too crazy here — we’ll center it on the page and the text will hold the following values.

Open Sans 400

16px 1.4em

#FFFFFF

Centered