1 00:00:00,400 --> 00:00:04,410 Let's critique an example website from Treehouse at smellslikebakin.com. 2 00:00:04,410 --> 00:00:08,830 You can find a link to this in the notes associated with this video. 3 00:00:09,920 --> 00:00:12,798 Let's start by describing what it is that we're looking at. 4 00:00:12,798 --> 00:00:16,520 This is a website for a fictional cupcake bakery. 5 00:00:16,520 --> 00:00:20,250 The first thing I notice is that the light colored text and 6 00:00:20,250 --> 00:00:24,830 illustrations contrast with the dark red background. 7 00:00:24,830 --> 00:00:28,640 The illustrations stand out because they have a unique shape and 8 00:00:28,640 --> 00:00:33,600 silhouette that's unlike the uniformity found in the rectangular photos. 9 00:00:34,620 --> 00:00:38,646 The photos themselves are very high contrast and colorful. 10 00:00:38,646 --> 00:00:43,214 I also see a button that says browse our cupcakes. 11 00:00:43,214 --> 00:00:47,849 The color scheme seems to mostly be composed of red and green, 12 00:00:47,849 --> 00:00:53,835 which are complementary since they're opposite one another on a color wheel. 13 00:00:53,835 --> 00:00:58,744 And the composition looks like it's on a grid with columns, 14 00:00:58,744 --> 00:01:03,943 where some items like the paragraph at the top stretch across and 15 00:01:03,943 --> 00:01:07,020 photos align with the text. 16 00:01:07,020 --> 00:01:10,609 So now let's try to interpret the goal of this site. 17 00:01:10,609 --> 00:01:13,250 What does the site trying to accomplish? 18 00:01:13,250 --> 00:01:16,923 Sometimes you'll be able to ask the designer but other times, 19 00:01:16,923 --> 00:01:20,053 you might have to answer that question for yourself. 20 00:01:20,053 --> 00:01:25,074 Like I said before, this is a website for a fictional cupcake bakery. 21 00:01:25,074 --> 00:01:28,804 But, let's read a little bit of the copy here. 22 00:01:28,804 --> 00:01:36,960 In the navigation, there's cupcakes, and prices, and locations, and a contact link. 23 00:01:36,960 --> 00:01:40,838 And the call to action button says browse our cupcakes. 24 00:01:40,838 --> 00:01:45,078 I feel like I've seen this type of button on other websites before, and 25 00:01:45,078 --> 00:01:46,431 it's familiar to me. 26 00:01:46,431 --> 00:01:51,130 Because it doesn't have any other similar buttons around it. 27 00:01:51,130 --> 00:01:54,490 There are some negative space with nothing there. 28 00:01:54,490 --> 00:02:02,068 And it looks different in size and shape and color than the other navigation items. 29 00:02:02,068 --> 00:02:06,830 So, I have some confidence that this will take me to the next step and 30 00:02:06,830 --> 00:02:08,430 help me get cupcakes. 31 00:02:09,460 --> 00:02:14,975 So overall, it seems to me that on this website, maybe I'm expected to either 32 00:02:14,975 --> 00:02:20,375 visit this bakery to buy cupcakes or I can call them or place an order online. 33 00:02:20,375 --> 00:02:24,304 And that makes sense because it lines up with my experiences with other 34 00:02:24,304 --> 00:02:28,381 food businesses where I can place an order or just visit their location. 35 00:02:28,381 --> 00:02:34,145 Now, how does that goal connect with the visuals that I described? 36 00:02:34,145 --> 00:02:36,280 That's the last part judgment. 37 00:02:36,280 --> 00:02:41,832 Does this website make me want to visit their store or place an order? 38 00:02:41,832 --> 00:02:47,018 Usually, I saved the overall success for last, but generally speaking, yes, 39 00:02:47,018 --> 00:02:52,052 I think if I search the web for cupcake bakeries and I came across this website, 40 00:02:52,052 --> 00:02:56,497 I would feel comfortable enough to order from them, but why is that? 41 00:02:56,497 --> 00:02:59,450 Well, let's talk about what's working in their favor. 42 00:02:59,450 --> 00:03:01,922 The illustrations have a flat and 43 00:03:01,922 --> 00:03:07,135 cartoon style that feels childish and fun just like eating a cupcake. 44 00:03:07,135 --> 00:03:09,931 It's not an essential food that you need to survive. 45 00:03:09,931 --> 00:03:14,020 It's frivolous and something that should happy. 46 00:03:14,020 --> 00:03:19,910 The contrast between the background and the text makes it really easy to read and 47 00:03:19,910 --> 00:03:23,130 the emphasis using different font sizes and 48 00:03:23,130 --> 00:03:27,610 colors as well as different shapes in the case of 49 00:03:27,610 --> 00:03:32,670 the browse our cupcakes button, makes it easy to see the hierarchy of information. 50 00:03:32,670 --> 00:03:36,980 I immediately know what's most important and what's a smaller detail. 51 00:03:38,220 --> 00:03:42,390 This builds my trust in them as a business because it makes me feel like they're 52 00:03:42,390 --> 00:03:47,200 organized, and they're not going to forget about my order or something. 53 00:03:47,200 --> 00:03:52,680 And finally, the choice of a complementary color scheme with red and 54 00:03:52,680 --> 00:03:55,380 green feels like a smart choice because color 55 00:03:55,380 --> 00:04:01,130 complements typically provide the maximum amount of contrast and vibrant color. 56 00:04:01,130 --> 00:04:04,487 The photos and the illustrations really pop off the page and 57 00:04:04,487 --> 00:04:06,987 almost feel like they're floating in 3D. 58 00:04:06,987 --> 00:04:10,746 It makes me feel like this company appreciates beauty and 59 00:04:10,746 --> 00:04:16,009 that they're capable of making the pretty cupcakes that you see in the photos. 60 00:04:16,009 --> 00:04:18,170 Now what can be improved? 61 00:04:18,170 --> 00:04:22,466 Well, I feel like the texturization of the background and 62 00:04:22,466 --> 00:04:25,278 the illustrations is a little heavy. 63 00:04:25,278 --> 00:04:30,120 A little bit is okay to make it feel like cut out paper or something, but 64 00:04:30,120 --> 00:04:35,559 these look like they're actually distressed, sort of like chipping paint. 65 00:04:35,559 --> 00:04:38,777 It's not enough to turn me away, but it's an easy adjustment. 66 00:04:38,777 --> 00:04:43,470 I also think the copy at the top could be a little more direct. 67 00:04:43,470 --> 00:04:47,570 And maybe say something like, we're a cupcake bakery in Orlando, 68 00:04:47,570 --> 00:04:52,880 or something that gives me a very clear understanding of what this website is. 69 00:04:52,880 --> 00:04:58,350 Finally, I think the call to action button could be improved with less texture and 70 00:04:58,350 --> 00:05:01,150 more color contrast with a larger font. 71 00:05:01,150 --> 00:05:06,830 The same color is used in the cupcake directly to the right of it, 72 00:05:06,830 --> 00:05:11,180 and that's a little confusing because the cupcake cause such a unique shape 73 00:05:11,180 --> 00:05:15,690 that my eye is pulled away from that button at first. 74 00:05:15,690 --> 00:05:20,425 Overall, I think this is a successful design, just a few tweaks and 75 00:05:20,425 --> 00:05:22,178 it could be even better. 76 00:05:22,178 --> 00:05:27,028 There's always more that can be said in a critique because you can endlessly 77 00:05:27,028 --> 00:05:31,060 speculate on other possibilities, but that about covers it. 78 00:05:31,060 --> 00:05:33,990 So let's break that down one more time. 79 00:05:35,100 --> 00:05:39,011 Make sure that your feedback is objective and useful. 80 00:05:39,011 --> 00:05:41,451 First, describe what you see. 81 00:05:41,451 --> 00:05:44,260 Second, interpret what you see. 82 00:05:44,260 --> 00:05:46,999 In other words, what is the goal of the site? 83 00:05:46,999 --> 00:05:50,600 Last judge strengths and weaknesses. 84 00:05:50,600 --> 00:05:53,610 Does this site accomplish its goal? 85 00:05:53,610 --> 00:05:57,490 It's easy to bring people down but it's hard to build them up. 86 00:05:57,490 --> 00:06:02,197 Before you give criticism to others people, you should practice a bit 87 00:06:02,197 --> 00:06:06,902 first and maybe ask others to critique your work to see what you like and 88 00:06:06,902 --> 00:06:09,247 don't like about what they said. 89 00:06:09,247 --> 00:06:13,630 Like anything, it's hard to get it right the first time, so keep practicing.