In this video, we're going to start creating wireframes for our team collaboration home page. 1
Inside the client project file, 2
create a new page by clicking the plus icon and name it wireframes. 3
We're going to add a frame and the grid, the usual way we do it. Desktop frame and our usual twelve-point 4
grid. 5
Now that we know how to create styles, 6
let's save this grid style for later use in this project. Because we can, so why not. will save us time 7
later. 8
For us to come up with some ideas on what content and layout we should have, 9
let's have a look at our project brief and the mood board. 10
Because project brief is where the goal and high-level details of the project is, and in mood board 11
we have a look and feel, which we already agreed with our imaginary client. 12
So the website is going to be pretty standard, but the primary goal is to get early access sign-ups. 13
That's going to be our call to action. 14
We know, it's going to have a blog and we also need a place for people to subscribe to a newsletter. 15
Now let's have a look at the Mood Board. 16
So from the brief, we know that the client wants a website that is more photography based rather than 17
illustrations. 18
So I think, this sorts of background photo approach is something that's going to be liked by them. And 19
a good approach overall for our target audience. 20
We could find a photo that audience relates to, so they can see themselves in it. 21
And that's going to help us connect with the audience. 22
So based on that let's wireframe the hero section. 23
We need a background photo, not a real photo, but just a place holder. 24
So, find an image element and drag it onto the canvas and then resize to fit it to the full screen. 25
Make it around 800 pixels in height. 26
That's usually a decent size for the hero section. 27
Now we need a navigation bar, a logo on the left and the links on the right. Pretty straight forward. 28
Let's use heading 4 style, for the logo. 29
The link style for the links and secondary button for the call to action in the navbar. 30
I'm going to resize the button to make it smaller because we'll use a regular size for regular buttons. 31
So far so good. 32
Now for the headline in the subhead. 33
We're going to choose the heading 1 style and choose the black color from the wireframe kit. 34
It's a good idea to stick to this neutral grey color palette when creating wireframes. 35
I really like this palette, actually, I stole it from a wireframe tool that I used in the past. And in 36
addition to the blacks and greys, stick to one primary color from those options, or choose your own primary 37
color, if you'd like. But stick to one. If you want to change the primary color of buttons changing the 38
fill color on the entire component, won't work, because it has mixed content. 39
The rectangle is blue, but text is white, so you'll have to change the rectangle only. 40
But the better option is to change the Master. 41
That's why we use components. 42
Select an instance, 43
then click to Go To Master. And in there just choose a different color for the background of that rectangle. 44
The same goes for the secondary button, change 2 colors, one for the border and one for the text. 45
In my case, I'm going to stick with this original primary color. 46
All right, I already have content in my mind. 47
I'm going to steal the headline from this one, "Instant collaboration for remote teams". 48
As I mentioned before, we're not copywriters so we don't need to be perfect with the content, just anything 49
we think works and will give an idea to our clients, as little dummy text as possible. 50
I'm not worrying about distances here too much, but still making sure they're aligned. 51
So now we need to urge users to do something, Which is our primary goal to get their emails for early 52
access. 53
This is commonly referred to as call-to-action or short CTA. CTA is either a form or just a button. 54
Let's see what our inspirations are doing in this case. 55
Many of them are using a form with a single email field. 56
I think that's what we should do as well. 57
We could have a pop up form, but when it's small form especially with a single field, it's a better practice 58
because it's less threatening. 59
It's right there are no tricks, 60
it's very transparent. 61
Asks user for just an email and they see what's going on. 62
And there you go. 63
Very simply and quickly we have a wireframe for our hero section. 64
Thanks to this wireframe kit, didn't take as much effort and we didn't have to waste time on choosing 65
fonts and colors. 66
This is how you should work with wireframes. 67
Thinking about the layout and content and not worrying about the look and feel. In your real projects, 68
when you share the wireframe to your clients, you can add comments to different sections and different 69
elements on your page, to show them your thought process. To do so switch to the commenting mode and by 70
clicking anywhere on the frame you can add new comments. 71
Clients love seeing this sort of thought process that you put behind your designs. Because when you build 72
a website and design and design a website for a business, you're not just giving them something pretty 73
to play with. You're giving them a solution to their problem. 74
And often you're giving solutions to several problems like generating sales, or leads, or traffic, creating 75
online presence, and good brand, and some reputation. 76
A website that looks fancy and modern that, you know, is going to create a very specific image and reputation 77
for that company. And you need to show that you have a deep understanding of their problems and you have 78
come up with some potential solutions. 79
In other words, you need to sell them on your designs. 80
You made the first sale, by convincing them to hire you for your services. 81
Now you're making another sale. 82
You're not done there, you're making another sale, to show them that these designs that you created, 83
their great solutions to the problems, that they face as a business. 84
And I don't mean this to use some sort of sleazy sales pitch or techniques when you're explaining your 85
designs. 86
Just explain your self, 87
like a designer, and how you thought about these elements that you created. For example, 88
that single email field that I've put in the wireframes, I would explain this to the client something 89
like this: 90
"My suggestion is to use a single email field for the call to action and subscription, 91
instead of asking first name, last name and so on, because one single email field is low commitment 92
from the user side, it's less threatening and because it's also visible, we're able to fit it. Because 93
If we were asking for several different things, then you would have to put probably a pop-up form, 94
because then it would occupy too much space. 95
But by showing the field and email field is visible, we are showing that we're transparent. 96
This is the only thing that we are asking at this step right now. And this low commitment exchange will 97
increase the overall subscription rate." And that's it. 98
Now, if we didn't do that and if we didn't explain our thought process. Chances are they're just 99
not going to know the reasoning behind one field. Because they're not designers, they haven't been building 100
websites and they think from the business owners perspective and not from the user's perspective. 101
Right? 102
So they're going to think. "Wait, 103
I'd like to have more information about the users. 104
I'd like to know their email address, phone number, social security number, credit card details". And so 105
on. 106
Now, because you haven't put all these fields in there, and you just put email address, they feel that you're 107
being neglectful. Or maybe you just didn't understand their business challenges and what they want from 108
the business. 109
So they're going to feel, that you're just not getting them and not offering good solutions for their 110
business. 111
So it is our job as designers, to educate our clients about topics like this. But you can't educate your 112
clients, if you don't educate yourself first. 113
So as an external reading, I would recommend you to subscribe to blogs and newsletters that share 114
information, and latest research, and anything new 115
basically, about design or user experience topics and things like that. 116
For example, Nielsen Norman Group is one such place, you could subscribe to. 117
They often publish articles and research about user experience topics. 118
Also, Prototypr.io, which has this newsletter that includes, it's not the primary focus, but it also 119
includes the top posts, blog posts usually, about topics of design and user experience and everything 120
sort of web related. 121
If you like books, I'd recommend reading 122
"Don't Make Me Think" by Steve Krug. Which is a great book about web and mobile user experiences 123
and usability. And another one "The Design of Everyday Things" by Don Norman. 124
That's the same Norman guy from the Nielsen Norman Group. And it's not really about web design, but it's 125
more about items and everyday things that we use in real life. 126
But it's a good introduction to the journey of user experience and understanding, what you have to look 127
for and basically sort of a philosophy behind designing things and objects and items. Which includes 128
web, because people interact with it. And especially web because usually, it's a bit more complicated 129
and a bit more difficult to interact with for people than regular items that we use in real world, 130
like fork. 131
Okay, so back to our wireframes, but we're going to continue that in the next video.