In this exercise, you are going to create an interface that uses simple shapes made in Figma. You will create the interface for a subject of your choice the landing page the discover page and the sign up page you will have three buttons. Home Discover and Join
You will create a simple icon logo for the top right corner, and an icon for the main in the centre page created using simple shapes such as the rectangle, circle polygon, line tool you also use boolean functions to create the shape.
You should also use columns to help you align text and images.
Desktop Frame
1. Select the frame tool go to the properties panel and choose desktop. Choose the colour for your interface using the Swatch is in the properties panel. And the layers palette label this frame as a landing page
Navigation Bar
2. Create the text buttons for this interface using the text tool and using a suitable colour against the dark background to create text for home discover and join. Text should be 16.px bold
Heading text
3. Create text to accompany the logo design using a larger font size but it should be welcoming to fool the viewer into typing something appropriate for your website, in this case, fill the music was used. The headings should be around 1.96 times larger than your body text to create sufficient contrast. This would mean that if you use 18px for body font size, then you would use around 35px for headings.
Body text sizes should be around 16px to 18px for legibility
Subheading
4. Create the subheading text to accompany the main text. These should be slightly smaller than heading size, with some adjustments like less weight to create a contrast between the two. For example, if we used 35px for the heading, we should use around 30px for the subheading.
Creating the call-to-action button.
5. The call-to-action button should be direct the statement on it should be telling or instructing the viewer to do something like Join Now or sign up now. Select the rectangle tool to create the block for your button. in the properties panel select a complementary colour pull the button as this should stand out using the text tool type Join Now place the text on top of the rectangle centre the text using the properties panel select the rectangle and change it’s corners to rounded corners
Creating the icon
6. Create an icon for your webpage using the techniques we have considered.
Tips for copying and pasting from one frame to another
tip: make sure you label your layers carefully tip: try to group items and label these items carefully
To copy and paste from one page to another is very straightforward. Select the item you want to copy over from one frame press command C and then simply go to the frame you want to copy to by selecting it make sure that this is selected in the layers palette and then press command V to copy over.
