[MUSIC] In this video, we'll talk about the aesthetics of web design, and in particular. How contents should be laid out on the page in order to create a pleasing visual experience for the end user. We'll also mention some other graphical design issues related to modern web applications. However, before doing this let's take a little break. You've worked very hard to get to this final module, so you deserve it. Sit back and enjoy the following. [MUSIC] This is a scene from the movie, The Good The Good, the Bad and the Ugly, by Sergio Leone. An Italian filmmaker and the originator of the Spaghetti Western film genre. This is his most famous film and this is the most famous scene in that film. The location of the cemetery in this scene is actually near Burgos, Spain. And the shootout is the most famous famous, and the most electrifying climaxes in cinematic history. The soundtrack was composed by Ennio Morricone. It's considered by many as the greatest and most original film scores in history. If you get a chance, watch the movie. But before you do, let's talk about how this relates to web application design. Well, besides the fact that both the cinematography and the musical score are aesthetically pleasing. Something we should also strive for in our website designs, I'd like to play on the title, The Good, the Bad, and the Ugly. And talk about the good, the bad, and the ugly in website design. I'd like to start with the good. The principles associated with a pleasing visual display are actually quite old. This is a picture of the Vitruvian Man by Leonardo Da Vinci. The drawing is based on the correlation of ideal human proportions with geometry. Described by the ancient Roman architect Vitruvius in book three of De Architectura. The drawing and the text are sometimes called the canon of Proportions. This image exemplifies the blend of art and science during the Renaissance. And provides the perfect example of Da Vinci's keen interest in proportion. This drawing is also said to illustrate the golden ratio. Used to achieve balance and beauty in many Renaissance paintings and sculptures. The golden ratio, by the way, also appears in the Mona Lisa and was employed by Michelangelo, Rembrandt, Dali and others. We don't have the time to go into these principles in this class, but they are learnable. And I encourage you to investigate them on your own. Let's take a look at a good website example. This is a site called minimums, minimums takes a very bold approach to the way that they display their content. Levering a grid based website design and big typography, along with full width, high quality images. Their site serves as a really nice example for how to properly execute a grid structure. While still maintaining a nice visual hierarchy in the design. As an example of the bad, I'm showing you here a web site that's been hijacked. The point being, that if you're not careful regarding security even the best design will be compromised. Now let's take a look at the ugly, here's a screenshot of the worst website in the world. This website is actually constructed for educational purposes. To really appreciate its full awfulness, you need to look at it live. So let me show you that, in a live view, you can see that it has blinking graphics. Multiple fonts and colors that are used together, and just an awful color scheme. In fact as this site is meant to be educational, if you go down to the click here button. And notice, that even here was misspelt, it'll tell you all of the things wrong with this website. So there are something like 60 some design flaws with this website. I encourage you to go to theworldsworstwebsiteveer.com and read through these. It's instructive and you'll learn something I think by reading this. Let's talk about layout, layout is how your content appears on the screen, and I'll show you a few examples. I think Facebook has created a very clean and simple layout, if you see how they arranged their content. It's very intuitive, it's very easy to sign users up, and you'll see it's very easy to log in or create a new account. Here's another example, a site called Freshbooks that has cloud based accounting. So in this live version of the app I'll show you something that's now quite common. And that is to put a lot of content on a single page that you can access by just scrolling down. Previously in the early versions of web sites there were just a lot of links on a single page and you go from page to page. The trend now is to put a lot on a single page that you can scroll down and view more and more content. Another thing I'd like to talk about with respect to layout is responsive design. The goal of a responsive design is to provide an optimal viewing and interaction experience. Across a wide range of devices, from desktop monitors all the way down to mobile phones. This is done by adapting the layout to support easy reading and navigation. With a minimum amount of resizing, panning, and scrolling no matter what the platform is you're viewing the content on. The design approach uses a fluid proportion based grid. Along with flexible images and then CSS3 media queries in order to construct this fluid design. Let me show you an example, the FreshBooks page I showed you previously actually is a responsive design. As we adjust the size you'll see that the images adjust so this would actually look fine on a phone. You'll see that all of the images get rescaled and made to fit on the appropriate size platform. If you scale back out you'll see that the design shifts so this is an example of a responsive design. Now I should mention that it's very important to provide responsive design nowadays. Because more and more users of web applications are accessing the web application through a mobile. Furthermore, by providing a responsive design like this, it's not always necessary for a company to create a native app for a phone. The Web app may work just fine rather than providing a mobile application for the phone. The Web app can serve as your mobile app, so we're seeing that increasingly. That a responsive design is all that a company needs to address their mobile market. The next thing I'd like to talk to you about with respect to lay out is wire framing. It's a good idea to just lay out a rough wireframe of what you want your site to look like before you spend a lot of time building this site. So this is common to lay something else like this for you can show it to the customer. And the customer can get a quick overview of your thoughts and what the site will look like. And you in get early feedback on what the customer likes and dislikes by showing them such a wireframe. Another common thing is to lay out the navigational structure. So that the customer gets the sense of how things will flow through our website. Here's one that I constructed based on the University of New Mexico homepage and how things link off of it.
