And we're back continuing with our wireframe below the fold. 1
Let's see which one of the inspirations could work for our next section. 2
It'll be a good idea to demonstrate the product by showing some screens. A section like this could work. 3
Have the screens on one side and the text next to it. 4
We could steal some content from Slack. Using content from the competitors is a valid option. 5
This is how your clients will try to get ideas anyways. 6
But make sure to put a comment on it, telling where you grabbed the content from. You don't want them 7
to think that you came up with this content and then at some point find out that, you know, it was grabbed 8
from the competitor, because they're just gonna think that you just stole it, right? 9
Here we can add "Learn More" link to the other potential pages that will explain the specific features 10
in more detail, like they have done it here. 11
It's a good way to direct visitors on different pages of the website. And also it brings a little more 12
detail to the text block. 13
We already have a link in style. 14
Just change the color to your primary color. 15
We can also add a little arrow to this link. Inside the components 16
we can search for an icon and grab that and put it next to it. 17
And that's all for the section. 18
Now let's create rest of the sections in the body. 19
I was thinking of split sections like this. 20
Content is the same style as to what we just did, so we can just copy that. 21
And for the graphic, we're just going to put the image place holder for now. 22
Although for our clients we'll explain our vision about these images. That we are going to create a sort 23
of an Augmented Reality View. Adding mockups from the platform onto real photos. 24
Let's see. Some content for simple task management. 25
I'm gonna write this on my own. 26
Don't judge me. 27
Not so shabby. 28
Let's have one more of the same layout with the photo. 29
Let's just duplicate this. 30
I'm holding on 31
Alt/Option key here. 32
So it duplicates when I drag the whole thing. 33
But you should know that by now. Wanna see a cool Figma trick? To reverse the layout of the section, group 34
the content first, 35
then select everything. 36
And these 2 pink circles should appear in the middle. 37
Just hold it and move the content on the other side. 38
So simple, a baby could do it. 39
Let's now add a testimonial section. 40
I really like this one here. 41
I'm going to recreate it nearly as is. From a marketing standpoint, having testimonials on product or 42
service websites is a great idea. 43
It increases trust in the brand and audience gets a better feel for the product by reading real people 44
experiences. 45
One great way to design testimonials is by adding 5-stars, just like they've done here. 46
People love to see how someone has rated the product. 47
It's more powerful and simply seeing 5 stars on the page, instantly brings people positive feelings 48
about the product. Because there is a strong association in people's brains 49
linked to those 5 little icons. 50
It's a little psychological technique. 51
Your employers will appreciate your understanding of such things. 52
So, I have just tried to match it roughly to the inspiration, not using any specific colors or anything 53
in real designs we'll use golden stars and the white card. 54
But here we got to keep the grey color, so we don't want to worry about the shadows to make the white 55
card visible on a white background. 56
Now just group the whole thing and duplicate it in a similar way as our inspiration. 57
And the last one to go off the frame. 58
One thing to note here, we don't want this whole card visible. 59
We want it clipped like it's an inspiration. 60
So how do we do that? 61
The reason it's not clipping is because it's not part of the frame anymore. 62
You can see that in the layers panel. When you move something off the frame a little, Figma looks at 63
your cursor and decides if you want it on the frame or off the frame, based on that. 64
You see how that group gets clipped when the cursor moves inside the frame? Or becomes fully visible 65
when moves outside of the frame. 66
So to move it back, just make sure your cursor is inside the frame. Then position with arrow keys or in 67
a way that you don't move the cursor outside. 68
Fantastic. 69
We can keep the dummy text inside testimonials. 70
Those are something our clients would need to ask their users and produce it that way. 71
And let's add those slider arrows, just like in the design. 72
Lastly let's add footer and be done with it. 73
As I often do in my projects, I'm going to copy the footer content from our previous exercise. 74
Since we use the same 12-point grid, columns fit just right. 75
This reusing different components from, between different projects, comes from, a little bit from laziness, 76
but works out really well, 77
at the end of the day. You start to master these common elements, as you use it in different projects. 78
And start understanding benefits and limitations of the layout. And at some point, you refine it until 79
you have a near perfect personal template. 80
Now let's update the colors and text styles. 81
Later in the design stage, I'm thinking to use a dark footer, like this. 82
And since we know from our project brief that we need a Newsletter Signup form, we can add a similar 83
email Form right here, in the footer. 84
And there. That's our footer. 85
All right, wireframes for the home page is done. 86
Next we're going to wireframe the article page for the blog.