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