title
6 Things you SHOULDN'T DO on your Portfolio

description
Visit http://linode.com/designcourse for a $20 credit on your new linode account. https://designcourse.com - Learn UI/UX from Scratch with my new service (coming soon) -- Today, I'm checking out various things that you shouldn't do on your (design OR code) portfolios. Like for instance, progress bars that represent your skills? DON'T DO THAT. Find out way and watch! Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! 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': "6 Things you SHOULDN'T DO on your Portfolio", 'heatmap': [{'end': 95.226, 'start': 70.67, 'weight': 0.791}, {'end': 443.94, 'start': 430.52, 'weight': 0.952}, {'end': 506.594, 'start': 495.906, 'weight': 0.794}], 'summary': 'Learn about six things to avoid on personal portfolios, the significance of using professional tools like wordpress or drupal for an enterprise-level portfolio, and the promotion of linode cloud hosting for easy website deployment. discover key mistakes to avoid in online portfolios, such as unclear navigation and lack of context for achievements, and the importance of relevant call-to-action choices for job application materials. gain insights into enhancing portfolio thumbnails in a professional and visually appealing manner, the use of templates for portfolio design, and the significance of practice and continuous improvement in portfolio presentation and design.', 'chapters': [{'end': 70.67, 'segs': [{'end': 34.195, 'src': 'embed', 'start': 1.613, 'weight': 2, 'content': [{'end': 3.334, 'text': "Hey everybody, what's up? Gary Simon here.", 'start': 1.613, 'duration': 1.721}, {'end': 12.319, 'text': "So today we're going to be checking out a very quick personal list of six different things I think you should not do on your personal portfolios,", 'start': 3.354, 'duration': 8.965}, {'end': 15.001, 'text': "whether you're a designer and or a coder.", 'start': 12.319, 'duration': 2.682}, {'end': 15.801, 'text': 'All right.', 'start': 15.521, 'duration': 0.28}, {'end': 19.824, 'text': "So as always, make sure to subscribe and let's get started.", 'start': 15.861, 'duration': 3.963}, {'end': 22.245, 'text': 'Before we begin, this video is sponsored by Linode.', 'start': 20.124, 'duration': 2.121}, {'end': 26.788, 'text': 'Now as a front end developer or a designer, you know that you need a personal portfolio.', 'start': 22.325, 'duration': 4.463}, {'end': 34.195, 'text': 'And if you use a website builder like Wix or Squarespace, they lack total customization and they lock you into using their platform.', 'start': 27.328, 'duration': 6.867}], 'summary': 'Gary simon shares six things to avoid on personal portfolios for designers and coders, sponsored by linode.', 'duration': 32.582, 'max_score': 1.613, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zIGoqlw_tMQ/pics/zIGoqlw_tMQ1613.jpg'}, {'end': 70.67, 'src': 'embed', 'start': 38.94, 'weight': 0, 'content': [{'end': 46.347, 'text': 'So level up, start building your own projects and your own portfolio on an enterprise level content management system like WordPress or Drupal.', 'start': 38.94, 'duration': 7.407}, {'end': 52.433, 'text': 'Now, real web development sometimes requires knowledge of spinning up servers, managing domain names and setting up an occasional staging environment.', 'start': 46.607, 'duration': 5.826}, {'end': 58.258, 'text': "And there's no better or simpler way to learn the ins and outs of hosting your website than with Linode Cloud Hosting.", 'start': 52.453, 'duration': 5.805}, {'end': 65.946, 'text': 'Linode Cloud Hosting makes it as easy as possible for you to deploy a WordPress or Drupal website in seconds with the free Linode one-click app marketplace.', 'start': 58.499, 'duration': 7.447}, {'end': 70.67, 'text': 'So click on the very top link here in the YouTube description to get your free Linode account,', 'start': 66.246, 'duration': 4.424}], 'summary': 'Level up by building projects on wordpress or drupal, use linode cloud hosting for easy deployment.', 'duration': 31.73, 'max_score': 38.94, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zIGoqlw_tMQ/pics/zIGoqlw_tMQ38940.jpg'}], 'start': 1.613, 'title': "Portfolio do's and don'ts", 'summary': 'Highlights six things to avoid on personal portfolios, emphasizes the importance of using professional tools like wordpress or drupal for an enterprise-level portfolio, and promotes linode cloud hosting for easy website deployment.', 'chapters': [{'end': 70.67, 'start': 1.613, 'title': "Portfolio do's and don'ts", 'summary': 'Highlights six things to avoid on personal portfolios, emphasizing the importance of using professional tools like wordpress or drupal for an enterprise-level portfolio and promoting linode cloud hosting for easy deployment of websites.', 'duration': 69.057, 'highlights': ["As a front end developer or designer, it's crucial to avoid using website builders like Wix or Squarespace and instead opt for enterprise-level content management systems like WordPress or Drupal for portfolio building.", 'Linode Cloud Hosting simplifies the deployment of WordPress or Drupal websites, enabling users to set up their portfolio quickly and easily, offering a free account through the one-click app marketplace.', 'Real web development often involves tasks like spinning up servers, managing domain names, and setting up staging environments, and Linode Cloud Hosting provides a simple way to learn and manage these aspects of hosting a website.', "The video is sponsored by Linode, emphasizing the platform's support for deploying websites and encouraging viewers to click on the top link in the YouTube description to get a free Linode account.", "The chapter's host encourages viewers to subscribe and introduces the topic of discussing things to avoid on personal portfolios for designers and coders.", 'The chapter outlines a list of six things to avoid on personal portfolios, emphasizing the importance of using professional tools and platforms for portfolio building.']}], 'duration': 69.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zIGoqlw_tMQ/pics/zIGoqlw_tMQ1613.jpg', 'highlights': ['Emphasizes using professional tools like WordPress or Drupal for portfolio building.', 'Promotes Linode Cloud Hosting for easy website deployment.', 'Encourages viewers to subscribe and introduces the topic of discussing things to avoid on personal portfolios for designers and coders.']}, {'end': 485.858, 'segs': [{'end': 95.226, 'src': 'heatmap', 'start': 70.67, 'weight': 0.791, 'content': [{'end': 76.555, 'text': 'along with $20 of free hosting and all the tools that you need to build enterprise class websites.', 'start': 70.67, 'duration': 5.885}, {'end': 86.943, 'text': 'All right, so my very first thing that I wanna demonstrate as to what you should not do if you have an online portfolio is giving me nowhere to go.', 'start': 76.815, 'duration': 10.128}, {'end': 88.984, 'text': 'which is the case here.', 'start': 88.044, 'duration': 0.94}, {'end': 92.205, 'text': "There's also another side note, which you also should do.", 'start': 89.644, 'duration': 2.561}, {'end': 95.226, 'text': "You know, I'm on a 4K resolution right now.", 'start': 93.265, 'duration': 1.961}], 'summary': 'Offer includes $20 free hosting and tools. avoid dead ends in online portfolio. consider 4k resolution.', 'duration': 24.556, 'max_score': 70.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zIGoqlw_tMQ/pics/zIGoqlw_tMQ70670.jpg'}, {'end': 170.817, 'src': 'embed', 'start': 140.225, 'weight': 1, 'content': [{'end': 141.226, 'text': 'This is a web developer.', 'start': 140.225, 'duration': 1.001}, {'end': 142.287, 'text': 'Contact me.', 'start': 141.606, 'duration': 0.681}, {'end': 150.24, 'text': 'Nobody is going to contact you before they first look at your work and also before they first learn more about you.', 'start': 143.274, 'duration': 6.966}, {'end': 158.527, 'text': "So contact you probably shouldn't even be there in terms of the hero section and your call to actions.", 'start': 150.74, 'duration': 7.787}, {'end': 160.829, 'text': 'You can have two call to actions.', 'start': 159.428, 'duration': 1.401}, {'end': 161.87, 'text': 'One should be primary.', 'start': 160.949, 'duration': 0.921}, {'end': 166.073, 'text': 'For instance, one that says check out my work or look at my work or whatever.', 'start': 162.39, 'duration': 3.683}, {'end': 170.817, 'text': 'And then maybe a secondary for contacting or.', 'start': 167.194, 'duration': 3.623}], 'summary': 'Web developer emphasizes showcasing work before contact, suggests two call to actions.', 'duration': 30.592, 'max_score': 140.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zIGoqlw_tMQ/pics/zIGoqlw_tMQ140225.jpg'}, {'end': 244.465, 'src': 'embed', 'start': 216.665, 'weight': 0, 'content': [{'end': 223.35, 'text': "and he said these are actually companies that he's worked for in terms of security or finding bugs or whatever.", 'start': 216.665, 'duration': 6.685}, {'end': 229.375, 'text': "And that's awesome, that's massive, but just to have their names right here, that's not enough.", 'start': 224.111, 'duration': 5.264}, {'end': 233.537, 'text': 'What I told me should do is to provide context.', 'start': 229.915, 'duration': 3.622}, {'end': 236.279, 'text': 'And I see a lot of this even in design portfolios.', 'start': 233.838, 'duration': 2.441}, {'end': 244.465, 'text': "People will have maybe a little thumbnail of a website, but there's no more information.", 'start': 236.319, 'duration': 8.146}], 'summary': 'The importance of providing context in portfolios for security work and design projects.', 'duration': 27.8, 'max_score': 216.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zIGoqlw_tMQ/pics/zIGoqlw_tMQ216665.jpg'}, {'end': 443.94, 'src': 'heatmap', 'start': 399.941, 'weight': 2, 'content': [{'end': 403.264, 'text': "Don't talk about what you don't know or what you don't know very well.", 'start': 399.941, 'duration': 3.323}, {'end': 408.809, 'text': 'emphasize the strengths as much as possible and make those really stick out.', 'start': 404.747, 'duration': 4.062}, {'end': 413.892, 'text': 'And then, if you do want to mention the fact that Hey, you do know JavaScript,', 'start': 409.409, 'duration': 4.483}, {'end': 419.854, 'text': "don't put it out in in in in this sort of zero to 10 sort of progress bar format.", 'start': 413.892, 'duration': 5.962}, {'end': 420.575, 'text': "Don't do that.", 'start': 419.894, 'duration': 0.681}, {'end': 426.458, 'text': "Just, just mentioned that you're pretty strong, pretty solid in JavaScript and that's all you need.", 'start': 421.095, 'duration': 5.363}, {'end': 429.399, 'text': "So don't, don't do this sort of thing ever again.", 'start': 426.898, 'duration': 2.501}, {'end': 443.94, 'text': 'Next up, lengthy about me sections And especially before you actually allow the person to see your work or your actual portfolio examples.', 'start': 430.52, 'duration': 13.42}], 'summary': 'Emphasize strengths, avoid zero to 10 progress bar, and limit about me sections before sharing work.', 'duration': 43.999, 'max_score': 399.941, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zIGoqlw_tMQ/pics/zIGoqlw_tMQ399941.jpg'}], 'start': 70.67, 'title': 'Optimizing online portfolio and job application materials', 'summary': 'Discusses key mistakes to avoid in online portfolios, such as unclear navigation and lack of context for achievements, and emphasizes the importance of relevant call-to-action choices. it also highlights the significance of avoiding progress bars for skills on resumes and keeping about me sections concise to effectively showcase work to potential employers.', 'chapters': [{'end': 290.808, 'start': 70.67, 'title': 'Optimizing online portfolio for success', 'summary': 'Highlights the key mistakes to avoid in an online portfolio, such as not providing clear navigation and lacking context for achievements, and emphasizes the importance of giving relevant choices for call to actions and providing detailed information about work experience.', 'duration': 220.138, 'highlights': ["Providing relevant navigation and call to actions is crucial, as users should not have to scroll excessively and irrelevant choices, like 'Contact Me' before showcasing work, should be avoided.", "Including context and details about achievements, such as using logos and providing information about the work done for each company, can significantly impact the portfolio's effectiveness."]}, {'end': 485.858, 'start': 290.808, 'title': 'Optimizing job application materials', 'summary': 'Highlights the importance of avoiding progress bars for skills on resumes, emphasizing strengths, and keeping about me sections concise to showcase work effectively to potential employers.', 'duration': 195.05, 'highlights': ["Avoid using progress bars for skills on resumes to emphasize strengths and avoid highlighting weaknesses. Progress bars can lead potential employers to focus on the candidate's weakest skills, potentially overshadowing their strengths.", "Emphasize strengths on resumes and avoid detailing weaknesses or skills that are not well-known. Candidates should focus on highlighting their strengths and not dwell on what they don't know well, presenting themselves in the best light possible.", "Keep about me sections concise to showcase work effectively to potential employers. Long about me sections can deter potential employers from quickly getting to the candidate's work, which is what they are primarily interested in."]}], 'duration': 415.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zIGoqlw_tMQ/pics/zIGoqlw_tMQ70670.jpg', 'highlights': ["Including context and details about achievements can significantly impact the portfolio's effectiveness.", 'Providing relevant navigation and call to actions is crucial for an effective online portfolio.', 'Avoid using progress bars for skills on resumes to emphasize strengths and avoid highlighting weaknesses.', 'Emphasize strengths on resumes and avoid detailing weaknesses or skills that are not well-known.', 'Keep about me sections concise to showcase work effectively to potential employers.']}, {'end': 879.347, 'segs': [{'end': 539.611, 'src': 'heatmap', 'start': 495.906, 'weight': 0, 'content': [{'end': 500.269, 'text': 'They have the hero section, then they have the portfolio, and then this.', 'start': 495.906, 'duration': 4.363}, {'end': 504.312, 'text': "But I've seen people do it the opposite, so that's why I say this is a little bit lengthy.", 'start': 500.73, 'duration': 3.582}, {'end': 506.594, 'text': "Don't do that right out of the gate.", 'start': 505.233, 'duration': 1.361}, {'end': 508.035, 'text': 'Show the work first.', 'start': 507.155, 'duration': 0.88}, {'end': 514.039, 'text': "Next up, I'm gonna show you ugly portfolio thumbs.", 'start': 509.116, 'duration': 4.923}, {'end': 515.807, 'text': 'or thumbnails.', 'start': 515.287, 'duration': 0.52}, {'end': 523.994, 'text': 'So I would consider this pretty ugly, because you have a strong white, like maybe three or four or five pixel border around each one,', 'start': 516.587, 'duration': 7.407}, {'end': 525.555, 'text': 'along with a subtle glow.', 'start': 523.994, 'duration': 1.561}, {'end': 528.397, 'text': 'And that just does not look good.', 'start': 525.575, 'duration': 2.822}, {'end': 539.611, 'text': 'And also outside of that, I also think that some of the thumbnails themselves could definitely be improved.', 'start': 530.378, 'duration': 9.233}], 'summary': 'Advice on improving portfolio design by prioritizing work display and improving thumbnails.', 'duration': 52.271, 'max_score': 495.906, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zIGoqlw_tMQ/pics/zIGoqlw_tMQ495906.jpg'}, {'end': 593.789, 'src': 'embed', 'start': 567.259, 'weight': 2, 'content': [{'end': 572.32, 'text': 'Showing them in the perspective skewed, like this diagonal approach is really cool along with the logo.', 'start': 567.259, 'duration': 5.061}, {'end': 582.922, 'text': 'It just makes it look a lot more professional when you do it, as opposed to just showing a straight up screenshot, especially if the UI might be ugly,', 'start': 572.76, 'duration': 10.162}, {'end': 583.423, 'text': 'especially.', 'start': 582.922, 'duration': 0.501}, {'end': 590.787, 'text': 'So you could just tell right away the quality of these are a lot better than the quality of this right here.', 'start': 583.943, 'duration': 6.844}, {'end': 593.789, 'text': "So pay attention to how you're actually listing out your thumbs.", 'start': 590.807, 'duration': 2.982}], 'summary': 'Using a diagonal approach and logo improves professionalism and quality of thumbnails.', 'duration': 26.53, 'max_score': 567.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zIGoqlw_tMQ/pics/zIGoqlw_tMQ567259.jpg'}, {'end': 650.963, 'src': 'embed', 'start': 621.575, 'weight': 4, 'content': [{'end': 632.755, 'text': "And there's a debate that designers and developers have, should you ever use a template for your actual portfolio? And I'm gonna say yes.", 'start': 621.575, 'duration': 11.18}, {'end': 645.017, 'text': "If you can't design really well, I think it completely stands to benefit you to use a template, especially if you're a coder.", 'start': 633.578, 'duration': 11.439}, {'end': 648.34, 'text': "Maybe you're a front-end developer who's not a UI designer.", 'start': 645.458, 'duration': 2.882}, {'end': 650.963, 'text': "Maybe you're a back-end developer.", 'start': 649.081, 'duration': 1.882}], 'summary': 'Using a template for portfolio can benefit developers who lack design skills.', 'duration': 29.388, 'max_score': 621.575, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zIGoqlw_tMQ/pics/zIGoqlw_tMQ621575.jpg'}, {'end': 746.171, 'src': 'embed', 'start': 718.031, 'weight': 3, 'content': [{'end': 726.734, 'text': 'But if you are an actual UI designer, Should you use a template for your portfolio? My answer for this is no.', 'start': 718.031, 'duration': 8.703}, {'end': 729.837, 'text': "And the reason being, that's what you're offering.", 'start': 726.754, 'duration': 3.083}, {'end': 732.68, 'text': "You're offering to design somebody's UI for you.", 'start': 729.857, 'duration': 2.823}, {'end': 738.946, 'text': "You're not just a front end developer who may strictly work in the realm of HTML, CSS, JavaScript, et cetera.", 'start': 733.041, 'duration': 5.905}, {'end': 746.171, 'text': "you're somebody who's actually going to do at least the UI design in Adobe XD, Figma, Sketch, whatever.", 'start': 739.907, 'duration': 6.264}], 'summary': 'Ui designers should not use a template for their portfolio as it showcases their design skills and offerings.', 'duration': 28.14, 'max_score': 718.031, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zIGoqlw_tMQ/pics/zIGoqlw_tMQ718031.jpg'}, {'end': 806.901, 'src': 'embed', 'start': 781.682, 'weight': 5, 'content': [{'end': 790.464, 'text': "so if you're new, if you're new to this, you're new to ui design and but you're also trying to make money doing it, meaning you need a portfolio site.", 'start': 781.682, 'duration': 8.782}, {'end': 799.68, 'text': "The best thing I could say in order to help you design something that's as great as possible is well practice.", 'start': 791.638, 'duration': 8.042}, {'end': 805.321, 'text': 'You have to practice all, and you have to get the UI design fundamentals down as much as possible.', 'start': 800.26, 'duration': 5.061}, {'end': 806.901, 'text': 'Practice, practice, practice.', 'start': 805.781, 'duration': 1.12}], 'summary': 'For new ui designers looking to make money, practicing ui design fundamentals is crucial for creating a great portfolio site.', 'duration': 25.219, 'max_score': 781.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zIGoqlw_tMQ/pics/zIGoqlw_tMQ781682.jpg'}], 'start': 487.34, 'title': 'Portfolio presentation and design tips', 'summary': 'Emphasizes the importance of presenting work first in a portfolio, providing suggestions for enhancing portfolio thumbnails in a professional and visually appealing manner. it also offers insights into the use of templates for portfolio design and the importance of original design, highlighting the benefits for non-ui designers and the significance of practice and continuous improvement.', 'chapters': [{'end': 590.787, 'start': 487.34, 'title': 'Improving portfolio presentation', 'summary': 'Discusses the importance of presenting the work first in a portfolio and provides suggestions for enhancing portfolio thumbnails, emphasizing the need to display work in a professional and visually appealing manner.', 'duration': 103.447, 'highlights': ["Displaying work first in a portfolio is emphasized to avoid users having to scroll past irrelevant content, as it may be annoying (e.g. 'They don't wanna have to scroll past this').", "Improving portfolio thumbnails by avoiding strong white borders and subtle glows around each thumbnail is recommended to create a visually appealing presentation (e.g. 'consider this pretty ugly because you have a strong white, maybe three or four or five pixel border around each one, along with a subtle glow').", "The suggestion to display work in a professional manner, such as showing it in a phone's perspective skewed, is made to enhance the overall presentation of the portfolio (e.g. 'It just makes it look a lot more professional when you do it, as opposed to just showing a straight up screenshot')."]}, {'end': 879.347, 'start': 590.807, 'title': 'Portfolio design tips', 'summary': 'Provides insights into the use of templates for portfolio design, emphasizing the benefits for non-ui designers and the importance of original design for ui designers, along with the significance of practice and continuous improvement.', 'duration': 288.54, 'highlights': ['UI designers should avoid using templates for their portfolio to showcase their design skills and reflect their quality of work. UI designers should avoid using templates for their portfolio to showcase their design skills and reflect their quality of work.', 'Non-UI designers, such as front-end and back-end developers, can benefit from using templates for their portfolio, especially if they lack design skills. Non-UI designers, such as front-end and back-end developers, can benefit from using templates for their portfolio, especially if they lack design skills.', 'Continuous practice and improvement are essential for creating a great UI design portfolio, with the recommendation of utilizing available resources and examples for inspiration. Continuous practice and improvement are essential for creating a great UI design portfolio, with the recommendation of utilizing available resources and examples for inspiration.']}], 'duration': 392.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zIGoqlw_tMQ/pics/zIGoqlw_tMQ487340.jpg', 'highlights': ['Display work first in a portfolio to avoid users scrolling past irrelevant content', 'Enhance portfolio thumbnails by avoiding strong white borders and subtle glows', "Present work in a professional manner, such as showing it in a phone's perspective skewed", 'UI designers should avoid using templates for their portfolio to showcase their design skills', 'Non-UI designers can benefit from using templates for their portfolio, especially if they lack design skills', 'Continuous practice and improvement are essential for creating a great UI design portfolio']}], 'highlights': ['Emphasizes using professional tools like WordPress or Drupal for portfolio building.', 'Promotes Linode Cloud Hosting for easy website deployment.', "Including context and details about achievements can significantly impact the portfolio's effectiveness.", 'Providing relevant navigation and call to actions is crucial for an effective online portfolio.', 'Avoid using progress bars for skills on resumes to emphasize strengths and avoid highlighting weaknesses.', 'Display work first in a portfolio to avoid users scrolling past irrelevant content', 'Enhance portfolio thumbnails by avoiding strong white borders and subtle glows', 'Continuous practice and improvement are essential for creating a great UI design portfolio']}