title
Design + Code – Hour 2: Wireframing

description
Today we go low-fi and spend some time sketching in our notebooks. Let's take the concepts and content strategy we developed in the last video and look at a few options for a design that will bring that content to life. This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

detail
{'title': 'Design + Code – Hour 2: Wireframing', 'heatmap': [{'end': 235.161, 'start': 211.014, 'weight': 0.739}, {'end': 503.409, 'start': 442.117, 'weight': 0.824}], 'summary': "Covers the importance of discovery process in design, wireframing techniques, web design concepts, call to action significance, travis's brand redesign, content strategy planning, and optimizing website and iterative design.", 'chapters': [{'end': 336.294, 'segs': [{'end': 63.641, 'src': 'embed', 'start': 26.121, 'weight': 0, 'content': [{'end': 34.524, 'text': 'I think the discovery process is kind of the most important part of designing right?', 'start': 26.121, 'duration': 8.403}, {'end': 45.661, 'text': "When you think of a designer, you probably think of somebody who's good at making beautiful things or making even usable things right?", 'start': 35.105, 'duration': 10.556}, {'end': 50.289, 'text': "But that's actually not the case, right?", 'start': 47.927, 'duration': 2.362}, {'end': 61.039, 'text': 'The difference between a good designer and a great designer is can they think?', 'start': 51.45, 'duration': 9.589}, {'end': 63.641, 'text': 'Can they think about the problem??', 'start': 62, 'duration': 1.641}], 'summary': 'Discovery process is crucial in design. good vs. great designer depends on problem-solving ability.', 'duration': 37.52, 'max_score': 26.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo26121.jpg'}, {'end': 145.298, 'src': 'embed', 'start': 116.772, 'weight': 2, 'content': [{'end': 126.938, 'text': 'The designer has identified, like we did in our last video, the designer has identified who is the owner, the client, the owner of the project.', 'start': 116.772, 'duration': 10.166}, {'end': 132.293, 'text': "and they've identified who is the audience of the project.", 'start': 128.612, 'duration': 3.681}, {'end': 143.517, 'text': 'And having these two identifications, they can then determine what is important to each of those parties and then then,', 'start': 133.254, 'duration': 10.263}, {'end': 145.298, 'text': 'after through all that discovery,', 'start': 143.517, 'duration': 1.781}], 'summary': 'Designer identified project owner, client, and audience for project analysis.', 'duration': 28.526, 'max_score': 116.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo116772.jpg'}, {'end': 249.432, 'src': 'heatmap', 'start': 211.014, 'weight': 1, 'content': [{'end': 215.379, 'text': 'but I generally tend to stay away from digital wireframes entirely.', 'start': 211.014, 'duration': 4.365}, {'end': 218.963, 'text': "I have a really strong distaste for them, but maybe that's just me.", 'start': 215.639, 'duration': 3.324}, {'end': 227.673, 'text': "The purpose of my wireframes are to give myself a good direction for the experience that my visitors will have when they're visiting my website.", 'start': 219.243, 'duration': 8.43}, {'end': 235.161, 'text': "Now, because I'm in charge of the copywriting and the visual design, I can take all these three elements right the content, the UI,", 'start': 227.833, 'duration': 7.328}, {'end': 238.604, 'text': 'the visual design and build them up all together in tandem.', 'start': 235.161, 'duration': 3.443}, {'end': 243.009, 'text': 'Because I really feel that they start to inform each other as you go.', 'start': 238.644, 'duration': 4.365}, {'end': 245.031, 'text': "And I think that's a big benefit that we have.", 'start': 243.109, 'duration': 1.922}, {'end': 249.432, 'text': "In your project, if you're not responsible for everything, you may not want to do it this way.", 'start': 245.351, 'duration': 4.081}], 'summary': 'Prefers creating wireframes for website experience, integrating content, ui, and visual design together for better synergy and informed decisions.', 'duration': 38.418, 'max_score': 211.014, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo211014.jpg'}], 'start': 0.149, 'title': 'Discovery process & wireframing', 'summary': 'Emphasizes the importance of discovery process in designing, highlights the role of problem-solving before visual work, and covers wireframing and integrating content, ui, and visual design for a cohesive user experience.', 'chapters': [{'end': 336.294, 'start': 0.149, 'title': 'Remaking personal website: discovery process & wireframing', 'summary': 'Discusses the importance of discovery process in designing and emphasizes the role of thinking through the problem before visual and ui work. it also covers the process of wireframing and the approach of integrating content, ui, and visual design simultaneously for a cohesive user experience.', 'duration': 336.145, 'highlights': ['The importance of the discovery process in designing is emphasized, highlighting the role of thinking through the problem before visual and UI work, differentiating a good designer from a great one. ', 'The process of wireframing is discussed, emphasizing the approach of integrating content, UI, and visual design simultaneously for a cohesive user experience. ', "The content strategy is reviewed, and the identification of the project's owner and audience is highlighted as crucial for determining the important aspects for both parties. "]}], 'duration': 336.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo149.jpg', 'highlights': ['Emphasizes the importance of discovery process in designing, highlighting the role of problem-solving before visual work', 'Covers wireframing and integrating content, UI, and visual design for a cohesive user experience', "Reviews content strategy and emphasizes the identification of project's owner and audience as crucial"]}, {'end': 491.46, 'segs': [{'end': 364.336, 'src': 'embed', 'start': 336.595, 'weight': 0, 'content': [{'end': 339.217, 'text': "Right? So that's very, very important to keep in mind.", 'start': 336.595, 'duration': 2.622}, {'end': 341.53, 'text': "Now I'm going to start wireframing on the right side.", 'start': 339.73, 'duration': 1.8}, {'end': 343.451, 'text': 'Now you notice that my notebook is really small.', 'start': 341.57, 'duration': 1.881}, {'end': 344.991, 'text': "It's just a little small guy right here.", 'start': 343.491, 'duration': 1.5}, {'end': 347.792, 'text': "And I'm not using a big, fat, heavy marker.", 'start': 345.551, 'duration': 2.241}, {'end': 355.274, 'text': 'Some people like to use those fat markers and whole sheets of paper and make really big wireframes.', 'start': 349.172, 'duration': 6.102}, {'end': 364.336, 'text': 'But personally, and this is just me, you guys can do whatever you like, but I feel more comfortable making these small little thumbnail drawings.', 'start': 355.334, 'duration': 9.002}], 'summary': 'Emphasizing importance of small wireframes for comfort and efficiency.', 'duration': 27.741, 'max_score': 336.595, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo336595.jpg'}, {'end': 406.753, 'src': 'embed', 'start': 378.174, 'weight': 1, 'content': [{'end': 379.994, 'text': 'We have nine different content types.', 'start': 378.174, 'duration': 1.82}, {'end': 384.255, 'text': "And I'm certain that I want this to work on mobile as well.", 'start': 380.654, 'duration': 3.601}, {'end': 385.695, 'text': "So I'll just start right there.", 'start': 384.295, 'duration': 1.4}, {'end': 392.977, 'text': "Usually when I'm doing a web layout, I'll just draw three parts of a rectangle.", 'start': 386.376, 'duration': 6.601}, {'end': 399.969, 'text': "And I used to draw, I've explained this before, I used to draw the bottom rectangle, but I don't do that anymore.", 'start': 395.287, 'duration': 4.682}, {'end': 402.791, 'text': 'And the reason is the websites.', 'start': 400.409, 'duration': 2.382}, {'end': 405.712, 'text': 'you know, websites that we design these days are infinitely long, right?', 'start': 402.791, 'duration': 2.921}, {'end': 406.753, 'text': "So I'm gonna run.", 'start': 405.892, 'duration': 0.861}], 'summary': 'Nine content types, focus on mobile, adaptable web layouts for modern websites.', 'duration': 28.579, 'max_score': 378.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo378174.jpg'}, {'end': 491.46, 'src': 'embed', 'start': 460.294, 'weight': 2, 'content': [{'end': 466.727, 'text': "Like maybe it's a, In the case of the articles, it would be like a few articles and then like a see more button or something.", 'start': 460.294, 'duration': 6.433}, {'end': 471.068, 'text': 'In the case of the design, it would be a few thumbnails, whatever, just moving along.', 'start': 467.307, 'duration': 3.761}, {'end': 472.229, 'text': 'The next one.', 'start': 471.609, 'duration': 0.62}, {'end': 475.59, 'text': 'how about we take,', 'start': 472.229, 'duration': 3.361}, {'end': 491.46, 'text': "let's do the same three-sided rectangle and we'll throw the logo up in the corner and we'll have a menu that's of the hamburger style.", 'start': 475.59, 'duration': 15.87}], 'summary': 'Discussing website layout options, including articles, design, and menu style.', 'duration': 31.166, 'max_score': 460.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo460294.jpg'}], 'start': 336.595, 'title': 'Wireframing techniques', 'summary': 'Emphasizes small, quick wireframe drawings, consideration of different content types, and use of a three-part rectangle layout for web design, emphasizing adaptability to mobile devices.', 'chapters': [{'end': 491.46, 'start': 336.595, 'title': 'Wireframing techniques and considerations', 'summary': 'Highlights the importance of small, quick wireframe drawings, the consideration of different content types, and the use of a three-part rectangle layout for web design, emphasizing the need for adaptability to mobile devices.', 'duration': 154.865, 'highlights': ['The importance of making small, quick wireframe drawings to avoid focusing on details and to enable the consideration of various content types (e.g., nine different content types) and mobile adaptability.', 'The use of a three-part rectangle layout for web design, emphasizing adaptability to infinitely long websites and the placement of key elements like logos and menus.', 'The consideration of interactive elements in the wireframe, such as different colored boxes with animations and rollover effects to reveal content, tailored to specific content types like articles and design.']}], 'duration': 154.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo336595.jpg', 'highlights': ['The importance of making small, quick wireframe drawings to enable consideration of various content types and mobile adaptability.', 'The use of a three-part rectangle layout for web design, emphasizing adaptability to infinitely long websites and the placement of key elements.', 'The consideration of interactive elements in the wireframe, tailored to specific content types like articles and design.']}, {'end': 799.693, 'segs': [{'end': 518.121, 'src': 'embed', 'start': 491.921, 'weight': 0, 'content': [{'end': 500.207, 'text': 'And this would be interesting, actually, if we did a full header video, because I happen to know a little tiny bit about video production.', 'start': 491.921, 'duration': 8.286}, {'end': 503.409, 'text': "That's a skill that I've gained in the past year.", 'start': 501.188, 'duration': 2.221}, {'end': 508.573, 'text': 'And then I could still do this kind of grid.', 'start': 503.99, 'duration': 4.583}, {'end': 514.398, 'text': 'but it would be also an interesting idea if we could mix it up a little bit more and kind of do it asymmetrically.', 'start': 508.573, 'duration': 5.825}, {'end': 518.121, 'text': 'So maybe this is the about.', 'start': 516.62, 'duration': 1.501}], 'summary': 'Proposing an asymmetric video format, leveraging video production skills gained in the past year.', 'duration': 26.2, 'max_score': 491.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo491921.jpg'}, {'end': 586.171, 'src': 'embed', 'start': 551.691, 'weight': 1, 'content': [{'end': 552.452, 'text': "So let's do another.", 'start': 551.691, 'duration': 0.761}, {'end': 563.107, 'text': 'Three-sided rectangle and I like that big video but instead of doing This this like really slab heavy boxes.', 'start': 554.121, 'duration': 8.986}, {'end': 574.475, 'text': 'We could architect the design of the content down here to be a little bit more Conventional, right, like, maybe like you would see at a, at an agency,', 'start': 563.608, 'duration': 10.867}, {'end': 578.258, 'text': "right where they'd have like The three hero right?", 'start': 574.475, 'duration': 3.783}, {'end': 586.171, 'text': "This is about, And there's like a text box there.", 'start': 581.7, 'duration': 4.471}], 'summary': 'Proposing a more conventional design with a three-hero layout and additional text box.', 'duration': 34.48, 'max_score': 551.691, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo551691.jpg'}, {'end': 696.716, 'src': 'embed', 'start': 615.429, 'weight': 2, 'content': [{'end': 624.316, 'text': 'So what about if it was like about me and then teaching and then like those different ones here, like links to different pages or something.', 'start': 615.429, 'duration': 8.887}, {'end': 626.478, 'text': 'And then design.', 'start': 625.037, 'duration': 1.441}, {'end': 635.265, 'text': "And that's like maybe like a grid or something like a gallery type of thing.", 'start': 629.3, 'duration': 5.965}, {'end': 640.61, 'text': 'And then a big contact button or something.', 'start': 635.385, 'duration': 5.225}, {'end': 643.284, 'text': 'maybe a form.', 'start': 642.523, 'duration': 0.761}, {'end': 644.865, 'text': "That's kind of cool.", 'start': 644.305, 'duration': 0.56}, {'end': 662.023, 'text': "Hmm All right, let's go a little bit more avant-garde and we'll say big huge block.", 'start': 644.885, 'duration': 17.138}, {'end': 688.588, 'text': "so it's like really heavy set text right at the top and maybe it's going to be like this huge content area which could be images,", 'start': 677.057, 'duration': 11.531}, {'end': 696.716, 'text': "it could be like copywriting, but then we're going to have a navigation off to the left of that.", 'start': 688.588, 'duration': 8.128}], 'summary': 'Consider a website layout with links, grid design, gallery, contact button, form, and avant-garde heavy set text with navigation.', 'duration': 81.287, 'max_score': 615.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo615429.jpg'}, {'end': 762.382, 'src': 'embed', 'start': 726.659, 'weight': 5, 'content': [{'end': 729.561, 'text': 'I love those three corner rectangles.', 'start': 726.659, 'duration': 2.902}, {'end': 733.741, 'text': "Here's a really interesting idea.", 'start': 732.36, 'duration': 1.381}, {'end': 736.802, 'text': 'What if it was like a big splash image?', 'start': 733.781, 'duration': 3.021}, {'end': 744.146, 'text': 'and then we had these kind of angles coming down, but out of the angles was okay.', 'start': 736.802, 'duration': 7.344}, {'end': 747.608, 'text': "here's a logo and then the splash image is behind it.", 'start': 744.146, 'duration': 3.462}, {'end': 762.382, 'text': "It's kind of like ghosted or tinted, but then out of the angle, maybe like shooting at an interesting direction are like navigational items.", 'start': 747.688, 'duration': 14.694}], 'summary': 'Suggests a design concept with a splash image, logo, and navigational items.', 'duration': 35.723, 'max_score': 726.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo726659.jpg'}], 'start': 491.921, 'title': 'Web design concepts', 'summary': 'Presents a proposal for a web design incorporating video production, grid layout, and autoplay videos, as well as discusses creative web design ideas such as grid layout, big content area, and splash image for an avant-garde and interactive website.', 'chapters': [{'end': 586.171, 'start': 491.921, 'title': 'Web design video proposal', 'summary': 'Presents a proposal for a web design showcasing a mix of video production and grid layout to create an asymmetrical and unconventional design, with the inclusion of autoplay videos and text boxes, possibly for youtube and mentoring content.', 'duration': 94.25, 'highlights': ['The proposal involves incorporating video production skills to create an asymmetrical and unconventional web design, with the possibility of featuring autoplay videos and text boxes for YouTube and mentoring content.', 'The speaker suggests using a mix of grid layout and asymmetric design for the web page, possibly including a ghosted image with a play button and a personalized video introduction.', "The idea of using a three-sided rectangle for a big video is favored, with consideration for a more conventional design approach for the lower content section, resembling that of an agency's layout."]}, {'end': 799.693, 'start': 587.231, 'title': 'Web design ideation', 'summary': 'Discusses various creative web design ideas including grid layout, big content area, navigation, and splash image with navigational items, aiming to create an avant-garde and interactive website.', 'duration': 212.462, 'highlights': ['The chapter discusses an avant-garde web design idea featuring a big heavy block, possibly containing images or copywriting, with a navigation on the left, aiming to create a stand-out visual effect and interactive content.', 'A creative web design idea involving a big splash image with angled navigational items, which slide out when hovered over, creating an interactive and dynamic user experience.', 'The concept of integrating teaching, professional work, links to different pages, design elements like grid layout, and a contact button, to create a comprehensive and engaging website.']}], 'duration': 307.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo491921.jpg', 'highlights': ['The proposal involves incorporating video production skills to create an asymmetrical and unconventional web design, with the possibility of featuring autoplay videos and text boxes for YouTube and mentoring content.', "The idea of using a three-sided rectangle for a big video is favored, with consideration for a more conventional design approach for the lower content section, resembling that of an agency's layout.", 'The speaker suggests using a mix of grid layout and asymmetric design for the web page, possibly including a ghosted image with a play button and a personalized video introduction.', 'The chapter discusses an avant-garde web design idea featuring a big heavy block, possibly containing images or copywriting, with a navigation on the left, aiming to create a stand-out visual effect and interactive content.', 'The concept of integrating teaching, professional work, links to different pages, design elements like grid layout, and a contact button, to create a comprehensive and engaging website.', 'A creative web design idea involving a big splash image with angled navigational items, which slide out when hovered over, creating an interactive and dynamic user experience.']}, {'end': 1075.874, 'segs': [{'end': 851.007, 'src': 'embed', 'start': 800.173, 'weight': 0, 'content': [{'end': 804.314, 'text': 'You know, like this kind of maybe it has a heavier shadow or something like that.', 'start': 800.173, 'duration': 4.141}, {'end': 809.155, 'text': "And here's some content and then like a CTA here.", 'start': 804.334, 'duration': 4.821}, {'end': 815.89, 'text': 'A CTA This is a call to action.', 'start': 809.175, 'duration': 6.715}, {'end': 817.11, 'text': "That's what CTA means.", 'start': 815.93, 'duration': 1.18}, {'end': 822.212, 'text': 'A call to action is always going to be the most important thing on the page.', 'start': 817.77, 'duration': 4.442}, {'end': 825.694, 'text': 'A call to action is going to be a button.', 'start': 823.073, 'duration': 2.621}, {'end': 827.114, 'text': "It's going to be a submit form.", 'start': 825.854, 'duration': 1.26}, {'end': 828.355, 'text': "It's going to be a buy now.", 'start': 827.134, 'duration': 1.221}, {'end': 829.796, 'text': "It's going to be a contact me.", 'start': 828.435, 'duration': 1.361}, {'end': 833.517, 'text': "It's going to be that call that you give to people to perform an action.", 'start': 830.376, 'duration': 3.141}, {'end': 837.439, 'text': 'Every time you design a web page, you want them to do something with it right?', 'start': 834.017, 'duration': 3.422}, {'end': 843.722, 'text': "If you design a web page that they just visit and look at and then leave, well, you've lost the game.", 'start': 838.779, 'duration': 4.943}, {'end': 846.144, 'text': "That's a failure.", 'start': 844.063, 'duration': 2.081}, {'end': 851.007, 'text': 'So making space for these call to actions is pretty important.', 'start': 846.804, 'duration': 4.203}], 'summary': 'Cta (call to action) is crucial in web design, prompting users to take specific actions, like submitting forms or making purchases, to ensure engagement and success.', 'duration': 50.834, 'max_score': 800.173, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo800173.jpg'}, {'end': 935.248, 'src': 'embed', 'start': 871.98, 'weight': 5, 'content': [{'end': 872.881, 'text': "Let's try another one.", 'start': 871.98, 'duration': 0.901}, {'end': 879.365, 'text': "Let's go back to..", 'start': 877.084, 'duration': 2.281}, {'end': 885.009, 'text': 'Right now we have this sidebar and a logo at the top.', 'start': 879.365, 'duration': 5.644}, {'end': 891.574, 'text': 'And right now we have navigation down here in this strip.', 'start': 887.251, 'duration': 4.323}, {'end': 897.478, 'text': 'But what if like each of these big areas was like..', 'start': 891.834, 'duration': 5.644}, {'end': 902.115, 'text': 'partially obstructed text.', 'start': 898.712, 'duration': 3.403}, {'end': 909.861, 'text': "Like, you know, like about, and it's like halfway covered.", 'start': 906.658, 'duration': 3.203}, {'end': 920.61, 'text': 'YouTube And so forth and so on.', 'start': 910.862, 'duration': 9.748}, {'end': 923.512, 'text': "Alright, let's try another one.", 'start': 922.131, 'duration': 1.381}, {'end': 935.248, 'text': "I wonder if I'm zoomed in enough.", 'start': 928.665, 'duration': 6.583}], 'summary': 'Discussing layout changes for improving user experience on a webpage.', 'duration': 63.268, 'max_score': 871.98, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo871980.jpg'}, {'end': 1035.119, 'src': 'embed', 'start': 974.308, 'weight': 3, 'content': [{'end': 984.694, 'text': "and you know that's the about, and then this is like the YouTube, and I could have like a YouTube logo in there and then down here is, I don't know,", 'start': 974.308, 'duration': 10.386}, {'end': 985.315, 'text': 'mentoring.', 'start': 984.694, 'duration': 0.621}, {'end': 999.703, 'text': 'And then when you hover over whatever it is, have an interesting hover state, you would grow or some kind of decoration would happen.', 'start': 988.274, 'duration': 11.429}, {'end': 1003.646, 'text': "Let's cut the page right here.", 'start': 1002.425, 'duration': 1.221}, {'end': 1007.949, 'text': 'Sometimes you can just do this.', 'start': 1004.867, 'duration': 3.082}, {'end': 1017.877, 'text': "This cutting here signifies that it's either in a different state of the same page or it's further down the page or whatever.", 'start': 1010.171, 'duration': 7.706}, {'end': 1022.438, 'text': "But let's say you've clicked on it, so it's in a different state now.", 'start': 1019.397, 'duration': 3.041}, {'end': 1035.119, 'text': "This timeline that we're designing could like slide over, right? So now it's coming from the side right here and whatever's in it.", 'start': 1023.098, 'duration': 12.021}], 'summary': 'The transcript discusses adding a youtube logo, a hover state, and a sliding timeline to the design.', 'duration': 60.811, 'max_score': 974.308, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo974308.jpg'}], 'start': 800.173, 'title': 'Call to action and website design timeline', 'summary': 'Emphasizes the significance of call to action in web design and discusses a website design concept involving a timeline layout, aiming to enhance user experience. it provides specific examples and aims to prompt user interaction and engagement, with the goal of enhancing user experience with a unique design approach.', 'chapters': [{'end': 871.5, 'start': 800.173, 'title': 'Importance of call to action', 'summary': 'Emphasizes the significance of call to action in web design, highlighting its pivotal role in prompting user interaction and engagement, with specific examples like buttons, submit forms, and buy now options.', 'duration': 71.327, 'highlights': ["A call to action is always going to be the most important thing on the page, whether it's a button, a submit form, or a buy now option.", 'Making space for call to actions is crucial in web page design to prompt user interaction and prevent the page from being merely visited and left.', 'The contact section serves as a call to action, prompting users to perform an action within that space.']}, {'end': 1075.874, 'start': 871.98, 'title': 'Website design timeline concept', 'summary': 'Discusses a website design concept involving a timeline layout with sequential sections and interactive hover states, aiming to enhance user experience with a unique design approach.', 'duration': 203.894, 'highlights': ['The concept involves a timeline layout with sequential sections and interactive hover states to enhance user experience.', 'Proposing obstructed text and a timeline design for different sections of the website.', 'Discussing the potential of interactive hover states and click actions for user engagement and navigation.', 'Exploring the idea of sliding and transitioning elements for different states of the page, providing a unique user experience.']}], 'duration': 275.701, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo800173.jpg', 'highlights': ["A call to action is always going to be the most important thing on the page, whether it's a button, a submit form, or a buy now option.", 'Making space for call to actions is crucial in web page design to prompt user interaction and prevent the page from being merely visited and left.', 'The contact section serves as a call to action, prompting users to perform an action within that space.', 'The concept involves a timeline layout with sequential sections and interactive hover states to enhance user experience.', 'Exploring the idea of sliding and transitioning elements for different states of the page, providing a unique user experience.', 'Proposing obstructed text and a timeline design for different sections of the website.', 'Discussing the potential of interactive hover states and click actions for user engagement and navigation.']}, {'end': 1502.278, 'segs': [{'end': 1135.628, 'src': 'embed', 'start': 1106.849, 'weight': 0, 'content': [{'end': 1112.855, 'text': "We've stated that the goals are, for me as the client, to be able to convey what I do.", 'start': 1106.849, 'duration': 6.006}, {'end': 1122.806, 'text': "And what I do right now and what I'm trying to develop my personal brand to be is that of somebody who offers help.", 'start': 1113.576, 'duration': 9.23}, {'end': 1135.628, 'text': 'I want the Travis brand to be somebody that can you know, either through dev tips, teach you how to design and build websites, through my mentoring,', 'start': 1124.34, 'duration': 11.288}], 'summary': 'Client aims to convey expertise, offer help through dev tips, mentoring, and building websites.', 'duration': 28.779, 'max_score': 1106.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo1106849.jpg'}, {'end': 1229.468, 'src': 'embed', 'start': 1197.283, 'weight': 3, 'content': [{'end': 1207.585, 'text': 'and also i like the idea of not having to redesign the whole brand, but just kind of read, align it to a new way of thinking.', 'start': 1197.283, 'duration': 10.302}, {'end': 1213.152, 'text': "and i could take you know in the same way that I'm stepping through a story here.", 'start': 1207.585, 'duration': 5.567}, {'end': 1224.022, 'text': "I could step them through like a literal story of I'm just thinking about that, but like a literal story of of what the Travis brand is.", 'start': 1213.152, 'duration': 10.87}, {'end': 1229.468, 'text': "So for example, I can be like, Hey, I'm Travis.", 'start': 1224.062, 'duration': 5.406}], 'summary': 'Redesign brand to align with new thinking, using story approach.', 'duration': 32.185, 'max_score': 1197.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo1197283.jpg'}, {'end': 1338.493, 'src': 'embed', 'start': 1296.121, 'weight': 2, 'content': [{'end': 1301.962, 'text': 'And, you know, like, you need those CTAs, right? So, like, watch dev tips.', 'start': 1296.121, 'duration': 5.841}, {'end': 1309.264, 'text': 'And then, like, this could be, like, you know, set up a call.', 'start': 1304.443, 'duration': 4.821}, {'end': 1316.167, 'text': "CTA And then, that's cool.", 'start': 1312.585, 'duration': 3.582}, {'end': 1321.863, 'text': 'And then after that, what is it? The articles.', 'start': 1319.141, 'duration': 2.722}, {'end': 1327.346, 'text': 'Mentoring, articles, Vine.', 'start': 1325.285, 'duration': 2.061}, {'end': 1329.908, 'text': 'Articles could be interesting too.', 'start': 1328.247, 'duration': 1.661}, {'end': 1338.493, 'text': "Right now I have that kind of like a, what's it called? Masonry, jQuery masonry kind of grid.", 'start': 1330.368, 'duration': 8.125}], 'summary': 'Ctas and articles are important for engagement. also using jquery masonry grid.', 'duration': 42.372, 'max_score': 1296.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo1296121.jpg'}, {'end': 1467.972, 'src': 'embed', 'start': 1394.568, 'weight': 1, 'content': [{'end': 1397.789, 'text': 'I keep all my design work on Dribble and Behance.', 'start': 1394.568, 'duration': 3.221}, {'end': 1403.791, 'text': "So I'll just put like Drib and Behance.", 'start': 1398.309, 'duration': 5.482}, {'end': 1407.152, 'text': "Just like a grid basically, right? Just like it's a gallery.", 'start': 1404.651, 'duration': 2.501}, {'end': 1419.004, 'text': "And I'm going to cut off the page right here and start it right here.", 'start': 1410.92, 'duration': 8.084}, {'end': 1431.549, 'text': "Okay, so I've cut off the page and it's starting again up here.", 'start': 1427.708, 'duration': 3.841}, {'end': 1436.802, 'text': "Isn't this awesome? With sketching, you just go so fast.", 'start': 1434.12, 'duration': 2.682}, {'end': 1441.827, 'text': "Look, I've just really developed this really good idea, and each of these things gets its own unique layout really quickly.", 'start': 1436.843, 'duration': 4.984}, {'end': 1443.868, 'text': "Let's see.", 'start': 1441.847, 'duration': 2.021}, {'end': 1444.989, 'text': 'Vine is cool.', 'start': 1444.068, 'duration': 0.921}, {'end': 1448.712, 'text': 'Dribble Behance.', 'start': 1446.791, 'duration': 1.921}, {'end': 1455.928, 'text': "What's next? Is it notes? Notes and podcast.", 'start': 1449.273, 'duration': 6.655}, {'end': 1457.789, 'text': 'So notes is gonna be simple.', 'start': 1456.488, 'duration': 1.301}, {'end': 1464.411, 'text': "I mean, that's gonna be just a signup form, right? So name, email, signup form.", 'start': 1458.029, 'duration': 6.382}, {'end': 1467.972, 'text': 'And then maybe like some explanation of what the notes are for.', 'start': 1465.111, 'duration': 2.861}], 'summary': 'Design work organized on dribble and behance, fast sketching, unique layouts developed quickly.', 'duration': 73.404, 'max_score': 1394.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo1394568.jpg'}], 'start': 1075.894, 'title': "Travis's brand redesign and content strategy planning", 'summary': "Discusses travis's plan to convey his personal brand through website redesign and outlines a content strategy plan for engaging call-to-action and visual content across various sections including youtube videos, mentoring, articles, vine, design showcase, notes signup form, and a podcast.", 'chapters': [{'end': 1229.468, 'start': 1075.894, 'title': 'Travis brand redesign', 'summary': "Discusses travis's plan to convey his personal brand as someone who offers help through his website redesign, with a focus on guiding visitors through the process and maintaining the existing brand elements.", 'duration': 153.574, 'highlights': ['Travis aims to convey his personal brand as someone who offers help through dev tips, mentoring, career guidance, and weekly inspiration.', 'He likes the idea of guiding visitors through the process of understanding his brand and maintaining the existing brand elements during the website redesign.', 'Travis considers keeping the current bar and realigning the brand to a new way of thinking, avoiding a complete redesign.', "He plans to step visitors through a literal story of what the Travis brand represents, potentially offering a narrative insight into his brand's identity."]}, {'end': 1502.278, 'start': 1229.488, 'title': 'Content strategy planning', 'summary': 'Outlines a content strategy plan for a website, including sections for youtube videos, mentoring, articles, vine, design showcase, notes signup form, and a podcast, with a focus on creating engaging call-to-action and visual content.', 'duration': 272.79, 'highlights': ["The website's content strategy plan includes sections for YouTube videos, mentoring, articles, Vine, design showcase, notes signup form, and a podcast. This gives an overview of the various content sections to be included on the website.", "The strategy emphasizes the importance of engaging call-to-action elements, such as testimonials and 'see more' CTAs for articles. This highlights the intention to create engaging content that prompts user interaction and engagement.", 'The design showcase will feature work from Dribble and Behance, presented in a gallery format. The plan to showcase design work from external platforms in a visually appealing gallery format is highlighted.']}], 'duration': 426.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo1075894.jpg', 'highlights': ['Travis aims to convey his personal brand through dev tips, mentoring, career guidance, and weekly inspiration.', "The website's content strategy plan includes sections for YouTube videos, mentoring, articles, Vine, design showcase, notes signup form, and a podcast.", "The strategy emphasizes engaging call-to-action elements, such as testimonials and 'see more' CTAs for articles.", "Travis plans to step visitors through a literal story of what the Travis brand represents, potentially offering a narrative insight into his brand's identity.", 'The design showcase will feature work from Dribble and Behance, presented in a visually appealing gallery format.']}, {'end': 1919.783, 'segs': [{'end': 1561.546, 'src': 'embed', 'start': 1503.919, 'weight': 0, 'content': [{'end': 1510.367, 'text': 'Okay, and then the last thing is just contact, right? Yeah, okay.', 'start': 1503.919, 'duration': 6.448}, {'end': 1514.231, 'text': "Contact, I don't wanna have a form on my website.", 'start': 1510.968, 'duration': 3.263}, {'end': 1518.734, 'text': "I think I'm just kinda getting past that stuff.", 'start': 1515.211, 'duration': 3.523}, {'end': 1520.236, 'text': 'I just wanna have my email.', 'start': 1518.915, 'duration': 1.321}, {'end': 1527.422, 'text': 'Just a really big link, a huge, chunky email link.', 'start': 1523.739, 'duration': 3.683}, {'end': 1533.167, 'text': 'I think this one has a lot of meat.', 'start': 1530.605, 'duration': 2.562}, {'end': 1534.703, 'text': 'in it.', 'start': 1534.443, 'duration': 0.26}, {'end': 1539.407, 'text': "I think there's a lot that can be done with this idea.", 'start': 1535.124, 'duration': 4.283}, {'end': 1544.412, 'text': 'And I really like the way that the narrative is basically a sentence right?', 'start': 1539.547, 'duration': 4.865}, {'end': 1551.041, 'text': 'On my current website, my About page says something like Travis is trying to grow up.', 'start': 1546.219, 'duration': 4.822}, {'end': 1561.546, 'text': 'And then I could be like, Travis is trying to grow up, but he makes YouTube videos instead and does phone calls with people and designs things.', 'start': 1551.461, 'duration': 10.085}], 'summary': 'Preference for email contact over form, emphasizing a clear, prominent email link.', 'duration': 57.627, 'max_score': 1503.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo1503919.jpg'}, {'end': 1763.518, 'src': 'embed', 'start': 1711.369, 'weight': 3, 'content': [{'end': 1716.072, 'text': 'more of those details will begin to to crumble away.', 'start': 1711.369, 'duration': 4.703}, {'end': 1724.536, 'text': "or, sorry, more of the bad ideas will begin to crumble away and reveal more of the of the good details, and even then it won't be finished,", 'start': 1716.072, 'duration': 8.464}, {'end': 1733.41, 'text': "because even as we move into doing, you know coding and In publishing it still won't be done.", 'start': 1724.536, 'duration': 8.874}, {'end': 1737.653, 'text': "And I think that's the beautiful thing about design is that it doesn't need to be done.", 'start': 1733.43, 'duration': 4.223}, {'end': 1739.254, 'text': "It doesn't need to be complete.", 'start': 1737.713, 'duration': 1.541}, {'end': 1741.436, 'text': 'It just needs to be better and better each time.', 'start': 1739.314, 'duration': 2.122}, {'end': 1746.739, 'text': "And that's like this iterative kind of process of design that I really enjoy.", 'start': 1741.456, 'duration': 5.283}, {'end': 1759.633, 'text': 'So anyway, next week we are going to take this design and breathe life into it, bring color and context into it by using visual design.', 'start': 1747.3, 'duration': 12.333}, {'end': 1763.518, 'text': "I'm going to take you through step-by-step and how I use Photoshop to design.", 'start': 1759.673, 'duration': 3.845}], 'summary': "Design doesn't need to be complete, just better each time. next week: adding color and context through visual design.", 'duration': 52.149, 'max_score': 1711.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo1711369.jpg'}, {'end': 1811.671, 'src': 'embed', 'start': 1785.213, 'weight': 4, 'content': [{'end': 1789.354, 'text': 'I wanna take you through a few of the weird tricks that I know or how I..', 'start': 1785.213, 'duration': 4.141}, {'end': 1793.656, 'text': 'resize images, like all the shortcuts, everything.', 'start': 1790.934, 'duration': 2.722}, {'end': 1803.363, 'text': "I really don't want to skip on that because that's been one of the most requested things in the comments for a very long time.", 'start': 1793.676, 'duration': 9.687}, {'end': 1808.407, 'text': 'Travis, can you show us how to use Photoshop or how you use it to do your designs or something like that.', 'start': 1803.423, 'duration': 4.984}, {'end': 1811.671, 'text': 'Anyway, I had a really blast.', 'start': 1809.347, 'duration': 2.324}], 'summary': 'Demonstrating photoshop shortcuts and image resizing due to high demand.', 'duration': 26.458, 'max_score': 1785.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo1785213.jpg'}], 'start': 1503.919, 'title': 'Optimizing website and iterative design', 'summary': 'Discusses optimizing website contact information and narrative to increase user interaction and satisfaction, along with emphasizing the iterative design process in photoshop to create better designs, leading to a detailed tutorial in the next session.', 'chapters': [{'end': 1598.631, 'start': 1503.919, 'title': 'Optimizing contact information and narrative on website', 'summary': 'Discusses optimizing the contact information on the website by using a prominent email link instead of a form, and utilizing a sequential narrative to engage visitors, potentially increasing user interaction and satisfaction.', 'duration': 94.712, 'highlights': ['Using a prominent email link instead of a form for contact information, to improve user experience and potentially increase user interaction.', 'Utilizing a sequential narrative on the About page to engage visitors and provide a unique and engaging user experience, potentially increasing user satisfaction.', 'Emphasizing the importance of narrative and user experience on the website, potentially leading to increased engagement and user satisfaction.']}, {'end': 1919.783, 'start': 1600.819, 'title': 'Iterative design process in photoshop', 'summary': "Highlights the iterative design process in photoshop, emphasizing the importance of refining ideas and chipping away bad ones to create better designs, leading to a detailed tutorial in the next week's session.", 'duration': 318.964, 'highlights': ['The importance of refining ideas and chipping away bad ones is emphasized in the iterative design process. The speaker explains the process of refining ideas and chipping away bad ones to create better designs, likening it to chiseling away bad parts of a sculpture to reveal the good details.', "Detailed tutorial in the next week's session for using Photoshop to design. The speaker plans to provide a detailed tutorial on using Photoshop to design, including visual design, keystrokes, shortcuts, and tricks, addressing the long-standing request from the viewers.", "Upcoming session to focus on bringing life and context into the design using visual design in Photoshop. The next week's session will focus on bringing life and context into the design using visual design in Photoshop, with the intention to showcase the process step-by-step."]}], 'duration': 415.864, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/PQO47_AP6lo/pics/PQO47_AP6lo1503919.jpg', 'highlights': ['Using a prominent email link instead of a form for contact information to improve user experience and potentially increase user interaction.', 'Utilizing a sequential narrative on the About page to engage visitors and provide a unique and engaging user experience, potentially increasing user satisfaction.', 'Emphasizing the importance of narrative and user experience on the website, potentially leading to increased engagement and user satisfaction.', 'The importance of refining ideas and chipping away bad ones is emphasized in the iterative design process, likening it to chiseling away bad parts of a sculpture to reveal the good details.', "Detailed tutorial in the next week's session for using Photoshop to design, including visual design, keystrokes, shortcuts, and tricks, addressing the long-standing request from the viewers.", 'Upcoming session to focus on bringing life and context into the design using visual design in Photoshop, with the intention to showcase the process step-by-step.']}], 'highlights': ['Emphasizes the importance of discovery process in designing, highlighting the role of problem-solving before visual work', 'Covers wireframing and integrating content, UI, and visual design for a cohesive user experience', "Reviews content strategy and emphasizes the identification of project's owner and audience as crucial", 'The importance of making small, quick wireframe drawings to enable consideration of various content types and mobile adaptability', 'The use of a three-part rectangle layout for web design, emphasizing adaptability to infinitely long websites and the placement of key elements', 'The consideration of interactive elements in the wireframe, tailored to specific content types like articles and design', 'The proposal involves incorporating video production skills to create an asymmetrical and unconventional web design, with the possibility of featuring autoplay videos and text boxes for YouTube and mentoring content', "The idea of using a three-sided rectangle for a big video is favored, with consideration for a more conventional design approach for the lower content section, resembling that of an agency's layout", 'The speaker suggests using a mix of grid layout and asymmetric design for the web page, possibly including a ghosted image with a play button and a personalized video introduction', 'The chapter discusses an avant-garde web design idea featuring a big heavy block, possibly containing images or copywriting, with a navigation on the left, aiming to create a stand-out visual effect and interactive content', 'A creative web design idea involving a big splash image with angled navigational items, which slide out when hovered over, creating an interactive and dynamic user experience', "A call to action is always going to be the most important thing on the page, whether it's a button, a submit form, or a buy now option", 'Making space for call to actions is crucial in web page design to prompt user interaction and prevent the page from being merely visited and left', 'The contact section serves as a call to action, prompting users to perform an action within that space', 'The concept involves a timeline layout with sequential sections and interactive hover states to enhance user experience', 'Exploring the idea of sliding and transitioning elements for different states of the page, providing a unique user experience', 'Proposing obstructed text and a timeline design for different sections of the website', 'Discussing the potential of interactive hover states and click actions for user engagement and navigation', 'Travis aims to convey his personal brand through dev tips, mentoring, career guidance, and weekly inspiration', "The website's content strategy plan includes sections for YouTube videos, mentoring, articles, Vine, design showcase, notes signup form, and a podcast", "The strategy emphasizes engaging call-to-action elements, such as testimonials and 'see more' CTAs for articles", "Travis plans to step visitors through a literal story of what the Travis brand represents, potentially offering a narrative insight into his brand's identity", 'The design showcase will feature work from Dribble and Behance, presented in a visually appealing gallery format', 'Using a prominent email link instead of a form for contact information to improve user experience and potentially increase user interaction', 'Utilizing a sequential narrative on the About page to engage visitors and provide a unique and engaging user experience, potentially increasing user satisfaction', 'Emphasizing the importance of narrative and user experience on the website, potentially leading to increased engagement and user satisfaction', 'The importance of refining ideas and chipping away bad ones is emphasized in the iterative design process, likening it to chiseling away bad parts of a sculpture to reveal the good details', "Detailed tutorial in the next week's session for using Photoshop to design, including visual design, keystrokes, shortcuts, and tricks, addressing the long-standing request from the viewers", 'Upcoming session to focus on bringing life and context into the design using visual design in Photoshop, with the intention to showcase the process step-by-step']}