Using Macaw to Build a Simple Landing Page
or, how I learned to love wysiwyg editors
For the last few weeks, I’ve been working with Macaw, a visual design tool that outputs HTML prototypes. Imagine if you could design an entire landing page in Photoshop — then open it in your browser fully coded. That’s Macaw’s promise, and after a rough beta period, I’m happy to say it delivers.
Macaw is particularly useful for creating responsive web pages. I’m going to give you a rundown of the features of Macaw as I build a landing page for a (ridiculous) fake company named Accessory Box.
See the demo page here.
Getting started with Macaw
Before you start building with Macaw, know this: I recommend you know the basics of HTML and CSS. It’s possible to build a functional, well-designed website with Macaw, but without the basic knowledge of HTML and CSS, it will be much, much more difficult debugging your layout.
Let’s get started. Open up Macaw and create a new file. Save it as “accessoryBox.mcw” in a new folder that you’ll title “Accessory Box”.
When you open a new Macaw file, you’ll see three control areas.
Top navigation bar — This includes traditional file actions (“File”, “Edit”, “Select”, “View”). There’s nothing too crazy going on there, but right below that we’ll see another bar that includes the values of the element we’re editing.
Left toolbar — This is akin to the toolbars you find in other design tools. I’ll cover how to use each tool, but here’s a list of functions, top to bottom, for reference. If you’re familiar with Photoshop or Illustrator, a lot of the keyboard commands are analogous.
1. Select tool (V) — Click to select a group of elements.
2. Direct select tool (A) — Click to select a single element among a group of elements.
3. Text (T) — Click + drag to create a text box, or click to create a line of text.
4. Element (R) — Click + drag to create a rectangle. Used for creating backgrounds of solid colors, gradients, or images.
5. Container (G) — Click + drag to create a container that holds multiple elements, text, or images. This tool is vital for grouping elements that belong together — it lets the groups move together when creating a responsive page.
6. Button (B) — Click + drag to create a button.
7. Input — Click + drag to create an input area. Click + hold on the toolbar to see options for text input, radio buttons, and more.
8. Viewport tool (P) — Click to change the width of the viewport. Changing the width of the viewport creates a new breakpoint. This is an incredibly powerful tool that we’ll cover more later.
9. Hand tool (H) — Click and drag to move around the canvas (without moving any of the elements).
10. Eyedropper tool (I) — Click to copy the style of one element to another.
Right information panel — We’ve got a tabbed menu with the following tabs: Inspector, Outline, and Library.
Inspector gives us the basic information of the element we’re working with. Since we’ve just created a new document, the Inspector shows us the basic set-up of the canvas, including the breakpoint (aka the width of the page you’re creating), the background of the page, and the grid. (It’s not necessary to use a grid when designing with Macaw. However, Macaw is built around using a grid to design responsive web pages — using a grid simply makes life a lot easier.)
Outline shows us the breakdown of the elements on the page and how they’re ordered. Since we have no elements, the outline is currently blank. However, we need to pay attention to our outline as we design — it makes a significant effect on how the page responds in different sizes. We’ll deal with this more as we go.
Library is the index of the elements we’re importing into Macaw. If you’re using an image for a background, or a collection of illustrations, they’re imported here.
Now, we’ve covered a brief overview of the tools, let’s start designing this page!
I’ve included a zip file with the images used to design our Accessory Box landing page. Kudos to the wonderful folks at Death To Stock for the background photography! First we’ll import these images into our Library. Click on the Library tab and select the Import… button.
You’ll see that all of the images are now located under the Project folder in the Library. Any time we need to grab these images, we can find them here.
Now, let’s go back to the Inspector tab. Since we’re not doing anything too complex on this landing page, we’ll change the grid system to 6 columns, and we’ll change the spacing to 2.5 to increase the padding in-between elements.
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
Now, we’ll throw this entire mess into a container.
Why use a container?
We’ll put these elements in a container so Macaw will read them as a cohesive set with relationship to each other. When the webpage resizes, Macaw’s code knows that everything within this container should resize together. It’ll keep things neat, and avoid mess further down the road.
To do so, we click the container tool and drag it over every element we’ve created. Start at the top left corner of the design and drag it all the way to the bottom right corner of the design. Before you release, the measurements at the top should say 100% wide and 550px tall. There! Now every element is contained within the container.
Note: If you don’t get it right the first try, you can double click on the container element and change the width and height manually, but this will make all of the other elements within the design change in proportion as well. I haven’t found a great solution for changing the container size without changing the size of the elements within ☹
Section: Designing a Features section
Now, let’s move onto our next section! This time, we’ll start by creating a container. The container should be 100% wide, 550px tall, and positioned directly beneath the previous container. To get keep track of what’s within the container, make it a habit to check the Outline tab. Double click the container to start working within the container.
Let’s add a background. Create an Element (R) that’s 100% wide and 550px tall so it matches up exactly within the container.
Inspect the element and add a background — this time, select a Gradient. You can double click on the diamonds to edit the color — this time, we’ll use the blue we used on the button rgb(15, 125, 187) and a darker blue rgb(5, 33, 50) to create our gradient. Set it at an angle of 315, and ignore the other values.
Now we’ll add in some of the other images from our Library. Make sure everything is deselected (to do this, click on some of the blank white space of the canvas) then drag the “iconGift.png” file from the Library onto the canvas.
Go back into the Inspector and click the @2x button, so the image is retina-ready.
Next, add some text. Draw a text box and make sure the width is set to3 columns, or 39%. We want the text to blend in with the rest of the content, so we’ll use the following parameters:
Open Sans 400
14px 1.6 em
rgba(255, 255, 255, 0.7)
Click on the image and the text box, then in the Inspector panel click on the center align button to make sure the two are aligned properly.
Now, repeat the process with the other icon. Yes, you can copy and paste elements and Macaw — feel free to do so with the text box! Don’t forget to align the elements when they’re done.
Since there’s a bit of extra space, let’s resize the container and the background each to a height of 400px.
Section: Pricing
Now, let’s go ahead and work on the last section. Create a container that’s 100% wide and 550px tall right below the previous container.
Double click on the container to start working within it, then create an Element (R) that’s 100% wide and 550px tall.
Add a background image and choose “DeathtoStock-Wired.png” from the Library. Set the size to Cover and click OK.
We’ll add the pricing for our product here. First, create a text box that’s two columns wide, but about one line of text tall. The text will be “All for only” and it’ll have the following attributes:
Oswald 400
16px 1.4 em
rgba(255, 255, 255, 0.7)
All caps selected
Then add a 1 column width text box beneath that with the price, with the text “39”, with the following attributes:
Oswald 400
130px 1em
rgba(255, 255, 255, 1)
Add a 1 column width text box to the right of that, with the phrase “$ per month”, with the following attributes:
Open Sans 300
36 px 1 em
rgba(255, 255, 255, 0.7)
Looking good! Let’s add one last opportunity for collecting users’ emails. We’re reusing the same button and input elements we created above, so instead of copying and pasting, let’s turn the input and button into reusable components.
Click on the top navigation under Elements and click Create Component. Name your component “Email capture”.
You’ll see that the two elements are now grouped together. Go back down to the pricing section and click on your Library tab. Drag the Email Capture component onto the canvas.
It’s a bit too big for this section, so we’ll just double click on the component and move the button beneath the input.
We’re almost done with our page! Let’s add a simple footer at the bottom — that’s an Element (R) that’s 100% wide, 90px tall, and the background color is the darker blue from our gradient rgb(5, 33, 50).
Responsive Design
Now, here’s where Macaw gets sexy — responsive design. If you’d like to see how the page looks like, go to File > Publish (⌘P) Things look pretty good! But try resizing the page, and you’ll see some stuff like this:
Now, let’s go back into our file and use the Viewport Tool (P) to make sure that our site responds well, regardless of the width of the page!
Macaw’s viewport tool is fantastic! Select the Viewport Tool (P) and you’ll go into a quasi-editing mode. Select the boundary line that’s currently marked at 1200px. You can drag and slide it to see how things respond based on the width of the device.
Since it looks like we’ve got some problems around 800px, let’s create a breakpoint at 850px. Simply drag the boundary line to 850, click Done, and confirm the break point. Then you can start editing what the design will look like at a width of 850px.
Let’s adjust the width of the text boxes to give the text more area to expand. Simply select a text box, and increase the width.
Then, go back into the viewport editing mode. Things look pretty good at 850px now! However, the layout breaks down once again at 600px. So let’s create another breakpoint, this time at 650px.
At the 650px breakpoint, it looks like the headline text is simply a bit too big. So let’s adjust the text to a 30px height. We’ll also adjust the width of the text box below it so the text doesn’t wrap and collide into the input field, along with decreasing the text height to 14px. The button and the input field are also look squished, so we’ll increase the width of those too. Now we’ve got a pretty good layout at the 650px breakpoint.
You can see how things can quickly spiral out of control as the layout gets smaller and smaller. Let’s take a break from designing smaller breakpoints, and take a look at the second section of our design to see how those elements resize at the 800px and 650px breakpoints.
The 850px breakpoint looks pretty good. Let’s see how 650px breakpoint looks.
Not bad, but a bit cramped. If someone’s viewing our site at a screen width of 650px, it’s likely to be on a mobile device, which means shrinking the text isn’t the wisest decision. Instead, let’s lengthen the section and move one text area beneath the other.
First, we’ll go to the Outline and select the container for the Pricing section, and the footer, and move them down so we have enough space to reposition everything in our Features section.
First, we’ll increase the size of the container. It’s currently at 400px high — let’s increase the height to 700px.
Next, we’re going to move the second column beneath the first and center them relative to the canvas. It’ll look something like this.
Lets increase the width of the text element from 39% to 70%. Then, let’s center all of the elements. Play with the spacing, and we’ve got something that looks like this.
Make sure that the Features and Pricing sections are flush, and we’re good to go!
Now, let’s tackle the final element — the Pricing section.
Things are looking pretty squished at the 850px breakpoint, so let’s readjust the text size.
The “$ per month” text size will go down to 28px, the “39” text size will decrease to 120px, and we’ll increase the space between the input box and the text above.
Now, let’s check the 650px breakpoint. All of our text is crushed again, and we’re gradually losing the nice wood background for our text. Let’s adjust the background layer first.
Don’t be tempted to adjust the position of the background image on the element — you’ll just get a repeating pattern that looks like a mess. Instead, shrink the size of the image element to 450px tall. Space will be a bit more compact, but it’ll force the background image to conform to a smaller height, giving you more nice wood background to work with. After you’ve adjusted the image, change the container height to 450px.
We’ll adjust the text size again — “$ per month” goes to 14px tall, and “39” goes to 100px tall.
That input section is particularly messy. We can clear this up by increasing button width to 40% and changing the text above the input to 14px high.
Fixing the Details
Looking good! So now it’s time to resize the page and look at it as a whole to see if we’ve missed any elements.
Looks like we’ve still got a few problem spots around 700px. These aren’t the sort of details that will break our layout, but there’s no sense in not fixing them!
Let’s create one last breakpoint at 750px.
For our header, we’ll increase the width of the text above the email input from 52% to 70%. We’ll also increase the width of the input box and the button.
Now, the Features section.
Let’s increase the height of this section, just to tide us over until the next breakpoint.
We’ll move the Pricing section down, just to give us a little space. Then we’ll change the height of the background, and the height of the container to 450px. Then, move the Pricing section back up.
All good!
Finally, the Pricing section.
We’ll change the “$ per month” to 21px, and the “39” to 110px. Looks good!
Now, Publish (⌘P) your project. Looks like we’ve got one bug where the images overlap each other during resizing — but we can fix this!
The best way to solve this problem is to throw containers around each pair of paragraphs and images.
Double click to enter the Features container. Then using the Container Tool, draw a container around each set of image and text. And it’s as simple as that! If you accidentally catch the gradient within the container you created, you can grab and rearrange it within the Outline panel.
Now hit Publish (⌘P) and our page is fully responsive and good to go!
You can find your final files within your folder entitled accessoryBox — just upload them to your web server and your page is live!
Congrats, you’ve just made your first project with Macaw!
I’m excited to see what techniques you’ve used with Macaw. Comment throughout the article to show me yours!
Note: after completing this tutorial, I gathered the feedback you’d given me and made some updates, creating further breakpoints at 450px, 375px, and 320px. The changes are now live at the website. Now that you know how to make your own breakpoints — what do you think? What would you change? How would you handle designing at such small sizes?
