Before I had my design process nailed down, I often struggled with coming up with designs. 1
The problem was, I didn't have content to design. 2
You can't really choose a correct typeface if you don't know the text that it's going to go with. 3
You can't design a benefit section if you don't know what the benefits are. 4
You can't choose the right photo if you don't know what's the text next to it. 5
You can't design a team page if you don't know how many team members there are. A team page with 55 team 6
members is going to look very different from a page that has only 3 team members, with really long 7
biographies. 8
At one point, I started working with this amazing agency from Australia. 9
And unlike me they had a proper design process. 10
The first step was to write down the content of a page, before doing any designs. 11
Working with them got me into the habit of writing the content first, and I realized how much I was torturing 12
myself by trying to design a blank piece of page. 13
Once you have the content, design decisions become obvious and they come to you easily. 14
Now, getting content from the client is not very straightforward. 15
Most of the time, they don't have any experience on writing the copy of the page, right? 16
They're not copywriters, they're not designers, they didn't have much experience with this. So they don't 17
know how to properly, and what's the best way to structure a page or a website. 18
And they need our help for this. 19
Many designers don't do this and they pass the hot potato to the client. And obviously the client will 20
come, 21
well it's going to come back with a content that is not very optimal for a page. And final result of 22
the design is not going to be as good. 23
Meaning the client is not going to get the best result and they are not gonna return for more business 24
to the designer. 25
Lose lose situation for both of the sides. 26
So am I suggesting that we should write content for our clients? Well, sort of, but not really. 27
Here is where wireframes come in. Generating content, for me, is part of the wireframing stage. 28
Here's what I do. As I start creating wireframes, 29
I start thinking about the structure of the content. And trying to put the page in the best way possible 30
based on the goal of that particular page. Be it a Home page or some other landing page or whatever it is. 31
Now, as I put text blocks on the page, 32
I start filling those text blocks out with example text. With something that I think might be useful for 33
this particular section. 34
I'm not really a copywriter and English is not even my first language, but I still write down the content 35
as much as possible. 36
If your English isn't very good, don't worry about that. 37
That's not a problem. Because you weren't hired for your English skills, you were hired for design. 38
Just be upfront with your client and explain them, whatever you're putting there is your example and 39
suggestions to help them and they should write their own content. And what you can also do is you don't 40
have to write that copy. 41
You can borrow and copy them from other websites. 42
So during your inspiration phase, you probably went through different websites and found some examples that 43
are from a similar startups or similar businesses, right? 44
So you can grab the text from there and copy and paste them there. But always make sure to explain, that 45
you're not writing content for them, so that they are not judging you for that content and that you gathered 46
this example from other sites and maybe even competitors. 47
And if you are a little into writing, consider taking a copyrighting course so, you can add that to your 48
services. 49
Clients will love you for taking that part of their hands. 50
You'll make more money. Win-win. And after I'm done with wireframing, 51
I share it with my clients and ask them to rewrite the content, and remove anything if they want to. 52
And fill it out in their own words. 53
Having a layout already with prefilled content, makes it easier for them to write the copy. Because 54
otherwise, then it's very difficult for them to understand what I meant there. And what would be the purpose 55
of this section maybe, and these columns, and what they should write in that. 56
But if I give them examples, then they get the idea and they can easily come up with something of their 57
own. 58
I avoid using Lorem Ipsum and dummy texts like that as much as possible, but sometimes we have to and 59
we cannot avoid it. Because sometimes I have to create a page for, or a website for a complicated financial 60
services, that I have no idea how to describe. 61
So in that cases, I'm going to use dummy text, or maybe somebodies biographies, or testimonials, or something 62
like that. 63
There is no point of me filling it out with anything and wasting my time on it, so I will use dummy text. 64
Another big reason why to use wireframe is because of revisions. Because revisions are part of any design 65
process, 66
and if the revisions are happening right in the, during the design phase, then you're going to take much 67
more time, because then you are thinking about colors and making everything pixel perfect and wasting 68
a lot of time on something that you sort of already designed and sort of attached your ego to it. 69
Because this is what often happens with designers, because whatever work that we produce we kind of feel 70
attached to that work. But when you're doing wireframes, you're not attached to it, they're just you know, 71
ugly skeleton looking doodles, and we can change it very easily. 72
Revisions are easier and, you know, nobody's feelings get hurt. 73
This is a wireframe of one of my client projects. 74
As you can see, it's devoid of any design colors and is very rough, has no images or icons. 75
I was making this website for a scooter sharing app. 76
Let's go through this quickly, so you can understand why I've done and what was my thought process. 77
The navigation bar is pretty simple, I didn't even put a logo in there, 78
just a text saying it's a logo. Instead of a hero image, 79
there is an image place holder and that's all. 80
At that stage, I haven't decided what would be the hero and it's not relevant to this either. Although, 81
I have decided on the layout. I wanted to have a hero on the right and content on the left. If I wanted 82
a hero as a background, then I would put it as a background stretching edge to edge. On the next section, 83
I chose to have 3 column content, to describe how the product works in 3 steps. 84
Not much design, but layout is clear. And I also made the decision that how it works was an important 85
section to have right after the hero. 86
I have filled the content out myself, sometimes reusing text from the competitor sites. An important part 87
is to give example text to the clients, so they click and start writing right away without much research. 88
Up next, I've created a section with a small demonstration of the app, with some benefit bullets on the side. 89
On this section I've actually already had a pretty good idea of how I would design this section. 90
I wanted to showcase that app and show them the app in action. So I plan to have a video gif animation 91
of the app being used. A little more showcasing and benefits of the product like free parking, insurance, 92
and so on. 93
Then I had a pricing and testimonial sections, pretty straightforward. And finally, we have Call to Action 94
section and the footer. Closing pages, especially home pages with Call to Action section is a good idea. 95
You want to prompt users to do something after they are done getting to know of a product or a service. 96
You don't want to let them hanging there clueless, not knowing what to do next. 97
You might lose them. 98
So after I was done with the wireframes, I shared it with a client and gave them an explanation of each 99
section and the thought process behind my decisions. 100
And here's how the final design ended up looking. 101
You can see how the layout and content is the same, but it's sort of like it has been colored in. 102
So those are the reasons behind using wireframes in your design process. 103
Use them before you get to design. 104
Thank me later.