So, I want to talk about some common web design patterns and this is going to be a free-flowing survey of some common design elements that are frequently found on websites. I'll include a lot of examples from existing sites as illustrations, but let me explain what I mean by the word design pattern. One definition of pattern is a repeated decorative design. That's not what I mean here. I mean the other definition for the word pattern and that is a design used as a guide. So, design pattern is basically an agreed upon structure for certain design tasks. So, if you look at this generic wireframe of a site, you see some patterns here. You see there's a header for the logo and some navigation, you have a content area on the right, you have a sidebar on the left, and you have a footer on the bottom. A header, content, sidebar, and footer, you can think about them as design patterns, and I'm going to talk about a lot of them in this video. So, let's start with the header. That's usually includes a logo and navigation, maybe a search and something we haven't talked about which are site alerts, and I'll give you an example in a second. So, let's look at a few websites. Here is the site for the Institute of Domestic Technology, and the header here includes many of the elements I just mentioned. There's a logo, the navigation right here, a utility navigation on the top right, and a search that when clicked, opens up a search bar. What's interesting about this site is that when you look at it on a mobile device, you actually don't get the pattern, again, a pattern of a hamburger that we see on a lot of other sites. A hamburger, basically, three lines standing in for a menu button that then opens the menu. On this site, the menu is so small that we didn't need to hide the navigation on small screens because it always just fits. That is usually not true for other sites, but this one is a fairly small site. Another example here is a site for an organization called Cell Dogs, and what we have here is dropdowns, an easy way to get to secondary pages straight from the homepage. If you look at this in the mobile device, we have the mobile menu. It's not a hamburger, it's not the reliance, it's the word menu, when you click it, you get a list of all the links just in one row. This example is from the UCLA Lab School, and what's interesting here is that the menu when you first get to the homepage, obviously, there's a lot of fun animations going on in the top half of the screen, but the menu is on the bottom when you first get there. It also has a dropdown menu, but since the menu is on the bottom, it's kind of a drop-up menu in a way, so the secondary links go to the top. But if you scroll down, the dropdown menu is functioning in the more normal way. The other thing that happens here is if you scroll further down the page, the navigation, the entire header is sticky, so that's a design pattern that lets the user access the navigation at all times no matter how long they've scrolled down. On many sites, you scroll down, you lose the navigation, you have to scroll back up if you want to go somewhere else. On this site, we decided to keep them around. So, again, the pro for sticky navigation menu is that the links will always be around and accessible. A reason not to do it might be that it's a little distracting if you want a user to focus solely on the content of each page. It also takes a little strip away from the screen real estate. The browser window is not as tall as it could be for the content of your site. It kind of depends on the project what pattern to implement. Another site we've been looking at a lot, the Pasadena Conservatory of Music. Here, we implemented something that at the time we coined fat menus. So, if you click on a main menu, you get this giant dropdown with some text, images, and the links. At the time, we liked the energy that is created here and that you have a lot of space to present a lot of information in these dropdowns. What's interesting though is that just in the last few weeks, we worked with the client to overhaul the website and the website that's up currently as we speak actually lost these fat menus. Now, we have much more regular dropdown menus and also it was part of an overhaul that also changed the main level navigation quite a bit. There had been a few years, the needs of the clients change, so we redesigned this item, the fat menus are no longer here. Let's look at one more example of a header. This website we designed for an environmental organization in Los Angeles, and it's somewhat of a publication. They wrote a Climate Action Framework and this website presents this writing. If you scroll down, you get an introduction to the content. In the top right corner, you have a hamburger menu. So, basically, what happens here is that the main navigation is always hidden behind a menu. Most of the time, that's only happens on mobile devices when there isn't enough space to display the navigation. But here, we decided that we didn't want to overwhelm the viewer right away, so they have to do this extra click. Usually, I'm not a big fan to make the user have to click on a menu link to see any kind of navigation, but here, on this site, in this particular instance, it seemed appropriate. Let's talk quickly about a site alert. That's a design pattern for breaking news or something very important, and it's usually a strip that appears right above the header. Here is the Pasadena Conservatory of Music website and something that they had at the end of the year to ask people to donate for their end of the year giving, and this will pop-up on every single page of the entire site until you close it. That the user has the option to either click on the button or to close it, and once you close it, it will not show on other pages. So, again, a site alert something every user should see when they get to any page of the site.
