Design for Web Part 2

In Design for Web Part 1, you have learned about the considerations when designing for the Web in regards to typography and grid system. You have completed the design of the Hero, Call-to-Action and Demo sections, and learn about how to choose beautiful gradients. In Part 2, we are going to continue and finish up the Design+Code landing page. We will design the Chapter, Benefits and the Footer sections. You will need to download the assets to follow this tutorial.

In the Chapter section, the background image size is same as the Demo section. We can copy the Demo group layer and paste it into the Demo Body with a 120px of top-margin. Then, select the background image layer, right-click it and choose Replace Image. Now you can select the image in the assets folder “4. Chapters › background-3.jpg” and it will be instantly replaced. Change the title accordingly from the content text file. Then, place the “macbook.png” image below the title with a 40px of the top margin.

The Chapter contents will be placed on the 640px grid. You can copy the content from the assets folder. Below are the text layer properties for each of them:

1. Chapter: 20px, SF Pro Display Semibold, #5856d6
2. Chapter Header: 32px, SF Pro Display Bold, Black
3. Each Chapters Title: 24px, SF Pro Display Regular, Black

Also set all the text layer width to 300px, so that you had two columns of Chapter contents side by side with a 40px gap. Once you have finished entering the text, group each of the chapter contents in a group called “Chapter”, and then group all the four Chapter group and name it “Chapter Body”.

Below the Chapter section, we will put some sample pages in card design. This will let people have a quick look at what kind of content we’re providing to readers.

Users can interact this section by scrolling horizontally. So we are going to give this section a full-width design. Draw a 1px height of full-width line, place it under the Chapter Body with 120px gap and color it to #f0f3f5. Then, insert the title “Sample Pages” below the line with 40px of margin left and top. Set the font to 20px, SF Pro Display Medium, #8196a4.

Let’s draw a 300 x 240px rectangle and name it “Base”. Set the rectangle Radius to 14px and place it under the title with 16px of gap. Copy and paste the “ios11-iphone-x.jpg” image from the assets folder and resize the height to 240px then, align it with the center of the card. Select both of the card and image then click on the Mask on the Toolbar. Now, we can insert the title and description, these content can be found in the “5. Sample Pages” folder. For the title, resize its width to 268px then, set the font to 32px, SF Pro Display Semibold, White. Since the text will be on top of the image, we should set a Shadow for it so that way, it will be more readable. Select the text, add the Shadows in the Inspector panel and leave the color as default but set X:0, Y:10, Blur:20 and Spread:0. For the description, resize the width same as the title then, set the font to 17px, SF Pro Text Regular, White. Apply the same Shadow as the title. Align the text layers in the card, so they have 16px of margins around the card. Group the card and the two text layers then name it “Sample Card”.

The next two cards content will be using the same design as the Sample Card. It’s good to convert it to a Symbol for reusability. Before converting it to a Symbol, rearrange the layers inside the Sample Card. Then, select it and give a Shadow of 25% opacity of Black, X:0, Y:10, Blur:20 and Spread:0 so that it won’t look very flat. Then, convert it to a Symbol by clicking the Create Symbol icon on the Toolbar. Duplicate two Symbol to the left with a 40px margin. Now, you can insert the contents accordingly. Lastly, group the line, the title and the three cards and name it “Sample Pages”.

Next, it will be the benefits section which will contain the number of readers and some testimonials from them. For the background and the title, the workflow is the same as how we did in Chapter Section. Copy the Chapter Section background then, we can replace the image and text accordingly. You can get the content from the “6. Benefits Title” folder.

Insert the subtitle “are learning from Design+Code”, set the font to 24px, SF Pro Display Regular, 80% White and center-align it below the title with a 24px gap. Then, insert the five companies logo: Facebook, Google, Apple, Realm and Amazon within the 640px grid and vertical-align them below the subtitle with a 24px gap. You can place one of the logos on the right edge of the 640px grid and another logo at the left edge. Then, select all five logos and press Distribute Horizontally so that all the five logos will be arranged properly within the 640px grid. Now, group them all and name it “Companies”.

We are going to insert some testimonial cards below the companies logo. First, draw a 300 x 240px rectangle with 14px Radius in White color. Place it under the Companies group with a 40px gap. Then, add a Shadow to it, the values are 25% of Black opacity, X:0, Y:10, Blur:20 and Spread:0. Then, copy and paste the “image-quote-begin.svg” and “image-quote-end.svg” to the card. Move the “image-quote-begin.svg” to the top-left of the card with 16px of margin top and left. Insert the testimonial text which you can get it from the “6. Benefits Title” folder and set the font to 20px, SF Pro Display Regular, Black. Resize the text width to 237px and place it next to the “image-quote-begin.svg” with 8px gap and 16px of top margin. Move the “image-quote-end.svg” icon to the end of the quote.

Then, draw a 24 x 24px round shape, select it and go to Inspector panel and click Fills › Pattern Fill. Drag and drop the “avatar-jean-marc.jpg” to the Pattern Fills and the round shape will become an avatar image. Now, insert the name and the job title. For the name, set the font to 16px, SF Pro Text Semibold, Black. For the job title, set the font to 14px, SF Pro Text Regular, #888888. Leave a 4px of gap between the name and the job title, and 8px of margin left to the avatar image. Increase the width of these two text layers to 237px. Select the avatar image and the two text layers and move them until they have 16px of margin around them.

Group all the elements and name it “Testimonial Card”. Now, you can arrange the layers in the group then convert it to a Symbol. Copy one card to the left with a 40px gap, two cards to bottom and also with a 40px gap too then start inserting the contents accordingly.

There will have more testimonial cards below, so we need to have a More button to let user expand and view all the testimonials. Copy the “Pre-order for $50” call-to-action button and change the label to “More”. Insert the Plus icon at the left of the label. And then center align it and place it with a 40px of margin-bottom in the section.

Insert the “benefit-video.svg” from the “7. Benefits Body” folder and resize it to 72 x 72px then, convert it to a Symbol. Insert the text from the content file and below are the font properties for each of them:

1. Watch and Follow: 15px, SF Pro Text Semibold, #888888
2. 44 hours of videos: 24px, SF Pro Display Semibold, Black
3. Each section is…: 17px, SF Pro Text Regular, #333333

Left aligns all three text layers, 4px of gap to each other and resize the width to 308px. You can group the icon and three text layers as “Benefit Card” then, convert it to a Symbol. Place the Symbol under the Benefit background with 120px of gap and move it to the left edge of the 800px grid. Duplicate once to the right with a 40px gap and four more to the bottom with 40px margin too. Now you can complete the contents respectively. All the icons you insert will need to resize to 72 x 72px and convert to Symbols so that you can replace the icon in the Benefit Card symbol.

By having a call-to-action button, it gives the user an option to click the button to purchase instead of scrolling back to the top to find the button. Insert the text “Ready to start?” and set the font to 64px, SF Pro Display Semibold, Black. Center align the text place under those Benefit Card with 80px of top margin. Then, for the text “Get the book and…”, set it to 32px, SF Pro Display Medium, #888888. Resize the text width to 480px, center align the text layer and place it below the “Ready to start?” with 16px of gap. Then, copy and paste the same call-to-action button to just below this two text layers with 16px top margin. Group the two text layers and the button as “Ready to Start”, then select all the Benefit Card symbol and “Ready to Start” and group them all to “Benefit Body”.

Finally, we have come to the footer. In our footer, we will have a tweet button, links to other pages and privacy policy text. First, draw a full-width rectangle, set its Fills color to #f0f3f5 and place it under the Benefit Body with 120px gap. Next, insert the text from the content file in the “8. Footer” folder. Set the font to 24px, SF Pro Display Semibold, #8196a4 and resize the width to 480px. Center align and give this text layer an 80px of top margin. Then, we can copy the More button and place it under the text. Replace the Plus icon with the “icon-twitter.svg” and vertical center align it with the button. Change the label to "Tweet" and make sure its left margin is 16px, right margin is 30px. Place the Tweet button below the first text layer with 16px of gap. We want to have the similar style as what we did for “Ready to Start” section, so we set the text to align center, and also align the Tweet button to the center. Now, you can change the left gradient color to #2457f5 and the right gradient color to #65d1f9.

Once we have inserted the remaining contents, the landing page design will be complete. First, insert the first text Design+Code is a…, set the font to 22px, SF Pro Display Regular, #8196a4, align the text to the left and resize the text width to 480px. Align it to the center and leave a 40px gap from the Tweet button.

Then for the links, set the font to 20px, SF Pro Display Semibold, #5856d6. Each of the links will have 16px of margin bottom. We can separate it into two columns, so each column we set its width to 220px.

For the last text All backgrounds made in…, the font is 15px, SF Pro Text Regular, #888888 and left align the text. Place it under the links with 40px of gap.

After you've inserted all the contents, increase the height of the background to leave a 40px margin-bottom to the last text layer. Then, reduce the Artboard height by clicking Resize to Fit in the Inspector panel so there won’t have any useless space. Well done! You have now finished the Design+Code landing page!