WEBVTT 1 00:00:00.120 --> 00:00:04.440 Welcome to the deep Dive. Today. We're tackling a really 2 00:00:04.440 --> 00:00:06.480 crucial area for anyone building on the web. 3 00:00:06.599 --> 00:00:09.359 Yeah, it's where design and development kind of meet right exactly. 4 00:00:09.880 --> 00:00:13.320 And our guide for this exploration is Stephanie Stomach's book 5 00:00:13.519 --> 00:00:16.120 Design for Developers, And this. 6 00:00:16.000 --> 00:00:22.440 Is really about recognizing that you design fundamentals user experience principles. 7 00:00:23.399 --> 00:00:26.559 They aren't just concepts for designers over there, they're actually 8 00:00:26.600 --> 00:00:29.320 core tools for developers, especially if you want to create 9 00:00:29.359 --> 00:00:32.159 websites that work well and frankly, people enjoy. 10 00:00:32.039 --> 00:00:35.399 Using absolutely and Stephanie's book it covers a huge range. 11 00:00:35.439 --> 00:00:37.880 You've got the basic rules of visual design, but then 12 00:00:37.880 --> 00:00:42.359 it goes right through to understanding users, even the technical 13 00:00:42.359 --> 00:00:43.439 side of design choices. 14 00:00:43.600 --> 00:00:44.960 Yeah, it's pre comprehensive. 15 00:00:45.039 --> 00:00:47.679 So we're here to pull out the really valuable insights, 16 00:00:47.719 --> 00:00:49.759 the stuff you can put to work right away. 17 00:00:49.880 --> 00:00:52.200 Our mission, let's say, for this deep dog is really 18 00:00:52.240 --> 00:00:56.600 to extract those key learnings, the actionable takeaways that developers, 19 00:00:56.600 --> 00:00:59.679 but really anyone involved in web projects can use pretty 20 00:00:59.759 --> 00:01:00.880 much immediately. 21 00:01:00.560 --> 00:01:02.439 To build better experiences, to. 22 00:01:02.439 --> 00:01:06.879 Build better user experiences exactly, and just more effective websites overall. 23 00:01:07.280 --> 00:01:10.359 Okay, let's dive right into those visual design fundamentals. Then 24 00:01:10.799 --> 00:01:15.920 the book outlines five key principles. First up, proximity. What's 25 00:01:16.000 --> 00:01:17.719 the core idea there? 26 00:01:17.879 --> 00:01:23.159 Proximity is fundamentally about creating visual relationships. It's how you group. 27 00:01:23.000 --> 00:01:25.280 Things, grouping related things together right. 28 00:01:25.280 --> 00:01:29.519 And separating unrelated things. By doing that strategically, you're doing 29 00:01:29.560 --> 00:01:32.319 more than just like tiding up. You're creating these visual 30 00:01:32.719 --> 00:01:36.760 chunks of information. Ah okay, So think about navigation buttons. 31 00:01:36.920 --> 00:01:40.000 If they're all just jammed together without clear spacing, the 32 00:01:40.079 --> 00:01:43.840 user has to work harder right to figure out what's 33 00:01:43.879 --> 00:01:44.359 what right. 34 00:01:44.400 --> 00:01:47.640 It's about making those connections instantly obvious, and the flip side, 35 00:01:48.319 --> 00:01:51.159 not enough proximity that can be overwhelming, can it totally? 36 00:01:51.239 --> 00:01:53.719 The book has this example web hint dot io, where 37 00:01:53.760 --> 00:01:56.560 it's just this dense block of text, a wall of text. 38 00:01:56.640 --> 00:01:57.799 Yeah, I remember that image. 39 00:01:57.840 --> 00:02:00.640 It becomes a barrier, hard to scan, hard to know 40 00:02:00.680 --> 00:02:04.640 what's important when elements aren't grouped logically, it just undermines everything, 41 00:02:04.680 --> 00:02:05.719 makes it tough for users. 42 00:02:05.959 --> 00:02:09.919 Okay, makes sense. Next up is alignment. Why is consistent 43 00:02:09.960 --> 00:02:12.360 alignment such a well a cornerstone? 44 00:02:12.520 --> 00:02:14.639 Alignment is kind of a silent organizer. 45 00:02:15.159 --> 00:02:16.000 Hmm I like that. 46 00:02:16.080 --> 00:02:20.280 It creates these strong, often invisible lines that anchor your content. 47 00:02:20.560 --> 00:02:23.639 It makes everything feel structured, easy to follow. There's an 48 00:02:23.639 --> 00:02:25.680 image showing bounding boxes, right. 49 00:02:25.840 --> 00:02:26.639 I saw that one. 50 00:02:26.759 --> 00:02:30.560 Even subtle alignment creates the sense of order underneath it all, 51 00:02:30.599 --> 00:02:33.719 and that really helps readability. And you know what's interesting 52 00:02:33.759 --> 00:02:36.879 is how that visual order impacts perception, Like does this 53 00:02:37.000 --> 00:02:38.960 site look professional? Trustworthy? 54 00:02:39.080 --> 00:02:41.879 A good point? Random placement feels sloppy. 55 00:02:41.639 --> 00:02:44.960 It can erode confidence. Yeah, and from a dev perspective, 56 00:02:45.400 --> 00:02:49.240 a clear alignment grid often makes the CSS simpler, more maintainable. 57 00:02:49.240 --> 00:02:52.680 Code always a bonus. Okay, let's talk repetition. Sound simple, 58 00:02:52.759 --> 00:02:55.800 just repeat stuff, but what are the real benefits and 59 00:02:56.280 --> 00:02:57.240 maybe the downsides. 60 00:02:57.400 --> 00:03:01.759 Repetition is super powerful for consistency and reinforcing the brand. 61 00:03:01.840 --> 00:03:03.960 So using the same colors, fonts. 62 00:03:03.599 --> 00:03:07.240 Exactly UI components too throughout the site. There's an example 63 00:03:07.280 --> 00:03:09.960 the IPSO website where there's style flows right onto their 64 00:03:10.000 --> 00:03:11.759 product packaging. It's seamless. 65 00:03:12.000 --> 00:03:14.639 And for developers this isn't just about looks, is it. 66 00:03:14.879 --> 00:03:16.159 There are practical. 67 00:03:15.719 --> 00:03:20.319 Wins here, definitely reusable components, reusable styles that means less 68 00:03:20.319 --> 00:03:22.560 code to right, less redundancy. 69 00:03:22.240 --> 00:03:23.919 Which means better performance. 70 00:03:24.879 --> 00:03:29.039 Faster loads directly impacts performance. Yeah, but you have to 71 00:03:29.039 --> 00:03:31.400 be careful. The lego example in the book shows that 72 00:03:31.599 --> 00:03:36.240 not all repetition is good repetition. Ah right, The inconsistent buttons, Yeah, 73 00:03:36.280 --> 00:03:39.599 different button styles for stock status. It forces users to 74 00:03:39.639 --> 00:03:43.000 stop and think. Okay, what does this one mean? Increases 75 00:03:43.039 --> 00:03:44.800 cognitive load instead of helping. 76 00:03:45.199 --> 00:03:50.520 So repetition needs to be consistent and meaningful. Got it. Next, contrast, 77 00:03:51.400 --> 00:03:54.319 the basic idea seems to be making important things stand 78 00:03:54.319 --> 00:03:55.080 out visually. 79 00:03:55.159 --> 00:03:57.960 That's pretty much the essence of it. Yeah, contrast creates 80 00:03:58.000 --> 00:04:00.719 visual hierarchy. It draws the US user's eye. 81 00:04:00.840 --> 00:04:03.120 Like making text readable over an image. 82 00:04:03.199 --> 00:04:04.680 That's a critical one. Absolutely. 83 00:04:04.919 --> 00:04:05.080 Yeah. 84 00:04:05.120 --> 00:04:07.800 The book shows an example where text over an image 85 00:04:07.800 --> 00:04:10.240 is hard to read. Not enough contrast, But it's not 86 00:04:10.360 --> 00:04:14.280 just about color. Stark color differences definitely create emphasis, but 87 00:04:14.360 --> 00:04:17.959 you can also get contrast from different shapes, like organic 88 00:04:18.040 --> 00:04:21.680 versus geometric shapes. The calge website example uses that. 89 00:04:21.639 --> 00:04:24.399 Effectively interesting, So it's a way to guide attention. Make 90 00:04:24.439 --> 00:04:28.040 sure crucial infos it missed. Okay, last one of the 91 00:04:28.079 --> 00:04:33.360 five balance? How does balance help the user experience? 92 00:04:34.040 --> 00:04:38.759 Balance is about distributing the visual weight in a design. 93 00:04:38.920 --> 00:04:42.240 When it's well balanced, it feels stable, comfortable. It lets 94 00:04:42.279 --> 00:04:45.199 the user process the content easily because their eye flows naturally. 95 00:04:45.279 --> 00:04:47.560 And they're different types, right, symmetrical. 96 00:04:47.040 --> 00:04:51.680 Symmetrical where elements are mirrored and asymmetrical. The book uses 97 00:04:51.720 --> 00:04:55.600 the Whitehead Institute's landing page as an example of asymmetrical balance. 98 00:04:55.720 --> 00:04:56.639 How do they achieve that? 99 00:04:56.720 --> 00:04:59.839 Through careful placement of elements with different sizes and colors. 100 00:05:00.120 --> 00:05:04.319 It's not mirrored, but it still feels visually stable and harmonious. 101 00:05:03.959 --> 00:05:07.439 Creating harmony even if it's not perfectly uniform. Okay, So, 102 00:05:07.680 --> 00:05:12.959 summing up these five fundamentals proximity, alignment, repetition, contrast, balance, 103 00:05:13.120 --> 00:05:14.079 what's the big takeaway? 104 00:05:14.360 --> 00:05:16.920 Well, they might seem like small details, but honestly they 105 00:05:16.920 --> 00:05:20.600 are what separates a mediocre design from a really well designed, 106 00:05:20.680 --> 00:05:25.839 polished one. The fundamentals exactly, and they rarely work in isolation. 107 00:05:26.199 --> 00:05:29.920 The best designs mix and match these principles strategically. It's 108 00:05:29.920 --> 00:05:33.120 like the basic grammar of visual communication. 109 00:05:32.720 --> 00:05:34.920 On the web. All right, let's shift gears a bit. 110 00:05:35.560 --> 00:05:39.800 Let's talk user experience UX. The book really stresses that 111 00:05:39.920 --> 00:05:42.279 UX is way more than just how a site looks. 112 00:05:42.319 --> 00:05:45.399 Oh. Absolutely, there's a figure that shows it perfectly. User 113 00:05:45.480 --> 00:05:49.079 experience is woven through the entire project life cycle. 114 00:05:48.879 --> 00:05:50.319 Not just the design phase. 115 00:05:50.279 --> 00:05:53.639 Not at all. It covers every single interaction a user has, 116 00:05:54.040 --> 00:05:56.680 from the business goals right down to the technical implementation. 117 00:05:57.000 --> 00:05:58.759 Even choices that seem purely. 118 00:05:58.480 --> 00:06:01.160 Techy, like the code stack or hosting. 119 00:06:00.920 --> 00:06:04.439 Precisely your back end framework, your build process you're hosting, 120 00:06:04.480 --> 00:06:07.600 those are UX decisions. A slow site is bad UX, 121 00:06:07.680 --> 00:06:08.920 no matter how pretty it is. 122 00:06:09.120 --> 00:06:12.120 That's a huge perspective shift for developers. I think our 123 00:06:12.199 --> 00:06:15.560 role is broadening. We need to understand and empathize with 124 00:06:15.639 --> 00:06:17.439 the actual users exactly. 125 00:06:17.519 --> 00:06:20.279 And the book then walks us through the UX research 126 00:06:20.279 --> 00:06:23.800 phase that's understanding user needs, and then the UX design phase, 127 00:06:23.839 --> 00:06:26.639 which is planning the structure and layout based on those needs. 128 00:06:26.680 --> 00:06:29.920 And it's not always linear, right, It's iterative, very iterative. 129 00:06:30.000 --> 00:06:33.279 Research, design, test, refine, rinse, and repeat. 130 00:06:33.480 --> 00:06:37.319 Okay, let's take into user research. The book warns strongly 131 00:06:37.399 --> 00:06:39.920 against just going with our gut feelings or assumptions. 132 00:06:40.399 --> 00:06:44.439 Yeah, assumptions are just not data. User research gives you 133 00:06:44.480 --> 00:06:47.879 the evidence you need to make smart decisions to build 134 00:06:47.959 --> 00:06:49.959 products people actually find useful. 135 00:06:50.199 --> 00:06:52.439 Avoids building features nobody wants. 136 00:06:52.519 --> 00:06:55.800 Saves a lot of wasted effort. Definitely, user research helps 137 00:06:55.800 --> 00:06:57.560 you avoid those costly mistakes. 138 00:06:57.800 --> 00:06:59.920 So how do we get this understanding? The book mentioned 139 00:07:00.120 --> 00:07:02.759 user personas? What are they? How do they help? 140 00:07:02.959 --> 00:07:06.160 User personas are basically fictional characters, but they're based on 141 00:07:06.199 --> 00:07:10.160 real research about your target users. They help build empathy. 142 00:07:09.959 --> 00:07:12.199 Giving a phase to the user kind. 143 00:07:11.959 --> 00:07:14.680 Of Yeah, it helps you ask how would Sarah use 144 00:07:14.759 --> 00:07:17.160 this instead of just how would a user use this? 145 00:07:17.240 --> 00:07:19.279 It makes it more concrete and to. 146 00:07:19.319 --> 00:07:23.879 Keep the research focused, there's the smart framework for goals. 147 00:07:23.639 --> 00:07:29.639 Yes, smart specific, measurable, actionable, relevant, and time bound or trackable. 148 00:07:29.759 --> 00:07:32.839 Sometimes it helps clarify both the business goals and what 149 00:07:32.879 --> 00:07:34.279 the user is trying to achieve. 150 00:07:34.720 --> 00:07:38.279 Like the retail side example, business wants conversions, user wants 151 00:07:38.279 --> 00:07:39.879 to buy something easily exactly. 152 00:07:39.920 --> 00:07:42.279 Aligning those goals guides the whole process. 153 00:07:42.839 --> 00:07:46.600 Now, research gathers different kinds of data, qualitative versus quantitative. 154 00:07:46.639 --> 00:07:47.720 What's the main difference there? 155 00:07:48.040 --> 00:07:56.040 Qualitative is the why it's non numerical stuff opinions, motivations, experiences, think, interviews, observations. Okay, 156 00:07:56.279 --> 00:08:01.079 Quantitative is the what it's numerical data. Analytics, survey results, 157 00:08:01.120 --> 00:08:04.519 completion rates, numbers right, and the book makes a great 158 00:08:04.519 --> 00:08:07.360 point you really need both. Combining them gives you the 159 00:08:07.399 --> 00:08:08.560 most complete picture. 160 00:08:08.800 --> 00:08:11.439 Makes sense. You meet the stories and the stats. The 161 00:08:11.439 --> 00:08:15.519 book also mentions this difference between user attitude and user behavior. 162 00:08:16.040 --> 00:08:16.800 What's that about? 163 00:08:16.879 --> 00:08:19.839 Oh, that's fascinating. What people say they do or will 164 00:08:19.839 --> 00:08:22.720 do their attitude isn't always what they actually do. 165 00:08:22.959 --> 00:08:25.240 Their behavior people say one thing, do another. 166 00:08:25.120 --> 00:08:29.040 Happens all the time. Studying both gives you much richer insights. 167 00:08:29.480 --> 00:08:31.600 Someone might say they love a feature in a survey, 168 00:08:32.039 --> 00:08:35.440 but the data shows they never click it. Understanding that 169 00:08:35.559 --> 00:08:36.720 gap is gold. 170 00:08:36.799 --> 00:08:41.159 Okay, let's get practical specific research methods. Card sorting sounds 171 00:08:41.240 --> 00:08:42.720 useful for organizing stuff. 172 00:08:42.759 --> 00:08:46.679 Card sorting is great for information architecture, basically understanding how 173 00:08:46.799 --> 00:08:48.080 users group information. 174 00:08:48.240 --> 00:08:51.000 Mentally, they're two types, open and closed. Yep. 175 00:08:51.279 --> 00:08:55.120 Open sort users group topics and create their own labels. 176 00:08:55.360 --> 00:08:59.039 Closed sort you give them topics and pre defined categories 177 00:08:59.039 --> 00:09:01.840 to sort into. It directly informs how you structure your 178 00:09:01.840 --> 00:09:03.960 sites navigation so it makes sense to users. 179 00:09:04.080 --> 00:09:07.120 Competitive analysis that's more than just peaking at competitor sites. 180 00:09:07.200 --> 00:09:12.559 Oh yeah, it's a systematic look visual design, content, userflows, navigation, usability, everything. 181 00:09:12.679 --> 00:09:13.159 What's the goal? 182 00:09:13.559 --> 00:09:17.120 Identify their strengths, their weaknesses, see what's working in the space. 183 00:09:17.559 --> 00:09:20.639 Find opportunities to make your product better or different. 184 00:09:20.559 --> 00:09:24.919 User interviews classic method. The book suggests about ten. 185 00:09:25.480 --> 00:09:28.360 Why that number, Well, there's no magic number. But around 186 00:09:28.399 --> 00:09:31.679 ten interviews you often start hearing the same things repeatedly. 187 00:09:32.200 --> 00:09:35.759 Patterns emerge, uh diminishing returns after a point. 188 00:09:35.639 --> 00:09:38.240 Kind of and the key is having clear goals for 189 00:09:38.320 --> 00:09:42.240 the interview and asking open ended questions, not leading questions 190 00:09:42.240 --> 00:09:43.279 that suggest an answer. 191 00:09:43.440 --> 00:09:47.799 Right. Let people talk Surveys Everyone knows surveys how to 192 00:09:47.799 --> 00:09:49.639 make them effective for UX research. 193 00:09:49.840 --> 00:09:54.600 Good surveys need planning, clear, concise questions, no jorgan relevant 194 00:09:54.600 --> 00:09:55.519 to your goals. 195 00:09:55.440 --> 00:09:57.240 And you can target different user groups. 196 00:09:57.279 --> 00:10:02.159 Definitely. Segmenting surveys helps get more specific and mixing question types, 197 00:10:02.240 --> 00:10:05.600 rating scales plus open ended questions gives you both quantitative 198 00:10:05.679 --> 00:10:07.120 and qualitative feedback. 199 00:10:07.399 --> 00:10:11.600 Usability studies, yeah, these seem critical for finding problems before launch. 200 00:10:11.720 --> 00:10:14.440 They really are. You watch real users try to complete 201 00:10:14.480 --> 00:10:16.159 tasks on your site or prototype. 202 00:10:16.279 --> 00:10:18.279 See where they stumble exactly. 203 00:10:17.879 --> 00:10:21.799 You spot confusion, frustration, inefficiency that you might miss otherwise, 204 00:10:22.320 --> 00:10:25.039 catching these early saves so much time and money compared 205 00:10:25.080 --> 00:10:26.440 to fixing them after launch. 206 00:10:26.480 --> 00:10:29.279 It makes total sense. And the book also mentions informal 207 00:10:29.279 --> 00:10:32.120 stuff like feedback forms or checking social media. 208 00:10:32.240 --> 00:10:35.720 Yeah, those are valuable too. They provide this ongoing stream 209 00:10:35.759 --> 00:10:40.039 of feedback, maybe less structured, but good for quick insights, 210 00:10:40.240 --> 00:10:43.840 spotting trends, finding bugs. Think of them as always on 211 00:10:43.960 --> 00:10:44.799 listening posts. 212 00:10:45.159 --> 00:10:47.360 So user research isn't a one off task. 213 00:10:47.639 --> 00:10:50.480 It's ongoing, integral to the whole life cycle. 214 00:10:50.759 --> 00:10:56.480 Definitely, Okay, research done now. UX Design Information Architecture IA 215 00:10:56.679 --> 00:11:00.960 is the foundation. The book says, what is IA exactly? 216 00:11:01.000 --> 00:11:01.960 Why is it so vital? 217 00:11:02.360 --> 00:11:06.440 I is basically the blueprint, the structure, how everything's organized. 218 00:11:06.039 --> 00:11:07.240 Like the map of the website. 219 00:11:07.279 --> 00:11:09.120 That's a good way to think about it. It ensures 220 00:11:09.200 --> 00:11:12.799 users can find stuff, easily navigate, logically complete tasks without 221 00:11:12.840 --> 00:11:15.879 getting lost or annoyed. It's fundamental for usability. 222 00:11:16.000 --> 00:11:19.879 And how do we document this site maps and content inventory. 223 00:11:20.080 --> 00:11:23.519 Yeah, a site map is that visual hierarchy diagram shows 224 00:11:23.559 --> 00:11:26.639 the pages and how they connect. Often informs the main navigation. 225 00:11:26.799 --> 00:11:29.080 But navigation isn't just a site map, right. 226 00:11:28.919 --> 00:11:32.600 You often need secondary navigation breadcrumbs. Especially on bigger sites. 227 00:11:33.039 --> 00:11:35.720 A content inventory is different. It's a big list, usually 228 00:11:35.759 --> 00:11:38.159 a spreadsheet of all your content, let's say, useful for 229 00:11:38.559 --> 00:11:41.960 huge for redesigns knowing what you have, but also for 230 00:11:42.080 --> 00:11:44.879 new projects planning what content you need. It gives you 231 00:11:44.919 --> 00:11:45.879 a clear overview. 232 00:11:46.159 --> 00:11:48.159 User flows? What do they help us? Visualize? 233 00:11:48.360 --> 00:11:51.159 User flows map out the steps a user takes to 234 00:11:51.200 --> 00:11:55.360 do something specific like buying a product, signing up like 235 00:11:55.399 --> 00:11:59.200 a Floir chart can be yeah, simple or complex. The 236 00:11:59.240 --> 00:12:01.679 great thing is they focus on the steps the interaction 237 00:12:01.840 --> 00:12:03.960 before you get caught up in how it looks good 238 00:12:04.000 --> 00:12:05.759 for early discussions with stakeholders. 239 00:12:05.799 --> 00:12:08.120 And then user journeys. How are they different from flows? 240 00:12:08.320 --> 00:12:11.120 Flows are the what the actions. Journeys are more the 241 00:12:11.279 --> 00:12:14.600 how and why. They consider the user's feelings, their emotions, 242 00:12:14.720 --> 00:12:18.639 potential pain points along the way, ah, more empathetic exactly. 243 00:12:18.919 --> 00:12:22.360 The university alumni example on the book talks about considering 244 00:12:22.360 --> 00:12:25.799 if the user is excited frustrated, how does that affect 245 00:12:25.840 --> 00:12:28.399 their experience? It helps you design for those emotions. 246 00:12:28.639 --> 00:12:33.080 Okay. Finally, in this UX design bit, the visual cycle wireframing, 247 00:12:33.279 --> 00:12:37.639 static visual design prototyping wireframing. First, why is that. 248 00:12:37.639 --> 00:12:42.159 So critical wireframes are the skeleton, pure structure, layout, content, hierarchy, 249 00:12:42.559 --> 00:12:44.000 no colors, no fancy fonts. 250 00:12:44.039 --> 00:12:45.399 Yet why strip all that out? 251 00:12:45.559 --> 00:12:49.799 It lets you focus explore layout options, quickly test the ia, 252 00:12:50.279 --> 00:12:53.200 get feedback on the core structure before you spend ages 253 00:12:53.240 --> 00:12:56.600 on visuals. You can do rough sketches or more detailed ones. 254 00:12:56.919 --> 00:12:59.360 Then comes static visual design. This is where it starts 255 00:12:59.360 --> 00:12:59.799 to look like. 256 00:12:59.720 --> 00:13:03.919 The pretty much you apply the brand's look and feel, colors, 257 00:13:04.000 --> 00:13:09.039 typography images onto that wireframe structure. These mockups show stakeholders 258 00:13:09.080 --> 00:13:11.440 what it will look like, essential for sign off, but 259 00:13:11.519 --> 00:13:14.440 it builds on the wireframe absolutely. It's mostly about the 260 00:13:14.440 --> 00:13:17.480 aesthetics at the stage, not changing the fundamental layout again 261 00:13:17.600 --> 00:13:17.919 and the. 262 00:13:17.879 --> 00:13:22.399 Final stage prototyping Why make it interactive. 263 00:13:21.960 --> 00:13:26.720 Prototyping brings it to life, creates interactive simulations. Low fidelity 264 00:13:26.840 --> 00:13:30.440 might just be clicking between wireframes to test navigation. 265 00:13:30.039 --> 00:13:32.320 Basics, and high fidelity, much more. 266 00:13:32.159 --> 00:13:37.080 Detailed mimics actual functionality lets you test usability much more realistically. 267 00:13:37.279 --> 00:13:41.600 The book really hammers this home prototyping finds usability problems. 268 00:13:41.120 --> 00:13:44.279 Early, cheaper to fix them than incode way cheaper. 269 00:13:44.480 --> 00:13:47.200 Skipping prototyping is a big risk seriously. 270 00:13:47.519 --> 00:13:51.879 Okay, let's move into web layout and responsiveness, crucial topic today. 271 00:13:52.360 --> 00:13:54.720 Designs have to work everywhere. 272 00:13:54.360 --> 00:13:58.360 Oh totally responsive web design isn't optional anymore, is just expected. 273 00:13:58.679 --> 00:14:03.679 Your site has to adapt grace desktop, tablet, phone different 274 00:14:03.720 --> 00:14:09.240 orientations too, consistent experience everywhere and user friendly, especially since 275 00:14:09.279 --> 00:14:11.759 mobile browsing often outstrips desktop. 276 00:14:11.840 --> 00:14:14.759 Now, the book talks about using a grid system. How 277 00:14:14.759 --> 00:14:16.200 does that help structure layouts? 278 00:14:16.320 --> 00:14:20.720 A grid gives you that underlying structure columns, rows, gutters 279 00:14:20.759 --> 00:14:24.639 the spaces between aligning content to the grid, creates consistency, 280 00:14:25.039 --> 00:14:26.159 order hierarchy. 281 00:14:26.320 --> 00:14:28.240 Common grids are like twelve columns for desktop. 282 00:14:28.320 --> 00:14:30.960 Yeah, twelve columns is common for desktop, often with container 283 00:14:31.000 --> 00:14:33.480 widths like nine hundred and sixty or twelve hundred pixels. 284 00:14:33.679 --> 00:14:36.759 Then it adapts down maybe eight columns for tablet, four for. 285 00:14:36.759 --> 00:14:39.120 Mobile, and CSS frameworks help implement. 286 00:14:39.159 --> 00:14:41.759 They make it much easier. Yeah. You can structure content 287 00:14:41.840 --> 00:14:44.840 based on those column divisions, usually using relative units like 288 00:14:44.879 --> 00:14:47.840 percentages or rems for flexibility. And there are common layout 289 00:14:47.879 --> 00:14:51.080 patterns for different content types. Yeah, some patterns have just 290 00:14:51.159 --> 00:14:55.759 proven effective over time. Single column for long text like articles, 291 00:14:56.200 --> 00:14:58.039 multi column gives more flexibility. 292 00:14:58.159 --> 00:14:59.000 Magazine layout. 293 00:14:59.159 --> 00:15:02.960 Yeah, that uses varied column widths for visual interest. Then 294 00:15:03.000 --> 00:15:04.759 you have the Z pattern en F pattern. 295 00:15:04.799 --> 00:15:07.639 Those describe how people scan pages exactly. 296 00:15:07.960 --> 00:15:10.600 Z pattern for less text heavy pages, F pattern for 297 00:15:10.639 --> 00:15:13.320 pages with lots of content. Knowing these helps you place 298 00:15:13.360 --> 00:15:15.759 important stuff where people actually look. 299 00:15:16.120 --> 00:15:19.120 White space or negative space. The book says, it's critical, 300 00:15:19.200 --> 00:15:20.639 it's not just empty space, is it? 301 00:15:21.000 --> 00:15:24.399 Definitely not? White space is an active design element. It's 302 00:15:24.519 --> 00:15:29.120 essential for readability, reducing clutter, gives content breathing room, right, 303 00:15:29.360 --> 00:15:32.960 helps define relationships between things, guides the eye. The book 304 00:15:33.000 --> 00:15:35.759 even mentions how to handle stakeholders who worry about too 305 00:15:35.840 --> 00:15:37.960 much white space. You need to explain its. 306 00:15:37.799 --> 00:15:40.879 Purpose, show the before and after maybe okay, specifically for 307 00:15:40.960 --> 00:15:43.679 responsive design, what are the key things to think about 308 00:15:43.679 --> 00:15:44.200 for mobile? 309 00:15:44.519 --> 00:15:48.159 Mobile first is often the mantra right, prioritize the most 310 00:15:48.200 --> 00:15:52.399 important content. For small screens, simplify navigation, make it touch friendly. 311 00:15:52.600 --> 00:15:57.279 Bigger buttons, Yeah, larger touch targets, break down complex tasks 312 00:15:57.320 --> 00:15:59.960 like check out into smaller steps, and keep the brain 313 00:16:00.080 --> 00:16:02.399 and consistent visually even on a small screen. 314 00:16:02.600 --> 00:16:05.240 The book even looks ahead a bit to multiscreen and 315 00:16:05.320 --> 00:16:06.200 foldable devices. 316 00:16:06.279 --> 00:16:09.440 Yeah, that's the next frontier using those unique screen setups 317 00:16:09.519 --> 00:16:13.080 like the recipe example ingredients on one screen, instructions on 318 00:16:13.120 --> 00:16:13.440 the other. 319 00:16:13.600 --> 00:16:15.440 Cool. Still experimental though. 320 00:16:15.240 --> 00:16:18.080 The APIs were still evolving. Yeah, but it shows how 321 00:16:18.120 --> 00:16:19.840 responsive design keeps adapting. 322 00:16:20.000 --> 00:16:24.600 So key takeaways for a layout, choice patterns based on content, 323 00:16:25.200 --> 00:16:28.840 embrace white space, prioritize mobile, keep it consistent. 324 00:16:29.080 --> 00:16:33.120 That's a great summary. Adaptable user centered experiences, whatever the device. 325 00:16:33.279 --> 00:16:35.279 Now, let's talk animation in the UI. It can be 326 00:16:35.360 --> 00:16:37.039 more than just decoration, right. 327 00:16:36.960 --> 00:16:41.120 Oh, definitely use thoughtfully. Animation really enhances the UX. It 328 00:16:41.159 --> 00:16:44.000 can give feedback on interactions like when you click a 329 00:16:44.039 --> 00:16:48.559 button exactly, or guide users through transitions between pages, indicate 330 00:16:48.679 --> 00:16:52.600 status like loading bars, and yeah, sometimes just add a 331 00:16:52.639 --> 00:16:55.080 bit of delight like that Yetti login form example. 332 00:16:55.159 --> 00:16:57.919 The book does mention using animation just for decoration too, 333 00:16:58.080 --> 00:16:59.279 to evoke emotion. 334 00:16:59.240 --> 00:17:02.440 Yeah, tastefully done. It can create engagement like the retailer's 335 00:17:02.519 --> 00:17:06.400 Christmas lights example, creates a mood, connects emotionally, and. 336 00:17:06.359 --> 00:17:09.920 For navigation, animations can make transitions feel smoother. 337 00:17:10.200 --> 00:17:14.920 Absolutely, animated transitions like expanding a hotel listing help users 338 00:17:15.000 --> 00:17:18.920 understand the flow. Reduces that jarring feeling of suddenly being 339 00:17:19.000 --> 00:17:19.759 somewhere else. 340 00:17:19.680 --> 00:17:23.599 Makes it feel more connected and practical uses like progress 341 00:17:23.599 --> 00:17:26.319 indicators the Pizza tracker classic example. 342 00:17:26.640 --> 00:17:31.079 Functional animation keeps users informed and manages expectations while they wait. 343 00:17:31.119 --> 00:17:34.640 But there's a warning too, don't overdo it. What are 344 00:17:34.640 --> 00:17:36.480 the downsides of bad animation? 345 00:17:36.960 --> 00:17:39.079 Oh, it can be really distracting, slow down the site, 346 00:17:39.160 --> 00:17:43.160 use more data, annoy users, especially animations that get in 347 00:17:43.200 --> 00:17:43.680 the way. 348 00:17:43.559 --> 00:17:45.640 Or last too long, and accessibility issues. 349 00:17:45.680 --> 00:17:49.000 Big time animations can be harmful for people with photosensitivity, 350 00:17:49.079 --> 00:17:52.440 and just generally frustrating if they interfere with interaction. 351 00:17:52.160 --> 00:17:56.160 So planning is key. The book mentions storyboarding animations. 352 00:17:56.240 --> 00:17:59.000 Yeah, storyboarding is like a visual plan. Sketch out the 353 00:17:59.039 --> 00:18:02.519 states the transition like the button Hoover example, helps you 354 00:18:02.559 --> 00:18:05.279 clarify the purpose and behavior before coding. 355 00:18:05.079 --> 00:18:07.799 And technical performance is a factor huge factor. 356 00:18:08.200 --> 00:18:11.920 Badly coded animations kill performance slows everything down. 357 00:18:12.079 --> 00:18:15.799 Plus accessibility again wc CAG guidelines right. 358 00:18:15.920 --> 00:18:19.839 Need ways to pause, stop or hide non essential animations, 359 00:18:20.319 --> 00:18:24.119 and crucially respect the user's reduced motion setting in their os. 360 00:18:24.319 --> 00:18:29.640 Okay, switching gears again. Typography and color two massive elements 361 00:18:29.640 --> 00:18:34.000 for look, feel, usability. Let's start with typography. That distinction 362 00:18:34.359 --> 00:18:36.079 type pace versus font. 363 00:18:35.880 --> 00:18:39.480 Yeah, important, baseline typeface is the design family like Helvetica 364 00:18:39.519 --> 00:18:42.559 font is a specific variation Elvetica Bowl twelve point. 365 00:18:42.640 --> 00:18:44.440 And for the web, readability. 366 00:18:43.960 --> 00:18:47.480 Is king absolutely, especially for body text serif fonts. The 367 00:18:47.480 --> 00:18:49.960 ones with little strokes are often seen as good for 368 00:18:50.039 --> 00:18:54.000 long reading. Sans serif without strokes feel cleaner, more modern. 369 00:18:54.079 --> 00:18:57.559 Usually the book mentions different classifications of the feelings they evoke. 370 00:18:57.839 --> 00:19:02.279 Right series can feel traditional authority, cittative sensors, more contemporary, 371 00:19:02.400 --> 00:19:06.720 approachable scripts, ad personality, but use sparingly. Readability can suffer 372 00:19:07.240 --> 00:19:09.880 decorative fonts really just for headlines, logos. 373 00:19:09.519 --> 00:19:11.599 Maybe and creating hierarchy with type. How do we do that? 374 00:19:11.920 --> 00:19:15.240 Size and weight are your main tools? Bigger boulder headings 375 00:19:15.279 --> 00:19:19.680 signal importance compared to body text, simple but effective and using. 376 00:19:19.559 --> 00:19:22.480 The right HTML tax strong M. 377 00:19:22.680 --> 00:19:26.559 Yes, semantic markup strong for importance, M for emphasis. It's 378 00:19:26.640 --> 00:19:29.480 visual but also tells a syste of tech what's going on? 379 00:19:29.759 --> 00:19:31.119 Good for accessibility? 380 00:19:31.480 --> 00:19:34.119 Choosing web fonts involves more than just looks though. 381 00:19:34.319 --> 00:19:39.200 Performance oh yeah, readability legibility on screen definitely, but performance 382 00:19:39.279 --> 00:19:43.119 is huge every font family. Every weight you add increases 383 00:19:43.160 --> 00:19:44.200 load time, so limit them. 384 00:19:44.319 --> 00:19:46.799 Fun pairing is mentioned too, Combining fonts Yeah. 385 00:19:46.839 --> 00:19:49.680 Strategically pairing type faces maybe a serif headline with a 386 00:19:49.720 --> 00:19:53.279 sans serif body, adds interest and reinforces hierarchy. The book 387 00:19:53.319 --> 00:19:56.119 shows good examples. Contrast is often key. 388 00:19:56.039 --> 00:20:00.279 And font sizing relative units like REM vertical rhythm. 389 00:20:00.480 --> 00:20:03.839 Using relative units like REM makes typography more flexible for 390 00:20:03.920 --> 00:20:07.599 responsive design. Establishing a type scale a set of harmonious 391 00:20:07.599 --> 00:20:11.039 sizes based on your body text creates consistency. Vertical rhythm 392 00:20:11.119 --> 00:20:14.440 is about consistent line spacing. Using line height makes text 393 00:20:14.559 --> 00:20:15.119 flow better. 394 00:20:15.279 --> 00:20:17.880 Okay, let's talk color. The color wheel is fundamental here. 395 00:20:18.039 --> 00:20:22.640 Absolutely Understanding color relationships via the wheel helps create balanced 396 00:20:22.680 --> 00:20:27.839 palettes and color hugely impacts emotion, perception brand. The Veteran 397 00:20:27.880 --> 00:20:30.720 website example showed how color choice resonates. 398 00:20:30.440 --> 00:20:34.359 Their's specific terminology. H saturation lightness Yeah. 399 00:20:34.759 --> 00:20:38.640 H is the pure color, red blue, saturation is its intensity. 400 00:20:38.720 --> 00:20:41.200 Vivid or muted. Lightness is how light or dark it 401 00:20:41.279 --> 00:20:44.920