 Hello, WhatCamp attendees, it's a pleasure to greet all of you. As a result of a delay in the delivery of my visa and passport, I regret to inform you that I won't be able to attend this WhatCamp in person, so I decided to record my session and present with all of you. Thanks to the organizer of the WhatCamp Vancouver to give me this special opportunity. I am Ishtia Khan, currently working as a product designer in Elegant Themes. I have collaborated with renowned companies such as Thymium, Zoom Shaper, Enclave, Persec of Space and early stage startups affiliated with Y Combinator. So let's dive into the sessions. The Power of Visual Storytelling in OF Design The power of visual storytelling in OF design lies in the ability to engage and captivate visitors on a website through compelling visual elements, graphics and images. Visual storytelling leverages the innate human affinity for visuals to convey a narrative, evoke emotions and communicate a message effectively. Here's why it's important and how it can benefit OF design. Number 1 Emotional Connection Visual storytelling can tape into emotion and create a stronger connection with the audience. A well-designed website can use visuals to evoke feelings of joy, empathy, excitement or even urgency depending on the intended message. Number 2 Memorability People tend to remember information better when it's presented visually and in a storytelling format. Visuals make content more memorable which is essential for living a lasting impression on visitors. Number 3 Engagement Visual storytelling can keep users engaged and encourage them to explore the website further. Engaged visitors are more likely to stay longer, interact with your content and take desired actions. Number 4 Simplicity and Clarity Complex information can be simplified and made more digestible through visual storytelling. Infographics, charts and diagrams, for example, can convey data and concepts more clearly than text alone. Number 5 Brand Identity Visual storytelling helps reinforce your brand identity. Consistent use of colors, imagery and design elements can create a recognizable and memorable brand image. Number 6 User Experience Effective visual storytelling enhances the overall user experience. It can guide users through your content, make navigation more intuitive and improve the overall usability of your website. Number 7 Conveying Information Visual storytelling can be used to explain processes, tell the history of a company or showcase the benefits of a product or service in a way that's easy to understand and engage in. Number 8 Differentiation In a crowded online space, visual storytelling can help your website stand out. It allows you to showcase your unique story, values and offering in a way that separates you from competitors. Number 9 Mobile Optimization Visual content often performs well on mobile devices, making it an essential component of responsive web design. Professional users tend to engage more with visuals than with long textual content. Number 10 Call to Action Effective visual storytelling can lead users towards specific calls to action, CTS, whether it's signing up for a newsletter, making a purchase or sharing content. People can encourage these actions. In summary, the power of visual storytelling in web design is about creating a more engaging and memorable user experience, while effectively conveying your brand message and encouraging desired actions. When done, throwfully and strategically, visual storytelling can be a potential for achieving your website's goal. How to become a good visual storyteller? In order to be a successful visual storyteller, you have to be a strong visual designer first. Become a good visual designer? Let's dive into it. There is 3 hours formula. Explore, Design, Read. So number 1 tip is Store design in folders. Make every section count. Make separate folders. Like header, hero, about services, testimonials, blogs, contract, footer, etc. Taking and saving screenshot of your favorite designs while browsing. As I mentioned before, every day we watch lots of design stores. Some of them are very pretty, some of them are pretty amazing and very useful for your upcoming project. So take the right screenshot of the websites or the designs you visited and store it in the separate folder. Like the header folder, hero folder, about folder, services folder, testimonials folder, blogs folder, contract folder, footer folder, etc. So if you continue it for 6 months or one year, there will be lots of design assets in your folders that can help you to make amazing websites very fast later. So Eat, Sleep, Design, Repeat. The only key of a successful visual designer, same process, Eat, Sleep, Design, and Repeat. Let's make a quick website homepage. Fine, think like you are cooking your favorite meal. For cooking you need ingredients, right? So we need ingredients for our web design projects. So what is web design ingredients? Web design is a multi-faceted discipline that involves various elements, principles and components working together to create visually appealing user-friendly and functional websites. These elements are often referred to as the ingredient of web design. Here are some key ingredients of web design. Number one, Laot, which is very, very important. The arrangement of content on a web page, including the placement of text, images and other elements. An oil-structured layout helps guide users and presents information logically. Number two, typography. The choice of fonts and their styling, size, weight, color, etc., on a website. There are three effects, readability and the overall visual appeal of the site. Remember, identify your purpose. Before you do anything else, first identify the purpose of your design. What information do you want to convey? What is the medium for your design? Identify your audience. After determining the purpose of your design, identify your audience. This step is crucial because age and interest will influence your font option. Look for inspiration. Look at the work of other designers. Try to understand how they made their decisions for type. Good pairing inspiration. Beyond just fonts, also look at font pairing inspiration. Font pairing is just as important as the fonts themselves. Good font pairing helps establish visual hierarchy and improve the readability of your design. Determine font sizes. The next step after setting on a font combination is determining sizing. Create a typography style guide. The last step of the process is to create a style guide for your typography to help standardize type X across your designs. Number three, color palette. The selection of colors used throughout the website colors evoke emotion and can convey the brand's identity or establish a mood. Number four, images and graphics. Visual elements such as photographs, illustrations, icons and logos that enhance the design and engage users. Optimizing images for web is crucial for performance. Number five, navigation. The menu and navigation structure that helps users move through the website. Intuitive navigation is essential for a positive user experience. Number six, white space. The empty space between elements on a web page, white space helps improve readability. Highlight key content and create a balanced layout. Number seven, responsive design. Ensuring that the website is accessible and functions well on various devices and skin sizes, including desktop, tablets and smartphones. Number eight, UI elements. Design components like buttons, fonts, checkbox and drop-down menus that allows users to interact with the site. Consistent and user-friendly UI elements enhance usability. Number nine, content. High quality, relevant text and multimedia content that provides value to the audience. Well-written content is crucial for SEO and user engagement. Number ten, call to action. Prominent element like buttons, links, banners that encourage users to take specific actions such as making a purchase, signing up for a newsletter or contacting the business. Number eleven, loading speed. Optimizing the website's performance to ensure fast loading times. Slow loading sites can lead to user frustration and high bounce rates. Twelve, accessibility. Designing the website to be accessible to people with disabilities. This includes providing alternative text for images, ensuring keyboard navigation and adhering to accessibility standards. Thirteen, branding. Reflecting the brand's identity through design elements, including logos, color schemes and messaging. Consistency in branding, bytes, trust and recognition. Mission. Fourteen, content management system or CMS. Selecting and configuring a CMS, obviously WordPress, to manage and update the website's content easily. So in a conclusion, web design is a dynamic field and these ingredients can be combined and customized in countless ways to create unique and effective websites tailored to specific goals and audience. Successful web designers carefully balance these elements to create visually appealing, functional and user-centered online experiences. That's all. You know how to cook delicious websites now. Here are some pro tips that I regularly use while I designing for my company or clients. So number one, research on your topic very well. I mean very well. And make a list of your competitors. This is very important. So without knowing your competitors, you don't know how to be successful. So research on your competitors, make a list and collect all of the research inspiration like it can be layout, font, colors, etc. And create a mood board. Number four, design without color and images fast, like low fidelity wireframe, black and white, that will save your lots of time. As a designer, I know that I have to give all of my times by thinking what color I should use, what images I can bring so that my design stops there or pulls there for sudden off time. And I again think of it, what color I will apply to look it visually great. So one thing I decided and I find out that without the color, without the images, if I make my design black and white fast, the layout. And after that, I apply my color choosing and my photographic choosing or icon choosing. So that can save a lot of time, trust me, it saves a lot of time. Five, think every section is a hero or header. So design each section separate. You can combine all of the sections later. Which means every section should be like your hero. So we know basically in every web design, the hero section, the header section is much more appealing, much more fantastic than rest of the web pages that we scrolled out. So think about like my every section is a hero. So you can design every section better as a hero section, it will be like all of the pages looks like fantastic. Number six, after you design all of the section, apply color, apply stunning images and illustration and your design is ready to rock. This formula every day, you will get better. Happy designing. Thank you guys and I see you all in the next WhatCamp. Bye bye.