title
How to Build a Responsive Website From Start to Finish - Sketching, Wireframes & Design - Part2

description
Today we sketch UI's ( 2:28 ) and execute a visual design in photoshop ( 24:25 ) --- Extended Photoshop video - http://youtu.be/xHUZyvQGuX4 --- A big thank you to these creators for contributing sample projects for the "work" section: Micael Butial -https://www.behance.net/gallery/14751131/-TYPO-International-Design-Talks Petras Nargėla - https://www.behance.net/gallery/16750837/Free-80-Crispy-Icons-in-PSD-AI-SVG-Webfont Sergey Valiukh - https://www.behance.net/gallery/13745729/Timeline-Page Ayoub Elred - https://www.behance.net/gallery/15812143/Flat-Mobile-UIUX-Concept-download Anton Skvortsov - https://www.behance.net/gallery/16483395/City-IN-website-concept Nick Zoutendijk - https://www.behance.net/gallery/13870569/Stripes-Co-Free-icon-Set Jonathan Quintin - https://www.behance.net/gallery/12748107/Weather-Dashboard-Global-Outlook-UIUX Jieyu Xiong - https://www.behance.net/gallery/15063575/Fresh-It-Up-App-Design --- DevTips is a YouTube show about web design and development. HTML5 Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON CSS Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy ---- DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson

detail
{'title': 'How to Build a Responsive Website From Start to Finish - Sketching, Wireframes & Design - Part2', 'heatmap': [{'end': 1532.557, 'start': 1456.722, 'weight': 1}], 'summary': 'Series covers website creation, emphasizing empathy in discovery, trello for organization, showcasing personality, displaying work, incorporating testimonials, enabling client contact, roi emphasis, and iterative design decisions.', 'chapters': [{'end': 65.575, 'segs': [{'end': 65.575, 'src': 'embed', 'start': 0.189, 'weight': 0, 'content': [{'end': 0.69, 'text': 'Hello everybody.', 'start': 0.189, 'duration': 0.501}, {'end': 1.41, 'text': 'Welcome to DevTips.', 'start': 0.73, 'duration': 0.68}, {'end': 2.391, 'text': 'My name is Travis.', 'start': 1.711, 'duration': 0.68}, {'end': 8.397, 'text': 'This is the second video in a series called how to make a website from start to finish.', 'start': 4.694, 'duration': 3.703}, {'end': 16.606, 'text': "Last week we looked at the discovery process and we talked about how to use empathy to make sure that we're building the right thing for the right people.", 'start': 8.478, 'duration': 8.128}, {'end': 20.81, 'text': 'We also looked at a way to organize ourselves and our project.', 'start': 16.966, 'duration': 3.844}, {'end': 26.734, 'text': "Now keep in mind as you're watching all these videos that this is all unrehearsed, mostly unscripted stuff.", 'start': 20.99, 'duration': 5.744}, {'end': 34.219, 'text': 'My goal is to help you to understand the whole process as it goes through, as it goes through my hands.', 'start': 27.454, 'duration': 6.765}, {'end': 40.263, 'text': "And I want you to feel kind of like you're like over the shoulder, like a fly on the wall, kind of idea as I go through these,", 'start': 34.259, 'duration': 6.004}, {'end': 41.264, 'text': 'go through all these steps.', 'start': 40.263, 'duration': 1.001}, {'end': 47.548, 'text': "So there's going to be a lot of mistakes and there's going to be a lot of dumb ideas that hopefully don't make it through to the final product.", 'start': 41.344, 'duration': 6.204}, {'end': 51.45, 'text': 'for you guys.', 'start': 50.93, 'duration': 0.52}, {'end': 63.914, 'text': 'We used Trello to organize the insights we gained from the discovery process to create actionable items that we can track and hold ourselves accountable to as we move through the whole process.', 'start': 52.551, 'duration': 11.363}, {'end': 65.575, 'text': "Let's take a look at Trello now.", 'start': 64.215, 'duration': 1.36}], 'summary': 'Travis discusses the process of making a website, emphasizing empathy and use of trello for organization.', 'duration': 65.386, 'max_score': 0.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mkHFrk3WuYQ/pics/mkHFrk3WuYQ189.jpg'}], 'start': 0.189, 'title': 'Making a website: discovery and organization', 'summary': "Introduces the second video in the 'how to make a website from start to finish' series, emphasizing the use of empathy in the discovery process and trello for organizing insights, with an unrehearsed and unscripted approach.", 'chapters': [{'end': 65.575, 'start': 0.189, 'title': 'Making a website: discovery and organization', 'summary': "Introduces the second video in the 'how to make a website from start to finish' series, focusing on the use of empathy in the discovery process and the use of trello to organize insights, with an emphasis on the unrehearsed and unscripted nature of the content.", 'duration': 65.386, 'highlights': ['The chapter emphasizes the use of empathy in the discovery process to ensure that the right thing is built for the right people.', 'It highlights the use of Trello to organize insights and create actionable items for accountability throughout the process.', 'The video series is described as unrehearsed and unscripted, aiming to provide a fly-on-the-wall experience for the audience.', "The presenter acknowledges the likelihood of mistakes and 'dumb ideas' during the process."]}], 'duration': 65.386, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mkHFrk3WuYQ/pics/mkHFrk3WuYQ189.jpg', 'highlights': ['The chapter emphasizes the use of empathy in the discovery process to ensure that the right thing is built for the right people.', 'It highlights the use of Trello to organize insights and create actionable items for accountability throughout the process.', 'The video series is described as unrehearsed and unscripted, aiming to provide a fly-on-the-wall experience for the audience.', "The presenter acknowledges the likelihood of mistakes and 'dumb ideas' during the process."]}, {'end': 266.085, 'segs': [{'end': 151.698, 'src': 'embed', 'start': 65.795, 'weight': 0, 'content': [{'end': 69.336, 'text': 'Here are the different features or sections that we need to design for.', 'start': 65.795, 'duration': 3.541}, {'end': 78.021, 'text': "We said that we wanted to showcase the artist's personality And we also definitely want to have a showcase itself, the work.", 'start': 69.917, 'duration': 8.104}, {'end': 87.387, 'text': 'Testimonials would be a good idea and definitely need a way for a client or a viewer to contact this artist.', 'start': 79.241, 'duration': 8.146}, {'end': 96.013, 'text': 'Now we want to keep in mind at the very baseline that all clients are interested in the return on their investment.', 'start': 87.767, 'duration': 8.246}, {'end': 103.738, 'text': "All clients want to know that if hiring you is a good idea, right? That's their main reason for going to your website.", 'start': 96.113, 'duration': 7.625}, {'end': 110.333, 'text': 'So we want to keep that in mind and bring that concept out in every section that we work on.', 'start': 104.591, 'duration': 5.742}, {'end': 119.036, 'text': "Will this help them to make that business decision? Now it's important to refer back to these items often as we go through the process.", 'start': 111.333, 'duration': 7.703}, {'end': 124.618, 'text': 'It can be quite easy to get sidelined by a new idea and become totally off track.', 'start': 119.076, 'duration': 5.542}, {'end': 131.303, 'text': "Now, in this video, we're going to be doing some wireframing and sketching, and I'm going to have Trello with me on my iPad the whole time,", 'start': 124.958, 'duration': 6.345}, {'end': 138.768, 'text': "so I can continually check back and reference it to make sure that I'm designing for the right things that we already went over in our discovery process.", 'start': 131.303, 'duration': 7.465}, {'end': 140.049, 'text': "Now, after we're done sketching,", 'start': 139.048, 'duration': 1.001}, {'end': 146.614, 'text': "we're going to jump into Photoshop and quickly continue to iterate on the ideas that we're developing and continue to push our project along.", 'start': 140.049, 'duration': 6.565}, {'end': 148.175, 'text': "So right now let's get sketching.", 'start': 146.934, 'duration': 1.241}, {'end': 151.698, 'text': 'You see here I have my notepad.', 'start': 148.915, 'duration': 2.783}], 'summary': "Design website with artist's personality, work showcase, testimonials, and contact info to ensure roi for clients.", 'duration': 85.903, 'max_score': 65.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mkHFrk3WuYQ/pics/mkHFrk3WuYQ65795.jpg'}], 'start': 65.795, 'title': "Designing artist's website features and design process", 'summary': "Discusses key features for the artist's website, including showcasing personality, displaying work, incorporating testimonials, and enabling client contact, while emphasizing roi. it also covers the importance of referencing initial items, using trello, and iterating in photoshop during the design process.", 'chapters': [{'end': 110.333, 'start': 65.795, 'title': "Designing artist's website features", 'summary': "Discusses the key features to be included in the artist's website, such as showcasing the artist's personality, displaying their work, incorporating testimonials, and providing a way for clients to contact the artist, while emphasizing the importance of demonstrating return on investment for potential clients.", 'duration': 44.538, 'highlights': ["Emphasizing the return on investment for clients is crucial, as it is the main reason for potential clients visiting the artist's website.", "Key features to be included in the artist's website are showcasing the artist's personality, displaying their work, incorporating testimonials, and providing a way for clients to contact the artist."]}, {'end': 266.085, 'start': 111.333, 'title': 'Design process and wireframing', 'summary': 'Covers the importance of referencing back to initial items during the wireframing and sketching process, using trello for reference, and iterating on ideas in photoshop to push the project forward.', 'duration': 154.752, 'highlights': ['During the wireframing and sketching process, it is crucial to continually reference back to initial items from the discovery process to ensure that the design aligns with the established objectives.', 'Using Trello on the iPad as a reference tool allows for continual checks to ensure alignment with the initial discovery process, aiding in making the right design decisions.', 'After sketching, the iteration of ideas in Photoshop plays a significant role in pushing the project forward and refining the design concepts for effective decision-making and progress.', 'The speaker emphasizes the importance of not getting sidetracked by new ideas and staying focused on the established objectives, highlighting the potential for distraction during the design process.']}], 'duration': 200.29, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mkHFrk3WuYQ/pics/mkHFrk3WuYQ65795.jpg', 'highlights': ['Emphasizing the return on investment for clients is crucial for potential client visits.', "Key features for the artist's website: showcasing personality, displaying work, incorporating testimonials, enabling client contact.", 'Continually referencing initial items during wireframing and sketching process is crucial for design alignment.', 'Using Trello on iPad as a reference tool aids in ensuring alignment with initial discovery process.', 'Iteration of ideas in Photoshop is significant for refining design concepts and progress.', 'Emphasize staying focused on established objectives to avoid distraction during the design process.']}, {'end': 557.477, 'segs': [{'end': 301.19, 'src': 'embed', 'start': 266.085, 'weight': 0, 'content': [{'end': 267.646, 'text': "okay?. So let's continue.", 'start': 266.085, 'duration': 1.561}, {'end': 270.587, 'text': 'After I have this kind of hero image.', 'start': 267.766, 'duration': 2.821}, {'end': 275.448, 'text': 'that kind of really conveys the emotion of the site.', 'start': 270.587, 'duration': 4.861}, {'end': 284.5, 'text': "I want to next convey my distinct personality and And oftentimes I'll do that just with my face here.", 'start': 275.448, 'duration': 9.052}, {'end': 295.327, 'text': 'Got a little profile photograph, a headshot, and maybe a title across the top of it or my name below it or something like that.', 'start': 285.301, 'duration': 10.026}, {'end': 301.19, 'text': 'And this is a good opportunity to.', 'start': 296.067, 'duration': 5.123}], 'summary': 'The speaker plans to convey distinct personality through a hero image and a headshot with a title or name.', 'duration': 35.105, 'max_score': 266.085, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mkHFrk3WuYQ/pics/mkHFrk3WuYQ266085.jpg'}, {'end': 410.948, 'src': 'embed', 'start': 381.11, 'weight': 1, 'content': [{'end': 385.754, 'text': 'But also I can see the proportions of each section in comparison to another.', 'start': 381.11, 'duration': 4.644}, {'end': 388.296, 'text': 'So I can imagine somebody scrolling down here.', 'start': 386.154, 'duration': 2.142}, {'end': 394.02, 'text': 'how long are they going to have to scroll before they get to the bottom of this particular section?', 'start': 388.296, 'duration': 5.724}, {'end': 396.504, 'text': 'And of course, this is not to scale.', 'start': 394.983, 'duration': 1.521}, {'end': 403.186, 'text': "Our About section doesn't have to be twice as long as our Hero header image.", 'start': 397.004, 'duration': 6.182}, {'end': 410.948, 'text': 'But we have an idea of the type of content and the space that they would have in relation to each other.', 'start': 403.866, 'duration': 7.082}], 'summary': 'Estimate section proportions for better content layout.', 'duration': 29.838, 'max_score': 381.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mkHFrk3WuYQ/pics/mkHFrk3WuYQ381110.jpg'}], 'start': 266.085, 'title': 'Web design principles', 'summary': 'Covers designing a personal website to convey personality and skills through a hero image, profile photo with skill icons, and a blurb, as well as the importance of visualizing web design layout and interaction elements, with specific considerations for section proportions and gallery interaction.', 'chapters': [{'end': 358.285, 'start': 266.085, 'title': 'Designing personal website', 'summary': 'Discusses designing a personal website, focusing on conveying distinct personality and specific skillset through a hero image, a profile photograph with icons representing skills, and a blurb.', 'duration': 92.2, 'highlights': ['The chapter discusses conveying distinct personality and specific skillset through a hero image, a profile photograph with icons representing skills, and a blurb.', "The author emphasizes the use of elements that convey the emotion of the site and one's personality, such as a hero image and a profile photograph with a blurb and skill icons.", 'The author mentions including a title above the profile photograph and using icons such as a paintbrush, mouse clicker, or code cursor to represent skills.']}, {'end': 557.477, 'start': 358.305, 'title': 'Web design planning and visualization', 'summary': 'Discusses the importance of visualizing web design layout and interaction elements, including considerations for section proportions and gallery interaction.', 'duration': 199.172, 'highlights': ['The chapter emphasizes the importance of visualizing web design layout and interaction elements. The speaker discusses the significance of being able to see the proportions of each section in comparison to another, and the consideration of gallery interaction.', 'Considerations for section proportions and gallery interaction are discussed. The speaker mentions the importance of considering the length of each section and the interaction of a gallery, including potential ideas for image display and user interaction.', 'Use of shorthand symbols in web design is referenced. The speaker explains the significance of shorthand symbols in web design, including examples such as a ruled box for left-aligned paragraph and a three-sided rectangle with a squiggle for a headline.']}], 'duration': 291.392, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mkHFrk3WuYQ/pics/mkHFrk3WuYQ266085.jpg', 'highlights': ['The chapter discusses conveying distinct personality and specific skillset through a hero image, a profile photograph with icons representing skills, and a blurb.', 'The chapter emphasizes the importance of visualizing web design layout and interaction elements. The speaker discusses the significance of being able to see the proportions of each section in comparison to another, and the consideration of gallery interaction.']}, {'end': 1256.138, 'segs': [{'end': 707.966, 'src': 'embed', 'start': 681.202, 'weight': 0, 'content': [{'end': 688.124, 'text': "I mean, even if you don't click through these other icons for other companies, if they're recognizable companies,", 'start': 681.202, 'duration': 6.922}, {'end': 690.525, 'text': "then there's that social proof right?", 'start': 688.124, 'duration': 2.401}, {'end': 702.603, 'text': 'If you see a recognizable image or a face, or a word, or a company name, it gives kind of evidence that this artist is a pro.', 'start': 690.885, 'duration': 11.718}, {'end': 704.124, 'text': 'you know, like they have.', 'start': 702.603, 'duration': 1.521}, {'end': 707.966, 'text': "um, they have the uh, they can back up what they're saying.", 'start': 704.124, 'duration': 3.842}], 'summary': 'Recognizable company icons provide social proof and credibility for the artist.', 'duration': 26.764, 'max_score': 681.202, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mkHFrk3WuYQ/pics/mkHFrk3WuYQ681202.jpg'}, {'end': 977.205, 'src': 'embed', 'start': 955.826, 'weight': 2, 'content': [{'end': 965.215, 'text': "Mostly because I didn't want to spend a lot of time on the nitty gritties of making multiple pages and all this kind of thing.", 'start': 955.826, 'duration': 9.389}, {'end': 973.762, 'text': 'But I think this is interesting, and we can in fact use JavaScript to make it still a single page app, just pull them in with Ajax and stuff.', 'start': 965.455, 'duration': 8.307}, {'end': 977.205, 'text': "So I really, I don't know, I'm kind of liking this.", 'start': 974.263, 'duration': 2.942}], 'summary': 'Using javascript to create a single-page app with ajax for efficient navigation.', 'duration': 21.379, 'max_score': 955.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mkHFrk3WuYQ/pics/mkHFrk3WuYQ955826.jpg'}, {'end': 1266.303, 'src': 'embed', 'start': 1236.121, 'weight': 1, 'content': [{'end': 1244.703, 'text': 'because we do have each section very plainly and you just scroll down as long as you like to find what you need.', 'start': 1236.121, 'duration': 8.582}, {'end': 1251.565, 'text': "Although the contact is at the bottom, I'm sure there's a contact here in the navigation and the navigation would follow you too.", 'start': 1245.163, 'duration': 6.402}, {'end': 1256.138, 'text': 'Now that we have a few strong ideas of how we want to like organize the page,', 'start': 1252.216, 'duration': 3.922}, {'end': 1266.303, 'text': 'we can run over to Photoshop or any other graphics program and start to iron out and think about the visual language of the page and make a few more decisions about how people will interact with the different elements.', 'start': 1256.138, 'duration': 10.165}], 'summary': 'The transcript discusses website navigation and design decisions for page organization.', 'duration': 30.182, 'max_score': 1236.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mkHFrk3WuYQ/pics/mkHFrk3WuYQ1236121.jpg'}], 'start': 557.677, 'title': 'Web design principles', 'summary': 'Covers web design elements such as testimonials, social proof, recognizable logos, and faces to enhance credibility, with emphasis on clear and accessible contact options and various website design ideas including single-page app concept, javascript and ajax navigation, and unique mobile-friendly designs.', 'chapters': [{'end': 734.941, 'start': 557.677, 'title': 'Web design discussion', 'summary': 'Discusses the inclusion of testimonials and social proof in the web design, emphasizing the importance of recognizable logos and faces to enhance credibility, and the potential use of social media icons for added social proof.', 'duration': 177.264, 'highlights': ['The chapter emphasizes the importance of recognizable logos and faces in testimonials to enhance credibility and social proof.', 'It mentions the potential use of social media icons like Twitter, Dribble, Behance, and LinkedIn for added social proof.', 'The speaker discusses the idea of an expanded imagery on the outside of the website, with a sliding interaction when clicking on a specific element.']}, {'end': 849.308, 'start': 735.761, 'title': 'Website contact information and design', 'summary': 'Discusses the importance of website contact information and design, emphasizing the need for clear and accessible contact options, such as email and web form, for potential clients, along with the significance of portraying trustworthiness and good design to clients.', 'duration': 113.547, 'highlights': ['The chapter discusses the importance of website contact information and design Emphasizes the significance of clear and accessible contact options and good design to clients.', 'Emphasizing the need for clear and accessible contact options, such as email and web form, for potential clients Stresses the need for providing clear and accessible contact options like email and web form.', 'The significance of portraying trustworthiness and good design to clients Highlights the importance of portraying trustworthiness and good design to potential clients.']}, {'end': 1256.138, 'start': 851.08, 'title': 'Website design ideas', 'summary': 'Discusses various website design ideas, including the concept of a single-page app, utilizing javascript and ajax for navigation, and exploring different layout and navigation options for a website, with a focus on creating a unique and mobile-friendly design.', 'duration': 405.058, 'highlights': ['Exploring the concept of a single-page app using JavaScript and Ajax for navigation The speaker discusses the idea of creating a single-page website using JavaScript and Ajax, avoiding the complexity of multiple pages, and focusing on a more streamlined approach.', 'Considering different layout and navigation options for a website, focusing on creating a unique and mobile-friendly design The speaker explores various layout and navigation options for the website, including a vertical sidebar navigation, drop shadows, and a grid layout, with a focus on creating a unique and mobile-friendly design.', 'Discussing a more traditional and utilitarian design with plainly sectioned navigation The speaker discusses a more traditional and utilitarian website layout, with plainly sectioned navigation and a straightforward scrolling approach, emphasizing ease of use and accessibility for users.']}], 'duration': 698.461, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mkHFrk3WuYQ/pics/mkHFrk3WuYQ557677.jpg', 'highlights': ['The chapter emphasizes the importance of recognizable logos and faces in testimonials to enhance credibility and social proof.', 'The chapter discusses the importance of website contact information and design Emphasizes the significance of clear and accessible contact options and good design to clients.', 'Exploring the concept of a single-page app using JavaScript and Ajax for navigation The speaker discusses the idea of creating a single-page website using JavaScript and Ajax, avoiding the complexity of multiple pages, and focusing on a more streamlined approach.']}, {'end': 1864.596, 'segs': [{'end': 1300.585, 'src': 'embed', 'start': 1256.138, 'weight': 0, 'content': [{'end': 1266.303, 'text': 'we can run over to Photoshop or any other graphics program and start to iron out and think about the visual language of the page and make a few more decisions about how people will interact with the different elements.', 'start': 1256.138, 'duration': 10.165}, {'end': 1270.005, 'text': "Notice that at no point do I think that I'm done making decisions.", 'start': 1266.563, 'duration': 3.442}, {'end': 1272.266, 'text': "I'm making decisions all along the way.", 'start': 1270.265, 'duration': 2.001}, {'end': 1277.168, 'text': "I mean, at this point, I don't know what colors I'm using, my type, what imagery I'm using.", 'start': 1272.486, 'duration': 4.682}, {'end': 1279.549, 'text': "I don't know what the thing's going to even say.", 'start': 1277.488, 'duration': 2.061}, {'end': 1282.89, 'text': "I just know who it's for and roughly how it's going to fit together.", 'start': 1279.669, 'duration': 3.221}, {'end': 1295.034, 'text': "So I sat down last night to start creating and I quickly realized that I wasn't ready to even start.", 'start': 1285.711, 'duration': 9.323}, {'end': 1300.585, 'text': "I had to get ready and I've gotten ready.", 'start': 1298.362, 'duration': 2.223}], 'summary': 'Constant decision-making and preparation before starting the creative process.', 'duration': 44.447, 'max_score': 1256.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mkHFrk3WuYQ/pics/mkHFrk3WuYQ1256138.jpg'}, {'end': 1354.875, 'src': 'embed', 'start': 1324.148, 'weight': 2, 'content': [{'end': 1328.488, 'text': 'I went to Behance and I contacted a few creators whom I respect and admire,', 'start': 1324.148, 'duration': 4.34}, {'end': 1334.69, 'text': 'and I asked them if I could use their work as sample projects in this project for the site.', 'start': 1328.488, 'duration': 6.202}, {'end': 1337.57, 'text': "So I hope I don't get your names all horribly messed up,", 'start': 1334.85, 'duration': 2.72}, {'end': 1345.412, 'text': 'but I want to give a sincere thank you to the contributors of the portfolio section in this in the coming up design.', 'start': 1337.57, 'duration': 7.842}, {'end': 1348.833, 'text': 'Okay, so Mikhail, thank you.', 'start': 1346.212, 'duration': 2.621}, {'end': 1354.875, 'text': 'Petrus, Sergei, I really appreciate that you allowed me to use your work in this project.', 'start': 1349.093, 'duration': 5.782}], 'summary': 'Contacted creators on behance for sample projects, thanked mikhail, petrus, and sergei for allowing use of their work.', 'duration': 30.727, 'max_score': 1324.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mkHFrk3WuYQ/pics/mkHFrk3WuYQ1324148.jpg'}, {'end': 1644.878, 'src': 'heatmap', 'start': 1456.722, 'weight': 1, 'content': [{'end': 1457.563, 'text': 'So this goes back to that.', 'start': 1456.722, 'duration': 0.841}, {'end': 1463.229, 'text': "But now we're finally ready to do the glamorous part, jump into Photoshop and push around pixels.", 'start': 1457.703, 'duration': 5.526}, {'end': 1464.751, 'text': "So let's get started doing that.", 'start': 1463.529, 'duration': 1.222}, {'end': 1532.557, 'text': 'Bye Thank you.', 'start': 1489.999, 'duration': 42.558}, {'end': 1644.878, 'text': 'Bye Bye.', 'start': 1587.937, 'duration': 56.941}], 'summary': 'Ready to jump into photoshop and push pixels.', 'duration': 199.447, 'max_score': 1456.722, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mkHFrk3WuYQ/pics/mkHFrk3WuYQ1456722.jpg'}], 'start': 1256.138, 'title': 'Designing visual language and content creation', 'summary': 'Discusses iterative design decisions and emphasizes preparation and adaptability in creating visual elements. it also covers the process of gathering assets, collaboration, and a two-hour photoshop design process.', 'chapters': [{'end': 1300.585, 'start': 1256.138, 'title': 'Designing visual language', 'summary': 'Discusses the iterative process of making design decisions, highlighting the importance of preparation and adaptability in the creation of visual elements for a webpage.', 'duration': 44.447, 'highlights': ['The importance of continuous decision-making The speaker emphasizes the ongoing nature of making design decisions throughout the process.', 'Preparation before starting the creation process The speaker acknowledges the need for preparation and being ready before commencing the design creation process.', 'Emphasis on not being fully prepared initially The speaker admits to not having all the specifics, such as colors, type, and imagery, at the outset of the design process.']}, {'end': 1864.596, 'start': 1300.925, 'title': 'Content creation and collaboration', 'summary': 'Discusses the process of gathering assets, including work from eight creators, and emphasizes the importance of preparational and organizational work in design and development, culminating in a two-hour photoshop design process.', 'duration': 563.671, 'highlights': ['The importance of preparational and organizational work in design and development is emphasized, noting that it is essential for designers and developers to have a sense of organizational, instructional, and collaborative skills. The speaker highlights the significance of preparational and organizational work in design and development, stressing the need for designers and developers to possess organizational, instructional, and collaborative skills.', 'Acknowledgment is given to eight creators for allowing their work to be showcased in the project, with their work to be found in the portfolio or work section of the site being created. The speaker expresses gratitude to eight creators whose work will be featured in the portfolio or work section of the site, showcasing their contributions to the project.', 'The speaker discusses the process of gathering assets, including contacting creators on Behance and obtaining permission to use their work as sample projects for the site. The speaker details the process of gathering assets, such as contacting creators on Behance and obtaining permission to use their work as sample projects for the site.']}], 'duration': 608.458, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mkHFrk3WuYQ/pics/mkHFrk3WuYQ1256138.jpg', 'highlights': ['The importance of continuous decision-making The speaker emphasizes the ongoing nature of making design decisions throughout the process.', 'The importance of preparational and organizational work in design and development is emphasized, noting that it is essential for designers and developers to have a sense of organizational, instructional, and collaborative skills.', 'Acknowledgment is given to eight creators for allowing their work to be showcased in the project, with their work to be found in the portfolio or work section of the site being created.', 'Preparation before starting the creation process The speaker acknowledges the need for preparation and being ready before commencing the design creation process.', 'The speaker discusses the process of gathering assets, including contacting creators on Behance and obtaining permission to use their work as sample projects for the site.', 'Emphasis on not being fully prepared initially The speaker admits to not having all the specifics, such as colors, type, and imagery, at the outset of the design process.']}], 'highlights': ['The chapter emphasizes the use of empathy in the discovery process to ensure that the right thing is built for the right people.', 'Emphasizing the return on investment for clients is crucial for potential client visits.', 'The chapter discusses conveying distinct personality and specific skillset through a hero image, a profile photograph with icons representing skills, and a blurb.', 'The chapter emphasizes the importance of recognizable logos and faces in testimonials to enhance credibility and social proof.', 'The importance of continuous decision-making The speaker emphasizes the ongoing nature of making design decisions throughout the process.']}