1. Introduction

1.1 Introduction

Web design patterns are solutions to common design problems. And most of the time these patterns are implemented in the same way. But there's nothing stopping us from taking a more creative approach to them, and that's what we'll be exploring in this short course. We’ll have a look at six creative web design patterns, see how they're implemented, and also discuss when and where you can and should implement them. I'm Andy Pendular, welcome to Exploring Creative Web Design Patterns. Let's begin.

2. The Creative Patterns

2.1 Big Typography

The first pattern we'll explore is typography. This is a crucial component in every web page, and is usually the reason behind a good or a bad user experience. That's because the typography will set the theme for a website, will set its personality, and also will help deliver the message. Now lately, typography started to play a much bigger role in web design, because people have started to recognize its importance. They've started to give it the attention that it needs and also they began to experiment and be more creative with it. While in the beginning you were only limited to using a couple of fonts on the web basically to make sure that everyone was seeing those fonts in the same way. Nowadays we have font face, we have type kit, we have a whole range of services that can give us pretty much any font that we want on the web without affecting the user experience. Now to give you an example of how typography can really affect the personality of a website, let's make a quick experiment here. This is Shopify's website, it's a very well designed website from my point of view. And it has beautiful typography from the headings to the body text, everything is very nice. Now, what would happen if we were to change all the fonts in this website to Arial? So I'm gonna do that right now, I'm just gonna do this in the browser really. Let me find Arial here, okay. So now every font on the website is set to Arial and look at the difference. I'm just gonna toggle this on and off so you can see the difference. Let's see further down. Yeah, so with Arial, it just looks incomplete. Right, it looks bland, it looks like it's almost finished, we just need to add a font to make it look nice. And that's the power of good typography, we get from bland to very good looking. So typography is important now, getting creative with typography doesn't just mean using a fancy typeface. It also means using big font sizes, and we've seen this a lot lately. Designers are starting to experiment with large font sizes so that they can deliver their messages faster and better. And also put more emphasis where it needs on the text. Now here's a website I really like. Right off the bat you're greeted with this welcome message that also lets you know what the website is all about. In this case, managing domains, no images, no fireworks, just text. Scrolling down we'll find the benefits of using this service. Again, just text that's emphasized by its size and color. Type Nugget also does a great job of delivering a strong and concise message by using this large heading. It's one of the first things you see when you open the page and it immediately tells you what the website is all about. The rest of the text on the page is also larger than usual, but this allows us to scan the page quickly and understand the message. Also take a look at these images, or rather illustrations. Usually you would use text to reinforce an image but here it's the other way around. All the weight is put on the text and the images are just here to support the type. Humaan take a very creative approach to using big typography. Each of their projects has an accompanying image that features the first letter of the client name. Here is the website of Patrick David, a Front-End Developer. He also uses big typography to either say hello, divide the website into sections or convey an important message like this one in the footer. Another example is the Digital Thinkers Conference website where big typography is used for showing the speakers. The examples can go on and on, but I hope you got the general idea of this creative approach to using typography. Now you should be careful about how you're gonna use this. Images should not compete with text, it's either one or the other. So if we're gonna use a big typography, make sure you dial down the images and use lots of white space. Now when it comes to the how, you should always use a typography scale. A very useful tool is Type Scale. You enter the base font size, choose the scale, and you get a visual representation of eight styles you can then grab via CSS and use right away. And that was the first pattern. In the next lesson, we'll explore geometric shapes. That's coming up next.