Tutorial 1 - Layout

Scroll down for detailed text description.
Back to Overview
Download video file for offline viewing

00:00Welcome to this Antetype tutorial about Layout in Antetype.

00:05In this tutorial, you will learn how Antetype’s Layout system works as we layout a basic mobile website.

00:12If you have not watched it yet we would first recommend watching the getting started tutorial available at antetype.com/start.

00:26This is the website we are going to create, it has a simple structure but the core skills used in building this website we be useful in building much larger websites or other prototypes.

00:38The site consists of a header, an image, a content area and a footer.

Let’s get started.

00:48Create a new File and from the template Chooser pick the “Tutorial 1 - Layout” file in the Getting Started section.

00:57From the toolbar choose the Screens menu and create a new blank screen.

01:05The new screen will be selected and should already have a width of 320px and a height of 583px - you can see this in the Style Bar.

01:17In a later tutorial we will look at how to make our design respond to different screen widths but for now the only rule we want to add to the design is that is has a minimum with of 320px.

01:32To do this we need to click on the size button in the style bar and set the minimum width of the screen to 320px.

01:42The layout of our screen is with 4 different areas that flow from the top of the the screen to the bottom so we will set the layout of the screen to vertical and we want our content to start at the top of the screen so we will use a top and centre alignment.

02:02To do this click on the layout button in the style bar and set the mode to vertical and the alignment to top centre.

Let’s layout our screen!

02:09The sections of our screen are a header, an image, a content area and a footer so we’ll first add these four areas to the screen and then style them as we want. All four areas need to stretch to the width of the screen but the height for each area will be set differently.

02:30To create the header area we need to add a rectangle to the screen we do this by clicking on the Rectangle button on the toolbar.

02:38The rectangle is added at the top of our screen in the centre because we have set the layout of the screen to top-centre alignment.

02:47Press CMD+D 3 times to duplicate the rectangle and you will notice that each is added underneath the other elements and all are centre aligned this is because of the layout we have configured for the screen.

03:00Let’s name each of our four Rectangles using the screen inspector we shall call them:

  • Header
  • Big Image
  • Content
  • Footer

03:20Select all four elements and click on the Size button in the Style bar and set their width size mode to Stretch. You should now see that they all have the same width as the Screen - 320px.

03:37Now Select the Header and Footer elements and we will set their height to 50px using the style bar.

03:45Select the Big Image and set the height to 190px.

03:53Finally select the Content element and set the height mode to Stretch.

03:59These size settings now means that if the screen size is changed all the elements will match the width of the screen and the Content area will expand to fill any extra height while the other elements remain at their given heights.

04:14Looking at our final design we can see the layout is now complete so we can now start to style each section.

04:22Select the “Header” and “Footer” elements and click Fill on the Style Bar then set the colour hex value to 42 46 48

04:34Next select the Big Image element and again click on Fill - this time we want an image fill so select Image and then using the mouse-overs find the image named “Pasted Image 2”.

04:48Set proportional scale to off for the image so that it fills the entire Big Image area (in a later tutorial we will improve how this image looks but let’s leave it like this for now).

05:02Now select the “Content” element and set the Fill color to hex value E6 EA EC.

05:15The backgrounds for each of our sections are set but each section still has a border which is not what we want so let’s select all the elements and then click on the Border button in the Style bar.

05:29Using the border editor set all the borders to 0px width and press enter.

05:38With a bit of styling the layout is now looking closer to our final design lets complete the design by finishing the Header and Footer elements.

05:47Select the “Header” element - we want to nest the next elements inside the header element so hold the alt key as you click in the toolbar and this will create a Rectangle element inside the Header element which you can also see in the screen inspector.

06:05Change fill of our new Rectangle to the image named “Antetype Symbol”.

06:10Then change the width and the height of the rectangle to both be 40px.

06:17Again we need to remove the border do this by pressing B, then 0 then ENTER.

B is a keyboard short cut for the border editor you will find out more about keyboard shortcuts in the next tutorial.

06:33In screen inspector rename the element from “Rectangle” to “Logo”.

06:40Next we want to add some text next to the logo so press “Text” in the toolbar to add a text element next to the Logo element. You can immediately start typing the text for this element so type “Antetype” and press CMD + ENTER to finish editing the text.

07:02Using the Text Style Bar set the font to “Helvetica”, the Font Size to 24 and the font color to White. We shall rename this element to “Logo Text”

07:13The alignment of the logo and text is not correct as they should be centred in the header. To correct this we need to set the layout alignment of the container element, in this case the Header. Select the Header and then using the layout editor set the layout alignment to Centre.

07:38The Logo Text is a bit too close to the logo too so let’s add a left margin of 5px to the logo text.

07:45Looking at our design we also need to add a Burger menu but on the left side of the header. The problem is that if we nest another element in our Header we know that it will be centre aligned not left aligned. Let’s first add the element to the header, format it and then solve the alignment problem.

08:04Select the “Header” element and while holding alt click on the Rectangle button to nest another rectangle element.

  • Set the Width to 45px and the height to stretch mode of this new Rectangle.
  • Set the fill to the image called “Burger”
  • And remove the border by pressing B, 0, ENTER
  • Rename the element to “Burger” in the Screen Inspector

08:31Now our Burger menu needs to be moved to the left to do this we will need to set the float property so that the element floats above the other elements we can then set the float alignment to left to complete our design.

08:44Click Float on the style bar Switch Float On and then setup a left centre float alignment.

08:55The final part of the design is the footer we need to add the Antetype URL to the footer. To do this double click on the footer and type “www.antetype.com” then press CMD+ENTER to end the text editing.

09:13Using the Text Style Bar we will change the font to “Helvetica” the size to 24 and the colour to White.

09:22That’s it - we have now laid out and styled the main parts of our mobile site. The layout is resizable and will adjust as we intended to different sizes.

If you look at the End of Tutorial 1 screen in the Tutorial 1 template you can compare the screen you have created with the screen as it should have been.

We hope you have enjoyed this tutorial, please visit antetype.com/learn for more tutorials.