{"id":2190,"date":"2023-11-07T08:51:01","date_gmt":"2023-11-07T08:51:01","guid":{"rendered":"https:\/\/imagify.io\/blog\/?p=2190"},"modified":"2024-03-07T09:19:23","modified_gmt":"2024-03-07T09:19:23","slug":"create-web-design-portfolio-website","status":"publish","type":"post","link":"https:\/\/imagify.io\/blog\/create-web-design-portfolio-website\/","title":{"rendered":"How to Create a Web Design Portfolio Website and Make it Stand Out"},"content":{"rendered":"\n<p>Are you a web designer eager to create a standout portfolio website? Your concern for excellence is well-placed, as your portfolio functions as your digital resume and the first impression potential clients form of you. Your portfolio should not only demonstrate your skills but also reflect your brand and style. A well-designed portfolio website featuring excellent usability and swift loading times can be a powerful tool for attracting clients and job opportunities.&nbsp;<\/p>\n\n\n\n<p>In this guide, we&#8217;ll explore the 14 key steps to create a web design portfolio website that not only highlights your expertise but also captivates your audience, setting you apart in the competitive world of web design.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">14 Tips to Create a Web Design Portfolio that Stands Out<\/h2>\n\n\n\n<p>Your portfolio website should reflect your brand and style. Keep it clean, organized, and easy to navigate. Here\u2019s what makes a good portfolio website:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Highlight Your USP&nbsp;<\/h3>\n\n\n\n<p>Creating a portfolio that truly stands out is a multifaceted task, and one of the key factors that can set you apart from other web designers is identifying and emphasizing your Unique Selling Proposition (USP). Your USP is essentially what makes you distinct, what you excel at, and what you offer that others may not.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"780\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Unique-Selling-Point-Source-StudioGuild-Agency-.png\" alt=\"\" class=\"wp-image-2191\" style=\"width:400px;height:390px\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Unique-Selling-Point-Source-StudioGuild-Agency-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Unique-Selling-Point-Source-StudioGuild-Agency--300x293.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Unique-Selling-Point-Source-StudioGuild-Agency--768x749.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Unique Selling Point &#8211; Source: <a href=\"https:\/\/www.studioguild.com.au\/work\">StudioGuild Agency<strong>&nbsp;<\/strong><\/a><br><\/figcaption><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\">How to Highlight your Unique Selling Point on your Portfolio site<\/h4>\n\n\n\n<p>\u2705 On your homepage banner or headline:<strong> <\/strong>Place your USP prominently on your homepage. Use a concise, compelling headline that immediately communicates what sets you apart. For example, &#8220;Creating Stunning Real Estate Websites\u201d if your USP is about real estate.&nbsp;<\/p>\n\n\n\n<p>\u2705 In your \u201cAbout\u201d page: Dedicate a section of your &#8220;About&#8221; page to elaborating on your USP. Explain why you&#8217;re unique, what drives your passion, and how it benefits your clients.<\/p>\n\n\n\n<p>\u2705 In your case studies: Feature case studies that exemplify your USP. Highlight projects where you applied your unique approach or expertise to achieve outstanding results.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Show Your Personality With a Spotless Design<\/h3>\n\n\n\n<p>Let your personality shine through in your content and design. A little personal touch can make your website more engaging, and so does a professional logo. Your website functions as your portfolio, so choose the right theme or, even better, create a website that leaves a lasting impression with your design.<\/p>\n\n\n\n<p>As an example, that\u2019s how <a href=\"https:\/\/huemor.rocks\/\">Huemor<\/a> shows that they are memorable and result-oriented. It\u2019s bold, clear, and\u2026memorable, plus using an astronaut emphasizes the results and data-driven philosophy.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Example-of-a-branding-Source-Huemor-.png\" alt=\"Example of a branding - Source:  Huemor \n\" class=\"wp-image-2192\" style=\"width:600px;height:307px\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Example-of-a-branding-Source-Huemor-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Example-of-a-branding-Source-Huemor--300x153.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Example-of-a-branding-Source-Huemor--768x393.png 768w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Example-of-a-branding-Source-Huemor--745x380.png 745w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Example of a branding &#8211; Source:&nbsp; <a href=\"https:\/\/huemor.rocks\/\">Huemor<\/a>&nbsp;<br><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">How to Represent your Personality on your Portfolio Site<\/h4>\n\n\n\n<p>To represent your personality on your portfolio site, use a personal bio, friendly language, and a professional photograph, and incorporate elements of your design style and personal interests into the site&#8217;s aesthetics.&nbsp;<\/p>\n\n\n\n<p>\u2705 Use high-quality, professional profile pictures and logos.<\/p>\n\n\n\n<p>\u2705 Use your design style to reflect your branding. If your uniqueness lies in minimalist design, ensure your site&#8217;s design mirrors this aesthetic. Use videos, animations, or interactive content to convey your message in a visually engaging way.<\/p>\n\n\n\n<p>\u2705 Incorporate distinctive icons or visual elements that represent your USP and own branding. For example, if you&#8217;re known for being a bold agency, create a bold design.<\/p>\n\n\n\n<p>\u2705 Craft compelling content that reinforces your branding. Write articles, blog posts, or insights that showcase your expertise and passion.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Structure the Main Portfolio Page<\/h3>\n\n\n\n<p>This is the page where you showcase a list of all your completed projects. It should be visually appealing and well-organized to entice potential clients to explore your work. Arrange your portfolio logically, for instance, from most recent to older projects or from your most prominent works for well-known brands. Additionally, create distinct sections for various types of work or clients, ensuring visitors can effortlessly navigate using a consistent layout for each project such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>User-friendly navigation (including filters and customized search options)<\/li>\n\n\n\n<li>Client&#8217;s name<\/li>\n\n\n\n<li>Categories and services provided<\/li>\n\n\n\n<li>Concise summary explaining your role and contributions<\/li>\n\n\n\n<li>Links to in-depth case studies<\/li>\n\n\n\n<li>Links to live project&nbsp;<\/li>\n\n\n\n<li>Eye-catching images or videos<\/li>\n<\/ul>\n\n\n\n<p>I think that Brand Vision is doing a great job here:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"947\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Extract-of-the-portfolio-main-page-Source-Brand-Vision-.png\" alt=\"Extract of the portfolio main page - Source: Brand Vision\n\" class=\"wp-image-2193\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Extract-of-the-portfolio-main-page-Source-Brand-Vision-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Extract-of-the-portfolio-main-page-Source-Brand-Vision--253x300.png 253w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Extract-of-the-portfolio-main-page-Source-Brand-Vision--768x909.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Extract of the portfolio main page &#8211; Source: <a href=\"https:\/\/www.brandvm.com\/\">Brand Vision<\/a><br><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">4. Plan Your Structure for the Case Study Itself<\/h3>\n\n\n\n<p>After clicking the &#8216;View Case Study&#8217; button, clients will be directed to the project&#8217;s details. Typically, the following elements are included when presenting a specific project:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Project Descriptions: <\/strong>Provide context for each project, explaining the goals, your role, and any notable achievements.<\/li>\n\n\n\n<li><strong>The impact that you had: <\/strong>Describe, with easy words, the solutions you found for this client.<\/li>\n\n\n\n<li><strong>High-quality images and videos:<\/strong> Include images, videos, or other media to illustrate your work.&nbsp;<\/li>\n\n\n\n<li><strong>Links:<\/strong> Don\u2019t forget the links to live projects you&#8217;ve worked on. Client or employer information<\/li>\n\n\n\n<li><strong>Date: <\/strong>Potential clients are more interested in recent projects than the ones from 10 years ago as technology evolves. Make sure to keep your portfolio up-to-date.<\/li>\n\n\n\n<li><strong>Testimonials: <\/strong>Gather the quotes or reviews from a satisfied client to build credibility when presenting the project. If you don\u2019t have any reviews yet, ask satisfied clients to write recommendations you can display on your site.<\/li>\n<\/ul>\n\n\n\n<p>As a source of inspiration, I find the BrandVision case study particularly compelling, as it checks all the essential criteria. While <a href=\"https:\/\/www.brandvm.com\/case-studies\/sylvestre-co\">the case study is more extended and features more visuals on their website<\/a>, we&#8217;ve divided it into two parts to save space.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/G8gTsVSUs7pT229r0W9QL33WU-A3Ta-E6po1sLWje16yseW-cX7UJEg4f_bJCzGbamwISNtWZVmLOtx1sMJpNm6t1-g8yimgdrKLyNVDwLrWIHJ08Jta4j-AgJ1kWlLUjSMWWSuasUq4eAdIqwb0uWU\" width=\"286\" height=\"827\"><\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/jKG6gAXSglI-Y01r9VNCT53Q159eqQgVHcoBkSnLwt-jWoJEy4pH0qKT0amGTC5D4-WwmH5LXf_LxP3R7qTaytHBB0ByuOQJY5UKvN23zviiTMZkEzcRS8dQl1HHEf6BC8emYDV107IfII-T8FQK05U\" width=\"286\" height=\"608\"><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">How To Design A Portfolio Template that Stands Out on WordPress<\/h4>\n\n\n\n<p>There are two approaches to designing a portfolio template. You can either opt for a pre-made demo from a well-regarded design author like Divi, The7, or Avada, or you can craft your unique design, which can have a more significant impact as it&#8217;s entirely custom and hand-crafted.<\/p>\n\n\n\n<p>\u2705 If you go for option 1, Divi has a dedicated Portfolio module that is very easy to use, plus you can also install a template:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"437\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Portfolio-module-Source-Divi.png\" alt=\"Portfolio module - Source: Divi\n\" class=\"wp-image-2195\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Portfolio-module-Source-Divi.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Portfolio-module-Source-Divi-300x164.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Portfolio-module-Source-Divi-768x420.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Portfolio module &#8211; Source: <a href=\"https:\/\/www.elegantthemes.com\/\">Divi<\/a><br><\/figcaption><\/figure>\n\n\n\n<p>\u2705 If you choose the second option, you can still benefit from page builders like Elementor and its dynamic options. This allows you to create a template layout that you can use for each project. Here are a few guidelines:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a custom post type and name it \u201cProjects\u201d. I used <a href=\"https:\/\/wordpress.org\/plugins\/custom-post-type-ui\/\">CPT UI<\/a>, which is free:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"322\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/New-custom-post-types-Projects-Source-CPT-UI.png\" alt=\"New custom post types \u201cProjects\u201d - Source: CPT UI\n\" class=\"wp-image-2196\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/New-custom-post-types-Projects-Source-CPT-UI.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/New-custom-post-types-Projects-Source-CPT-UI-300x121.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/New-custom-post-types-Projects-Source-CPT-UI-768x309.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">New custom post types \u201cProjects\u201d &#8211; Source: <a href=\"https:\/\/wordpress.org\/plugins\/custom-post-type-ui\/\">CPT UI<\/a><br><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add custom fields (e.g., Name of the client, explanation about the project, Year, Testimonial, link to website). I used <a href=\"https:\/\/wordpress.org\/plugins\/advanced-custom-fields\/\">ACF<\/a>, which is also free.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"397\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/New-custom-fields-for-my-portfolio-Source-ACF.png\" alt=\"New custom fields for my portfolio- Source: ACF\n\" class=\"wp-image-2197\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/New-custom-fields-for-my-portfolio-Source-ACF.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/New-custom-fields-for-my-portfolio-Source-ACF-300x149.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/New-custom-fields-for-my-portfolio-Source-ACF-768x381.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">New custom fields for my portfolio- Source: <a href=\"https:\/\/wordpress.org\/plugins\/advanced-custom-fields\/\">ACF<\/a><br><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use a page builder that supports dynamic content like Elementor and start designing your template:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"483\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Designing-a-custom-post-types-template-for-my-portfolio-with-Elementor-Source-Elementor.png\" alt=\"Designing a custom post types template for my portfolio with Elementor - Source: Elementor\n\" class=\"wp-image-2198\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Designing-a-custom-post-types-template-for-my-portfolio-with-Elementor-Source-Elementor.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Designing-a-custom-post-types-template-for-my-portfolio-with-Elementor-Source-Elementor-300x181.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Designing-a-custom-post-types-template-for-my-portfolio-with-Elementor-Source-Elementor-768x464.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Designing a custom post types template for my portfolio with Elementor &#8211; Source: <a href=\"https:\/\/elementor.com\/\">Elementor<\/a><br><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">5. Use Tags and Categories for Smooth Navigation and Usability<\/h3>\n\n\n\n<p>Add a navigation menu to guide visitors to different sections of your portfolio, ensuring visitors can find what they&#8217;re looking for quickly. You can also use tags and categories to classify each project accurately. That\u2019s what 500designs did:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"418\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Tags-and-categories-for-portfolios-Source-500designs-.png\" alt=\"Tags and categories for portfolios - Source:  500designs\n\" class=\"wp-image-2200\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Tags-and-categories-for-portfolios-Source-500designs-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Tags-and-categories-for-portfolios-Source-500designs--300x157.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Tags-and-categories-for-portfolios-Source-500designs--768x401.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Tags and categories for portfolios &#8211; Source: <strong>&nbsp;<\/strong><a href=\"https:\/\/500designs.com\/work\/everytable\/\">500designs<\/a><br><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Search and Filter Functionality (for extensive portfolios): <\/strong>If you have a large portfolio, consider adding search and filter options to help visitors find specific projects or categories. Brand Vision excels in this regard and can categorize their work using tags such as SEO, branding, development, web design, and UX.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"363\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Filters-with-tags-Source-Brand-Vision.png\" alt=\"Filters with tags - Source: Brand Vision\n\" class=\"wp-image-2201\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Filters-with-tags-Source-Brand-Vision.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Filters-with-tags-Source-Brand-Vision-300x136.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Filters-with-tags-Source-Brand-Vision-768x348.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Filters with tags &#8211; Source: <a href=\"https:\/\/www.brandvm.com\/\">Brand Vision<\/a><br><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">How to Create a Filterable Portfolio on WordPress<\/h4>\n\n\n\n<p>You can create a filterable portfolio on WordPress using either a plugin or custom code.<\/p>\n\n\n\n<p>\u2705 You can use a plugin like <a href=\"https:\/\/wordpress.org\/plugins\/tlp-portfolio\/\">Portfolio \u2013 WordPress Portfolio Plugin<\/a> &#8211; This portfolio WordPress plugin has advanced filters that allow you to display your items by various criteria.<\/p>\n\n\n\n<p>\u2705 Alternatively, you can manually code a solution using custom post types and taxonomies, but this method requires more technical expertise.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Write Up a Meaningful About Page&nbsp;<\/h3>\n\n\n\n<p>Craft a compelling &#8220;About&#8221; page to create a meaningful connection with your audience. In your bio, highlight your background, skills, and pertinent experiences, providing visitors with insight into your professional journey. Introduce your team with individual professional photographs, emphasizing the human element behind your work. You can also display your professional achievements and certifications as badges of expertise. Personalize your portfolio by weaving your story and values into your narrative, allowing visitors to resonate with your mission.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/huemor.rocks\/\">Huemor<\/a> checks all the boxes with a short story about how it started and where they are now. It also gives key figures with a touch of humor. Finally, you can see the team with laid-back photographs.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"810\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Original-About-page-that-conveys-a-message-Source-Huemor-.png\" alt=\"Original About page that conveys a message - Source: Huemor \n\" class=\"wp-image-2203\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Original-About-page-that-conveys-a-message-Source-Huemor-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Original-About-page-that-conveys-a-message-Source-Huemor--296x300.png 296w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Original-About-page-that-conveys-a-message-Source-Huemor--768x778.png 768w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Original-About-page-that-conveys-a-message-Source-Huemor--64x64.png 64w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Original About page that conveys a message &#8211; Source: <a href=\"https:\/\/huemor.rocks\/\">Huemor<\/a>&nbsp;<br><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">7. Make Your Contact Information Prominent<\/h3>\n\n\n\n<p>Ensure easy accessibility by offering clear contact information, making it effortless for visitors to reach out and connect with you. Offer multiple ways for visitors to contact you, such as a contact form, email address, and links to your professional social media profiles.<\/p>\n\n\n\n<p>On their contact page, <a href=\"https:\/\/huemor.rocks\/\">Huemor<\/a> asks you to take action. It\u2019s not a traditional contact page. You book a \u201cstrategy session\u201d and the CEO (the video below) tells you that the team can improve your website by 20%.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"505\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Original-contact-page-Source-Huemor-.png\" alt=\"Original contact page - Source: Huemor \n\" class=\"wp-image-2204\" style=\"width:600px;height:379px\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Original-contact-page-Source-Huemor-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Original-contact-page-Source-Huemor--300x189.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Original-contact-page-Source-Huemor--768x485.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Original contact page &#8211; Source: <a href=\"https:\/\/huemor.rocks\/\">Huemor<\/a>&nbsp;<br><\/figcaption><\/figure>\n\n\n\n<p>Taking a somewhat traditional approach, the <a href=\"https:\/\/tinyfrog.com\/contact\/\">Tiny Frog agency<\/a> also provides all the essential information:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"787\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Clear-contact-page-Source-Tiny-Frog-Agency-.png\" alt=\"Clear contact page - Source: Tiny Frog Agency\n\" class=\"wp-image-2205\" style=\"width:600px;height:590px\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Clear-contact-page-Source-Tiny-Frog-Agency-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Clear-contact-page-Source-Tiny-Frog-Agency--300x295.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Clear-contact-page-Source-Tiny-Frog-Agency--768x756.png 768w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Clear-contact-page-Source-Tiny-Frog-Agency--64x64.png 64w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Clear contact page &#8211; Source: <a href=\"https:\/\/tinyfrog.com\/contact\/\">Tiny <\/a>Frog Agency<br><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">How to Create An Advanced Contact Form (for Quote)<\/h4>\n\n\n\n<p>\u2705 <strong>WPForms: <\/strong>WPForms is a user-friendly and feature-rich form builder plugin for WordPress. With its drag-and-drop interface, you can easily create quote request forms, and it offers various templates and advanced features for customization. WPForms is available in both free and premium versions.<\/p>\n\n\n\n<p>\u2705 <strong>Formidable Forms: <\/strong>Formidable Forms is another powerful form builder plugin for WordPress. It enables you to create complex forms, including quote request forms, with ease. It offers advanced features like conditional logic, file uploads, and integration with payment gateways. While it has a free version, more advanced functionality is available in the premium version.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"435\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Intuitive-drag-and-drop-builder-to-build-a-quote-Source-Formidable-Forms-.png\" alt=\"Intuitive drag-and-drop builder to build a quote - Source: Formidable Forms\n\" class=\"wp-image-2206\" style=\"width:600px;height:326px\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Intuitive-drag-and-drop-builder-to-build-a-quote-Source-Formidable-Forms-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Intuitive-drag-and-drop-builder-to-build-a-quote-Source-Formidable-Forms--300x163.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Intuitive-drag-and-drop-builder-to-build-a-quote-Source-Formidable-Forms--768x418.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Intuitive drag-and-drop builder to build a quote &#8211; Source: <a href=\"https:\/\/formidableforms.com\/build-wordpress-quote-form\/\">Formidable Forms<\/a><br><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">8. Add Call to Action (CTA)<\/h3>\n\n\n\n<p>Encourage visitors to take action, such as contacting you for inquiries and a quote, the recommended option is to have a prominent CTA button \u201cGet a quote\u201d in the navigation bar that stands out from the regular elements.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"217\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/CTA-Example-from-Astras-demo-Source-Astra-.png\" alt=\"CTA Example from Astra\u2019s demo - Source: Astra\n\" class=\"wp-image-2207\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/CTA-Example-from-Astras-demo-Source-Astra-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/CTA-Example-from-Astras-demo-Source-Astra--300x81.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/CTA-Example-from-Astras-demo-Source-Astra--768x208.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">CTA Example from Astra\u2019s demo &#8211; Source: <a href=\"https:\/\/websitedemos.net\/construction-company-02\/\">Astra<\/a><br><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">How to Add a Call-To-Action Button to Your Navigation<\/h4>\n\n\n\n<p>\u2705 Add some CSS with a class in your navigation menu section, such as \u201cCTA-button\u201d, then add your own CSS in the editor.&nbsp;<\/p>\n\n\n\n<p>\u2705&nbsp; Use a theme that comes with custom navigation options, including a CTA.<\/p>\n\n\n\n<p>\u2705Use a website builder like Elementor that lets you design your header and add custom buttons in the navigation bar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">9. Elevate Your Web Design Portfolio with High-Quality Content and Images<\/h3>\n\n\n\n<p>Display your finest work with high-resolution images and utilize before-and-after comparisons to showcase design enhancements. Using clear and high-quality images to showcase your web design portfolio is essential. Clear images not only captivate your audience but also provide a detailed view of your work. They offer a better understanding of your design aesthetics and attention to detail, making a strong impression on potential clients. With clear visuals, you can effectively communicate your skills and creativity, building trust and engagement with your portfolio visitors.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.bopdesign.com\/before-after\/\">Bop Design has a great before+after section<\/a> that shows the improvements they brought to their clients.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"454\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Before-After-section-Source-Bop-Design-.png\" alt=\"Before -After section - Source: Bop Design\n\" class=\"wp-image-2208\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Before-After-section-Source-Bop-Design-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Before-After-section-Source-Bop-Design--300x170.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Before-After-section-Source-Bop-Design--768x436.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Before -After section &#8211; Source: <a href=\"https:\/\/www.bopdesign.com\/before-after\/\">Bop Design<\/a><br><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">How to do a Before\/After With WordPress<\/h4>\n\n\n\n<p>\u2705 Use the WordPress editor and add two images side by side&nbsp;<\/p>\n\n\n\n<p>\u2705 Use a plugin like Before &amp; After image by Divi Supreme that lets your visitors slide between two images at the same time. (Tips: don\u2019t use this on mobile or tablet).&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"383\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Before-After-image-module-Source-Divi-Supreme-.png\" alt=\"Before-After image module - Source: Divi Supreme\n\" class=\"wp-image-2209\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Before-After-image-module-Source-Divi-Supreme-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Before-After-image-module-Source-Divi-Supreme--300x144.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Before-After-image-module-Source-Divi-Supreme--768x368.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Before-After image module &#8211; Source: <a href=\"https:\/\/www.elegantthemes.com\/modules\/before-after-image\/\">Divi Supreme<\/a><br><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">10. Explain Your Work in Detail (Detailed Case Studies)<\/h3>\n\n\n\n<p>For each project include case studies that explain your design process, the challenges you faced, and how you overcame them. This helps potential clients understand your approach.<strong> <\/strong>It could also be an interview with your client that highlights the benefits they got after working with you.&nbsp;<\/p>\n\n\n\n<p>I particularly like the <a href=\"https:\/\/500designs.com\/work\/everytable\/\">app that the 500design<\/a> agency did for \u201cEverytable\u201d. In the case study, they explain the user-centric strategy they follow:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"577\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Case-Study-and-explained-the-strategy-Source-500designs-.png\" alt=\"Case Study and explained the strategy - Source:  500designs\n\" class=\"wp-image-2210\" style=\"width:600px;height:433px\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Case-Study-and-explained-the-strategy-Source-500designs-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Case-Study-and-explained-the-strategy-Source-500designs--300x216.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Case-Study-and-explained-the-strategy-Source-500designs--768x554.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Case Study and explained the strategy &#8211; Source: <strong>&nbsp;<\/strong><a href=\"https:\/\/500designs.com\/work\/everytable\/\">500designs<\/a><br><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">How to Create a Case Studies Page&nbsp;<\/h4>\n\n\n\n<p>\u2705 Choose a theme that offers a case study template with key figures like Avada:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"703\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Example-of-a-list-of-case-studies-by-Avada-theme-Source-Avada-.png\" alt=\"Example of a list of case studies by Avada theme - Source: Avada\n\" class=\"wp-image-2211\" style=\"width:600px;height:527px\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Example-of-a-list-of-case-studies-by-Avada-theme-Source-Avada-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Example-of-a-list-of-case-studies-by-Avada-theme-Source-Avada--300x264.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Example-of-a-list-of-case-studies-by-Avada-theme-Source-Avada--768x675.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Example of a list of case studies by Avada theme &#8211; Source: <a href=\"https:\/\/avada.website\/marketing-consultant\/case-studies\/\">Avada<\/a><br><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">11. Regular Updates<\/h3>\n\n\n\n<p>Keep your portfolio up-to-date by regularly adding new projects, articles, or updates about your skills and services. Clients may be suspicious if they don\u2019t find any recent work. &nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">12. Social Proof, Awards, and Clients<\/h3>\n\n\n\n<p>If you&#8217;ve received industry awards or recognition, feature these prominently. Social proof can be a powerful persuader.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"461\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Awards-Source-Brand-Vision-.png\" alt=\"Awards - Source: Brand Vision\n\" class=\"wp-image-2212\" style=\"width:600px;height:346px\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Awards-Source-Brand-Vision-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Awards-Source-Brand-Vision--300x173.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Awards-Source-Brand-Vision--768x443.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Awards &#8211; Source: <a href=\"https:\/\/www.brandvm.com\/\">Brand Vision<\/a><br><\/figcaption><\/figure>\n\n\n\n<p>If you are fortunate to have Google or TikTok as clients, or similar well-known brands, we recommend featuring their logos on your website through a logo carousel:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"295\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Clients-Source-500designs-.png\" alt=\"Clients - Source: 500designs\n\" class=\"wp-image-2213\" style=\"width:600px;height:221px\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Clients-Source-500designs-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Clients-Source-500designs--300x111.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Clients-Source-500designs--768x283.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Clients &#8211; Source: <a href=\"https:\/\/500designs.com\/work\/everytable\/\">500designs<\/a><br><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">13. Make Sure Your Projects and Your Portfolio Are Responsive&nbsp;<\/h3>\n\n\n\n<p>Make sure that your portfolio is visually and functionally appealing on a range of devices, such as smartphones and tablets. In today&#8217;s digital landscape, responsiveness is crucial, and not having a mobile-friendly design could result in the loss of potential clients.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">How to Display Your Projects Using Mockups for Various Screens&nbsp;<\/h4>\n\n\n\n<p>\u2705 As an example, you can visit <a href=\"https:\/\/www.freepik.com\/free-photos-vectors\/desktop-tablet-mobile\">Freepik<\/a> and search for &#8220;tablet mobile desktop.&#8221; You&#8217;ll find numerous free mockups that you can download and replace the blank screens with your projects on each device.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"413\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Mockups-for-showcasing-responsive-projects-Source-Freepik-.png\" alt=\"Mockups for showcasing responsive projects - Source: Freepik \n\" class=\"wp-image-2214\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Mockups-for-showcasing-responsive-projects-Source-Freepik-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Mockups-for-showcasing-responsive-projects-Source-Freepik--300x155.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Mockups-for-showcasing-responsive-projects-Source-Freepik--768x396.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Mockups for showcasing responsive projects &#8211; Source: <a href=\"https:\/\/www.freepik.com\/free-photos-vectors\/desktop-tablet-mobile\">Freepik<\/a>&nbsp;<br><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">&nbsp;14. Analyze and Improve Website Performance<\/h3>\n\n\n\n<p>Impress visitors with a good-looking AND fast website. Too many web designers want to impress, but they overlook their website performance. Use analytics tools to monitor how visitors interact with your site and make adjustments based on the data. On top of that, run regular audits on PageSpeed Insights so you can check how your performance is going over the months and improve it if needed.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">How to Test and Improve Your Portfolio Website\u2019s Performance<\/h4>\n\n\n\n<p>\u2705 Begin by assessing your PageSpeed Insights report to identify and resolve any highlighted issues.<\/p>\n\n\n\n<p>\u2705 Implement performance improvements using a WordPress plugin such as <a href=\"https:\/\/wp-rocket.me\/features\/\">WP Rocket<\/a>, which enables caching, code optimization, and the introduction of lazy-loading for images.<\/p>\n\n\n\n<p>\u2705 Further optimize your website by using <a href=\"https:\/\/imagify.io\/features\/\">Imagify<\/a> for image compression and WebP and Avif conversion, ensuring faster load times and an improved user experience.<\/p>\n\n\n\n<p>Now that you&#8217;re equipped with valuable insights on creating a standout web design portfolio, the next step is to guarantee that your website operates at optimal speed. Achieving top-notch performance involves essential practices such as image optimization, which encompasses compression and WebP conversion. In the upcoming section, we&#8217;ll introduce you to Imagify, a powerful tool that simplifies and streamlines image optimization for your portfolio.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Make Your Images Lighter with Imagify<\/h2>\n\n\n\n<p>Imagify is one of the best image optimization plugins designed to enhance your images by reducing their weight through <strong>compression and WebP and Avif conversion<\/strong>. Imagify has a very user-friendly interface and takes care of the heavy lifting for you, including bulk compression.\u00a0<\/p>\n\n\n\n<p>It comes with a <a href=\"https:\/\/imagify.io\/blog\/reduce-image-size-without-losing-quality\/\">Smart mode that intelligently reduces file sizes while preserving quality<\/a>. Feel free to see for yourself; the quality remains unchanged.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"596\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Image-compression-with-Imagify-Source-Imagify-.png\" alt=\"Image compression with Imagify - Source: Imagify\n\" class=\"wp-image-2215\" style=\"width:600px;height:447px\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Image-compression-with-Imagify-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Image-compression-with-Imagify-Source-Imagify--300x224.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Image-compression-with-Imagify-Source-Imagify--768x572.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Image compression with Imagify &#8211; Source: <a href=\"https:\/\/imagify.io\/features\/\">Imagify<\/a><br><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>\ud83d\ude80 Performance Hint: Imagify is commonly used to improve portfolio website performance by serving optimized images to your visitors.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Here&#8217;s how to use Imagify to make your portfolio images lighter and boost performance:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Download and activate the <a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\">free Imagify plugin<\/a>.<\/li>\n\n\n\n<li>Create an account to receive your API key and add your API key in the installation wizard.<\/li>\n\n\n\n<li>Go to <strong>Settings<\/strong> &gt; <strong>Imagify. <\/strong>Here, you can decide if you want to optimize images on upload, if you want to back up your original images, and if you want to change from Smart Compression to Lossless.&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"397\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/General-Settings-Source-Imagify-.png\" alt=\"General Settings - Source: Imagify\n\" class=\"wp-image-2216\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/General-Settings-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/General-Settings-Source-Imagify--300x149.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/General-Settings-Source-Imagify--768x381.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">General Settings &#8211; Source: <a href=\"https:\/\/imagify.io\/features\/\">Imagify<\/a><br><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Smart compression vs Lossless: Which mode to choose?<\/strong> <br>&#8211; With Smart compression (lossy), you get the best compression rate with optimal quality (<em>recommended because the change in quality is invisible to the naked eye<\/em>). <br>&#8211; With lossless, the compression rate is lower, but the quality remains untouched.<br><br>\ud83d\udcd6 Read more about <a href=\"https:\/\/imagify.io\/blog\/lossless-vs-lossy-image-compression\/\">lossy (Smart) vs lossless<\/a> in our dedicated guide.&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Scroll down to the <strong>Optimization WebP Format<\/strong> tab. To achieve a reduced image size, it&#8217;s essential to convert your JPG files to WebP. Therefore, check both boxes: <strong>Create a WebP version of images<\/strong> and <strong>Display images in WebP format on the site.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"254\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/WebP-Conversion-in-one-click-Source-Imagify-.png\" alt=\"WebP Conversion in one click - Source: Imagify\n\" class=\"wp-image-2217\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/WebP-Conversion-in-one-click-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/WebP-Conversion-in-one-click-Source-Imagify--300x95.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/WebP-Conversion-in-one-click-Source-Imagify--768x244.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">WebP Conversion in one click &#8211; Source: <a href=\"https:\/\/imagify.io\/features\/\">Imagify<\/a><br><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the \u201c<strong>Save &amp; go to bulk optimizer\u201d<\/strong> button to optimize your images in bulk. If you have a large number of images to optimize, you can use this feature to reduce the file size of all your existing images at once.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"194\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/save-button.png\" alt=\"Save buttons - Source: Imagify\n\" class=\"wp-image-2218\" style=\"width:600px;height:146px\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/save-button.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/save-button-300x73.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/save-button-768x186.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Save buttons &#8211; Source: <a href=\"https:\/\/imagify.io\/features\/\">Imagify<\/a><br><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>And the final step, hit the \u201c<strong>Imagif\u2019em all button<\/strong>\u201d. <em>You can also go to the WordPress library and optimize your images one by one.<\/em><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"335\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Bulk-Optimization-Source-Imagify-.png\" alt=\"Bulk Optimization - Source: Imagify\n\" class=\"wp-image-2219\" style=\"width:600px;height:251px\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Bulk-Optimization-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Bulk-Optimization-Source-Imagify--300x126.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Bulk-Optimization-Source-Imagify--768x322.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Bulk Optimization &#8211; Source: <a href=\"https:\/\/imagify.io\/optimizer\/#page\">Imagify<\/a><br><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>That\u2019s it. Imagify converted our file to WebP and saved almost 70% of the total file size. It went from roughly 280KB to 90 KB.&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"203\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/WordPress-library-with-the-new-compressed-file-Source-Imagify-.png\" alt=\"WordPress library with the new compressed file - Source: Imagify\n\" class=\"wp-image-2220\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/WordPress-library-with-the-new-compressed-file-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/WordPress-library-with-the-new-compressed-file-Source-Imagify--300x76.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/WordPress-library-with-the-new-compressed-file-Source-Imagify--768x195.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">WordPress library with the new compressed file &#8211; Source: <a href=\"https:\/\/imagify.io\/optimizer\/#page\">Imagify<\/a><br><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Let&#8217;s perform a quality control inspection to ensure the compression maintains the image&#8217;s high quality. Everything appears to be in order; the compressed image on the right still maintains its excellent appearance:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"598\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Quality-is-untouched-after-compression-with-Imagify-Source-Imagify-.png\" alt=\"Quality is untouched after compression with Imagify - Source: Imagify\n\" class=\"wp-image-2221\" style=\"width:600px;height:449px\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Quality-is-untouched-after-compression-with-Imagify-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Quality-is-untouched-after-compression-with-Imagify-Source-Imagify--300x224.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/11\/Quality-is-untouched-after-compression-with-Imagify-Source-Imagify--768x574.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Quality is untouched after compression with Imagify &#8211; Source: <a href=\"https:\/\/imagify.io\/optimizer\/#page\">Imagify<\/a><br><\/figcaption><\/figure>\n\n\n\n<p><a href=\"https:\/\/imagify.io\/pricing\/\"><strong>Pricing<\/strong><\/a><strong>: <\/strong>With Imagify, you can compress up to 20 MB of data for free each month. If you need more, you can select from two cost-effective paid plans: either $9.99 per month for unlimited data or $5.99 per month for 500 MB.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>Remember that your portfolio website should reflect your brand and style. Keep it clean, organized, and easy to navigate. Regularly update your portfolio to showcase your latest work and accomplishments. Solicit feedback from colleagues, mentors, or friends to ensure your portfolio is engaging and effective.<\/p>\n\n\n\n<p>If you have many different projects to showcase with high-quality images, then we suggest you use image compression. When executed correctly, image compression enhances loading speed and elevates the overall user experience. We saw it with Imagify! Interested in the compression of your images? You can <a href=\"https:\/\/imagify.io\/optimizer\/#page\">try Imagify for free<\/a>.&nbsp;<\/p>\n<a href=\"https:\/\/imagify.io\/optimizer\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter bottom-blog-post-cta\" src=\"https:\/\/imagify.io\/blog\/wp-content\/themes\/imagify\/assets\/img\/gwic-1.png\" alt=\"Imagify, decrease the size of your images, increase the speed of your website: try it for free\" width=\"690\" height=\"190\"><\/a>","protected":false},"excerpt":{"rendered":"<p>Read the article and learn the 14 key steps to create a web design portfolio website and make it memorable.<\/p>\n","protected":false},"author":8,"featured_media":2226,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-2190","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-image-optimization"],"_links":{"self":[{"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts\/2190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/comments?post=2190"}],"version-history":[{"count":10,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts\/2190\/revisions"}],"predecessor-version":[{"id":2380,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts\/2190\/revisions\/2380"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/media\/2226"}],"wp:attachment":[{"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/media?parent=2190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/categories?post=2190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/tags?post=2190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}