Lessons

Lesson Info

Designing a Website

And then that brings us, then, to the issue of editorial work, when you're dealing with interactivity, and that is designing a website. So, the model for the sort of organizational or typographic model, for information on the web, is pretty much a more or less direct translation of book structure, or of newspaper structure. More often newspaper structure. It is set up typically using a grid of columns in a certain number, or to accommodate certain kinds of content that might change. And here's the kind of use of the flexibility of a grid, is that while some kinds of content might be very, very static, others might be changing on a regular basis. They may be database driven. The user may be able to select some content to appear and disappear. So the elements, unlike in a book experience, actually begin to move. So there's a little game you have to play with what's going to get hidden by something, where do you need to have spaces open, and so on. And the newspaper or brochure is a typic...

al model for this kind of website we're going to look at, which is often referred to as brochure ware. So this is a site for a construction architectural services company. It's family owned. Italians of three generations, three or four generations back, who have been working together that long with an incredible attention to detail, sense of craftsmanship and heritage that they brought with them from the old country. Essentially this site functioned as a brochure for their services, introducing a profile, the company, contact information, email form for getting estimates. Very, very sort of prosaic, day to day use kind of thing, but it's primary focus was to show off projects. My research in this case, also, was quite diminished in scope, and that is because I hired Dibiasi for a small project in my apartment, and I was getting quotes and they had given me a business card, which was thoroughly ugly and as you can imagine, not well designed. If you've ever seen construction companies business cards, they tend to be sort of like lawyers business cards, and not very interesting. So, in return for a portion of the cost of the services, I designed the business card for them, which is always something you can do, you know, you can trade. Sometimes things work out. So I chose a typeface for the name that was very strong. It's a very industrial or a slap serif typeface, with very industrial character. I used, essentially, adjust the various weights within that type family. The black, the book weight, and the medium weight, and on occasion for supporting information, I simply used a little bit of a softer sans serif, something slightly condensed as this slap serif is also slightly condensed. It's not quite a regular width font, just to be able to set it back. There's only, this particular typeface, it's contours and the joints are so active, there's a lot energy kind of pulsing around the outer contour of these letter forms. The negative spaces tend to get really, really pinched, so no matter how small or how light I made this supporting information, using the same typeface, I could not get it quiet enough. So I had to add other things so there was enough contrast between it and something else. They got these printed, and they had a really, really good response to them. So they asked me, "What else should we do?" I said, "Well, you should probable have a website." They said, "Well, we have a website." and then I looked at that, and didn't really need to look further, because it was also, as you imagine, somewhat ugly and kind of like the original business card. I said, "Okay, let's talk, let's talk." So the reason I didn't really have to research, because there's already a kind of a feeling. There's a language involved. There's a typeface chosen already, and a sense of a kind of geometry that I could use. So the first thing I did was to gather information from them. What do you want to be able to show? What's the most important part? And that was primarily projects. The project area, or page within the site was going to carry the bulk of the stuff. The most interactivity, the most photography, the most text, and so on, and the other ones were essentially sort of lists, and paragraphs on occasion, with very, very little information. In the sitemap I'm showing, connectivity here between the individual projects and either testimonials or client list directly related, so that if the user wants to investigate the project further, potentially to get a reference to ask about their, Dibiasi's, performance and reliability, is that they could just go find who the client was. But on the project pages, the projects are noted by their location. So after I made the sitemap, I started looking at ideas, and here, again, with the sketches. So, I knew there was going to be some geometry involved. I started looking at things that were very, very heavily gridded out, creating sort of band structures. For list information that could go sideways. That could also contain images, and potentially open and close to reveal more information if you clicked, and it would be like a scrolling accordion kind of a deal. Sort of column structures, with headings bases in either colored or solid squares, with different kind of a square proportion. Really kind of asymmetrical and very, very light configurations. Configurations focused on materials. This is a progression of splices of wood, metal, marble, tile to show off the detail and material. Looking at a dot that's so prevalent in the period at the end of the name, which I added, simply because it's such a strong name, and it ends with this kind of a eeee, and I just wanted a pop at the bottom, and it also became almost like a nail head at the end of the word. Some in which there would be kind of, what is often a very typical letter boxed beauty shot of a project, with very, very minimum navigation. And my goal throughout, was to really keep the navigation as quiet and minimal, at the sort of the top level, or the global level as possible. Because, especially in the project pages, there would be additional sub-navigation, where once you were within the project pages, where the project page is, you'd be able to poke around in different kinds of things. I was looking at some possibilities for images, which are not all that typical in websites, in a graphic way. So I started to thing about, and so, what are those images? The first thing I thought of was, there's something about Italian people and Italian graphic design, especially Italian modern graphic design that is very to the point, very direct. And at the same time not direct in a brusque or an austere way, but in a casual, very finely finessed sort of detailed way. It's almost like Italian cooking. It's about the freshness and the native quality of the ingredients, and how good those elements are just as they are, and you sort of put them together, and then you're done. So I was looking for a strong image form. I looked at photography, and that was a possibility that I thought would be very, very interesting, since as a graphical element for a brand style in web design, you don't see it that often. And I like to make things that you don't see that often, so that it doesn't look like everything else that you see, and therefore, the client stands out. I looked at then also as going really, really bold in a pared down, iconic way. I thought about whether or not a linear drawn icon would be interesting, to pick up on the linear quality of the type forms. Or possibly something that was a little bit straddling the world between dimensional and realistic, but also flat and iconic. And that's sort of what drew me the most. So I made a bunch of icons of tools to use. I didn't really know what I was going to do with them yet, I just made them. In the drawing of these, each of them is pared down to really only what is essential for recognizing first, the physical parts of the particular tool, so that you know what the tools are, and also to show you the truth about how different parts relate to each other. The fact that there is a set of grooves on this part of the drill, and the drill threads actually rotate. That there is shininess, the gleam of light, the rigid zigzag against the softer components of the handle, with enough positive and negative interplay to show you that there is a separation between those two parts and their materials. And then all, essentially kind of, line forms. When you're looking at any kind of an image, there's the thing that it is, and there's the thing that it really is, which is, this is not a hammer. And this is not an adjustable wrench. This is another line. And this is not a drill. This is another line. It happens to be a much fatter, heavier weight line, and it's also made up of two lines, a heavy weight one and a narrow one. So, compositionally, in terms of how the tools work, and this is fundamentally true of the tools themselves, is that they're essentially linear in nature. So there was something there. I developed a set of supporting icons for things that might be used for searching, for gaining access for archives, for calculating estimate costs, and some other details. Ended up not really using these, they kind of disappeared through the process along the way. So, already I established this typography, and I started to look at what are the relationships? What kinds of information are there, and what are the functions of those informational or typographical element? Of course there is the logo. There's headings for groups of information, or for sections. There'd be text that would accompany or support those headings. And then there might be a sub heading that separates one thought, or one sequence of information of text, from another one. In the navigation, I tried to create the greatest contrast between the text material that was really speaking about the subject matter, about the client, about their activities, and thereby, make sure that the quality of this typeface was devoted solely to encompassing, or voicing, their brand, and not really for anything else. So I went to this other sans serif that i used in the business card, the navigation, I had to always intend it was going to be relatively small, relative to the other things. So I began to look at the relative sizes. And these are, if we were looking at not the page, at this size as defined by the size of this monitor, but if we were looking at these elements in the space itself, which we will be soon, you would see that the height of this is essentially half of the height of the heading. So the size relationships, the relative sizing, and the relative weight relationships are very, very specific, so that they carry or that they present a certain degree of energy, or a certain lack of energy A certain presence, emphasis, or de-emphasis for the hierarchy. So I started to attend to the grid. In this case, I went with a column grid, no module, no modules. So that means there are no roads intersecting with the columns, which means that things can kind of float up and down, which they tend to do, because there's going to be, likely, some scrolling involved. So things, at various times, will not be in alignment, and there's no way to control that. Unless, of course, you make the page non-scrolling, which I did, because I hate scrolling. It's so annoying. I'd rather flip, but that's me. So I imagined this with a scrolling page where images of featured projects, and even the content once selected, would kind of populate this sort of central zone. Then the navigation would expand and contract in this kind of accordion or tree formation. Then this stuff would scroll, but the branding and the navigation of course would be sticky. I looked at a horizontal configuration to maximize the proportion of most typical monitors, which is the horizontal form, where you don't have really that much height, especially if you're not going to be scrolling. So I was already thinking well I'm going to try and get us not to scroll to go past this point, because I hate scrolling. And to create, again, you can see how elements of different widths, or the widths of different elements are defined by combinations of two or single columns, as well as the spaces in between. So you get a certain kind of very recognizable pushing and pulling between object and space, or form and space, as you traverse the typography across the top. I'd looked at a side by side, really pulling out the sub-navigation at a much larger, more dramatic size than the actual navigation header, because once you've arrived at a page of content, theoretically, you know that you are there. So the importance of the indicator, or the titling of the page actually decreases, and the content of a page, one could argue, is really more important. Especially if that content is sub-navigation. Is that these are individual links to particular projects that will appear in this location, once you have clicked on them. And then I returned to this grid formation. I'm always looking for something that's going to be a little bit different. It's a good thing not to just jump onto a convention for how information's displayed in a particular medium. On the other hand, it can also be a problem, when you're trying to fight something that works already. Why reinvent the wheel? Well, maybe the wheel ought to be a little bit shinier, in this case. So I was cycling through my sketches, and I had been looking at some of those that had the little grids of dots, and I was like, "What is that? "What is that? "Is it a background texture? "Is it a button of some kind? "Am I gonna organize the navigation around it?" And then I thought, "Well, if you really "want people to focus on the photograph, "and it's description, why don't we drop "the branding down to the bottom," especially if the page is not going to scroll, and it's going to be kind of sticky, so it'll kind of stay in view, and then when you leave the home page, what you're interested in, what you're focused on, is the largest and most pronounced element in the field, but we minimize it. Rather than this giant chunk of text eating up visual realm, like no breathing space, it becomes quiet. So these became little links. They're rollovers. So as you roll over them, name of the dot increases in size, and the name of the project pops out. So there's no listing. You have to investigate a little bit. And it becomes this kind of detail that graphically has a kind of an architectural quality to it. It talks about planning. It talks about the kind of a detailed and detailed thinking about how things work that is very specific to construction in general, but even more so to this particular family. It created a new graphical texture as a contrast to all the linearity in the typography elsewhere. And it was something I hadn't seen before. There it was. So I then took a quick look at what was going to happen with the navigation itself, in terms of it's interactivity. That is, when you roll over, you interact with a navigational link. How do you know that it is about to become active, or that it is even a link? So some change has to occur. So there, in general you can have two and sometimes three states that are used to describe the navigation, and when it's not doing anything, it' the resting state. When you mouse, or roll over it, it's the roll over or mouse over state that tells you that the link is now active, that you can access it. And then, very often, there's kind of a click state, that is as you click down on the link with your mouse, you activate it, and it undergoes another change. I found that that last state was going to be a little bit distracting, but I suddenly looked at some relatively simple kinds of changes. First, just a color and a little graphical detail, a line. Just the color and weight change by itself. Does it get enclosed in a box? Does it change size, since there's space in between? Does the line element happen at the top? Maybe it's a dot, like the other navigation, because navigation is now related to dots. So the connection, informationally, that I'm setting up or that I'm asking the user to understand and make use of, has to do with this dot element. Is the dot going to also accompany some other effect, like the link sliding out of alignment position? Or is it that the link actually becomes less pronounced as you roll over it? So there are some options. So that brings us to execution. So this is the home page. A configuration of some of the tool icons play with the diagonal, as a contrast to the heavy vertical, horizontal axis of the grid. Really extreme contrast in weight, which are again, supported by extreme contrast in line weight and positive-negative relationship within the images. You see here the rollover. I'll do that again, so you're checking it out. So, relatively subtle. On mouse over, the type becomes darker. The dot appears in direct alignment with the dot of the logo, structurally sound. And then when we moved to the project page, I initially had looked at, and so this is a splash page, or the entry page, for the project, the first thing I looked at was using another one of the icons. But because the page was divided more or less in half, and there was this kind of channel of space, the diagonal became kind of confusing. Especially because the content for that particular project, when it's selected, it's going to load over here, and that image would get kind of covered, interfered with. So the cleanliness would kind of disappear, the visual cleanliness. So I went back to looking at some of the photography and thought, well, the photography, in this kind of high contrast, but slightly lightened kind of tonality, carried a similar kind of presence of boldness, but at the same time, allowed the other stuff to be really much bolder. So for me, there was a kind of a congruity, a congruence, a dialog between the boldness of the icons, and the boldness of the photography, even though the icons are very, very black, and the photography is very, very light. So, on mouse over, you get a change in color. I eventually got rid of, or edit out the size change, because that became distracting, and I need to be able to float the project's name directly above it's corresponding dot at a particular height. So that got simplified a little bit. But once you click on it, the dot tell you that this is the project that you've chose, but now the project's title, the image, and it's text appear in all the other locations. Over the image, there's an enlargement icon very, very simple plus sign, means make bigger, augment, almost defaultedly structural, almost a little geeky. And then these very, very pale forward and backward arrows, where you can cycle through in different images for the same project. When you click on the project enlargement, it actually fills the screen. All the other information disappears, and you have a little bit of descriptive information, and a link just to close the view back. I assume, you know, people hate click through, but I assume that for the most part, when you choose to enlarge a photograph, you've done it on purpose, because you want to look at the photograph, and you don't need to be able to fluidly access other portions of information, or other links while you're doing that, because you've decided to do something specific. So, having all the other material all the other links disappear was really no problem for me. Generally, which is not really often the case, I am just in the same way that I hate to scroll, I hate to have to click back and forth between things, you know, where to access another part of the site. It's just me. But what I think is also common to other people. People are in a hurry. So anything you can do. So when you go back from there, you return, you can then cycle over, or mouse over, one of the other navigational elements. In this case it's the profile. You also notice that before we go there, and this will happen again, is that once you have selected the link and the content, therefore, that you are traveling to, that link becomes the page heading and disappears from the navigation, which from an informational design standpoint, is often a no-no. But I did it anyway. Again context is everything. There are only five links. When I've gone to one of them, and I am investigating the content in that area, I don't need to look over there to go find it again. I'm in it. And it's not a very, very deep site, so the potential for confusion or the potential to get lost within site was not really a concern. So when conditions warranted, or dictated, or allow it to happen, you can break a rule here and there. Usually you want your information, your navigation, to remain in the same location, have the same size, over and over again always, on every page. But sometimes it's not necessary. So in rolling over profile, it takes us to the profile page, which is one of the more text heavy pages. So you have an introduction. You'll see that profile has left the global navigation. Projects has returned. Profile is now the header for this page, with an introductory paragraph, and then a very, very brief history. The photograph has changed again, to another construction, subject-based image. Then you have a listing first of primary personnel, that is basically the present chief architect, financial officer, carpenter, and so on, and then you can access the individual employees, like the carpenters, the stone masons and bricklayers, electricians by calling up, by rolling over these and going to another little page that will slide out and go back in, if you so desire. So I kind of hid that, rather than leaving that page and going to another place where you would lose this focus on this. That material is still there, it kind of joins the trades of people to the upper level management, but also keeps them secondary in terms of focus. On mouse over, when you want information, there's a color change, and the dot is used at a much larger scale to house a portrait of the person in question. That link also functions not only just as a mouse over, but as a direct email link, that'll take you to the email form on the page.