Week 2 - Layouts & Grids

Details

Step 1: Frames & Grid

Create 3 frames in a new design file and create an 8px grid that fits them, make sure your grid choice allows for both vertical (rows) and horizontal (columns) alignments. Your frames should include:

1. Desktop
2. Tablet
3. Mobile

Step 2: Auto layout

Create a card object that has auto layout and contains the following elements:

1. Title
2. Subtitle
3. Image
4. Icon
5. Description The card should have a fixed height and width. The elements in the card should always fit in the container.

Step 3: Nested auto layout

1. Create a row with 4 cards in it and apply auto layout to the row
2. Use one or multiple rows on your desktop frame

Step 4: Practice alignment and balance

Arrange the cards along with other shapes like rectangles for footer and header on your frames following the UI design principles we learned to create a cohesive well balanced design. Do not bother adding colours or styles at this stage, let your main focus be on alignment, proximity, balance, similarity...

Things to consider:

1. How will the design layout change from one screen to another?
2. How will rows change for different devices?
3. How to balance elements on your page?

Submission

Submit your Figma link with editing access for your instructor in Canvas Week 2 exercise Layouts & Grids. Note: The canvas submission requires an uploaded file which can be any image in addition to the link in the comment.