title
Adobe XD Web Design Tutorial

description
Learn how to make this mockup a reality in the browser: https://goo.gl/mi1fKf (click show more) Here's a written tutorial of this video: https://goo.gl/vJ1VLM Download the assets needed to follow along with this tutorial here (this includes the final Adobe XD project file, too): http://s3.amazonaws.com/coursetro/behance-assets.zip ---------------------- Note: I received written permission from Dennis Schäfer to use his Behance portfolio and creative works as the example portfolio for this project. View his portfolio here: https://www.behance.net/dennisschafer ...and his personal website here: http://www.dennisschafer.com/ - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Adobe XD Web Design Tutorial', 'heatmap': [{'end': 472.474, 'start': 428.194, 'weight': 0.727}], 'summary': 'Tutorial covers using adobe xd windows beta to design a personal portfolio website, creating a custom artboard, implementing thumbnail hover effects, front-end development, and connecting prototypes in adobe xd, providing detailed demonstrations and design fundamentals for web projects.', 'chapters': [{'end': 56.687, 'segs': [{'end': 56.687, 'src': 'embed', 'start': 22.335, 'weight': 0, 'content': [{'end': 30.336, 'text': "All right, so we're gonna be using the Adobe XD Windows Beta for this, and you can use the same application for Mac if you wish.", 'start': 22.335, 'duration': 8.001}, {'end': 35.717, 'text': "However, it did just release for Windows, so it's pretty stripped down in terms of functionality.", 'start': 30.656, 'duration': 5.061}, {'end': 37.158, 'text': 'However, there is enough,', 'start': 35.757, 'duration': 1.401}, {'end': 47.379, 'text': "and it is stable enough for us to use it and to use it to design a full mock-up of this fictional sort of personal portfolio website that we're building,", 'start': 37.158, 'duration': 10.221}, {'end': 50.3, 'text': 'as well as create a basic interaction prototype.', 'start': 47.379, 'duration': 2.921}, {'end': 56.687, 'text': "So later on in the course, we're going to be using Angular to make the entire project a reality in the browser.", 'start': 50.68, 'duration': 6.007}], 'summary': 'Using adobe xd windows beta to design a personal portfolio website and create a basic interaction prototype, later integrating with angular.', 'duration': 34.352, 'max_score': 22.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_822335.jpg'}], 'start': 22.335, 'title': 'Using adobe xd windows beta for designing a portfolio website', 'summary': 'Covers designing a full mock-up of a personal portfolio website and creating a basic interaction prototype using adobe xd windows beta, which will be integrated with angular for browser implementation.', 'chapters': [{'end': 56.687, 'start': 22.335, 'title': 'Adobe xd windows beta for designing a portfolio website', 'summary': 'Covers using adobe xd windows beta to design a full mock-up of a personal portfolio website and create a basic interaction prototype, which will later be used with angular to make the entire project a reality in the browser.', 'duration': 34.352, 'highlights': ['You can use the Adobe XD Windows Beta for designing a full mock-up of a personal portfolio website and create a basic interaction prototype.', 'The application is stable enough for designing and creating a mock-up.', 'It is pretty stripped down in terms of functionality, but there is enough functionality to work with.']}], 'duration': 34.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_822335.jpg', 'highlights': ['You can use the Adobe XD Windows Beta for designing a full mock-up of a personal portfolio website and create a basic interaction prototype.', 'The application is stable enough for designing and creating a mock-up.', 'It is pretty stripped down in terms of functionality, but there is enough functionality to work with.']}, {'end': 360.65, 'segs': [{'end': 143.878, 'src': 'embed', 'start': 78.989, 'weight': 0, 'content': [{'end': 86.576, 'text': "And over here on the right, it does give you just some preset options, but I'm just going to draw mine out manually.", 'start': 78.989, 'duration': 7.587}, {'end': 87.957, 'text': "And I'm going to left click and drag.", 'start': 86.756, 'duration': 1.201}, {'end': 94.523, 'text': 'And you can see over here in the width and height over here, it tells you what we are in terms of pixels.', 'start': 88.317, 'duration': 6.206}, {'end': 98.345, 'text': "So I'm just going to match it up to around 1200.", 'start': 94.563, 'duration': 3.782}, {'end': 103.289, 'text': 'And we can always edit these afterwards and something high, like around 900 for the height.', 'start': 98.345, 'duration': 4.944}, {'end': 109.634, 'text': 'So my current desktop resolution is 1920 by 1080 for recording this.', 'start': 103.469, 'duration': 6.165}, {'end': 115.019, 'text': 'And so this fits nicely within my current view at a hundred percent view.', 'start': 110.455, 'duration': 4.564}, {'end': 120.198, 'text': 'Okay, so the first part that we wanna focus on is the header.', 'start': 115.774, 'duration': 4.424}, {'end': 127.145, 'text': "And in the header, all we're going to have is our name, because this is just a personal portfolio site.", 'start': 120.999, 'duration': 6.146}, {'end': 131.089, 'text': 'And then kind of a subtitle, kind of your description of what you do.', 'start': 127.746, 'duration': 3.343}, {'end': 135.653, 'text': 'And then also a very simple navigation over here with four different links.', 'start': 131.589, 'duration': 4.064}, {'end': 143.878, 'text': "Okay, so the first thing we want to do is take our type tool, and I'm going to left click right around there.", 'start': 136.394, 'duration': 7.484}], 'summary': 'Creating a website with dimensions 1200x900 pixels, for a personal portfolio, with a header containing name, subtitle, and simple navigation.', 'duration': 64.889, 'max_score': 78.989, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_878989.jpg'}, {'end': 219.744, 'src': 'embed', 'start': 190.839, 'weight': 3, 'content': [{'end': 198.75, 'text': 'And we want to have a good amount of white space here between the left border here at the top and the top as well.', 'start': 190.839, 'duration': 7.911}, {'end': 201.074, 'text': 'And you want to try to make sure these things are even.', 'start': 198.971, 'duration': 2.103}, {'end': 205.5, 'text': "And that's just basic good design fundamentals.", 'start': 201.094, 'duration': 4.406}, {'end': 211.442, 'text': "Okay, so next we're going to have kind of like a subtitle down over here.", 'start': 206.44, 'duration': 5.002}, {'end': 219.744, 'text': 'And so we can simply take this, select it, control C, then control V, and then we can move it down by holding shift.', 'start': 211.462, 'duration': 8.282}], 'summary': 'Design fundamentals: maintain white space, even alignment, and duplicate elements for subtitles.', 'duration': 28.905, 'max_score': 190.839, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_8190839.jpg'}], 'start': 56.987, 'title': 'Designing personal portfolio website in xd', 'summary': 'Covers creating a custom artboard in xd with specific dimensions of 1200x900 pixels, aligning it with the 1920x1080 desktop resolution for a hundred percent view, and demonstrates the process of designing a personal portfolio website including creating navigation, adjusting font styles and sizes, and aligning elements for good design fundamentals.', 'chapters': [{'end': 120.198, 'start': 56.987, 'title': 'Creating custom artboard in xd', 'summary': 'Covers creating a custom artboard in xd, with specific dimensions of 1200x900 pixels and aligning it with the 1920x1080 desktop resolution for a hundred percent view.', 'duration': 63.211, 'highlights': ['Creating a custom artboard with dimensions of 1200x900 pixels.', 'Aligning the artboard with the 1920x1080 desktop resolution for a hundred percent view.']}, {'end': 360.65, 'start': 120.999, 'title': 'Personal portfolio website design', 'summary': 'Demonstrates the process of designing a personal portfolio website, including creating a simple navigation, adjusting font styles and sizes, and aligning elements for good design fundamentals.', 'duration': 239.651, 'highlights': ['Creating a simple navigation with four different links The chapter focuses on including a very simple navigation with four different links for the personal portfolio website.', "Adjusting font styles and sizes for the name and subtitle It demonstrates the process of using the type tool to adjust font styles and sizes for the name 'Gary Simon' and the subtitle 'UI/UX designer from Cleveland, OH'.", 'Aligning elements for good design fundamentals The chapter emphasizes the importance of aligning elements and maintaining an even amount of consistent white space for good design fundamentals.']}], 'duration': 303.663, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_856987.jpg', 'highlights': ['Creating a custom artboard with dimensions of 1200x900 pixels.', 'Aligning the artboard with the 1920x1080 desktop resolution for a hundred percent view.', 'Creating a simple navigation with four different links for the personal portfolio website.', 'Adjusting font styles and sizes for the name and subtitle.', 'Aligning elements for good design fundamentals.']}, {'end': 1005.07, 'segs': [{'end': 412.089, 'src': 'embed', 'start': 387.801, 'weight': 0, 'content': [{'end': 395.763, 'text': 'And the next part we want to focus on is down here, which will be kind of like a thumbnail gallery of our projects.', 'start': 387.801, 'duration': 7.962}, {'end': 403.386, 'text': "And it's going to pull this from the Behance API, which we'll do obviously later on when we get to the developments portion.", 'start': 395.823, 'duration': 7.563}, {'end': 412.089, 'text': "So right now I'm going to choose this, this rectangle tool, and I'm going to left, click and drag out all the way,", 'start': 403.966, 'duration': 8.123}], 'summary': 'Planning to create a thumbnail gallery for projects using the behance api.', 'duration': 24.288, 'max_score': 387.801, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_8387801.jpg'}, {'end': 472.474, 'src': 'heatmap', 'start': 428.194, 'weight': 0.727, 'content': [{'end': 436.075, 'text': "Okay Now what we want to do is in the project files, and I'm going to link those so you can download them.", 'start': 428.194, 'duration': 7.881}, {'end': 441.404, 'text': 'We want to open up a folder that we have All right.', 'start': 436.695, 'duration': 4.709}, {'end': 446.066, 'text': "So we can see we have these thumbnails and I'm just going to drag us over here and we don't want to drag it on top of here,", 'start': 441.444, 'duration': 4.622}, {'end': 450.208, 'text': 'because it will fit it into this rectangle that we created.', 'start': 446.066, 'duration': 4.142}, {'end': 460.212, 'text': "So we just want to go out on the outside and we're going to increase this by holding shift and the size will be roughly right around here for now.", 'start': 450.828, 'duration': 9.384}, {'end': 467.655, 'text': "Okay And then what we want to do is select it and choose the repeat grid and we'll pull this to the right.", 'start': 461.712, 'duration': 5.943}, {'end': 472.474, 'text': 'right around there should work pretty well.', 'start': 469.973, 'duration': 2.501}], 'summary': 'In the project files, we open a folder with thumbnails, resize them, and use repeat grid.', 'duration': 44.28, 'max_score': 428.194, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_8428194.jpg'}, {'end': 805.107, 'src': 'embed', 'start': 770.72, 'weight': 1, 'content': [{'end': 772.001, 'text': 'Okay, looks pretty good.', 'start': 770.72, 'duration': 1.281}, {'end': 783.045, 'text': "Now, over here we're going to have two columns and the left one is simply going to say front end development with a title as well as a fake description.", 'start': 772.821, 'duration': 10.224}, {'end': 788.107, 'text': 'The other one will be a backend development with a fake description.', 'start': 783.585, 'duration': 4.522}, {'end': 795.85, 'text': "And each one is going to have its own icon that we're going to custom design here in XD, mainly with the pen tool and the shape tools.", 'start': 788.167, 'duration': 7.683}, {'end': 798.191, 'text': "Really, that's all they give you to work with at this point.", 'start': 796.271, 'duration': 1.92}, {'end': 805.107, 'text': "what I'm going to do is first we're going to focus on the first icon.", 'start': 800.205, 'duration': 4.902}], 'summary': 'Designing two columns with custom icons for front end and backend development.', 'duration': 34.387, 'max_score': 770.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_8770720.jpg'}, {'end': 856.107, 'src': 'embed', 'start': 823.896, 'weight': 2, 'content': [{'end': 832.12, 'text': 'So the first thing we want to do is use the rectangle tool here to do the handle portion.', 'start': 823.896, 'duration': 8.224}, {'end': 838.183, 'text': "so I'm just going to drag out something pretty large at this point and then we're going to scale it down.", 'start': 832.12, 'duration': 6.063}, {'end': 841.185, 'text': "a lot, of course, but we want to be able to see what's happening.", 'start': 838.183, 'duration': 3.002}, {'end': 845.547, 'text': 'so, as we can see, we have these little icons here.', 'start': 841.185, 'duration': 4.362}, {'end': 856.107, 'text': "if we pull them all the way in, we can make rounded corners here and we're going to change the border size from one to two And we do not need a fill,", 'start': 845.547, 'duration': 10.56}], 'summary': 'Using rectangle tool to create handle, scaling down, making rounded corners, changing border size from one to two and removing fill.', 'duration': 32.211, 'max_score': 823.896, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_8823896.jpg'}], 'start': 361.632, 'title': 'Designing homepage, thumbnail hover effect, and creating brush', 'summary': 'Covers designing the homepage, setting up a thumbnail gallery using behance api, simulating thumbnail hover effects, and creating a brush in adobe illustrator. it includes adjusting layout for responsiveness, custom designing icons in xd, and scaling brush shapes.', 'chapters': [{'end': 646.713, 'start': 361.632, 'title': 'Homepage design and gallery setup', 'summary': 'Covers the process of designing the homepage, setting up a thumbnail gallery for projects using behance api, and adjusting the layout for responsiveness, ensuring all six thumbnails fit nicely in the designated area.', 'duration': 285.081, 'highlights': ['The process of designing the homepage and setting up the thumbnail gallery for projects using Behance API is detailed, with a focus on layout adjustments for responsiveness and ensuring all six thumbnails fit nicely in the designated area.', 'The color code for the secondary color in the color scheme is specified as 144354.', 'The homepage header design is completed, marked by its simplicity.', 'The layout adjustments for the thumbnail gallery include the use of a rectangle tool to create a container, setting a very light gray fill color, and employing the repeat grid feature for layout expansion.', 'The layout for the thumbnail gallery is adjusted for responsiveness, ensuring all six thumbnails fit nicely in the designated area.']}, {'end': 823.316, 'start': 646.753, 'title': 'Thumbnail hover effect in xd', 'summary': 'Highlights the process of simulating thumbnail hover effects, creating a title and columns for front-end and back-end development, and custom designing icons in xd.', 'duration': 176.563, 'highlights': ['The chapter discusses simulating thumbnail hover effects through CSS in Angular and the limitations of simulating hover effects in XD.', 'Creating a title and displaying it on the bottom portion of the thumbnail from the Behance API.', 'Designing two columns for front-end and back-end development with respective fake descriptions and custom icons in XD.']}, {'end': 1005.07, 'start': 823.896, 'title': 'Creating a brush in adobe illustrator', 'summary': 'Demonstrates creating a brush in adobe illustrator, using the rectangle and pen tools to design the handle and bristles, adjusting the corner radius, border size, and color, and grouping the shapes for scaling.', 'duration': 181.174, 'highlights': ['Creating the handle portion with the rectangle tool The speaker demonstrates using the rectangle tool to create the handle portion of the brush, adjusting the corner radius, border size, and color to 1AA3FF.', 'Designing the bristles portion with the pen tool The process of creating the bristles portion using the pen tool is explained, highlighting the usage of anchor points and color adjustment.', 'Grouping and scaling down the shapes The demonstration includes grouping the shapes and scaling them down, enabling quick access and adjustments for other shapes.']}], 'duration': 643.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_8361632.jpg', 'highlights': ['The process of designing the homepage and setting up the thumbnail gallery for projects using Behance API is detailed, with a focus on layout adjustments for responsiveness and ensuring all six thumbnails fit nicely in the designated area.', 'Designing two columns for front-end and back-end development with respective fake descriptions and custom icons in XD.', 'Creating the handle portion with the rectangle tool The speaker demonstrates using the rectangle tool to create the handle portion of the brush, adjusting the corner radius, border size, and color to 1AA3FF.']}, {'end': 1478.878, 'segs': [{'end': 1092.617, 'src': 'embed', 'start': 1005.75, 'weight': 0, 'content': [{'end': 1009.472, 'text': "And now let's go ahead and add a title.", 'start': 1005.75, 'duration': 3.722}, {'end': 1013.873, 'text': "So for this, we'll simply put front end development.", 'start': 1010.552, 'duration': 3.321}, {'end': 1019.776, 'text': 'And once again, we want to use our Open Sans font.', 'start': 1015.734, 'duration': 4.042}, {'end': 1023.637, 'text': 'All right.', 'start': 1023.277, 'duration': 0.36}, {'end': 1031.119, 'text': "Let's get a good idea of what size this should be.", 'start': 1028.339, 'duration': 2.78}, {'end': 1036.358, 'text': 'We want a good amount of white space between these two elements.', 'start': 1033.117, 'duration': 3.241}, {'end': 1046.741, 'text': "So we'll pull that down and we'll make this black and then we'll copy and paste it.", 'start': 1037.258, 'duration': 9.483}, {'end': 1049.222, 'text': 'By the way, 20 seems to be pretty good.', 'start': 1046.82, 'duration': 2.402}, {'end': 1053.863, 'text': "I think I'm gonna change this to 18 copy and then paste.", 'start': 1049.262, 'duration': 4.601}, {'end': 1073.109, 'text': "And actually instead of copy and paste, what we'll do is simply draw out a text field right here, and I'm just going to put in some gibberish for now.", 'start': 1056.664, 'duration': 16.445}, {'end': 1079.551, 'text': "And I'm going to head over to website that quickly has lorem ipsum text.", 'start': 1073.669, 'duration': 5.882}, {'end': 1083.373, 'text': 'There we go.', 'start': 1082.793, 'duration': 0.58}, {'end': 1092.617, 'text': "I'll just copy this first line right here and paste that in.", 'start': 1086.454, 'duration': 6.163}], 'summary': 'Front end development with open sans font, 18 copy and 20 white space.', 'duration': 86.867, 'max_score': 1005.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_81005750.jpg'}, {'end': 1167.211, 'src': 'embed', 'start': 1136.862, 'weight': 8, 'content': [{'end': 1149.022, 'text': "And then finally, all we have to do to wrap this up is create another icon And something that's relevant to the idea of backend.", 'start': 1136.862, 'duration': 12.16}, {'end': 1153.164, 'text': "So I'm just going to put code brackets as an icon.", 'start': 1149.823, 'duration': 3.341}, {'end': 1161.969, 'text': "So we'll use the pen tool and I'm going to come over here just so I get a good idea of the size.", 'start': 1153.265, 'duration': 8.704}, {'end': 1163.95, 'text': "I'm going to hold shift.", 'start': 1161.989, 'duration': 1.961}, {'end': 1167.211, 'text': 'All right.', 'start': 1166.931, 'duration': 0.28}], 'summary': 'Creating a backend icon using code brackets with the pen tool.', 'duration': 30.349, 'max_score': 1136.862, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_81136862.jpg'}, {'end': 1314.287, 'src': 'embed', 'start': 1264.54, 'weight': 4, 'content': [{'end': 1272.242, 'text': 'So now we want to make sure we have an even amount of white space between the bottom of this element and the thumbnails,', 'start': 1264.54, 'duration': 7.702}, {'end': 1277.983, 'text': 'as well as the thumbnails at the bottom of the thumbnails and the top of these elements.', 'start': 1272.242, 'duration': 5.741}, {'end': 1280.363, 'text': "And there's a little bit more as we can see here.", 'start': 1278.023, 'duration': 2.34}, {'end': 1286.084, 'text': "So we're going to take these and there we go.", 'start': 1280.383, 'duration': 5.701}, {'end': 1289.965, 'text': 'We can see we get an even amount of distance between them.', 'start': 1286.384, 'duration': 3.581}, {'end': 1301.879, 'text': "Okay So now in this clip, we're going to focus on finishing off the mockup here in XD by designing a second sub page.", 'start': 1291.912, 'duration': 9.967}, {'end': 1308.603, 'text': "And that's one that's going to emulate what exactly it looks like and what happens when a user clicks on a project thumbnail.", 'start': 1302.439, 'duration': 6.164}, {'end': 1309.164, 'text': 'All right.', 'start': 1308.944, 'duration': 0.22}, {'end': 1311.025, 'text': "So I'm going to switch over here to the desktop.", 'start': 1309.184, 'duration': 1.841}, {'end': 1314.287, 'text': 'And the first thing we want to do is take our artboard one.', 'start': 1311.806, 'duration': 2.481}], 'summary': 'Ensuring even white space and designing a second sub page in xd mockup.', 'duration': 49.747, 'max_score': 1264.54, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_81264540.jpg'}, {'end': 1354.879, 'src': 'embed', 'start': 1333.243, 'weight': 6, 'content': [{'end': 1343.05, 'text': "Okay So when this occurs, when somebody clicks on one of these icons right here, these thumbnails, we're not going to have a navigation show up.", 'start': 1333.243, 'duration': 9.807}, {'end': 1350.736, 'text': "We're going to kind of do something a little bit crazy and unconventional, which is, you know, okay for a personal portfolio site,", 'start': 1343.07, 'duration': 7.666}, {'end': 1352.918, 'text': 'especially for a designer, just to do something different.', 'start': 1350.736, 'duration': 2.182}, {'end': 1354.879, 'text': "So we're going to get rid of this right here.", 'start': 1353.218, 'duration': 1.661}], 'summary': 'For a personal portfolio site, unconventional navigation is used when clicking on thumbnails to create a unique experience.', 'duration': 21.636, 'max_score': 1333.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_81333243.jpg'}, {'end': 1409.567, 'src': 'embed', 'start': 1379.52, 'weight': 5, 'content': [{'end': 1388.866, 'text': 'And on expanded desktops, large desktops or viewports, this is going to be approximately a 60% width over here.', 'start': 1379.52, 'duration': 9.346}, {'end': 1394.05, 'text': "And we're going to pull this here to the top and to the bottom.", 'start': 1391.287, 'duration': 2.763}, {'end': 1398.095, 'text': "And then we're going to take this right here.", 'start': 1395.732, 'duration': 2.363}, {'end': 1402.76, 'text': "And it's going to match up with this size.", 'start': 1398.115, 'duration': 4.645}, {'end': 1409.567, 'text': 'Now, one thing that I did I just recalled is, instead of it being 100% based on the width of this column, here,', 'start': 1402.82, 'duration': 6.747}], 'summary': 'On large desktops, the width will be approximately 60%, and the layout will be adjusted accordingly.', 'duration': 30.047, 'max_score': 1379.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_81379520.jpg'}], 'start': 1005.75, 'title': 'Front end development, xd mockup, and portfolio layout', 'summary': 'Covers front end development, xd mockup design, and unconventional portfolio layout, including open sans font, text size, lorem ipsum text, relevant icon creation, white space, backend development, two-column layout, width percentages, and deliberate content cut-off.', 'chapters': [{'end': 1092.617, 'start': 1005.75, 'title': 'Front end development', 'summary': 'Focuses on adding a title and adjusting font size and spacing for front end development, including using open sans font, determining text size, and inserting lorem ipsum text.', 'duration': 86.867, 'highlights': ['The chapter emphasizes the process of adding a title and adjusting font size and spacing for front end development.', 'The use of Open Sans font is recommended for the design.', 'The importance of determining the appropriate text size and white space between elements is highlighted.', 'The process of inserting lorem ipsum text for design purposes is mentioned.']}, {'end': 1331.768, 'start': 1093.237, 'title': 'Xd mockup second sub page design', 'summary': 'Focuses on finishing off the xd mockup by designing a second sub page that emulates the user experience, involving creating a relevant icon and ensuring even white space, with emphasis on backend development.', 'duration': 238.531, 'highlights': ['The chapter focuses on finishing off the XD mockup by designing a second sub page that emulates the user experience, involving creating a relevant icon and ensuring even white space, with emphasis on backend development.', 'The process involves creating a relevant icon for backend development using the pen tool to draw code brackets, ensuring alignment and size, and making adjustments to achieve consistency.', 'The design also emphasizes the importance of even white space between elements, with specific attention to the distance between thumbnails and elements at the bottom, contributing to a visually balanced layout.', "The session involves duplicating an artboard and renaming it to 'details' to create the second sub page that emulates the user experience when a project thumbnail is clicked."]}, {'end': 1478.878, 'start': 1333.243, 'title': 'Unconventional portfolio layout design', 'summary': 'Details the unconventional design of a personal portfolio site, focusing on a two-column layout with specific width percentages and unconventional display practices, including the deliberate cut-off of content to create a unique visual effect.', 'duration': 145.635, 'highlights': ['The layout will feature a two-column design with a 60% width on large viewports, with specific positioning and color manipulation for visual effect.', 'The designer plans to keep only a select few thumbnails and deliberately cut off content to create a unique visual representation.', 'The navigation will not show up when clicking on thumbnails, emphasizing an unconventional approach for a personal portfolio site.']}], 'duration': 473.128, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_81005750.jpg', 'highlights': ['The chapter emphasizes the process of adding a title and adjusting font size and spacing for front end development.', 'The use of Open Sans font is recommended for the design.', 'The importance of determining the appropriate text size and white space between elements is highlighted.', 'The process of inserting lorem ipsum text for design purposes is mentioned.', 'The chapter focuses on finishing off the XD mockup by designing a second sub page that emulates the user experience, involving creating a relevant icon and ensuring even white space, with emphasis on backend development.', 'The layout will feature a two-column design with a 60% width on large viewports, with specific positioning and color manipulation for visual effect.', 'The designer plans to keep only a select few thumbnails and deliberately cut off content to create a unique visual representation.', 'The navigation will not show up when clicking on thumbnails, emphasizing an unconventional approach for a personal portfolio site.', 'The process involves creating a relevant icon for backend development using the pen tool to draw code brackets, ensuring alignment and size, and making adjustments to achieve consistency.', 'The design also emphasizes the importance of even white space between elements, with specific attention to the distance between thumbnails and elements at the bottom, contributing to a visually balanced layout.']}, {'end': 1808.242, 'segs': [{'end': 1556.935, 'src': 'embed', 'start': 1524.762, 'weight': 0, 'content': [{'end': 1526.323, 'text': "So let's go ahead and focus on that.", 'start': 1524.762, 'duration': 1.561}, {'end': 1529.184, 'text': "I'm going to get rid of this icon right here.", 'start': 1527.063, 'duration': 2.121}, {'end': 1542.671, 'text': "We're going to bring this over here and we want a good amount of white space between the left and the top and over here to the right as well.", 'start': 1529.204, 'duration': 13.467}, {'end': 1545.773, 'text': "So I'm going to bring this down or in rather.", 'start': 1543.392, 'duration': 2.381}, {'end': 1551.07, 'text': "Now let's focus on this specifically.", 'start': 1549.028, 'duration': 2.042}, {'end': 1556.935, 'text': "Let's change this here just to some name of the project.", 'start': 1551.69, 'duration': 5.245}], 'summary': 'Repositioned icon and created white space for better design.', 'duration': 32.173, 'max_score': 1524.762, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_81524762.jpg'}, {'end': 1662.986, 'src': 'embed', 'start': 1627.194, 'weight': 1, 'content': [{'end': 1639.44, 'text': "And then finally, the last element that we're going to have is going to be a call to action button right here where it says view project on Behance.", 'start': 1627.194, 'duration': 12.246}, {'end': 1645.702, 'text': "So let's take the rectangle tool right around there.", 'start': 1640.02, 'duration': 5.682}, {'end': 1648.482, 'text': 'Get rid of the border.', 'start': 1647.682, 'duration': 0.8}, {'end': 1655.204, 'text': "We're going to have a fill.", 'start': 1649.723, 'duration': 5.481}, {'end': 1657.825, 'text': '131.830 works pretty well.', 'start': 1655.584, 'duration': 2.241}, {'end': 1660.365, 'text': 'We can add this to swatches as well if we need it down the road.', 'start': 1657.845, 'duration': 2.52}, {'end': 1662.986, 'text': "And then we'll use the type tool.", 'start': 1661.266, 'duration': 1.72}], 'summary': 'Design includes a call to action button with 131.830 fill, and type tool used.', 'duration': 35.792, 'max_score': 1627.194, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_81627194.jpg'}, {'end': 1769.089, 'src': 'embed', 'start': 1736.144, 'weight': 2, 'content': [{'end': 1744.43, 'text': "Transition, we'll do slide right, and we'll leave these default values of ease out and 0.4 seconds for duration.", 'start': 1736.144, 'duration': 8.286}, {'end': 1745.82, 'text': 'All right.', 'start': 1745.54, 'duration': 0.28}, {'end': 1749.021, 'text': "And then for back to projects, we'll click on that.", 'start': 1745.96, 'duration': 3.061}, {'end': 1752.683, 'text': "We'll drag it over here and the target's home.", 'start': 1749.161, 'duration': 3.522}, {'end': 1756.024, 'text': "We'll slide left, leave these the same.", 'start': 1753.463, 'duration': 2.561}, {'end': 1757.885, 'text': 'And there we go.', 'start': 1757.205, 'duration': 0.68}, {'end': 1761.086, 'text': "So now let's go ahead and test this out.", 'start': 1758.585, 'duration': 2.501}, {'end': 1761.886, 'text': "We'll hit play.", 'start': 1761.246, 'duration': 0.64}, {'end': 1765.808, 'text': "We'll go ahead and click over here.", 'start': 1764.467, 'duration': 1.341}, {'end': 1769.089, 'text': 'And there we go.', 'start': 1767.409, 'duration': 1.68}], 'summary': 'Transitioning effects applied with default values. testing successful.', 'duration': 32.945, 'max_score': 1736.144, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_81736144.jpg'}], 'start': 1478.878, 'title': 'Web project design adjustments, creating call to action button, and connecting prototypes in adobe xd', 'summary': 'Explains adjustments made to the web project design, covering resizing elements, adding white space, and changing text properties. it also includes creating a call to action button for viewing a project on behance, and demonstrating connecting prototypes in adobe xd, along with the limitations and the plan for the next steps in the project.', 'chapters': [{'end': 1627.174, 'start': 1478.878, 'title': 'Web project design adjustments', 'summary': 'Explains the adjustments made to the web project design, including resizing elements, adding white space, and changing text properties, to enhance the visual representation and user experience.', 'duration': 148.296, 'highlights': ['The design adjustments involve resizing elements and adding white space to enhance visual representation and user experience.', "Changes include making the 'back to projects' text smaller and adjusting its fill to ensure it does not take precedence over the main title.", 'The text size is increased to 24 and the fill color is changed to black, while the line height of three text elements is adjusted to 22 to space them out further.']}, {'end': 1692.546, 'start': 1627.194, 'title': 'Creating call to action button', 'summary': 'Covers creating a call to action button for viewing a project on behance, including using the rectangle tool, setting the fill color, using the type tool to add text, and adjusting the size and position of the button.', 'duration': 65.352, 'highlights': ['Using the rectangle tool to create a call to action button for viewing a project on Behance.', 'Setting the fill color to 131.830 and adding it to swatches for future use.', "Using the type tool to add 'View on Behance' text, changing the fill color to white, and adjusting the size to around 18.", 'Positioning the button in the center of the artboard.']}, {'end': 1808.242, 'start': 1692.586, 'title': 'Connecting prototypes in adobe xd', 'summary': 'Demonstrates connecting prototypes in adobe xd, including grouping elements, setting transitions, and testing the prototype, highlighting the limitations of adobe xd and the plan for the next steps in the project.', 'duration': 115.656, 'highlights': ['Connecting elements through the prototype tab and setting transitions, with a slide right transition and default ease out and 0.4 seconds for duration.', 'Grouping elements using control G and testing the prototype by clicking through the transitions.', 'Highlighting the limitations of Adobe XD in terms of dynamic animations and previewing the plan for the next steps in the project, which involve exporting assets and setting up the project in Angular.']}], 'duration': 329.364, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pMr29NGe8_8/pics/pMr29NGe8_81478878.jpg', 'highlights': ['The design adjustments involve resizing elements and adding white space to enhance visual representation and user experience.', 'Using the rectangle tool to create a call to action button for viewing a project on Behance.', 'Connecting elements through the prototype tab and setting transitions, with a slide right transition and default ease out and 0.4 seconds for duration.']}], 'highlights': ['The process involves creating a relevant icon for backend development using the pen tool to draw code brackets, ensuring alignment and size, and making adjustments to achieve consistency.', 'The layout will feature a two-column design with a 60% width on large viewports, with specific positioning and color manipulation for visual effect.', 'The process of designing the homepage and setting up the thumbnail gallery for projects using Behance API is detailed, with a focus on layout adjustments for responsiveness and ensuring all six thumbnails fit nicely in the designated area.', 'The application is stable enough for designing and creating a mock-up.', 'The designer plans to keep only a select few thumbnails and deliberately cut off content to create a unique visual representation.']}