Transcripts
1. Introduction: Hi everyone, welcome and thank you for checking out the course. My name is Rinaldo and number running your website design and conversion rate optimisation, AUC, for more than four years now, through my agency, I worked with enterprise companies and you record start-ups like Airbnb, Samsung, SoftBank, 3M, SAP, EA, and many more. All of these big companies have a big budget is spent to try to optimize their websites so they can generate more leads and customers, and they do this all the time. But what about someone who's a one-person company or maybe a small business or a creative, we're just trying to get their services and products. They're not having a marketing budget or prior expertise about the field is not a good excuse to ignore the basics of conversion rate optimisation. A solid onetime run through your hero section can be a worthy investment for a business of any size. And that's why I created this class. This class is designed to help you rapidly optimize your hero section by applying best practices from the conversion rate optimization field or any marketing budget or previous knowledge of their field. Here or section is the portion of a website that's visible without scrolling. If you're wondering why is this class only about a hero section when a usual website or landing page has more sections on it. Well, as it turns out, one study shows that it takes 50 milliseconds or 0.05 seconds for a visitor to form an impression about a website. So people judge websites by its cover, and that's a fact. And a website's first impression on its visitors is largely dependent on the hero section or what is in the industry called above the fold. It's called the above the fold because back in the newspaper days, an ad or story that ran on the front page above the fold got maximum visibility. And if that story didn't attract attention, newspapers didn't sell. So naturally, a lot of website designers, Margaret is in copywriters, spend a lot of time thinking about what to put on the hero section because this is the first thing your visitors see when they come to your website. And it's very important because a 100% of your visitors will see this action of your website. And it's my job in his class to help you make them stay in this class, we will cover all the elements of a hero section and every element of the heterosexual recover. We will do so in three parts. Firstly, we'll focus on the psychological principle we're trying to use. Secondly, we will create an example using best practices from the conversion rate optimization field. And finally, we will Style element using the modern user interface and user experience practices. In this class, I'm putting this strong emphasis on why are we doing something that we're, we're doing it. We're gonna be using cognitive and behavioral psychology research to try to understand and predict how a user will behave in a certain context on our website. And once we understand that behavior, we can easily alter are designed to boost our conversions and ultimately generate more leads and customers. Every lesson in this class is broken down into easy to follow concrete steps that are based on scientifically proven frameworks. And if you go through all of these steps, by the end of this class, you will have a brand new hero section you can use in your business or your own project. I guarantee you this new hero section will blow your old conversion rates away. I'm excited, I hope you're excited and let's get started.
2. Heading Psychology: Hi, welcome to the first lesson of the class. In this lesson we're going to talk about headings, psychology, and writing copy for your heading. Writing copy for your website is tough. Writing persuasive copy is even tougher when you need to persuade someone through writing, you can feel lost. Which words should you use? How should you frame your offer? How do you sell but out appearing sleazy? Although those worries are understandable. Luckily, copywriting is an art and science. In this video, you'll learn seven cotton writing tips based on academic research that will maximize the persuasiveness of your website heading. Frustration isn't the only goal of copyrighting. You will also learn how to convey your message into clearest, most effective way possible. At the end of every tactic I outline, I will provide my example which will reference a hypothetical and imaginary hero section for a productivity app that I'm creating in this class. Because distant examples will hopefully help you apply these techniques to your own project, whether it's an app or something else. To purpose over here, a section heading is simple. There get your website visitors to understand that you can solve their problem. If you can get an immediate to virtual head nod when they land on your homepage, you'll have a much higher chance of getting your visitors to take the next step when you're reading is unnecessarily complex. Readers perceive you to be less intelligent. We have psychological principal called processing fluency, to thank for that. If you have trouble processing written content, your brain experiences and negative emotion, it then miss attributes that negative emotion to the content that you're reading. To increase the fluency of your copy and to prevent those harmful evaluations, you need to simplify your message. So firstly, you'll learn three research back techniques to boost the clarity and persuasiveness or you're writing tactic one. Use positive frames. Negative frames describe an absence, what isn't happening? Positive frames, on the other hand, describes something more tangible. So negative frame would be don't be late while a positive frame would be arrive on time. Another example is don't drink excessively. Compared with a positive frame, drink responsibly. Negative frame would be don't use negative frames and a positive frame would be used positive frames. Since we need more mental resources to process negative frames, they reduce comprehension and degrade the impact of your message. You can use negative frames occasionally that's completely normal, but you should use positive frames for the majority of your copy on the website. Here's another example for my imaginary productivity app. Negative frame would be our app won't disrupt your daily routine. While a positive frame would be our app if fits perfectly into your daily routine. Tactic to convey intangible concepts using metaphors. Given the importance of concrete features, you'll notice a problem when it comes to marketing. Tried to visualize the following features. Quality, powerful, reliable. Are you having trouble? Well probably you can't visualize intangible concepts and your readers shared a same difficulty. That's our metaphors can help. For example, life insurance companies use ideas associated with various symbols such as umbrellas, travelers, rocks, Prudential Insurance Company, and hence all state to convey qualities of protection, sturdiness, and support. Metaphors, tangible and the intangible they provide their readers would have concrete mental image. Enhancing the impact and persuasiveness of your message. Here's a potential example for my productivity app. Our app is very powerful. I go from an intangible description of power to our app, has Zeus like power, which is a metaphor that vividly describes the idea of our app being powerful. Tactic three, transform generic claims into concrete terms. Genetic claims are to play their everywhere. Every other website you look at, you'll find statements like our support team is very quick, our customers love us, or softwares are reliable. Don't get me wrong. The underlying messages are great, but it sounds like you're selling rather than telling. Watch what happens when you transform those generic claims into concrete terms. We'll get you an answer within 24 hours. 568 companies love our software. You will have 100% uptime guaranteed. Suddenly your message becomes more believable and persuasive. In this case, you're telling rather than selling, our app can help you be more productive, or app can double your productivity. I went from a generic claim, took and Crete term of doubling your productivity. We've just spent two or three techniques to boost the clarity of your writing. With a greater ease of processing, your readers indirectly experienced a positive emotion that will be missed attributed to you and your content or the following technique, you'll learn a copywriting tip to directly trigger a positive emotion in your reader. If you've ever tried to learn copywriting, you've probably heard the advice, right. Copy that is clear and direct. So protect case. Why do you rarely see direct claims online? If you flip through a magazine, you'll never see an ad saying, tide will clean your clothes really well. Sure you could argue that those words don't grab attention, and that's true. But direct claims are also less persuasive. Why? Well, the answer involves self-generated inferences researched by my query and Philips in 2005. Direct claims are explicit, there's no other interpretation. Indirect claims, however, such as metaphors, require interpretation. We infer meaning, and that's the key. By making an inference, we generate a meaning. Compare these headlines. Direct one, title, clean your clothes really well. Indirect, the freshness of the outdoors. Now in liquid form with a direct headlines, there's no other meanings. So need to rely on information source, which in this case is the biased advertiser bid to indirect headline, you construct the meaning. You might imagine the outdoors associating a brisk and refreshing emotion with tide. Regardless of your conclusion, you generate the meaning, you will become the source. So your brain places more trust in the information. You don't need to use metaphors or figurative language. You just need to adjust your syntax. For example, if I wanted to pitch my newsletter where I send content like this, direct example would be my newsletter is jam-packed, would actionable content. Indirect example would be this course is jam-packed with actionable content and newsletter is no different. In the first example I said in my newsletter is jam-packed would actionable content. It's a direct claim. There is no missing gap. Into second, I use indirect claim so you can extract conclusions or self. I use logical reasoning to extract a self-generated conclusion. I essentially say that a equals B, which in this case is class equals actionable. And C equals a, which is newsletter equals class. To imply finally, the C equals B or the newsletter is actionable using an indirect claim to generate meaning. Your solution should always relieve some type of pain that the reader is experiencing. If you want readers to appreciate your solution, you need to remind them of the pain. So poked a wound, showed that it hurts before revealing your solution, agitate the underlying problem. Why is it important? Why is it problematic? How is it negatively affecting your visitors? Then reveal your solution. We're biologically structured to avoid pain. So if you can trigger that feeling of pain, your readers will be more likely to pursue your solution. I will outline three techniques and tips to agitate the problem. Tactic five emphasized their disdain for the problem. Opposing attitudes can be stronger as supporting attitudes. For example, bizarre a petty found at we show stronger support for political candidates when our attitude is framed as opposing getter candidate, rather to supporting the original candidate. Instead of combusting readers about the benefits of your solution emphasized their disdain for the underlying problem. If we're running copy to promote your product or service, don't start with the benefits, start with negative emotions their readers experience when they encounter a problem you're solving. For example, if I was writing copy to promote a hypothetical productivity app on building, instead of starting with benefits, I would start with the negative emotions that readers experience from a lack of productivity, you feel stressed and overwhelmed. If you like, there aren't enough hours in the day, you missed important deadlines. Your boss thinks you're incompetent, you are spent less time with your family. Readers begin empathizing with those descriptions. They imagine themselves experiencing those negative emotions. They become frustrated with those problems. Once they develop that opposition, then present your solution. If you're a copy starts, which are solution, you'll kill that empathy process. We just would become closed-minded, resisting any benefits that you offer. So always start by emphasizing your readers disdain for the underlying problem. Example, being productive is important. Being unproductive is stressful. Tactic six, demonstrate an impact on others. You can achieve a powerful effect by demonstrating an impact on other people, especially when the impact is negative. Considered to messages that were presented in the hospital. Frame. One was hand hygiene prevents you from catching diseases. Frame two was hand hygiene prevents patients from catching diseases. The second frame influenced more hospital staff to wash their hands in an experiment ran back grant and Hoffman in 2011. So when impossible, explain how other people will be negatively affected if visitors don't complete or call to action. Here's my example. Our app saves you time versus spent more time with your family and loved ones. Which one sounds better? Tactics seven, label your visitors, but a noun. Nouns January to stronger and more stable preferences. For example, Walton and Banaji in 2004, gave participants various statements like, Jennifer drinks, coffee, alot, Jennifer's spends a lot of time indoors. Jennifer watches baseball a lot. Those statements emphasize verbs. They answered the question, what does Jennifer do? And the researchers gave different statements to other participants. For example, Jennifer's a coffee drinker, Jennifer's and endorse person. Jennifer's a baseball fan. Those statements emphasized now they answer the question, who is Jennifer? Both sets of statements convey the same meaning. However, the second set generated a stronger impact. With nouns. Those traits seemed central to Jennifer's identity. How can you use that trick? For one, you can label your audience with a funky noun. Probably the most known example is believers, but you don't need to go that far. He's just simpler idea for you. If you're a content creator, instead of thanking readers for doing something like reading your content. Thank them for being something, for example, being a fan of your content. Second frame will generate a stronger impact on their attitude toward your content. And example, if you enjoy being productive, you'll love our app. If you're a productivity feed, you'll love our app. Into second example, I'm labeling my visitors but unowned. We've just spent over seven frameworks. You wouldn't have to use all of them for your heading. You can combine a couple of them are just simply use one. Also, if you think your message will be clearer, you can add a subheading to your main heading and have a secondary message that way. Here's what two of those can look like combined this, the example I'm going to be using my hero section later, I combine two of the tactics and examples I created previously. My heading says, double the time you spend with your loved ones. And my subheading says, AP fits perfectly into your daily routine. First one is demonstrating and impact on others. And the second one is using a positive frame sort of visitor doesn't think of it as just another useless app that disrupts his or hers daily life. Now it's your turn. Open up any simple text editor and using the framers I outline, write down your ideas with the concrete steps and examples that provided. You just need to adjust them so to fit the context or what you are selling. Write it down before we move on to a different element of the hero section in the next lesson. But a few small changes you can make a large impact on the persuasiveness of your message. See you in the next lesson.
3. Call-to-Action Button Psychology: Now's the time to talk about the copy for a call to action button. Call to action or CTE buttons are the buttons you use in your website and on your landing pages to guide users towards your goal is the part of the hero section that the user needs to click in order to take the action you want them to take. Some common examples of call-to-action buttons are add card buttons, free trial sign-up buttons, and download buttons. Some marketers obsess over their buttons, even though some of that obsession is unwarranted, there's a lot of merit to focusing on your CTA button because most conversions in your funnel will originate from a single click. And if you increase the conversion rate at the beginning of your funnel, you'll increase conversions at each stage of your funnel. The first tactic to focus on in writing a copy of the button is to use first-person wording. There's a lot of blog posts and conversion optimization case studies online that claim to have increased conversions by using first-person rooting for the call to action text. For example, start your free trial versus start my free trial. The second seems to perform better, and that effect seems consistent in my experience too. So what's causing the consistent lift? Two factors, mental stimulation and perceptual fluency. Research shows that people develop a more favorable attitudes towards the stimulus if they mentally interact with it. For perceptual fluency, research shows that you're more likely to complete a task if you can envision yourself performing that action using first-person and wording, you apply both Insights. First, your visitors mentally evaluated call-to-action in terms of their personal use. And with third-person routing, they consider your call to action from a third-person perspective, which isn't as strong. Secondly, because they envision themselves performing that call to action, they experience a higher level of conceptual fluency. They can see themselves performing that action, so they become more likely to do it. However, button tags shouldn't go on and on and on. It's good to use specific action-oriented button text. You may be tempted to stretch out your button decks, but that would be a bad move. Ideally, you'll want to keep that button text to two or five words. For example, let's look at what base camp used to use. Buttons said Give base camp retry. It's free for 60 days. This call to action button is probably okay, but it's nearing the red zone. You could put any extra information you have under a button. Sorry, if you want to give your visitors additional information about free shipping, no credit card required sign-up, or tell him how many subscribers are already on your email list. You can add it to a text label under your button. And that's exactly what base camp did after AB testing. It's better to keep the button copy short and take extra information and add it under the button. Here's a bonus tip for your button to your call to action is a button and you need it to look like one. So adding a narrow to your call to action that will help you clearly distinguish it as a button that is there to be clicked on to move on to the next step or page, indicating in this way that a call to action is clickable will make it much easier for people to see automatically which parts of the page are interactive and may lead them to engage without any frustration. Using an arrow also conveys a sense of moving forward and progressing in the process, which will also give people a sense of satisfaction as well as encourage them to commit to the task. The principle that lies behind this behavior, It's called visual queuing and has been extensively researched by many scientists. Our brains, from the majority of the images we see and like to be given direction about what to focus on. So using visual cues like arrows, helped to draw attention towards certain elements your visitors brains will be immediately drawn towards familiar visual elements, in this case, arrows, as they noticed and understand these visuals more quickly than any other information on the page. And utilizing this kind of visual stimulus is therefore an effective way to draw immediate attention to your call to action, which will increase the chances and turn that your visitors complete the desired action. For example, clicking on a button, call-to-action buttons done right, can dramatically increase conversions on your website. In this lesson, we covered first-person wording, adding extra information in the label and the button and using arrows and the button. Here's the copy for my button for my imaginary productivity app. We're done with the copywriting part of the class. So before we move on any further, you should have your heading copy and call-to-action button copy or a subheading copy and your button labeled copy are optional if you haven't done it yet, open up any simple text editor or note-taking gap and write down your ideas using the frameworks provide us so far. See you in the next lesson.
4. Hero Image Psychology: A hero image is the first main photo or graphic that you see at a top of a website. The goal of the hero image is to immediately draw visitors in and showed them what your site and your content are all about. We're going to cover two psychological tactics that will help you choose a photograph or graphic to motivate the visitor on your website to take action. Didactic One is to encourage mental interaction. If you only remember one thing from this lesson, remember this one. This tactic is very powerful, easy to implement an virtually unused by most businesses. When businesses create product images, the often depict a product without much thought. Starting now, always the picture products so that you achieve an underlying goal to encourage mental interaction. Here's an example. Elder and Krishna in 2012, I showed participants an ad for a coffee mug. And it turns out participants were more likely to purchase the mug when the handle, but spacing to right towards the dominant hand of most people. The researchers attributed at 5'10 to heighten simulation when the handles were facing the right, participants mentally interacted with a product to a greater degree. In other experiments, that effect disappeared when participants were hauling something. When participants have their dominant hand available, that corresponding visual product depiction leads to higher purchase intentions. In short, alderman Krishna founded Mental interaction sparks more purchases. In other words, when participants envision themselves interacting with a product, they become more likely to purchase it. Now you might be thinking, That's great Rinaldo, but my product doesn't have a handle. No worries. The researchers conducted other experiments and found support for other types of simulations. Here are some ideas. The research has also found support for the following examples. Orient S symmetrical products toward the right, toward the dominant Hand of most people. Place instruments or he tends to those on the right. Oriented product openings toward the viewer. Remove products from their packaging. Post a video or graphic of the person actually using the described product. Post a screenshot of your app. If you're selling software, post a screenshot and I can't tell you how many times I've looked at the software website and I don't use a single screenshot of their app or features. For example, since I'm creating a hero section for a productivity app, I'm not only going to use a screenshot of an app, I'm going to create a to-do list in the app or the items that people have on a regular basis. And this way, I emphasize visitors mental interaction with the app. They imagine themselves using this tool and creating those items and crossing them off to list all of the given examples help create a mental stimulation of product use. Research suggests that visual representation or products encourages mental interaction and results in heightened buying intentions. Visitors can visualize themselves using that product. They will feel more inclined to buy it because it's easy for them to imagine the product as a part of their life. Tactic to, is to orient gazes towards your call to action. We possess an evolutionary trait to follow people's gazes, to direct attention toward your call to action. Or we int images of people so that they're looking at your button. As humans, we experienced an inborn tendency to follow people's gazes. That trade helped our ancestors discovered threats more easily. And thanks to evolution, that trait is still engraved in our amygdala. You're gonna apply the tendency in your hero section. If you're here, a section contains pictures of people oriented them towards your call to action. You'll attract more attention toward that area. You should usually avoid orienting people in the pictures toward the viewer because those front-facing images will attract attention toward the person instead of the important parts of your hero section or page. Although the increased intention is due to gaze following, the increased desire is due to processing fluency. Generally, the faster and more easily we're able to process information, the more positively v evaluate dendrite formation and says it's an evolutionary heritage to follow people's gazes. We process that information easily and innately by positioning people in photos toward your call to action, your website visitors will be naturally drawn towards those areas and they will have a stronger desire to convert. In this lesson, we covered two tactics to occur. It's mental interaction. Orient the gaze if you're using models in your imagery. On the right is the example I'm going to use says I'm creating a hero section for an imaginary productivity app. I chose an example screenshot owed it to do a step failed, but real tasks. Before we move on, chooser create an image or a graphic you will using your hero section based on a two tactics we covered in this lesson. You can also use these principles everywhere on your website, like for example, a product pages. Not just the hero section, but it also applies to every lesson in this class anyway. See you in the next lesson.
5. Layout Psychology: So far we've created all the elements we need for our hero section. We have our heading, call to action button copy and our image. Some of you might also have a sub-heading and a label for a call to action button two. Now we want to position them together somehow, but this lesson is still not about design, but we'll get to that later. There's some principles from psychology research that we can apply to our layout T2. And we need to keep these principles front of our mind before we start designing our hero section. The first principle is the Aesthetic Usability effect. The Aesthetic Usability Effect study by Don Norman in 2002 states that the more aesthetically pleasing a product is to more usable it is perceived to be, and the more likely it is to therefore be used regardless of functionality. The reason for this Aesthetic Usability Effect is that when a product or service is aesthetically pleasing to a consumer, they build an emotional relationship with it. This relationship breeds a sense of loyalty and consumer will stick by their choice even if they encounter problems. But this in part can be attributed to processing fluency we mentioned before. According to block, visual appearance is the first thing a potential buyer notices about a product. And they are more sympathetic to faults are failures if a design is aesthetically pleasing, leading them to believe that the better looking caution is the better option overall. For example, numerous studies have found that technically, Apple products are not as usable as others on the market, meaning people get tripped up more frequently and have a harder time understanding how to use the product then with other similar devices. However, Apple users either don't notice or don't care because Apple products are so aesthetically pleasing. The same concept has been found true of Mini Cooper cars which have a lot of quirks, like the speedometer being located or their radio should be and the clock found on the ceiling. But people forgive these minor anomalies simply because they liked the weight looks. This principle has numerous applications have up design when a customer visits your website that are likely to prefer to websites they enjoy looking at and feel good about using, even if they don't perform the tasks as effectively as they did on a website, they perceive to be uglier. Now that's powerful. Because of that, it is very important to foster a positive attitude to your website by using a static web design. And the upcoming design lessons we will work on achieving that effect. But for now it's important that we understand the reasons why. I also want to share another principle, position images and graphics on the left. When you perceive stimuli toward one solder, your field of vision, do you opposing hemisphere of your brain processes that information? A stimulus presented in the left visual field is initially received and processed by the right hemisphere. And the stimulus presented in the right visual field, initially projected to end process by the left hemisphere. Due to that neuroanatomical structure, your right hemisphere processes information presented to board a leftover hero section. And those opposing hemispheres are the key because the right hemisphere is better suited to process images. And the left one is more logical and verbal. Placing image on the left hand side of the text enhances their processing of the whole message. That this is very interesting because you probably noticed that the majority of the websites and align position di graphical content on the right side of their hero section. Why is that? Well, I don't know. It's hard to tell. Maybe it feels more natural for the creators of these websites. Maybe it's something that we're used to seeing. But now we know research claims otherwise. So here's our chance to differentiate yourself. This phenomenon is called cerebral lateralization, and it's attributed to human hemispheric asymmetry, which was researched by Helga in 1990. And various studies have shown a significant influence of the lateralization mechanism and several cases, research participants described the appearance of an important element as more beautiful if it was in the right visual field that was researched by b or more in 1985. Research participants also rated products and logos better depending on their positioning. This was researched by getting ECF ski in 1990. Participants remember DLM is better if there were positioned following the suggestions of hemispherical brain assymetry rules. This was researched by Betty and Brewer enter 1000. I also want to note that some researchers have obtained results that are not in agreement with hypothesis or brain lateralization. But it seems that the results may depend on the dimensions of the images and text and even some cultural factors, for example, they found and some of the Asian countries, these rules were not applicable. So at these two principles in mind, in the next lesson, it's time to dive into FISMA and start creating our layout. If you already don't have the thick mat count, go to pick my.com and sign up for free account. It's completely free and easy to use. Also, don't worry if you've never used it before. If you're already using any other tools like Sketch, Adobe XD, you can totally continue using data. All of these tools can do what we need in the upcoming lessons. So we won't be using any of the complex features and functionalities. So I'll see you in the next lesson.
6. Layout Design: Now we start designing our hero section. Remember how in the last lesson we understood the importance of the Aesthetic Usability principle. Well, there is one way important design heuristic that we can use to achieve our website looking more aesthetically pleasing. And that's why space, or to be more precise, starting with too much whitespace, let me explain. This is how most marketers, designers, encoders do it. The other elements. And then they start adding a bit of margin and a bit of padding to the elements, five pixels and then ten pixels. And they end up with something that looks really cramped when designing for the web, whitespaces almost always added to a design. And if something that looks a little too cramped, you add a bit of marginal padding and then you add it again until things look better. Brown with this approach is that elements are only given the minimum amount of reading room necessary to now look actively bad. To make something actually low-grade, you usually need more whitespace and you think, so here's a great suggestion for you. One of the easiest ways to clean up a design is to simply give every element a little more room to breathe. White-space should be removed, not added. A better approach is to start by giving something away too much whitespace, then remove it and tell you happy with the results. You might think that you'd end up with too much white space this way. But in practice, what might seem like a little too much when focused on an individual element ends up being closer to just enough in the context of a complete user interface. So let's get into sigma to adjust our layout and start working on our hero section. I opened up FISMA and I've started a new project. I only have the copy for my elements here that I wrote in this class so far. And if you don't have yours already, now would be a good time to radios. Before we move on, in the last lesson, I outlined why it's important to position graphical elements on the left and why it's important to position text underrate. So I'll do that first. Before we can do anything. I need a frame. In a sigma. I can create a frame by either pressing enough on my keyboard or just going over here and clicking on frame. And once I do that, I have many options here and says I'm designing for the web. I'm just gonna click on desktop. And now I have my frame and I can get started. Since we are solely focusing on the hero section at not necessarily the navigation and the logo. This is going to be a bit to maybe a bit too high so we can decrease its height, but we can do that later too. So we said graphical element on the left. So I'm just going to bring my elements here. And text textual elements are on the right. So that's cardiology. And we're gonna be here. I'm just gonna decrease. I had a bit. Okay. Now, obviously we're going to be changing the size of these in the later lessons. Now are just positioning our content and getting ready to go. Even though we're going to be changing the size of these elements later on, I already positioned too much white space in between, so that later we don't fall into a trap where we have two little white space in between elements. One final thing when I'm designing for desktop is I'm gonna go on a frame and I'm going to go on the layout grid. And we're going to change it to a column grid. And I usually work with 12 columns. I stretch it out. I also leave that with auto and I use a 128 margin and gutter of 16. This serves a purpose that your content doesn't lead out of the edge of these columns. Because usually when you're designing for the web, you want all the elements in oldest sections on your website to follow certain alignment. These columns Server purpose so that it can ally my content within these columns and can turn these off and on by clicking on this little i here. Now I can see them and now I can see them when I need them. So now it's your turn and just the layout of your own hero section of sigma. And don't forget to add a lot of whitespace and then start removing it when you're creating your layout. Now there we have our layout in order we can move on to our next elements in the next lesson.
7. Heading Design: While this lesson is titled heading design, we're basically going to be styling all of our text elements. In this lesson, we're going to choose a font and create a font scale with thousands of different typefaces out there to choose from. Separating the good from the bad can be an intimidating task and is certainly a subjective endeavor. If you already have some of your favorite type faces, go with them. But developing a Nia for all the details that make a good typeface can take years and you probably don't have years. So I'm going to share a few tricks you can use to start picking out high-quality typefaces right away. Before I get into concrete suggestions, I'm going to give you a couple of general guidelines when choosing fonts. The first one is to ignore typefaces with less than fi weights. This isn't always true, but as a general rule, typefaces that come in a lot of different weights tend to be crafted with more care and attention to detail than typefaces with fewer weights. Many fond directories like Google Fonts will let you filter it by number of styles, which is a combination of the available weights as well as the metallic variations, all those weights agreed way to limit the number of options you have to choose from is to crank that up to ten plus to account for italics on Google Fonts specifically, that it cuts out 85% of the available options leaving you with less than $0.50 serifs to choose from, and that it will prevent you from feeling overwhelmed. The second suggestion is to trust the wisdom of the crowd. If a font is popular, it's probably a good font. Most fond directories will let you sort by popularity. So this can be a great way to limit your choices. And this is especially useful when you're trying to pick out something other than a neutral typeface, picking a nice serif would some personality, for example, can be tough. So leveraging the collective decision-making power of thousands of other people can make it a lot easier. Every design or font has some sort of personality. A banking site might try to communicate, secure, and professional, while the trend in your startup might have a designer feels fun and playful On the surface, giving a design in particular, personality might sound abstract, but a lot of it is determined by a few solid concrete factors. And topography plays a huge part in determining how a design fields. If we want an elegant or classic look, you might want to incorporate a Serif typeface in your design. Where I playful look, you could use a rounded Sans Serif. And if you're going for a planar loop or whenever rely on other elements to provide a personality and neutral sensory works rate. And since I'm creating a hero section for a fictional productivity app, and I want to portray feelings of communists inefficiency. I'm not gonna deviate too much and I'm going to be using a new tool, sans serif later when I get into FISMA, choosing font sizes without a system is a bad idea for two reasons. It leads to annoying inconsistencies in your designs and slows down your workflow. So how do you define a type system? For interface design, a practical approach is to simply pick values by hand. Most designers use a linear or modular scales. I won't even get into those. But this way by baking values by hand, you wouldn't have to worry about sub-pixel rounding errors. And you have total control over which sizes exist instead of outsourcing debt job to some mathematical formula. Here's an example of a scale that works well for most projects, I always have these sizes ready to go. So here we are in fig moaning, here's my foreign skill. I usually use 1214161820243036486072 pixel font size. This should be enough to cover all of you needs for the complete website design, let alone the heterosexual design. So it's constrained just enough to speed up or decision-making, but it isn't so limited as to make you feel like you're missing a useful size. And now that we chose a font and created a scale, let's apply it to our hero section. I said I'm going to use a neutral san serif and we're gonna be using rubato as my aren't choice because it's a neutral san-serif. So let's apply it. For my heading. I can now look at my fine skill. And I think I'm gonna go for 36 pixels from my heading, applied 36 pixels. There we go. Now you can see why I turned on to layout grid in the previous lesson. I just turn it on now. And now I know that my content needs to be within these layouts. And you can see that this is, this is a bit too much for the first-line. Yes, this should be good enough. Let's turn off our layer grouped. Okay, for my subheading, I'm going to stick with it. But for the size, I think I'm gonna go with the 16 round button text. I'm gonna go with robot O2. And it'll go and choose a 16 font size, though, is still doesn't look like a button and we'll figure it out in a future lesson. And for the label for my button, I'm going to go for a twelv. And you can see, I'll, these sizes are here, so that's how I chose these. By looking at these, I can see that I can achieve a certain visual hierarchy in terms of size by choosing 36 from a heading and then 16 from a sub-heading, and 12 for my label text. I also wanna establish visual hierarchy between the main heading and subheading. So for the subheading, I chose a smaller size than from a heading error. Please keep in mind that relying too much and font size, the controller hierarchy is a mistake. It often leads to primary content that's too large and secondary content that's too small. You could argue that these two, this one is way bigger than this one. So maybe we can have this one to 18 I'm trying to make is, instead of leaving all of the heavy lifting to font-size alone, try using font-weight or color to do the same job. For example, making a primary element Balder lets you use a more readable font sizes enough and does a better job at communicating. It's important anyways. So I'm going to set the heading font-weight at 700 or bold. And I'm also going to make it all caps. So let's go here and make it all caps. Now it's in three lines. I don't want it. Let's see if it's bleeds over. Those fine. Great. So, so we can use font, weight, or color to do the same job to portray visual hierarchy. So for example, I'm gonna make my subheading regular, but I'm going to change its color and we're going to change it to a fourth or 3D 4D, and it should be gray. That's great. Now you can see an obvious hierarchy within this element and this one, you don't have to use what he pixels and up for the heading size which most websites do, because that's how most people think you need to achieve visual hierarchy where making something way bigger than the element at follows that big element. But that's not the case that you can see. This one is only 36. Most websites use of 42 and up. So it's 36 and this one is 18. And you can clearly see which one is more important, which one is primary, in which one is secondary. So I'm going to be using bold or 700 for my butt index due. And then at the end for my, for my button label. And we're going to review also really libido, we haven't switched that and I'm going to be using italic. I'll choose the same color or four f, four d 4D, same color as my subheading, using a softer color, a softer color for supporting texts, like the subheading at debited label instead of a tiny font size, it makes it clear that a text is secondary while sacrificing less on readability. Now you might argue that this text is tiny, That is true. But then keep in mind that this dx will be under the button and we don't want to distract or users and our visitors too much from this button since that's going to be our main called actions. So we're just supporting this button by this text and it's still readable when, when the user opens the website lab like this. So to recap, try and stick to two or three colors are dark color for primary content, like the main heading. Agree for secondary content like the subheading. And similarly, two font weights are usually enough for user interface work. A normal font weight, 400 or 500, depending on the font for most text and a heavier font-weight, 600 or 700 for attacks. Do you want to emphasize? Stay away from font weights under 400 for User Interface because they work for a large headings, but they are too hard to read at smaller sizes. So if you're considering using a lighter weight to a de-emphasized some text, use a lighter color or smaller font size instead. Now it's your turn. Adjust the font choice, the size, the weight, and color are good text elements and FISMA and see you in the next lesson.
8. Call-to-Action Button Design: We applied a size, scale and a font stories to our button in the last lesson. So let's choose a color for it. Now. There's lot of signs out there on the psychology of colors. But in practice, you really just need to pay attention to how different colors fuel to you. Blue, for example, is safe and familiar. Nobody ever complains about blue. Gold might say expensive and sophisticated. Pink is a bit more fun but not so serious. While I could lay out a full Orvieto psychology or colors and such, it just isn't super practical even when we split test for button collars behind the scenes, even more randomness can occur. So a lot of it is just about what looks good and feels good to you. But one thing you do need to remember though, and that is to make sure you choose a contracting button color. Mackey today, our ancestors acquired an important trait and that is the ability to detect contrast into surrounding environment. They needed that trait to detect predators are life threatening stimuli. Without debt trade, people would die off. So thanks to natural selection, you still possess that ability. Your attention is naturally drawn towards stimuli that are visually most noticeable. So use that insight, increased the visual importance of your call to action button. Choose Button colors that contrast with the rest of your page. And that contrast will naturally attract attention, but it's pretty obvious, right? Obviously contrasts will attract more attention while there's more at play here too. And again, it comes down to processing fluency. We mentioned in the previous lessons, processing fluency, the ease and speed with which we process information research by Alter and Oppenheimer in 2009 states that whenever a concept enters our mind quickly and easily, a produces a pleasant sensation in our brain. And we then falsely attribute that pleasantness with our evaluation of the stimulus and be evaluated as stimulus more favorably simply because we were able to process it more easily. So how does that relate to button colors? Contrasting button colors increases processing fluency. Due to the contrast. The act of clicking your button will enter visitors minds more easily. That iis will then generate a pleasant sensation in their brain. The act of clicking your button, we'll see more appealing, so they will be more likely to do it. So choose a contrasting button color. For my button color, I'm going to just read, since my app screenshot already has a lot of that color in it. So I wanted to match, but I'm careful that achieve the contrasting effect, of course. So we're going to change my font color to white after I create my button. So I can press are on my keyboard or simply go here and select Rectangle. And I'm just going to create a rank tangle that I can drag and drop it down here so I can position my text inside. Let's see if its text, its central inside. Yes, seems like it. I need to be careful that achieved the contrasting effect between the button color and the background. But at the same time, I need to be careful that I choose the contrasting effect, wit to my text within the button and the button background. So I mean, just aligned to split my headings. So, so for my button color, I'm going to choose a dB of four, C, three, F. It's the same color. As the road color and a screenshot. And from my font color, I'll switch that to white. That's it looks good. As small of a detail as it sounds. If and how much you are. Rounded corners in your design can have a big impact on the overall feel of small border-radius is pretty neutral and doesn't really communicate much of our personality and it's own. A large border radius starts to feel more playful. While low border-radius at all feels a lot more serious or formal, whatever you choose, it's important to stay consistent. Mixing square corners with rounded corners in the same interface almost always looks worse than sticking with one or the other. So now we're going to adjust our button borders on, for example, assuming that this tool is for marketing and creative teams within accompany. So since I'm not selling to individuals but businesses, I'm going to add a bit of a border, but not too much. I don't come across as too playful. I think five pixel border radius should do the trick. The border radius option is here. I'm just going to add five pixels. Yes, that looks just enough in my opinion. If you want to go for a more playful look, you can go for 25 border-radius and dash should do the trick. But I'm gonna stick divide. Okay. Now let's add some shadow tour button. We want to create an effect like the button is raised off of the page. So it will be easier for the visitor to notice it and click on it. Creating this effect might look complicated at first, but it actually only requires you to understand one fundamental rule. Light comes from above. So let's switch to FISMA and add some shadow. Because the top and bottom edges of this button are both flat, it would be impossible to see both of them at the same time. And people generally look slightly downward towards their screen. So a raised element will block some of the light from reaching the area below the element. We can achieve this effect by selecting our rectangle. Then adding a small dark box shadow with a slight vertical offset, because we only want the shadow to appear below the element. So it can go here to affect you or how do you have a drop shadow selected by default? And we can now adjust its settings. We just want a slight vertical offset, I think do pixels should do to trick. Don't get carried away with the blur radius. A couple of pixels is plenty. And these sort of shadows should have pretty sharp edges. At the bottom of the button is sharp itself. And then for the spread, I can go at 20%. That's it. Let's see two different, you can definitely see some subtle shadow underneath the button. And that's exactly the effect we wanted to do. While we were writing copy for a call to action button, we used an arrow to convey movement. And we talked about the importance of creating a sense of moving forward and progressing in the process, which gives visitors a sense of satisfaction and encourages them to commit to the task. So now we can style up our error element two and add it to some additional visual importance. And at the end, add it to our button. Here I have an error element that I downloaded online. I can now change it's color to white since we are going to be putting it on this button with the same background color. I'm me. I'm going to select constrained proportions element, which means that whenever a decrease height or width of this element acute as aspect ratio intact, which is basically what I need since I wanted to scale it down to fit on our button. Let's zoom in here. Lets us select and expand our button a bit. That should be enough. This is still too big. There should be enough. Excellent. Now, let's also press on o on our keyboard, or go here and press ellipse. And you click on it. We're going to constrain proportions again and decrease its height so that I get her even circle. I'm going to put it here, maybe a bit too more, more. And we're going to put it into background behind my vector. C. Move it here. That looks good. For the color of this overall ellipse element. I'm going to select those same color as I did for my button background, but I'm going to slightly drag it downwards into the left, so it gets a bit darker, so it's a bit more prominent. And this looks good. Maybe we can just group these two elements together, drag them a bit closer, and then decreased with off the whole element. Looks good. I just think that button is a bit. I'm going to just increase the Haida pit just a tad bit. And we're going to send to, sent to the elements. And I'm going to make these two elements central. There we go. Now it looks a bit better. And I'm going to position this element's central to the button and then bit closer so users can identify that this message in a text label is connected to this button and call to action. Now it's your turn. We're almost done with the class, so make sure your call to action button is styled up and ready to go and see you in the next lesson.
9. Hero Image Design: We already chose our graphical element to listen for above this ecology of hero image, but now we can scale it up a bit more. And one way to ask some excitement to the whole background of the hero section is to simply change its color. This works great for emphasizing an individual panel like a hero section, as well as for adding some distinction between the entire page sections. For a more energetic look, you could even use this late gradient. So let's hop into sigma. So let's try to achieve that effect. Let's select my frame and I'm going to copy paste. And now I'm going to click on this little plus in the first section. It's already selected. The linear gradient is going deep, please. I'm going to drag it to the side because I want the gradient to go from left to right. Ok. And for my color, the first gradient am going to select five sixty eight fifty five. And for the second one, I can select 98075. And then a 100. Obviously I can keep the same colors of the other font on this background. So I'm gonna switch this to wait. I'm going to switch my subheading two wide two. I'm just gonna give it a bit of a pass it less capacity, so it's more down the visual hierarchy. Then I'm gonna do the same for my label. And now this contrast we said we always have to keep in mind and use a contrasting color for the button. And this is not, this is not enough. So we can maybe choose a black color for the button. So let's do that. Let's create, let's do this one. Seemed just a bit more like that. Great. That looks okay. And now we can just experiment and try different iterations. Maybe you would prefer if the gradient was more prominent on the contrast was better at the other side. So we can just switch them over here and here. Maybe this looks better for, you know, add a simple shape or illustration. And this technique is a favorite of mine I use very often in my designs, is though decorating your entire background. You can also try including an individual graphic or two in specific positions. And you can use simple geometric shapes for this. For example. These are the three geometric shapes that you can either Creative, they've Mara, just find all iron very easily and you can use similar ones or any ones you wind, you can use flora graphics if that's your thing, whatever you want. So this is where you can simply create by adding these elements into your hero section. I also changed the subheading from all calves to send this case increased the margin between the button and the text label. So an added E3 elements, they just freshen up the design a bit and this is enough. But if you like color background, you can combine this with a, with a gradient there we defined earlier, but then of course you need to shift. You need to change the color of your fonts so it matches in contrast, the background is another idea for the final design. And of course at the end, yellow always provides a good contrasts with black and red. So this is it, this use case is for a productivity app. Yours may be different and you might use different tactics. There's plenty of tactics. These are the three final designs for D productivity app. I personally like this one of the most I'm always found at the clean designs that don't distract as much and pull attention where attention needs to be. So this is, this is your final step. Style up your hero section, image and background to your liking and you're ready to go.
10. Final Thoughts: Great job on completing the course. Thank you for sticking through and I hope you learned a lot. Every tactic I share with you in this class is already grounded in concrete psychological research. Will they work every time? Well, not necessarily, but please remember these are not some random ideas and split tests we pulled from thin air more often than not, they should provide you with a positive boost. And with this analytical approach in mind and the conversion tactics we just learned about, you should be able to scale your website's worth more efficiently. Now's the time to use a community board in this class to ask questions, start conversations, and share your project. Accountability is the glue that bonds commitments to results. If you followed all the steps in this course, you now have your brand new hero section and ready to go. So please upload it to the project gallery. It would be my pleasure to give yourself feedback. It can also tell me what you think about this class. By leaving your review, you can stay up-to-date. And my newest classes and resources by following me here on school share. My intent was to make this course full of actionable content and my newsletters, no difference. So you can subscribe Arnaldo dot email if you're interested. Thank you so much for taking this course. I can't wait to see or hear a sections come to life till next time.
Rinaldo Ugrina, UX Auditor
